Chapter 19 – Multimedia: Images, Animation and Audio

(1)

Chapter 19 – Multimedia: Images,

1

Animation and Audio

Outline

19.1 Introduction

19.2 Loading, Displaying and Scaling Images 19.3 Animating a Series of Images

19.4 Image Maps

19.5 Loading and Playing Audio Clips

19.6 Internet and World Wide Web Resources

19.7 (Optional Case Study) Thinking About Objects:

Animation and Sound in the View

(2)

2

19.1 Introduction

• Multimedia

– Use of sound, image, graphics and video – Makes applications “come alive”

(3)

3

19.1 Introduction (cont.)

• This chapter focuses on

– Image-manipulation basics – Creating smooth animations

– Playing audio files (via AudioClip interface) – Creating image maps

(4)

19.2 Loading, Displaying and

4

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

(5)



Outline

LoadImageAndSca le.java

Line 15 Line 16 Line 22 Line 25

1 // Fig. 19.1: LoadImageAndScale.java

2 // Load an image and display it in its original size and twice its 3 // original size. Load and display the same image as an ImageIcon.

4 import java.applet.Applet;

5 import java.awt.*;

6 import javax.swing.*;

7

8 public class LoadImageAndScale extends JApplet { 9 private Image logo1;

10 private ImageIcon logo2;

11

12 // load image when applet is loaded 13 public void init()

14 {

15 logo1 = getImage( getDocumentBase(), "logo.gif" );

16 logo2 = new ImageIcon( "logo.gif" );

17 } 18

19 // display image

20 public void paint( Graphics g ) 21 {

22 g.drawImage( logo1, 0, 0, this ); // draw original image 23

24 // draw image to fit the width and the height less 120 pixels 25 g.drawImage( logo1, 0, 120, getWidth(), getHeight() - 120, this );

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

(6)

 2003 Prentice Hall, Inc.

Outline

LoadImageAndSca le.java

Line 28

Program Output

26

27 // draw icon using its paintIcon method 28 logo2.paintIcon( this, g, 180, 0 );

29 } 30

31 } // end class LoadImageAndScale

Method paintIcon displays ImageIcon object on screen

(7)

7

19.3 Animating a Series of Images

• Demonstrate animating series of images

– Images are stored in array

(8)

Outline

LogoAnimator.ja va

Line 23

Lines 26 and 28

1 // Fig. 19.2: LogoAnimator.java 2 // Animation of a series of images.

4 import java.awt.event.*;

6

7 public class LogoAnimator extends JPanel implements ActionListener { 8

9 private final static String IMAGE_NAME = "deitel"; // base image name 10 protected ImageIcon images[]; // array of images

11

12 private int totalImages = 30; // number of images 13 private int currentImage = 0; // current image index 14 private int animationDelay = 50; // millisecond delay 15 private int width; // image width

16 private int height; // image height 17

18 private Timer animationTimer; // Timer drives animation 19

20 // initialize LogoAnimator by loading images 21 public LogoAnimator()

22 {

23 images = new ImageIcon[ totalImages ];

24

25 // load images

26 for ( int count = 0; count < images.length; ++count )

27 images[ count ] = new ImageIcon( getClass().getResource(

28 "images/" + IMAGE_NAME + count + ".gif" ) );

Create array that stores series of ImageIcon objects

Load ImageIcon objects into array

(9)



Outline

LogoAnimator.ja va

Lines 36-45 Lines 48-51

29

30 // this example assumes all images have the same width and height 31 width = images[ 0 ].getIconWidth(); // get icon width

32 height = images[ 0 ].getIconHeight(); // get icon height 33 }

34

35 // display current image

36 public void paintComponent( Graphics g ) 37 {

38 super.paintComponent( g );

39

40 images[ currentImage ].paintIcon( this, g, 0, 0 );

41

42 // move to next image only if timer is running 43 if ( animationTimer.isRunning() )

44 currentImage = ( currentImage + 1 ) % totalImages;

45 } 46

47 // respond to Timer's event

48 public void actionPerformed( ActionEvent actionEvent ) 49 {

50 repaint(); // repaint animator 51 }

52

53 // start or restart animation 54 public void startAnimation() 55 {

Override method

paintComponent of class JPanel to display ImageIcons

Timer invokes method actionPerformed every

animationDelay (50) milliseconds

(10)

Outline

LogoAnimator.ja va

Line 69

56 if ( animationTimer == null ) { 57 currentImage = 0;

58 animationTimer = new Timer( animationDelay, this );

59 animationTimer.start();

60 }

61 else // continue from last image displayed 62 if ( ! animationTimer.isRunning() ) 63 animationTimer.restart();

64 } 65

66 // stop animation timer 67 public void stopAnimation() 68 {

69 animationTimer.stop();

70 } 71

72 // return minimum size of animation 73 public Dimension getMinimumSize() 74 { 75 return getPreferredSize();

76 } 77

