How to make a shiny rollover effect for a movie clip that will function as a button

In this easy tutorial made for Flash MX, Flash MX 2004 or Flash 8, you will learn to create a shiny animated effect which will appear once a user rolls his mouse over a button. Many visitors to my site have asked me to explain how to make this kind of effect once they have seen it in my tutorial in which I explain how to make a tabbed website menu in Flash. To all of you who have requested this - here it is! In particular, you will see how to:

• Make a button shape using the drawing tools in Flash,
• Turn the shape into a movie clip,
• Add more design layers inside the movie clip to create a button that looks more real,
• Use the linear gradient to create the shiny effect,
• Animate the effect via the frame-by-frame animation and
• Implement some simple ActionScript code to make the effect work.

You can see an example of what you are going to learn in this detailed lesson below. Move your mouse over the button to see the glittery shining rollover effect!

Drawing the button's main shape

1. Open a new Flash document.

2. Select the Rectangle tool (R).

3. In the Properties panel, select the following options for the Rectangle tool:

• For the stroke color (the one used for lines), select a hue that will be darker than the fill, making the button more evident and visible in this way. I chose the color #004182 (see 1 in the image below).
• Select a fill color, lighter than the previous one - I used #0066CC (2).
• Select Solid as type of line (3).
• In the field for line thickness, type 2 and press Enter (4).
• This is optional: if you are working in Flash 8 and you'll be making a Flash movie intended for Flash player 8 and not for previous versions, you can turn on Stroke hinting. This effectively removes any jagged edges that may appear around the lines you are going to draw.

4. Go back to the Tools panel, to tweak some more options for this tool. In the Options portion of this panel, do the following:

• Make sure that the Object Drawing option is turned off. This applies to you only if you are working in Flash 8 (see the little icon marked with 1 below).
• Also, make sure that the Snap to Objects option is turned off too. You really don't need it right now and you will draw a lot more easily with it switched off (2).
• Click on the Set Corner Radius icon. A small window will appear: enter 14 as corner radius value and click OK. This is necessary if you wish to draw a rectangle with rounded corners.

5. Click on the stage and start dragging your mouse. Make a rectangle similar to the one shown below.

Ok, but what if you wish to have specific dimensions for your button? This is really easy to accomplish.

6. Using the Selection tool (V), double-click on the fill area of the rectangle - this way, you will select both the fill and the outline.

7. Go to the leftmost part of the Properties panel. You will find the input fields for the shape's dimensions there. They are marked as W for width and H for height. Enter 103 pixels for width and 37 pixels for height.

Save your document at this point. Let me show you now how to make the button look more realistic - you will add depth to it by creating a nice glossy effect.

Converting the shape into a movie clip and adding a glossy effect to it

8. Select the shape on the stage again - both the fill and the outline! This is necessary, because once you have used the fields in the Properties panel, the focus isn't on your object any more. That's why you have to select it again.

9. Select Modify > Convert to Symbol (shortcut: F8) to make a movie clip out of your shape. In the dialog that appears, do the following:

• select Movie clip as type,
• call it animated shiny button or whatever you like and
• click OK.

Your newly made movie clip has a thin blue line around itself, and also a little white circle in the middle, with a cross inside it - this is the movie clip's registration point. It is around that point that all the manipulations are made. For example, if you wish to move your movie clip around with ActionScript, the registration point is the reference point for determining and setting the movie clip's position on the stage.

Let me teach you know how you can easily give your button a more plastic, glossy look.

10. Double-click on the movie clip on stage with the Selection tool (V).

You should now be inside the movie clip. How can you know that you are inside the movie clip - working on its timeline and not the main one? Well, just look above the stage and the layers - all the pertinent information is nicely displayed there.

11. Call the first layer base shape.

12. Make a new layer and call it gloss.

13. With the Selection tool (V), click once on the fill to select it. Do not click twice, because you don't need to select the outline now. Just the fill!

14. Press Ctrl+C to copy the selection.

15. Lock the base shape layer.

16. Click on the gloss layer's first frame to select it for working.

17. Press Ctrl+Shift+V to paste in place here the shape you copied three steps before. Pasting an object in place in Flash places it exactly on the same position where the original was. This is very useful - thanks to this simple but great feature, you don't have to adjust an object's position manually.

18. Don't click anywhere now, so that the just pasted shape stays selected. Select the Free Transform Tool (Q). Handles will appear around the selected shape. I have zoomed in on my shape to be able to work more easily and be more precise.

