ADOBE FLASH CS3 Creating a looping background Backgrounds ...

ADOBE FLASH CS3 Creating a looping background Backgrounds are vital to most scenes in flash animations. They quickly help locate the viewer in a particular place. In this simple exercise you will learn how to create a scrolling, looping background. To create the illusion of depth, the scene is animated as separate layers (i.e. foreground, mid-ground, background).

By animating the

foreground layer (or depth) slightly faster than the background, we can further create a sense of three-dimensions. The key to creating a seamless loop is creating symbols that can joined together seamlessly.

1.

Open your underwater scene from one of our previous exercises.

2.

File > Save As. Give the file a new name and click save.

3.

We are going to create a simple looping background that makes use of re-using symbols [re-using symbols keeps file size and workload down]. Choose Modify > Document. In the Documents Properties box set the movie size to 800 x 400. This will give a nice widescreen look. Change the background colour to give your scene an underwater vibe. Set the frame rate to 18fps.

4.

If you haven’t done so already, convert each of your underwater scene elements into movie clip symbols. Name them - depth 1, depth2, depth 3, depth 4, and depth 5. Make sure depth 1 is the nearest element and depth 5 is the furthest.

5.

Drag ‘depth 1’ onto the stage. Position it at the bottom of the stage. On the timeline, double-click on the word ‘layer 1’ and rename it ‘depth 1’.

6.

Add 4 new layers below depth 1 [Insert > Timeline > Layer]. Rename these ‘depth 2’, ‘depth 3’, ‘depth 4’, ‘depth 5’. Drag the other symbols on the layer with the corresponding name.

7.

To create a looping background we need two identical symbols side by side. When animated, this will give the impression of moving through the scene (without the need for drawing a huge image).

8.

Hide all the layers apart from depth 1 [by clicking on the shy icons on the timeline]

Click black dots to shy (hide) layers

9.

Select the ‘depth 1’ symbol on the stage and choose Edit > Copy.

Edit

> Paste in Place. Position the copied symbol precisely at the right-hand edge of the other symbol.

Original Symbol

10.

Copied Symbol

Drag around both symbols to select them. Convert them to a new movie clip symbol called ‘loop 1’.

11.

Double-click on ‘loop 1’. This opens it in symbol editing mode. We are now going to animate the artwork inside the symbol, which creates a looping piece of animation. Position the symbols so that the left one lines up with the left-hand side of the stage.

12.

Select both symbols. Ctrl-click on them and choose ‘Distribute to layers’ [this puts each symbol on its own layer]. Delete the layer called ‘layer 1’ by selecting it and then clicking on the little trash can icon at the bottom of the timeline.

13.

We are now ready to start animating. Add keyframes on both layers at about frame 90 (5 seconds) [Insert > Timeline > Keyframe].

14.

Select both symbols and move them across the stage so that the right hand symbol is positioned practically where the left hand one started [make it just a couple pixels to the right]. Keyframes 1 and 90 should be almost the same!

15.

Motion Tween in the middle of both sets of keyframes.

16.

Click on ‘Scene 1’ to return to the main stage.

17.

Control > Test Movie. This allows you to play your looping piece of animation. It should play through without any jumps. If there are jumps double-click on the loop 1 symbol and adjust the artwork positions on the second keyframes.

18.

We now need to create a looping animation for depth 2. Shy the depth 1 layer and unshy the depth 2 layer. Repeat steps 9 – 17. Make this animation last about 10 seconds [180 frames].

19.

Control > Test Movie. Again check that the animation is seamless.

20.

Shy depth 2 and unshy depth 3. This layer is slightly different as it contains a single object [a rock], which we won’t copy.

21.

Convert it to a movie clip called ‘loop 3’. Open it in the symbol editor.

22.

Position the object off the right hand side of the stage. Add a keyframe at about frame 270. On keyframe 270 position the object off the left

hand side of the frame. Motion tween in the middle. Return to the main stage. 23.

Shy depth 3 and unshy depth 4. Repeat steps 21 and 22 only make this animation last 540 frames [30 seconds].

24.

Shy depth 4 and unshy depth 5. Repeat steps 9-16 making this animation last about 1000 frames [55 seconds].

25.

Control > Test Movie. You now have a seamless looping background.

26.

Adding sound is a great way to make your animation more dynamic. It is possible to import both .mp3 and .wav files into flash [though mp3 are smaller on file size]. File > Import > Import to Library. Navigate to a sound file (or download one at www.grsites.com). Click Open. Your sound file is now listed in the library.

27.

Insert > New Symbol. Name the new symbol ‘sound’. This opens the symbol editor. Drag the sound file from the library onto the stage. Add several frames to layer 1 [depending on how long you want the sound to last].

28.

Click any frame on the timeline and from the properties panel choose ‘start’ and ‘loop’ from the sound sync menu. This will make the sound play continuously.

29.

Return to the main stage. Add a new layer and drag the ‘sound’ symbol onto the stage. Test your movie.

When you’ve finished animating your background, have a go at creating and animating other objects as part of the scene (i.e. bubbles, fish, a crab etc.)