Transcript CH11revised - Academic Web Pages

More Animation, Images and
Sound
Chapter Eleven
1
Chapter 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)

2
Retrieving and Using Images
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”
3
Applet class Methods
getDocumentBase( ) = Directory of an
HTML file
 http://www.myserver.com/htmlfiles/j
avahtml/,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

4
Drawing 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
5
Ladybug 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); } }

6
More Ladybugs - list 11.2
Scaled with getWidth( )
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

7
More differences 11.2 vs. 11 .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

8
Modifying Images - Which is
possible is really something in the
.AWT
color, image processing, creating
bitmap images by hand.
 Some of the multimedia classes deal
with those topics

9
Neko “cat” an anamation
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

10
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

11
What the “cat” Neko is to do:
Run into screen from left
 Stop in middle, yawn
 Scratch four times
 Sleep “exciting yes ? “
 wake up run off right side of screen

12
Original had 36 images text 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) { } }
13
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) {

14
Yawn and Pause - class favorites
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

15
Scratching - some peoples idea 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

16
Sleeping another class favorite
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

17
Wake UP and run off (not in
class, the neko...applet )
currentimg = nekopics[8];
 repiant( ); pause(500); nekorun(xpos,
size( ).width + 10 );

18
List 11.3 Final Neko applet

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...
19
Retreiving and Using Sounds
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( ),
20
List 11.4 AudioLoop applet
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( );
} }

21
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);
–}
22
Run 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);}}
23
Sun’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

24
Double-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
25
Using Double-buffering in an
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

26
Checkers Revisited page 213
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);
27
//Draw checker
 offscreenG.setColor(Color.red);
 offscreenG.fillRect(xpos,5,90,90);
 g.drawImage(offscreenImg, 0, 0, this); }

28