Custom Render Handler

You can create a custom render handler in order to add effects to the way in which items appear. The following code examples assume that your 3DMenu has an instance name of menu.

AS2 Examples - for 3DMenu-AS2

var easingSpeed:Number=10;

function render(mc:MovieClip,info:Object){

//position and scale
mc._x+=(info.x-mc._x)/easingSpeed;
mc._y+=(info.y-mc._y)/easingSpeed;
mc._xscale=mc._yscale=info.scale;

//alpha
mc._alpha=info.depthScale2*100;

}

menu.setRenderHandler(render,this);

The info object contains:

x : The x destination of the movie clip.
y : The y destination of movie clip.
depth : The z position of the item.
scale : The scale of movie clip
depthScale : The value of the z position divided by the largest z position. From range 0 to 1. It has a value of 1 when the item is at the largest z position.
depthScale2 : The value of the largest z position divided by the z position of the item. From range of 0 to 1. It has a value of 0 when the item at the largest z position.

You can modify this function to suit your needs. The following example shows how to adapt this function to create a spring effect:

//intialize variables
var spring=0.15;
var friction=0.9;
var vx=0;
var vy=0;
var vs=0;

// spring effect render function
function springEffect(mc:MovieClip,info:Object){

var ax:Number=(info.x-mc._x)*spring;
var ay:Number=(info.y-mc._y)*spring;
var as:Number=(info.scale-mc._xscale)*spring;

vx+=ax;
vy+=ay;
vs+=as;

vx*=friction;
vy*=friction;
vs*=friction;

mc._x+=vx;
mc._y+=vy;
mc._xscale=mc._yscale+=vs;

mc._alpha=info.depthScale2*100;

}

//set render function to menu
menu.setRenderHandler(springEffect,this);

AS3 Example - for 3DMenu-AS3

Import flash.filter.BlurFilter;

var easing:Number=5;
var filter:BlurFilter=new BlurFilter();
Function render(mc:Sprite,info:Object):void {

//position and scale
mc.x+=(info.x-_mc.x)/easing;
mc.y+=(info.y-mc.y)/easing;
mc.scaleX=mc.scaleY=info.scale;

//alpha and blur
mc.alpha=info.depthScale2;
filter.blurX=filter.blurY=info.depthScale*blur;
mc.filters=[filter];

}

menu.renderHandler=render;

The render function contains two parameters, the first is the movie clip of the item and the second is an object that contains the information for the renderer to use.

The info object contains:

x : The x destination of movie clip.
y : The y destination of movie clip.
depth : The z position of item.
scale : The scale of movie clip
depthScale : The number of z position divide by the largest z position. From range 0 to 1. It has the value of 1 when the item is at the largest z position.
depthScale2 : The number of largest z position divide by the z position of item. From range 0 to 1. It has the value of 0 when the item is at the largest z position.

Please see the example above to understand how to use the variables from the info object.

You can modify this function to suit your needs.