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

(1)

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

Outline

18.1 Introduction

18.2 Loading, Displaying and Scaling Images 18.3 Animating a Series of Images

18.4 Customizing LogoAnimator via Applet Parameters 18.5 Image Maps

18.6 Loading and Playing Audio Clips

18.7 Internet and World Wide Web Resources

(2)



18.1 Introduction

• Multimedia

– Use of sound, image, graphics and video

– Makes applications “come alive”

(3)

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

(4)



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

(5)

 2002 Prentice Hall, Inc.

Outline

LoadImageAndScal e.java

Lines 14 and 20 Lines 15 and 21 Line 28

Lines 32-33

1 // Fig. 18.1: LoadImageAndScale.java

2 // Load an image and display it in its original size 3 // and scale it to twice its original width and height.

4 // Load and display the same image as an ImageIcon.

5

6 // Java core packages

7 import java.applet.Applet;

8 import java.awt.*;

9

10 // Java extension packages 11 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 loaded 18 public void init()

19 {

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

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

22 } 23

24 // display image

25 public void paint( Graphics g ) 26 {

27 // draw original image

28 g.drawImage( logo1, 0, 0, this );

29

30 // draw image scaled to fit width of applet 31 // and height of applet minus 120 pixels 32 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

(6)

Outline

LoadImageAndScal e.java (Part 2)

Line 36

Program Output

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

37 } 38

39 } // end class LoadImageAndScale

Method paintIcon displays ImageIcon object on screen

(7)

18.3 Animating a Series of Images

• Demonstrate animating series of images

– Images are stored in array

(8)

Outline

LogoAnimator.jav a

Lines 14 and 34

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

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

6 import java.awt.event.*;

7

10

11 public class LogoAnimator extends JPanel 12 implements ActionListener {

13

14 protected ImageIcon images[]; // array of images 15

16 protected int totalImages = 30, // number of images 17 currentImage = 0, // current image index 18 animationDelay = 50, // millisecond delay 19 width, // image width

20 height; // image height 21

22 protected String imageName = "deitel"; // base image name 23 protected Timer animationTimer; // Timer drives animation 24

25 // initialize LogoAnimator by loading images 26 public LogoAnimator()

27 {

28 initializeAnimation();

29 } 30

31 // initialize animation

32 protected void initializeAnimation() 33 {

34 images = new ImageIcon[ totalImages ];

35

Create array that stores series of ImageIcon objects

(9)

Outline

LogoAnimator.jav a (Part 2)

Lines 37-39 Lines 46-52

Lines 55-58 and 65

36 // load images

37 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 width 42 height = images[ 0 ].getIconHeight(); // get icon height 43 }

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 event

55 public void actionPerformed( ActionEvent actionEvent ) 56 {

57 repaint(); // repaint animator 58 }

59

60 // start or restart animation 61 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 displayed 69 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

(10)

Outline

Line 76

71 } 72

73 // stop animation timer 74 public void stopAnimation() 75 {

76 animationTimer.stop();

77 } 78

79 // return minimum size of animation 80 public Dimension getMinimumSize() 81 {

82 return getPreferredSize();

83 } 84

85 // return preferred size of animation 86 public Dimension getPreferredSize() 87 {

88 return new Dimension( width, height );

89 } 90

91 // execute animation in a JFrame

92 public static void main( String args[] ) 93 {

94 // create LogoAnimator

95 LogoAnimator animation = new LogoAnimator();

96

97 // set up window

98 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

(11)

Outline

105 // size and display window 106 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 animation 116

117 } // end method main 118

119 } // end class LogoAnimator

(12)



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>

(13)

Outline

LogoAnimator2.ja va

Lines 10 and 19-26

1 // Fig. 18.3: LogoAnimator2.java 2 // Animating a series of images 3

6

9

