Making a function

Here we create a simple movie with 3 movieclips. 2 of these movie clips will controll the 3rd one.First we will study how can we make this happen with a straight forward step by step coding.Then we will move ahead and make a function to make our coding reusable. The whole idea is to learn a function.

scene setup :

1. Make 1 movieclip and name it on stage as "box_mc"
2. Make 2 other movieclips and name them "moveLeft_mc" and "moveRight_mc"
(These clips will act as buttons, they will make our "box_mc" move left and right)
3. Make another layer and name it "actions". Select the first frame on it and open actions panel
4. Write down the following script

moveLeft_mc.onRelease=function(){
box_mc._x=box_mc._x-1;
}
moveRight_mc.onRelease=function(){
box_mc._x=box_mc._x+1;
}

explanation : "_x" is a property of a movieclip.As one clicks one of the controlls, we are making the "_x" property of the "box_mc" less or more.This "_x" property is actually a number representing the co-ordinate of "box_mc".Now if the co-ordinate is increased by one then our box_mc will move 1 co-ordinate on stage and towards right. Similarly if we decrease 1 from our box_mc's x co-ordinate then it will look as if moving towards left.

Thats pretty simple, yeah.But now if we want to increase or decrease the x-property of the clip by 2 then what we have to do is, change the whole code as below

moveLeft_mc.onRelease=function(){
box_mc._x=box_mc._x-2;
}
moveRight_mc.onRelease=function(){
box_mc._x=box_mc._x+2;
}

Test to see this is hapening.Ok, well done.Now lets right the same thing in a more compact manner

moveLeft_mc.onRelease=function(){
box_mc._x-=2;
}
moveRight_mc.onRelease=function(){
box_mc._x+=2;
}

The point here is
box_mc._x=box_mc._x+2;
is same as
box_mc._x+=2;

Fine.Now if we want to increase or decrease the value by 4 then we have to go and change each of the script.This is working but a lot of work.Instead we will write a function which will take care of all these.So we just have to change it once and at one place only.

function moveBox(n){
box_mc._x+=n
}

The function here actually takes one parameter "n" and adds that one to the value of x co-ordinate of the box_mc. So lets write the function in a well formatted manner

function moveBox(n:Number):Void{
box_mc._x+=n
}

That means, function "moveBox" takes a number "n" and returns nothing (Void). you can wrtie whatever name for the function name.I have written it "moveBox", because I know that my function will be moving a box.You can write it as "myFunction" too.

Now our final script will look as

function moveBox(n:Number):Void{
box_mc._x+=n
}

moveLeft_mc.onRelease=function(){
//box_mc._x=box_mc._x-1;
moveBox(-1)
}
moveRight_mc.onRelease=function(){
//box_mc._x=box_mc._x+1;
moveBox(+1)
}

Test the movie, this should work fine. Lets remove our commented things and write it again,

function moveBox(n:Number):Void{
box_mc._x+=n;
}
moveLeft_mc.onRelease=function(){
moveBox(-1);
}
moveRight_mc.onRelease=function(){
moveBox(+1);
}

Here we have controll on our side. If we want to know what is the value of x co-ordinate after the value is changed then we just have to go to our function and chnage it as

function moveBox(n:Number):Void{
box_mc._x+=n
trace("x co-ordinate is : "+box_mc._x);
}
moveLeft_mc.onRelease=function(){
moveBox(-1)
}
moveRight_mc.onRelease=function(){
moveBox(+1)
}

Now if we want to make our clip move 2 co-ordinates instead of 1, we will pass 2 as a parameter to the function as

function moveBox(n:Number):Void{
box_mc._x+=n
trace("x co-ordinate is : "+box_mc._x);
}
moveLeft_mc.onRelease=function(){
moveBox(-2)
}
moveRight_mc.onRelease=function(){
moveBox(+2)
}

Similarly if we want our first button will increase the x co-ordinate by 1 nad our second button will increase x- co-ordinate by 4 then we simple pass different values to our function call as

function moveBox(n:Number):Void{
box_mc._x+=n
trace("x co-ordinate is : "+box_mc._x);
}
moveLeft_mc.onRelease=function(){
moveBox(+1)
}
moveRight_mc.onRelease=function(){
moveBox(+4)
}

Make as many experiments as you can with writting functions.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s