Finishing the Blinkie with Flash Motion Tweens

When we last worked on the Flash blinkie animation, we had just finished the text effects. The last text effect to occur in the animation was the appearance and disappearance of the website name “J3 Designs”. It disappears off the stage to the left with a Timeline Transition Effect (Transition 3 on the Timeline). There was a reason for this and you are about to find out what that reason was.

Remember that, as part of the design details, we have those two ladybugs. Well, it’s time to put them to work. When we built the layers to our blinkie project, we added the gold ladybug to the Bug 1 layer. Now, the first thing that we will do is add the second ladybug to a new layer which we will call Bug 2. We want this red ladybug to appear from under the cameo. Therefore, we will need to place the new layer under the Static Details layer.

Open blinkie2.fla into Flash CS3 and let’s get to work. We want the ladybug to start moving from under the cameo as the website name starts to disappear. We want it to look like the text is disappearing because of the ladybug. So we will add this new ladybug on Frame 110, which is when the text starts to disappear.

Click File – Import – Import to Library to open the Import dialog box and add the red ladybug to our Library.
Add a new layer under the Static Details layer and name it “Bug 2”. Add a Keyframe (Insert – Timeline – Keyframe) to Frame 110. Drag the red ladybug from the Library to under the cameo and out of sight for now.

We want this ladybug to move to the left until it disappears off the stage as the text disappears. So, we want the ladybug all the way to the left and off of the stage by the time we reach Frame 160.
Click on Frame 160 on the Bug 2 layer, add a Keyframe and drag the red ladybug to the left and all the way off the stage. Right click between Frame 110 and 160 and choose Create Motion Tween from the pop-up menu.

Test the movie and you should see the text disappear as the ladybug moves over it. Once the red ladybug is off the stage, we will move the gold ladybug (Bug 1 layer) up and to the right until it also disappears off the stage.
Click on Frame 160 on the Bug 1 layer and add a Keyframe for the starting point for the gold ladybug’s animation. Let’s use 20 frames to move the gold ladybug off the stage. Click on Frame 180 and add a Keyframe. Move the gold ladybug up and off the stage.
Right click between Frame 160 and 180 and create a Motion Tween. Click on Frame 180 and add a Frame to the Static Details and Background layers to make the contents on these layers visible again.

Finally, we want to move the gold ladybug back to its original position at the bottom left of the stage. But we don’t want the bug to move down from the top of the stage. We want it to move up from under the stage. So we need to first place the gold ladybug at the left and under the stage. Then all we need to do is move it upward back into its original position so that the animation can repeat. We will use 10 frames to move the ladybug back into place.
Go all the way back to Frame 1 on the Bug 1 layer and select the gold ladybug. Click Edit – Copy to save the original position of the gold ladybug.
Still on the Bug 1 layer, add a Keyframe to Frame 190. Click Edit – Clear to remove the gold ladybug that is already there. Then, click Edit – Paste in Place to put the gold ladybug back to the original position.
Still on the Bug 1 layer, click on Frame 181 and add a Keyframe. Then, remove the gold ladybug that is already there. Put the gold ladybug back into the original position on this frame (Paste in Place). Then, drag this ladybug to under the stage. Add a Motion Tween between Frame 181 and 190 which will move this ladybug up and onto the stage.
Click on Frame 190 and add a Frame to the Static Details and Background layers to make the contents on these layers visible again.

Test and save the blinkie as blinkie3.fla. Then publish your blinkie as a .swf file and enjoy your new blinkie.

Join us in the Flash forum to discuss this project.

J3 Designs