Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this easy Flash 8 tutorial, I will show you how easy it is to make an attractive and effective promo button. You will learn the following design techniques during the process of making this button:
Below is the actual example of the promo button that you are going to create in this tutorial.
Please note that if you are working in an older version of Flash (like MX or MX 2004), you can still follow this tutorial to see how you can make this kind of button (with all the nested animations, etc) - the only thing that you won't be able to use are the blending effects available in Flash 8 professional and the polystar tool.
1. Open a new Flash document. Before starting to draw the button's parts, you should increase the speed of your movie, to be able to make smooth and fast animations later. Select Modify > Document and in the Frame rate field enter 30. Click OK. You will notice the word fps to the right of this field, meaning frames per second or how many frames in your timeline will be shown during the time span of a single second. This is the speed of your movie.
2. Select the Polystar tool. Do this by clicking on the Rectangle tool icon and holding your mouse button until the option for selecting the Polystar tool appears.
3. In the Properties Inspector below the stage, chose the following options for the Polystar tool (the numbers in the list correspond to the numbers in the image below):
In the dialog box that appears, make the following changes:
4. Click on the stage and start dragging. Make a star that is about 84 pixels wide and high. Release your mouse and there it is - a nice star.
5. By using the Selection tool (V), select the shape you just made - both the outline and the fill.
6. Select Modify > Convert to Symbol (shortuct key: F8). In the dialog box that appears, select Button as type, call it promo button and click OK.
You have just made the main symbol - the goal of this tutorial - the promo button itself. From this point on, you will be working inside this button, where all of its contents (animations, special effects, text, etc) will be placed.
7. To enter inside the button symbol you just made, double-click on it on the stage, with the Selection tool (V). If you ever want to know which timeline you are working in at any given moment, just have a look on the upper edge of your document: it says that you are currently inside the promo button button symbol, which is itself situated on the main timeline (Scene 1).
8. You will find the star shape sitting nicely inside the button. Select it again (the fill and the outline) with the Selection tool (V).
9. Hit F8 to make a movie clip out of it. This is important: in the dialog box you must select Movie clip as type of symbol this time! The selection has stayed on the Button option from the previous time, when you made a button just two steps before. Since you will be making a nested animation, you need the movie clip. Call it polystar animation and click OK.
You have just made a movie clip called polystar animation that is nested inside the promo button button symbol. This is nothing special - in fact, movie clips within other movie clips or buttons are frequently used in Flash projects.
10. Double-click on the polystar animation movie clip that you just made to enter inside it. Again, Flash nicely tells you that you are inside it by updating the information about the current timeline.
11. Select the whole star shape once more and press F8 to convert it to a movie clip symbol again. The type property has stayed on the Movie clip option from the last time so you don't have to change anything here. Just call it polystar and click OK.
Ok, let me clear this up for you now: Why did you have to make a movie clip inside another movie clip, all based on the same shape? First and foremost, you can't make any animations directly on the timeline of a button symbol. As you have seen when you made the button symbol, the timeline of a button symbol is a special one. Whereas the main timeline (on the main scene) and the timeline of any movie clip symbol can have as many frames as you want, the timeline of a button contains only four frames.
These four frames correspond to four states that are associated with the user interacting with the button: the first one is shown while the user isn't doing anything with it, the second one one the user places her cursor over the button, the next one when the button is clicked and the last one serves to define the clickable area. For a more detailed description of each of these states, check out my tutorial on making a designer button in Flash (see step 16 on that page).
So you need a movie clip inside your button, because a movie clip can have any kind of animation placed on its timeline. And since you will be making a motion tween animation, you need an additional movie clip. Also, one more reason to have a movie clip nested inside another one, is because not all parts of this area of your button will be animated. As you can see in the example shown at the beginning of this tutorial, the star is rotating but the label and the shiny effect placed above it are staying still.
This will all be even much more easy to understand once you begin to make the animation, so let's do just that!
12. In the current layer (the only one so far), right-click on frame 60 and select Insert Keyframe from the menu that pops up.
Your movie clip's timeline should now look like this:
Don't click anywhere now, stay on this new keyframe and do the following:
13. Select the Free Transform Tool (Q). Make sure that the Snap to objects option is turned off. To check this out, just have a look at the magnet icon found at the bottom of the Tools panel - it should look like this: 
, with the grayish background. When it is turned on, it has a white background.
14. As you can see, as soon as you selected the Free Transform tool, the control handles appeared around the polystar movie clip. Do the following (you can see a visual guide to the following procedure in the image sequence shown below):
You mustn't make an exact 180° turn, because that would make a slight pause in your animation. In a continuous rotation animation like this one a pause can happen if there are being present two keyframes where the rotated object is in the same exact position.
Once Flash reaches the ending frame of your animation, it immediately goes back to the first one and goes on doing so forever. If the object in the last frame is in the same position and looks exactly the same as in the first frame, a slight pause in your animation will occur.
Although this movie has been set to a good speed at the beginning (30 fps) and the button will also feature a fast scrolling text message which will make any pauses or little jumps in the animation less evident, it is the best choice to make your animation as seamless as possible. You want to make a professional-looking button!
15. Right-click anywhere on the gray area between the two keyframes and select Create Motion Tween from the menu.
If you have followed every step exactly as I have laid them out up to this point, you should see an uninterrupted black arrow appear between the two keyframes, placed on a magenta background. This is the sign that you have made a proper motion tween animation.
16. Select Control > Test Movie (shortcut key: Ctrl+Enter) to see a preview of your animation. Your animation should look like this:
If there is a slight pause or jump in your animation, don't worry. Just go back to your document and play a little bit with the Free Transform tool - rotate the movie clip on the last frame of your animation (60) a little bit forward or backward, test your movie and see the change. Tweak it until you get it right.
This part being finished, you will now add the shining effect to the star shape, as well as some promotional text. All of this is shown on the next page of this lesson. But, save your document before proceeding! Remember: save early, save often!
