The front page All those lovely tutorials Other sites of interest More info about Stickman
Stickman

'Rewinding' button

<IMG SRC="graphics/default.gif" WIDTH=150 HEIGHT=110 BORDER=0>

 TUTORIAL INFO 

Version Flash 3
Difficulty Intermediate
Created 7th May 1999

 DOWNLOAD 

ZIP

FLA

Once again, in response to a question on the Flashpad, asking how to make a button that 'reverses' smoothly on rollout -- that is, doesn't just jump to the beginning of the 'rollout' animation even when the 'rollover' animation hasn't finished. Here's the .fla file in .zip form.

Go on then, tell me how it's done

Okey doke...

This technique uses what's often called a control movie -- a movie clip that has nothing in it but a set of actions, which tell other movie clips what to do. With some ingenuity, control movies can be very versatile.

What you've got here are four symbols. Text is just that: a graphic symbol of the Stickman text. This is placed within the movie clip Animation_Over, where it is scaled from small to large over 20 frames. There's a Stop action in the first frame to prevent it playing immediately. Button is also pretty obvious - it's a button!

Animation_Over is placed in the scene and given the Instance Name Text -- just to confuse you :0). In a layer below is the button Button. We'll go into the actions assigned to Button after...

...the clever bit...

...which is all in the movie clip Control. The first thing you'll notice is that it has no objects in it - just a bunch of empty keyframes with frame actions in them.

The first frame is just a Stop action. Frame 2 contains the following actions:

Begin Tell Target
 Go to Next Frame
End Tell Target


...to instruct its target (Text) to play its next frame. Frame 3 uses Go To and Play to send Control back to Frame 2. Frames 4 and 5 are basically the same, except instead of sending Text to the next frame, it goes to the previous frame.

Putting it all together

So we drop the Control movie clip into the scene (doesn't matter where because it's invisible) and give it the Instance Name control. Now we can assign actions to Button.

Basically, what we want Button to do is, on rollover, tell control to start playing at Frame 2 (which in turn tells Text to play its next frame). As long as the mouse is over the button, control keeps looping between frames 2 and 3, and telling Text to play forwards. On rollout, we have control go to Frame 4, which tells Text to go back by one frame -- and keeps looping between frames 4 and 5, so Text keeps going backwards until either a) it gets back to Frame 1, or b) the mouse rolls over Button again.

Got it?

That's about all there is to it. Take a look at the .fla file and look closely at the actions in Button and control and it should make more sense.

Good luck!

Stickman

All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.