| 1.) I'll start off with a
300-pixel-wide by |
(TIP: Setting the frame rate and movie
dimensions should always be the very first thing you do at the start of
every Flash animation project. Getting them right when you start off can save
you hours of
reworking later on. Trust me--I learned this one from experience!)
| 2.) I've drawn a shape with
the pen tool and made sure the right and left sides are straight and match up. |
| 3.) Select the shape and Group
(Command-G) it--this will enable you to use it in Motion Tweens. You'll notice the selection will change from a dotscreen to a bounding box after grouping. |
| 4.) With the grouped shape still selected, set the shape's x-position to zero in the bottom left corner of the Properties Inspector--this aligns the object's left side with the left side of the Stage, since Flash sets the (0,0) origin point at the top left corner of the Stage. | |
| 5.) Copy (Command-C) the grouped shape. |
Here comes the step that reveals why Dino kept passing the same mastodon lamp!
| 6.) On the Timeline, create a new Layer, click on the first frame of the new Layer, and Power Paste (Command-Shift-V). In the Properties Inspector, set the copied shape's x-position to 300--this will send the copy off the Stage entirely, so its left edge will be up against the right edge of the original shape (this is why the sides needed to match up perfectly.) |
| 7.) Add some frames to both Layers in the Timeline by selecting a frame and pressing F5. I want it to take 3 seconds for the background to travel across the screen, so, since the frame rate of my movie is 12 fps, I'll need 36 frames for the entire background cycle. After 36 frames, the animation will return to the frame I started out with, so I'll add 36 frames for a total of 37. |
| 8.) On the Timeline, I created a Keyframe (F6) at Frame 37 on both Layers. |
| 9.) Making sure that the Playhead is at the Keyframe on Frame 37, I select the original shape I made (the one on the Stage and on Layer 1) and set the x-position in the Properties Inspector to -300 (the negative sign sends the shape off the left side of the Stage.) The original shape has literally exited Stage Left! |
| 10.) With the Playhead still on Frame 37, I selected the copied shape (on Layer 2) and entered an x-position of zero in the Properties Inspector. This will send the copied shape to the exact same spot the original shape just left, smack dab in the middle of the Stage. |
| 11.) Create a Motion Tween between Frame 1 and 37 of both Layers. 12.) Test the movie (Command-Return). Notice anything? |
The visual hiccup is caused by the first and last frame of the
movie being exactly the same, so the image
stays the same for 2 frames as Flash loops the movie from Frame 37 back to Frame
1.
Don't worry, there's an easy fix!
| 13.) Close the
test and go back to the Timeline. Select the frame before the end Keyframe
(in this case, 14.) With the new Keyframes selected, use the dropdown menu
to set Motion Tweening to "None" 15.) Select the old end Keyframes (in this example, the
ones on Frame 37) and delete the frames entirely 16.) Test the movie again. How ya like it now? |
|
. |
The frames can now be copied (Command-Option-C) and pasted (Command-Option-V)
as a unit
along the Timeline for as long as you want the background to move. When combined
with a
character in a stationary walking cycle (we'll get to that later!) the looping
background
can take your Flash animation to some interesting places!