The Audio Player

Component 

I've set up a sample use of the Audio Player component in the Audio Player Component folder, which resides in the Chapter 8 folder on the CD. The folder contains AudioPlayer.fla, AudioPlayer.swf, and another folder named songs. (There are two other files named AS_Controller_AudioPlayer.fla and AS_Controller_AudioPlayer.swf, which I'll cover later in the chapter.) When you want to use this component on your own, you simply open AudioPlayer.fla, shown in Figure 8.1, and save to your local disk so that you can use it with your project.

Figure 8.1: The open Audio-Player.fla file

If you also copy the songs folder to the same directory as the audio player, you can test the file and hear the audio files provided on the CD. Take note of the various features and functionalities of the player (shown in Figure 8.2). Beyond the basic commands such as stop, play, and pause, you can pan the audio to the left and right speakers, slide the track marker to jump to a point in the audio, scroll through a list of available songs, and double-click any song to play it. If you mess with the player long enough, you'll notice that your settings for the volume and pan stay the same each time you reopen the player. Indeed, the player saves your setting information each time you use it. There is also a display for the song title and length of time the song has been playing.

Figure 8.2: Test the movie to experiment with the various functions.

A special feature of this audio player lies in the four icons below the volume and pan controls. They allow you to add certain songs to a favorites list, load your favorites list, load the original song list, and clear your favorites. The favorites list allows a user to compile a list of preferred songs. This list is saved to the user's computer. Upon return to your site, the user can load this list of favorites again. Most importantly, the list gives the user a feel of personalization to your player, which is usually a surprise to those who are familiar with other media players.

Going back to the authoring environment, we see that there is only one folder in the library, named Audio Player Component. This folder contains all of the assets of the component. Directly in this folder are the component movie clip, the symbol you drag to the stage to use the component, and two folders: one for designers and one for developers. The folder for designers holds all of the graphics and is probably the only folder you will want to delve into; the folder for developers holds core resources such as code. Look at Figure 8.3 to become familiar with the structure of the folders.

Figure 8.3: The library of the AudioPlayer component holds assets for developers and designers.

Before we take a gander into the hordes of movie clips and buttons that are contained in these folders, delete the component currently on the stage and drag a new instance of the component onto the stage. Once you have it on the stage, open the Component Parameters panel by pressing Option/Alt+F7 and note the features of the component you can change immediately. Descriptions for each parameter are listed here:

Song Names An array that determines the names of each song. These are the names that show up in the playlist and in the title display when the song is playing.

Song URLs An array that holds the URLs to each media file that is to be played in the audio player.

Shuffle? A Boolean value that determines if the playlist should be shuffled randomly so that the songs do not play sequentially.

Num Visible Songs A parameter that specifies the number of song items that are visible at any one time before you have to scroll through the items. Indirectly, it sets the size of the playlist because its size is based on the number of items that are displayed at once.

Playlist Position An x- and y-coordinate that determines where the top-left corner of the playlist should be positioned.

FPS The frames per second setting you are using for your movie. To find this value, press Command/Ctrl+J in the authoring environment and look in the field named Frame Rate. This parameter is very important as it is used to calculate the number of seconds the song lasts.

The songs featured in the sample of the AudioPlayer component are provided courtesy of SoundRangers. SoundRangers provides sound effects and music optimized for Flash and interactive media. Their online laboratory hosts thousands of original, royalty-free sounds instantly downloadable in both WAV and AIF format. They can be found on the Web at www.soundrangers.com.

Unlike most components, none of these parameters directly affect the appearance of the component. The only parameter that comes close to affecting the component's exterior is the playlist's position, although it's quite a technical aspect of the process. Observe that the entries in the Song Names array and the Song URLs array correspond to each other, meaning the first name in the Song Names array is the title of the song at the URL in the first entry of the Song URLs array. The values in these two arrays are what create the playlist, so add as few or as many as you want.

Creating Audio Files

Customizing the parameters of this component has been a breeze. The next big job is creating the media files that will be linked up with the component. You might wonder why you do not merely import all the media you want to use for the player and use it from directly inside Flash, but it becomes painfully obvious when you look in the songs folder, where some sample songs have been prepared. Separately, each song averages 350 KB, and the collection all together is over 3.5 MB. If you were to import all the songs into Flash at once, your users would face a massive download and would wonder why they shouldn't just download a professional media player.

