2002 Prentice Hall, Inc. All rights reserved. Chapter 18 – Multimedia: Images, Animation, Audio...

2002 Prentice Hall, Inc. All rights reserved.

Chapter 18 – Multimedia: Images, Animation, Audio and Video

Outline

18.1 Introduction18.2 Loading, Displaying and Scaling Images18.3 Animating a Series of Images18.4 Customizing LogoAnimator via Applet Parameters

18.5 Image Maps18.6 Loading and Playing Audio Clips18.7 Internet and World Wide Web Resources


18.1 Introduction

• Multimedia– Use of sound, image, graphics and video

– Makes applications “come alive”


18.1 Introduction (cont.)

• This chapter focuses on– Image-manipulation basics

– Creating smooth animations

– Customizing animation applets

– Playing audio files (via AudioClip interface)

– Creating image maps


18.2 Loading, Displaying and Scaling Images

• Demonstrate some Java multimedia capabilities– java.awt.Image

• abstract class (cannot be instantiated)

• Can represent several image file formats

– e.g., GIF, JPEG and PNG

– javax.swing.ImageIcon• Concrete class

2002 Prentice Hall, Inc.All rights reserved.

Outline

LoadImageAndScale.java

Lines 14 and 20

Lines 15 and 21

Line 28

Lines 32-33

1 // Fig. 18.1: LoadImageAndScale.java2 // Load an image and display it in its original size3 // and scale it to twice its original width and height.4 // Load and display the same image as an ImageIcon.5 6 // Java core packages7 import java.applet.Applet;8 import java.awt.*;9 10 // Java extension packages11 import javax.swing.*;12 13 public class LoadImageAndScale extends JApplet {14 private Image logo1; 15 private ImageIcon logo2; 16 17 // load image when applet is loaded18 public void init()19 {20 logo1 = getImage( getDocumentBase(), "logo.gif" );21 logo2 = new ImageIcon( "logo.gif" );22 }23 24 // display image25 public void paint( Graphics g )26 {27 // draw original image28 g.drawImage( logo1, 0, 0, this );29 30 // draw image scaled to fit width of applet31 // and height of applet minus 120 pixels32 g.drawImage( logo1, 0, 120,33 getWidth(), getHeight() - 120, this );34

Objects of class Image must be created via method getImage

Objects of class ImageIcon may be

created via ImageIcon constructor

Method drawImage displays Image object on screen

Overloaded method drawImage displays scaled Image object on screen


Outline

LoadImageAndScale.java (Part 2)

Line 36

Program Output

35 // draw icon using its paintIcon method36 logo2.paintIcon( this, g, 180, 0 );37 }38 39 } // end class LoadImageAndScale

Method paintIcon displays ImageIcon object on screen


18.3 Animating a Series of Images

• Demonstrate animating series of images– Images are stored in array


Outline

LogoAnimator.java

Lines 14 and 34

1 // Fig. 18.2: LogoAnimator.java2 // Animation a series of images3 4 // Java core packages5 import java.awt.*;6 import java.awt.event.*;7 8 // Java extension packages9 import javax.swing.*;10 11 public class LogoAnimator extends JPanel12 implements ActionListener {13 14 protected ImageIcon images[]; // array of images15 16 protected int totalImages = 30, // number of images17 currentImage = 0, // current image index18 animationDelay = 50, // millisecond delay19 width, // image width20 height; // image height21 22 protected String imageName = "deitel"; // base image name23 protected Timer animationTimer; // Timer drives animation24 25 // initialize LogoAnimator by loading images26 public LogoAnimator()27 {28 initializeAnimation();29 }30 31 // initialize animation32 protected void initializeAnimation()33 {34 images = new ImageIcon[ totalImages ];35

Create array that stores series of ImageIcon objects


Outline

LogoAnimator.java (Part 2)

Lines 37-39

Lines 46-52

Lines 55-58 and 65