78 // return preferred size of animation 79 public Dimension getPreferredSize() 80 { 81 return new Dimension( width, height );

82 } 83

Method stop indicates that Timer should stop

generating events

(11)



Outline

LogoAnimator.ja va

84 // execute animation in a JFrame

85 public static void main( String args[] ) 86 {

87 LogoAnimator animation = new LogoAnimator(); // create LogoAnimator 88

89 JFrame window = new JFrame( "Animator test" ); // set up window 90 window.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

91

92 Container container = window.getContentPane();

93 container.add( animation );

94

95 window.pack(); // make window just large enough for its GUI 96 window.setVisible( true ); // display window

97 animation.startAnimation(); // begin animation 98

99 } // end method main 100

101 } // end class LogoAnimator

(12)

12

19.4 Image Maps

• Image map

– Contains hot areas

• Message appears when user moves cursor over these areas

(13)



Outline

ImageMap.java Lines 18-30

1 // Fig. 19.3: ImageMap.java 2 // Demonstrating an image map.

6

7 public class ImageMap extends JApplet { 8 private ImageIcon mapImage;

9

10 private static final String captions[] = { "Common Programming Error", 11 "Good Programming Practice", "Graphical User Interface Tip",

12 "Performance Tip", "Portability Tip",

13 "Software Engineering Observation", "Error-Prevention Tip" };

14

15 // set up mouse listeners 16 public void init()

17 {

18 addMouseListener(

19

20 new MouseAdapter() { // anonymous inner class 21

22 // indicate when mouse pointer exits applet area 23 public void mouseExited( MouseEvent event ) 24 {

25 showStatus( "Pointer outside applet" );

26 } 27

28 } // end anonymous inner class 29

30 ); // end call to addMouseListener

Add MouseListener for when mouse pointer exits applet area

(14)

Outline

ImageMap.java Lines 32-45

Lines 63-76

31

32 addMouseMotionListener(

33

34 new MouseMotionAdapter() { // anonymous inner class 35

36 // determine icon over which mouse appears 37 public void mouseMoved( MouseEvent event ) 38 {

39 showStatus( translateLocation(

40 event.getX(), event.getY() ) );

41 } 42

45 ); // end call to addMouseMotionListener 46

47 mapImage = new ImageIcon( "icons.png" ); // get image 48

49 } // end method init 50

51 // display mapImage

52 public void paint( Graphics g ) 53 {

54 super.paint( g );

55 mapImage.paintIcon( this, g, 0, 0 );

56 } 57

Add MouseMotionListener for hot areas

(15)



Outline

ImageMap.java Line 62

58 // return tip caption based on mouse coordinates 59 public String translateLocation( int x, int y ) 60 {

61 // if coordinates outside image, return immediately

62 if ( x >= mapImage.getIconWidth() || y >= mapImage.getIconHeight() ) 63 return "";

64

65 // determine icon number (0 - 6)

66 int iconWidth = mapImage.getIconWidth() / 7;

67 int iconNumber = x / iconWidth;

68

69 return captions[ iconNumber ]; // return appropriate icon caption 70 }

71

72 } // end class ImageMap

Test coordinates to determine the icon over which the mouse

was positioned

(16)

Outline

ImageMap.java Program Output

(17)



Outline

ImageMap.java Program Output

(18)

19.5 Loading and Playing Audio

18

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)

(19)



Outline

