Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start creating our MP3 player let's take a look at what we have to work with. If you're following along and have access to the Exercise Files, find the Chapter 9 folder and then expand the Chapter 3 folder. Inside of the Chapter 3 folder you'll find a folder called start. There are three items inside of the Start folder, an FLA file and two folders. I want to first point your attention to the Songs folder. If you expand the Songs folder, you'll be able to see the songs we'll be working with in this chapter. break.mp3, chad.mp3 and dance.mp3.
I'm going to collapse the Songs folder, and I'm going to open up 03_Viewing_FLA.fla. Let's take a look at how this file is set up. This file has two layers, Actions and Art. Some art on the stage and lot of elements in the Library. If you select the object on the stage you'll find that it's one Instance of a Movie Clip called mcPlayer with an Instance name of player_mc. Let's double-click the player on the stage to enter its Timeline.
Inside of the mcPlayer's Timeline, take a look at the different objects on the stage and note their Instance Names. At the top left there is a dynamic text field with an Instance Name of artist_txt, another Text field with an Instance Name of song_txt. The Volume slider on the right has an Instance of volume_mc, the left and right arrows have Instance names of prev_btn and next_btn respectively.
If you select the Play button, you'll see that it's an instance of a movie clip called mcPlayPause with an instance name of play_mc. Let's double-click this movie clip to enter its Timeline. Inside of the mcPlayPause movie clip there're two layers, Play and Pause. The Play layer holds the Play button. If you hide the Play layer you'll see this Pause button. Pause button has an Instance Name of pause_btn and the Play button has an Instance Name of play_btn. Now I'm going to return to the mcPlayer Movie Clip and select the Progress bar on the stage. Notice that it's an Instance Name of mcProgress with an Instance Name of progress_mc. I'm going to double-click the Progress bar on the stage and enter its Timeline.
This movie clip has two layers, dot and BG. The dot layer contains an Instance of a Movie Clip called drag_mc, and this is the Movie Clip that will show the progress as our mp3s are playing. We'll also be able to drag this Movie Clip and navigate through our songs. Let's return to the mcPlayer Movie Clip, and let's take a look inside of our Volume Movie Clip. I'm going to double-click the Volume bar on the top right of the stage to enter its Timeline.
This Movie Clip has three layers, lines, BG lines and BG. I'm going to deselect everything in the stage by clicking in the Pasteboard. I'm going to zoom in really close so you can see the art on the stage, pressings Z on my keyboard to select the Zoom tool and dragging the Zoom area right around the area that I want to look, close to the registration point of this Movie Clip and if you scrub the playhead you can see lines, that are later going to correspond to the volume of our songs. So there's a quick look at some of the Instances and how is this file set up. Let's go to scene one.
To return to the main Timeline select the first keyframe of the Actions layer and open the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. Now this may seem overwhelming because there's a lot of code in here already, but we'll talk about it really fast. I'll explain what this code is and basically why it's prewritten for you. The first line of code specifies an Array called songs. This contains the path to each mp3 file that we'll be working with. We'll use the data inside of this Array to load the songs into the MP3 player.
And we have a variable called VolMC, that's the data type as a Movie Clip and we're just connecting it to play_mc.volume_mc. The reason why there's a variable here, volMC, we're setting equal to player_mc.volume_mc is so that we'd have a shorthand way to refer to this Movie Clip, this Movie Clip being player_mc.volume_mc. The rest of the variables in this file have the same function. The variable called playBtn is simply referring to player_mc.play_mc.play_btn, so instead of having to type the full path to the Play button we simply refer to our Play button variable.
So then we have our pauseBtn variable representing the Pause button, the nextBtn variable representing the Next button, the previous Btn variable representing the Previous button, artistTxt representing the Artist TextField, songTxt representing the Song TextField, progBar representing the Progress bar and progSlider representing the draggable Slider button for the Progress bar. Now that we've taken a look at our FLA file we can start creating our MP3 player.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.