2000 prentice hall, inc. all rights reserved. java multimedia: images, animation, audio and video...

2000 Prentice Hall, Inc. All rights reserved.

Java Multimedia: Images, Animation, Audio and Video

Outline30.1 Introduction30.2 Loading, Displaying and Scaling Images30.3 Loading and Playing Audio Clips30.4 Animating a Series of Images30.5 Animation Issues30.6 Customizing Applets via the HTML param Tag30.7 Image Maps30.8 Java Plug-In30.9 Internet and World Wide Web Resources


30.1 Introduction

• Revolution in computer industry– Before, computers used for high-speed calculations

– Now, data manipulation important

• Multimedia– "sizzle" of Java - images, sound, video

– CDs, DVDs, video cards

– Demands extraordinary computing power• Fast processors making multimedia possible

• Java– Has built-in multimedia capabilities

• Most programming languages do not

– Develop powerful multimedia applications


30.2Loading, Displaying and Scaling Images

• Java Multimedia– Graphics, images, animations, sounds, and video

• Begin with images

• Class Image (java.awt)– Abstract class, cannot create an object directly

• Must request that an Image be loaded and returned to you

– Class Applet (superclass of JApplet) has this method• getImage( imageLocation, filename );• imageLocation - getDocumentBase() - URL

(address) of HTML file• filename - Java supports .gif and .jpg (.jpeg)


30.2Loading, Displaying and Scaling Images (II)

• Displaying Images with drawImage– Many overloaded versionsg.drawImage( myImage, x, y, ImageObserver );

• myImage - Image object• x,y - coordinates to display image• ImageObserver - object on which image is displayed

– Use "this" to indicate the applet– Can be any object that implements ImageObserver

interface

– g.drawImage( myImage, x, y, width, height, ImageObserver );

• width and height - dimensions of image (automatically scaled)– getWidth(), getHeight() - return dimensions of

applet


30.2Loading, Displaying and Scaling Images (III)

• Class ImageIcon– Not an abstract class (can create objects)

– Example constructorprivate ImageIcon myIcon;

myIcon = new ImageIcon( "myIcon.gif" );

• Displaying Icons with method paintIconmyIcon.paintIcon( Component, Graphics, x, y )– Component - Component object on which to

display image (this)– Graphics - Graphics object used to render image (g)– x, y - coordinates of Icon


30.2Loading, Displaying and Scaling Images (IV)

• Usage– ImageIcons are simpler than Images

• Create objects directly

• No need for ImageObserver reference

– However, cannot scale ImageIcons

• Scaling– Use ImageIcon method getImage

• Returns Image reference

• This can be used with drawImage and be scaled


Outline

Image Example

1. import

1.1 Declare objects

2. init()

2.1 Initialize objects

3. paint()

3.1 drawImage calls

1 // Fig. 30.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 import java.applet.Applet;

6 import java.awt.*;

7 import javax.swing.*;

8

9 public class LoadImageAndScale extends JApplet {

10 private Image logo1;

11 private ImageIcon logo2;

12

13 // load the image when the applet is loaded

14 public void init()

15 {

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

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

18 }

19

20 // display the image

21 public void paint( Graphics g )

22 {

23 // draw the original image

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

25

26 // draw the image scaled to fit the width of the applet

27 // and the height of the applet minus 120 pixels

28 g.drawImage( logo1, 0, 120,

29 getWidth(), getHeight() - 120, this );

30

31 // draw the icon using its paintIcon method


Outline

3.2 paintIcon call

Program Output

32 logo2.paintIcon( this, g, 180, 0 );

33 }

34 }


30.3Loading and Playing Audio Clips

• Audio clips– Require speakers and a sound board

– Sound engine - plays audio clips• Supports .au, .wav, .aif, .mid• Java Media Framework supports additional formats

• Playing audio clips– play method in Applet– Plays clip once, marked for garbage collection when finished

play( location, soundFileName );location - getDocumentBase (URL of HTML file)

play( soundURL ); soundURL - URL that contains location and filename

of clip


