Flash Week Day #5 – Adding animation in CS4

Adding animation with the Motion Editor & Motion Presets in Flash CS4

THE NEW MOTION EDITOR IN FLASH CS4 ALLOWS YOU TO CREATE COMPELLING ANIMATIONS FASTER THAN EVER. HERE WE’LL USE TWEENING TRICKS TO BUILD A SIMPLE PHOTO GALLERY

TAKING SOME CUES from After Effects, Adobe has completely overhauled the way tweening works in Flash CS4. These new features are designed to allow you to create animations quicker and easier than previously possible. The new Motion Editor takes everything required to create a tween and rolls it up into one panel, making it much easier. From here you can tween Basic Properties (in 2D or 3D), transform properties, colour effects, and filters while also allowing custom or preset eases to be added to your tweens.

In addition, after you’ve created a tween you can save it as a reusable Motion Preset. This allows you to easily reuse animations in future projects by simply applying them to new objects from the Motion Presets panel. This  short step-by-step guide will specifically highlight  some of these new tweening capabilities in Flash CS4, using a simple photo gallery component as an example. The Motion Presets and assets for this tutorial have been included on the CD and can also be downloaded from www.webdesignermag.co.uk.

01 File setup

Create a new ActionScript 3.0 file with Flash CS4. Make sure the frame rate is 30fps and resize the stage to 600×600. Add a background colour or pattern and a title/description of your choice as shown in the example provided. You can also add any other elements you choose at this stage.

02 Import photos

Next, you’ll need to import each photo that you would like to use to the library. When you are finished, create a new folder on the timeline and place each photo onto a separate layer. Make sure each photo is at the same x and y position and that they all measure exactly the same size.

03 Photo setup

When all of the photos have been added, it’s time to set them up. For each photo, select it and create a Movie Clip symbol (press F8 or select Modify>Convert to Symbol). Make sure you select centre registration for each photo. This will be important for the animations we will create later.

Pages: 1 2