Home » ActionScript 3.0, Design

Proximity effect for Icons/Images

25 November 2009 4 Comments
Share on Facebook
This is a kind of effect long back I have seen on a website and recreated for my portfolio site. But unfortunately the harddisk got crashed and lost the files. Today I have seen the same in theflashblog website and recreated the same with minimal code for the designers use.
I made the code so simple to make this useful for beginners also.
Menu can be use to display Images, Works in portfolio sites.

This is a kind of effect that long back I have seen on a website and recreated for my portfolio site. But unfortunately the harddisk of mine got crashed and lost all the  files. Today I have seen the same in theflashblog website and recreated the same with minimal code for the designers to make use of it.

Code is simple that even beginners can use in their project.

Menu can be used to display Images, Works in portfolio sites.

The source flash file is attached at the end of the tutorial.

Code Explanation

Importing the necessary tarnsition classes

import fl.transitions.*;
import fl.transitions.easing.*;

Storing the initial X,Y position of the MenuItem, which we use later in the code to reset the button.

var xx:Number = menuItem.x;
var yy:Number = menuItem.y;

Registering the MouseMove and RollOut Event

btn.addEventListener( MouseEvent.MOUSE_MOVE, handleMouseMove);
btn.addEventListener( MouseEvent.ROLL_OUT, handleRollOut);

Storing the current X,Y position of the MenuItem and Animating to the Mouse position

function handleMouseMove(e:MouseEvent):void
{
	var tempX:Number = menuItem.x;
	var tempY:Number = menuItem.y;
	var tweenX:Tween = new Tween(menuItem, 'x', Elastic.easeOut, tempX, menuItem.parent.mouseX,.2,true);
	var tweenY:Tween = new Tween(menuItem, 'y', Elastic.easeOut, tempY, menuItem.parent.mouseY,.2,true);
	//updateAfterEvent is to refresh screen
	e.updateAfterEvent()
}

Storing the current X,Y position of the MenuItem and Animating to the initial position

function handleRollOut(e:MouseEvent):void
{
	var tempX:Number = menuItem.x;
	var tempY:Number = menuItem.y;
	var tweenX:Tween = new Tween(menuItem, 'x', Back.easeOut, tempX, xx,.4,true);
	var tweenY:Tween = new Tween(menuItem, 'y', Back.easeOut, tempY,yy,.4,true);
}

Example of code:

Full Action script code for proximity Menu:

import fl.transitions.*;
import fl.transitions.easing.*;

var xx:Number = menuItem.x;
var yy:Number = menuItem.y;

btn.addEventListener( MouseEvent.MOUSE_MOVE, handleMouseMove);
btn.addEventListener( MouseEvent.ROLL_OUT, handleRollOut);

function handleMouseMove(e:MouseEvent):void
{
	var tempX:Number = menuItem.x;
	var tempY:Number = menuItem.y;
	var tweenX:Tween = new Tween(menuItem, 'x', Elastic.easeOut, tempX, menuItem.parent.mouseX,.2,true);
	var tweenY:Tween = new Tween(menuItem, 'y', Elastic.easeOut, tempY, menuItem.parent.mouseY,.2,true);
	e.updateAfterEvent()
}
function handleRollOut(e:MouseEvent):void
{
	var tempX:Number = menuItem.x;
	var tempY:Number = menuItem.y;
	var tweenX:Tween = new Tween(menuItem, 'x', Back.easeOut, tempX, xx,.4,true);
	var tweenY:Tween = new Tween(menuItem, 'y', Back.easeOut, tempY,yy,.4,true);
}

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • http://www.designscripting.com/ admin

    Sure Pal…

  • pal

    This is a nice effect, but please make a simple tutorial with step by step instructions
    i am waiting for it
    thanks.

  • Dili

    I like it. but how do i make the red box at least expend the minute i rollover it or change the hard red to purple on mouse rollover?

    Appreciate your guidance

  • http://www.designscripting.com/ admin

    Hi Dilli,

    Please find the source files at the end of the tutorial where you can change the color using Flash document..

    -sara