Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Start Flash ActionScript Animation with Button

This Flash ActionScript tutorial demonstrate a more interesting animation. The object on the stage will be animated to the location where the mouse click.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

In this Flash ActionScript tutorial the football will be animated to the mouse click location with ENTER_FRAME event.

The complete Flash Movie is shown as above, you may try how it works before you start this tutorial. Click on the above flash movie to select it to start. Click your mouse anywhere on the stage, the football will be moved to the mouse click location. An easing (damping) effect is also apply to the motion so that the football will be moving slowly and slowly when approaching the destination.

Flash ActionScript Codes:

//Set a damping factor of the movement of football (easing factor)
var easing:Number = .2;

//dx is the x displacement of ball
//dy is the y displacement of ball
var dx:Number;
var dy:Number;

//mouseLocX is the x location of mouse pointer when click
//mouseLocY is the y location of mouse pointer when click
var mouseLocX:Number;
var mouseLocY:Number;

//Get the width and height of the ball
//var mcWidth = football_mc.width/2;
//var mcHeight = football_mc.height/2

//Listen to mouse down event
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownLocation);


function mouseDownLocation(evt:MouseEvent) {

//Get location of Mouse Pointer on stage
mouseLocX = evt.stageX;
mouseLocY = evt.stageY;



//Use ENTER_FRAME event perform screen update
stage.addEventListener(Event.ENTER_FRAME, moveFootball);

function moveFootball(evt:Event) {

//dx is the x movement distance of ball
dx = (mouseLocX - football_mc.x) * easing;
//dy is the y movement distance of ball
dy = (mouseLocY - football_mc.y) * easing;

//It seems that football_mc.x can never equal to destinationX
//Therefore it is better to use the difference to stop the movement
if ((dx > 0.2) || (dx < -0.2)) {
football_mc.x += dx;
football_mc.y += dy;
//Display message in Message Box
//The distance (dx) round up to one decimal point only
output_txt.text = "Distance to Target: " + Math.round(dx * 10) / 10;
} else {output_txt.text = "Click the mouse pointer anywhere on the stage to move the ball." ;}


Download Flash Source File:

Flash Source File enter-frame-4.fla


You should noticed that most flash animation on the Internet are mostly loop animation, i.e. animation repeat again and again. The next Flash ActionScript tutorial will show how to use ENTER_FRAME to do loop animation.