In this thoroughly explained, detailed lesson, I will show you how to move any image on left or right side using the mouse cursor. To make this lesson, you have to use Action Script Code. Using this lesson, you will also learn how to import any image into a flash stage, how to convert it into a Movie Clip Symbol, how to create instance name... You can use this action script animation for some flash header, banner, some presentation or animation. Let's start!

Example :

Move your mouse right and left to move the image!

Step 1

First, downlod image which we will use for this lesson!

Step 2

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 275 pixels. Select white as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 3

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

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the image that you just download in step 1!

Step 5

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



Step 6

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 image_mc. See the picture below!



Step 7

Place now the position of the image to be X:0 and Y:0 See the picture below!



Step 8

Create now a new layer above the layer image and name it action.

Step 9

Click now on the first frame of layer action and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

this.onMouseMove = function() {
 constrainedMove(image_mc, 4, 1);
};
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {
 var mousePercent:Number = _xmouse/Stage.width;
 var mSpeed:Number;
 if (dir == 1) {
  mSpeed = 1-mousePercent;
 } else {
  mSpeed = mousePercent;
 }
 target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
 target.onEnterFrame = function() {
  if (target._x == target.destX) {
   delete target.onEnterFrame;
  } else if (target._x>target.destX) {
   target._x -= Math.ceil((target._x-target.destX)*(speed/80));
  } else if (target._x   target._x += Math.ceil((target.destX-target._x)*(speed/80));
  }
 };
}

That's it!

Test your Movie and enjoy!

Download source file (.fla)

discuss this topic to forum