Java Multimedia Images Animation Audio and Video Outline

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 • get. Image( image. Location, filename ); • image. Location - get. Document. Base() - 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 draw. Image – Many overloaded versions g. draw. Image( my. Image, x, y, Image. Observer ); • my. Image - Image object • x, y - coordinates to display image • Image. Observer - object on which image is displayed – Use "this" to indicate the applet – Can be any object that implements Image. Observer interface – g. draw. Image( my. Image, x, y, width, height, Image. Observer ); • width and height - dimensions of image (automatically scaled) – get. Width(), get. Height() - return dimensions of applet 2000 Prentice Hall, Inc. All rights reserved.

30. 2 Loading, Displaying and Scaling Images (III) • Class Image. Icon – Not an abstract class (can create objects) – Example constructor private Image. Icon my. Icon; my. Icon = new Image. Icon( "my. Icon. gif" ); • Displaying Icons with method paint. Icon my. Icon. paint. Icon( 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 – Image. Icons are simpler than Images • Create objects directly • No need for Image. Observer reference – However, cannot scale Image. Icons • Scaling – Use Image. Icon method get. Image • Returns Image reference • This can be used with draw. Image 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: Load. Image. And. Scale. java Outline // 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 Image. Icon. import java. applet. Applet; import java. awt. *; import javax. swing. *; Image Example public class Load. Image. And. Scale extends JApplet { private Image logo 1; private Image. Icon logo 2; 1. 1 Declare objects // load the image when the applet is loaded public void init() { logo 1 = get. Image( get. Document. Base(), "logo. gif" ); logo 2 = new Image. Icon( "logo. gif" ); } // display the image public void paint( Graphics g ) { // draw the original image g. draw. Image( logo 1, 0, 0, this ); // draw the image scaled to fit the width of the applet // and the height of the applet minus 120 pixels g. draw. Image( logo 1, 0, 120, get. Width(), get. Height() - 120, this ); 2000 Prentice Hall, the Inc. icon All rights reserved. // draw using its paint. Icon method 1. import 2. init() 2. 1 Initialize objects 3. paint() 3. 1 draw. Image calls

32 logo 2. paint. Icon( this, g, 180, 0 ); 33 } Outline 34 } 3. 2 paint. Icon 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, sound. File. Name ); location - get. Document. Base (URL of HTML file) play( sound. URL ); sound. URL - 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 Audio. Clip interface – More flexible than Applet method play • Audio stored in program, can be reused – get. Audio. Clip • Returns reference to an Audio. Clip • Same format as Applet method play – get. Audio. Clip( location, filename ) – get. Audio. Clip( sound. URL ) – Once Audio. Clip 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: Load. Audio. And. Play. java // Load an audio clip and play it. import java. applet. *; import java. awt. event. *; import javax. swing. *; public class Load. Audio. And. Play extends JApplet { private Audio. Clip sound 1, sound 2, current. Sound; private JButton play. Sound, loop. Sound, stop. Sound; private JCombo. Box choose. Sound; // load the image when the applet begins executing public void init() { Container c = get. Content. Pane(); c. set. Layout( new Flow. Layout() ); String choices[] = { "Welcome", "Hi" }; choose. Sound = new JCombo. Box( choices ); choose. Sound. add. Item. Listener( new Item. Listener() { public void item. State. Changed( Item. Event e ) { current. Sound. stop(); current. Sound = choose. Sound. get. Selected. Index() == 0 ? sound 1 : sound 2; } } 2000 Prentice Hall, Inc. All rights reserved. ); Outline 1. import 1. 1 Declare objects 2. init 2. 1 Set layout

