Understanding MovieClip z property of Flash CS4

[Flep]

What 's the first thing that jumps to eyes when you are reading the MovieClip class reference of Flash CS4?

Of course the z property !

With Flash CS3 we saw how to simulate it:

• 3D images viewer


• z-axis simulation with Flash CS3

The big news of Flash CS4 is that we will not go into hard mathematical coding and that certainly hinder us from continuing to create animations that simulate third dimension.

The famous z axis has been implemented in Actionscript version 3.0 of Flash CS4 and it's simple to be used.

This is the first sample tutorial that shows how to use the property z with Flash CS4.

var clips:int=500;
var distance:int=20;
createClips();
function createClips():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2-200;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

var clips:int=500;
var distance:int=20;
createClips();
function createClips():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

var clips:int=500;
var distance:int=20;
createClips();
function createClips():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2-200;
		clip.y=stage.stageHeight/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

var clips:int=500;
var distance:int=20;
createClips();
function createClips():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2+100;
		clip.y=stage.stageHeight/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

var clips:int=500;
var distance:int=20;

createClips();
createClips2();
createClips3();
createClips4();

function createClips():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2-200;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

function createClips2():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

function createClips3():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2-200;
		clip.y=stage.stageHeight/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

function createClips4():void
{
	for(var i:int=0;i < clips;i++)
	{
		var clip:Clip=new Clip();
		
		clip.x=stage.stageWidth/2+100;
		clip.y=stage.stageHeight/2+100;
		clip.z=10000-distance*i;
		
		addChild(clip);
	}
}

The first thing you notice is the behavior of z property.

The more the value is high and more the MovieClip is far from our eyes.

This means that for example a MovieClip with a value of its z property equal to 1000 will be farther than a MovieClip with value -1000.

Also, if you try to set the values of x and y equal to stage.stageWidth / 2 and stage.stageHeight / 2 (so exactly in the center) you will see that 3D effect vanishes.

Moreover, the more the value of the variable "distance" is high and the MovieClips will be separated from each others.

PS: the point of registration of the square MovieClip is a 0,0 .

Make your experiments!

Source file: