Stickman - Zoom, Rotate, Pan

TUTORIAL INFO
Version Flash 3 Difficulty Hard Created 9th April 1999

DOWNLOAD
ZIP	FLA

Saw this technique on the excellent Varazdin 2000 and thought I'd knock something together show how it's done. It's not an absolute copy, it's just intended to show the mechanics behind the technique. Here's the .fla file in .zip form.

Gee, that's amazing!

It's all really based on one feature of Flash - the ability to 'nest' one movie clip inside another. In this way, you can, say create movie of an object being rotated, then place it 'inside' another movie, where it is scaled. Then using Tell Target and the clever structure of Instance labelling in Flash you can operate each movie independently.

You've lost me...

Okay, so you start with an object - in this case the Symbol text which contains the word Stickman and the little stick dude. This symbol is placed within a movie clip, Rotate, where it is put through a single clockwise rotation of 360° (actually there's some fiddling about to get it to rotate indefinitely but this isn't really important for the purposes of this tutorial). There's a Stop action in the first frame to prevent the movie playing immediately.

Next Rotate is placed in a new movie clip, called Zoom and given the Instance Name Rotate (surprise!). In this movie clip, we scale Rotate from small to big over 30 frames. Again there's a Stop action in the first frame.

This movie clip is then placed in another new movie clip called PanUpDown and given the Instance Name Zoom. In this new movie, Zoom is moved from the top of the screen to the bottom over 30 frames, with a Stop action in the first frame (starting to sense a pattern emerging...?).

Finally PanUpDown is placed in yet another new movie clip called PanLeftRight and given the Instance Name PanUpDown. In this new movie, Zoom is moved from the left of the screen to the right over 30 frames, with -- you guessed it -- a Stop action in the first frame.

Phew! Pause for breath...

Once all that is done, it's time to place the movie clip PanLeftRight in our scene, giving it the Instance Name PanLeftRight.

Now what we have is a series of nested movie clips, which we can manipulate using Tell Target.

If we drop a button into the scene and give it a Tell Target action, we'll see that when we come to choose the Target we get an Explorer-like list: all you can see at first is PanLeftRight, but click on the + (plus) icon and it'll expand to reveal PanUpDown! Click on the next plus sign and you'll get Zoom, then again and you'll see Rotate (actually, you see two copies of each...I'm not sure why, just ignore the second one).

If you choose PanUpDown, you get the Target name /PanLeftRight/PanUpDown. Choose Rotate and you get the name /PanLeftRight/PanUpDown/Zoom/Rotate. Get the idea? It works a bit like directories on a disk.

Gosh!

Clever, huh? Now we can set up a series of buttons using Tell Target on each of the movies, either instucting them to step forward or backwards by one frame (Go to Next Frame, Go To Previous Frame). So by telling PanLeftRight to go one frame forward, it moves PanUpDown to the right, which has Zoom inside it, which has Rotate inside it, which has the text and figure inside it...so it all moves.

And...

It's not just useful for zoom, rotate and pan: you could have many more levels of nesting, with colour effects, animation, skewing...whatever you want. Just make sure you get the Tell Targets set up right!