Image Pan in Flash (AS3)

Well this week I'm finally moving away from 3D so I can discuss some interesting Flash techniques. As you already may know, you can create almost anything in Flash. It is an authoring tool that can be used to create websites, animations, and interactive applications. At my job, I  work a lot in Flash building educational simulations. In a previous project of mine, I had to develop an interactive simulations of the inside of one of the radar shelters. Before beginning any of the actual coding, I had to decide how I would capture the learners attention. So, I decided to give the learners the option of panning around the picture of shelter.  It would not only look interesting, but it would also simulate a person actually going inside the shelter and looking around. Below is a brief example of what the end product is:



Now, I had a few ideas on how I would approach the problem: 1) I could apply a mask over the picture so that a portion of the picture would show at a time, or 2) I could have the image move as the mouse moved; this way the picture would always stay in the main view of the stage. I tried both methods and I would have to say the second method works the best. The first method requires more steps, whereas the second method requires a few lines of code.

I was inspired by this code that I found in the actionscript forum. However, this particular post only focused on as2; my code needed to be in as3. So I took the basis of the code and I changed it around so that it will work for my project. You're probably wondering how to actually set everything up in Flash. The following paragraphs list the steps that I took to reach my end result. Keep in mind, this isn't the best way of achieving this, but it is one way:


Step 1: Import a picture (or create a vector graphic) that is larger than your stage size. For instance, my image is 800x1066 and my stage size is 480x800.

Step 2: Convert your image into a MovieClip and name your MovieClip in the properties panel. For my project, I named it MovieClipName, but you can name it whatever you want.

Step 3: Align you picture to the top left of your stage. Use the Align tab for precision.

Step 4: On a new layer, copy and paste the following in actions panel:

var myTimer:Timer = new Timer(100); // 1 second

//Add the timer event
myTimer.addEventListener(TimerEvent.TIMER, CheckMouse); 
function CheckMouse(event:TimerEvent):void{

//Specify your MCs X and Y position as the mouse moves
MovieClipName.x = (stage.mouseX / stage.stageWidth) * ( MovieClipName.width - stage.stageWidth) * -1;
MovieClipName.y = (stage.mouseY / stage.stageHeight) * ( MovieClipName.height - stage.stageHeight) * -1;
    }

//Starts timer
myTimer.start();

Step 5: Publish your document (CTRL+enter)


You should now have a panning image (it takes a few minutes to load). Be creative, you can do quite a lot with this technique.