Simple AS3 Autopan Script with Tweens, Pan Image on Mouse Movement

I looked everywhere for a simple autopan class using tweens in as3 with no luck, so I made this one. This autopan function is easy to make and uses tweens. It runs pretty smooth as well as it is not based on the frame rate of the flash document. Click "Load Image" then mouse over the image to start the autopan function. You can download the .fla file below. It contains a mask, the picture frame (movie clip), the text button, (movie clip). Very easy to use and it will work dynamically with different sized images. There are no stupid copyrights on this code. Use it how you wish, when you wish, why you wish. Show it to your friends and take credit for it, I could care less. If you like this code, please leave a comment.


import caurina.transitions.*; //you need to download tweener here
//after you download tweener, you need to add it to your flash file. Under publish settings, click on flash, actionscript 3.0 "settings", then "source path" then the "+" symbol. Add the path to where you saved tweener.
load_mc.buttonMode = true;
load_mc.addEventListener(MouseEvent.CLICK, loadimg);
var loader:Loader = new Loader(); //we are going to pull the image in with a loader and add the loader events. open,progress,complete,error.
// We need to keep the loader variable outside of the "loadimg" function so we can target it later with the autopan function.
function loadimg(e:MouseEvent):void{
	trace("loading image");
	var src:String = "autopan.jpg";  //your image location
	var req:URLRequest = new URLRequest(src); // URL REQ
	loader.contentLoaderInfo.addEventListener(Event.OPEN, onopen);
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, oncomplete);
	loader.load(req); // has to come after COMPLETE
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onprogress);
	loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onerror);
	function onopen(e:Event):void{
	function onprogress(e:ProgressEvent):void{
		var maintotal:Number = e.bytesTotal;
		var mainloaded:Number = e.bytesLoaded;
		var mainpct:Number = Math.floor((mainloaded/maintotal)*100);
		prog_txt.text = Math.floor((mainloaded/maintotal)*100) + "% Loading Image";
	function oncomplete(e:Event):void{
		load_mc.removeEventListener(MouseEvent.CLICK, loadimg); // Remove the click listener
		trace("loaded"); = true; //Makes the image update more smoothly. = true;//Puts the image into the cache.
		picframe_mc.addChild(loader.content); // Add the image as a child to the picframe
		picframe_mc.addEventListener(MouseEvent.MOUSE_MOVE, initiatepan); //Start the pan after the image as fully loaded onto the stage
		prog_txt.text = "Loading Complete, Mouse Over Image";
	function onerror(e:IOErrorEvent):void{ //catch errors if you get your image source wrong
		prog_txt.text = "error";
function initiatepan(e:MouseEvent):void{
	//picframe_mc width = 400
	//picframe_mc height = 300
	var xratio:Number = (loader.contentLoaderInfo.content.width - 400)/(400); //Map the difference of the picframe and the width of the image to the mouseX of the picframe as a ratio.
	var yratio:Number = (loader.contentLoaderInfo.content.height - 300)/(300);
	var xoff:Number = -picframe_mc.mouseX * xratio; //We want the mouseX of the frame, not the stage so it starts at 0
	var yoff:Number = -picframe_mc.mouseY * yratio; //same for the mouseY.
	//setup the conditionals to create the movement with tweens. This automatically sets up our constraints
	if(picframe_mc.mouseX > 0){
	} if (picframe_mc.mouseY > 0){
	e.updateAfterEvent(); // makes event not based on frame rate = smooth :)


Back to Tutorials