30.3Loading and Playing Audio Clips (II)

• Playing audio clips– Method play from AudioClip interface

– More flexible than Applet method play• Audio stored in program, can be reused

– getAudioClip• Returns reference to an AudioClip• Same format as Applet method play

– getAudioClip( location, filename )– getAudioClip( soundURL )

– Once AudioClip loaded, use methods• play - plays audio once• loop - continuous loops audio in background• stop - terminates clip that is currently playing


Outline

1. import

1.1 Declare objects

2. init

2.1 Set layout

1 // Fig. 30.2: LoadAudioAndPlay.java2 // Load an audio clip and play it.3 import java.applet.*;4 import java.awt.*;5 import java.awt.event.*;6 import javax.swing.*;78 public class LoadAudioAndPlay extends JApplet {9 private AudioClip sound1, sound2, currentSound; 10 private JButton playSound, loopSound, stopSound;11 private JComboBox chooseSound;1213 // load the image when the applet begins executing14 public void init()15 {16 Container c = getContentPane();17 c.setLayout( new FlowLayout() );1819 String choices[] = { "Welcome", "Hi" };20 chooseSound = new JComboBox( choices );21 chooseSound.addItemListener(22 new ItemListener() {23 public void itemStateChanged( ItemEvent e )24 {25 currentSound.stop();2627 currentSound =28 chooseSound.getSelectedIndex() == 0 ?29 sound1 : sound2;30 }31 }32 );


Outline

2.2 Add buttons

2.3 Initialize audio clips

3. stop

4. Class ButtonHandler

33 c.add( chooseSound );3435 ButtonHandler handler = new ButtonHandler();36 playSound = new JButton( "Play" );37 playSound.addActionListener( handler );38 c.add( playSound );39 loopSound = new JButton( "Loop" );40 loopSound.addActionListener( handler );41 c.add( loopSound );42 stopSound = new JButton( "Stop" );43 stopSound.addActionListener( handler );44 c.add( stopSound );4546 sound1 = getAudioClip(47 getDocumentBase(), "welcome.wav" );48 sound2 = getAudioClip(49 getDocumentBase(), "hi.au" );50 currentSound = sound1;51 }5253 // stop the sound when the user switches Web pages54 // (i.e., be polite to the user)55 public void stop()56 {57 currentSound.stop();58 }5960 private class ButtonHandler implements ActionListener {61 public void actionPerformed( ActionEvent e )62 {63 if ( e.getSource() == playSound ) 64 currentSound.play();


Outline

Program Output

65 else if ( e.getSource() == loopSound )

66 currentSound.loop();

67 else if ( e.getSource() == stopSound )

68 currentSound.stop();

69 }

70 }

71 }


30.4Animating a Series of Images

• Following example– Use a series of images stored in an array– Use same techniques to load and display ImageIcons

• Class Timer– Generates ActionEvents at a fixed interval in

millisecondsTimer ( animationDelay, ActionListener );ActionListener - ActionListener that will respond to ActionEvents

– Methods• start• stop• restart• isRunning


30.4Animating a Series of Images (II)

• Method repaint– Calls update, which calls paintComponent

• Subclasses of JComponent should draw in method paintComponent

• Call superclass's paintComponent to make sure Swing components displayed properly

• View area– Width and height specify entire window, not client area– Dimension objects

• Contain width and height values

myDimObject = new Dimension( 100, 200 );

myDimObject.width


30.4Animating a Series of Images (III)

• getImageLoadStatus – ImageIcon method

• Determines if image is completely loaded into memory

• Only complete images should be displayed (smooth animation)

– If loaded, returns MediaTracker.COMPLETE– MediaTracker

• Can determine when images are loaded, or force program to wait if not

• ImageIcon creates our MediaTracker for us


Outline

1. import

1.1 implements ActionListener

1.2 Declare objects

1.3 Constructor

1.4 Initialize ImageIcon array

2. paintComponent

2.1 Call to superclass paintComponent

