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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
