Toxiclab.org

Gradient photo presentation

25.8.2008, 19:3
Submited in: Flash | Total Views: 36471

This simple but in the same time very attractive flash lesson, will show you how to create cool photo presentation using a color mixer panel and gradient.  You don't have to use action script code to make this lesson. You can use this lesson for any flash animation, header, banner... Let's go!



Step 1

First of all, find some photo which you like to use for this lesson!



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of your photo. Select any color as background color . Set your Flash movie's frame rate to 19 and click ok.



Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import your picture into a flash stage!

Step 4

While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 5

Click now on frame 40 and press F5 key.

Step 6

Create now a new layer above the layer 1 and name it gradient.

Step 7

Select now gradient layer and take the Oval Tool (O). After that, for Fill color choose any color, for Stroke color choose No color and draw the Oval Shape over the whole photo, like it is shown on the picture below!



Step 8

While the Oval shape is still selected, open the Color Mixer Panel (Window > Color Mixer) and choose the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Radial as Type.
3. Click on the small color rectangle that is on the left side, and set its color to #FFFFFF. Alpha property set to 0% (completely transparent).
4. Click on the second rectangle from the right side, move it left and set its color to #B25B8F, but change its alpha property to 100%.
5. Create a new rectangle and place it on the left side. Then, set its color to #952823. Alpha property set to 0%.



Now, you get this:



Step 9

Click now on frame 30 and go again to the Color Mixer Panel (Window > Color Mixer). Then, choose the following options:



Now, you get this:



Step 10

Select now frame 40 and press F6 key! Then, go again to the Color Mixer Panel and for every rectangle set Alpha property to 0% (completely transparent). See the picture below!



Step 11

Right-click anywhere on the gray area between frame 1 and 30 and frame 30 and 40on the timeline and choose Create Shape Tween from the menu that appears. See the picture below.



Step 12

Click now on frame 40 of layer 1 and press F6 key. While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.



Step 13

Clik after that on frame 50 and press F6 key.Then, take the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 14

Right-click anywhere on the gray area between frame 40 and 50 on the timeline and choose Create Motion Tween from the menu that appears.

Now, test your movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials