Using this thoroughly explained, detailed flash lesson, you will see how to create advanced bouncing photo effect using the AS3 and mouse cursor.


Example:

Hover the mouse cursor over the photo to see the effect!



Step 1

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



Step 2

Choose now File > Import > Import to stage (Ctrl+R) and import any photo into a flash stage.

Step 3

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



Step 4

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip photo_mc. See the picture below!



Step 5

Call the current layer air photo. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 6

Select the first frame of layer photo, go to the action script panel (F9) and enter this code inside the actions panel:

import fl.transitions.*; 
import fl.transitions.easing.*; 
 
photo_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver); 
photo_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut); 

function doMouseOver(event:MouseEvent):void { 

var xT:Tween = new Tween(photo_mc, "scaleX", Bounce.easeOut, photo_mc.scaleX, 1, 2, true); 

var yT:Tween = new Tween(photo_mc, "scaleY", Bounce.easeOut, photo_mc.scaleY, 1, 2, true); 
} 

function doMouseOut(event:MouseEvent):void { 

var xT:Tween = new Tween(photo_mc, "scaleX", Bounce.easeOut, photo_mc.scaleX, .5, 2, true); 

var yT:Tween = new Tween(photo_mc, "scaleY", Bounce.easeOut, photo_mc.scaleY, .5, 2, true); 
} 

We're done now!

Test your movie (Ctrl+Enter).

Bye!

Download source file (.fla)