33 c. add( choose. Sound ); 34 35 Button. Handler handler = new Button. Handler(); 36 play. Sound = new JButton( "Play" ); 37 play. Sound. add. Action. Listener( handler ); 38 c. add( play. Sound ); 39 loop. Sound = new JButton( "Loop" ); 40 loop. Sound. add. Action. Listener( handler ); 41 c. add( loop. Sound ); 42 stop. Sound = new JButton( "Stop" ); 43 stop. Sound. add. Action. Listener( handler ); 44 c. add( stop. Sound ); 45 46 sound 1 = get. Audio. Clip( 47 get. Document. Base(), "welcome. wav" ); 48 sound 2 = get. Audio. Clip( 49 get. Document. Base(), "hi. au" ); 50 current. Sound = sound 1; 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 current. Sound. stop(); 58 } 59 60 private class Button. Handler implements Action. Listener { 61 public void action. Performed( Action. Event e ) 62 { 63 if ( e. get. Source() == play. Sound ) 2000 Prentice Hall, Inc. All rights reserved. 64 current. Sound. play(); Outline 2. 2 Add buttons 2. 3 Initialize audio clips 3. stop 4. Class Button. Handler

65 else if ( e. get. Source() == loop. Sound ) 66 current. Sound. loop(); 67 Outline else if ( e. get. Source() == stop. Sound ) 68 current. Sound. stop(); 69 } 70 } 71 } 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 Image. Icons • Class Timer – Generates Action. Events at a fixed interval in milliseconds Timer ( animation. Delay, Action. Listener ); Action. Listener - Action. Listener that will respond to Action. Events – Methods • start • stop • restart • is. Running 2000 Prentice Hall, Inc. All rights reserved.

30. 4 Animating a Series of Images (II) • Method repaint – Calls update, which calls paint. Component • Subclasses of JComponent should draw in method paint. Component • Call superclass's paint. Component 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 my. Dim. Object = new Dimension( 100, 200 ); my. Dim. Object. width 2000 Prentice Hall, Inc. All rights reserved.

30. 4 Animating a Series of Images (III) • get. Image. Load. Status – Image. Icon method • Determines if image is completely loaded into memory • Only complete images should be displayed (smooth animation) – If loaded, returns Media. Tracker. COMPLETE – Media. Tracker • Can determine when images are loaded, or force program to wait if not • Image. Icon creates our Media. Tracker 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: Logo. Animator. java // Animation a series of images import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Logo. Animator extends JPanel implements Action. Listener { protected Image. Icon images[]; protected int total. Images = 30, current. Image = 0, animation. Delay = 50; // 50 millisecond delay protected Timer animation. Timer; public Logo. Animator() { set. Size( get. Preferred. Size() ); Outline 1. import 1. 1 implements Action. Listener 1. 2 Declare objects 1. 3 Constructor images = new Image. Icon[ total. Images ]; 1. 4 Initialize Image. Icon array for ( int i = 0; i < images. length; ++i ) images[ i ] = new Image. Icon( "images/deitel" + i + ". gif" ); 2. paint. Component start. Animation(); 2. 1 Call to superclass paint. Component } public void paint. Component( Graphics g ) { super. paint. Component( g ); 2000 Prentice Hall, Inc. All rights reserved.

