Time based animation instead of FPS based

Lets create a time based animation.
If you think your movie is playing at the speed of your FPS setting, then think twice. FPS setting sets the maximum speed of your movie. We can not say that our movie will play on that speed every time. Because Flash movies are rendered through processor powers, so if our processor is busy doing something else then our movie is bound to get slower if we rely on FPS. But FPS settings are important to set the maximum possible speed of our movie.
Well, then how to animate a certain thing in certain time interval? The trick is "setInterval".this is a method which calls a function at a regualr time interval. Lets put this into practice.
1.Create a movie with 2 layers, one is "Gfx" and the other is "Actions".
2. Make a movieclip and name it myClip (on library) .
3. make 2 instances of "myclip" on stage by dragging the movieclip to stage for 2 times. Now name the 2 instances on stage as

box_1_mc
box_2_mc

4.Fine. Lets write some code to animate them in x axis. For this we will write a function which takes a parameter. Because we are going to call that function and pass the parameter as movieclip.So the code will look like

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}

Whats the function is doing ? Its actually taking a parameter "clip" which is of type "MovieClip". Then the function adds 1 to the clips x-position. we can write this by

clip._x++;

or

clip._x = clip._x+1;

Both are the same thing.

Finally the function calles "updateAfterEvent()" method which updates the stage as soon as the function is called.
If you test movie now, you can see nothing is happening !! Why ?! Because we have just created a function, we have not called it yet. So next we are going to call the "setInterval" method and call our function from that.

5. the syntax for setInterval is

setInterval(functionName,TimeInterval,parametersToPassToTheFunction);

6.To call uour function and pass our movieclips we will write as

setInterval(moveX,100,box_1_mc);

So first we are calling our "moveX" function then saying that this function will be called at every 100milliseconds and the parameter the function should take is "box_1_mc".

The final code will look like

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}
setInterval(moveX,100,box_1_mc);

Now test the movie, you can see your movieclip is animated in x-axis smoothly. similarly if we want to animate the other clip then we just pass the other clip as a parameter and we also want the other clip to move at different speed so we will call our function at different intervals too. Well the finished script will look as

function moveX(clip:MovieClip){
clip._x++;
updateAfterEvent();
}
setInterval(moveX,100,box_1_mc);
setInterval(moveX,50,box_2_mc);

Now test you movie, we can see our sencond box is moving faster than the first one, because we are calling it in every 50 milliseconds, where the move function of first clip is called every 100 milliseconds.

Happy animating.

Creating a custom cursor

Her we are going to create our custom curosr for a movie instead of the default cursor. So basically we are going to play arround with "Mouse" object.

So, lets get started.

1. create a new flash movie.
2. Create a movieclip and name it "myMouse_mc". Remember this is the name of the clip on stage. Actually I use the same name in the library too for less confusion.
3. Now make 1 more layer on the root timeline and name it "Actions" and the defalut layer should be renamed to "Gfx", just organising things.
4. In the actions layer type in the following code.
stop();
_root.onMouseMove = function() {
myMouse_mc._x = _root._xmouse;
myMouse_mc._y = _root._ymouse;
};
5. Now test the movie.You can see our new clip is going with the mouse, whereever my mouse goes.Nice.
6. But the move is not smooth, its bit jerky.So to make it smooth we will add one more line to it as

updateAfterEvent();

7. so the final script will look like

stop();
_root.onMouseMove = function() {
myMouse_mc._x = _root._xmouse;
myMouse_mc._y = _root._ymouse;
updateAfterEvent();
};

Now test the movie. Thistime our custom cursor moves smoothly.

8. Now for the last part. We need to hide our defalut mouse cursor. So add another line in the end as

Mouse.hide();

Now test the movie. Wow, you have created a cutom cursor for your movie. Change the movieclip as your liking, and you have a custom cursor of your choice. May be an animated cursor ! Thats really fun.

So the final script is

stop();
//making my mouse cursor to move with mouse
_root.onMouseMove = function() {
myMouse_mc._x = _root._xmouse;
myMouse_mc._y = _root._ymouse;
//making the move smooth
updateAfterEvent();
};
//finally hiding the original mouse cursor
Mouse.hide();

Happy flashing

Looping “for” more

Have you ever come across a situation, when you need to do the same work all over again ? Well, the same thing holds good for flash too. Sometimes we need certain things to keep happening. In that situation Flash helps us with a nifty method called as "for" loop. there are other loop methods too.But here we will concentrate on "for" loop.
Why it is called as a "loop"? Simply because it does the same thing again and again.
Open a new flash document and type in the following script on the first frame
for(item=0;item<10;item++){
trace("item : "+item);
}
Now test your movie. You will see flash is puting values one after the other 10 times starting at 0. This is because we set a condition in the "loop" as "item<10".
How it works? First of all we say a staritng point for the loop as (item=0), you can take any variable of your choice. Generally it is taken as "i" . Then we define upto what point the loop should continue (item<10). and lastly we provide how our variable will be incremented (item++), that means here our item is increased by 1 each item one loop is done. Lets try the same loop with different parameters and writing in best practices' way

