Basics of Animation with Physics

March 16, 2008 – 12:28 am

Basically things that move attract attention of the human eye. For example children when they first time see an object which they have never seen before awakens their attention, and even a greater deal if the object is moving. Maybe that doesn’t hold true for all but most of them that I see. This system works same for grown-up people too, for example when you enter a website which is decorated with nice animations, you pay attention to how things are moving. Actually not anyone is always aware of this action but as the brain very much got used to do so, those brain activities happen automatically and constantly. It’s like walking, you don’t need to think of how you have to move your foot one after another, you just walk because you all ready know how to walk.

Well, can we, therefore, program everything the way we know it from real life without any problems? What do you need to make move an object in Flash? How do we rotate an object, where is the point to begin and to stop a movement? What are the boundaries/limits? How do we set up the speed?

As there is no limit of question we can ask, there are consequently also many ways to give answer to those questions. In this article I will explain the basics of animation by drawing back to theoretical physics.

Motion means continuous change in the location of an object against time, which is applied force. Animation is motion. For an animation there must be a certain motion. What I mean is when an object changes its location over time than it becomes an animation.

First law of Newton is about inertia, which means; when there is no force to act on a single particle or an object, the object doesn’t move or the velocity of the object doesn’t change. It stays in the moment of inertia.

Lets make this a little bit more clear; think of a ball which is not moving and lying on a straight floor. If you don’t apply force to the ball, ball will stay without action, it will not move. Soon when force is applied to the ball, it will start to move to the opposite direction from the point that the force appealed from.

Football Ex

The total force that is applied on the ball, gravity, wind, etc. These factors will effect how long that ball will keep moving.

Well, how do we realize this action in Flash, I mean how can we make the ball move in Flash. There are two ways of doing that. One way is to use frames. We can put the ball on the stage and than each frame will have different coordinates of the ball. When we export the swf file each frame will work turn by turn and we will see the ball move. This is an animation.  

Frame Example

Our first way is good, but has a lot of disadvantages, like when you make an mistake it is hard to go back, you have to start over again, do same things over and over again, delete everything on stage and start from again from the scratch. Second way is to use codes. When you make your animation with codes you don’t have a problem like going back and delete thing, you can change easily. Lots of people think it is hard to make animation with codes, I think its more fun and much easier. Ok, lets take a look at how we can move a ball in Flash. When you click the button on the example below you will see that the ball is moving.

Codes;

  1. //Adding event listener to button
  2. start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
  3. //When we click to button, function at below will add the event listener for ENTER_FRAME event
  4. function startBall(e:MouseEvent):void {
  5.  //Reason the we re-position ball_mc is we want to start over when we click the button ball_mc.x = 15;
  6.  //We are setting speed to 20 again
  7.  speed =20;
  8.  this.addEventListener(Event.ENTER_FRAME, moveTheBall);
  9. }
  10. //We set our speed
  11. var speed:Number =20;
  12. //Function that help to move to ball
  13. function moveTheBall(e:Event):void {
  14. //We set coordibnate of ball
  15. ball_mc.x += speed;
  16.  //If value of x coordinate passes 450 we remove to event listener, and our animation stop.
  17.  if (ball_mc.x>450) {
  18.   this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  1. }
  2. }

If we look again how that animation working; every time frame refresh it event listener call for ENTER_FRAME event, and with an event moveTheBall function is working. In function we add speed value to do ball_mc which is 20. When value of x coordinate pass 450 than we remove the event listener, and this stops animation.

The direction of ball in that example is x coordinate, but this is also could be y coordinate. If you remember I said motion is to the other direction of the where force comes. In flash this is not really working like that, there is not real force in flash. What we call speed its just a numeric value which is we add x coordinate of ball_mc. So we can say actually there is no speed. What we doing was just chancing x coordinate of ball_mc. And whwn we do that over and over again it becomes an Animation. Off course this is not mean we can not make it real speed, gravity or friction. In flash you can use real physic rules. Let’s make it easy one. The example I give above you can see example for a speed. A ball which is moving with fixed speed. Now think of real life, when you hit a ball, ball start to move fast, than get slow than stops. So, how we can do same movement in flash? If you think carefully you can notice that when ball slow downs also speed of ball slow downs. Than we can say in flash all we have to do is decrease to speed. When you click the button on the example at below you will see that ball its moving with normal speed first and than slow downs.

