Motion Tween in Photoshop Advertising Blinkie

In this Photoshop CS3 tutorial, we will finish the advertising blinkie by moving the text and ladybugs off the blinkie, leaving it blank to start the animation again. In the last tutorial, we finished the text morphing at Frame 74.

Now, we will start to move the red ladybug from under the cameo and toward the text (J 3 Designs). Let's give the ladybug 15 frames to reach the right edge of the text. From that point, we will move both the text and ladybug together for 60 frames until they disappear off of the blinkie. Next, we will move the gold ladybug from the bottom left corner toward the upper right corner and off the blinkie. Let's give this ladybug 20 frames for this task.

At this point, the blinkie will be empty. Let's give the audience a small resting period of 5 frames before we move the gold ladybug back into her original position at the lower left corner of the blinkie. This will complete the entire animation which will repeat until the world comes to an end.

Open your blinkie2.psd project file into Photoshop^R and let's get started.

Our first step is to move the red ladybug toward the text. Add Frame 75 and set the duration back to .1 sec. Add Frame 76, and click on the Red Ladybug layer in the Layers palette. Now, click on the Move tool and use it to move the ladybug into place at the right end of the text. You can also use the direction arrows on your keyboard to position the ladybug.
Select both Frame 75 and 76 and create a Motion Tween with a duration of 15 frames. You should now have 91 frames.
Now we will use a Motion Tween of 60 frames to move both the bug and text out of sight. On Frame 91, select both the Red Ladybug and J 3 Designs layers in the Layers palette. Add a new Frame 92 and drag both the bug and text to the left and off the blinkie. Select both Frames 91 and 92 and add a Tween of 60 frames. You should have 152 frames.

Now would be a good time to test the animation.
It's time to wake up that gold ladybug and put her to work. Add a new Frame 153 and select the Gold Ladybug layer in the Layers palette. Add another Frame 154 and drag the gold ladybug to the upper right and off the blinkie. Select both Frames 153 and 154 and add a 20 frame Tween. You should have 174 frames.
We want the blinkie to be blank for the length of five .l sec frames. So let's change the duration of Frame 174 to .5 sec.

Finally, we need to move the gold ladybug back into her starting position.
Go back to Frame 1 and click Copy Frame from the Animation palette pop-up menu. Select the last frame (174) and click Paste Frame. In the Paste Frames dialog box, choose Paste After Selection and click OK. This will add Frame 175.
Add a new Frame 176 to duplicate Frame 175. Go back to Frame 175 and, with the Gold Ladybug layer still selected in the Layers palette, drag the ladybug downward and off of the blinkie.
Select both Frames 175 and 176 and add a 10 frame Tween. You should have 186 frames.
Make sure that the Looping Options is set to Forever (bottom of Animation palette) and save your blinkie as AdvBlinkie.psd. Go back to Frame 1 and test your finished blinkie. You will also want to use the Save for Web and Devices option from the File menu to save your blinkie in gif format for the web.

Join us in the Digital Art and Design forum.