Animating a Gradient

Animating a Gradient

Flash CS4 Tutorial


How to Change Gradient Over Time in Flash



Your design may call for a gradient that changes over time. The trick to animating a gradient is to work with Merge Shapes and Shape Tweens. For more information about either concept, see topics, Merge Shape and Shape Tween.


Step One

Open a new document and add a Merge Shape rectangle to the stage.

Step Two

Select the rectangle and choose a gradient fill from the Fill palette in the Tools panel.

Step Three

Click frame 20 of the current layer and press F6 to add a keyframe with the same contents as the keyframe at frame one.

Step Four

With the frame still set to frame 20, select the object and choose the Gradient Transform tool (f key).

Step Five

Move the middle white circle to change the gradient "hot spot".

Step Six

Right-click the timeline between the two keyframes and choose Create Shape Tween from the pull down menu.

Step Seven

Publish your movie by pressing Cmd/Return (PC - Ctrl/Enter). The gradient morphs from frame one to frame 20.

Unlimited Gradient Choices

Gradients are powerful design elements that define mass, volume and lighting effects. Flash includes seven gradients in the Color palette. Consider mixing and saving your own gradients using the Color panel and Swatches panel (Window > Color and Window > Swatches).


Royalty-Free Stock Video at Pond5