32 if ( images[ current. Image ]. get. Image. Load. Status() == 33 Media. Tracker. COMPLETE ) { 34 images[ current. Image ]. paint. Icon( this, g, 0, 0 ); 35 current. Image = ( current. Image + 1 ) % total. Images; 36 } 37 } 38 39 public void action. Performed( Action. Event e ) 40 { 41 repaint(); 42 } 43 44 public void start. Animation() 45 { 46 if ( animation. Timer == null ) { 47 current. Image = 0; 48 animation. Timer = new Timer( animation. Delay, this ); 49 animation. Timer. start(); 50 } 51 else // continue from last image displayed 52 if ( ! animation. Timer. is. Running() ) 53 animation. Timer. restart(); 54 } 55 56 public void stop. Animation() 57 { 58 animation. Timer. stop(); 59 } 60 61 public Dimension get. Minimum. Size() 62 { 63 return get. Preferred. Size(); 2000 Prentice Hall, Inc. All rights reserved. 64 } Outline 2. 2 If image loaded, display it (paint. Icon) 2. 3 Increment current. Image 3. action. Performed 3. 1 start. Animation 3. 2 stop. Animation 3. 3 get. Minimum. Size

65 66 67 68 69 70 public Dimension get. Preferred. Size() { return new Dimension( 160, 80 ); } 71 public static void main( String args[] ) 72 73 { Logo. Animator anim = new Logo. Animator(); 74 75 76 JFrame app = new JFrame( "Animator test" ); app. get. Content. Pane(). add( anim, f. Border. Layout. CENTER ); 77 78 app. add. Window. Listener( 79 80 81 new Window. Adapter() { public void window. Closing( Window. Event e ) { 82 System. exit( 0 ); 83 84 85 86 87 88 89 90 } } ); // The constants 10 and 30 are used below to size the // window 10 pixels wider than the animation and // 30 pixels taller than the animation. app. set. Size( anim. get. Preferred. Size(). width + 10, 91 anim. get. Preferred. Size(). height + 30 ); 92 app. show(); 93 } 94 } 2000 Prentice Hall, Inc. All rights reserved. Outline 3. 4. get. Preferred. Size 4. main

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 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="Logo. Applet. class" width=400 height=400> <param name="totalimages" value="30"> <param name="imagename" value="deitel"> <param name="animationdelay" value="200"> </applet> </html> – Invokes applet Logo. Applet – param tags • Each has a name and a value • Use Applet method get. Parameter (returns a String) parameter = get. Parameter( "animationdelay" ); 2000 Prentice Hall, Inc. All rights reserved.

30. 6 Customizing Applets via the HTML param Tag (II) • Following example – Use the Logo. Animator class as before, but modified slightly – Create Applet Logo. Applet • Takes parameters • Creates Logo. Animator 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: Logo. Animator. java // Animating a series of images import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Logo. Animator extends JPanel implements Action. Listener { protected Image. Icon images[]; protected int total. Images = 30, current. Image = 0, animation. Delay = 50; // 50 millisecond delay protected String image. Name = "deitel"; protected Timer animation. Timer; public Logo. Animator() { initialize. Anim(); } // new constructor to support customization public Logo. Animator( int num, int delay, String name ) { total. Images = num; animation. Delay = delay; image. Name = name; initialize. Anim(); } private void initialize. Anim() 2000 { Prentice Hall, Inc. All rights reserved. Outline 1. import 1. 1 Logo. Animator class as before 1. 2 Constructor to allow customization

33 images = new Image. Icon[ total. Images ]; 34 35 for ( int i = 0; i < images. length; ++i ) 36 images[ i ] = new Image. Icon( "images/" + 37 image. Name + i + ". gif" ); 38 39 // moved here so get. Preferred. Size can check the size of 40 // the first loaded image. 41 set. Size( get. Preferred. Size() ); 42 43 start. Animation(); 44 } 45 46 public void paint. Component( Graphics g ) 47 { 48 super. paint. Component( g ); 49 50 if ( images[ current. Image ]. get. Image. Load. Status() == 51 Media. Tracker. COMPLETE ) { 52 images[ current. Image ]. paint. Icon( this, g, 0, 0 ); 53 current. Image = ( current. Image + 1 ) % total. Images; 54 } 55 } 56 57 public void action. Performed( Action. Event e ) 58 { 59 repaint(); 60 } 61 62 public void start. Animation() 63 { 2000 Prentice Hall, Inc. All rights reserved. 64 if ( animation. Timer == null ) { Outline 2. Methods as before

65 current. Image = 0; 66 animation. Timer = new Timer( animation. Delay, this ); 67 animation. Timer. start(); 68 } 69 else // continue from last image displayed 70 if ( ! animation. Timer. is. Running() ) 71 animation. Timer. restart(); 72 } 73 74 public void stop. Animation() 75 { 76 animation. Timer. stop(); 77 } 78 79 public Dimension get. Minimum. Size() 80 { 81 return get. Preferred. Size(); 82 } 83 84 public Dimension get. Preferred. Size() 85 { 86 return new Dimension( images[ 0 ]. get. Icon. Width(), 87 images[ 0 ]. get. Icon. Height() ); 88 } 89 90 public static void main( String args[] ) 91 { 92 Logo. Animator anim = new Logo. Animator(); 93 94 JFrame app = new JFrame( "Animator test" ); 95 app. get. Content. Pane(). add( anim, Border. Layout. CENTER ); 2000 Prentice Hall, Inc. All rights reserved. 96 Outline 2. Methods as before

97 app. add. Window. Listener( 98 99 100 101 102 new Window. Adapter() { public void window. Closing( Window. Event e ) { System. exit( 0 ); } 103 } 104 105 ); 106 107 108 app. set. Size( anim. get. Preferred. Size(). width + 10, anim. get. Preferred. Size(). height + 30 ); app. show(); 109 110 } } 111 // Fig. 30. 4: Logo. Applet. 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 // 118 // 119 // 120 // 121 // 122 // HTML parameter "imagename" is the base name of the images that will be displayed (i. e. , "deitel" is the base name for images "deitel 0. gif, " "deitel 1. gif, " etc. ). The applet assumes that images are in an "images" subdirectory of the directory in which the applet resides. 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. Outline

