Create an animated background in Flash

With a few well-placed Flash tricks, you can liven up that dull micro site or standalone promotions site. Paul Wyatt shows you how to create a looping animated background

We web designers and developers are constantly on the lookout for animated effects that will help add visual punch to our work. If you’re creating a standalone microsite or a promotional area for a site, it can sometimes be hard to conjure up a design and animated treatment that sits well with the offer. Particularly if you’ve been supplied with very few assets, have no time and are scratching your head about what to deliver by the end of the day.

That’s why I love looping animated backgrounds. Done correctly, they can be a fun and an entertaining way of brightening up an otherwise dull page.

A looping animated background should, of course, be used with caution. Create looping patterns of flashing, dayglo elements bouncing around all over the place and you’ll instantly annoy your visitors and drive them away.

If the effect is more subtle, however, it will work to hook your visitors and steer them toward your messaging. This tutorial will show you the latter. Lift a page with a mixture of Flash know-how and traditional animation techniques. No ActionScript required!

 

 

Create an animated background in Flash : step 1

1. Setting up

Open partial_tutorial from the tutorial files. This file has been set up with all the elements you need to complete the tutorial. The stage has been set up at 900x700 pixels and the frame rate at 21 frames per second.

 

Create an animated background in Flash : step 2

2. Position the sky

Hit Ctrl and L to bring up the Flash library. From this, select the movie clip sky and drag it onto Layer 1. Hit V to access the selection tool and select the sky movie clip. In the properties inspector, position the movie clip on the X and Y axis at 0.0. Rename this layer sky.

 

Create an animated background in Flash : step 3

3. Cloudy layer

Create a new layer and name it clouds. Drag an instance of clouds group onto this. Use the property inspector to position this at X and Y axis at 0.0. Select the movie clip and Ctrl+C to copy it. Now choose Edit > paste in place.

 

Create an animated background in Flash : step 4

4. Grouping the clouds

With the new copy of the clouds group selected, change its X-axis property to 900. This will shunt it to the right of the stage by 900 pixels. Select both copies and hit F8 to convert to a movie clip. Name it clouds group x 2. Select this clip on the stage.

 

Create an animated background in Flash : step 5

5. Editing in place

Hit F8 again to convert this to the movie clip we’ll animate. Name it cloud anim. Right-click on it and select edit in place to enter the symbols editing mode. Click on the outline’s square to make the clouds easier to see.

 

Create an animated background in Flash : step 6

6. Tween the clouds

Right-click and choose insert keyframe at frame 225. With the cloud anim movie clip selected, change the X-axis value to -900 to shunt the clip off to the left by 900 pixels. Go back to frame one, right-click and choose Create motion tween.

 

Create an animated background in Flash : step 7

7. Seamless looping

Frames 1 and 225 are currently the same, which will cause a brief stutter to the animated background, so right-click on frame 224 and select insert keyframe. Right-click on frame 225 and choose clear keyframe then remove frames. Hit Ctrl + Enter to preview your looping clouds.

 

Create an animated background in Flash : step 8

8. Buildings

Under the clouds layer create a new one named buildings. From the library drag an instance of the clip cityview onto it. Position it at X 312.0 and Y 167.9. Select the clip and hit F8 to covert it to another clip. Call this one building anim. Right-click on building anim.

 

Create an animated background in Flash : step 9

9. Plotting keyframes

Select edit in place. Right-click and select insert keyframe at frame 450. Select the cityview movieclip and in the X axis change the value to -578.0. This moves the city view over to the right. Go back to frame one, right-click and choose Create motion tween.

 

Create an animated background in Flash : step 10

10. Stutter out

Frames 1 and 450 are the same. So, as before, this will cause a stutter to the animation. To fix this, right-click on frame 449 and select insert keyframe. Then on frame 450 right-click, choose clear keyframe and then remove frames.

 

Create an animated background in Flash : step 11

11. Make the plane fly

Create a new layer above the clouds layer and name it plane. Drag an instance of plane onto this. Position this at X -153.1 and Y 80.7. Select the movie clip and hit F8 to convert it to another movie clip. Name this plane anim.

 

Create an animated background in Flash : step 12

12. Editing the flight

Right-click on plane anim and select edit in place. Plot a keyframe at frame 276. Move the plane movie clip to X 1010.1 and Y 59.5. Go back to frame one, right-click and choose Create motion tween. Right-click in frame 500 on the plane anim timeline.

 

Create an animated background in Flash : step 13

13. Preview

Select insert frame to extend the hold time before the plane is seen on the stage again. Hit Ctrl + Enter to preview the animation. You now have a looping animation. It gives the impression of objects moving at different speeds, which results in a more realistic animation.

 

Create an animated background in Flash : step 14

14. Masking

Create a new layer and name it mask. Onto this, drag an instance of mask shape from the Flash library. Position this at X 12 and Y 12 on the stage. Right-click the mask layer and select mask from the pop-up menu. The plane layer has now become masked.

 

Create an animated background in Flash : step 15

15. Bulk masking

To mask the remaining layers, right-click on the clouds layer and select properties from the pop-up menu. In the Layer properties box that appears, select masked from the options available. Repeat this process for the clouds, buildings and sky layers.

 

Create an animated background in Flash : step 16

16. Add some content

The mask shape has acted like a cookie cutter to cut through four layers. Create a new layer, above the mask layer, and name it content. Onto this, drag an instance of central content from the Flash library. Position this at X 0,0 and Y 0,0.

 

Create an animated background in Flash : step 17

17. Your animated background

Press Ctrl + Enter to preview the site animation. Your content will remain fixed within the site as the background loops repeatedly. This type of design is perfect for an advertising micro site or promotional area. The looping animation adds visual interest to the promotion on offer.

 

Create an animated background in Flash : step 18

18. Creating HTML

To export an HTML file for your site choose File > publish settings. Within the formats tab, select and click the folder icons for Flash and HTML. Browse to a folder of your choice and hit Publish. The Flash and HTML files will appear in the directory you selected.

 

Create an animated background in Flash : step 19

19. More examples

Looping animations are all about matching points in time of the animation. You can create this for many different animated shapes. The golden rule is to remember to match the start and end frames of a movie clip.