Series Title © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 11 Multimedia in Java: Images, Sound and Animation

Series Title

© 2002 The McGraw-Hill Companies, Inc. All rights reserved.

1

McGraw-Hill/Irwin

Chapter 11

Multimedia in Java: Images, Sound and Animation

Series Title


2

McGraw-Hill/Irwin

Objectives

• Enhance your applet with graphics and sound.

• Draw graphics on a container using the paint method.

• Load an image file into a project.

• Generate sounds with the play method.

• Create animation using multiple images, moving images, and animated .gif files.

Series Title


3

McGraw-Hill/Irwin

Graphics

• The term graphics in Java refers to any text, drawing, image, or icon.

• Each time an applet or window is displayed, is resized or moved, the object’s paint method is executed.

• So far the paint method has executed automatically but we will learn to override the paint method.

• To create a graphics object, you must include the java.awt.Graphics package.

• You create an object of the Graphics class, set any color or font properties you want, and specify the text and/or drawing in the paint method.

Series Title


4

McGraw-Hill/Irwin

The Paint Method

• Whether you write an application or an applet, the paint method executes automatically and draws the screen.

• For an applet, the paint executes after the init and for an application the paint executes after the main.

• Then every time the window is resized, maximized, minimized, moved or uncovered the paint executes again.

• Any components placed on the container are redrawn automatically.

Series Title


5

McGraw-Hill/Irwin

• But if you draw graphics, in the init or main method, those are not redrawn by the paint method.

• If you want the graphics to be redrawn each time. You need to place them in the paint method – you must override the paint method.

• The paint Method – Headerpublic void paint(Graphics myGraphicObject)public void paint(Graphics gr)

• The paint method requires a Graphics object as an argument.

The Paint Method Continued

Series Title


6

McGraw-Hill/Irwin

Drawing Text

• You can create text on a Graphics object using the drawString method of the Graphics class.

Series Title


7

McGraw-Hill/Irwin

The Graphics drawString Method—Format

drawString(String ValueToPrint, int x, int y )

Series Title


8

McGraw-Hill/Irwin

The Graphics drawString Method—Examples

gr.drawString("Hi There", 1, 1);myGraphicObject.drawString("Hello World!", 100, 150);graScreen.drawString(strCompanyName, intXpos, intYpos);

Series Title


9

McGraw-Hill/Irwin

Drawing Text

• Place the drawString method in the paint method of your applet or application.

• The drawString method draws in the current font and color.

• You can use the setFont and setColor methods to the graphics object to change the color/font.

Series Title


10

McGraw-Hill/Irwin

The drawImage Method Displays a Graphic

Series Title


11

McGraw-Hill/Irwin

Selected Methods from Graphic classMethod Purpose

clearRect(int x, int y, int width, int height) Clear a rectangular area by setting it to the container's background color.

draw3DRect(int x, int y, int width, int height, boolean raised)

Draw a 3D rectangle.

drawArc(int x, int y, int width, int height, int startAngle, int arcAngle);

Draw an arc.

drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)

Draw the specified image.

drawLine(int x1, int y1, int x2, int y2) Draw a line from one point to another.

drawOval(int x, int y, int width, int height) Draw an oval.

drawPolygon(int xPoints[], int yPoints[], int nPoints

Draw a polygon with nPoints number of points, using arrays to store the points.

drawRect(int x, int y, int width, int height) Draw a rectangle.

drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

Draw a rectangle with rounded corners.

Series Title


12

McGraw-Hill/Irwin

Selected Methods from Graphic class Cont.drawString(String str, int x, int y) Draw a string of text.

fill3DRect(int x, int y, int width, int height, boolean raised)

Draw a filled 3D rectangle.

fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

Draw a filled arc.

fillOval(int x, int y, int width, int height) Draw a filled oval.

fillPolygon(int xPoints[], int yPoints[],

int nPoints)

Draw a filled polygon.

fillRect(int x, int y, int width, int height) Draw a filled rectangle.

fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)

Draw a filled rounded rectangle.

setColor(Color c) Set the color to use for future methods.

setFont(Font font) Set the font to use for future methods.

Series Title


13

McGraw-Hill/Irwin

Using Image Files

• An image file holds a picture, icon, or text stored in one of the graphic file formats.

• Java can load files .gif or .jpg format.

Series Title


14

McGraw-Hill/Irwin

Obtaining the Picture

• The applet’s getImage method to retrieve an image file.

Series Title


15

McGraw-Hill/Irwin

The getImage Method— General Format

getImage(URL)getImage(URL location, String FileName)

Series Title


16

McGraw-Hill/Irwin

The getImage Method—Examples

getImage("http://www.site.com/picture.gif")getImage(getDocumentBase(),"Cup.jpg");

Series Title


17

McGraw-Hill/Irwin

Obtaining the Picture

• The getDocumentBase method returns the name of the current folder – the one from which the HTML was loaded.

• You can use the getcodeBase method, which returns the location from which the applet was loaded.

• It is best store an image as image object.

• You can name your image and assign its file and then use the image anywhere in the applet. Place the getImage method in your init method.

Series Title


18

McGraw-Hill/Irwin

Displaying the Image

• Use the drawImage method of the Graphics class to display an image.

Series Title


19

McGraw-Hill/Irwin

The Graphics drawImage Method—Formats

drawImage(Image imgName, int x, int y, ImageObserver this)drawImage(Image imgName, int x, int y, int width, int height, ImageObserver this)drawImage(Image imgName, int x, int y, Color backgroundColor, ImageObserver this)drawImage(Image imgName, int x, int y, int width, int height, Color backgroundColor, ImageObserver this)

Series Title


20

McGraw-Hill/Irwin

The Graphics drawImage Method—Examples

graphicsObject.drawImage(imgCup, 0, 0, this);graphicsObject.drawImage(imgCup, 100, 75, 75, 75, this);

Series Title


21

McGraw-Hill/Irwin

Adjusting the Size of an Image

• You can change the size of the image when you display it by specifying the width and height.

• For example : screen.drawImage(imgHello, 50, 20, 100, 30, this);

Series Title


22

McGraw-Hill/Irwin

The drawImage Method Displays a Graphic

Series Title


23

McGraw-Hill/Irwin

Specifying Height and Width of Image

Series Title


24

McGraw-Hill/Irwin

The Repaint Method

• You would want to display an image other than when the applet runs, maybe when an event occurs.

• The paint method executes automatically after the init method.

• You can call the repaint method to get the screen redrawn at any time.

• The repaint method requests the update method to execute.

• The update method clears the screen and calls the paint method.

Series Title


25

McGraw-Hill/Irwin

Avoiding Screen Flicker • When you draw images on the screen, you see an annoying flicker.• The flicker is due to the interaction between the paint, repaint and the

update methods. • When the repaint method calls the update method, it clears the

container by default and calls the paint method. • This can be avoided by overriding the update method by calling the

paint method without first clearing the screen. public void update(Graphics gr){

//Call the paint methodpaint(gr);

} • Another technique for avoiding screen flicker, is called double

buffering, uses a second graphics object.

Series Title


26

McGraw-Hill/Irwin

Obtaining Images in Applications • Obtaining images for application is a little different than an applet.• You cannot use the getImage method because the method belongs to the

applet class.• In order to obtain an image, you must use the Toolkit class from the awt

package.• The toolkit returns the platform-specific information about the

environment in which the application is running.• The getDefaultToolkit method retrieves the default information for the

current system, and is required to successfully retrieve an image.• For example :

imgMove = Toolkit.getDefaultToolkit().getImage("MyPicture.gif");• If you write a program that runs as either an applet or an application,

you must use the correct getImage method.• Using the toolkit for an applet causes a security violation.

Series Title


27

McGraw-Hill/Irwin

Sound

• Like images, sounds are also stored in files, which are referred as audio clips.

• Java 2 supports several sound formats – Sun audio files (.au), Window Wave files (.wav), Macintosh AIFF (.aif or .aiff), and Musical Instrument Digital Interface (MIDI) files (.mid or .rmi).

• If you use an earlier version of Java and if you use Microsoft Visual J++, you are limited to only .au files.

Series Title


28

McGraw-Hill/Irwin

Loading and Playing an Audio Clip • Loading and playing an audio clip is very similar to loading and

displaying an image file.• You can declare an object of the AudioClip to store your sound

and you can retrieve your file using the getAudioClip method.• The AudioClip class is part of the applet package.• Just as images, you load the sound files during the initialization

process.• An audio clip has three methods : play, loop and stop.• The play and stop, do what you think and loop plays the

continuously until stopped.• You could make an applet begin with a sound by placing the play

method in the init methodsndBong =

getAudioClip(getDocumentBase(),"Bong.wav");sndBong.play();

Series Title


29

McGraw-Hill/Irwin

Stopping an Audio Clip

• Make sure you stop an audio clip after starting it, especially if you started with a loop.

• If the applet is running the browser and the user switches to another page, the sound does not automatically stop.

• You can override the applet’s stop method, which executes when the applet is no longer active.

• Stop any sound clips that may be running.

• You can stop sound clip, even if it was not running, no error will occur.

Series Title


30

McGraw-Hill/Irwin

Responding to Mouse Events • You can modify the code for the sound applet so that a mouse

event causes the sound to play.• The mouse listener for this code can be placed on a component.• Here is the code:

public void mouseEntered(MouseEvent event){

// Play the soundsndDemo.play(); //Or use .loop to play continuously

}public void mouseExited(MouseEvent event){

//Stop the sound sndDemo.stop();

}

Series Title


31

McGraw-Hill/Irwin

Using the Graphics Object to Print

• You can produce printed output by sending a Graphics object to a printer.

• You can print from either an applet or an application with a few restrictions.

• It is easy print from the Applet Viewer but to print from the browser causes a security violation on most systems.

• Although the security permission levels can be set for each system, by default an applet running in a browser cannot queue a print job.

• Applications are not bound by the same security rules as applets, and are allowed to print.

Series Title


32

McGraw-Hill/Irwin

• To use the print toolkit, your application must extend an applet• Similar to the writing an applet as an application• Here is the code to print the contents of the applet panel on the

printer.//Create a print job PrintJob printer = getToolkit().getPrintJob(frmForPrinting, "Print Demo", null);if(printer != null) //Print job not canceled by the user...{

//Create a Graphics object to printGraphics grPrintPage = printer.getGraphics();printAll(grPrintPage); //Print the applet panel as a graphic imagegrPrintPage.dispose(); //Send the page to the printerprinter.end(); //End the print job

}

Using the Graphics Object to PrintContinued

Series Title


33

McGraw-Hill/Irwin

Starting a Print Job

• A print job must reference a frame as well as a graphics object.

• If you are printing from the applet, you must declare a Frame object, although it isn’t necessary to display the frame.

• You must create an object of the PrintJob class which comes from the AWT package.

Series Title


34

McGraw-Hill/Irwin

The getPrintJob Method—General Format

getPrintJob(Frame frameName, String Title, Properties value)

Series Title


35

McGraw-Hill/Irwin

The getPrintJob Method—Examples

getPrintJob(frmForPrinting, "", null)getPrintJob(frmMain, "Print Demo", null)

Series Title


36

McGraw-Hill/Irwin

Capturing the Graphics

• After you create the print job, you declare a Graphics object and assign it as the object associated with the print job by using the print job’s getGraphics method Graphics grPrintPage = printer.getGraphics();

Series Title


37

McGraw-Hill/Irwin

Beginning the Print Job

• The following statement:• PrintJob printer = getToolkit().getPrintJob(frmForPrinting,

"Print Demo", null);• Begins the print job, gives the job a name, and displays the

Print dialog box to the user.• If the user clicks the Cancel button, the getPrintJob method

returns a null instead of a PrintJob object.• So you need to test for null before printing.

if(printer != null){

Graphics grPrintPage = printer.getGraphics();}

Series Title


38

McGraw-Hill/Irwin

Printing a Page

• You can print a container an all of its components using the container’s printAll method.

Series Title


39

McGraw-Hill/Irwin

The printAll Method—General Format

container.printAll(Graphics graphicsObject)

Series Title


40

McGraw-Hill/Irwin

The printAll Method—Examples

printAll(grPrintPage); //Print the current applet panelthis.printAll(grMyPage);//Print the current applet panelfrmMain.printAll(grPrintPage); //Print the frame called frmMain

Series Title


41

McGraw-Hill/Irwin

Sending a Page to the Printer Queue

• To actually send a page to the printer queue, you must use the dispose method of the Graphics object.

• The dispose method means “flushes” the page which means sends the page to the printer queue and then clears the Graphics object.

• If you want to print multiple pages then you would set up one page, dispose it, set up the next page and then dispose the next one.

• For example:grPrintPage.dispose();//Send the page to the printer

Series Title


42

McGraw-Hill/Irwin

Ending the Print Job

• After you have printed all the pages, you want to terminate the print job by calling its end method.printer.end(); //terminates the print job

Series Title


43

McGraw-Hill/Irwin

Printing Text and Graphics • If you want to print text, use the drawString method of the

Graphics object after creating the object but before calling the dispose method.

• Note that in this case you are setting up the Graphics object and printing that, rather than the printing the container.if(printer != null) //Print job not canceled by the user...{

//Create a Graphics object to printGraphics grPrintPage = printer.getGraphics();//Add text to the Graphics objectgrPrintPage.setFont(new Font("Sans Serif", Font.PLAIN, 14));grPrintPage.drawString("This is new text", 100, 100);grPrintPage.drawString("Second line of text", 100, 120);grPrintPage.dispose(); //Send the page to the printerprinter.end(); //End the print job

}

Series Title


44

McGraw-Hill/Irwin

Animation

• You can create animation in several different ways.• You can quickly display images that are slightly different form

each other to give the visual impression of animation.• You can move an image across the screen by erasing the image

and redrawing the image in a new position.• Another very easy way to include animation on the screen is to

display an animated .gif file, which has the animation built in.• You can use Java Media Framework to display animations that

can include full-motion video and sound.• To create animation in Java that does anything else besides

displaying an animated image, you must learn about Threads.• Threads allow a program to do more than one thing at a time.

Series Title


45

McGraw-Hill/Irwin

Threads

• To make your Java applet or application display an animated image and do some other task at the same time, you set up a separate thread for animation.

• A program may have several threads running at the same time.

• What actually happens is that thread runs for a short time and suspends operation (goes to sleep) so the program can switch to another thread.

• Each thread has its own code to execute the desired operations, and the computer switches from one thread to the next, so that it appears that they are all executing simultaneously.

Series Title


46

McGraw-Hill/Irwin

• Some methods such as connecting to a database or a network may wait for a response.

• Methods that wait for a response are known as blocking methods.

• A blocking method should be placed in a separate thread so that if a problem occurs with the connection, you can interrupt the thread rather than the entire application or applet.

• You can choose two techniques to set up multiple threads.

• You can inherit your class from the Thread class or implement the Runnable interface.

Threads Continued

Series Title


47

McGraw-Hill/Irwin

Differences Between Multitasking and Multithreading

• Multitasking allows your computer to appear that it is running several programs at once.

• Actually, each program is called a process, gets a share of the processor time.

• Each processor executes in a separate area of memory and requires substantial computer resources.

• A process requires a complete copy of a program’s code and data.• However, within a single program, you may have multiple tasks to

perform. • Each of the tasks in the program can be set up as a thread.• A thread uses less resources than a process because it does not require its

own copy of code.

Series Title


48

McGraw-Hill/Irwin

The Thread Class

• When you extend the Thread class, your program can use any of the methods from the class.

• The technique is not popular as Java allows only one inheritance, so therefore you cannot inherit the Applet class and the Thread class.

• The other technique is to implement the Runnable interface.

Series Title


49

McGraw-Hill/Irwin

The Runnable Interface

• When you implement the Runnable interface, it allows you to instantiate Thread objects in your class.

Series Title


50

McGraw-Hill/Irwin

The Thread Class—Constructors

Thread() //Automatically generates a thread nameThread(String threadName)

Series Title


51

McGraw-Hill/Irwin

The Thread Class—Examples

Thread StartupThread;Thread ImageThreads[];

Series Title


52

McGraw-Hill/Irwin

The Runnable Interface • A thread has a run method that executes when the thread starts.• You code the contents of the run method to perform whatever actions you wish.• The following example puts the animation thread to sleep while other tasks are

being performed. public void run(){ //Keep putting the thread to sleep to allow other processing to occur while(true) //Loop continuously{ try {

//Handle the processing for the threadanimationThread.sleep(100); //Pause 100 milliseconds (1/10 second)if(intImage > 8) //8 images to display{

intImage = 0;}repaint(); //Repaint the screen

}catch(Exception error){}

}

}

Series Title


53

McGraw-Hill/Irwin

• For thread processing, you must include exception handling event if you do not code any actions for error condition.

The Runnable InterfaceContinued

Series Title


54

McGraw-Hill/Irwin

Thread Methods

• The thread methods you will use the most are run, start, stop, and sleep.

Series Title


55

McGraw-Hill/Irwin

Selected Thread methodsMethod Purpose

activeCount() Returns number of threads running (currently not stopped).

currentThread() Returns a reference to the thread currently running.

destroy() Ends the thread without cleanup.

getName() Returns the name of the current thread.

getPriority() Returns the priority level of a thread.

isAlive() Determines if the string is still there.

join() Waits for a thread to die. An int or long can be used to indicate the time interval to wait.

run() Waits for a thread to die. An int or long can be used to indicate the time interval to wait.Contains code that occurs when the thread is executing.

setName(String threadName) Assigns a name to the thread.

setPriority(int PriorityLevel) Assigns the priority level. Constants for priority are MAX_PRIORITY, MIN_PRIORITY, and NORM_PRIORITY.

sleep(long Interval) Specifies a time in milliseconds for the thread to be inactive.

start() Begins execution of a thread.

stop() Halts execution of a thread.

yield() Temporarily halts execution of a thread for other threads to execute.

Series Title


56

McGraw-Hill/Irwin

Thread Methods

• You can start a thread anytime you choose, such as in response to a user action or when an applet begins.

//Start the thread for the animationanimationThread = new Thread(this);animationThread.start();

• You can stop the thread anytime you choose in response to a user action.

//Stop the threadanimationThread.stop();

• The sleep method pauses a thread the specified number of milliseconds.

Series Title


57

McGraw-Hill/Irwin

• If your program has more than one operation occurring, such as animation and user input, you would need to pause so other actions can occur.

animationThread.sleep(1000); //pause for 1000ms – 1 sec

• Java has another type of thread called the daemon thread.

• This type of thread performs its task and then becomes inactive.

• If only daemon threads are executing, Java interpreter terminates the project.

Thread Methods Continued

Series Title


58

McGraw-Hill/Irwin

Synchronization

• Because all the threads have access to data, you may find it necessary to coordinate execution so the threads do not collide – try to access data simultaneously.

• When you synchronize the threads, only one thread can deal with the data at a time.

• The synchronization can apply to a series of statements or to an entire method.

Series Title


59

McGraw-Hill/Irwin

Synchronization Continued

• When you place the synchronized qualifier on a block of statements, the block is called a critical section.Critical Sectionsynchronized (txaReport){

//Statements modifying txaReport//Only one thread can alter txaReport at a time

}Synchronized Methodsynchronized void methodName(){

//Only one thread can be executing this method at one time}

Series Title


60

McGraw-Hill/Irwin

Animating Images

• To make an image appear animated, you can display a series of images, each slightly different from the last.

• One way to implement the series of images is to create an array.

• The next step is to load the images into the array elements. This is done in the init (occurs once in the lifetime of an applet).

Series Title


61

McGraw-Hill/Irwin

Animation Applet

Series Title


62

McGraw-Hill/Irwin

Waiting for Images to Load

• The getImage method begins retrieving the image and returns; it does not wait for the process to complete.

• You can use the MediaTracker object to water for completion and/or check to see if images have finished loading.

• You declare an object of the MediaTracker class and attach each image that you want to track to the object.

• Then you can use the object’s waitForAll method or checkAll method to either wait or check the status.

Series Title


63

McGraw-Hill/Irwin

Setting up a MediaTracker • Declare an object of the MediaTracker class.• You will need a boolean variable to indicate whether the

images have finished loading.• After the getImage methods in the init, instantiate the

MediaTracker and add each image to the new object. MediaTracker trackLoad; //Track the image file loadingboolean blnImagesLoaded = false;

//Instantiate the MediaTrackertrackLoad = new MediaTracker(this); //"this" refers to the applet//Add the images to the MediaTrackerfor (int intIndex = 0; intIndex <= 7; intIndex++){

trackLoad.addImage(imgCollection[intIndex], 0);

}

Series Title


64

McGraw-Hill/Irwin

• You will need to modify the run and paint methods to successfully wait for the images to load.

• The animation’s run method will begin execution as soon as the applet starts.

• You will need to repaint once, to force Loading Images……” message to display, and then use the MediaTracker’s waitForAll method.

• Several types of errors can occur when loading images, so rather try to ”catch” them all, use the MediaTracker’s isErrorAny method to check for errors after the operation completes.

• You must still enclose the statements in the try/catch block to catch an InterruptedException.

Setting up a MediaTrackerContinued

Series Title


65

McGraw-Hill/Irwin

Moving an Image • Another way to animate an image is to move it across the screen.• You can do this by redrawing the image in a new spot,

calculating new values for the X and Y coordinates.• The repaint method calls the update method, which clears the

container and calls the paint.• The drawback of the update method – screen flicker.• You can erase an image by drawing a rectangle of the

background color over the image, using the fillRectangle method of the Graphics class. public void paint(Graphics gr){

//Erase previous imagegr.setColor(getBackground()); //Set the color to the current background

colorgr.fillRect(intXPos, intYPos, 40, 40); //Draw a filled rectangle over

previous image}

Series Title


66

McGraw-Hill/Irwin

• After erasing the previous image, calculate the new position and draw the image in its new location.

if (intXPos > getSize().width) //Check for right edge of applet panelintXPos = 0; //Start at left edge again• You may want the image to move across the panel and

disappear from view, or check for the edge and either restart the animation or reverse its direction.

• You can check the edges of the applet panel using the getSize method and the width and height properties.

• For example, getSize.width() returns the width of the applet panel.

if (intXPos > getSize().width) //Check for right edge of applet panel

intXPos = 0; //Start at left edge again

Moving an Image Continued

Series Title


67

McGraw-Hill/Irwin

Moves the Car Across the Screen

Series Title


68

McGraw-Hill/Irwin

Swing Components

• You have additional options for images.

• You can add images to buttons and tabbed panes and you can substitute the Swing ImageIcon class for the Image.

• The ImageIcon works very much like the Image, except the ImageIcon automatically searches the default directory for an image.

Series Title


69

McGraw-Hill/Irwin

Adding Images to a JButton

• JButton has several constructors that allow you to add text, an image, or both text and an image.

• For example:JButton btnOne = new JButton(imgOne);JButton btnTwo = new JButton(imgTwo);

Series Title


70

McGraw-Hill/Irwin

Using ImageIcons in a ToolBar

• You can declare a JToolbar component, add buttons to it and add it to an application’s ApplicationPane.

• For example:private JToolBar toolbar = new JToolBar();//Add the toolbar buttonstoolbar.add(btnOne);toolbar.add(btnTwo);ApplicationPane.add(toolbar, BorderLayout.NORTH);

Series Title


71

McGraw-Hill/Irwin

Toolbar Consists of Jbuttons with ImageIcons

Documents

Series Title © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 11 Multimedia in Java: Images, Sound and Animation