Java Multimedia: Images, Animation, Audio and Video

Outline 30.1 30.2 30.3 30.4 30.5 30.6 30.7 30.8 30.9

Introduction Loading, Displaying and Scaling Images Loading and Playing Audio Clips Animating a Series of Images Animation Issues Customizing Applets via the HTML param Tag Image Maps Java Plug-In Internet and World Wide Web Resources

2000 Prentice Hall, Inc. All rights reserved.

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

2000 Prentice Hall, Inc. All rights reserved.

30.2 Loading, 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)

2000 Prentice Hall, Inc. All rights reserved.

30.2 Loading, Displaying and Scaling Images (II) Displaying Images with drawImage
Many overloaded versions
g.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
2000 Prentice Hall, Inc. All rights reserved.

30.2 Loading, Displaying and Scaling Images (III) Class ImageIcon

Not an abstract class (can create objects) Example constructor
private ImageIcon myIcon; myIcon = new ImageIcon( "myIcon.gif" );

Displaying Icons with method paintIcon

myIcon.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

2000 Prentice Hall, Inc. All rights reserved.

30.2 Loading, 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

2000 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// Fig. 30.1: LoadImageAndScale.java // Load an image and display it in its original size // and scale it to twice its original width and height. // Load and display the same image as an ImageIcon. import java.applet.Applet; import java.awt.*; import javax.swing.*; public class LoadImageAndScale extends JApplet { private Image logo1; private ImageIcon logo2; // load the image when the applet is loaded public void init() { logo1 = getImage( getDocumentBase(), "logo.gif" ); logo2 = new ImageIcon( "logo.gif" ); } // display the image public void paint( Graphics g ) { // draw the original image g.drawImage( logo1, 0, 0, this ); // draw the image scaled to fit the width of the applet // and the height of the applet minus 120 pixels g.drawImage( logo1, 0, 120, getWidth(), getHeight() - 120, this );

Outline
Image Example 1. import 1.1 Declare objects 2. init() 2.1 Initialize objects 3. paint() 3.1 drawImage calls

2000 Prentice Hall, Inc. icon All rights reserved. // draw the using its paintIcon method

32 33 34 } }

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

Outline
3.2 paintIcon call Program Output

2000 Prentice Hall, Inc. All rights reserved.

30.3 Loading 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

2000 Prentice Hall, Inc. All rights reserved.

30.3 Loading 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
2000 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// Fig. 30.2: LoadAudioAndPlay.java // Load an audio clip and play it. import java.applet.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class LoadAudioAndPlay extends JApplet { private AudioClip sound1, sound2, currentSound; private JButton playSound, loopSound, stopSound; private JComboBox chooseSound; // load the image when the applet begins executing public void init() { Container c = getContentPane(); c.setLayout( new FlowLayout() ); String choices[] = { "Welcome", "Hi" }; chooseSound = new JComboBox( choices ); chooseSound.addItemListener( new ItemListener() { public void itemStateChanged( ItemEvent e ) { currentSound.stop(); currentSound = chooseSound.getSelectedIndex() == 0 ? sound1 : sound2; } }

Outline
1. import 1.1 Declare objects 2. init 2.1 Set layout

2000 Prentice Hall, Inc. All rights reserved. );

33 c.add( chooseSound ); 34 35 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 ); 45 46 sound1 = getAudioClip( 47 getDocumentBase(), "welcome.wav" ); 48 sound2 = getAudioClip( 49 getDocumentBase(), "hi.au" ); 50 currentSound = sound1; 51 } 52 53 // stop the sound when the user switches Web pages 54 // (i.e., be polite to the user) 55 public void stop() 56 { 57 currentSound.stop(); 58 } 59 60 private class ButtonHandler implements ActionListener { 61 public void actionPerformed( ActionEvent e ) 62 { 63 if ( e.getSource() == playSound ) 2000 Prentice Hall, Inc. All rights reserved. 64 currentSound.play();

Outline

2.2 Add buttons 2.3 Initialize audio clips 3. stop 4. Class ButtonHandler

65 66 67 68 69 70 71 } } }

