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

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.

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.

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.

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!