19. Hold down Alt, bring your mouse over a corner of the shape (any one will do). A small diagonal arrow will appear. Click and start dragging. You will now modify your shape symetrically thanks to the Alt key.

When you have made the shape just a little bit smaller than the one inside the base shape layer, just release your mouse. And leave the shape still selected.

20. Go to the Color Mixer panel by selecting Window > Color Mixer. Make sure that the fill option is selected. If it isn't, just click on the little bucket icon (see 1 in the image below). Then select Linear as type of gradient (2).

21. Still in the Color Mixer panel, go to its lower part and there you will find the gradient color strip. For a nice glossy effect, you need at least three colors. To add a third color, just bring your cursor between the two existing colors and a plus sign will appear (see the animation in the image below), meaning that Flash is ready to add another colored square here. Click to do just that.

22. You must adjust the placement, color and transparency of each small square. Just clicking on a square brings up its alpha property (transparency) and hexadecimal color code in the area above the color strip. The image shows the colors and alphas you should assign to each square:

So, all the three colors which compose your linear gradient are pure white (#FFFFFF), and their alphas are as follows, from left to right: 90%, 14% and 0%.

Once you've got that right, place the squares so that they are positioned as the image clearly shows. To move a color square, click on it and start dragging it to the left or right. Just do not drag it down, because you will delete it in this way.

23. Using the Selection tool (V), click anywhere outside the button to unselect it. Do this once, because if you double-click on an empty area of the stage, you will return to the main timeline. And you don't want to do that now, because there is still work to do inside the movie clip. Your button should look close to this one:

That's fine, but the linear gradient (gloss) is placed horizontally, instead of vertically. Correcting this is easy, just follow my next step.

24. Select the Gradient Transform tool (F). Click on the gradient shape to select it with this tool. Some interesting handles will appear :)

25. Move your mouse over the little white circle (see image on the left below) and the cursor will turn into four arrows that are forming a circle. Fine - that means that your gradient is ready to be rotated. Do just that - click and start dragging your mouse clockwise. Stop dragging once you've made a 90 degree turn (see image on right) and release the mouse button. If during the rotation the gradient won't snap to a 90°angle, just check if the Snap to Objects option is turned on (the little magnet icon on the bottom part of the Tool panel).

26. You've got your gradient where you want it, but it is too wide. To adjust its width (or height, as you like it), place your mouse over the little white rectangle that is placed in the middle of the blue line (see first picture on left below). Click and start dragging it upwards. Once you have reached the lower border of the button, you can release the mouse (see middle picture below).

As you can see, the gloss is nicely visible now. But I am personally not satisifed with its position - there is too much of the blue area being visible on the top part of the button. If you have the same result and are not satisfied with it, just use the Selection tool (V) to select the gradient and move it upwards by pressing the up arrow key on your keyboard.

28. Unlock the base shape layer.

29. You will now repeat the same procedure you did in steps 13 through 17, but for the shine animation layer, instead of gloss:

• Use the Selection tool (V) to select the fill shape in the base shape layer (click once on it).
• Copy the selected shape by pressing Ctrl+C.
• Lock the base shape layer to avoid any possible mistakes.
• Select the first frame of the shine animation layer by clicking on it.
• Paste in place the shape here by pressing Ctrl+Shift+V.

30. The newly pasted shape should still be selected. Press F8 (or select Modify > Convert to Symbol) to turn it into a symbol. Select Movie clip as type, like you did before, name it rollover effect and click OK. You have just made a movie clip inside a movie clip.

31. Double-click on this new movie clip on the stage (with the Selection tool) to access its timeline. Once again, if you look above the layers, you will see that Flash has duly informed you that the current timeline you are working in is that of the movie clip rollover effect. Cool. :)

32. Go over to the timeline. Click with your mouse on the first keyframe and drag it one frame forward. Once there, release it. This simple step can easily be understood if you just look at the sequence of three screenshots below.

Why this must be done? Simply because the animated shine rollover effect must not be visible while the user isn't interacting with the button. This means that the shine must not be displayed if the user has not moved her mouse over the button. And if you leave it on the first frame, it will be visible.

What follows next is some simply tweaking around (once again) with the linear gradient fill.

33. Click once on the fill shape on the stage to select it - to bring it into focus. This is done, of course, with the Selection tool (V).

34. Once again, go to the Color Mixer panel. Select Linear as fill type.

Add a third color to the gradient strip, just like you did before and put it exactly in the middle. Set the following color and alpha values: all three squares should again be pure white, aka #FFFFFF, and the alphas should be (from left to right): 0%, 69% and 0%.

35. Select the Gradient Transform tool (F). Place your cursor over the rotational handle (the little white circle). Click and start moving the gradient clockwise until you reach a 45° turn.

36. Now place your cursor over the handle that is used to stretch or compress the gradient - it is the little white square. Once you do that, your cursor will turn into a two-pointed horizontal arrow. Click and start pushing inwards. The gradient will compress - its height will be reduced.

37. Place your cursor over the handle that serves to move the gradient - the little white circle in the middle. Your cursor will change into a cross with an arrow on each end. Click and move the gradient upwards and to the left, so that its lower part covers just a portion of the button's upper left corner.

The remaining actions that need to be done will consist just of adding new keyframes and moving the gradient around.

38. Go back to the layer's timeline. Right-click on frame 3 and select Insert Keyframe from the menu.

When you insert a new keyframe in the layer, the previous keyframe's contents are automatically and completely copied to the new one. Which suits you just fine, because you are right now making a frame-by-frame animation. Therefore, you will just change the position of the gradient in this new keyframe.

39. Don't move anywhere on the timeline. Just go back to the stage and using the Gradient Transform tool (F), move the gradient a little bit down and to the right.

40. Add a new keyframe to the layer: right-click on frame 4 and insert a keyframe, just like you did in step 38.

41. On the stage, move the gradient again. In the same direction - diagonally downwards and right.

42. Add the fifth and the final keyframe to the animation: right-click on frame 5 and insert a keyframe.

43. ...and move the gradient for the last time.

Yes! That's it concerning the animation work! It was easy, wasn't it? Sure! It will become second nature to you before you'll even know it :)

It's time to see this animation in action! Just select Control > Test Movie (shortcut: Ctrl+Enter). The test movie window will appear and you'll see the animation play continually over and over again, like in the example shown below.

This is normal, because every animation in Flash behaves like this unless you tell it otherwise. With ActionScript, of course. And that is just what you will do next: control the animation via some simple ActionScript code. Also, don't be alarmed if the animation seems to be too quick. This will be just fine once you add some interaction to your movie clip (that is acting as a button).

Stopping the animation from looping and finalizing the button's design

44. Call the current layer animation and lock it.

45. Add a new layer and call it actions.

46. Click on the action layer's first (and only) keyframe to select it...

...and select Window > Actions (shortcut key: F9) to open the Actions panel. Insert the following code inside:

stop();

This simple action will prevent the animation from starting and going endlessly in a loop. Also, you will add some ActionScript code later that will make possible for the shiny rollover effect to appear only once. The user will roll over the button with her/his mouse, the animation will play out, and once it comes back to the first frame, it will stop because of the stop(); action you have just put there. Simple and effective.

47. Click on the animated shiny button link above the layers to go back to it.

You are doing this to add some final touches to your button: the button's label. If you had clicked on Scene 1 link, you would have gone back to the main timeline and then go back inside your movie clip again.

48. Select the rollover effect movie clip you were just inside of a moment before, by clicking once on its registration point - the little white circle looking like a crosshair. To be sure that you have selected it, just check out the Properties panel: you should see "Instance of: rollover effect" displayed there.

Why click on this particular spot? Well, since the first frame inside the rollover effect movie clip is empty, there is nothing to click on except the registration point. :)

49. Go to the left side of the Properties panel and in the Instance name input field enter this movie clip's name: call it glitter.

50. Lock the shine animation layer and make a new layer above all the current ones and call it label.

51. Select the Text tool (T). Go down to the Properties panel and set the following options for your text field (the numbers of the list correspond to the numbers in the image):

1. Select Static text as type of field. This is the right choice for text that won't change via ActionScript or by user input. Ideal for animations, interfaces and such.
2. Select a font you like. Any font! Static text fields are displayed equally on all computers, whether a visitor to your site has it installed on his computer or not. This kind of text is automatically embedded in your SWF movie.
3. Set the font size - a bigger font size is good for a nice big button like this one.
4. Select a font color. White is fine on a darker background like the one used in this lesson.
5. For Flash 8 users only: select Anti-alias for animation if you plan to publish your movie for earlier versions of the Flash Player, like version 6 or lower, for example. If you are creating this SWF for Flash Player 8 or later, select Anti-alias for readability - the label will look much smoother.
6. Finally, leave the Selectable option turned off. Leaving it on would make possible for a visitor to select the label text, which will possibly disrupt the button's functionality and look really ugly once the cursor is passed over it.