LoadAudioAndPla y.java

Line 10

1 // Fig. 19.4: LoadAudioAndPlay.java 2 // Load an audio clip and play it.

3

4 import java.applet.*;

8

9 public class LoadAudioAndPlay extends JApplet {

10 private AudioClip sound1, sound2, currentSound;

11 private JButton playSound, loopSound, stopSound;

12 private JComboBox chooseSound;

13

14 // load the image when the applet begins executing 15 public void init()

16 {

17 Container container = getContentPane();

18 container.setLayout( new FlowLayout() );

19

20 String choices[] = { "Welcome", "Hi" };

21 chooseSound = new JComboBox( choices );

22

23 chooseSound.addItemListener(

24

25 new ItemListener() { 26

Declare three AudioClip objects

(20)

Outline

Lines 62-63

27 // stop sound and change to sound to user's selection 28 public void itemStateChanged( ItemEvent e )

29 {

30 currentSound.stop();

31

32 currentSound =

33 chooseSound.getSelectedIndex() == 0 ? sound1 : sound2;

34 } 35

38 ); // end addItemListener method call 39

40 container.add( chooseSound );

41

42 // set up button event handler and buttons 43 ButtonHandler handler = new ButtonHandler();

44

45 playSound = new JButton( "Play" );

46 playSound.addActionListener( handler );

47 container.add( playSound );

48

49 loopSound = new JButton( "Loop" );

50 loopSound.addActionListener( handler );

51 container.add( loopSound );

(21)



Outline

Lines 68-59

52

53 stopSound = new JButton( "Stop" );

54 stopSound.addActionListener( handler );

55 container.add( stopSound );

56

57 // load sounds and set currentSound

58 sound1 = getAudioClip( getDocumentBase(), "welcome.wav" );

59 sound2 = getAudioClip( getDocumentBase(), "hi.au" );

60 currentSound = sound1;

61

62 } // end method init 63

64 // stop the sound when the user switches Web pages 65 public void stop()

66 {

67 currentSound.stop();

68 } 69

70 // private inner class to handle button events

71 private class ButtonHandler implements ActionListener { 72

Method getAudioClip loads audio file into AudioClip object

(22)

Outline

Line 77 Line 80 Line 83

73 // process play, loop and stop button events

74 public void actionPerformed( ActionEvent actionEvent ) 75 {

76 if ( actionEvent.getSource() == playSound ) 77 currentSound.play();

78

79 else if ( actionEvent.getSource() == loopSound ) 80 currentSound.loop();

81

82 else if ( actionEvent.getSource() == stopSound ) 83 currentSound.stop();

84 } 85

86 } // end class ButtonHandler 87

88 } // end class LoadAudioAndPlay

Method stop stops playing the audio clip

Method play starts playing the audio clip Method loops plays the

audio clip continually

(23)

19.7 (Optional Case Study) Thinking

23

About Objects: Animation and Sound in the View

• ImagePanel

– Used for objects that are stationary in model

• e.g., Floor, ElevatorShaft

• MovingPanel

– Used for objects that “move” in model

• e.g., Elevator

• AnimatedPanel

– Used for objects that “animate” in model

• e.g., Person, Door, Button, Bell, Light

(24)

19.7 (Optional Case Study) Thinking

24

About Objects: Animation and Sound in the View (cont.)

Fig 19.5 Class diagram of elevator simulation view.

1 MovingPanel

AnimatedPanel

1

SoundEffects 1

1..*

1..* 1

1 1..*

ElevatorView ImagePanel

javax.swing.JPanel

graphics view

audio

(25)



Outline

ImagePanel.java Line 13

Line 16 Line 19 Line 25

1 // ImagePanel.java

2 // JPanel subclass for positioning and displaying ImageIcon 3 package com.deitel.jhtp5.elevator.view;

4

5 // Java core packages 6 import java.awt.*;

7 import java.awt.geom.*;

8 import java.util.*;

9

10 // Java extension packages 11 import javax.swing.*;

12

13 public class ImagePanel extends JPanel { 14

15 // identifier 16 private int ID;

17

18 // on-screen position

19 private Point2D.Double position;

20

21 // imageIcon to paint on screen 22 private ImageIcon imageIcon;

23

24 // stores all ImagePanel children 25 private Set panelChildren;

26

ImagePanel extends JPanel, so ImagePanel

can be displayed on screen

Each ImagePanel has a unique identifier

Point2D.Double offers precision for x-y

position coordinate

Set of ImagePanel children

(26)

Outline

ImagePanel.java Lines 41-42

27 // constructor initializes position and image

28 public ImagePanel( int identifier, String imageName ) 29 {

30 super( null ); // specify null layout 31 setOpaque( false ); // make transparent 32

33 // set unique identifier 34 ID = identifier;

35

36 // set location

37 position = new Point2D.Double( 0, 0 );

38 setLocation( 0, 0 );

39

40 // create ImageIcon with given imageName 41 imageIcon = new ImageIcon(

42 getClass().getResource( imageName ) );

43

44 Image image = imageIcon.getImage();

45 setSize(

46 image.getWidth( this ), image.getHeight( this ) );

47

48 // create Set to store Panel children 49 panelChildren = new HashSet();

50

51 } // end ImagePanel constructor 52

Use imageName argument to instantiate ImageIcon that

will be displayed on screen

(27)



Outline

53 // paint Panel to screen

54 public void paintComponent( Graphics g ) 55 {

56 super.paintComponent( g );

57

58 // if image is ready, paint it to screen 59 imageIcon.paintIcon( this, g, 0, 0 );

60 } 61

62 // add ImagePanel child to ImagePanel 63 public void add( ImagePanel panel ) 64 {

65 panelChildren.add( panel );

66 super.add( panel );

67 } 68

