Flash Components - Tutorials - Arranging a scene using depths & scale

categories

top authors featured authors

see more

newsletter

Subscribe to our newsletter:

Go To

Tutorials list

Posted by : framer on 04/10/2008 - 1033 pageviews: Awaiting 3 votes.

Page 1

This tutorial explains how to use ActionScript to update depths and scales to give the impression that a character can move around scenery using the _y property.

First of all create your graphics and place them where you want them on the scene, giving them individual names. Ensure that the registration point is set to the bottom of the movie clip, this is especially important if your movie clips are different heights.

Next, create a new layer. This is where all the actions will go.

Initial variables

The first actions will hide the mouse cursor and state the initial variables; these will set the increments of the scale and y position.

Mouse.hide();

MinScale = 50;

MaxScale = 100;

ScaleIncrements = (MaxScale-MinScale)/100;

MinPos = 10;

MaxPos = 250;

PosIncrements = (MaxPos-MinPos)/100;

Setting the scene

Then, create an array to store all depth and height information on all the movie clips on the scene. This is a multidimensional array that stores the movie clip name, itâ��s _y position and the current depth.

var DepthArray:Array = new Array();

DepthArray.push({mcname:"Scenery_1", mcposition:Scenery_1._y, mcdepth:Scenery_1.getDepth()});

DepthArray.push({mcname:"Scenery_2", mcposition:Scenery_2._y, mcdepth:Scenery_2.getDepth()});

DepthArray.push({mcname:"Scenery_3", mcposition:Scenery_3._y, mcdepth:Scenery_3.getDepth()});

DepthArray.push({mcname:"Character", mcposition:Character._y, mcdepth:Character.getDepth()});

Next, the array should be sorted based on the y position. The property â��Array.NUMERICâ�� is used to ensure the sort is ordering the array as a number rather than a string.

DepthArray.sortOn(["mcposition"], Array.NUMERIC);

Then the movie clips on the scene should be updated. This uses a for loop which will go through all the items in the array, and update the movie depth according to the order they have been placed into within the array, then scale the movie clips according to their y position so the movie clips that are higher will be smaller. This uses the variables that have been set at the beginning.

for (i=0; i<DepthArray.length; i++) {

// sort initial depths

DepthArray[i].mcdepth = i;

_root[DepthArray[i].mcname].swapDepths(DepthArray[i].mcdepth);

// set inital scales

CurrentPosition = (_root[DepthArray[i].mcname]._y-MinPos);

CurrentPositionPerc = CurrentPosition/PosIncrements;

_root[DepthArray[i].mcname]._xscale = _root[DepthArray[i].mcname]._yscale=MinScale+((CurrentPositionPerc)*ScaleIncrements);

}

Time to get moving

So now a mouse listener is added to allow the scene to be updated you move the character around.

var mouseListener:Object = new Object();

mouseListener.onMouseMove = function() {

The mouse cursor has already been hidden as part of the initial actions, so now the character must be set to follow the x and y positions of the mouse.

_root.Character._x = _root._xmouse;

_root.Character._y = _root._ymouse;

The array must be updated to set the character at the right depth, and then the scene is updated according to this.

for (i=0; i<DepthArray.length; i++) {

DepthArray[i].mcposition = _root[DepthArray[i].mcname]._y;

}

DepthArray.sortOn(["mcposition"], Array.NUMERIC);

for (i=0; i<DepthArray.length; i++) {

DepthArray[i].mcdepth = i;

_root[DepthArray[i].mcname].swapDepths(DepthArray[i].mcdepth);

}

Now the correct scale for the character is set.

CurrentPosition = (_root.Character._y-MinPos);

CurrentPositionPerc = CurrentPosition/PosIncrements;

_root.Character._xscale = _root.Character._yscale=MinScale+((CurrentPositionPerc)*ScaleIncrements);

};