Main Page Content
Flash4 Tutorial Build A Streaming Mp3 Player
Now just to clarify, you cannot import MP3 songs into Flash4 and play them. But what you can do is take advantage of the compression quality of the MP3 format and stream good sound really easily. I hope you enjoy.
:: play the demo player while you follow the tutorial::
Stage One :: Getting ready
A) If your system is low on memory and harddrive space you're going to want to free some up. The files you will be working with are HUGE, so be expecting a few crashes (ha, joking of course, my 133 with 32megs handles it fine).
B) You should also go by Macromedia and make sure you have the latest plug-in for your browser. Of course you should get these plug-ins with your copy of Flash4, but hey, it can't hurt, maybe there is a newer one.
C) You need to have a program that can record your song in WAV format. If you have a sound card you may have one of these programs already, but just in case, I use one called MusicMatch, you can get a demo copy from their site (it's a must have for all you MP3 fans).
D) Lastly, you MUST take a post-it note or anything you can stick to your monitor and write in big bold letters "SAVE WORK OFTEN". That's all I'm going to say about that. I'm trusting you to remember.
Stage Two :: Collecting the Sounds..
A) To record music for your player, all you have to do is stick your favorite CD into your CD-ROM drive and using your little audio app (mentioned in stage one) open one of the songs from the CD and save it locally as a WAV file.
Note: You'll want to write down the length of your song in seconds, you'll find out why later.
Hint: Use a short song to start with? if you have a slow processor (like me) the longer the song the longer you'll have to wait.
If this is difficult to do, you should be able to find specific instructions in the application Help file (also look in the menus for anything that looks like Record Settings or Options..).
Stage Three :: Making the Song a Movie
(The following assumes that you are at least a little familiar with Flash3 and understand the application's interface and terminology. If not, check out the Help menu in your Flash4 program for clarification).
A) Open a new movie. Make it the size that you want your MP3 player to be.
B) Import your WAV file. You can import items using the menu FILE > IMPORT. Be prepared to wait, even if your song was only a couple of minutes long, it's probably sitting at about 30 megs. So give your machine plenty of time to deal with the file before you start to panic.
C) Make a new layer and name it Song. Select the first frame and access the properties by selecting menu Modify > Frame. Click on the Sound tab and from the drop down menu select the song you just imported. On the right of the tab make sure the drop down menu called Sync has Stream selected. Click Ok
D) Now you need to modify our movie timeline so the song can play its full length. Notice when you add a new frame (INSERT > FRAME) to the timeline, there is a little indicator on the bottom of the timeline panel that shows you how many seconds into the movie that frame is. Use that indicator as a guide and keep adding frames until you're at the end of your song.
E) Add a new layer and call it Actions. Go to the last frame, insert a keyframe and access the properties. On the Action tab, add the action Go to and Play (1) - you can do this by selecting "+" > Go to and then making sure the Play check box is checked on the right side of the tab.
F) Save this Movie and export it using menu File > Export Movie. Use the name song.swf. When the export setting properties box pops up, make sure the streaming sound compression is set to MP3. If it's not, click the Set box and select MP3 from the Compression drop down menu.
Part 4 :: The Player Movie.
You're on your own for creative flair in this part. All I'm going to tell you is what buttons you need and what you need them to do. If you want to get fancy with animation, a nice "skip intro" or something, go for it.
A) Open a new movie the same size as your last one. Create the following symbols for your player (menu Insert > Symbol):
one Play button
one Stop button
B) Drop Instances of your buttons into the movie. (You can just drag and drop them from the Library window found under Window > Library)
C) Select the play button and access its properties (Modify > Instance) and under the Actions tab, add the action Load/Unload Movie. Make sure on the right side of the tab Load Movie Into Location is selected and under Location you have Level 1 also selected. In the URL section type the name of your song movie - song.swf .
D) Select the stop button, access its properties and also add the Load/Unload Movie action. This time just make sure you select Unload Movie from Location and the Location is still set at Level 1.
E) You can now export this movie. Save it as player.swf, nothing needs to be done to the settings, unless you have added some of your own spice to the player, then adjust the settings accordingly.
Part 5 :: The Launcher Movie
A) Open a new movie the same size as the previous two.
B) Make a new layer and name the layer Actions. Access the properties of the first frame and under the Actions tab add the action Load/Unload Movie. Make sure on the right side of the tab Load Movie Into Location is selected and under Location you have Level 2. In the URL section type the name of your player movie - player.swf .
C) You can now export this movie as launcher.swf - this will be the flash movie you place into your html file in order to use your player. Nothing special needs to be set in the export settings.
Part 6 :: How it Works
A) All you have to do now is place your launcher.swf movie in an HTML page, open that page in your browser or link to it from another page.
When the page begins to render this is what happens: First launcher.swf will load, that will immediately load player.swf in level 2, when you hit the play button, song.swf will begin to load (and stream) in level 1, which is below the player and above the launcher in level 0. When you hit the stop button, it unloads song.swf from level 1 and the music stops.
You can add your launcher flash movie to html files with Aftershock, which you might have left-over from Flash3. If not check out the section of the Flash4 help topics called Publishing and Exporting. It has all the information you need. As well some applications such as Dreamweaver make it really easy to add movies to your pages.
Remember, only people with the latest upgrade of the flash plug-in are going to be able to use your player, so you might want to think about JavaScript plug-in detection. Enjoy.
If you have any questions, send them to Ryan.
