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:
- How to make a nested animation – one that continually moves inside the button symbol itself,
- How to use the blending filters in Flash 8 professional to give your button more depth and a more realistic look,
- How to implement a mask to create scrolling text visible only in certain areas of the button and more.
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.
Creating the star shape and the button symbol
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):
- Enter #820000 for the stroke color (click on the little colored square next to the pencil icon and enter the aforementioned hex code in the little box on top of the color palette that appears).
- Enter #CC0000 for the fill color. Note that you can choose any colors you like - the important thing is that the outline (stroke) color should be similar to the fill color, but more dark.
- Select Solid as the type of outline, with the line thickness set to 2.
- Turn on the Stroke hinting option to get rid of any blurry edges while drawing.
- Click the Options button to define what kind of polystar you are going to make.
In the dialog box that appears, make the following changes:
- Select star in the Style menu.
- The number of sides should be 18.
- Enter 1.00 as the value for the Star point size and click OK.
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).
Animating the star shape
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):
- Bring the cursor close to the object's upper right corner. Your cursor will turn into a rounded arrow, meaning the movie clip is ready to be rotated.
- Click and start dragging your mouse, rotating the movie clip clockwise.
- Continue rotating clockwise, until you have almost made a 180-degree turn.
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. But, save your document before proceeding! Remember: save early, save often!
Having successfully completed the star shape animation, it is time to add the remaining elements to this part of your promo button: the shine and the label, all inside the polystar animation movie clip.
Creating the shining effect
17 Lock the current layer and call it rotation.
18 Make a new layer and call it shine. Click on its first (and only) keyframe to select it for working.
19 Since you are going to place the shining effect over the star shape, zoom in on it to be able to work more easily. Select the Oval tool (O).
20 Go to the Color Mixer panel (Window > Color Mixer) and choose the following options:
Click on the little square to the right of the pencil icon (see 1 in the image below) and when the color palette appears, click on the little square with the red diagonal line crossing it 
. This will effectively block the stroke (outline) color, which is fine, because the shine wouldn't look too realistic if it had some kind of outline surrounding it.
Next, click on the paint bucket icon (not the little square adjacent to it) to be able to select all the options for the fill color (see 2).
In the Type drop-down menu select the Radial option (3). This will enable you to make a nice radial shine, similar to those seen on spherical objects when light hits them.
Click on the small square situated on the left side of the gradient strip (4). Select pure white (#FFFFFF) as its color and turn down its alpha factor to 62%. This will make the color more transparent, by letting the graphics in the layer below it come through - again adding to the realism. Click again on the little square and drag it a little bit towards the center of the gradient strip.
Finally, click on the second little square (5) and again select white as the color, but this time turning the alpha down to 0%.
21 Click and draw an egg-shaped ellipse, similar to the one shown below.
22 Select the Free Transform tool (Q). Click on the ellipse to select it and start rotating it, so that it is approximately aligned with the upper left border of the star shape. You don't have to pay attention to arrive to a certain degree of inclination like you did for the star shape rotation, because there is no animation work going to be created here.
23 By using the Selection tool (V), move the shape (click and drag) over the upper left part of the star shape.
24 You will now make some adjustements to the gradient that is filling the oval shape, to make it look more natural and realistic. With the shape still selected, choose the Gradient Transform tool (F). Handles and controls for manipulating the gradient will appear immediately.
25 Click and drag the little square handle with the arrow inside it. Drag it inwards so that the radial fill becomes elliptic-like.
Play around with it a little bit to see what results you will get. Also, testing your movie (Ctrl+Enter) might help, to better see the live effect at normal zoom size. This will spare you from having to zoom out and deselect the shape each time that you want to see how does it look like after a modification. You can use the Selection tool (V) too, to distort and manipulate the shape.
Once you are satisifed with the look of the effect move on to the next section in which you are going to put some text on this part of your promo button.
Adding a label to the rotating part of the promo button
26 Lock the shine layer, create a new layer above it and call it label.
27 Select the Text tool (T). In the Properties inspector, set the following options (see corresponding numbers in the image):
- Select Static text. Since the text that you are going to insert now is going to be a button label only, there is no need for any other kind of text field type.
- Select a good-looking sans-serif font. This is the kind of font you are reading right now, meaning it has no embellishments, unlike a serif font. See the difference? On a shiny sharp-edged, clean promo button like this one a serif font wouldn't look too good. Also, choose any sans-serif font you like, because fonts used in a static text field are going to be embedded inside your SWF movie. This means that every visitor to the site that this Flash movie will be displayed on will see this font as you are seeing it right now, regardless if she has it installed on her system or not.
- Select a bigger font size - the message has to be clearly visible!
- Select white for the text color - it will look good on the reddish background.
- Select central alignment for your label. In my opinion, this looks better then left or right-aligned text.
- If you are using Flash 8, select Anti-alias for readability. This will make the label much more sharp.
- Make sure that the Selectable option stays turned off, otherwise a user would be able to select the label text. Imagine how would it look like when someone tried to click the button and instead of the hand cursor, she sees the text selecting cursor. This is something that looks really ugly! So leave this option turned off. Furthermore, the button wouldn't be clickable, which is even worse.
28 Click somewhere above the star-shaped movie clip and type in the button's label: best price, for example. Or anything else that you might find appropriate. If there are two words in your text label, press Enter after the first one so that they both fit nicely above the animated shape.
Once you are done, hit Esc to exit text editing mode. You can now position your text field by using the arrow keys on your keyboard. By pressing an arrow key, you are moving the text field by 1 pixel at a time, which enables you to position the label with great precision.
A great feature of Flash 8 professional are the blending filters. Let me show you how to enhance the look of the button's label by applying one of them to it. Yes, text fields in Flash 8 professional can have blending filters applied to them, which is way cool!
29 With the newly made text field still selected, click on the Filters tab in the Properties inspector.
30 Click on the blue plus icon (
) to open the menu with available blending filters. Add the Glow filter. Set the parameters for this filter as follows:
- Blur X and Y to 11,
- Strength to 130%,
- Quality to Medium and
- Color to white.
Now the text label looks fine, doesn't it? You can compare how it looked before you applied the filter and after that. I think that this light glow fits well with the shine effect.
31 Lock the label layer. Click on the promo button link above the layers to return to the button's timeline.
Before starting to create the rest of the promo button with the scrolling text, you will add just one more filter.
32 Click once on the polystar animation movie clip to select it - don't double-click it, because you would access its timeline, which you don't need to do, because all the work inside it is completed. How to know that you have selected it? Flash tells you so - it is written in the Properties inspector. It clearly says Instance of: polystar animation.
33 Click on the Filters tab in the same panel to apply a filter to the whole movie clip. Click on the small blue plus icon and select the Drop Shadow filter. Set the options for this filter as follows:
- Blur X and Y to 3,
- Strength to 100%,
- Quality to Medium,
- Angle to 45°,
- Distance to 3 and
- Color as black with the Alpha set to 67%.
34 Lock the current layer and call it rotation.
That's one nice part of your promo button finished! Move on to see how to create the bigger part of this button with the scrolling message inside it.
The last part of promo button building will involve the creation of a rounded rectangle with a 3D-like frame and the scrolling text message that will play inside it.
Designing the background and the 3-D frame for the promo scrolling text
35 Create a new layer and call it scroller.
36 Select the Rectangle tool (R). Select a dark blue color for the outline (stroke) that will look well with the part of the button you already created - I chose #3A3E5F. As for the fill color, choose a shade of blue that is more bright than the outline, but not too bright. To add more depth to your button, you can use a top-to-bottom linear gradient: I chose #013A8F for the top color and #6699FF for the bottom color. By now you now how to set up a color gradient - the only thing that you have to change is the option Linear from the Type menu in the Color Mixer panel, instead of the radial one.
In the Properties inspector, select the Solid option for the outline with a thickness of 8.
37 Click and start dragging - make a rectangle that is about 212 by 60 pixels, but don't release your mouse button yet. You must make rounded corners for this one. So, while still holding the mouse button, press the down arrow key on your keyboard and hold it until the corners of the rectangle are at the maximum round value - almost becoming segments of a circle.
38 Once you have made the rectangle, switch to the Selection tool (V), select the whole rectangle (both the outline and the fill) and move it over the star shape. Its vertical center should be aligned with the star shape's center, while horizontally it should be positioned to the left og the red shape, like this:
39 To achieve a more realistic 3-D look for the button, you must separate the outline from the fill. As a first step towards this, drag the scroller layer under the rotation layer. Just click on it and move your mouse downwards. Once you see a thick grayish line appear, the layer is ready to snap into place.
40 Select the whole rounded rectangle (fill and outline) and press F8 to convert it to a symbol. Select Movie clip as type, call it scroller and click OK.
41 Double-click on the newly made scroller movie clip with the Selection tool (V) to enter inside it.
42 Double-click on the rounded rectangle's outline to select the whole of it. Select Edit > Cut (shortcut key: Ctrl+X). The outline has now just been cut from the fill and is ready to be pasted into a new layer. To preserve the outline in your computer's clipboard (that's where stuff that has been cut or copied goes before being pasted somewhere), do not copy anything, in Flash or any other program. Wait until you finish pasting the outline in a new layer.
43 Lock the current layer (currently the only one inside the scroller movie clip) and call it background.
44 Make a new layer and call it 3D frame.
45 Select Edit > Paste in Place (shortcut key: Ctrl+Shift+V) to paste the outline of the rectangle here, on the exact same position it was occupying before you have cut it.
46 After pasting the rectangle's outline in place, it should still be selected. So press F8 to make a Movie clip symbol out of it. Call it 3D frame.
47 Go to the Properties inspector and click the Filters tab. You will now use a blending filter to give the outline a 3-D look. Select the Bevel filter. Set the options like this:
- Put the Blur X and Y values to 8,
- Ramp up the Strength to 210%,
- Set the Quality to Medium,
- Choose #000066 for the Shadow color and #595BBB for the Highlight color,
- The Angle should be set to 45 degrees,
- Distance to 8,
- and the selected Type should be Inner.
Leave the Knockout option unchecked.
You have just added a nice 3-D look to the scroller's frame. Flash rules!
Creating the animated text message
48 Lock the 3D frame layer. Make a new layer between the two existing ones and call it scrolling text.
49 Select the Text tool (T). This time you will use the Static text field type too. Leave most of the options as they were when you placed the label on the star shape. The only things that you should change are: turn on the Italic option - this will make the text look more swift and it will accentuate the direction of its movement once it gets moving; select the Anti-alias for animation option since you are going to animate this text.
50 Click a little bit below the upper part of 3-D frame and type your message: special offer or anything you want your button to display. Write this phrase once, then hit the space bar key a few times to make some space and type this phrase again. Repeat this one more time. You need to have it typed three times, because you are going to make the text move in an infinite loop, which must look seamless.
51 Hit Esc to exit the text editing mode. Press F8 to convert this static text field into a Movie clip symbol. Call it animated text and click OK.
52 Move the movie clip with the aid of the left and right arrow keys to position it so that the phrase in the middle is placed near the left part of the 3-D frame. Hold Shift while pressing the arrow keys to move the movie clip by 10 pixels at a time.
53 Right-click on the background layer's frame 30 and select Insert frame from the menu.
That's right, the background layer, not the one with the text inside. You need to do this because the background fill and the 3D frame should be visible all the time while the text is scrolling. You can't leave them just like this. So repeat the above for the top layer:
54 Right-click on frame 30 of 3D frame layer and Insert a frame. Your timeline should now look like this:
Remember that you are inserting plain frames here and not keyframes, because the two layers will not be animated - they won't have any changes applied to them. By inserting a simple frame, you are just prolonging the duration of these layers, which is exactly what you need.
55 Right-click on frame 30 of the scrolling text layer and select Insert Keyframe. A keyframe is needed here because you are going to make a motion tween animation with the text.
56 Click on the animated text movie clip here (you should be in frame 30 now) just once to select it. Now move it to the right using the right arrow key in conjunction with the Shift key. You must move it so that the first copy of the phrase arrives near the 3D frame's left edge, but just a little bit closer to the frame then the middle phrase was. You can clearly see this on the following image:
57 Right-click anywhere between the two keyframes (the grayish area) on this layer (scrolling text) and select Create Motion Tween.
58 Test your movie (Ctrl+Enter). Observe your text animation closely. Does it jump at a particular point? If so, go back and move the animated text movie clip a little bit to the left or right in frame 30 (the second keyframe). Test again and make adjustements until you get it right.
Excellent! There are just a few more things that need to be fixed before the button is complete. Try this: go to Modify > Document and change the document's background color from white to black. Test your movie again and you will see that the scrolling text message is fully visible, even outside the button. You must make it visible only inside the 3-D frame area. To be able to do this, you will use a mask.
59 Lock the scrolling text layer and insert a new one above it and call it mask.
60 Unlock the background layer. Select the rounded rectangle fill shape and press Ctrl+C to copy it. Lock the background layer.
61 Click on the first frame of the mask layer to select it. Press Ctrl+Shift+V to paste the fill shape here. It will be pasted on the exact same spot as the fill from which it was copied from.
62 Lock the mask layer. Right-click on it and select Mask from the menu that appears. The scrolling text layer beneath it will automatically become the masked one.
Test your movie again and you should see the animated text appearing between the framed area only. Cool! Masks are so simple to use in Flash and yet so helping. You can turn the background color of your document back to white now.
Defining the button's clickable area
Still, there is one more thing that needs to be adjusted and it isn't plainly visible. Test your movie and place your cursor near the button. You will see the hand cursor appear! Which means that the area outside the button is clickable!
How is that possible? The answer is simple: Flash considers all of a button's content as a clickable area, unless you tell it otherwise. Let me show you how to do that easily.
63 Click the promo button link above the stage to return to the button symbol's timeline.
64 Click on the scroller movie clip once to select it. Press Ctrl+C to copy it.
65 Lock the scroller layer. Make a new layer, call it clickable and drag it below the other two layers.
66 Paste in place the copied movie clip here (Ctrl+Shift+V).
67 Move the keyframe keyframe from the Up state to the Hit state. Just click on it and drag it over to the Hit state. The sequence below shows clearly how to do this.
68 Now that you are in the Hit frame of the clickable layer, proceed to break apart the movie clip that you copied previously. Select Modify > Break Apart. The movie clip will be decomposed down to its contents. Select just the movie clip containing the text and delete it. Now select both the 3D frame and the fill and break them apart (shortcut key: Ctrl+B). You are left with a simple shape that will serve just as the clickable area.
You still need to make possible for your users to be able to click on the rotating star too. Just repeat the same thing as you did a moment before, but this time with the star-shaped movie clip: unlock the rotation layer, select the movie clip and copy it. Lock the rotation layer. Paste in place the movie clip on the Hit frame of the clickable layer. Then break it apart, delete the text and leave just the star shape. I even changed the colors to immediately know that this is just the button's clickable area.
Flash still needs to know that only this frame will define the clickable area of your button symbol. You will tell it that this is so by making the button's visible parts apparent just on the first three frames.
69 Right-click on the Down state of the scroller layer and select Insert Frame. Repeat this for the rotation layer. Your button's timeline should now look like this:
Test your movie now and move the cursor around the button. You will see that the hand cursor appears only once it is over the button's visible area.
And that's it! The promo button is finally completed! It looks very attractive. You can enter additional text inside it, below the animated text, to convey more information to your site visitors. You can even make it smaller by scaling it on the main scene if you want. It will still look good. To do this, just select the Free Transform tool (Q), hold Shift, grab one of the button's corners and make it smaller. Here is a screenshot of the scaled-down button:
Download the zipped source FLA file for Flash 8 with all the effects.
Download the source file for the promo button for Flash MX 2004.
cool man …i learn lot
Oh, what a nice tutorial. It will help a lot
step 62 was faild.. the mask does not work >>when i make test movie the scroll text does not appear.. mask does not work well with me always. 🙁
please help me
wonderfull
this was a great tutorial.. thanx! 🙂