else if ( e.getSource() == loopSound ) currentSound.loop(); else if ( e.getSource() == stopSound ) currentSound.stop();

Outline

Program Output

2000 Prentice Hall, Inc. All rights reserved.

30.4 Animating 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 milliseconds
Timer ( animationDelay, ActionListener ); ActionListener - ActionListener that will respond to ActionEvents

Methods
start stop restart isRunning
2000 Prentice Hall, Inc. All rights reserved.

30.4 Animating 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
2000 Prentice Hall, Inc. All rights reserved.

30.4 Animating 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

2000 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// Fig. 30.3: LogoAnimator.java // Animation a series of images import java.awt.*; import java.awt.event.*; import javax.swing.*; public class LogoAnimator extends JPanel implements ActionListener { protected ImageIcon images[]; protected int totalImages = 30, currentImage = 0, animationDelay = 50; // 50 millisecond delay protected Timer animationTimer; public LogoAnimator() { setSize( getPreferredSize() ); images = new ImageIcon[ totalImages ]; for ( int i = 0; i < images.length; ++i ) images[ i ] = new ImageIcon( "images/deitel" + i + ".gif" ); startAnimation(); } public void paintComponent( Graphics g ) { super.paintComponent( g );

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

2000 Prentice Hall, Inc. All rights reserved.

32 if ( images[ currentImage ].getImageLoadStatus() == 33 MediaTracker.COMPLETE ) { 34 images[ currentImage ].paintIcon( this, g, 0, 0 ); 35 currentImage = ( currentImage + 1 ) % totalImages; 36 } 37 } 38 39 public void actionPerformed( ActionEvent e ) 40 { 41 repaint(); 42 } 43 44 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 displayed 52 if ( ! animationTimer.isRunning() ) 53 animationTimer.restart(); 54 } 55 56 public void stopAnimation() 57 { 58 animationTimer.stop(); 59 } 60 61 public Dimension getMinimumSize() 62 { 63 return getPreferredSize(); 2000 Prentice Hall, Inc. All rights reserved. 64 }

Outline

2.2 If image loaded, display it (paintIcon) 2.3 Increment currentImage 3. actionPerformed 3.1 startAnimation 3.2 stopAnimation 3.3 getMinimumSize

65 66 67 68 69 70 71 72 73

public Dimension getPreferredSize() { return new Dimension( 160, 80 ); } public static void main( String args[] ) { LogoAnimator anim = new LogoAnimator();

Outline

3.4. getPreferredSize 4. main

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 } 2000 Prentice Hall, Inc. All rights reserved.

Outline

Program Output

2000 Prentice Hall, Inc. All rights reserved.

30.5 Animation 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

2000 Prentice Hall, Inc. All rights reserved.

30.5 Animation 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

2000 Prentice Hall, Inc. All rights reserved.

30.6 Customizing 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" );
2000 Prentice Hall, Inc. All rights reserved.

30.6 Customizing 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

2000 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// Fig. 30.4: LogoAnimator.java // Animating a series of images import java.awt.*; import java.awt.event.*; import javax.swing.*; public class LogoAnimator extends JPanel implements ActionListener { protected ImageIcon images[]; protected int totalImages = 30, currentImage = 0, animationDelay = 50; // 50 millisecond delay protected String imageName = "deitel"; protected Timer animationTimer; public LogoAnimator() { initializeAnim(); } // new constructor to support customization public LogoAnimator( int num, int delay, String name ) { totalImages = num; animationDelay = delay; imageName = name; initializeAnim(); } private void initializeAnim()

Outline

1. import 1.1 LogoAnimator class as before 1.2 Constructor to allow customization