36 // load images37 for ( int count = 0; count < images.length; ++count )38 images[ count ] = new ImageIcon( getClass().getResource(39 "images/" + imageName + count + ".gif" ) );40 41 width = images[ 0 ].getIconWidth(); // get icon width42 height = images[ 0 ].getIconHeight(); // get icon height43 }44 45 // display current image 46 public void paintComponent( Graphics g )47 {48 super.paintComponent( g );49 50 images[ currentImage ].paintIcon( this, g, 0, 0 );51 currentImage = ( currentImage + 1 ) % totalImages;52 }53 54 // respond to Timer's event55 public void actionPerformed( ActionEvent actionEvent )56 {57 repaint(); // repaint animator58 }59 60 // start or restart animation61 public void startAnimation()62 {63 if ( animationTimer == null ) {64 currentImage = 0; 65 animationTimer = new Timer( animationDelay, this );66 animationTimer.start();67 }68 else // continue from last image displayed69 if ( ! animationTimer.isRunning() )70 animationTimer.restart();

Load ImageIcon objects into array

Override method paintComponent of

class JPanel to display ImageIcons

Timer invokes method actionPerformed every animationDelay (50)

milliseconds


Outline


Line 76

71 }72 73 // stop animation timer74 public void stopAnimation()75 {76 animationTimer.stop();77 }78 79 // return minimum size of animation80 public Dimension getMinimumSize()81 { 82 return getPreferredSize(); 83 }84 85 // return preferred size of animation86 public Dimension getPreferredSize()87 {88 return new Dimension( width, height );89 }90 91 // execute animation in a JFrame92 public static void main( String args[] )93 {94 // create LogoAnimator95 LogoAnimator animation = new LogoAnimator();96 97 // set up window98 JFrame window = new JFrame( "Animator test" );99 100 Container container = window.getContentPane();101 container.add( animation );102 103 window.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );104

Method stop indicates that Timer should stop

generating events


Outline


105 // size and display window106 window.pack();107 Insets insets = window.getInsets();108 109 window.setSize( animation.getPreferredSize().width + 110 insets.left + insets.right,111 animation.getPreferredSize().height +112 insets.top + insets.bottom );113 114 window.setVisible( true );115 animation.startAnimation(); // begin animation116 117 } // end method main118 119 } // end class LogoAnimator


18.4 Customizing LogoAnimator via Applet Parameters

• Customize applet via changing applet parameters<html><applet code = "LogoApplet.class" width = 400 height = 400><param name = "totalImages" value = "30"><param name = "imagename" value = "deitel"><param name = "animationdelay" value = "200"></applet></html>


Outline

LogoAnimator2.java

Lines 10 and 19-26

1 // Fig. 18.3: LogoAnimator2.java2 // Animating a series of images3 4 // Java core packages5 import java.awt.*;6 7 // Java extension packages8 import javax.swing.*;9 10 public class LogoAnimator2 extends LogoAnimator {11 12 // default constructor13 public LogoAnimator2()14 {15 super();16 }17 18 // new constructor to support customization 19 public LogoAnimator2( int count, int delay, String name )20 {21 totalImages = count;22 animationDelay = delay;23 imageName = name;24 25 initializeAnimation();26 }27 28 // start animation as application in its own window29 public static void main( String args[] )30 {31 // create LogoAnimator32 LogoAnimator2 animation = new LogoAnimator2();33 34 // set up window35 JFrame window = new JFrame( "Animator test" );

Create class that extends class LogoAnimator


Outline

LogoAnimator2.java (Part 2)

36 37 Container container = window.getContentPane();38 container.add( animation );39 40 window.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );41 42 // size and display window43 window.pack();44 Insets insets = window.getInsets();45 46 window.setSize( animation.getPreferredSize().width + 47 insets.left + insets.right,48 animation.getPreferredSize().height +49 insets.top + insets.bottom );50 51 window.setVisible( true );52 animation.startAnimation(); // begin animation53 54 } // end method main55 56 } // end class LogoAnimator2


Outline

LogoApplet.java

Line 31

