Stretched text effect

Reload to see the effect again

TUTORIAL INFO
Version Flash 4 Difficulty Intermediate Created 12th June 2000

DOWNLOAD
ZIP	FLA

I've seen this effect many times before, but I'm not sure I've ever seen it done in Flash (if you know better, download an example .fla here.

Looks easy enough

It is, really. If you look at the file you'll see there are just three movie clips: Object, Masks and control.

Object is just a movie clip containing the text -- in this case, 'Stickman'.
Masks starts with a blank frame containing a Stop action, then a series of frames where a long and narrow mask is overlaid over the text object. The text object moves up 50 pixels over the course of 50 frames: the object is approximately 50 pixels high (46.9 to be more precise), so it's almost exactly one frame per pixel of height (which is important)
Control is, as usual, where much of the work is done. We'll look at it more closely in the following paragraph.

"The following paragraph"

Here's how it works, briefly: the mask with the moving text creates a series of frames with narrow 'sections' of the text object visible. Stick these all together (in the correct positions) and you get what appears to be a seamless copy of the text. Throw in a bit of y-axis scaling (I'll explain how next) and you get the stretching effect.

Let's take a look at the code, in frame 1 of the control movie clip:

Set Variable: "counter" = counter + 1
If (counter <= /:number)
 Duplicate Movie Clip ("/masks", "line"&counter, counter)
 Set Property ("/line"&counter, X Position) = /:x_pos
 Set Property ("/line"&counter, Y Position) = /:y_pos - counter + /:number
 Set Variable: "scale" = (/:y_pos - counter + /:number) * 100
 Begin Tell Target ("/line"&counter)
  Go to and Stop (/:number - /control:counter)
 End Tell Target
 Set Property ("/line"&counter, Y Scale) = 0-scale
 Set Property ("/line"&(counter-1), Y Scale) = 100
End If

So there's one big If...End If statement that checks to make sure that we're only creating as many duplicates of the masks movie clip as we need (based on the value of /:number, which in frame 1 of the main timeline is set to the number of frames in the Masks movie clip -- in this case, 50).

Once per frame, we create a new instance of /masks. Its y position is set according to the equation "/:y_pos - counter + /:number", meaning the offset (/:y_pos)that is specified in frame one of the main timeline, minus the current value of counter, plus the value of /:number. We also use Tell Target to make this instance of the movie clip go to the correct frame -- we're drawing the text from the 'bottom', so the first instance goes to the last frame, the second instance to the second last frame and so on.

In the next line, we scale it by this y co-ordinate multiplied by 100, subtracted from zero (which stretches it all the way to the baseline at the top of the movie). Of course we only want this effect to appear for each instance for the duration of one frame, and then revert to 'normal' size, so the final line resets the scale of the previous instance to 100 (ie. regular size, no scale).

Umm...

To summarise...

We duplicate the masks movie clip fifty times -- each instance being a separate, narrow strip of the text object which when placed together appears to be whole, solid text.
One clip is added per frame: the first time it appears, each instance is 'stretched' to the baseline, then reset to its normal size in the next frame (when the next instance is added and stretched).
This continues until all the clips are in place.

I hope this makes sense.

Good luck!

Stickman