Codes;

  1. //Adding event listener to button
  2. start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
  3. //When we click to button, function at below will add the event listener for ENTER_FRAME event
  4. function startBall(e:MouseEvent):void {
  5.  //Reason the we re-position ball_mc is we want to start over when we click the button
  6.  ball_mc.x = 15;
  7.  //We are setting speed to 20 again
  8.  speed =20;
  9.  this.addEventListener(Event.ENTER_FRAME, moveTheBall);
  10. }
  11. //We set our speed
  12. var speed:Number =20;
  13. //We are setting the acceleration for slowing down
  14. var ax:Number =0.4;
  15. //Function that help to move to ball
  16. function moveTheBall(e:Event):void {
  17.  //We reduse to speed by ax variable
  18.  speed -= ax;
  19.  //We set coordinate of ball
  20.  ball_mc.x += speed;
  21.  //If value of x coordinate passes 450 we remove to event listener, and our animation stop.
  22.  if (ball_mc.x>450) {
  23.   this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  24. }
  25. }

Ok, so far so good, until now we don’t have any problems, so what about gravity? We never think about gravity yet. When a ball is in the air, like 1 meter above the ground, after you release the ball, it will fall to the ground, like with downwards  direction. The reason for that is gravity. Probably you all know the famous story about gravity; Isaac Newton was sitting under an apple tree, and suddenly an apple fell on his head and “Bingo”, gravity start to get shape in his head. Well, but what is gravity? Shortly gravity is the force that pulls everything to the ground or center of the world. Now lets take a look at how we can use gravity for our purposes in flash

Let’s start from the scratch. We need ground for letting gravity to function. First we should set  a stage with the seize 550×400. In this dimension we choose our ground to be 350 on the axis of ordinates (y-coordinate). Ok so how do you think we can make our gravity? Remember what we did in last our example, we were giving speed to the ball, and than we reduced the acceleration so we could see the normal reaction of a ball, and when our ball come to point to we want we stop the animation. Our ground is at y-coordinate of 350. That means when our ball reaches 350 on the axis of ardinates it will hit the ground and jump back. That means the speed of the ball will turn negative. This is important. When the ball goes down our speed is positive, but as soon as it hits the ground speed gets negative value and goes back to the air. Off course, we still have acceleration which works for both directions, up and down. When you click the button on the example below you will see how it’s working..

Codes;

  1. start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
  2. function startBall(e:MouseEvent):void {
  3.  //We are setting speed to 3 again
  4.  speed = 3;
  5.  //Reason the we re-position ball_mc is we want to start over when we click the button
  6.  ball_mc.y=40;
  7.  // We are setting jump time to 0 again
  8.  i =0;
  9.  this.addEventListener(Event.ENTER_FRAME, moveTheBall);
  10. }
  11. //Our floor Number
  12. var floor:Number = 350;
  13. //Our Acceleration
  14. var ay:Number =0.4;
  15. //Our Speed
  16. var speed:Number = 3;
  17. //bounce Value
  18. var bounce:Number=-0.8;
  19. //for how many time ball jumps
  20. var i:uint = 0;
  1. function moveTheBall(e:Event):void {
  2.  //We add to ax variable to the speed
  3.  speed += ay;
  4.  //We set coordinate of ball
  5.  ball_mc.y += speed;
  6.   //if y coordinate of ball_mc+ height of ball_mc pass is floor value
  7.  //we reverse to speed positive to negatif
  8.  //Or we can say when ball hit the ground we reverse values
  9.  if (ball_mc.y + ball_mc.height > floor) {
  10.   //We make sure ball doesn’t cross floor line.
  11.   ball_mc.y = floor - ball_mc.height ;
  12.   //we sort of reverse to speed negative to positive
  13.   speed *= bounce;
  14.   //we increase the jump number
  15.   i++;
  16.  }
  17.  //When ball jumps 14 times and i variable it’s equal to 14 we remove the event listener
  18.  if (i==14) {
  19.   this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  20.  }
  21. }

That’s all for now, you can make examples like the examples above. In this article my target was explaning the basics. Off course you can add more factors like wind, frictions, etc..

Source Codes
Take Care
Engin!



Leave a Reply


Creative Commons LicenseSome rights of this website has been reserved to Engin Yöyen. Articles on the blog licenced by Creative Commons Attribution-Noncommercial 3.0 Unported