Most Popular

• Create a sliding content in flash
• Flash Flip Letter Effect
• Create a Show/Hide Sliding Panel using Flex
• 3D rotation with Flash CS4
• Capture images from the webcam
• Sliding menu with actionscript 3 and TweenLite
• Create a 360° panorama viewer with AS3
• Create an Auto-Scrolling Vertical Content
• Eyes follow the cursor
• Circular rotation with as3

Displaying Pictures According to the Cursor Position

In this easy tut, learn how to browse pictures contained in a movie clip according to the cursor position. The user will watch the human evolution by simply moving his mouse cursor horizontally.

1. Create a new flash file (Actionscript 3.0) and save it as src.fla.

2. Create a movie clip and put each one of your picture in a new frame. Set its registration point to the top left and give it an instance name of “pic_mc”.

3. Create an “actions” layer and with its first frame selected open the actions panel.
First add a stop() to the “pic_mc” movie clip to prevent if from looping through its frames and add ROLL_OVER and ROLL_OUT event listeners.

pic_mc.stop();
pic_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
pic_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);

4. In the overHandler() function, we add a MOUSE_MOVE event listener that will call the changeFrame() function when the event will be triggered. In the changeFrame() function, we set the current frame of “pic_mc” according to the mouse position on the movie clip.

function overHandler(e:Event):void {
	pic_mc.addEventListener(MouseEvent.MOUSE_MOVE,changeFrame);
}

function changeFrame(e:Event):void {
	var frame : uint = Math.ceil(pic_mc.totalFrames * pic_mc.mouseX / pic_mc.width);
	pic_mc.gotoAndStop(frame);
}

5. In the outHandler() function, we simply remove the MOUSE_MOVE listener.

function outHandler(e:Event):void {
	pic_mc.removeEventListener(MouseEvent.MOUSE_MOVE, changeFrame);
}

6. Here’s the final code, test your movie to see it in action.

pic_mc.stop();
pic_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
pic_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);

function overHandler(e:Event):void {
	pic_mc.addEventListener(MouseEvent.MOUSE_MOVE,changeFrame);
}

function changeFrame(e:Event):void {
	var frame : uint = Math.ceil(pic_mc.totalFrames * pic_mc.mouseX / pic_mc.width);
	pic_mc.gotoAndStop(frame);
}

function outHandler(e:Event):void {
	pic_mc.removeEventListener(MouseEvent.MOUSE_MOVE, changeFrame);
}