Photo appearance/disappearance by mouse moving

9.6.2008, 15:43
Submited in: Flash | Total Views: 27426

In the tutorial listed below I will instruct you on how to make photo appearance disappearance using the mouse. When you're moving your mouse nearer photo, photo will become more and more clearer - slowly appear...and when you're moving your mouse cursor out of photo, photo will slowly disappear. To make this tutorial, you have to use action script code.

Move your mouse over the rectangle!

Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 300 pixels. Select #F8F8F2 as background color.Set your Flash movie's frame rate to 28 and click ok. See the picture below.

Step 2

Save my photo below to quickly create this tutorial!

Step 3

Go back into a flash stage. Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any photo into a flash stage.

Step 4

While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.

Step 5

While the new made movie clip 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 6

Press now Control+F8 key on the keyboard, type some name and click ok.

Step 7

Go back now on the main scene (Scene 1), click on the first frame and go to the Action Script Panel (F9) and enter this code inside the actions panel:

for (i=0; i<4; i++) {
_root["circle"+i]._x = (65*i) + 40;
_root["circle"+i]._y = 40;

for (i=4; i<6; i++) {
_root["circle"+i]._x = (65*(i-4)) + 40;
_root["circle"+i]._y = 100;

for (i=6; i<12; i++) {
_root["circle"+i]._x = (65*(i-6)) + 40;
_root["circle"+i]._y = 200;

Step 8

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.

Step 9

Move now, photo1_mc movie clip from the Library on the stage using the mouse and place it on the position like it is shown on the picture below.

Step 10

Take the Selection Tool (V) and click once on that movie clip that just draged from the libray on the stage and go again to the A.S.panel (F9). Then, enter this code inside the actions panel:

onClipEvent (enterFrame) {
xdist = Math.round(_root._xmouse - _parent._x);
ydist = Math.round(_root._ymouse - _parent._y);
distancefromthis = Math.round(Math.sqrt((xdist*xdist) + (ydist*ydist)));
_parent._alpha = (95-distancefromthis)+18;

Go back on the main scene and test your Movie (Ctrl+Enter).

Have a nice day!

Download example

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

Browse by category

Most popular tutorials