69 // add ImagePanel child to ImagePanel at given index 70 public void add( ImagePanel panel, int index )

71 {

72 panelChildren.add( panel );

73 super.add( panel, index );

74 } 75

Display ImagePanel (and its ImageIcon) to screen

Override method add to add ImagePanel child

Overload method add to add ImagePanel child

(28)

Outline

76 // remove ImagePanel child from ImagePanel 77 public void remove( ImagePanel panel ) 78 {

79 panelChildren.remove( panel );

80 super.remove( panel );

81 } 82

83 // sets current ImageIcon to be displayed 84 public void setIcon( ImageIcon icon ) 85 {

86 imageIcon = icon;

87 } 88

89 // set on-screen position

90 public void setPosition( double x, double y ) 91 {

92 position.setLocation( x, y );

93 setLocation( ( int ) x, ( int ) y );

94 } 95

96 // return ImagePanel identifier 97 public int getID()

98 {

99 return ID;

100 } 101

Override method remove to remove ImagePanel child

(29)



Outline

102 // get position of ImagePanel

103 public Point2D.Double getPosition() 104 {

105 return position;

106 } 107

108 // get imageIcon

109 public ImageIcon getImageIcon() 110 {

111 return imageIcon;

112 } 113

114 // get Set of ImagePanel children 115 public Set getChildren()

116 {

117 return panelChildren;

118 } 119 }

Accessor methods

(30)

Outline

MovingPanel.jav a

Line 13 Lines 20-21

1 // MovingPanel.java

2 // JPanel subclass with on-screen moving capabilities 3 package com.deitel.jhtp5.elevator.view;

4

7 import java.awt.geom.*;

9

12

13 public class MovingPanel extends ImagePanel { 14

15 // should MovingPanel change position?

16 private boolean moving;

17

18 // number of pixels MovingPanel moves in both x and y values 19 // per animationDelay milliseconds

20 private double xVelocity;

21 private double yVelocity;

22

23 // constructor initializes position, velocity and image 24 public MovingPanel( int identifier, String imageName ) 25 {

26 super( identifier, imageName );

27

MovingPanel represents moving object in model

Use double to represent velocity with high-precision

(31)



Outline

MovingPanel.jav a

Lines 38-52

28 // set MovingPanel velocity 29 xVelocity = 0;

30 yVelocity = 0;

31

32 } // end MovingPanel constructor 33

34 // update MovingPanel position and animation frame 35 public void animate()