The process for creating the media files is very simple, but it's also very repetitive and tedious. The only type of media file the audio player can handle is SWF, which means we must import the songs into a Flash movie and publish its SWF. Start by opening a new Flash movie and save it as song0.fla. Press Command/Ctrl+R to open the Import dialog box and select the song you want to bring in; this must be either an MP3 or WAV file. Once the song is fully imported, it will appear in the library; however, click the first frame of the main stage and select the song from the frame's Properties panel to use it. When placing a sound on a frame, you have two options for synchronizing the sound with the Timeline: event and stream. The event setting starts to play the song when the Timeline reaches the frame with the sound, and the song plays independently from the stage in its entirety. This means that if an event sound starts, it will fully play even if the Timeline is stopped. The other type of sound is stream, and it synchronizes with the Timeline's frame rate. The sound plays if the playhead is on a frame the sound occupies and if the Timeline is playing; if the Timeline stops, then so does the streamed sound. This is the type of synchronization that we want for the audio file, as shown in Figure 8.4.

Figure 8.4: The first frame of the movie with a streamed sound

Considering all of this, we can see that the sound we added to the first frame must be a streamed sound. In addition to this, we must also create enough frames to accommodate the full sound. Unfortunately, there is no precise way of creating the frames the song needs, so you have to scroll to the end of the Timeline, right-click a frame, click Insert Frame, and repeat until you see the end of the song. Although you have to make sure you have enough frames for the song, you must also make sure you don't have too many frames (see Figure 8.5).

Figure 8.5: Make sure there are enough frames to accommodate the sound, but not too many frames.

Finally, click File to publish the movie, or press Shift+F12. You have now created your first media file to use with the component. The bad news is that you have umpteen more files to create going through this same progression.

After you have gone through the laborious task of creating all the media files, you must enter their file paths into the component parameters. Since we placed our songs in the songs folder, typical entries in the Song URLs array would look like songs/song0.swf, songs/song1.swf, songs/song2.swf, and so on, depending on the number of songs you are using.

Skinning the Audio Player Component

Now comes time for by far the lengthiest expedition for this component: reskinning the component. We will venture into each individual button and movie clip that makes up the entire component in order to understand how to add in other graphics. Take heed that we will only undertake the folder that holds assets for the designer; the developers' folder is quite a dangerous place and beyond the extent of this chapter.

Start by opening the folder AudioPlayer Assets - Designers Only and looking at how the graphics are divided into logical categories, as shown in Figure 8.6: control buttons, favorites buttons, graphics for the pan and volume sliders, graphics for the playlist, and graphics for the track slider.

Figure 8.6: Folder hierarchy for the player's graphics

The most important thing to remember when editing the graphics of a component is to not change the dimensions, tint, or alpha of any button or movie clip directly. That is, make sure to only edit the vector graphic of a symbol. If you click a graphic and the Properties panel tells you that it is an instance of a symbol in the library, then you should not do anything to the graphic. Edit only the graphics that say Shape in the Properties panel. Look carefully at Figures 8.7 and 8.8 to see how you can use the Properties panel to determine if you can edit a graphic or not. The best strategy for editing these symbols is to just double-click the symbol in the library; that way, you can ensure that you will edit the vector graphics inside it.

Figure 8.7: Do not transform a graphic directly if the Properties panel says it is a library symbol.

Figure 8.8: Edit only the vector graphics (the Shape objects) inside of a symbol.

In the first folder, Audio Control Buttons, you will find the buttons for controlling the audio that let you play, stop, pause, and go back and forth between tracks, as shown in Figure 8.9. If you want to change the placement of these buttons, then you must go back to the AudioPlayer movie clip and move the buttons to where you would like. Take extra care that you do not change the instance name of the button, which is done through the Properties panel. If you do not want the user to have access to a particular button, simply delete it or drag it off to the sides so that the user cannot see it. Note that you will not be able to replace any button you delete.

Figure 8.9: Control buttons for the audio

The next folder, Audio Favorites Buttons, contains graphics for the buttons related to favorites (see Figure 8.10). Although icons are used, you can also use text to be less ambiguous.

Figure 8.10: Buttons for managing a list of favorites

The folders Audio Pan Graphics and Audio Volume Graphics are very similar. Inside each is a movie clip for a background and a movie clip for a slider. The slider is the graphic that the user clicks and drags, and the background is the graphic that the slider glides over. Unlike the previous graphics, these graphics have some requirements and some strange inconsistencies.

To ensure that the sliders stay over the backgrounds, you must center the graphics in the sliders. Select your graphic entirely, press Command/Ctrl+K to open the Align panel, and click the Align Horizontal Center and Align Vertical Center buttons to guarantee the graphic is centered. These buttons are shown in Figure 8.11.

Figure 8.11: Use the Align panel to center your graphic.

For the background graphics, you must check many things. First, the far-left edge of the graphic must be placed at the origin (the center of the movie clip). In addition to this, you must also give the graphic an integer width.

Since Flash is a vector-based animation program, it can hypothetically handle curves and points to any degree of accuracy. However, certain functions in Flash, such as startDrag, will snap to the nearest integer, and if your background does not have an integer width, the slider will not snap to the background correctly.

Failing to comply with the integer-width condition sometimes results in being able to set the volume to -1% or being able to go up to 99% but no higher.