1 // Fig. 18.4: LogoApplet.java2 // Customizing an applet via HTML parameters.3 //4 // HTML parameter "animationdelay" is an int indicating5 // milliseconds to sleep between images (default 50).6 //7 // HTML parameter "imagename" is the base name of the images8 // that will be displayed (i.e., "deitel" is the base name9 // for images "deitel0.gif," "deitel1.gif," etc.). The applet10 // assumes that images are in an "images" subdirectory of11 // the directory in which the applet resides.12 //13 // HTML parameter "totalimages" is an integer representing the14 // total number of images in the animation. The applet assumes15 // images are numbered from 0 to totalimages - 1 (default 30).16 17 // Java core packages18 import java.awt.*;19 20 // Java extension packages21 import javax.swing.*;22 23 public class LogoApplet extends JApplet { 24 25 // obtain parameters from HTML and customize applet26 public void init()27 {28 String parameter;29 30 // get animation delay from HTML document31 parameter = getParameter( "animationdelay" );32 33 int animationDelay = ( parameter == null ?34 50 : Integer.parseInt( parameter ) );35

Method getParameter obtains parameter value

from HTML file


Outline

LogoApplet.java (Part 2)

Line 37

Line 40

Lines 51-52

36 // get base image name from HTML document37 String imageName = getParameter( "imagename" );38 39 // get total number of images from HTML document40 parameter = getParameter( "totalimages" );41 42 int totalImages = ( parameter == null ? 43 0 : Integer.parseInt( parameter ) );44 45 // create instance of LogoAnimator46 LogoAnimator2 animator;47 48 if ( imageName == null || totalImages == 0 )49 animator = new LogoAnimator2();50 else51 animator = new LogoAnimator2( totalImages, 52 animationDelay, imageName );53 54 // attach animator to applet and start animation55 getContentPane().add( animator );56 animator.startAnimation();57 58 } // end method init59 60 } // end class LogoApplet

Obtain "imagename" parameter value from

HTML file

Obtain "totalimages" parameter value from HTML file

Use parameter values to instantiate

LogoAnimator2 object


18.5 Image Maps

• Image map– Contains hot areas

• Message appears when user moves cursor over these areas


Outline

ImageMap.java

Lines 23-35

1 // Fig. 18.5: ImageMap.java2 // Demonstrating an image map.3 4 // Java core packages5 import java.awt.*;6 import java.awt.event.*;7 8 // Java extension packages9 import javax.swing.*;10 11 public class ImageMap extends JApplet {12 private ImageIcon mapImage;13 14 private String captions[] = { "Common Programming Error",15 "Good Programming Practice", 16 "Graphical User Interface Tip", "Performance Tip", 17 "Portability Tip", "Software Engineering Observation",18 "Testing and Debugging Tip" };19 20 // set up mouse listeners21 public void init()22 {23 addMouseListener(24 25 new MouseAdapter() {26 27 // indicate when mouse pointer exits applet area28 public void mouseExited( MouseEvent event )29 {30 showStatus( "Pointer outside applet" );31 }32 33 } // end anonymous inner class34 35 ); // end addMouseListener method call

Add MouseMotionListener for when mouse cursor exits applet

area


Outline

ImageMap.java (Part 2)

Lines 37-50

Lines 63-76

