One technique seen on a lot of Flash sites these days is an animation triggered by a rollover. I've experimented with different ways of making this work, but my buddy Josh at Digital Cornerstone came up with some very clean actionscripting that works great. We're going to walk through an example of how to do this, and while the animation we're using is very simple (you can see our example off to the left) the principle of the scripting involved can be applied to far more advanced Flash. This isn't a beginner tutorial so you should at least be familiar with creating symbols, using movie clips, and using actions with buttons before starting. You can download the .fla here that we used in this example.
1.
-Start by creating a new Flash movie, and hit ctrl-L so you can see your library.
-Create a simple graphic symbol like the one at the left, then create a movie clip called "circle anim" and use your symbol in that movie clip. The only real requirement is that your first and last keyframes need to be exactly the same, we simply scaled the symbol down and back up.
2.
-Our screengrab above shows actions already added to the first
and last frames of the movie clip, but we'll leave that for a
bit later. Create a button and call it "invisible". Put a keyframe in only the Hit state; now make the button's hit area big enough to cover the first/last frame of your movie clip.
-Now go to your main stage and drag your invisible button and movie clip from your library onto the stage (which should be empty) into layers like we have on the left.
3.
-Make sure you've named your movie clip instance (ours is "animation") and let's start the actionscripting.
-Right-click your invisible button on the stage and go to Properties. Now add the actions as shown to the right, making sure that the true and false variables are expressions and not string literals. But what does all that mean..?
We start with an On (Roll Over) command and Set Variable "/animation:loop" equal to true; this simply means that when the button is rolled over the variable "loop" (associated with the movie clip instance "animation") is set to a value of true. Then we begin our Tell Target action, targeting the "animation" movie clip instance. All this means is that everything between the "Begin" and "End" tell target actions is applied to that movie clip. You can see that we use tell target here to play the clip when the button is rolled over. Pretty simple so far, right?
The second part of the actionscript is very similar to the first, we're simply setting the variable "loop" to false when the user rolls off the button. And that's it, that's all the scripting that the button requires. We do, however, have a bit more work to do for the rest of the movie.
4. -Now we'll add the movie clip's actions. Put a stop action on frame 1; this is so that the clip doesn't start playing without being triggered. On the last keyframe of your movie add the action to the left. This checks at the end of the movie clip to see if "loop" is false ("is the mouse still over the button?") and stops at frame 1 if it is; if not it plays frame 2 and goes through the animation again.
Go back to your main stage, hit F12 to publish your animation and wow, it works! That wasn't even that hard! We did use a few little tricks to get this to go smoothly though, the biggest one being that by making the first and last frames of our movie clip the same we can loop from the last frame to either the first or second frame and still have a smooth animation.
So what can we do from here? Well, what if we used the button to trigger a movie clip in a different place on the screen? What would you have to do to have multiple circles on the stage at once? Do some experimenting, this is just the beginning of what you can do with actionscripting...
Latest Forums
Clone Yourself That is quit nice. But I think that can be more easy to do..
