***copy edit AMS...26 June
***production code:
[em] = em dash
[CN]Chapter 16
[CT]Images and Sound
Many Web developers are attracted to Java because of its ability to incorporate multimedia into Web pages. This chapter discusses how you can incorporate graphics and sound into your applets, and how you can make these effects occur under user control. The chapter also explores synchronization of sound and images in threads.
???Andy: As always, we need a bulleted list of topics covered in the chapter. --AMS
[1]Example: The AlphaMedia Applet
???Andy: We need an intro to this section, something that describes what this applet is all about and some of the nifty things about it that the reader will learn how to do in this chapter.--AMS
***PD: please insert figure jafe1601.pcx screenshot of alphaMedia default screen
[H3][a]When the AlphaMedia applet starts, the Sscreen starts out blank.
???Andy: If the screen starts out blank, how do the rest of these components make their appearance? Please explain how the screen that starts out blank is now filled with components--AMS
[H3][b]This is the Ddrawing area.
[H3][c]There are six Bbuttons below the drawing area.
[H2]User has pressed a button
***PD: please insert figure jafe1602.pcx screenshot of alphamedia after pressing button "A"
[H3][a]In this example, the Uuser has clicked on pressed the "A" button.
[H3][b]A graphic of the letter "A" appearsed.
[H3][c]A strong, scholarly voice (well, my voice, anyway) says "A.". Each key press is accompanied by an appropriate graphic and sound.
[1]Example: The AlphaTime Applet
???Andy: We need an intro to this section, something that describes what this applet is all about and some of the nifty things about it that the reader will learn how to do in this chapter.--AMS
***PD: please insert figure jafe1603.pcx screenshot of alphaTime default
[H3][a]When the AlphaTime applet starts, the sScreen starts out blank.
??Andy: Same question about how the screen that starts out blank is now filled with components--AMS
[H3][b]A running tTimer appears at the top of the applet window.
[H3][c]A single button appears at the bottom of the applet window.Button
[H2]Some Time Has Passed
***PD: please insert figure jafe1604.pcx screenshot of alphatime "C" showing
[H3][a]In this next view of the AlphaTime applet, you can see that the Ttimer is incrementing to indicate that some time has passed.
[H3][b]Graphics are shown one at a time.
???Andy: Please better qualify that last sentence. What kinds of graphics? how often are they shown? how long does one appear before the next one replaces it?--AMS
[H3][c]That same mysterious voice is reading a poem. You need to hear this yourself. As each letter appears, a new line of the poem is played. The abject beauty of the poetry might just bring tears to your eyes.
???Andy: According to Webster, "abject: existing in a low state or condition; cast down in spirit." Jeepers, just what *is* this poem about? <grin> Are you sure another adjective wouldn't be better?—AMS
[1]Incorporating an Image
???Andy: We can't have headings stacked on top of one another. Some text has to follow each heading--AMS
[H2]Showing a Simple Image
???Andy: More text here that explains the concept behind the fig that follows-_AMS
***PD: please insert figure jafe1605.pcx screenshot of ShowA
[H3][a]The ShowA applet is a Standard simple, standard applet.
???Andy: What does "standard applet" mean?--AMS
[H3][b]Unlike any applets you have seen earlier in this book, this applet It is showing a graphicn image!
[H2]Overwriting Tthe paint() Method
???Andy: More text here that explains the concept behind the fig that follows-_AMS
***PD: please insert figure jafe1606.pcx source of ShowA up to (including) paint line
[H3][a]The initialization code for the ShowA applet looks just the same as it does for any nNormal applet.
[H3][b]Here, we overwrite the paint() method. The paint() method is a built-in method of the cComponent class. Its job is to hold commands that will draw onto the component. The paint() method is automatically called when a component is moved or resized.
[H3][c]The paint() method is passed a Graphics object. The gGraphics object is the part of the component that can be drawn on. It has a number of very interesting methods. You might recall using it in cChapter 12 in the LetterDraw drawing program.
[H23]Getting an Image
???Andy: More text here that explains the "getting an image" concept-_AMS
***PD: please insert figure jafe1607.pcx source of ShowA Image creation line
[H3][a]This line of the paint() method Ccreates an Image object. While Although the iImage object's purpose is reasonably obvious, it's a little trickier than you might think. You almost never use a constructor to create an image. Instead, you use the getImage() method of the Applet object.
???Andy: Why don't you use a constructor to create an Image object?--AMS
[H3][b]The getImage() method actually creates the image. The applet gets the image from the wWeb. The easiest form of the getImage() method has two parameters. The first one is a URL for the directory in which the image is locatedon. The second is a string pointing to the image file in that directory. In this example, the image's directory information is retrieved using the getCodeBase() method; the filename being retrieved is A.jpg.
[H3][c]The getCodeBase() method. Java imposes strict security rules on Aapplets. Applets are only allowed to retrieve files only from the same machine which that houses the applet. The getCodeBase() method returns the URL of the directory that which contains the applet file. Some programmers use the getDocumentBase() method, which contains the URL of the directory that contains the HTML document. I usually have the applet and its HTML document in the same directory, so it doesn't matter much which method one you use. Either method will work as long as the graphic file you want to retrieve is located in the same directory as the applet or HTML file.
[23]Drawing an Image
???Andy: More text here that explains "drawing the image" concept-_AMS
***PD: please insert figure jafe1608.pcx source of showA drawImage line
[H3][a]The drawImage() method. This is a method of the gGraphics class. It takes four parameters.
[H3][b]The first parameter is the name of the The image to draw. The preceding line of code assigned the directory and filename of the image to the variable imgA.
[H3][c]the next two parameters are the Ccoordinates of image. As usual, (0,0) is in the upper -left hand corner. The coordinates you specify here is is are where the applet will place the upper -left corner of the image.
[H3][d]The this keyword refers to ImageObserver. This is a class that which will be 'responsible' for the image. More on this later.
???Andy: Where, "later" do you talk about the this keyword? I don't find the discussion "later in this chapter," so please give a cross-reference to the chapter in which the reader can find more info on the this pointer.--AMS
[1]Drawing on a Canvas
???Andy: We can't have headings stacked on top of one another. Some text has to follow each heading. Here, please define the term "canvas"--AMS
[H2]Using a Canvas Component
???Andy: To introduce this section, please talk a bit about the Canvas component: what it is, how it works, why it's needed--AMS
***PD: please insert figure jafe1609.pcx source of showCanvas
[H3][a]In this ShowCanvas applet, this line Ccreates a Canvas component. Canvas is an interesting component. It does very little on its own. It is great when you need a very simple component to extend, or when you want a component to do graphics on.
[H3][b]The init() method aAdds the cCanvas and the btnA button to the applet window.
[H3][c]When the button is clicked, the actionPerformed() method occurs. The first thing it does is Gget an image, just as we did in the preceding example.before
[H3][d]The getGraphics() method Ggets the gGraphics object of the cCanvas.
???Andy: Please go into some more detail here about "getting the Graphics object of theCanvas." What, exactly, does that mean? why do you have to do it?--AMS
[H3][e]The drawImage() method dDraws the specified image on the canvas.
[1]Images and Java
???Andy: again, we can't have headings stacked on top of one another. Some text has to follow each heading. Here, please introduce the concept of images in Java--AMS
[H2]Considering Image Size Issues
Java works best with the same kinds of images you are familiar with seeing on the wWeb: JPG and GIF. When considering images for a jJava applet, think of graphics as you do in HTML design. Images vary considerably in their file size. Larger image files mean longer download times. Do all you can to make your images as compact as possible. Here are 's some things you can do:
***PD: begin bulleted unnumbered list
* If your image was drawn in a graphics program, consider the GIF formatscheme. GIF files This gives better compression of images with large blocks of fewer colors.
* If your image it is a photographic-style image, look at the JPG scheme format instead. JPG It is better at compressing these kinds of images than the GIF format is.
* The JPG format allows variable compression. Try increasing the compression rate using your graphics editor.
* You can often decrease the color depth without a significant loss of image quality. This can reduce the image's file size considerably.
???Andy: Do both GIF and JPG allow you to reduce color depth? Please clarify which format you're talking about--AMS
* Don't make the dimensions of the image any larger than they need to be. If you can make the image it smaller in the drawing program and scale it up in Java without any significant loss of quality, do so.
***PD: end unnumbered list
[H2]Editing a Graphic with tThe GimpGIMP
???Andy: What's a "gimp"? Please define that term when you insert the intro text for this section. Also make this intro talk about the bigger issue of "editing a graphic"; these brief callouts aren't enough to adequately cover this topic--—AMS
***PD: please insert figure jafe1610.pcx screenshot of Gimp creating one of the letters
[H3][a]The GimpIMP (GNU Image Manipulation Program) is a powerful, free graphics editor. It is included on the CD-ROM that accompanies this book.
[H3][b]The editor contains Sseveral interesting text effects. are built in
[H3][c]The menus and tools in the Gimp editor are similar to those in other high-end graphics editors.
[1]Multiple Images
Once After the a canvas and the ActionListener interface are in place, it is an easy matter to extend the applet so that it can show multiple images in response to user input.
???Andy: Please explain a bit more how the ActionListener and the canvas work together. I thought ActionListener was good for button clicks; if the user clicks on the canvas, is ActionListener responsible for that, too?--AMS
***PD: please insert figure jafe1611.pcx screenshot of ShowCanvas2 default
[H3][a]The ShowCanvas2 applet Now it has two buttons on the bottom of the applet window.
[H3][b]Note that there is no image showing yet in the canvas area of the applet.
[2]Reacting to "A" button
***PD: please insert figure jafe1612.pcx screenshot of ShowCanvas2 after pressing btnA
[H3][a]In this example, the user has clicked on the User pressed "A button."
[H3][b]Image A showed up on the canvas.
[2]Reacting to "B" button
***PD: please insert figure jafe1613.pcx screenshot of showcanvas2 after btnB
[H3][a]In this example, the uUser clicked on button pressed "B".
[H3][b]Image B appears on the canvas.
[H3][c]Note that Image A is still visible in the background. This arrangement of images doesn't look very good. The images are not the same size and thy . They both look kind of strange shoved up in the corner of the canvas like they are. You'll deal with these at problems later.
[2]Understanding Class-Level Variables
???Andy: Please define "class-level variables" in the intro text you'll be providing here--AMS
***PD: please insert figure jafe1614.pcx source of ShowCanvas2 class level stuff
[H3][a]These statements Ccreate the components used by the ShowCanvas2 applet: two buttons and the canvas.
[H3][b]These statements Mmake two iImage variables at the class level.
[H3][c]This statement mMakes a class-level Graphics object. The reason to make these variables at the class- level is so that they can be initialized in init(), and manipulated in actionPerformed().
???Andy: What are your other options for creating variables if not within a class? And if you can create a variable in some other place, how do you initialize or manipulate it? I guess I don't see any big deal about class-level variables--AMS
[H2]Initializationg the Graphics Objects
???Andy: Please explain what the big deal about initializing is in this applet (why it merits its own section)--AMS
***PD: please insert figure jafe1615.pcx source of ShowCanvas2 init method
[H3][a]The first part of the init() method in the ShowCanvas2 applet takes care of the Do normal layout stuff. It sets up the BorderLayout manager, creates a panel to hold the two buttons, and adds the canvas and the button panel to the applet window.
[H3][b]This line Iinitializes the gGraphics object. Generally, it is a bad idea to have a one-character variable name, but Java programmers frequently call the primary Graphics object "g".
[H3][c]Remember that g is the graphics object of the canvas, not the applet.
[H3][d]These lines initialize the two image objects with the appropriate directory and filename information.
[H2]Responding to the Button Press
???Andy: Please give us the necessary intro text for this section. Something that reminds the reader that clicking the buttons, not the canvas itself, is what calls actionPerformed()--if that is indeed true-_AMS
***PD: please insert figure jafe1616.pcx source of ShowCanvas2 actionPerformed
[H3][a]The first statement of the actionPerformed() method cCreates a local iImage object called currentImage.
[H3][b]The currentImage object is Iinitialized it to imgA. Recall that the imgA variable contains the directory and filename information for a particular image.Initially, currentImage points to imgA.
[H3][c]The if structure first checks to see whether the user has clicked on the A button.If the user clicks button a,
[H3][d]If the A button was clicked, this line ensures that set currentImage is set to imgA.
[H3][e]If the B button was clicked, this line Otherwise sets currentImage to imgB.