Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
Let's see now how to arrange these equalizer bars and create the music player movie clip.
32. Whichever equalizer movie clip you are now inside, click on the Scene 1 link above the layers to return to the main scene.
33. Double-click on the Zoom tool 
in the Tools panel to set the zoom factor to 100%.
34. With the Selection tool (V), click once on the equalizer bar 1 movie clip on the stage to select it. In the Properties panel, make sure that it's coordinates are set to round numbers (see step 3 of this tutorial for an explanation on how to do this).
35. Select Edit > Copy to make a copy of this movie clip.
36. Select Edit > Paste in Place to paste the copy you just made exactly in the same place as the original one.
37. Don't click anywhere now, so that the copy of the movie clip stays selected. Just press the right arrow key on your keyboard 7 times to move this movie clip exactly by 7 pixels to the right.
38. Repeat the previous operation twice: make two more copies of the same movie clip and move them 7 pixels to the right of the last one. In the end, you should have four movie clips on the stage, with seven pixels of space between them.
But, these are the instances of the same movie clip - equalizer bar 1. And you have four different equalizer bars in your Library. How to put them here? Easily.
39. Click once (not twice, because you'll enter inside it, which you don't want now) on the second movie clip from the left with the Selection tool (V).
In the Properties panel, click the Swap button.
In the window that will open, select equalizer bar 2 and click OK.
You have just easily replaced a movie clip on stage for another one!
40. Repeat this operation for the remaining two movie clips (the third and fourth ones from the left), swap them for equalizer bar 3 and equalizer bar 4 movie clips, respectively.
41. Select all four movie clips on the stage. Just use the Selection tool (V) - click and drag it to encompass all movie clips.
42. Hit F8 to convert them into a new movie clip. Pay attention: in the Convert to Symbol window, make sure to select Movie clip as type, because the selection may have stayed on Graphic symbol from before. Call the new symbol mp3 player and click OK.
43. With this newly made movie clip still selected, go to the left side of the Properties panel and give it an Instance name. Call it musicPlayer.
This Instance name will serve you later to tell your player what to do via ActionScript.
44. Double-click on the mp3 player movie clip on the stage to enter inside it.
45. Call the first layer equalizer.
46. Make a new layer, call it background and move it below the equalizer layer. Just click on it and drag it below.
47. Make 3 new layers above the equalizer layer and call them button, labels and actions, respectively. Lock them all.
48. Unlock the background layer. Draw a rectangle (choose any colors you like) here. Its bottom part should go a little below the equalizer, because here is where the button for play / stop control will be situated in another layer.
Lock this layer.
49. Unlock the button layer. Using the Rectangle tool (R) while holding Shift, draw a small square below the equalizer. Select a fill color that will be in good contrast with the background. Also, make sure that the rectangle is placed on round coordinates. If it is difficult to draw such a small square, enter its dimensions manually in the Properties panel.
50. Like you did with the equalizer bars before, select the small square, copy it (Ctrl+C) and paste it in place (Ctrl+Shift+V). Move it with the right arrow key to the right. Again, after pasting the copy don't click anywhere or your two squares will merge, and you'll have to copy and paste it in place all over again.
51. Zoom in to work more easily. Select the Selection tool (V). Make sure that the Snap to objects 
option is turned on.
Click on the right square's upper right corner and drag it down, until you reach the middle point of the square's right side and release your mouse. Next, click and drag the bottom right corner of the square and drag it to the point you made previously. It will snap into place, and voila! You've got a nice play button!
You can zoom out now to 100% because there isn't any more precise graphic work that is going to be done here.
52. Select both the square and the triangle.
53. Select Modify > Convert to Symbol (or press F8). Select Button as type of symbol and call it stop and play button. Click OK. Why are both the stop and play icons converted into a single button symbol? Try moving your mouse over the buttons in the Flash example below.
The clickable area of a button is defined by its Hit state (if you enter inside the button you'll see this). Since there is no Hit state defined for this button, Flash takes the Up state of the button as the Hit area. So, the two little icons (stop and play) are the clickable area. If you move your mouse between them, the hand cursor will disappear. This is fine, because the user will think these are two different buttons. And you'll program your player later so that this single button serves both for stopping and playing the mp3 music. Therefore, this is perfectly allright. Why make two buttons if one is enough?
54. Select this button you just made if it isn't selected already. Go to the Properties panel and assign it an Instance name: call it playStop.
Lock this layer.
55. Go to the labels layer (you don't have to unlock it). Right-click on its frame 5 and select Insert Keyframe.
56. Still on this newly created keyframe, go to the Properties panel and give it a label: call it playing. You'll see a small red flag appear in the keyframe, on the timeline.
This label serves to tell Flash where to move its playhead. Instead of telling things like gotoAndStop(5), it is much better practice to label your keyframes and then issue commands like gotoAndStop("playing"). If you ever move them, you move the label with them and you don't have to look up the frame numbers each time. It is easier to remember a word than a number, especially if there are lots of them.
57. Click on the first keyframe of this same labels layer and give it a frame label too: call it stopped.
58. Right-click on frame 5 of the button layer and select Insert frame. Do the same thing for the background layer.
59. Now click on the first (and only one so far) keyframe of the equalizer layer and release your mouse button. You have to do this (clicking and releasing), otherwise, you'd be selecting all the frames along once you began moving your mouse.
Now click again on this keyframe and drag until frame 5. Release your mouse. You have successfully moved the keyframe. The timeline on your equalizer layer should look like the one below.
The keyframe containing the equalizers has been moved because it must not be seen at the beginning, while there isn't any music playing yet.. You will see how to make it appear, once the music has been loaded and started playing, later in the ActionScript section of this tutorial.
60. Click on the first keyframe (and the only one) of the actions layer to select it. Select Windows > Actions (or press F9) to open the Actions panel.
61. Click in the area for entering code, and type in the following command:
stop();
This action ensures that the mp3 player movie clip won't go forward and start playing. Also, you'll see that a lowercase "a" has appeared in the timeline of the actions layer, indicating that some ActionScript has been placed here. You can close the Actions panel now.
62. Click on the Scene 1 link above the layers to go back to the main scene.
Ta-daa! You have just finished designing the mp3 player! All that remains is to have some actions assigned to it so that it can function.
63. Call the current layer on the main scene player and lock it. Create a new layer an call it actions. Lock it too. You can enter ActionScript inside it whether it is locked or not.
64. Select the first keyframe of the actions layer by clicking on it. Hit F9 to open the Actions panel. Enter the following code inside:
var musicPlays:Boolean = false;
var loopTune:Sound = new Sound();
loopTune.onLoad = function(success:Boolean) {
if (success) {
loopTune.start(0, 999);
musicPlays = true;
_root.musicPlayer.gotoAndStop("playing");
}
};
loopTune.loadSound("cooltune.mp3", false);
musicPlayer.playStop.onPress = function ():Void {
if (musicPlays) {
this._parent.gotoAndStop("stopped");
loopTune.stop();
musicPlays = false;
} else {
this._parent.gotoAndStop("playing");
loopTune.start(0, 999);
musicPlays = true;
}
};
The music player won't work just yet. You have to find an mp3 file that this player will load and play. Since this is a player that will play the mp3 tune only once it has been fully loaded (I will explain why later), you have to be careful when choosing an mp3 melody for it.
65. Find a mp3 looping melody. This file should be less then 100 KB in size, since it will be played only once it has loaded completely. If you're making this player for a broadband Flash site, where you expect your users to be the ones with a really fast Internet connection, you can even choose a file that is bigger, up to 300 KB.
If you don't have a good mp3 loop at hand, go check out my MP3 and WAV sites directory. You'll find many links to websites that offer mp3 loops for download for free.
Once you have your mp3 loop music ready, do the follwing:
66. Place the mp3 loop file in the same folder where you saved the .FLA document you're currently working on.
67. Whatever the name of your mp3 file may be, rename it to cooltune.mp3 because that's how you called it in the code that is placed inside your Flash document.
A little advice here: the best practice is to name your mp3 files in all lowercase letters (like cooltune.mp3 and not Cooltune.mp3). Because you might run into problems once you upload your files to a web server. It is easier to remember an all lowercase filename, and less likely to make an error when writing this name inside the ActionScript code.
Also, when you upload these files to your website, I recommend that you place all the three files in the same folder: the SWF Flash file that is going to be created from the document you're working on right now, the HTML file that is going to have the SWF embedded inside it and finally, the MP3 file that is going to be loaded and played.
Do not upload the FLA file. FLA file is for you only and it doesn't display on the web, in any browser whatsoever. Only the SWF file is intended for the web. If you need further information on this, check out my tutorial that explains the difference between FLA and SWF files.
You can place your mp3 in a different folder, but that requires some tweaking related to Flash security settings, which I'll maybe discuss in some other tutorial. There's still work to do here, I won't be going off the topic :)
NOTE If something doesn't work, check out with your hosting service if you're allowed to place mp3 files on your web server. If they're mp3 loops intended for Flash, and not commercial tunes, there shouldn't be any problems with that. Also, ask them if there are any scripts or security settings running on the server that might interfere with the mp3 files from being used.
68. Test your movie (Ctrl+Enter). You should here music playing! :) Try clicking on the buttons to stop and restart the music. Also, when you pressed Ctrl+Enter and tested your movie, a SWF file was created right in the same folder where you saved your FLA file.
Fine! I will explain you next how this player works and what options there are for placing the player in a Flash website and a HTML one.
So please proceed to the third page of this tutorial.
