Create a big animated promo button with scrolling text - part 2

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.

Top of page

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):

1. 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.
2. 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.
3. Select a bigger font size - the message has to be clearly visible!
4. Select white for the text color - it will look good on the reddish background.

5. Select central alignment for your label. In my opinion, this looks better then left or right-aligned text.
6. If you are using Flash 8, select Anti-alias for readability. This will make the label much more sharp.
7. 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! Go to the next page to see how to create the bigger part of this button with the scrolling message inside it.