My Flash Resource - New Ideas and News for Applying Flash to Complex Gaming Apps

Latest News and Developments

April 17, 2008

Gradient Sweep Photo Effect

by @ 2:32 pm. Filed under Flash Tutorials

Learn a simple photo gallery effect in this Flash tutorial. Topic include: motion tweening, gradient color fill, alpha property. No actionscript involved. Source file included.

This flash 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 Resource Tutorial.

Comments are closed.

My Flash Resource - A continually growing collection of tutorials, thoughts and interests of a Flash Animator and/or Developer.



New Feedburner Feed!

Feel free to syndicate.

Learning Material

Flash Resources:

Listed on BlogShares
  • Resources