Finally, the background and the slider must be positioned at a "lattice point" on Flash's stage, which is a point with an integer x- and y-coordinate. These graphics are shown in Figure 8.12.

Figure 8.12: Sliders and backgrounds for the volume and pan controls

The next folder, Audio Playlist Graphics, holds all the graphics that make up the player's playlist. This includes a scroll up button, a scroll down button, and a generic item graphic that the user double-clicks to play the song. There are no strict requirements for the scroll buttons, except that they should be centered with respect to the button's center. Most importantly about these buttons, do not worry about their position in the component; the internal code of the component will reposition the scroll buttons so that they fit perfectly at the top and bottom of the playlist.

When editing the graphics of the playlist item, you must keep a few things fresh in your mind. The top-left corner of the item must always be at 0 along the x- and y-axes (the center of the movie clip). It is imperative to meet this condition because it is used exclusively when rendering the playlist. Feel free to change the font size, font, color, and dimensions of the text field. After you have made your graphic, be sure there are no stray graphics hanging out of the area that contains the item. Such wandering graphics will alter the appearance of the playlist in an unwanted way. The graphics for a playlist item and the scrolling buttons are shown in Figure 8.13.

Figure 8.13: Graphics of the playlist item and scroll buttons

The last folder, Audio Track Graphics, contains the most complicated set of graphics. These graphics allow the user to click and drag a slider to jump to any specified point in a song, but they do so much more than that. As the song plays, the slider moves along the background, graphically showing the progress of the song. As the slider moves from left to right, a bar graphic fills the space between the left-side point where the slider started and where the slider is currently, showing how much of the song has been played. An extra bar shows how much of the audio has been streamed. This bar fills up as the song is downloading, and once it reaches the far-right side of the background, the song is fully downloaded and begins to play.

These four graphic elements work in tandem to give a graphical representation of the song's progress, as shown in Figure 8.14. Similar to previous graphics, these graphics have certain requirements. The slider must be centered about its origin, and the slider's background must have an integer value for its width and x- and y-position on the stage. The bars for the audio progress and audio streaming must also have integer widths, but their positions must coincide exactly with the background; their depth orderings on layers is up to you.

Figure 8.14: Individual graphics that make up the graphical rendering of the audio's progress. All four parts provide the user with helpful information about the audio, such as streaming and playing progress.

Arranging Component Elements

If you have made it this far, then you have learned to skin the various graphical elements of the audio player. Before you're done with this player, however, you need to take note of a few other things. Since all of your graphics are inside each symbol in the library, you may want to rearrange the way the various buttons and movie clips are inside the component. When you move the parts of the component around, be very careful and take close measurements. You must be careful because you do not want to change the instance names of any buttons or movie clips on the stage or accidentally delete anything. You must take precise measurements because it may take a few tries to get the playlist in the exact position—you do this by entering numbers into the Component Parameters panel. Also, if you ever want to find the height of the playlist when it is rendered, simply multiply the height of the playlist item by the value of the number of visible items (you entered this in the Component Parameters panel). That value may become useful when arranging parts in the component.

To get the information needed for the Component Parameters panel, you can use a temporary filler graphic and the Info panel. Follow these steps:

1. Double-click the AudioPlayer component symbol in the library; do not right-click the symbol on the main stage and go to Edit In Place, as that will alter the coordinate system of the component.

2. Create a solid color rectangle with Flash's Rectangle tool, having the width of the playlist item you created and the height equal to the value calculated before (number of visible playlist items multiplied by their individual height).

3. Place this vector graphic in the exact position you would like inside the component.

4. Open the Info panel by pressing Command/Ctrl+I, as shown in Figure 8.15. If the rectangle is still selected, this panel will give information about the graphic, such as width, height, and position relative to either the graphic's center or the graphic's upper-left corner. It is the latter attribute that you are interested in. Note the position of the graphic's upper-left corner, because you will enter that information into the component's parameters.

   
   Figure 8.15: Use the Info panel to get the numeric values you will enter into the component's parameters.

5. Return to the Timeline where the component exists, open its Component Parameters panel, and enter the values for Playlist Position.

The player renders the player instantly when it appears on the stage, so you can even leave that filler graphic for reference because it will be covered up.

Organizing Component Assets

To make positioning the different parts of the audio player a little easier, I've placed the parts on different layers and grouped them into folders, as shown in Figure 8.16.

Figure 8.16: The folder hierarchy of the layers in the AudioPlayer component

It is beneficial to your development process to preserve this folder hierarchy. Taking someone else's work and adding your own graphics can become messy very fast. Having a sloppy Timeline and stage only hinders your progress. Within each folder, you can order the layers any way you want, and you can even order the folders in any way—just try not to mix folders, keep all the graphics for the volume slider in one folder, and keep all the graphics for the pan slider in another.