36 37 addMouseMotionListener(38 39 new MouseMotionAdapter() {40 41 // determine icon over which mouse appears42 public void mouseMoved( MouseEvent event )43 {44 showStatus( translateLocation( 45 event.getX(), event.getY() ) );46 }47 48 } // end anonymous inner class49 50 ); // end addMouseMotionListener method call51 52 mapImage = new ImageIcon( "icons.png" ); 53 54 } // end method init55 56 // display mapImage57 public void paint( Graphics g )58 {59 mapImage.paintIcon( this, g, 0, 0 );60 }61 62 // return tip caption based on mouse coordinates63 public String translateLocation( int x, int y )64 {65 // if coordinates outside image, return immediately66 if ( x >= mapImage.getIconWidth() || 67 y >= mapImage.getIconHeight() ) 68 return "";69

Add MouseMotionListener for hot areas

Test coordinates to determine the icon over which the mouse

was positioned


Outline


70 // determine icon number (0 - 6)71 int iconWidth = mapImage.getIconWidth() / 7;72 int iconNumber = x / iconWidth;73 74 // return appropriate icon caption75 return captions[ iconNumber ];76 }77 78 } // end class ImageMap


Outline


Program Output


18.6 Loading and Playing Audio Clips

• Playing audio clips– Method play of class Applet– Method play of class AudioClip– Java’s sound engine

• Supports several audio file formats

– Sun Audio (.au)

– Windows Wave (.wav)

– Macintosh AIFF (.aif or .aiff)

– Musical Instrument Digital Interface (MIDI) (.mid)


Outline

LoadAudioAndPlay.java

Line 13

1 // Fig. 18.6: LoadAudioAndPlay.java2 // Load an audio clip and play it.3 4 // Java core packages5 import java.applet.*;6 import java.awt.*;7 import java.awt.event.*;8 9 // Java extension packages10 import javax.swing.*;11 12 public class LoadAudioAndPlay extends JApplet {13 private AudioClip sound1, sound2, currentSound; 14 private JButton playSound, loopSound, stopSound;15 private JComboBox chooseSound;16 17 // load the image when the applet begins executing18 public void init()19 {20 Container container = getContentPane();21 container.setLayout( new FlowLayout() );22 23 String choices[] = { "Welcome", "Hi" };24 chooseSound = new JComboBox( choices );25 26 chooseSound.addItemListener(27 28 new ItemListener() {29 30 // stop sound and change to sound to user's selection31 public void itemStateChanged( ItemEvent e )32 {33 currentSound.stop();34

Declare three AudioClip objects


Outline

LoadAudioAndPlay.java (Part 2)

Lines 62-63

35 currentSound = 36 chooseSound.getSelectedIndex() == 0 ?37 sound1 : sound2;38 }39 40 } // end anonymous inner class41 42 ); // end addItemListener method call43 44 container.add( chooseSound );45 46 // set up button event handler and buttons47 ButtonHandler handler = new ButtonHandler();48 49 playSound = new JButton( "Play" );50 playSound.addActionListener( handler );51 container.add( playSound );52 53 loopSound = new JButton( "Loop" );54 loopSound.addActionListener( handler );55 container.add( loopSound );56 57 stopSound = new JButton( "Stop" );58 stopSound.addActionListener( handler );59 container.add( stopSound );60 61 // load sounds and set currentSound62 sound1 = getAudioClip( getDocumentBase(), "welcome.wav" );63 sound2 = getAudioClip( getDocumentBase(), "hi.au" );64 currentSound = sound1;65 66 } // end method init67

Method getAudioClip loads audio file into AudioClip object


Outline

LoadAudioAndPlay.java (Part 3)

Line 71

Line 81

Line 84

68 // stop the sound when the user switches Web pages69 public void stop()70 {71 currentSound.stop();72 }73 74 // private inner class to handle button events75 private class ButtonHandler implements ActionListener {76 77 // process play, loop and stop button events78 public void actionPerformed( ActionEvent actionEvent )79 {80 if ( actionEvent.getSource() == playSound ) 81 currentSound.play();82 83 else if ( actionEvent.getSource() == loopSound ) 84 currentSound.loop();85 86 else if ( actionEvent.getSource() == stopSound ) 87 currentSound.stop();88 }89 }90 91 } // end class LoadAudioAndPlay

Method stop stops playing the audio clip

Method play starts playing the audio clip

Method loops plays the audio clip continually

2002 Prentice Hall, Inc. All rights reserved. Chapter 18 – Multimedia: Images, Animation, Audio...

Documents

Transcript of 2002 Prentice Hall, Inc. All rights reserved. Chapter 18 – Multimedia: Images, Animation, Audio...