Foundation Flash CS4 for Designers- P21 potx

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:... Locate the library’s =q`ekLh]uan*

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

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:

Two more paces!

At or near line 21, you’ll find the _d]jcaBqj_pekj$% declaration You’ll need to tweak two lines (changes

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`an9jas@]p]Lnkre`an$ei]ca@]p]%7

Finally, revise one reference in the button’s event handler (new code in bold):

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

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:

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:

That last line inside the _kilhapaD]j`han$% function—the one that refers to the data 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:

announce-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 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

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]uan3, 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

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

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

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

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

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

13. Select Edit ° Edit Document to return to the main timeline Use the Text tool to draw a dynamic text field in the Player layer, just to the left of the LoadingDisplay symbol Configure the text field with whatever settings you like, but make sure the text field is dynamic and bears a light color, such as white.

With these assets in place, you’re nearly ready to rock ’n’ roll Let’s just make sure all the mable assets have instance names, and then organize the timeline layers

14. Carefully select the VolumeBar and VolumeKnob symbols on the stage to verify that they’ve already been given instance names: rkhqia>]n and rkhqiaGjk^, respectively

15. Return to the main timeline and, moving left to right, select each button in turn and verify they have the following instance names: ^pjLnar, ^pjLh]u, and ^pjJatp

16. Continuing toward the right, select the SeekKnob symbol and give it the instance name seekKnob Give the SeekBar symbol the instance name seekBar For VolumeSlider, make it volumeSlider Moving up, give LoadingDisplay the instance name loadingDisplay Finally, moving left again, give the text field the instance name songData

17. Select the Player layer by clicking its name Now select Modify ° Timeline ° Distribute to Layers Just like that—boom, you get a bunch of new timeline layers, named after the instance names

of the symbols they contain

18. The Player layer is still there, but now empty—so delete it Rename the Bar layer to player background and the interface layer to 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 existing ActionScript, just as we did with the library and timeline assets We’ll use the obvious code comments to help plot out our travel route

Click into the scripts layer and review what’s currently in place This includes the revision you made earlier in this section, where okjcHeop became an TIH instance (it had previously been an =nn]u instance) Compare your work carefully Nothing has changed since you last touched this code, but see

if you can recognize what’s going on We’ll meet you on the other side

some-to the structure of your ActionScript as it does some-to your assets As we wire up the controls, you’ll find that numerous event handlers are going to load, pause, or play a song, so it makes good sense to write custom functions to perform those actions Then those functions can be reused by your various event handlers Doing this makes your ActionScript easier to read and, ultimately, there’s less of it to type The result is code that is easier to deal with We’ll now make the revisions to get rid of the overlap.

Add the following new variables to the code inside your R]ne]^hao block near the top (new code in bold):

Skip down to the ?ki^k>kt block Within the _d]jcaD]j`han$% function, change what you see so that

it looks like this (revision in bold):

>qppkjo block Copy one of those code block commented headings and paste it after the _d]jcaD]j)

`han$% function Change its caption to OkjcBqj_pekjo, like this:

This is an example of double- dipping, as far as code optimization is concerned You might even call it

“passing the buck.” Just as we passed along the loading code earlier, we’re passing along some of the

ActionScript here again, to two additional custom functions: l]qoaOkjc$% and lh]uOkjc$% It’s all in the name of keeping the ActionScript lean

Notice that the hk]`Okjc$% function accepts a string parameter, which will be referenced by the beha variable by code inside the function In the previous code, the value of this parameter was supplied by the expression okjco?>*oaha_pa`Epai*`]p], which retrieved the MP3’s file name from the ComboBox component’s current selection In later code—namely, the Prev and Next button event handlers—you’ll see this same value supplied in other ways

The nam variable, declared early on in the R]ne]^hao block, is finally set to a new instance of the QNHNamqaop class, which allows the MP3 file to be requested If a song is currently playing, it’s stopped

by virtue of the l]qoaOkjc$% function (you’ll see how in the next block of code)

The okjc variable is set to a new Okqj` instance, and because the nam variable is fed right into the expression jas Okqj`$%, we bypass the need for the Okqj`*hk]`$% method With the new Okqj` instance in place, it’s ready for three event listeners: one when the MP3 is loaded (Arajp*KLAJ), one when loading is complete (Arajp*?KILHAPA), and one when the MP3 file’s ID3 tags are encoun-tered (Arajp*E@/) The event handler functions are intuitively named, and you’ll see how they’re used shortly

Finally, the custom lh]uOkjc$% function rolls the music—which makes this a good idea to write those functions

Let’s continue adding code Press Enter (Return) a couple times, and then type the following new ActionScript:

Most of this should seem familiar, but there’s some new stuff, too The lh]uOkjc$% function accepts

a parameter, just like hk]`Okjc$% does, but here, the parameter is already set to a value (lko6Jqi^an9,)—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 hk]`Okjc$% function, lh]uOkjc$% 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 lko is passed into the first line inside this function: _d]jjah9okjc*lh]u$lko%7

As you’ll see later, the Pause/Play button does pass in a value, because it lets you stop the music and resume from where you left off In that case, the lko parameter will be supplied with a value, and the default 0 will be overruled