52. Click somewhere over the button and type in the label for your button: I typed portfolio. Write anything you like that goes well with your link.

53. Once you're done, press Esc to exit the text editing mode. Use the arrow keys on your keyboard now to move the label into a good position - centering it inside your button looks ok.

Lock the current layer. If you wish, you can move the label layer below the gloss and shine animation layers for a different effect. Doing this will pull an "effect cover" over the label. Try it out and see what works best for you.

55. Click once on your movie clip (that is representing and acting as a button) with the Selection tool (V) to select it.

56. In the leftmost part of the Properties panel, find the Instance name field, click inside it, type shinyButton and hit Enter to confirm.

You can also call it shinybutton or myButton if you like, but just remember to type that exact name in the ActionScript code later. I used shinyButton because that's just the style of instance names in Flash and also the ActionScript language.

57. Lock the current layer and call it button. Make a new layer above it and call it actions. Select its first frame.

58. Open the Actions panel (F9) and enter the following ActionScript code inside it:

shinyButton.onRollOver = function() {
this.glitter.play();
};

59. Test your movie (Ctrl+Enter). Don't attack the button immediately :) and you'll see that there is no animation. Roll your mouse over it and - zap! There it is, just once! Roll your mouse out of the button and roll it over again, and zap! There it is again. The nice shiny effect in all its glory :)

OK, let's me show you now how this works.

The ActionScript code explained

Please note that this is ActionScript 1.0, which means it can function with Flash MX and all the subsequent versions.

The first line,

shinyButton.onRollOver = function() {

defines the function that makes the rollover effect possble. It says that a function is assigned to the shinyButton movie clip's onRollOver event handler. An event handler handles a certain kind of event: it tells Flash what to do if this event happens. In this partcular case, that event happens when someone rolls his mouse over the movie clip in question.

It tells Flash to execute a function, meaning everything that is placed between its curly braces: { and }. And inside it is a simple line of code:

this.glitter.play();

The ActionScript keyword this points to the object the keyword is placed upon: Since the keyword is inside the function which is linked to an event handler (onRollOver) that belongs to the shinyButton movie clip, the keyword this means exactly the shinyButton movie clip itself.

So, the construct this.glitter is a pathway, a pointer to the glitter movie clip, which is inside the shinyButton movie clip. In other words,

this.glitter

means

shinyButton.glitter

But you have to write the keyword this, otherwise the whole thing wouldn't work. If you wrote shinyButton.glitter, Flash would look for a movie clip called shinyButton inside the shinyButton movie clip, and that one simply doesn't exist. So the complete line

this.glitter.play();

simply tells the glitter movie clip to start playing. Remember, you have stoped it from going on by using the stop() action that you placed inside it.

And it plays, the user sees the effect, and once the animation has reached the end, it goes back to the first frame, where it reads the stop() action, and, well, it stops. It is really easy.

Using a movie clip as a button

And to wrap this tutorial up, I will explain to you why you had to use a movie clip instead of a button to achieve the shiny animated rollover effect.

If you used a button symbol, you would have placed the shining animation inside its Over keyframe. Fine so far. But there is a slight problem. A button symbol is aware only of itself, so the path to other objects has to be written fully - always, if you want the button to find that other movie clip, button, etc. Also, when you place a movie clip inside a button, it is very difficult to control it via ActionScript, and frequently there is no response at all from the movie clip.

Likewise, if you want to make a rollout effect for your button - you may as well forget it. This can be done only with a movie clip, not to mention if you want animated effects that will happen when a user clicks the button and then releases it.

Movie clips are one of the most powerful assets in Flash. I don't despise button symbols, they are great too and I love them for their simplicity. But movie clips offer much, much more possibilities.

That being said, I hope that you enjoyed learning from this tutorial as much as I enjoyed making it! Below you can download the source file for it: please note that the .FLA file is in Flash MX 2004 version, so if you have Flash MX, you won't be able to open it.

Download the zipped source FLA file for the shiny button roll over effect shown in this lesson.