Test the movie so far. The ComboBox component created on line 30 of the code is added, and in Font

Maker QR Code in Font Test the movie so far. The ComboBox component created on line 30 of the code is added, and

you can choose a song. It s time to add the new stuff. But first, the authors would like to make a community service announcement.

We interrupt this program to introduce you to a fact of life that happens with collaborative Flash work. 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 happen 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 drawing tools to give these VCR buttons which are actually movie clips 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 is the sort of work that seems like housekeeping. And it is. But don t underestimate 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.

Assets folder, and you ll see a number of subfolders that ultimately contain the movie clips used for the controls in the Player layer of the Timeline panel. These include a handful of movie clips and subfolders whose names don t presently suit the purposes of this MP3 player: FastForward, Layer 7, VolumeSlider, Rewind, and VolumeBar.

the same with the FastForward movie clip. This is, after all, a button that skips to the next song in the playlist, not a fast-forward button.

3. Rename the VolumeSlider symbol to SeekKnob. Do the same with its containing folder,

4. Rename the Rewind symbol and its folder to Prev. 5. Complete your cleanup by renaming the VolumeBar symbol and its folder to SeekBar. 714

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-9.

Figure 14-9. 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 slipping 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 movie clips, which don t have a Hit frame, you need to get creative. In this case, the solution happens in a layer named hit area.

play arrow icon, as shown in Figure 14-10. 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.