36 {

37 // update position according to MovingPanel velocity 38 if ( isMoving() ) {

39 double oldXPosition = getPosition().getX();

40 double oldYPosition = getPosition().getY();

41

42 setPosition( oldXPosition + xVelocity, 43 oldYPosition + yVelocity );

44 } 45

46 // update all children of MovingPanel

47 Iterator iterator = getChildren().iterator();

48

49 while ( iterator.hasNext() ) {

50 MovingPanel panel = ( MovingPanel ) iterator.next();

51 panel.animate();

52 }

53 } // end method animate 54

55 // is MovingPanel moving on screen?

56 public boolean isMoving() 57 {

58 return moving;

If MovingPanel is moving, update MovingPanel position, as well as position of

MovingPanel’s children

(32)

Outline

MovingPanel.jav a

Lines 68-84

61 // set MovingPanel to move on screen 62 public void setMoving( boolean move ) 63 {

64 moving = move;

65 } 66

67 // set MovingPanel x and y velocity

68 public void setVelocity( double x, double y ) 69 {

70 xVelocity = x;

71 yVelocity = y;

72 } 73

74 // return MovingPanel x velocity 75 public double getXVelocity() 76 {

77 return xVelocity;

78 } 79

80 // return MovingPanel y velocity 81 public double getYVelocity() 82 {

83 return yVelocity;

84 } 85 }

(33)



Outline

AnimatedPanel.j ava

Line 12 Lines 19-20 Line 23 Lines 26-27

1 // AnimatedPanel.java

2 // MovingPanel subclass with animation capabilities 3 package com.deitel.jhtp5.elevator.view;

4

8

11

12 public class AnimatedPanel extends MovingPanel { 13

14 // should ImageIcon cycle frames 15 private boolean animating;

16

17 // frame cycle rate (i.e., rate advancing to next frame) 18 private int animationRate;

19 private int animationRateCounter;

20 private boolean cycleForward = true;

21

22 // individual ImageIcons used for animation frames 23 private ImageIcon imageIcons[];

24

25 // storage for all frame sequences 26 private java.util.List frameSequences;

27 private int currentAnimation;

AnimatedPanel represents moving object

in model and has several frames of animation

Variables to determine which frame of animation to display

ImageIcon array that stores images in an animation sequence Variables to control

animation rate

(34)

Outline

AnimatedPanel.j ava

28

29 // should loop (continue) animation at end of cycle?

30 private boolean loop;

31

32 // should animation display last frame at end of animation?

33 private boolean displayLastFrame;

34

35 // helps determine next displayed frame 36 private int currentFrameCounter;

37

38 // constructor takes array of filenames and screen position 39 public AnimatedPanel( int identifier, String imageName[] ) 40 {

41 super( identifier, imageName[ 0 ] );

42

43 // creates ImageIcon objects from imageName string array 44 imageIcons = new ImageIcon[ imageName.length ];

45

46 for ( int i = 0; i < imageIcons.length; i++ ) { 47 imageIcons[ i ] = new ImageIcon(

48 getClass().getResource( imageName[ i ] ) );

49 } 50

51 frameSequences = new ArrayList();

52

53 } // end AnimatedPanel constructor 54

55 // update icon position and animation frame 56 public void animate()

57 {

58 super.animate();

AnimatedPanel constructor creates ImageIcon array from

String array argument, which contains names of image files

Override method animate of class MovingPanel to update AnimatedPanel position and

current frame of animation

(35)



Outline

AnimatedPanel.j ava

Lines 61-69 Lines 73-99 Lines 84-93

59

60 // play next animation frame if counter > animation rate 61 if ( frameSequences != null && isAnimating() ) {

62

63 if ( animationRateCounter > animationRate ) { 64 animationRateCounter = 0;

65 determineNextFrame();

66 } 67 else

68 animationRateCounter++;

69 }

70 } // end method animate 71

72 // determine next animation frame 73 private void determineNextFrame() 74 {

75 int frameSequence[] =

76 ( int[] ) frameSequences.get( currentAnimation );

77

78 // if no more animation frames, determine final frame, 79 // unless loop is specified

