How to animate a gradient in flash


This tutorial will show how to simply animate a gradient going from left to right, this effect would be great in a preloader or just as part of an animation.


1.
Start by making a gradient for the fill color, like in the image below

Photoshop Tutorial thumb picture


2.
Now with the rectangle tool draw a rectangle on the stage, with the fill gradient and a stroke with the color gray.

Photoshop Tutorial thumb picture


3.
Right click at frame 20 and choose create new keyframe

Photoshop Tutorial thumb picture


4.
In the time line right click a frame between frame 1 and 20, choose create motion tween.
Go down to the properties menu and change the motion tween to a shape tween.

You will see a dotted line, this means that the tween wont work, because our shapes are not raw shapes.

Photoshop Tutorial thumb picture


So for both frame 1 and 40 right click the shape and choose break apart, do this twice.

5.
Now we have an animated gradient, going from left to right.

To make it go the other you and have a flow I just copied all content of frame 1, made a new empty keyframe at frame 40, inserted the content in place, and created at shape tween between frame 20 and 40.

Photoshop Tutorial thumb picture


And you are done.

0tutor.com rss feed