for(var i=0;i<10;i+=2){
trace("i : "+i);
}

First we declare a variable as
var i=0;

Then we set the condition as
i<10;

Then we said how "i" will be incremented as

i+=2
that means "i=i+2" .Lets write that way

for(var i=0;i<10;i=i+2){
trace("i : "+i);
}

But this is little unconventional and long so its generally written the former way.

Our "for loop" till now does nothing but just outputting the value of "i".Now lets write a loop that will call a function.
function myFunct(item:Number):Void{
trace("item : "+item);
}
for(var i=0;i<10;i+=2){
myFunct(i);
}

If you test your flash movie, you will see that it returns the same value as our preveous code.But we are actually sagregating our script and our loop. Here our loop is calling the function "myFunct". If you look at "myFunct" function then you will see that it simply takes one number value and then traces it out. Now in our "for loop" we are providing that function with value "i".
Lets modify our script as
function myFunct(item:Number):Void{
trace("function called");
trace("item : "+item);
}
for(var i=0;i<10;i++){
myFunct(i);
}

See the results in the output panel. Thats pretty expected ones.

Happy looping

“this” is me

Sometimes its necessary to refere to ourselves. Ha ha, right now I have said so "ourselves", "I" . So how a flash movie or movieclip will say so ?? Well the answer is "this" .What ? Yes, the answer is "this".Like the way we say "its my shirt.".In flash's environment it is known as "this".
Open one flash document and type in the following script in the first frame
trace(this);

Now if you test your movie you will see "_level0" in the output window. Well whats that? That is actually the name of the movie. To understand it better, if you have a name as "Joe" adn somewhere you are saying that "I am great." then actually that sentence meant "Joe is great" is not it?

Lets make a movieclip and name it on stage as "myClip".Now modify our script so it is read as

trace(this);
myClip.onRelease=function(){
trace(this);
}

Now if you test your movie it will show the following result in your output window

_level0
_level0.myClip

Thats because it is saying exactly where is our clip.If we are interested in just the name of our clip then our script will look like

trace(this);
myClip.onRelease=function(){
trace(this._name);
}

The results of this will look as

_level0
myClip

Thats how we target a movie or clip from inside itself.

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.

Why a function is necessary?

story of a car:
 One day a man name Joe, started creating a car. Joe was working in a garage for the past 5 years of his life. so this is not a big task for him. He started building up from parts as he knew that one can not build it just as a whole.So he decided to make all the parts first and then will join all the parts to make the car in whole. First he built the Sheats. Next he built GearBox.Next he built Stearing and so on. In the end he got all the parts working separately and perfectly.Now he decided to put all the things together. So he started putting them together, one after the other at their respective places. In the end he got a working car. When he started driving the new build car, suddenly he realized that he had forgot to put brakes in it. Any how he managed to stop the car.Now started building the "Brake tool box".Once done, he put the "Brake tool box" inside the car. Now everything works perfect. But wihoout "Fuel" car does not run. So he put fuel inside the fuel tank and started the car. Now he can run his properly fully built car.
So the moral here is if we got a problem, we must analyse it and break it into pieces.Now try to solve these pieces separately. If you solved all the part problems, the the whole problem will automatically be solved.
Ok, what is that to take with my "Function" ? Functions are like part problems, if you can solves them then whole of your code will be working fine. Generally in a Object Orented Programming, a problem is solved not by a single long code, but by a lot of small code fragments.This also increases possibility of code reuse. If Joe had built his gear box properly, he can fit that into a new bus, he might be creating next time.As far as the functionality of the GearBox is proper, he can fit it on any vehicle. the same thing happens to our functiona too.If we write a function and its working properly, then we can put that function in any other project we might be doing with no change at all.Thats code reuse.
Now, lets think about the Fuel tank.Unless fuel is there in fuel tank, the engine can not produce energy to drive the car. The same is true for some of our function. Functions can take some value (fuel) and return some value (energy) too.
A nicely written "function" can be put into any project with a very little chnage in the original code or sometimes without even changing the original project code. Suppose Joe wanted to make his car air-conditioned, then he would go ahead and built an air-conditioner or buy one and put it into his car. Thats the way a new function is added to an existing program.
Thats a general idea of "Function".

Function

Sometiems it is required that a bunch of code should be rewritten. In other words, we want samething to happen at different times and different situations. For that we write up the same code again. If we look at our example lets stop();, we can see that

first_btn.onRelease =function():Void{

_root.holder_mc.loadMovie("one.swf");

}

the above code is repeated almost in all the buttons. Though the value inside loadMovie(""), changes. Similar situationscan come almost anytim, when we start to write actionscript. For all these situations, actionscript provides a handy tool called "Function". Function is nothing but a bunch of code grouped together. Lets try an example. Open a new flash document, created 2 layers, and name them

actions—————-

Graphics————–