80 if ( currentFrameCounter >= frameSequence.length ) { 81 currentFrameCounter = 0;

82

83 // if loop is false, terminate animation 84 if ( !isLoop() ) {

85

86 setAnimating( false );

Play next frame of animation

Utility method that determines next frame of animation to display

Used for looping purposes in animation: If loop is false, animation terminates after one iteration

(36)

Outline

AnimatedPanel.j ava

88 if ( isDisplayLastFrame() ) 89

90 // display last frame in sequence

91 currentFrameCounter = frameSequence.length - 1;

92 } 93 } 94

95 // set current animation frame

96 setCurrentFrame( frameSequence[ currentFrameCounter ] );

97 currentFrameCounter++;

98

99 } // end method determineNextFrame 100

101 // add frame sequence (animation) to frameSequences ArrayList 102 public void addFrameSequence( int frameSequence[] )

103 {

104 frameSequences.add( frameSequence );

105 } 106

107 // ask if AnimatedPanel is animating (cycling frames) 108 public boolean isAnimating()

109 {

110 return animating;

111 } 112

113 // set AnimatedPanel to animate

114 public void setAnimating( boolean animate ) 115 {

116 animating = animate;

117 }

Call method setCurrent- Frame to set ImageIcon (current image displayed) to the ImageIcon returned from the

current frame sequence.

Last frame in sequence is displayed if displayLastFrame is true,

and first frame in sequence is displayed if displayLastFrame

is false

(37)



Outline

AnimatedPanel.j ava

118

119 // set current ImageIcon

120 public void setCurrentFrame( int frame ) 121 {

122 setIcon( imageIcons[ frame ] );

123 } 124

125 // set animation rate

126 public void setAnimationRate( int rate ) 127 {

128 animationRate = rate;

129 } 130

131 // get animation rate

132 public int getAnimationRate() 133 {

134 return animationRate;

135 } 136

137 // set whether animation should loop

138 public void setLoop( boolean loopAnimation ) 139 {

140 loop = loopAnimation;

141 } 142

143 // get whether animation should loop 144 public boolean isLoop()

145 {

146 return loop;

147 } 148

(38)

Outline

AnimatedPanel.j ava

Lines 162-167

149 // get whether to display last frame at animation end 150 private boolean isDisplayLastFrame()

151 {

152 return displayLastFrame;

153 } 154

155 // set whether to display last frame at animation end 156 public void setDisplayLastFrame( boolean displayFrame ) 157 {

158 displayLastFrame = displayFrame;

159 } 160

161 // start playing animation sequence of given index 162 public void playAnimation( int frameSequence ) 163 {

164 currentAnimation = frameSequence;

165 currentFrameCounter = 0;

166 setAnimating( true );

167 } 168 }

Begin animation

(39)

19.7 (Optional Case Study) Thinking

39

About Objects: Animation and Sound in the View (Cont.)

Fig. 19.9 Relationship between array imageIcons and List frameSequences.

0 1 2

0 1 3 1 0 2 1 0

3 2 2 0 0=

1=

2=

3=

frameSequences

A C D

0 1 2 3 imageIcons

B

A C

A B D B A C B A

D C C A image sequences

(40)

Outline

SoundEffects.ja va

Line 8

Lines 19-20

1 // SoundEffects.java

2 // Returns AudioClip objects

3 package com.deitel.jhtp5.elevator.view;

4

5 // Java core packages 6 import java.applet.*;

7

8 public class SoundEffects { 9

10 // location of sound files 11 private String prefix = "";

12

13 public SoundEffects() {}

14

15 // get AudioClip associated with soundFile

16 public AudioClip getAudioClip( String soundFile ) 17 {

18 try {

19 return Applet.newAudioClip( getClass().getResource(

20 prefix + soundFile ) );

21 } 22

23 // return null if soundFile does not exist

24 catch ( NullPointerException nullPointerException ) { 25 return null;

26 } 27 }

Pass soundFile parameter to static method newAudioClip (of class java.applet.Applet)

to return AudioClip object Creates sound effects

(AudioClips) for view

(41)



Outline

SoundEffects.ja va

28

29 // set prefix for location of soundFile 30 public void setPathPrefix( String string ) 31 {

32 prefix = string;

33 } 34 }