Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
I have received many requests to explain how to create an mp3 player in Flash, so here it is! You will learn to create the following (please note that this is a Flash 8 tutorial):
You can see the player in action to the left of this paragraph! Click on the stop and play buttons to see how easily a user can switch the music on or off. The is just a proposed design. Once you learn how to create this kind of a player, skinning it and making it blend in with the rest of your site design is an easy task.
1. Open a new Flash document. Press Ctrl+J (or select Modify > Document). Set the Frame rate for your movie to 30 frames per second (fps). Click OK.
2. Select the Rectangle tool (R). Block out the stroke color, because you need to make a borderless rectangle. You can block the stroke color by going to the Color part of the Tools panel, clicking on the small pencil icon 
and then clicking the block color button 
. As for the fill color, choose some darker hue that is in good contrast with the white backgorund of your movie.
3. Draw a small narrow rectangle (see 1 in the image below). Select it with the Selection tool (V) - see 2.
In the left side of the Properties panel, enter the dimensions for the rectangle manually: 4 pixels in the width (W) field and 22 pixels in the height (H) field (see 3 in the image above). Make sure that the little padlock icon is unlocked so that you can adjust each dimension independently of the other one.
Unselect the rectangle by clicking anywhere on the stage (4).
Also, see to it that the rectangle's position on the stage is set to round numbers. The values in the X and Y fields (next to W and H) must finish with zero. You must do this if you want your rectangle to be displayed clearly and sharply on the screen.
4. Go to the Color mixer panel (Window > Color Mixer). Click on the little paint bucket icon to select the oprions for the fill color. In the Type menu (still in the same panel), select Linear as type of gradient.
5. Add three more color squares in the linear gradient stripe on the bottom of the panel. You can do this easily by just clicking with your mouse between the existing ones.
6. Now, click on each of the small squares and enter the hex color value in the appropriate field, in the order indicated on the image below:
Also, move the three middle squares so that they are ordered as the image shows. Just click and drag them left or right, as needed.
7. Zoom in on the small rectangle on the stage with the aid of the Zoom tool (Z), to work more easily.
8. Select the Paint bucket tool (K). Click on top of the rectangle and while holding Shift drag your mouse down. This will create a perfectly vertical linear gradient fill.
9. Select the rectangle with the Selection tool (V). Press F8 (or select Modify > Convert to Symbol). In the Convert to Symbol window that appears, select Movie clip as type, call it equalizer bar 1 and click OK.
10. Double-click on the newly created movie clip on the stage to enter inside it. You can know if you are inside a symbol or not by looking at the information displayed above the stage.
11. Call the first layer inside this movie clip colored rectangle.
12. Right-click on frame 40 and select Insert frame from the menu that appears.
13. Lock this layer and create a new one, then call it mask. Click on its first frame to select it for working.
14. Select the Rectangle tool (R) again. Turn off the Snap to objects option 
in the Tools panel to work more easily. Choose any flat fill color you like and leave the stroke color blocked. Draw a rectangle that is slightly larger than the colored one below it.
15. Right-click on frame 40 of this layer and select Insert Keyframe (not frame!).
16. Click anywhere (standard left click) between the two keyframes on the mask layer.
Go to the Properties panel and select Shape from the Tween menu.
You have just created a shape tween animation, although there isn't any movement present yet. This particular kind of animation is represented by a continuous arrow between the two keyframes, on a pale green background.
17. Right-click on frame 10 and insert a keyframe.
18. Select the Free Transform Tool (Q). Click on the rectangle, you'll see the handles for transforming appear. Click on the top middle handle and drag it down almost to the bottom.
19. Insert another keyframe at frame 18. Stretch the rectangle, but not all the way to the top. If you shrinked it down completely in the span of ten frames, you mustn't stretch it completely now, because the movement wouldn't look so realistic.
20. Do the following: insert five more keyframes and resize the rectangle accordingly. I did it like this:
There is still a small adjustement to make if you want your animation to play out smoothly. If you click on the first and last keyframes of the mask layer, you'll notice that they are the same. This is normal, because when you insert a keyframe, Flash copies all the contents from the previous one - they're identical.
So, when the animation plays, even if it is a fast one (as is the case with this movie, for which you set the speed at 30 fps at the beginning of this tutorial), there will be a small "pause". Why is that? Because in Flash an animation loops endlessly unless you tell it to stop via ActionScript.
So when this shape animation comes to the last keyframe, it goes back to the first one and continues looping. Since the last and the first keyframes are the same, and they follow one after another, you have a portion of the animation repeating. And in that moment, it seems as if the animation has stopped for a fraction of a second. To avoid this, do the following:
21. You won't change the shape of the rectangle, there's an easier way to smooth out your animation. Right-click on frame 39 (the one just prior to the last one) and select Insert Keyframe.
Then click on the newly created keyframe and drag it over the keyframe 40.
You have just replaced the last keyframe with the one preceding and therefore made your animation more smooth. Remember this technique, it can also be applied to motion tween animations.
22. Finally, lock the mask layer. Right-click on this layer's name and select mask from the menu. The colored rectangle layer beneath it has just become masked by it.
23. Test your movie (Ctrl+Enter). You'll see the equalizer bar jumping up and down happily :) You may have wondered why did you have to animate a mask instead of the colored bar directly?
Well, the mask is animated because in this way the equalizer bar behaves as it does in music programs and on hi-fi sets. As you probably noticed, the red color is always at the top, indicating the full power for a certain sound frequency. If you didn't animate the mask, but the colored bar directly, the gradient would stretch also. And this is bad, because, as I said, in real life this isn't so. If the bar is, say, at 25% of its size, you never get to see the red color, but only the green tones. Look at the parallel examples below to see what I mean. Or turn on WinAmp if you have it installed on your computer, play a song and look at the equalizer bars and the way they behave.
24. Before you move on to duplicating this bar, you will make a small change to it so that you can easily change the way it looks later, if you ever decide to change its appearance so that it fits into your overall website design better.
Close the movie preview window and return to your Flash document. Hide the mask layer and unlock the colored rectangle layer. You have to hide the mask, otherwise you wouldn't be able to see the masked layer below it.
25. Select the colored bar with the Selection tool (V).
26. Select Modify > Convert to Symbol. This time, select Graphic as type of symbol, call it color gradient bar and click OK. This won't affect your animation. This will save you a lot of work if you want to change your equalizer's visual appearance later. All you have to do is enter inside the graphic symbol you just made, by double-clicking on it inside the Library, place in some other colors, design, and you're done!
REMEMBER Always strive to make your Flash projects more modular and flexible. You never know when you (or more importantly, your client) will need to make some changes to your document. And by having easy access to various parts of your movie which are independent from one another, you can save a lot of time. Also, be sure to save your document under different names, like myproject001.fla, myproject002.fla, as you progress in the building of your Flash website, banner or anything you are working on. You never know when you might need to revert to a previous stage of your document. So, save this movie you're working on now!
27. Open the Library (Window > Library). You'll find your equalizer bar 1 movie clip and the color gradient bargraphic symbol inside.
Right-click on the equalizer bar 1 movie clip and select Duplicate. Call the new symbol equalizer bar 2 and click OK.
28. Double-click on the newly created equalizer bar 2 movie clip in the Library to enter inside it.
29. Unlock the mask layer. Select frames 2 through 41, right-click on them and select Remove Frames. Right-click on frame 68 and select Insert Keyframe. A shape tween should appear. Then insert ten more keyframes between the two existing ones and make different changes to the mask rectangle, as shown in the image below.
30. When finished, go back to the Library and duplicate the equalizer bar 1 movie clip two more times. Call the new symbols equalizer bar 3 and equalizer bar 4, respectively.
31. Double-click on the newly made movie clips in the Library and make changes to their timelines and animations too. Here's what I made - this is a suggestion only, you can modify your animations as you deem appropriate.
Why all these changes? Well, here is the reason: for example, when the first movie clip (equalizer bar 1) reaches its last frame of animation (40), the second one (equalizer bar 2) still has about 24 frames until it's own animation end. Then the looping begins. The animation of the second movie clip goes back to frame 1, and the first movie clip is already on frame 24 of its own animation.
What this results in is that you have four movie clips with different durations of their animations. The bottom line is that you will always have a random animation for your equalizer going on. This is great, because it looks completely realistic. Sure, at some point, all these animations will find themselves at the same positions they all started with, but it will take a long time until this happens and also, the user won't notice this.
These simple changes make for a great visual effect! As you can see, with little changes to your document you can achieve nice things for your website. In my opinion, in Flash there is almost nothing that's impossible to make.
You will now proceed to put all these equalizer bars together and make your music player movie clip. So, onwards to the next page!