In graphics layer create a movieclip and name it "myClip_mc" and make another clip with name "move_mc" Now comeup to the actions layer.Select the first frame and open actions pannel. Type in the following script

move_mc.onRelease=function(){

trace(myClip_mc._x);

}

Now test your movie, you will see that once you click "move_mc" you get x co-ordinate of "myClip_mc" on the output panel. Do not confuse with the "function" written here. For the time being you can assume that this is how a script is written, if it has to be written in a frame. Now we will add some more code to it like below;

move_mc.onRelease=function(){

trace(myClip_mc._x);

trace(myClip_mc._y);

}

this time, if you test your movie you will see both the values of x, and y are displayed in output pannel. lets add something more inour script

move_mc.onRelease=function(){

trace(myClip_mc._x);

trace(myClip_mc._y);

myClip_mc._x=myClip_mc._x+5

}

If wetest our movie it is outputting the x,y values and making our clip move in positive x direction. At this movement, lets create another clip and name it "another_mc". We want the same code to be placed for another clip too.So the code will be like

move_mc.onRelease=function(){

trace(myClip_mc._x);

trace(myClip_mc._y);

myClip_mc._x=myClip_mc._x+5

}

another_mc.onRelease=function(){

trace(myClip_mc._x);

trace(myClip_mc._y);

myClip_mc._x=myClip_mc._x+5

}

Its time to write a function. OUr code is repeating itself, so lets write a function for it. Our new code will be

function myFunction() {

trace(myClip_mc._x);

trace(myClip_mc._y);

myClip_mc._x = myClip_mc._x+5;

}

move_mc.onRelease = function() {

myFunction();

};

another_mc.onRelease = function() {

myFunction();

};

See, I have moved all the code from both the buttons to one place, thats called a function. Now instead of all the codes inside all the buttons, we simply call the function from anywhere we want the same code.If we test our movie, we can see the same thing is still happening. Writing a function is simple, we start up with the key word "function" followed by the name of the function. In our case we name it "myFunction".So in a bare form a function will look like

function yourFunction(){

//your code

}

now from anywhere in your script if you call your function by "yourCode", all the codes inside your function will be executed. A function is called by the following syntax

yourFunction();

Function name should be followed by "()".that to tell flash that this is a function. These braces are also a lot to do with our function. We will see there use in coming examples.But keep in mind that we need to call a function with its name follwed by ().

function gotoAndTest(){

trace("try your own functions&quot

}

History must be known

Hi,

This is very interesting to know how Flash has evolved out in time. Have a look at History of Flash

You must know the history to build future.

Output panel

Lets open Flash IDE(integrated development environment) and create a new file.Now go to "window" menu, right on top menu bar.If you scroll down, you can see a lot of things, but all of them are related to the flash authoring environment.Basically all the submenus here are to open or close a panel/toolbar in our flash environment.Now if we go down and click "Output", flash will open up a panel named "Output". For a newbe as it happened to me too, the "Output" panel seems to be nothing but confusion. For what can anybody use that?!! Well, seems to be a valid question from a new commer to actionscript.
This panel is most important of all the panels.What ? ! Yes, you heard it right. Humen are prone to make mistakes and this panel comes in handy when we are trying to look for errors.We will see that later, but keep in mind that you should know how this pannel works?
"Output" panel is just a message panel, you can show your messages here or if you run into a problematic state Flash automatically displays the error message in this panel. the method to send messages to this panel is "trace()". We will use this method to send messages to this pannel at anytime we want.
Now in a blank flash document, select the first frame and open actions panel, type in the follwing script

trace("Hello world");

Now, test your movie. You can see "Output" panel has come up displaying your message

HelloWorld

On our examples we will use this panel extensively.
So keep outputting

Where can I find your home?

"Addressing in Flash" is known as "Targetting". The way we say joe's house address is like below

joe,street no 16,city Mycity,myCoutry

But how can I address my movieclips in flash? Well targeting in flash is done by dot (.) notation. Suppose we want to target a movieclip lying on stage, then we say "_root.myClip", where "myClip" is the name of movieclip on stage.Similarly a movieclip inside a movieclip is targetted by "_root.myClip.insideClip", where "myClip" is on stage and "insideClip" is placed inside "myClip".Ohh, ok then what's "_root" ? "_root" is the main time line of flash. Whe we publish our "fla" file it becomes "swf" file. Now we can say to target our base "swf" file we write "_root".This "_root" is the holder of all other things inside the movie. To better understand the situation, if we say "Earth" contains everything from trees, plants, water to humen, then we can target "Earth" as "_root" and all other things with a dot(.) .Say we want to target "water" we will say

Earth.water

similarly in flash environment we would say

_root.myClip

 Now, lets see the full address of your home

Earth.MyCountry.MyState.MyTown.MyStreet.MyHome

So, if there is a movieclip inside another movieclip, which is inside another movieclip (called nested movieclips), then we target them as

_root.firstClip.insideClip.myClip

As to find somebody's place you must know the complete address of his/her house, to do something wiht a particular clip flash must know the complete "target path" to it.