Tuesday, 14 August 2012

Image sequence mouse over in AS3

I was recently asked to create a mouse over image sequence where a different image would be shown based on the x mouse position. The images are a collection of 60 time lapse stills. I have used the Loader and URLRequest classes to load the images. When the mouse is moved the respective image is loaded and any images on the stage removed. The images are inside a folder called 'Images' and the image file names look like this: image_0.jpg, image_1.jpg etc. Here is one solution below.

//Declare variables.
var images:Array = new Array();
var len:int = 60;
var STAGE_WIDTH:uint = 437;

//Adds the image locations in the images array.
for(var i:uint = 0; i < len; i++){

//load the first image

//This function loads the images using the Loader class and add
//the complete listener.
function loadImage(imageName:String):void
 var loader:Loader = new Loader();
 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
 loader.load(new URLRequest(imageName));

//This function removes all display objects from the stage and adds the loaded
//image on the stage.
function loaded(e:Event):void
 while(numChildren) removeChildAt(0);

//This adds the mouse move listener on the stage. The function 
//gets a number value between 0 - 59 based on the x position of the 
//mouse, and loads the new image with the loadImage() function.
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

function moveHandler(e:Event):void
 var mValue:uint = uint( e.target.mouseX / (STAGE_WIDTH / len )  );

Currently I have removed the image from the stage and added a new image every time the mouse moves horizontally. If you have large collection of images it may take time to load the images on demand. Another solution would be to load all the images initially and show/hide the images on mouse over. This will prevent any jumpy/jerky images when you move the mouse. The same effect can also be applied to FLV videos. I have used the NetConnection, Netstream and Video classes to play the video.

//Declare variabes.
var STAGE_WIDTH:uint  = 437;
var duration:int; 
var mValue:int;

//Create new NetConnection instance.
var nc:NetConnection = new NetConnection();

//Create a new object to provide a callback function for the onMetaData event.
var nsClient:Object = new Object();
nsClient.onMetaData = onMetaHandler;

//Create a new NetStream instance and pass a reference to the
//NetConnection. The client property specifies the object for 
//the call back methods. The play method sets the location
//of the flv video to be played and the pause method pauses
//the video.s
var ns:NetStream = new NetStream(nc);
ns.client = nsClient;

//Add the Video instance on the stage with the 
//width at 437 pixels and height at 240 pixels and 
//attach it to the the netstream.
var vid:Video = new Video();
vid.width = 437;
vid.height = 240;

//This function gets the duration of the flv video from the
//meta data.
function onMetaHandler(meta:Object):void
 duration = meta.duration;

//This adds the mouse move listener on the stage, the function
//get the respective video time from the horizontal mouse 
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

function moveHandler(e:MouseEvent):void
 mValue = e.target.mouseX / (STAGE_WIDTH / duration ); 


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP