1

More Animation, Images More Animation, Images and Soundand Sound

Chapter ElevenChapter Eleven

2

Chapter TopicsChapter Topics

Getting Images from Server, Loading them into Java and displaying them in applets

Using Sounds Sun’s Animator applet - organize

animations and sounds Double-buffering (avoid flicker)

3

Retrieving and Using Retrieving and Using ImagesImages the image class in java Special methods in Applet and Graphics Getting Images

– getImage ( ) method with single argument»object of type URL

– getImage with two arguments»URL object»path (relative to the base URL) ” FLEXIBLE”

4

Applet class MethodsApplet class Methods

getDocumentBase( ) = Directory of an HTML file

http://www.myserver.com/htmlfiles/javahtml/,getDocumentBase returns a URL pointed to by that path

getCodeBase( ) directory may not be same as HTML, attribute in <APPLET>

See page 197 four examples all to .gif files .jpeg files can also be supported by Java

5

Drawing ImagesDrawing Images

Once you’ve got the image (.gif, .jpeg)

What are you going to do with it ? public void paint ( ) {

– g.drawImage(img. 10, 10, this); }– img = image to display– 10, 10 where x, y are– and this

6

Ladybug applet - List 11.1Ladybug applet - List 11.1 import Graphics and Image public class LadyBug extends

java.applet.Applet { Image bugimg; public void init( ) { bugimg = getImage(getCodeBase( ),

– “images/ladybug.gif “); } public void paint(Graphics g) { g.drawImage(bugimg, 10, 10, this); }

}

7

More Ladybugs - list 11.2More Ladybugs - list 11.2Scaled with getWidth( ) Scaled with getWidth( ) getHeight( )getHeight( )

The key to this program vs. 11.1 is that – g.drawImage( ); takes six arguments.

The mysterious last argument is “this” It is an ImageObserver which enables the

viewer to see how far along an images is in the loading process - you can make some decisions when the image in partially loaded

8

More differences 11.2 vs. More differences 11.2 vs. 11 .111 .1 public class LadyBug2 extends

java.applet.Applet { public void paint(Graphics g) { int iwidth = bugimg.getwidth(this); int iheight = bugimg.getHeight(this); int xpos = 10; // 25% g.drawImage(bugimg, xpos,10,iwidth/4,

iheight/4, this); // 50%, 100%, 150% later (which image, x,y, width, height, this)

9

Modifying Images - Which Modifying Images - Which is possible is really is possible is really something in the .AWT something in the .AWT color, image processing, creating

bitmap images by hand. Some of the multimedia classes

deal with those topics

10

Neko “cat” an Neko “cat” an anamationanamation Think old cartoons for a bit - how are they

animated? Somehow the stills (cells) are flipped

through and the eye is fooled - it sees motion.

In Neko the .gif files are placed into an array called String neksrc[ ] = (“right1,gif “, “right2.gif”, “yawn.gif”, ... etc ...

See Fig 11.3 page 202 and 203 for code

11

Neko contd.Neko contd.

Once the String nekosrc[ ] = array is loaded the program continues into a for loop

for (int i=0; i < nekopics.length; i++) nekopics[i] = getImage(getCodeBase( ),

“images/” + nekosrc[i]; } } All this is in the public void init ( ) { method

12

What the “cat” Neko is to What the “cat” Neko is to do:do: Run into screen from left Stop in middle, yawn Scratch four times Sleep “exciting yes ? “ wake up run off right side of

screen

13

Original had 36 images Original had 36 images text 9text 9 text repeats some of the images -

run for example To get neko to run create a method

it has two positions x at start and x at end with lots of sleeping...

void pause (int time) {– try { Thread.sleep(time); }– catch (InterruptedException e) { } }

14

void nekorun (int start, int end) { for (int i = start; i < end; i +=10) // why ten,? try other times 10 works OK xpos = i; // next swap images if (currentimg = = nekopics[0])

– currentimg = nekopics[1];– else (currentimg = = nekopics[0]);

repaint( ); pause(150); } } // paint a one liner public void paint(Graphics g) {

– drawImage(currentimg,xpos,ypos,this);}

15

Yawn and Pause - class Yawn and Pause - class favoritesfavorites Find the nekopics[2] and

nekopics[3] .gif files....Start your count at zero

from the left Does one second seem too long to

you (1000 milli seconds = one

seconds) if so change the time

16

Scratching - some peoples Scratching - some peoples idea of funidea of fun Two scratch images [4] and [5] of

nekopics In a for loop pause for 150 milli seconds (OK time

length) Top of method void nekoscratch(int numtimes) { The call in the program page 207 is 4

times

17

Sleeping another class Sleeping another class favoritefavorite void nekosleep(int numtimes) { for (int i = numtimes; i > 0; i-- ) { currentimg = nekopics[6]; repaint( ); pause(250); currentimg

= nekopics[7]; repaint( ); pause( 250); } }

Please wake up if you are asleep at this time

18

Wake UP and run off Wake UP and run off (not in class, the (not in class, the neko...applet )neko...applet ) currentimg = nekopics[8]; repiant( ); pause(500);

nekorun(xpos, size( ).width + 10 );

19

List 11.3 Final Neko List 11.3 Final Neko appletapplet Pages 206, 207 and 208 the longest

program thus far.

ASSIGNMENT: you are to write a program that is similar to neko. It does not have to be as long but should be presented in class next week. You do not have to create your own .gif files. You can use some of the .gif files from author or etc...

20

Retreiving and Using Retreiving and Using SoundsSounds Java supports Sun’s AU format HTML external files clips may sound better play ( ); gets one argument a URL, plays

it as an audio clip play ( ); with two arguments first is URL

– second is a pathname Example : play( getCodeBase( ),

“audio/meow.au”); // you may/may not get

21

List 11.4 AudioLoop List 11.4 AudioLoop appletapplet import // Graphics and AudioClip; public class AudioLoop extends

java.awt.Applet implemets Runnable { AudioClip bgsound; AudioClip beep;

– Thread runner; public void start( ) { if( runner = = null)

{ runner = new Thread(this); runner.start(

); } }

22

public void stop ( ) { if (runner ! = null) { if(bgsound ! = null) bgsound = null; } bgsound.stop( ); runner.stop( );

runner = null; } } public void init( ) {

– bgsound = getAudioClip(getCodeBase( ), “audio/loop.au”);

– beep = setAudioClip(getCodeBase( ), “audio/beep.au);

– }

23

Run itRun it public void run( ) { if (bgsound ! = null)

{ bgsound.loop( ); try { Thread.sleep(5000); } //long time catch (InterruptedException e) { } if (bgsound ! = null) beep.play( ); } }

public void paint (Graphics g) { g.drawString(“ Playing Sounds”, 10, 10);}}

24

Sun’s Animator AppletSun’s Animator Applet

Create an animation loop Add a sountrack Add sounds to play at/in individual

frames Indicate SPEED of applets Specify order of frames - you can re-

use frames in the animation http://java.sun.com // for more info

25

Double-BufferingDouble-Buffering Create a second surface (off screen)

then at the correct time draw the whole surface onto the actual applet.

Problems - uses more memory, space. Better to try drawing portions of screen Overriding update( )

The good Double-buffering nearly eliminates flicker - but avoid it if possible

26

Using Double-buffering in Using Double-buffering in an appletan applet 1. Add instance variables to hold

image and grahhics contexts for off screen buffer

2. Create an image and a graphics context when applet is initalized

3. Do all applet painting to offscreen buffer NOT applet

4. At end of paint ( ) draw the offscreen to real screen

27

Checkers Revisited page Checkers Revisited page 213213 Image offscreenImg; Graphics

offscreenG; public void init( ) { offscreenImg =

createImage(size( ).width, size( ).height); offscreenG =

offscreenImg.getGraphics( );} public void paint( Graphics g) {

– offscreenG.setColor(color.black);– offscreenG.fillRect(0,0,100,100);– fillscreenG.setColor(Color.white);– offscreenG.fillRect(100,0,100,100);

28

//Draw checker offscreenG.setColor(Color.red); offscreenG.fillRect(xpos,5,90,90); g.drawImage(offscreenImg, 0, 0,

this); }