1 // Fig. 30.3: LogoAnimator.java2 // Animation a series of images3 import java.awt.*;4 import java.awt.event.*;5 import javax.swing.*;67 public class LogoAnimator extends JPanel8 implements ActionListener {9 protected ImageIcon images[];10 protected int totalImages = 30,11 currentImage = 0,12 animationDelay = 50; // 50 millisecond delay13 protected Timer animationTimer;1415 public LogoAnimator()16 {17 setSize( getPreferredSize() );1819 images = new ImageIcon[ totalImages ];2021 for ( int i = 0; i < images.length; ++i ) 22 images[ i ] =23 new ImageIcon( "images/deitel" + i + ".gif" );2425 startAnimation();26 }2728 public void paintComponent( Graphics g )29 {30 super.paintComponent( g );31


Outline

2.2 If image loaded, display it (paintIcon)

2.3 Increment currentImage

3. actionPerformed

3.1 startAnimation

3.2 stopAnimation

3.3 getMinimumSize

32 if ( images[ currentImage ].getImageLoadStatus() ==33 MediaTracker.COMPLETE ) {34 images[ currentImage ].paintIcon( this, g, 0, 0 );35 currentImage = ( currentImage + 1 ) % totalImages;36 }37 }3839 public void actionPerformed( ActionEvent e )40 {41 repaint();42 }4344 public void startAnimation()45 {46 if ( animationTimer == null ) {47 currentImage = 0; 48 animationTimer = new Timer( animationDelay, this );49 animationTimer.start();50 }51 else // continue from last image displayed52 if ( ! animationTimer.isRunning() )53 animationTimer.restart();54 }5556 public void stopAnimation()57 {58 animationTimer.stop();59 }6061 public Dimension getMinimumSize()62 { 63 return getPreferredSize(); 64 }


Outline

3.4. getPreferredSize

4. main

65

66 public Dimension getPreferredSize()

67 {

68 return new Dimension( 160, 80 );

69 }

70

71 public static void main( String args[] )

72 {

73 LogoAnimator anim = new LogoAnimator();

74

75 JFrame app = new JFrame( "Animator test" );

76 app.getContentPane().add( anim, fBorderLayout.CENTER );

77

78 app.addWindowListener(

79 new WindowAdapter() {

80 public void windowClosing( WindowEvent e )

81 {

82 System.exit( 0 );

83 }

84 }

85 );

86

87 // The constants 10 and 30 are used below to size the

88 // window 10 pixels wider than the animation and

89 // 30 pixels taller than the animation.

90 app.setSize( anim.getPreferredSize().width + 10,

91 anim.getPreferredSize().height + 30 );

92 app.show();

93 }

94 }


Outline

Program Output


30.5Animation Issues

• Storing images– Interlaced/non-interlaced formats

• Specifies order in which pixels are stored• Non-interlaced - pixels stored in order they appear on screen

– Image appears in chunks from top to bottom as it is loaded• Interlaced - pixels stored in rows, but out of order

– Image appears to fade in and become more clear

• Animation flickers– Due to update being called in response to repaint– In AWT GUI components

• Draws filled rectangle in background color where image was• Draw image, sleep, clear background (flicker), draw next

image...

– Swing's JPanel overrides update to avoid this


30.5Animation Issues (II)

• Double buffering– Used to smooth animations

– Program renders one image on screen • Builds next image in off-screen buffer

– When time to display next image, done smoothly• Partial images user would have seen (while image loads) are

hidden

• All pixels for next image displayed at once

– Space/Time tradeoff• Reduces flicker, but can slow animation speed and uses more

memory

– Used by Swing GUI components by default


30.6Customizing Applets via the HTML param Tag

• Applets– Customize through parameters in HTML file that invokes

it<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>

– Invokes applet LogoApplet– param tags

• Each has a name and a value• Use Applet method getParameter (returns a String)

parameter = getParameter( "animationdelay" );


30.6Customizing Applets via the HTML param Tag (II)

• Following example– Use the LogoAnimator class as before, but modified

slightly

– Create Applet LogoApplet• Takes parameters

• Creates LogoAnimator object using the parameters