127 import java. awt. *; 128 import javax. swing. *; 129 130 public class Logo. Applet extends JApplet{ 131 public void init() 132 { 133 String parameter; 134 135 parameter = get. Parameter( "animationdelay" ); 136 137 138 int animation. Delay = ( parameter == null ? 50 : Integer. parse. Int( parameter ) ); 139 140 String image. Name = get. Parameter( "imagename" ); 141 142 143 parameter = get. Parameter( "totalimages" ); int total. Images = ( parameter == null ? 0 : Integer. parse. Int( parameter ) ); 144 145 146 // Create an instance of Logo. Animator animator; 147 148 149 150 151 152 if ( image. Name == null || total. Images == 0 ) animator = new Logo. Animator(); else animator = new Logo. Animator( total. Images, animation. Delay, image. Name ); 153 154 set. Size( animator. get. Preferred. Size(). width, 155 animator. get. Preferred. Size(). height ); Hall, Inc. All rights reserved. 156 2000 Prentice get. Content. Pane(). add( animator, Border. Layout. CENTER ); Outline Applet 1. init 1. 1 Initialize objects from parameters 1. 2 Supply variables to constructor 2. Set layout

157 158 159 animator. start. Animation(); Outline } 160 } 2000 Prentice Hall, Inc. All rights reserved. 3. start. Animation

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 mouse. Moved 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: Image. Map. java // Demonstrating an image map. import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Image. Map extends JApplet { private Image. Icon map. Image; private int width, height; public void init() { add. Mouse. Listener( new Mouse. Adapter() { public void mouse. Exited( Mouse. Event e ) { show. Status( "Pointer outside applet" ); } } ); add. Mouse. Motion. Listener( new Mouse. Motion. Adapter() { public void mouse. Moved( Mouse. Event e ) { show. Status( translate. Location( e. get. X() ) ); } } ); map. Image = new Image. Icon( "icons 2. gif" ); 2000 Prentice Inc. All rights reserved. width Hall, = map. Image. get. Icon. Width(); Outline 1. import 1. 1 Declare objects 2. init 2. 1 add. Mouse. Listener 2. 2 Initialize Image. Icon

33 height = map. Image. get. Icon. Height(); 34 35 36 37 38 set. Size( width, height ); } public void paint( Graphics g ) { 39 3. paint map. Image. paint. Icon( this, g, 0, 0 ); 40 41 } 42 43 44 public String translate. Location( int x ) { // determine width of each icon (there are 6) 45 46 int icon. Width = width / 6; 47 48 49 if ( x >= 0 && x <= icon. Width ) return "Common Programming Error"; else if ( x > icon. Width && x <= icon. Width * 2 ) 50 Outline return "Good Programming Practice"; 51 52 else if ( x > icon. Width * 2 && x <= icon. Width * 3 ) return "Performance Tip"; 53 54 55 56 57 58 else if ( return x > icon. Width * 3 && x <= icon. Width * 4 ) "Portability Tip"; x > icon. Width * 4 && x <= icon. Width * 5 ) "Software Engineering Observation"; x > icon. Width * 5 && x <= icon. Width * 6 ) "Testing and Debugging Tip"; 59 60 return ""; 61 } 62 } 2000 Prentice Hall, Inc. All rights reserved. 4. translate. Location 4. 1 Display message depending on x

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/for. Developers/ • 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.