Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Animation

Learn About Linear Kinematics

Read Time:8 minsLanguages:

Picturing animation in terms of vectors is intuitive, but understanding vector mathematics is a pain. In this tutorial, I hope to ease that pain and provide a solution to animation problems using a custom written Vector2D class. We will look at some fundamental concepts of linear kinematics in the Eulerian approach: displacement, velocity and acceleration. Then, we'll build a simple application with it.

Final Result Preview

Let's take a look at the final result we will be working towards. Click on the Flash panel below and control the arrowhead by pressing the four directional keys.

Step 1: Vector Quantity

All vector quantities have two components: magnitude and direction.

Image of vector quantity.Image of vector quantity.Image of vector quantity.

Step 2: Change in Vector Quantity

A change in vector quantities refers to one of these cases:

  1. Change in direction
  2. Change in magnitude
  3. Change in both magnitude and direction
Image of vector quantity.Image of vector quantity.Image of vector quantity.

Step 3: Displacement as a Vector Quantity

Displacement, velocity and acceleration are vector quantities. Their definitions are as follows:

  • Displacement - Vector of the shortest path pointing from origin to destination. I define origin as point (0, 0) and destination as the particle's location relative to this point. Basically, it refers to the Cartesian Coordinate system as implemented by Flash.
  • Velocity - Velocity is the change of displacement over time.
  • Acceleration - Acceleration is the change of velocity over time.

The animation below shows displacement as we are going to implement in Flash later.

Step 4: Velocity as a Vector Quantity

Velocity is illustrated by the animation below. Note velocity is constant, which means acceleration is absent in this scenario. If velocity is zero, displacement will remain constant throughout.

Step 5: Acceleration as a Vector Quantity

Acceleration is illustrated by the animation below. Note: kinematics implies constant acceleration. If acceleration changes over time, it falls under the topic of dynamics. Dynamics is the study of forces that cause of acceleration to vary over time. One such force is gravity, and I've written a post on animating that.

Step 6: Start Building a Projectile

Now that you have gotten a brief understanding of linear kinematics quantities and able to related them to vectors, we can start building our Projectile class. We would like the projectile be able to capture all these quantities: displacement, velocity and acceleration - so that it can be manipulated on each frame.

Below is the data we shall record in our Projectile class:

Step 7: Initialize Projectile

Upon initiation of this Projectile class, we shall initialise the mentioned variables and draw its graphical representation.

Step 8: Accessors of Vector Quantities

The following are accessors of our private variables - displace, velo, acc - in the Projectile class.

Step 9: Updaters of Vector Quantities

Upon refreshing every frame, we need to update velocity (using acceleration) and update displacement (using the said velocity). This can be achieved using the following functions. For a thorough explanation on Vector addition, do visit this great post from Daniel Sidhon.

Step 10: Updater for Sprite'S Orientation

We will also need to update the orientation of the Sprite. This can be achieved through the rotation property of Sprite.

I have also implemented a Math2 static class, in which I've written a function to easily convert back and forth from the angle's units of degrees and radians.

Step 11: The Main Class

Now that we have established our Projectile and Math2 class, we can start to code our Main class. We will need a Vector2D class as well although thorough explanation is not included due to the aforementioned article on Vectors by Daniel Sidhon. I assume readers understand the Vector2D class after reading it. However, if clarifications are needed, do prompt me with your queries.

First of all, we need to know private variables of this class.

Step 12: Initializing Main

Upon initialization of Main, function init will be launched. This function will create a new Projectile and set its initial velocity. Then, listeners to events will be assigned.

Step 13: Keyboard Event Listeners

I have defined user control as keypresses of Up, Left, Down and Left arrow keys. Upon pressing and releasing those keys, flag variables of Main (Step 11) will be turned true and false. Based on these flags, the Vector quantities will be manipulated on every frame. Note as well I have divided controls into horizontal and vertical axis manipulators.

Step 14: EnterFrame Event Listeners

Upon refresh of each frame the following code will be executed. It is long, but don't worry; just read on.

Step 15: Update Motion

Updating the motion should be done in the following order:

  1. Define new acceleration according to user keypress.
  2. Using acceleration, update current velocity.
  3. Using current velocity, update current displacement.
  4. Refine displacement to keep object inside boundaries.

I've highlighted the codes for easy identification of these steps.

Step 16: Slowing Down Motion

You may find that there are other functions slotted in between these highlighted codes. What are they? One is to apply another vector to slow down our projectile as the user does not press on any keys. This is applied before we add velocity to our displacement.

Step 17: Stay Inside

The next one is to restrict our projectile to always stay on the stage, otherwise it will fly out of the screen. Again, implementBound is a function I've included in the Math2 static class. Given an upper bound, lower bound and a random value, implementBound will return a value that is within the boundaries.

After applying this constraints onto our displacement (and only after that), we update the Sprite's position with this displacment value.

Step 18: Orient Sprite

Before we leave this sprite as it is, we should orient it so that it always points in the position it's heading using function orient.

Step 19: Get Set and Go!

Now everything is set to go. As you launch this piece by pressing on Ctrl + Enter, you will see an arrow that gradually slows down as it heads diagonally down the screen. Press on the four directional keys to move the arrow about. Don't worry about losing your arrow; it'll stay inside your view.


This article should get you familiar with using vectors to animate motion. Once you have understood kinematics, do proceed to read up on my post on dynamics. Let me know how it goes. Terima Kasih.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.