10 public class LogoAnimator2 extends LogoAnimator { 11

12 // default constructor 13 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 window 29 public static void main( String args[] )

30 {

31 // create LogoAnimator

32 LogoAnimator2 animation = new LogoAnimator2();

33

34 // set up window

35 JFrame window = new JFrame( "Animator test" );

Create class that extends class LogoAnimator

(14)

Outline

LogoAnimator2.ja va (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 window 43 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 animation 53

54 } // end method main 55

56 } // end class LogoAnimator2

(15)

Outline

LogoApplet.java Line 31

1 // Fig. 18.4: LogoApplet.java

2 // Customizing an applet via HTML parameters.

3 //

4 // HTML parameter "animationdelay" is an int indicating 5 // milliseconds to sleep between images (default 50).

6 //

7 // HTML parameter "imagename" is the base name of the images 8 // that will be displayed (i.e., "deitel" is the base name 9 // for images "deitel0.gif," "deitel1.gif," etc.). The applet 10 // assumes that images are in an "images" subdirectory of 11 // the directory in which the applet resides.

12 //

13 // HTML parameter "totalimages" is an integer representing the 14 // total number of images in the animation. The applet assumes 15 // images are numbered from 0 to totalimages - 1 (default 30).

16

19

22

23 public class LogoApplet extends JApplet { 24

25 // obtain parameters from HTML and customize applet 26 public void init()

27 {

28 String parameter;

29

30 // get animation delay from HTML document 31 parameter = getParameter( "animationdelay" );

32

33 int animationDelay = ( parameter == null ? 34 50 : Integer.parseInt( parameter ) );

35

Method getParameter obtains parameter value

from HTML file

(16)

Outline

LogoApplet.java (Part 2)

Line 37 Line 40 Lines 51-52

36 // get base image name from HTML document

37 String imageName = getParameter( "imagename" );

38

39 // get total number of images from HTML document 40 parameter = getParameter( "totalimages" );

41

42 int totalImages = ( parameter == null ? 43 0 : Integer.parseInt( parameter ) );

44

45 // create instance of LogoAnimator 46 LogoAnimator2 animator;

47

48 if ( imageName == null || totalImages == 0 ) 49 animator = new LogoAnimator2();

50 else

51 animator = new LogoAnimator2( totalImages, 52 animationDelay, imageName );

53

54 // attach animator to applet and start animation 55 getContentPane().add( animator );

56 animator.startAnimation();

57

58 } // end method init 59

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

(17)

18.5 Image Maps

• Image map

– Contains hot areas

• Message appears when user moves cursor over these areas

(18)

Outline

ImageMap.java Lines 23-35

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

3

7

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 listeners 21 public void init()

22 {

23 addMouseListener(

24

25 new MouseAdapter() { 26

27 // indicate when mouse pointer exits applet area 28 public void mouseExited( MouseEvent event )

29 {

30 showStatus( "Pointer outside applet" );

31 } 32

33 } // end anonymous inner class 34

35 ); // end addMouseListener method call

Add MouseMotionListener for when mouse cursor exits applet

area

(19)

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 appears 42 public void mouseMoved( MouseEvent event ) 43 {

44 showStatus( translateLocation(

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

46 } 47

50 ); // end addMouseMotionListener method call 51

52 mapImage = new ImageIcon( "icons.png" );

53

56 // display mapImage

57 public void paint( Graphics g ) 58 {

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

60 } 61

62 // return tip caption based on mouse coordinates 63 public String translateLocation( int x, int y ) 64 {

65 // if coordinates outside image, return immediately 66 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

(20)

Outline

70 // determine icon number (0 - 6)

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

72 int iconNumber = x / iconWidth;

73

74 // return appropriate icon caption 75 return captions[ iconNumber ];

76 } 77

78 } // end class ImageMap

(21)

Outline

Program Output

(22)

Outline

Program Output

(23)

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)

(24)

Outline

LoadAudioAndPlay .java

Line 13

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

3

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

6 import java.awt.*;

8

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 executing 18 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 selection 31 public void itemStateChanged( ItemEvent e )

32 {

33 currentSound.stop();

34

Declare three AudioClip objects

(25)

Outline

LoadAudioAndPlay .java (Part 2)

Lines 62-63

35 currentSound =

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

38 } 39

42 ); // end addItemListener method call 43

44 container.add( chooseSound );

45

46 // set up button event handler and buttons 47 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 currentSound

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

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

64 currentSound = sound1;

65

Method getAudioClip loads audio file into AudioClip object

(26)

Outline

LoadAudioAndPlay .java (Part 3)

Line 71 Line 81 Line 84

68 // stop the sound when the user switches Web pages 69 public void stop()

70 {

71 currentSound.stop();

72 } 73

74 // private inner class to handle button events

75 private class ButtonHandler implements ActionListener { 76

77 // process play, loop and stop button events

78 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