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.
Image 1. Calculating the proportions
Image 2. Outcome of Step 3.
|
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.
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.
|
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