Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Advanced light effect

4.8.2006, 21:17    Total views: 122721
Using this thoroughly explained, detailed flash lesson, you will see how to apply advanced color effect on any image, using a mouse cursor and action script code. Lesson is so complicated to explain, but I'll try to explain it on the best way I can. To create this tutorial you must use a Flash 8. Using this lesson, You will also learn how to convert any photos into a Movie Clip Symbol, how to create instance name, how to apply flash filters on any image, how to use Align Panel, how to use color mixer panel and much more!

Move your mouse over the image!

Step 1

Create a new Flash Document, press Ctrl+R on the keyborad (Import to Stage), and import any picture.

Step 2

While your picture is still selected, press F8 on the keyborad (Convert to Symbol), and convert it into a Movie Clip. Look at the picture below!

Step 3

Double click on layer1 to rename its name into a picture_bottom.

Step 4

Insert a new layer (layer 2) and name it picture_top. Lock picture_bottom layer .

Step 5

After that, open the Library Panel (Ctrl+L) and using drag and drop technique, move your picture (Movie Clip - See step2 ) on the stage.

Step 6

Then, open the Align Panel (Ctrl+K) and click on Align to stage icon, after that on Align horizontal center and Align vertical center icon, to precisely center your top picture with background (bottom picture).

Step 7

Select the top picture, open the Properties Panel (Ctrl+F3), and under type:  top_picture.

Step 8

Lock and hide a picture-top layer and unlock picture_bottom layer.

Step 9

Select the bottom picture ( picture of the picture_bottom layer ), open the Properties Panel (Ctrl+F3), choose Filletrs, click on plus icon and choose Adjust color. Look at the pictures below!


Step 10

After that set the options from the picture below!

Step 11

Now, your bottom picture must look something like this:

Now, you have a two different pictures. One - dark and gray scale image (bottom picture - picture_bottom layer ) and One - bright and coloring picture ( top picture - picture_top layer). Look at the picture below!

Step 12

Lock picture_bottom layer, unhide a picture_top layer, insert a new layer and name it gradient_circle.

Step 13

Take the Oval Tool (O), Stroke color must be switched off, under Fill color choose any color and draw a circle.

Step 14

While your "circle" is still selected, open the Color Mixer Panel (Shift+F9), and set the options from the picture below!

Step 15

While your "circle" is still selected, press F8 on the keyborad (Convert to Symbol), to convert it into a Movie Clip. Look at the picture below!

Step 16

Open the Properties Pannel (Ctrl+F3), and under type GradientCircle.

Step 17

Insert a new layer and name it Action.

Step 18

Click on the first frame of layer Action, open the Action Script Panel (F9), and paste this script:

top_picture.cacheAsBitmap = true;
GradientCircle.cacheAsBitmap = true; top_picture.setMask(GradientCircle);



this.onMouseMove = function() {
GradientCircle._x = this._xmouse;
GradientCircle._y = this._ymouse;

this.onMouseDown = function() {
top_picture.cacheAsBitmap = false;

this.onMouseUp = function() {
top_picture.cacheAsBitmap = true;

We're done! Test your Movie (Ctrl+Enter)

Download source file (.fla)
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 298615

2. High-tech city animation
Total views: 249225

3. Water effect
Total views: 227576

4. Photo slide show
Total views: 209724

5. Special Picture Effect
Total views: 185302

Related links