How to create an interactive image pan in flash

For my final project I want to create an interactive space, and part of creating that will be making images pan in flash in order to look around.

To start, you will want to have an image with fairly easy to manage dimensions. For our purposes, I am using an 800×800 pixel image, with a ‘pannable’ masked area of 400×400 pixels. The code snippet in this tutorial works only if your masked area is 1/2 the size of your full image, but this can be fixed by editing the script I will show you later. However, it is important to know the resolution of your image before you begin.

Open flash and create a new ActionScript 3.0 file. First, drag your image into your flash window and then convert it to a movie clip symbol by pressing F9 or right-clicking for the menu drop-down.

Name the clip “bigPic” (without quotation marks). Next, rename the instance of the clip “bigPic” as well by changing the name in the properties menu.  Make sure bigPic is positioned at coordinates (0,0) in the properties tab as well.

Convert this instance to a symbol as well, and call it “theWholeMagicWindow”.

Next, create 2 new layers in the timeline above the original and call the top one AS3, the next one activator, and the layer we started with bigPic. (exact layer names aren’t as important as symbol names, but will help you organize later). Click the rectangle tool and create a 400×400 pixel box on your image with the activator layer selected. Don’t worry about getting the exact proportions right, you can draw any size box and then select the shape and adjust the dimensions manually from the property menu.

Right click the box, and convert it to a movie clip symbol named “activator”. Name the instance of this box “activator”. This box will be where the pan begins, so make sure it is within your image. Now, click on the AS3 layer, select the first frame and open the Actions panel (Windows shortcut F9) or right click to bring up the menu.

and paste in the code provided at the bottom of this tutorial.

From here, you can simply apply the mask and be finished, but if you wanted different dimensions for your activator or image, you’ll have to adjust the actionscript. The key to this is simply knowing the dimensions of your image and your activator. For example, if I wanted my activator to be 200×200 rather than 400×400, I would go into the AS3 layer Actions and change the lines

var boundX:int = bigPic.x + activator.x * 2;
var boundY:int = bigPic.y + activator.y * 2;


var boundX:int = bigPic.x + activator.x * 4;
var boundY:int = bigPic.y + activator.y * 4;

The Y and X dimensions of activator are 1/2 the size of bigPic (800×800) in the example, and when I change the activator window to 200×200, it is 1/4 the size of bigPic. All I did was change the numbers above to reflect the new size of activator in comparison to bigPic. The first line describes the X dimensions and the second describes the Y dimensions. If you would like to use an image that is not perfectly square, all you have to do is make the activator match the aspect ratio of the image.

Once you have your dimensions correct, you can apply the final mask. Create a new layer above bigPic and call it “Mask”. Select the activator layer, copy the activator box (CTRL+C), and then hide and lock the activator layer.

Select the Mask layer and press (CTRL+SHIFT+V) to paste it in the exact same place. Next, simply right click the layer and select Mask.

And you’re done! I hope this helps.

You can download my .fla file, and here is the Code:

// Set variables for numbers we need in our equations
var activatorWidth:int = activator.width;
var activatorHeight:int = activator.height;
var boundX:int = bigPic.x + activator.x * 2;
var boundY:int = bigPic.y + activator.y * 2;
var diffX:int = bigPic.width – activatorWidth;
var diffY:int = bigPic.height – activatorHeight;
var easeSpeed:int = 7;

// Function that activates the movement (MOUSE_OVER activator)
function activate(event:Event):void {
var divX:Number = mouseX / activatorWidth;
var divY:Number = mouseY / activatorHeight;
var moveX:Number = divX * diffX;
var moveY:Number = divY * diffY;
bigPic.x += (boundX – moveX – bigPic.x) / easeSpeed;
bigPic.y += (boundY – moveY – bigPic.y) / easeSpeed;
// Listeners on the activator to Add / Remove Enter Frame Events
activator.addEventListener(MouseEvent.MOUSE_OVER, addEnterFrameEvent);
activator.addEventListener(MouseEvent.MOUSE_OUT, removeEnterFrameEvent);
// Add Enter Frame Event Function
function addEnterFrameEvent (event:MouseEvent):void {
addEventListener(Event.ENTER_FRAME, activate);
// Remove Enter Frame Event Function
function removeEnterFrameEvent (event:MouseEvent):void {
removeEventListener(Event.ENTER_FRAME, activate);

~ by fingoscrip on December 7, 2011.

%d bloggers like this: