Foundation Flash CS4 for Designers- P21 potx

596 CHAPTER 14 14. To simulate image downloads, so you can see the progress bar in action, select View ° Simulate Download from the SWF’s File menu. If you like, compare your work with the Ohe`aodks*bh] file in the ?kilhapa folder. Extending the tour As it turns out, wandering through the 798 Art District of Beijing makes a decent metaphor for this exercise, because after all of this careful examination of the art in the galleries, we’re about to uncover a treasure in a gallery just a few more paces up the street. Save your file to keep everything safe. Now select File ° Save As and save a copy as Ohe`aodksTIH*bh] into the same folder. Click back into frame 1 of the scripts layer to make a few changes. Here’s the first chunk of code, which replaces the hard- wired images, with revisions shown in bold. eilknpbh*`]p]*@]p]Lnkre`an7 r]ntih@k_6TIH9jasTIH$%7 r]ntihHk]`an6QNHHk]`an9jasQNHHk]`an$%7 r]ntihNam6QNHNamqaop9jasQNHNamqaop$ohe`aodks*tih%7 tihHk]`an*hk]`$tihNam%7 tihHk]`an*]``ArajpHeopajan$Arajp*?KILHAPA( ±tih?kilhapaD]j`han%7 bqj_pekjtih?kilhapaD]j`han$arp6Arajp%6rke`w tih@k_9TIH$arp*p]ncap*`]p]%7 ei]cao*`]p]Lnkre`an9jas@]p]Lnkre`an$tih@k_%7 _d]jcaLe_pqna$,%7 y7 The ei]ca@]p] array is gone completely. In its place stands our trusty XML loading formula. The only differences here are the variable names. The QNHHk]`an instance, for example, has been changed to tihHk]`an, because hk]`an is already in use as the instance name for the UILoader component. In the same way, the QNHNamqaop instance is named tihNam, because nam is used later in the code, and the XML’s _kilhapaD]j`han$% function is named tih?kilhapaD]j`han$%. This time, we’re loading the file ohe`aodks*tih, and that’s where the former ei]ca@]p] content now resides. Translated into XML, it looks like this: 8ohe`aodks: 8ohe`ah]^ah9354=np@eopne_pLdkpk-`]p]9354[,-*flc ±_]lpekj9H]vu`]ukjpdaopnaap*+: 8ohe`ah]^ah9354=np@eopne_pLdkpk.`]p]9354[,.*flc ±_]lpekj9S]hh]np*+: 8ohe`ah]^ah9354=np@eopne_pLdkpk/`]p]9354[,/*flc ±_]lpekj9=jcnu]j`_qpa*+: 8ohe`ah]^ah9354=np@eopne_pLdkpk0`]p]9354[,0*flc ±_]lpekj9Pdaik`anj]j`pda]j_eajp+: 8ohe`ah]^ah9354=np@eopne_pLdkpk1`]p]9354[,1*flc ±_]lpekj9Jkpoqnasd]ppki]gakbpdeo*+: 8ohe`ah]^ah9354=np@eopne_pLdkpk2`]p]9354[,2*flc ±_]lpekj9Pdalksankbpda]npeop;+: 597 BUILDING STUFF 8ohe`ah]^ah9354=np@eopne_pLdkpk3`]p]9354[,3*flc ±_]lpekj9B]odekjodkkp]p]opa]iajceja*+: 8ohe`ah]^ah9354=np@eopne_pLdkpk4`]p]9354[,4*flc ±_]lpekj9=opnaapejpda`eopne_p*+: 8+ohe`aodks: This is practically the same as the previous array, except that this time, it’s in a separate XML document instead of being hard- wired into the ActionScript. Let’s take another look at the Arajp*?KILHAPA event handler for the tihHk]`an instance. The function runs as follows: bqj_pekjtih?kilhapaD]j`han$arp6Arajp%6rke`w tih@k_9TIH$arp*p]ncap*`]p]%7 ei]cao*`]p]Lnkre`an9jas@]p]Lnkre`an$tih@k_%7 _d]jcaLe_pqna$,%7 y7 Notice that the @]p]Lnkre`an handling has been moved here from its former position next to the combo box Arajp*?D=JCA handler. Why? Because under the circumstances, the combo box can’t be populated until the XML has loaded. Next, the _d]jcaLe_pqna$% call has also been moved here from its earlier position. Why? Same reason: until the XML loads, the _d]jcaLe_pqna$% has no reference for what image to summon. Two more paces! At or near line 21, you’ll find the _d]jcaBqj_pekj$% declaration. You’ll need to tweak two lines (changes in bold): bqj_pekj_d]jcaLe_pqna$le_p6ejp%6rke`w l^*reoe^ha9pnqa7 _]lpekj*patp9tih@k_*ohe`aWle_pY*<_]lpekj7 nam*qnh9tih@k_*ohe`aWle_pY*<`]p]7 hk]`an*hk]`$nam%7 y7 Instead of pulling from the old ei]ca@]p] array, the text field and UILoader component now draw their information from the tih instance, using E4X syntax to specify the relevant 8ohe`a: element attributes. Here, the function’s incoming le_p parameter serves the same purpose as it did before: it specifies which 8ohe`a: element to consult. Don’t forget to delete what used to be the last line in this chunk: that is, _d]jcaLe_pqna$,%7 which is now called inside the tih?kilhapaD]j`han$% function. It’s easy to miss! Here are the last touch- ups. There’s a reward in sight! First, delete the following data provider line (which has been moved to pda tih?kilhapaD]j`han$% function): ei]cao*`]p]Lnkre`an9jas@]p]Lnkre`an$ei]ca@]p]%7 598 CHAPTER 14 Finally, revise one reference in the button’s event handler (new code in bold): bqj_pekj_he_gD]j`han$arp6IkqoaArajp%6rke`w _qnnajpEi]ca''7 eb$_qnnajpEi]ca99tih@k_*ohe`a*hajcpd$%%w _qnnajpEi]ca9,7 y ei]cao*oaha_pa`Ej`at9_qnnajpEi]ca7 _d]jcaLe_pqna$_qnnajpEi]ca%7 y7 Since ei]ca@]p] is no more, that line depends on the number of 8ohe`a: elements, instead. Test the movie and watch the show again. If you think you missed a step, compare your work to the Ohe`aodksTIH*bh] work in this chapter’s ?kilhapa folder. Now that the movie has become XML- ified, you can have some fun editing the ohe`aodks*tih file and running the SWF to see the changes. For example, delete the first three 8ohe`a: elements and test the movie again. Like magic, only the three remaining slides and captions display. Change the wording of one of the captions, and then run the SWF again. Change the order of the order of the 8ohe`a: elements. With every edit, the SWF takes these changes effortlessly in stride. Building an MP3 player with XML When people get around to working with audio in Flash, one of the more common requests is, “Can I make my own MP3 player?” After reading Chapter 5, you already know the answer is yes. By the end of that chapter, you had the beginnings of an MP3 player that could load tracks from a ComboBox instance, as well as toggle playback with a Play/Pause button. In this exercise, we’re going to pick up with that project and continue to flesh it out. Thanks again to Benjamin Tayler, Bryan Dunlay, Philip Darling, and Robbie Butcher, of Tin Bangs (dppl6++sss*pej^]jco*_ki+) for the generous use of their music. There is going to be a lot going on here, so we suggest you set aside sufficient time to carefully follow along. You’re about to be introduced to several new and fundamental concepts that will require your attention. Among them are the following: Creating buttons that go the previous or the next audio track Creating a seek slider that allows you to move through an audio selection Creating a volume slider that allows the user to adjust the audio volume Displaying an audio track’s ID3 information The key to this exercise is understanding technique. Although there will be a lot going on, you will discover everything presented here builds upon what you have learned in the book. In the previous exercise, for example, the XML version of the slide show had a Next button. Here you’ll have that too, along with the addition of a Prev button. And, again, the external files will be loaded from XML. 599 BUILDING STUFF This exercise is designed to follow a fairly standard workflow, which is to assemble your assets first, and then “wire them up” using ActionScript. This time, instead of components, you’ll be creating some of your own controls. Setting up the external playlist The first order of business is to move the MP3 data to an XML file. Open the Pej>]jco*bh] file found in the Atan_eoa+IL/Lh]uan folder for this chapter. This file is functionally identical to the one in the ?kilhapa folder for Chapter 5. The only difference is that the code comments have been made more obvious, like this: ++++++++++++++++++++++++++++++++++++++++ ++K^rekqo_k`a_kiiajp ++++++++++++++++++++++++++++++++++++++++ Why? Because this project is going to have a lot of ActionScript, and these striking “mile markers” help organize things visually. Why so many slashes? ActionScript ignores them after the first two in the line, so the rest are part of the comment. The first task is to swap out the =nn]u instance, okjcHeop, for an external XML document, just as you did for the Beijing slide show. Doing this will reacquaint you with the existing ActionScript in place. 1. Click info frame 1 of the scripts layer, open the Actions panel, and then locate the okjcHeop variable declaration on line 13, which looks like this: r]nokjcHeop6=nn]u9jas=nn]u$ wh]^ah6Oaha_p]okjc(`]p]6y( wh]^ah6SdepaHeao$Peiagehhan%(`]p]6SdepaHeao$Peiagehhan%*il/y( wh]^ah6UkqjcHekjo(`]p]6UkqjcHekjo*il/y( wh]^ah6UkqnOgueoB]hhejc(`]p]6UkqnOguEoB]hhejc*il/y %7 Delete those lines of code and replace them with the following: r]nokjcHeop6TIH9jasTIH$%7 r]nhk]`an6QNHHk]`an9jasQNHHk]`an$%7 r]ntihNam6QNHNamqaop9jasQNHNamqaop$lh]uheop*tih%7 hk]`an*hk]`$tihNam%7 hk]`an*]``ArajpHeopajan$Arajp*?KILHAPA(_kilhapaD]j`han%7 bqj_pekj_kilhapaD]j`han$arp6Arajp%6rke`w okjcHeop9TIH$arp*p]ncap*`]p]%7 okjco?>*`]p]Lnkre`an9jas@]p]Lnkre`an$okjcHeop%7 y7 There’s nothing new here. The TIH instance is named okjcHeop in this case, to minimize the impact on the rest of the code, which already refers to the song data by that name. A QNHNamqaop instance already exists as nam, so the new one here is named tihNam. The requested file is now lh]uheop*tih, whose con- tents you’ll see in just a moment. The Arajp*?KILHAPA handler sets okjcHeop to the loaded XML docu- ment’s data, and then passes that to the ?ki^k>kt*`]p]Lnkre`an property of the okjco?> combo box. 600 CHAPTER 14 That last line inside the _kilhapaD]j`han$% function—the one that refers to the data pro- vider—originally appeared among the lines of code that configured the ComboBox instance, just before the line that reads ]``?deh`$okjco?>%7. You’ll still see it there (should be at or near line 35 at this point), so delete it. (You only need to set the combo box’s data provider once, and that needs to happen inside the _kilhapaD]j`han$% function, after the XML has loaded.) Just so you can see how similar the XML is to the original array, here’s the content of the lh]u) heop*tih file: 8lh]uheop: 8okjch]^ah9Oaha_p]okjc`]p]9+: 8okjch]^ah9SdepaHeao$Peiagehhan%`]p]9 ±SdepaHeao$Peiagehhan%*il/+: 8okjch]^ah9UkqjcHekjo`]p]9UkqjcHekjo*il/+: 8okjch]^ah9UkqnOgueoB]hhejc`]p]9UkqnOguEoB]hhejc*il/+: 8+lh]uheop: Note that, as with the array, the first entry specifies a h]^ah attribute but leaves the `]p] attri- bute blank. 2. Test the movie so far. It looks and works the same as it did at the end of Chapter 5, but now the MP3 file data is stored outside the FLA. It’s time to add the new stuff. But first, the authors would like to make a community service announce- ment. Polishing up the symbols We interrupt this program to introduce you to a fact of life that happens with collaborative Flash work. As mentioned in Chapter 5, the controller bar—with its VCR buttons and slider control—was created in Adobe Illustrator, and then imported into Flash. For the sake of demonstration, let’s assume the designer didn’t know how the controls would ultimately be used. If you don’t think this will hap- pen in your own Flash journeys, get ready to think again! In fact, count on it. As a matter of good habit, you’ll want to rename your library assets to better suit their actual use in this project. In addition, to improve the user’s interactive experience, you’ll also want to use the draw- ing tools to give these VCR buttons—which are actually movieclips—a bigger clickable surface area. This is especially important for the Pause button, because without the fix, the mouse could easily slip between the two vertical bars of the pause icon. Renaming library assets Renaming library assets is the sort of work that seems like housekeeping. And it is. but don’t under- estimate its value! When deadlines loom and a manager is breathing down your neck, it helps to know your library territory like the back of your hand. Take VolumeSlider, for example. In this MP3 player, that symbol is actually going to indicate how much of the audio has played. By dragging that slider, you’ll be able to seek to various parts of the song. So, let’s give it, and the other assets, better names. 601 BUILDING STUFF 1. Open the Library panel for the Pej>]jco*bh] file. Locate the library’s =q`ekLh]uan*]e=ooapo folder, and you’ll see a number of subfolders that ultimately contain the movieclips used for the controls in the Player layer of the Timeline panel. These include a handful of movieclips and subfolders whose names don’t presently suit the purposes of this MP3 player: B]opBkns]n`, H]uan3, RkhqiaOhe`an, Nasej`, and Rkhqia>]n. 2. Double-click the B]opBkns]n` folder, as shown in Figure 14-7, and rename it to Next. Do the same with the FastForward movieclip. This is, after all, a button that skips to the next song in the playlist, not a fast- forward button. Figure 14-7. Appropriately naming library assets helps when you resume work after a break. 3. Rename the VolumeSlider symbol to SeekKnob. Do the same with its containing folder, Layer 7. 4. Rename the Rewind symbol and its folder to Prev. 5. Complete your cleanup by renaming the VolumeBar symbol and its folder to SeekBar. Improving the controls The previous steps helped you as a designer/developer. Now it’s time to help the user. 1. Double-click the Play symbol to enter its timeline. Drag the playhead to frame 2, and you’ll see two vertical bars that represent “pause,” as shown in Figure 14-8. 602 CHAPTER 14 Figure 14-8. Be sure to keep your mouse- related assets mouse- friendly. Granted, this symbol has been zoomed in quite a bit in the figure, but even at actual size, it’s easy to see how the mouse can slip between the two bars, or accidentally miss the symbol altogether by slip- ping too far left or right. If this were a button symbol, the solution would be elementary: head to the Hit frame and give the button a nice, sizable hit area. With movieclips, which don’t have a Hit frame, you need to get creative. In this case, the solution happens in a layer named hit area. 2. Click frame 1 of the hit area layer, and you’ll see a pixelated rectangle appear behind the “play” arrow icon, as shown in Figure 14-9. Figure 14-9. A low- alpha shape provides additional “surface area” for the mouse. This rectangle is a simple shape, drawn with the Rectangle tool. The reason you can’t see it—until the shape is selected—is because the shape’s fill color is set to 0% Alpha. From a visual standpoint, it’s imperceptible, but when the user hovers a mouse over this symbol, even the invisible shape provides a larger clickable surface area. Notice that the rectangle spans frames 1 and 2, so that it appears behind both the play and pause icons. This makes the hit area useful, regardless where this symbol’s playhead appears. 603 BUILDING STUFF It is little things like this—giving a shape an opacity value of 0—that will sepa- rate you from the rest of the pack. This little trick takes maybe 2 to 3 minutes to accomplish. Someone who is unfamiliar with this will easily spend an hour trying to make the symbol “idiot- proof.” This is a classic case of letting the software do the work instead of you overthinking it. In fact, the next step shows you how to do it yourself. The other VCR controls, and the SeekKnob symbol, need the same treatment. You can draw these shapes if you like, or you can let Flash do the work for you. Let’s look at both ways. 3. Double-click the Prev symbol to enter its timeline. Rename the Layer 1 layer to arrows, then create a new layer named hit area beneath the first. In the hit area layer, use the Rectangle tool to draw a 20  20 pixel square with no stroke, and a fill color of #FFFFFF (white) set to 0% Alpha . Position the square so that it evenly fills the area behind the “prev” double arrows (we used an X position of -2 and a Y position of 2). 4. Right-click (Ctrl- click) frame 1 of the hit area layer and select Copy Frames from the context menu. Now double- click the Next symbol to enter its timeline. Rename Layer 1 to arrows, and then create a new layer beneath the first (no need to name it). Right- click (Ctrl- click) frame 1 of the new layer and select Paste Frames from the context menu. This accomplishes two things: it pastes the shape with the 0% Alpha and also renames the layer to hit area for you. Pretty slick! Reposition the shape so that it evenly fills the area behind the “next” double arrows (we used an X position of -4 and a Y position of 2). 5. Using whichever approach you prefer, position a similar shape beneath the hollow rectangle in the SeekKnob symbol. In our case, we renamed that symbol’s Layer 1 layer to knob, and then pasted the same shape into a new layer. We changed the dimensions of the shape to 12  10 and positioned it at an X position of -2.5 and a Y position of -1. Okay, so why two ways of doing the same thing? We are fond of telling anyone who will listen that there are usually 6,000 ways of doing anything in this busi- ness. What’s the right way? Who cares? The only time someone cares is when it doesn’t work. As it turns out, the Illustrator designer forgot two widgets: a volume slider, which lets the user adjust volume, and a loading indicator, which tells the user an MP3 file is still loading. As often as not, you might need to create such assets yourself, but to speed things along, we’ve provided what you need in separate file named _kjpnkho*bh]. By using a technique we introduced in Chapter 3, you can quickly share the widgets from that FLA with your current working FLA. 6. Select File ° Import ° Open External Library and browse to the _kjpnkho*bh] file in the Atan_eoa+IL/Lh]uan folder for this chapter. Click the Scene 1 link in Pej>]jco*bh] to get back to the main timeline. 7. With the Player layer selected, drag the LoadingDisplay symbol from the newly opened _kjpnkho* bh] library to the right side of the stage, as shown in Figure 14-10 (we used X: 462, Y: 305). Check the Pej>]jc*bh]’s own library, and you’ll see the movieclip there as well. Easy as that, you now have a loading indicator. 604 CHAPTER 14 Figure 14-10. It’s easy to drag in assets from another FLA’s library. 8. In the Pej>]jco*bh] library, double- click the LoadingDisplay movieclip to open it in the Symbol Editor . Scrub the timeline, and you’ll see that the symbol is nothing more than a series of dots that seem to spin. 9. To make room for the volume slider, select the SeekBar symbol in the player background layer (the long red rectangle) and use the Property inspector to change its width to 138. 10. With the Player layer selected, drag the VolumeSlider symbol from the _kjpnkho*bh] library to the spot you just opened up—to the right of the other controls and just beneath the loading indicator (we used X: 424, Y: 328). When you drag the VolumeSlider symbol, an interesting thing happens in the Pej>]jco*bh] library: not only does VolumeSlider appear, but VolumeBar and VolumeKnob come along for the ride, as shown in Figure 14-11. This is nothing to be alarmed about. These other symbols show up because they’re nested inside VolumeSlider, so they piggyback their way in. 11. Drag the volume icon graphic symbol from the _kjpnkho*bh] library to the stage, just to the left of the VolumeSlider symbol (we used X: 414, Y: 336). This is nothing more than an icon that helps indicate the purpose of the slider next to it. 12. Double-click VolumeSlider in the Pej>]jco*bh] library to open it in the Symbol Editor. 605 BUILDING STUFF Figure 14-11. Dragging in a nested asset carries with it the asset’s children. This symbol is a bit more complicated than the circle of dots from the previous shared asset, but you’ve already been introduced to all the concepts. As Figure 14-12 shows, you’ll find three layers: knob, mask, and bar. The knob layer contains a rectangular symbol, VolumeKnob, whose shape is com- posed of a 0% Alpha fill. This is effectively an invisible button, like the hit area shape in step 2, except that the “button” is a movieclip. The mask layer contains five slanted columns, and the bar layer simply contains a red rectangle (this is the VolumeBar symbol). If you like, temporarily lock the mask and bar layers, and you’ll see the masking in action. When this symbol is wired up, the user will be able to drag the invisible VolumeKnob symbol left and right. The VolumeBar symbol, partially hidden by the mask, will simply match the position of VolumeKnob, and the result will be an illusion: it will appear to the user that dragging left and right changes a red fill shared by the five slanted columns. Figure 14-12. A low- alpha shape inside the rectangular movieclip provides “surface area” for the mouse. [...]... buttons folder for But before you proceed, make sure to uncomment those three lines again! Handling the button events Remember that the Play/Pause button has already been programmed, which speeds things up a bit Because we have the new and functions, you will need to make a few changes to what’s there Fortunately, this shortens the existing ActionScript, which is all part of the secondary plot for this exercise:... Tag information is retrieved from the property of the instance—here, , , and — and concatenated into a string fed to the text field’s property ID3 tags have nothing to do with ActionScript 3.0 per se The concept is part of the MP3 file format, and it just happens to be supported by ActionScript On their own, ID3 tag names aren’t especially easy to read The tag intended for the artist’s name, for example,... but here, the parameter is already set to a value ( )—so what’s going on? New to ActionScript 3.0, this feature lets you provide default values for your parameters What’s it good for? Well, when referenced from the function, isn’t provided with a value; therefore, a default value of 0 is assumed This will cause the song to play from the beginning when is passed into the first line inside this function:... when started, will trigger their associated functions—coming later—every 100 milliseconds (that is, every tenth of a second) The second parameter for each—a in both cases—means the timers will repeat forever, or until told to stop 623 CHAPTER 14 Now it’s time for the beneath the existing code: and hookup Enter the following new ActionScript Much of this is code you saw a dozen times in Chapter 10 Most... the function (you’ll see how in the next block of code) The variable is set to a new instance, and because the variable is fed right into the expression , we bypass the need for the method With the new instance in place, it’s ready for three event listeners: one when the MP3 is loaded ( ), one when loading is complete ( ), and one when the MP3 file’s ID3 tags are encountered ( ) The event handler functions... has been renamed (it was formerly ) Speaking of , you need to update it so that it reflects the following new code, making sure to rename it as shown (revisions in bold): 612 BUILDING STUFF Here’s where the custom functions begin to earn their keep The behavior of the function is intact, but thanks to the and functions, the actual lines of code have been reduced Notice, as before, that on one side of... sliders You’re about to enter into the thickest part of the ActionScript for this project, so you may want to pull out your machete Actually, it’s not so bad, once you strike past the first bit of foliage The mosquitoes are pretty big, true, but that makes it all the easier to swat them with the blade Joking aside, the ActionScript for the sliders isn’t going to make your head explode To understand it... a custom function you’re about to write, called That function is triggered when the user clicks the mouse ( ) on the instance Type the following new ActionScript: If the instance isn’t —it’s , for example, before a song is chosen from the combo box— then pause the song, in case it’s playing Next, define a instance (stored in the variable), which will be used to constrain dragging to the desired location... following new ActionScript: 616 BUILDING STUFF Here’s that variable again (a third one!) This one is unrelated to the other two, except in name To the authors, just seems like an appropriate name for a variable for noting the position of something In this case, is declared within the scope of this function and set to an expression that effectively does the opposite of the expression shown earlier Let’s... background image, as shown in Figure 14-13 Now everything is tidy and much easier to locate Figure 14-13 With everything neatly organized, you’re well prepared for a smooth ride Wiring up the MP3 player controls Now it’s time to add the ActionScript Fortunately, you have a leg up, because the Play/Pause button is already programmed You did that in Chapter 5 In order to proceed, we’re going to tidy up the . loading formula. The only differences here are the variable names. The QNHHk]`an instance, for example, has been changed to tihHk]`an, because hk]`an is already in use as the instance name for. collaborative Flash work. As mentioned in Chapter 5, the controller bar—with its VCR buttons and slider control—was created in Adobe Illustrator, and then imported into Flash. For the sake of. you provide default values for your parameters. What’s it good for? Well, when referenced from the hk]`Okjc$% function, lh]uOkjc$% isn’t provided with a value; therefore, a default value of 0