Foundation Flash CS4 for Designers- P22 doc

626 CHAPTER 14 bqj_pekjnaoqiaRe`ak$%6rke`w jo*naoqia$%7 re`ak?kjpnkho*^pjLh]u*ckpk=j`Opkl$l]qoa%7 re`ak?kjpnkho*gjk^*]``ArajpHeopajan$Arajp*AJPAN[BN=IA( ±oaagGjk^Ql`]pa%7 y7 bqj_pekjl]qoaRe`ak$%6rke`w jo*l]qoa$%7 re`ak?kjpnkho*^pjLh]u*ckpk=j`Opkl$lh]u%7 re`ak?kjpnkho*gjk^*naikraArajpHeopajan$Arajp*AJPAN[BN=IA( ±oaagGjk^Ql`]pa%7 y7 Here are two custom functions that help thin out the code a bit for the remaining event handlers. Because of the animated slider knob and toggleable Play/Pause button, the act of pausing and resum- ing video playback requires more than just a reference to JapOpna]i*l]qoa$% or JapOpna]i*naoqia$%. To save keystrokes down the line, these functions invoke the relevant JapOpna]i methods and, in addition, update the Play/Pause button icon, and then either add or remove the custom oaagGjk^Ql) `]pa$% function as a listener of the Arajp*AJPAN[BN=IA event. Note that the gjk^ instance—the knob movieclip in the library—is nested inside the re`ak?kjpnkho instance ( controls in the library). Nesting the symbols makes it easy to move around all of the playback controls as a single group while on the main timeline. Handling the button events It’s already time for the buttons! Nothing to it, but to do it. In the Actions panel, type the following ActionScript beneath what’s already there: ++lnal sepd$re`ak?kjpnkho%w ^pjIqpa*opkl$%7 ^pjIqpa*^qppkjIk`a9pnqa7 ^pjNasej`*^qppkjIk`a9pnqa7 ^pjLh]u*opkl$%7 ^pjLh]u*^qppkjIk`a9pnqa7 ^pjB]opBkns]n`*^qppkjIk`a9pnqa7 ^pjLnar*^qppkjIk`a9pnqa7 ^pjJatp*^qppkjIk`a9pnqa7 y7 ++arajpo sepd$re`ak?kjpnkho%w ^pjIqpa*]``ArajpHeopajan$IkqoaArajp*?HE?G(iqpaD]j`han%7 ^pjNasej`*]``ArajpHeopajan$IkqoaArajp*IKQOA[@KSJ( ±ns@ksjD]j`han%7 627 BUILDING STUFF ^pjNasej`*]``ArajpHeopajan$IkqoaArajp*IKQOA[QL(nsQlD]j`han%7 ^pjLh]u*]``ArajpHeopajan$IkqoaArajp*?HE?G(lh]uD]j`han%7 ^pjB]opBkns]n`*]``ArajpHeopajan$IkqoaArajp*IKQOA[@KSJ( ±bb@ksjD]j`han%7 ^pjB]opBkns]n`*]``ArajpHeopajan$IkqoaArajp*IKQOA[QL(bbQlD]j`han%7 ^pjLnar*]``ArajpHeopajan$IkqoaArajp*?HE?G(lnarD]j`han%7 ^pjJatp*]``ArajpHeopajan$IkqoaArajp*?HE?G(jatpD]j`han%7 y7 The sepd$% statement is new, but it’s an easy concept to grasp, and useful in situations like this one. Basically, it’s a programmer’s shortcut. All of these movieclip buttons are nested inside the _kjpnkho symbol, whose instance name is re`ak?kjpnkho. Rather than referring tediously to each nested mov- ieclip like this: re`ak?kjpnkho*^pjIqpa*opkl$%7 re`ak?kjpnkho*^pjIqpa*^qppkjIk`a9pnqa7 re`ak?kjpnkho*^pjNasej`*^qppkjIk`a9pnqa7 ++*** the sepd$% statement allows us to skip the formalities and let the compiler know that, while we’re inside those curly brackets (w***y), we’re talking about objects inside the re`ak?kjpnkho instance. With that explained, the ActionScript itself should make perfect sense. In the first several lines, the symbols’ ^qppkjIk`a property is set to pnqa, to make these movieclips respond visually like buttons. In addition, ^pjIqpa and ^pjLh]u are instructed to stop their timelines (these are the two symbols with more than one frame apiece). The second group of lines wires up all the corresponding event handlers. Most of the buttons need to respond only to the IkqoaArajp*?HE?G event, but the rewind and fast- forward buttons require the use of click and hold. For this reason, those movieclips are associated with IkqoaArajp*IKQOA[@KSJ to begin the rewind or fast- forward routine, and IkqoaArajp*IKQOA[QL to cancel it. Here’s the code for the Mute button. Type this beneath the existing ActionScript: bqj_pekjiqpaD]j`han$arp6IkqoaArajp%6rke`w tbkni9jo*okqj`Pn]jobkni7 eb$re`ak?kjpnkho*^pjIqpa*_qnnajpH]^ah99kj%w re`ak?kjpnkho*^pjIqpa*ckpk=j`Opkl$kbb%7 tbkni*rkhqia9,7 yahoaw re`ak?kjpnkho*^pjIqpa*ckpk=j`Opkl$kj%7 tbkni*rkhqia9-7 y jo*okqj`Pn]jobkni9tbkni7 y7 The mechanism here is identical to the way the Play/Pause button works for the MP3 player: the mov- ieclip’s current label is consulted, and if it’s showing “on,” the playhead is shifted to the “off” frame (and vice versa). Based on this information, the tbkni instance’s rkhqia property is set to either , (silent) or - (full volume). 628 CHAPTER 14 Here are the “down” and “up” handlers for the Rewind button. Once you grasp this one, you’ll be able to understand the Fast- Forward button as well. Type this beneath the existing ActionScript: bqj_pekjns@ksjD]j`han$arp6IkqoaArajp%6rke`w nsPeian*op]np$%7 y7 bqj_pekjnsQlD]j`han$arp6IkqoaArajp%6rke`w nsPeian*opkl$%7 y7 When users want to rewind, they click and hold the Rewind button. This triggers the ns@ksjD]j`han$% function, which starts the nsPeian instance. The timer is what performs the actual rewinding, and you’ll see how that works at the end of this exercise. When the user releases the button, the nsQlD]j) `han$% function stops the nsPeian. It’s as simple as that. Type the companion “up” and “down” handlers for the Fast- Forward button as well: bqj_pekjbb@ksjD]j`han$arp6IkqoaArajp%6rke`w bbPeian*op]np$%7 y7 bqj_pekjbbQlD]j`han$arp6IkqoaArajp%6rke`w bbPeian*opkl$%7 y7 The code for the Play button is just as self- explanatory. Enter its event handler beneath the existing ActionScript: bqj_pekjlh]uD]j`han$arp6IkqoaArajp%6rke`w eb$re`ak?kjpnkho*^pjLh]u*_qnnajpH]^ah99lh]u%w l]qoaRe`ak$%7 yahoaw naoqiaRe`ak$%7 y y7 The code for the Prev and Next buttons is so similar to the MP3 player’s version, we’re confident you’ll be able to connect the dots. Type the following ActionScript after the existing code: bqj_pekjlnarD]j`han$arp6Arajp%6rke`w _qnnajpRe`ak))7 eb$_qnnajpRe`ak8,%w _qnnajpRe`ak9re`akHeop*re`ak*hajcpd$%)-7 y jo*lh]u$re`akHeop*re`akW_qnnajpRe`akY*<beha*pkOpnejc$%%7 naoqiaRe`ak$%7 y7 629 BUILDING STUFF bqj_pekjjatpD]j`han$arp6Arajp9jqhh%6rke`w _qnnajpRe`ak''7 eb$_qnnajpRe`ak:re`akHeop*re`ak*hajcpd$%)-%w _qnnajpRe`ak9,7 y jo*lh]u$re`akHeop*re`akW_qnnajpRe`akY*<beha*pkOpnejc$%%7 naoqiaRe`ak$%7 y7 As with the MP3 player, the jatpD]j`han$% function’s arp parameter is given a jqhh value by default, and for the same reason: this function is invoked as an event handler and also as a stand- alone function. Programming the slider We hope you’re beginning to notice a theme here. Maybe a sense of déjà vu? The concepts we’re discussing may not quite roll off the tongue just yet, but we hope some of these trees start look- ing familiar—that you get some comfort from the sense that Lake Nanagook seems to have a few well- worn landmarks. Let’s take a look at the slider code for this video player. Continuing with the existing code, type the following new ActionScript beneath the >qppkjo block: ++++++++++++++++++++++++++++++++++++++++ ++Oaagohe`an ++++++++++++++++++++++++++++++++++++++++ ++lnal re`ak?kjpnkho*gjk^*^qppkjIk`a9pnqa7 ++arajpo re`ak?kjpnkho*gjk^*]``ArajpHeopajan$IkqoaArajp*IKQOA[@KSJ( ±oaagOp]np@n]c%7 This is old hat, by now. The knob is instructed to respond to the mouse cursor like a button, and a cus- tom oaagOp]np@n]c$% function is associated with the IkqoaArajp*IKQOA[@KSJ event. Here’s that oaagOp]np@n]c$% function. Type the following ActionScript beneath what’s already there: bqj_pekjoaagOp]np@n]c$arp6IkqoaArajp%6rke`w re`ak?kjpnkho*gjk^*naikraArajpHeopajan$Arajp*AJPAN[BN=IA( ±oaagGjk^Ql`]pa%7 na_p9jasNa_p]jcha$re`ak?kjpnkho*^]n*t(re`ak?kjpnkho*gjk^*u( ±re`ak?kjpnkho*^]n*se`pd(,%7 re`ak?kjpnkho*gjk^*op]np@n]c$pnqa(na_p%7 op]ca*]``ArajpHeopajan$IkqoaArajp*IKQOA[QL(oaagOpkl@n]c%7 y7 The instance names may have changed, but the dance is still the same. When the user presses the mouse over the knob in order to drag it, the oaagGjk^Ql`]pa$% func- tion, which animates its movement, needs to be halted. If not, the knob will skip around frantically, trying to obey both the op]np@n]c$% method (which happens in this very event handler) and the 630 CHAPTER 14 looping oaagGjk^Ql`]pa$% function. The very first line of this function—naikraArajpHeopajan$%— accomplishes this need perfectly. Why not instead use the custom l]qoaRe`ak$% function, which also invokes the same naikraArajpHeopajan$%? It’s a matter of choice. You certainly could. To mix things up, we decided to let the video continue while the user scrubs around. The na_p variable is assigned a new Na_p]jcha instance, which is employed, as before, to constrain the area of the dragging. To wrap up the function, the stage is asked to keep an ear open for IkqoaArajp* IKQOA[QL. Let’s go ahead and write the event handler for that IKQOA[QL listener. Type in the following new code: bqj_pekjoaagOpkl@n]c$arp6IkqoaArajp%6rke`w re`ak?kjpnkho*gjk^*opkl@n]c$%7 jo*oaag$`qn]pekj&$re`ak?kjpnkho*gjk^*t)re`ak?kjpnkho*^]n*t%+ ±re`ak?kjpnkho*^]n*se`pd%7 eb$re`ak?kjpnkho*^pjLh]u*_qnnajpH]^ah99l]qoa%w re`ak?kjpnkho*gjk^*]``ArajpHeopajan$Arajp*AJPAN[BN=IA( ±oaagGjk^Ql`]pa%7 y op]ca*naikraArajpHeopajan$IkqoaArajp*IKQOA[QL(oaagOpkl@n]c%7 y7 Compare this with the version in the MP3 player, and you’ll see how similar they are. When the user releases the mouse—either over the knob or accidentally off of it—the opkl@n]c$% method halts the dragging. The location of the knob, in collaboration with the location of the bar and its width, is mul- tiplied against the duration of the video—remember that this was gathered thanks to the kjIap]@]p] event handler—to determine the numeric value fed into the JapOpna]i*oaag$% method. The oaag$% method sends the video to the nearest video keyframe specified by its parameter, provided that portion of the video has already downloaded. The eb statement checks if the video is currently playing, and if so, reassigns the Arajp*AJPAN[BN=IA event handler that animates the knob’s position. Finally, because the stage listener is no longer needed, this function unhooks its IkqoaArajp*IKQOA[QL association. And here’s the oaagGjk^Ql`]pa$% function, which moves the knob in correspondence with the pro- gression of the video. Type the following ActionScript under the existing code: bqj_pekjoaagGjk^Ql`]pa$arp6Arajp9jqhh%6rke`w r]nlko6Jqi^an9re`ak?kjpnkho*^]n*se`pd&jo*peia+`qn]pekj7 eb$eoJ]J$lko%%w re`ak?kjpnkho*gjk^*t9re`ak?kjpnkho*^]n*t'lko7 yahoaw re`ak?kjpnkho*gjk^*t9re`ak?kjpnkho*^]n*t7 y y7 This function operates just like its cousin in the MP3 player. Note that its arp parameter is set to jqhh by default, which makes it optional. This happens here for the same reason you’ve seen the technique used elsewhere in this chapter: this function needs to be called either as an event handler or on its own. The on-its- own part happens in the Peian event handlers, which are coming up next. 631 BUILDING STUFF Using timers to rewind and fast- forward In the JapOpna]i*oaag$% method used in the previous section, the knob’s position determined the time offset in which the video should play. Rewinding and fast- forwarding is nothing more than a repeat performance of the same functionality. The Peian instances you declared at the beginning of this exercise—nsPeian and bbPeian—and the oaagN]pa variable, are about to give you everything you need to accomplish these features. In the Actions panel, enter the following ActionScript beneath what’s already there: ++++++++++++++++++++++++++++++++++++++++ ++Peiano ++++++++++++++++++++++++++++++++++++++++ ++arajpo nsPeian*]``ArajpHeopajan$PeianArajp*PEIAN(nasej`%7 bbPeian*]``ArajpHeopajan$PeianArajp*PEIAN(b]opbkns]n`%7 When the nsPeian and bbPeian instances were declared, they were told to dispatch the PeianArajp* PEIAN event every 100 milliseconds. Here, that event is associated with respective event handler func- tions for each timer. All you need to do now is write those functions. Here’s the first one of those, nasej`$%. Type the following ActionScript after the existing code: bqj_pekjnasej`$arp6PeianArajp%6rke`w eb$jo*peia)oaagN]pa:,%w jo*oaag$jo*peia)oaagN]pa%7 yahoaw jo*oaag$,%7 y oaagGjk^Ql`]pa$%7 y7 Remember, when requested, this function executes every tenth of a second. The first thing it does is check the JapOpna]i*peia property, to see where the video currently is. Maybe it has been playing for 25 seconds, and if so, the peia property would be .1. An eb statement determines if the current video’s peia property minus oaagN]pa (which happens to be 10) is greater than 0. At 25 seconds in, the answer is indeed yes, and if so, the jo instance is instructed to seek to that point in the video. Why check with an eb statement? Because you don’t want to seek to a negative number. If the subtraction would, in fact, seek to a negative number, jo is told to seek to 0. Finally, the oaag) Gjk^Ql`]pa$% function updates the position of the knob to match the current time offset of the video. With the code as it stands—specifically, a oaagN]pa value of -,—the act of rewinding repeatedly sends the video playhead back 10 seconds at a time, which is a fairly hefty number. What if you want to seek to a finer degree? Just change oaagN]pa to a smaller number—say, 1, ., or maybe even ,*1. But watch out, if you do: unless you’re using RTMP, as you would with Flash Media Server, you can only seek to video keyframes. The frequency of your keyframes (not timeline keyframes, but video keyframes) determines how successfully you can rewind or fast- forward. In the video files included with this 632 CHAPTER 14 chapter, you’ll find that EjgOkjc*il0, which has many keyframes, handles a much smaller oaagN]pa value than either of the FLVs. When you have a mix of videos, you’ll need to go with the lowest com- mon denominator, which in this case means the highest common oaagN]pa value. How do you figure that value out? With good, old- fashioned testing. To wrap it up, type these final lines at the very bottom of your script: bqj_pekjb]opbkns]n`$arp6PeianArajp%6rke`w eb$jo*peia'oaagN]pa8`qn]pekj%w jo*oaag$jo*peia'oaagN]pa%7 y oaagGjk^Ql`]pa$%7 y7 As you can see, this b]opbkns]n`$% code is nothing more than the opposite of its companion, nasej`$%. The reason there isn’t an ahoa clause in this one—it would have been ahoa w jo*oaag$`qn]pekj% y—is that seeking to the very end of a video file is often a dicey thing. The `qn]pekj value retrieved from the kjIap]@]p] handler is one of those “close, but not necessarily a cigar” things. Sometimes metadata isn’t as truthful as it should be, and rather than accidentally make the attempt to seek too far past the duration of the file (which generates an error), this function puts the video as near the end of the video as it safely can. As before, the oaagGjk^Ql`]pa$% function keeps the knob up-to- date on where it needs to be as fast- forwarding occurs. Remember that these timers are started and stopped in the event handlers triggered by mouse presses and releases to the Rewind and Fast- forward buttons. Test the movie and enjoy the show (see Figure 14-17). Figure 14-17. Take a bow.You now know how to create your own personal video controller! 633 BUILDING STUFF After being mesmerized by the musical ink blots—truly an inventive and gorgeous combi- nation of the visual and musical arts—you might be wondering what made us choose the particular videos we did to wrap up this chapter. There are a number of reasons, actually. First and foremost, these videos are flat- out interesting. Second, they’re an inspiration. Chen Zhou, who created the “Ink’s song” video, has accom- plished with splashes of ink what Robert Bringhurst (quoted in Chapter 6) admonishes typographers to endeavor with text. The authors would like to thank the China Central Academy of Fine Arts’ Media Lab in Beijing for permission to use Chen’s video in this book. In the other two files, Greg Pattillo breaks the mold by performing his own interpretation of well- known tunes on the flute—while beatboxing at the same time. Recognized by the New York Times as “the best person in the world at what he does,” Greg makes it clear that truly cool things can come from trying something new. We thank Greg for his permis- sion to include his videos (collectively viewed online over 20 million times) with this book. Third, these files are interesting from a technical standpoint. Why’s that? The MP4 is an HD H.264- encoded file, while the FLVs are standard batch- encoded YouTube files. Why is this interesting? It demonstrates Flash Player’s flexibility in a compelling way. Using a smatter- ing of XML and less than 200 lines of ActionScript, you’re able to build an insanely small (3KB!) video player that handles anything from 73MB HD video to popular YouTube per- formances. Now think back to Chapter 10. The BHRLh]u^]_g component does all of this, but the resulting SWF weighs in at 52KB. Use the drawing tools to create the assets, write a couple hundred lines of code to do it yourself, and your SWF sheds 49KB. We think that’s about as neat as it gets. If you’re interested in more beatbox flute, head over to dppl6++_`^]^u*_ki+_`+ lnkfa_piqoe_, where Greg collaborates with Eric Stephenson (cello) and Peter Seymour (bass) in their genre- defying ensemble, PROJECT. 634 CHAPTER 14 What you have learned Rather than list what we covered in this chapter, we think it is more important to take a broader view of that statement. Step back for a moment and think about what you knew when you first laid this book on your desk and flamed up Flash CS4. The answer, we suspect, is “Not a lot.” Now think about your working through this chapter. The odds are pretty good you were able to follow along, and we are willing to bet there were a couple of points where you may have asked us to “move along a little quicker.” This says to us that we have done our job, and that you may just know a lot more than you are aware of. Congratulations. We were also a little sneaky with this chapter. If you follow the flow from the start to the end, you will see it actually follows the structure of this book: each exercise is designed to add to your knowledge base by building upon what you learned in the preceding exercise and, as we kept pointing out, in preceding chapters. Finally, this chapter expanded on practically every concept presented in this book. If you have com- pleted the exercises, then you have quite a bit of practical experience using Flash CS4. Now that you’ve learned the ropes and have practiced numerous techniques, let’s concentrate on the end game of the Flash design and development process: publishing your file. 637 When it comes to Flash on the Web, a common user experience is sitting around waiting for the movie to start. From your perspective, as the artist who designed the site, this may seem odd. After all, when you tested the movie in the authoring envi- ronment, it was seriously fast and played flawlessly. What happened? To be succinct, the Web happened. Your movie may indeed be cool, but you made a fundamental mistake: you fell in love with the technology, not the user. In this chapter, we’ll talk about how to improve the user experience. Here’s what we’ll cover in this chapter: Understanding how Flash movies are streamed to a web page Using the Bandwidth Profiler to turbo- charge movies Optimizing Flash movies Converting a Flash movie to a QuickTime video Choosing web formats Publishing a SWF for web playback Dealing with remote content OPTIMIZING AND PUBLISHING FLASH MOVIES Chapter 15 [...]... at Flash CS4 through the Adobe Web Premium Bundle, you have an ideal tool for this process at your disposal Fireworks CS4 has been repositioned as a rapid prototyping tool If you open that application and select Window Common Library, you will see bunch of folders that contain symbols for a variety of rapid prototyping tasks The Flow Diagram symbols, shown in Figure 15-9, are ideal for planning a Flash. .. linking all information with all other information The article was entitled “As We May Think,” and you can still read it at An HTML page may be nothing more than a text file, but it can contain links to other assets, such as CSS files, JPGs, GIFs, and your Flash movies These links take the form of a URL (Uniform Resource Locator) and specify the location of the assets requested by the HTML document When... resulted in Flash gaining a rather nasty reputation for bloat, which it still has not shaken entirely Of course, the Flash community does have quite a sense of humor One of the more popular Flash sites of the time was named “Skip Intro.” You can watch it via ’s Wayback Machine, When you launch the site, make sure to click the phrase “Play Ball” (hip for “Enter this site”) to start the never-ending Flash. .. numbers, Flash will even create a log file for you Head over to File Publish Settings Flash and put a check mark in the Generate size report check box When you next test your movie, look in the Output panel You’ll see a detailed analysis of the timeline, with columns for Frame #, Frame Bytes (per-frame bytes), Total Bytes (cumulative total), and more, including itemized byte weights at the bottom for fonts,... which uses HTML—a formatting language of tags and text—to define how a page should look and behave This is important, because your Flash movies should always be found in an HTML wrapper The concept of hyperlinks and hypertext was around long before the Internet The gentleman who managed the atomic bomb project for the United States during World War II, Vannevar Bush, wrote an article for the Atlantic... because she works in Flash and optimizes her vectors, images like “Sole” (see Figure 15-16) can be resized in the browser without ever getting pixelated And the depicted SWF weighs a miniscule 23KB! Figure 15-16 Yes, this image was drawn entirely with Flash s drawing tools, by Giulia Balladore (http://www juniatwork.com/) 656 OPTIMIZING AND PUBLISHING FLASH MOVIES Optimizing Flash content for use in video... fast download The days of introductory eye candy for your Flash movies are over If the content they see within that 15-second window is not relevant to the site or the experience, users leave If a bleeding-edge Flash site isn’t viewable on a two-year-old computer with a standard operating system and hardware, it’s time to go back to the drawing board For a commercial site, you may have to go back three... goal will be to facilitate Flash Player’s natural tendency to stream Please understand that streaming doesn’t make things faster What it does is give you the opportunity to intelligently organize the timeline so the movie starts playing in very short order Used wisely, streaming can ensure that everything in the Flash movie is downloaded before it is needed The result is a Flash movie that seems to... when a browser asks for them As you can see, the infrastructure that moves your SWF files from a server to thousands of browsers is already in place Where your pain and heartache arise is from something called bandwidth 640 OPTIMIZING AND PUBLISHING FLASH MOVIES Bandwidth In the early days of Flash, around the year 1999, one of the authors read an article written by a New York Flash designer, Hillman... movie That old adage “Plan your work and work your plan” is especially true when working with Flash You can’t make it up as you go along You need to take the time before you start to think about what the user sees, and in what order, before you starting firing content into the library and then onto the stage For example, a video site that lets the user choose from a number of videos would probably involve . Understanding how Flash movies are streamed to a web page Using the Bandwidth Profiler to turbo- charge movies Optimizing Flash movies Converting a Flash movie to a QuickTime video Choosing web formats . resulted in Flash gaining a rather nasty reputation for bloat, which it still has not shaken entirely. Of course, the Flash community does have quite a sense of humor. One of the more popular Flash. files, JPGs, GIFs, and your Flash movies. These links take the form of a URL (Uniform Resource Locator) and specify the location of the assets requested by the HTML document. When Firefox, Internet