This tutorial will show you how to make Play/Stop Music button. You may also learn to import a MP3 file to flash and reduce the sizes as minimum as it can.
Open New Document in whatever sizes you want. In this tutorial I will use 3 different backgrounds as a Flash MP3 player interface. You may also use a text and background at Flash only besides using any graphics from outside flash. It can reduce your file¡¯s size.
For this tutorial I import a background graphics. I hope that you already familiar with importing files into flash also convert it as a graphic.
Background 1
Background 2
Background 3
Create three more layers and rename it as shown below.
Now, on Play Music Layer, type using a text tool, PLAY MUSIC. Press F8 and convert it as a button.
Double click Play Music button, and you¡¯ll be inside a button. Right click on Over, insert keyframe and change the font color or even size. As you like. When mouse cursor rollover to the text, it will change like as shown below.
Right click on Hit, insert keyframe and draw a box to cover the whole text. This step is to make sure we maximize a button area. You can use any color for the box because it will not appear on your movie. See below.
Now we¡¯re done with the Play Music button. Go to main scene, click PlayMusic button and put some actionscript. Press F9, when actionscript box appear, select Global Functions>Timeline Control>goto and follow setting below. Just set Frame to 2.
Done with that, create one new layer and name it as an Actionscript and put it on top of every layer.
Click on 1st keyframe of Actionscript layer and press F9 to put an actionscript on that keyframe. Select Global Functions>Timeline Control>stop. Your timeline should look like below.
Now we move to next step. Click on Music Play layer. Right click on 2nd keyframe and insert keyframe. Import a Background 2 into it. Your timeline should look like this.
Create a new layer on top of Music Play layer and name it as a Stop Music. Right click on 2nd frame and insert a keyframe on the Stop Music layer. By using a text tool, type STOP MUSIC. See below.
And your timeline should look like this.
Did you remember about a PlayMusic button (Convert to Button, Over and Hit), if you do, do the same thing for Stop Music button. If you forget, read it again. J
When you¡¯re done that, go back to main scene. Click Stop Music Button and press F9.
Select Global Functions>Timeline Control>stopAllSounds and once again Global Functions>Timeline Control>goto and follow setting below.
So now you have to actionscript for StopMusic button. One is to stop all sounds and the another one is to go to frame 20.
Now is time to import your music¡¯s file into flash. Create a new layer on top of Stop Music and name it as Music.
Go to File>Import>Import to Library. Select your mp3 file from your hard disk drive. If you already imported your MP3 file into a flash, look at your library. Double click your MP3 file and follow a setting below.
Back to timeline, insert keyframe on 2nd frame of Music Layer. Go to Sound at properties at the bottom. See below.
Your timeline layer should look like this.
Now select frame 19 for Music layer, Stop Music layer and Music Play layer. Press F5 to put a frame to that layer. Your timeline should look like this.
If you¡¯re done with that, we move to another finishing steps. Select Music Off Layer, right click on frame 20, insert keyframe and import Background 3 to that layer and keyframe. Create a new layer on top of Music Off layer and name it as Play Again. Right click on frame 20 of Play Again layer, grab a text tool and type PLAY AGAIN. See image below.
Your timeline layer should look like this.
Select a Play Again text and convert it as a button. Do the same thing that we done to Play Music Button and Stop Music Button (Over and Hit).
Back to main scene, select a Play Again button, press F9 to open an actionscripts. Select Global Functions>Timeline Control>goto and follow this setting. Just set a Frame to 2. See below.
On Actionscript layer, right click to frame 19 and insert keyframe. Open an actionscript and select Select Global Functions>Timeline Control>stop.
Do it the same thing on frame 20 for Actionscript layer. Select Global Functions>Timeline Control>stop. Your final timeline should look like this.
Save and publish it. And now we¡¯re done.
At last but not least another latest artwork has been done. Wish that this tutorial will benefit you in a designing¡¯s world. Good Luck and Congratulation to anyone that done this tutorial. Please spend your time by surfing at www.vatos-x.com for more tutorials. We update recently and new tutorials will be added on every month.
discuss this topic to forum
