# Animated Flamingo Part 2.

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*.

1 2 3 4 5 6 7 8 9 10 |
var bodyHeight:Number = 49; var legLength:Number = bodyHeight* 1.64; var legWidth:Number = legLength * 0.0625; var feetLength:Number = legLength * 0.3125; var feetWidth:Number = feetLength * 0.32; var neckSize:Number = 19; // number of neckbones var neckLength:Number = (bodyHeight * 2.755)/neckSize; var neckWidth:Number = (neckLength * neckSize) * 0.0814; var neckSmall:Number = 0.157; var headSize:Number = bodyHeight*0.25; |

### 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.

1 2 3 4 5 6 7 |
function doVelocity():void{ vy += gravity; legA1.x += vx; legB1.x += vx; legA1.y += vy; legB1.y += vy; } |

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*.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function checkFloor(seg:Segment):void { var yMax:Number = seg.getBounds(this).bottom; if(yMax > stage.stageHeight){ var dy:Number = yMax - stage.stageHeight; legA1.y -= dy; legB1.y -= dy; legA2.y -= dy; legB2.y -= dy; footA1.y -= dy; footB1.y -= dy; vx -= seg.vx; vy -= seg.vy; } setPosition(); } |

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*.

1 2 3 4 5 6 7 8 9 10 11 |
function feet(segA:Segment, segB:Segment, _cycle:Number):void { var feetPoint:Point = segB.getPin(); var angle:Number = Math.sin(_cycle + -1.2) * 95 + 5; segB.rotation = segA.rotation + angle; segB.x = segA.getPin().x; segB.y = segA.getPin().y; segB.vx = segB.getPin().x - feetPoint.x; // currentPosition - oldPosition segB.vy = segB.getPin().y - feetPoint.y; } |

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.

### 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.

### 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.

1 2 3 4 5 6 7 |
function calcAngle(head:Point,mouse:Point){ dx = mouse.x - head.x; // distance between mouse.x and head.x dy = mouse.y - head.y; radian = Math.atan2(dy,dx);// calculate angle between head and mouse. // convert to degrees + 180 to give us values between 0 and 360. degrees = (radian*180/Math.PI)+180; } |

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.

1 |
neckShape = neckShapeValue + Math.sin(cycle)*8; |

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