• Plays animation


Outline

1. import

1.1 LogoAnimator class as before

1.2 Constructor to allow customization

1 // Fig. 30.4: LogoAnimator.java2 // Animating a series of images3 import java.awt.*;4 import java.awt.event.*;5 import javax.swing.*;67 public class LogoAnimator extends JPanel8 implements ActionListener {9 protected ImageIcon images[];10 protected int totalImages = 30,11 currentImage = 0,12 animationDelay = 50; // 50 millisecond delay13 protected String imageName = "deitel";14 protected Timer animationTimer;1516 public LogoAnimator()17 {18 initializeAnim();19 }2021 // new constructor to support customization 22 public LogoAnimator( int num, int delay, String name )23 {24 totalImages = num;25 animationDelay = delay;26 imageName = name;2728 initializeAnim();29 }3031 private void initializeAnim()32 {


Outline

2. Methods as before

33 images = new ImageIcon[ totalImages ];3435 for ( int i = 0; i < images.length; ++i ) 36 images[ i ] = new ImageIcon( "images/" +37 imageName + i + ".gif" );3839 // moved here so getPreferredSize can check the size of40 // the first loaded image.41 setSize( getPreferredSize() ); 4243 startAnimation();44 }4546 public void paintComponent( Graphics g )47 {48 super.paintComponent( g );4950 if ( images[ currentImage ].getImageLoadStatus() ==51 MediaTracker.COMPLETE ) {52 images[ currentImage ].paintIcon( this, g, 0, 0 );53 currentImage = ( currentImage + 1 ) % totalImages;54 }55 }5657 public void actionPerformed( ActionEvent e )58 {59 repaint();60 }6162 public void startAnimation()63 {64 if ( animationTimer == null ) {


Outline

2. Methods as before

65 currentImage = 0; 66 animationTimer = new Timer( animationDelay, this );67 animationTimer.start();68 }69 else // continue from last image displayed70 if ( ! animationTimer.isRunning() )71 animationTimer.restart();72 }7374 public void stopAnimation()75 {76 animationTimer.stop();77 }7879 public Dimension getMinimumSize()80 { 81 return getPreferredSize(); 82 }8384 public Dimension getPreferredSize()85 {86 return new Dimension( images[ 0 ].getIconWidth(),87 images[ 0 ].getIconHeight() );88 }8990 public static void main( String args[] )91 {92 LogoAnimator anim = new LogoAnimator();9394 JFrame app = new JFrame( "Animator test" );95 app.getContentPane().add( anim, BorderLayout.CENTER );96


Outline97 app.addWindowListener(

98 new WindowAdapter() {

99 public void windowClosing( WindowEvent e )

100 {

101 System.exit( 0 );

102 }

103 }

104 );

105

106 app.setSize( anim.getPreferredSize().width + 10,

107 anim.getPreferredSize().height + 30 );

108 app.show();

109 }

110}

111// Fig. 30.4: LogoApplet.java

112// Customizing an applet via HTML parameters

113//

114// HTML parameter "animationdelay" is an int indicating

115// milliseconds to sleep between images (default 50).

116//

117// HTML parameter "imagename" is the base name of the images

118// that will be displayed (i.e., "deitel" is the base name

119// for images "deitel0.gif," "deitel1.gif," etc.). The applet

120// assumes that images are in an "images" subdirectory of

121// the directory in which the applet resides.

122//

123// HTML parameter "totalimages" is an integer representing the

124// total number of images in the animation. The applet assumes

125// images are numbered from 0 to totalimages - 1 (default 30).

126


Outline

Applet

1. init

1.1 Initialize objects from parameters

1.2 Supply variables to constructor

2. Set layout

127import java.awt.*;

128import javax.swing.*;

129

