Blog

Animated Flamingo Part 2.

Posted by On Nov 05, 2012 In ActionScript 3.0, Making Of, Mathematics

This post is a follow up to part one.

Step 3. Getting the proportions right.

The main focus of this step was to give the flamingo the right proportions. The proportions are based on the measurements from image 1. The measured parts are made relative to each other. bodyHeight is the only variable that has to be filled in. The calculations of the other variables (legLength,legWidth,feetLength,neckLength etc.) are based on the bodyHeight value. All body parts (Head, Body, Segment) come together in the main class Flamingo.

Image 1. Calculating the proportions

Image 2. Outcome of Step 3.


Step 4. Making it move

The result of this step is a walking flamingo. First the variabels vx = 0, vy = 0, gravity = .2 are added to the Flamingo class. The function doVelocity will be run at every frame.

The function checkFloor() calculates if the bottom position of a Segment (footA or footB in this case) is bigger than the stage height. When this is the case the position of the legs and feet will be set back to dy.

Added to Segment are the variables vx (x velocity) and vy (y velocity). The basics of the function feet() are the same as the function walk() (as explained in step one). At the beginning of checkFloor() the position of a Segment is saved in feetPoint. After the rotation calculations are made, the movement speed is calculated in segB.vx = currentPosition – oldPosition.

The movement speed, which is calculated in feet(), is used in checkFloor() to set the velocity of the flamingo (vx -= seg.vx & vy -= seg.vy). In doVelocity() these variables are used to actually move the flamingo. The function setPosition() updates all the components; it keeps the flamingo together when it moves

When the flamingo walks out of the stage the position is reset to the other side of the stage.

install flash to see the outcome from step 4

Step 5. the color and the shape

All the components of the flamingo get a fill instead of a stroke. The shape of the head is also updated.

Image 3. Outcome Step 5.

Step 6. Rotating the Head

In this step I’ve been busy rotating the head to the position of the mouse. This is achieved with the following code.

If degrees is between 60 and 300 the head of the flamingo will look at the mouse. If degrees is smaller than 300 or bigger than 60 the head will rotate to its default value; which is 0. It is important to set the pivot point of the head (0,0) to the position at which the head rotates. In my case this meant that the Head class must be rewritten because the pivot point was around the beak. After the rewrite the head rotates around the eye.

Step 7. Secondary Animations

In the last step I added some secondary animations. This is done to make the animation of the flamingo less static. If the flamingo takes a step the neck jiggles a bit. This is done with the following piece of code, which  is executed every frame.

I’ve divided the feet in two parts (footA1, footA2) to make them more claw like. The movement of the feet are handled by two functions feet() and secondaryFeet(). These functions are both based on feet()(explained in step 4.) and walk() (step 1.). The function secondaryFeet() handles the actual walking (as explained in step 4).

Also included is some extra interactivity, there are sliders and color pickers which are with the library minimcomps.

Final Product

This concludes the making off the Animated Flamingo. The final product can be viewed here. Please leave a comment if you have any questions.

No comments

There are no comments on this post yet.