2000 { Prentice Hall, Inc. All rights reserved.

33 images = new ImageIcon[ totalImages ]; 34 35 for ( int i = 0; i < images.length; ++i ) 36 images[ i ] = new ImageIcon( "images/" + 37 imageName + i + ".gif" ); 38 39 // moved here so getPreferredSize can check the size of 40 // the first loaded image. 41 setSize( getPreferredSize() ); 42 43 startAnimation(); 44 } 45 46 public void paintComponent( Graphics g ) 47 { 48 super.paintComponent( g ); 49 50 if ( images[ currentImage ].getImageLoadStatus() == 51 MediaTracker.COMPLETE ) { 52 images[ currentImage ].paintIcon( this, g, 0, 0 ); 53 currentImage = ( currentImage + 1 ) % totalImages; 54 } 55 } 56 57 public void actionPerformed( ActionEvent e ) 58 { 59 repaint(); 60 } 61 62 public void startAnimation() 63 { 2000 Prentice Hall, Inc. All rights reserved. 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 displayed 70 if ( ! animationTimer.isRunning() ) 71 animationTimer.restart(); 72 } 73 74 public void stopAnimation() 75 { 76 animationTimer.stop(); 77 } 78 79 public Dimension getMinimumSize() 80 { 81 return getPreferredSize(); 82 } 83 84 public Dimension getPreferredSize() 85 { 86 return new Dimension( images[ 0 ].getIconWidth(), 87 images[ 0 ].getIconHeight() ); 88 } 89 90 public static void main( String args[] ) 91 { 92 LogoAnimator anim = new LogoAnimator(); 93 94 JFrame app = new JFrame( "Animator test" ); 95 app.getContentPane().add( anim, BorderLayout.CENTER ); 2000 Prentice Hall, Inc. All rights reserved. 96

Outline

2. Methods as before

97 98 99 100 101 102 103 104 105

app.addWindowListener( new WindowAdapter() { public void windowClosing( WindowEvent e ) { System.exit( 0 ); } } );

Outline

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 2000 Prentice Hall, Inc. All rights reserved.

127 import java.awt.*; 128 import javax.swing.*; 129 130 public class LogoApplet extends JApplet{ 131 public void init() 132 { 133 String parameter; 134 135 parameter = getParameter( "animationdelay" );

Outline

Applet 1. init 1.1 Initialize objects from parameters 1.2 Supply variables to constructor 2. Set layout

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 ); Hall, Inc. All rights reserved. 156 2000 Prentice getContentPane().add( animator, BorderLayout.CENTER );

157 158 animator.startAnimation();

Outline
3. startAnimation

159
160 }

2000 Prentice Hall, Inc. All rights reserved.

30.7 Image 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

2000 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// Fig. 30.5: ImageMap.java // Demonstrating an image map. import java.awt.*; import java.awt.event.*; import javax.swing.*; public class ImageMap extends JApplet { private ImageIcon mapImage; private int width, height; public void init() { addMouseListener( new MouseAdapter() { public void mouseExited( MouseEvent e ) { showStatus( "Pointer outside applet" ); } } ); addMouseMotionListener( new MouseMotionAdapter() { public void mouseMoved( MouseEvent e ) { showStatus( translateLocation( e.getX() ) ); } } ); mapImage = new ImageIcon( "icons2.gif" );

Outline

1. import 1.1 Declare objects 2. init 2.1 addMouseListener 2.2 Initialize ImageIcon

2000 Prentice Inc. All rights reserved. width Hall, = mapImage.getIconWidth();

33 34 35 36 37 38 39 40 41

height = mapImage.getIconHeight(); setSize( width, height ); } public void paint( Graphics g ) { mapImage.paintIcon( this, g, 0, 0 ); }

Outline
3. paint 4. translateLocation 4.1 Display message depending on x

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 52 return "Performance Tip"; 53 else if ( x > iconWidth * 3 && x <= iconWidth 54 return "Portability Tip"; 55 else if ( x > iconWidth * 4 && x <= iconWidth 56 return "Software Engineering Observation"; 57 else if ( x > iconWidth * 5 && x <= iconWidth 58 return "Testing and Debugging Tip"; 59 60 return ""; 61 } 62 } 2000 Prentice Hall, Inc. All rights reserved.

) * 3 ) * 4 ) * 5 ) * 6 )

Outline

Program Output

2000 Prentice Hall, Inc. All rights reserved.

30.8 Java 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

2000 Prentice Hall, Inc. All rights reserved.

30.8 Java 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

2000 Prentice Hall, Inc. All rights reserved.

30.9 Internet 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.