Gradient Sweep Photo Effect

This flash 8 tutorial will be presented in a step-by-step format. The source file is here .

1. Open Flash. Create a new document (CONTROL + N). Make the stage slightly bigger than the photo you want to use. Also make the background color of the stage black (or whatever color you want, I’m using black).

2. Click on the first layer and name it image. Import an image of your choice (goto File>Import>Import to Stage or just press CONTROL + R). Place the image within the boundaries of the stage.
3. Create a new layer above the image layer and name it rectangle. Now draw a black rectangle without an outline approximately 2X the width of the image. You may have to zoom out (View>Zoom Out or press CONTROL + -) to make this easier.

4. Click on the rectangle and turn it into a movieclip symbol(Modify>Convert to Symbol or press F8). Double-click on the rectangle movieclip to edit it. With the rectangle selected change the color setting to match the following:

Flash Gradient

5. Now double-click somewhere outside of the rectangle to return to the main timeline. Place the rectangle over top of the image so that the solid black part covers the entire picture. Now insert a keyframe in the rectangle layer at frame 12. Also insert the actionscpript: stop(); on this frame.

6. At frame 12 of the rectangle move the rectangle movieclip to the left until it no longer covers the image at all. Now right-click anywhere between frame 1 and frame 12 of the rectangle layer and select motion tween. This will create a tween that makes the rectangle move from frame 1 to frame 12.

7. Now click on the 12 frame of the image layer and insert a frame (right-click and select New Frame or press F5). Your timeline should look like this:

Flash Gradient Timeline

Run your movie, because your done! I have only shown you how to implement the gradient effect one way (from right to left). I’ll leave it to you to figure out how to make the gradient effect do other more interesting things. Thanks for participating in this Flash Tutorial.

Leave a Reply

Name (required)


Mail (required)


Website