This tutorial requires an intermediate understanding of flash motion design. We’ll be using flash CS3 for this example, but there’s nothing here that can’t be done in Flash MX2004 and all the versions in between, so stick with it whichever version you’re using.
Here’s what we’re going to create:
1. Step 1 – Create a new flash document and set the stage dimensions to 200 height by 300 width at 30 fps. Then change the background to anything other than white, preferably quite dark. For this example, I’ll just make it black.
2. Step 2 – Create Text. Obviously the easiest way to do this, is simply click on the text tool in Flash and type away. You can use whatever font you want but I’ve decided to use a futuristic looking font-type called “Syncho LET” which I’ll need to embed into the swf, to make sure the average joe will be able to see it properly.
If you want to embed a font, click here for instructions. (link coming soon!)
3. Step 3 – Create Mask. Very straight forward this step, create a new layer on your timeline and select the rectangle tool (Fn + r on macs) and draw a long rectangle that covers the full width and height of you text.
Once you’ve drawn the rectangle, right click on its layer and select “mask”. This will automatically mask the text layer underneath it.
4. Step 4 – Create White Block. Those white blocks probably have a proper name but I don’t know what it is, so will be aptly referring to it as “white block” for this tutorial. First select another new layer above the mask, then select the rectangle tool again and draw a small white rectangle with no outline stroke. Main thing you want to make sure of here, is making the white block longer and wider than the longest and widest letter in your text.
After you’ve drawn your rectangle, right click it and select “convert to symbol”. Select movieclip and call the movie “wblock_mc”, then click OK.
Your screen stage should look something like this:
5. Step 5 – Time to animate! Now the fun bit. Kind of. Let’s start by inserting some frames onto our timeline. Hold down “CTRL” and select frame 52 across your three layers and click “Insert>Timeline>KeyFrame” or hit Fn+F6 on Macs. Your timeline should now look like this:
6. Step 6 – Add Keyframes to White Block Layer. Actually before we do that, let’s move the “white block” position on frame one, so it’s now positioned directly over the first letter of our text (in this example the “S” in “stylish”). Next we need to budge the Mask and Text Layer’s starting keyframe along the timeline a bit, so they both start at frame 30.
After you’ve done that, we need to add a load of keyframes on the “White Block” layer. For this example I’ve created one every 4 frames up until frame 30. You can vary this a bit but if you’re not confident with experimenting quite yet, just stick to one keyframe every 4 frames for now.
7. Step 7 – Create Blinking Effect. Okay, now we actually do create the blinking effect. Dead easy, you should have 7 keyframed sections of the white block, up until frame 30. Just delete every other section so it looks like this:
8. Step 8 – Position Mask and sync motion of “white block” and “mask”. Let’s start with the white block. Its final position, on keyframe 52, should be just after the last letter of our text already (if it isn’t just move it there now). On frame 30, it should also already be positioned correctly, over the first letter of our text. Select any frame between the two keyframes and select “Create Motion Tween”.
Next select the first keyframe of our mask layer, on frame 30 also, and move the mask left, so its right side is directly adjacent to the first letter of our text AND the white block. Once that’s in position, select a frame in between the two keyframes on the Mask layer, and select “Create Motion Tween” just as you did with the white block.
So, your timeline should look like this (please note I’ve now added a 4th layer on the picture below, just for the purpose of sticking a “stop();” command at the end of the movie).:
Right, that’s the nuts and bolts of the tutorial, you can obviously play around with all sorts of variables there but if you want to stick around and see a sleek way to transition the text out, keep reading…
—
9. Step 9 – Outro Blink. Just as when the “White Block” appeared on our screen blinking, it’s going to do the same before it disappears. Select frame 90 across all our layers and insert keyframes to extend the timeline. Then, just as with Step 6, every 4 frames insert a keyframe on the “White Block” layer up until frame 76 and delete every other keyframed section.
Your timeline should now look like this:
10. Step 10 – White Block Slide. Select the last frame of the white block (frame 90) and move the white block left to before the first letter of the text.
Then select frame 78 on the white block layer and insert another new keyframe. Here you need to move the white block just a few pixels to the right. I’ve moved it 5 pixels in total.
Now select frame 77 of the white block layer and right click, select “Create Motion Tween”. In the Properties box, move the “Ease” drop down box to “Out +100”.
Now select any frame between 78 and 90 on the White Block layer and again, right click and select “Create Motion Tween”. This time in the properties box, move the “Ease” drop down box to “In –100”.
11. Step 11 – Synchronise Mask Movement. This might take a little bit of tweaking, you basically lead to move the mask at the same pace as the white block. So as the white block moves to the left, the letters are removed in its wake. I selected frame 79 on the Mask layer and inserted a key frame. After I’d positioned the final frame (90) of the Mask, so it had moved to the left beyond the first letter, I created a motion tween and selected “In –100” from the “Ease” drop down box. So my timeline looked like this:
12. – Step 12: Final STEP!
Okay, now we just need to transition our white block off the screen. I’m going to do this simply by creating a “fall away” effect. First, select frame 98 on the White Block layer and insert a keyframe. Then insert another keyframe on frame 93 of the same layer. Select the white block on it’s new final frame (98) and move it directly downwards till it reaches the bottom of the stage. Still on this final frame, click “color” in the properties box and select “alpha” from the drop down box. With alpha selected, move the % amount from 100 (the default setting), down to 0. Select any frame between 93 and 98, right click and “Create Motion Tween”. Select “In –100” in the “Ease” drop down box and then test your movie… if you’ve followed the instructions above (or I’ve managed to explain them in a way that makes sense to anyone other than me!), then you should see something like this:
To download the source files, click here.