Flash Explained

Learn Flash easily.

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

October 14th, 2008 | Author: Luka | Category: Menus & Interfaces


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.

Choosing the properties and colors for the Rectangle tool.

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.

Adjusting the options for the selected drawing tool.

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

Drawing out a rectangle in Flash.

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.

Selecting the entire drawn shape.

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.

The dimensions of a shape can be modified in the Properties panel.

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.

Top of page

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.

Defining the basic properties for a movie clip symbol.

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.

The new movie clip sitting 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.

Information about the current timeline is shown above the layers.

11 Call the first layer base shape.

Modifying the name of a layer inside a movie clip.

12 Make a new layer and call it gloss.

A second layer is added inside the movie clip.

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!

Selecting the fill color of a shape in Flash.

14 Press Ctrl+C to copy the selection.

15 Lock the base shape layer.

Locking a layer prevents making errors, like unwillingly drawing inside it.

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

Selecting the first frame on the second layer.

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.

Using the Free Transform Tool to modify a shape.

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.

The shape is in process of being modified right now.

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

Selecting the Linear type of gradient.

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.

Adding a new color to the linear gradient.

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:

Adjusting the values of all colors that make up the gradient.

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:

The movie clip with the linear gradient added.

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

The fill shape is selected with the gradient transform tool.

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

Rotating the gradient fill by ninety degrees.

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

Making the gradient narrower.

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.

The button with a nice glossy effect.

You will now see how to easily create that shining animation, and I will also explain you why this button is in fact a movie clip symbol.

Top of page

Creating the animation for the rollover effect

27 Lock the gloss layer. Make a new layer above it and name it shine animation.

A third layer is added to the movie clip timeline.

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

Working inside a movie clip that is itself inside a movie clip symbol.

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.

Moving a keyframe inside a layer.

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

The shape is selected on the stage.

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

The linear kind of fill is selected from the type menu in the Color Mixer panel.

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%.

The little color squares along with their respective values are shown here.

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.

Rotating the linear gradient is done in a snap.

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.

Making the gradient's height smaller.

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.

Moving the gradient up.

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.

Adding the third keyframe to the layer.

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.

Moving the gradient to animate the shiny rollover effect.

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

A fourth keyframe is added to the animation.

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

The linear gradient is being moved again.

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

The last keyframe has just been inserted into the layer.

43 …and move the gradient for the last time.

The position of the gradient at the end of the rollover animation.

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

Top of page

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

44 Call the current layer animation and lock it.

The animation layer is locked.

45 Add a new layer and call it actions.

The layer for ActionScript is added inside the movie clip.

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

Selecting the keyframe where the ActionScript code will be inserted.

…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.

Going back to the previous movie clip.

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.

Selecting the movie clip and making sure that it is really selected.

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.

Assigning an Instance name to a movie clip on the stage.

This is a must – without the Instance name, you wouldn’t be able to control this movieclip via ActionScript.

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

Adding a layer for the button symbol's 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.

Setting up the characteristics of the text tool.

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.

Entering the label in the static text field.

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.

Placing the label in a good position adds to the overall visual effect.

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.

Ok now, let’s make this baby shine for your site visitors!

Top of page

Inserting the ActionScript code that enables the interactivity

54 Click on the Scene 1 link above the layers to return to the root (main) timeline.

Returning to the root level.

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.

Entering the Instance name for your movie clip.

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.

Making a layer for ActionScript and selecting its first keyframe.

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.

Top of page

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.

Top of page

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.

Be Sociable, Share!

Comments

Submit a comment

  • Sarah Oct 16, 2008 at 4:04 am

    How do get the action sctipt working for Flash CS3?

  • Luka Oct 16, 2008 at 9:55 am

    Go to File > Publish Settings. Select the Flash tab. Select ActionScript 1 or 2 and Flash player 8.

  • Ruben Oct 26, 2008 at 3:15 pm

    How do I get this new shiny rollover button to link to a webpage? Where do I change the actionscript? Thank you! This tutorial was super helpful. This is the last part that I am stuck on.

  • Luka Oct 26, 2008 at 3:55 pm

    Ruben: Please check out other tutorials. Under the Menus & Interfaces section and also under the banners section there are many tutorials which explain how to do it – for ActionScript 2.0.

  • mark maxwell Nov 6, 2008 at 1:46 pm

    when I finish I get this :

    Warning: 1090: Migration issue: The onRollOver event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseOver’, callback_handler).

  • Luka Nov 7, 2008 at 9:27 am

    mark maxwell: I mentioned at the beginning of this tutorial that this is a Flash 8 lesson. So, if you are working in Flash CS3, go to File > Publish Settings. Click the Flash tab and set the ActionScript there to 2.0.

  • stu Feb 17, 2009 at 3:31 pm

    Ah dear sir you are brilliant. I had been trying to create a button using just one Instance instead of 2xclicking into the movie clip, also using the Actioscript that Flash provides basic users with, whereas yours is alot easier to follow, appreciate the effort u put into this buddy!

  • Anonymous Feb 22, 2009 at 9:05 pm

    Hi there! This tutorial was great, I finally managed to do it. I was able to create the whole button but ended up with 1 error but it still worked when I inserted the flash button on Dreamweaver. The problem is how do I get it to link to another webpage on Dreamweaver? I have the old version. I have been stuck on this for ages and all I want it to do know is to insert it on Dreamweaver and being able to link it. Thanks if you can help!

  • Lee Feb 28, 2009 at 10:46 pm

    This is a really good tutorial even though I made shine what I needed to, I got a bit a lost after making it shine I suppose it’s just getting used to a programme and getting your head round things a bit more, but as they say practice makes perfect! Cheers though all the same!

  • venu krishna Jun 8, 2009 at 4:44 am

    *This is Fantastic tutoriyal
    *we need proplem solved this tutoriyal .
    *meny important activity include this tutoriyal .
    *every student see this web tutoriyal thanks.

  • flash Jun 25, 2009 at 11:33 am

    Hi,
    Friends i want to create animation on button onRollOver effect, how can i get it? do you have any idea? animation means like let say, i have one button, now when someone over moue on it at that tile button will get movement like round means button will rotate in x-axis. any idea??

    Many Thnaks…

  • Pixel Jan 1, 2010 at 2:20 pm

    Hi, nice tutorial and effect

  • june Feb 1, 2010 at 10:56 am

    Hi Luka, fab lesson, just one question, how would I go about creating say 6 tabs, I’m very new to flash and trying to learn everything at once, I’m really stuck. I got the button working beautifully, once I read down the line and discovered that all I had to do was change the settings to flash 8 action 1.0 or 2.0..LOL. Thank you for your valuable time and for the great lesson, so simple to follow…cheers June

  • Thanks for the great lesson!

  • Jobish K M Dec 3, 2010 at 6:46 am

    Thanks :)

  • Vishal Shrivastav May 3, 2011 at 8:59 am

    Thanks ! all your tutorials are good and easy to understand coz of explanation of making them in step by step..

    keep it up.

  • zhuzhu8376 May 28, 2011 at 3:24 pm

    Thanks for your tutorials i got to learn a lot of things and the explanation is easy to understand . keep up with all the hard-works .

  • NASSIM Aug 18, 2011 at 10:18 pm

    Thanks
    all your tutorials are great and easy to understand

  • Hillary Bost Jun 1, 2012 at 4:36 pm

    Great tutorial. very easy to understand. and well laid out. Thank you for being so comprehensive.

  • shamsheer Jul 18, 2012 at 10:15 am

    thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaankooooooooooooooooooooo………………………….

Leave a comment