Continuous Looping Graphic

In this example your are going to create a looping space background, however, the same effect could be applied to any other type of background effect such as a snowing or raining background, moving clouds, or any other background effect where you want to create the illusion of continuous movement. Or like the city backgrounds you will be using in the next assignment.

You’ll create the effect by creating 2 versions of the same background and then animating them in a way that creates the “continuous” looping effect.

Step 1: Create the space background

1. Begin by creating a simple black rectangle

2. Make the rectangle a little larger than the movie and convert it to a graphic (F8)

3. Select the Pencil Tool and draw out some white dots on the rectangle to resemble stars

Step 2: Set up the space graphic

1. Duplicate your graphic by selecting it and then copying
(Command+C)

2. Paste the graphic you just copied by pressing (Command+V)

3. Line the two graphics up side by side. You should use the Align Top Edge or Align Bottom Edge in the Align Panel to ensure the graphics line up evenly. Then use the arrow keys on the keyboard to one of the graphics over until they are just touching.

4. Select all (Command+A) and make both graphics a new graphic (F8)

Step 3: Create the Motion Tween

1. Create a keyframe at Frame 30

2. Right Click anywhere in the timeline between Frame 1 and Frame 30 and select Create Motion Tween

3. While still on Keyframe 30, shift-drag the graphic to the left so that the outline of the second image aligns with the position of the first image. Use the outline of the graphic as a visual guide and line it up with the guides you placed on the movie. NOTE: pay special attention to the stars and how they line up. They will be your best indication that you've lined the graphic up exactly where the first graphic was.

Step 4: Insert a Keyframe at Frame 29

1. Click on Frame 29

2. Create a keyframe by pressing F6.

3. Delete Frame 30. This is to prevent the movie from playing the same frame twice when the movie repeats.

Step 5: Make the animation a movie clip

1. Select all the frames

2. Click on Frame 1 and drag to Frame 30 to select all the frames

3. Copy the Frames by control-clicking anywhere on the selected frames and select Copy Frames

4. Create a new symbol by going up to Insert>New Symbol... and choose Movie Clip

5. Right Click on Frame 1 and choose Paste Frames

Step 6: Add the Movie Clip to the movie

1. Click back on Scene 1

2. Create a new layer

3. Add the movie clip "Background" to the new layer

4. Delete Layer 1. Layer 1 has the original animation on it and we no longer need it because we created the movie clip that contains the original animation

Step 7: Test your movie. Export as an swf file and put into the drop box.