130public class LogoApplet extends JApplet{

131 public void init()

132 {

133 String parameter;

134

135 parameter = getParameter( "animationdelay" );

136 int animationDelay = ( parameter == null ? 50 :

137 Integer.parseInt( parameter ) );

138

139 String imageName = getParameter( "imagename" );

140

141 parameter = getParameter( "totalimages" );

142 int totalImages = ( parameter == null ? 0 :

143 Integer.parseInt( parameter ) );

144

145 // Create an instance of LogoAnimator

146 LogoAnimator animator;

147

148 if ( imageName == null || totalImages == 0 )

149 animator = new LogoAnimator();

150 else

151 animator = new LogoAnimator( totalImages,

152 animationDelay, imageName );

153

154 setSize( animator.getPreferredSize().width,

155 animator.getPreferredSize().height );

156 getContentPane().add( animator, BorderLayout.CENTER );


Outline

3. startAnimation

157

158 animator.startAnimation();

159 }

160}


30.7Image Maps

• Image map– Image that has hot areas

• User can click to accomplish a task

– Bubble help• When mouse over particular point in screen, small message

displayed in status bar

• In the following example– Load several images

– Use event handler mouseMoved to find x-coordinate

– Based on the x-coordinate, display a message


Outline

1. import

1.1 Declare objects

2. init

2.1 addMouseListener

2.2 Initialize ImageIcon

1 // Fig. 30.5: ImageMap.java2 // Demonstrating an image map.3 import java.awt.*;4 import java.awt.event.*;5 import javax.swing.*;67 public class ImageMap extends JApplet {8 private ImageIcon mapImage;9 private int width, height;1011 public void init()12 {13 addMouseListener(14 new MouseAdapter() {15 public void mouseExited( MouseEvent e )16 {17 showStatus( "Pointer outside applet" );18 }19 }20 );2122 addMouseMotionListener(23 new MouseMotionAdapter() {24 public void mouseMoved( MouseEvent e )25 {26 showStatus( translateLocation( e.getX() ) );27 }28 }29 );3031 mapImage = new ImageIcon( "icons2.gif" ); 32 width = mapImage.getIconWidth();


Outline

3. paint

4. translateLocation

4.1 Display message depending on x

33 height = mapImage.getIconHeight();

34 setSize( width, height );

35 }

36

37 public void paint( Graphics g )

38 {

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

40 }

41

42 public String translateLocation( int x )

43 {

44 // determine width of each icon (there are 6)

45 int iconWidth = width / 6;

46

47 if ( x >= 0 && x <= iconWidth )

48 return "Common Programming Error";

49 else if ( x > iconWidth && x <= iconWidth * 2 )

50 return "Good Programming Practice";

51 else if ( x > iconWidth * 2 && x <= iconWidth * 3 )

52 return "Performance Tip";


54 return "Portability Tip";


56 return "Software Engineering Observation";


58 return "Testing and Debugging Tip";

59

60 return "";

61 }

62 }


Outline

Program Output


30.8Java Plug-In

• Web browsers– Many different browser versions

– Most support Java 1.0 and 1.1, but few support Java 2• Inconsistent support of 1.1

– To use Java 2 in an applet, use the Java Plug-in• Bypasses browser's Java support

• Installs complete version of Java Runtime Environment on user's computer

• Large file - ideal for corporate intranets and high-speed networks


30.8Java Plug-In (II)

• Using the Plug in with applets– The <applet>, <param> and </applet> tags must be

converted• Must indicate that Plug-in should be used to execute applet

– Java Plug-in 1.2 HTML Converter• Performs conversion for us• http://java.sun.com/products/plugin/

– Execution• In install directory type java HTMLConverter• Select file to convert and type of conversion


30.9Internet and World Wide Web Resources

• Internet and web resources for Java Media Framework

http://java.sun.com/products/java-media/jmf/ • Download and documentation for JMF

http://java.sun.com/products/java-media/ jmf/forDevelopers/

• Site for javax.media API descriptions

• Downloadable image, audio, and video galleries– Test your multimedia programs

http://www.nasa.gov/gallery/index.html

http://sunsite.sut.ac.jp/multimed/

2000 prentice hall, inc. all rights reserved. java multimedia: images, animation, audio and video...

Documents

images class image

image s

image imageobserver

image reference

image example

image maps

image g x

prentice hall