Animated Flamingo Part 1.
I dedicated a self-study course to get more experience with mathematical principles, which can be pretty useful when programming. Other goals were to learn animation concepts and to get more experienced with ActionScript 3.0 and object oriented programming. My university gives study points for completing the course successfully. The assignment had two parts:
- Read the book ActionScript 3.0 Animation Making Things Move!
- Make something based on a topic from the book
ActionScript 3.0 Animation Making Things Move!
I would recommend this book to anyone who wants to learn to program animations. It features some great examples and the code snippets that are given are very clear. The concepts that are described are universal to all general purpose programming languages. This makes it a good work of reference even if you aren’t working with ActionScript 3.0.
The Assignment
After reading the book I decided to make somthing based on chapter 13: Forward Kinematics. I immediately knew that I wanted to animate an animal so I begun watching BBC’s Life, which is an excellent show. If you like animals, nature or beautiful cinematography, then I would recommend watching it. When I saw a bit about flamingo’s I was sold and decided that this would be my subject to animate.
The next step was to do additional research on flamingo’s. I’ve found a lot of useful images on the internet which have given me a good insight on how they look.
Image 1. Walking Flamingo’s
Image 2. Greater Flamingo
After the research, development of the animated flamingo could begin. I’ve worked in steps. This was mainly done because of backup reasons and to monitor the process development.
Step 1. Setting up the legs
My first goal was to set up the legs to get a rough animation like that of a flamingo’s legs. I begun by using the example that is given in the book. The example works with a class called Segment to create upper and under legs. The Segment class contains a rounded rectangle with two pivot points (0,0 and segmentWidth,0). The function getPin() returns the coordinates of segmentWidth,0. A leg or an arm can be created when a new Segment is placed at the getPin() coordinates of another Segment. When the first Segment moves/rotates the position of the attached Segment will also change.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Upper leg legA1 = new Segment(150,15); // new Segment(width,height); addChild(legA1); legA1.x = stage.stageWidth/2; legA1.y = stage.stageHeight - 300; // Under leg legA2 = new Segment(150,15); addChild(legA2); legA2.x = legA1.getPin().x; legA2.y = legA1.getPin().y; //Foot footA1 = new Segment(30,15); addChild(footA1); footA1.x = legA2.getPin().x; footA1.y = legA2.getPin().y; |
Image 3. The Result form the Code Snippet Above
The function walk is created to animate the legs. It needs the following values: segA, segB and _cycle (the speed of the movement).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function walk(segA:Segment, segB:Segment, _cycle:Number):void { // Math.sin(_cycle) returns a subsequent value between -1 and 1 // -1 * 22.5 + 66.5 = 44 // 1 * 22.5 + 66.5 = 89 // angle0 returns a subsequent value between 44 and 89; var angle0:Number = Math.sin(_cycle) * 22.5 + 66.5; // offset (-0.5) is used to create a forward step in the under leg. var angle1:Number = Math.sin(_cycle + offset) * 45 - 45; segA.rotation = angle0; segB.rotation = segA.rotation - angle1; // Update segB position to make it relative to segA.getPin() segB.x = segA.getPin().x; segB.y = segA.getPin().y; } |
Walk runs on every frame.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function onEnterFrame(event:Event):void { walk(legA1,legA2,cycle); // cycle + Math.PI creates a offset of half a rotation walk(legB1,legB2,cycle + Math.PI); // The feet function is basically the same as the walk function feet(legA2,footA1,cycle); feet(legB2,footB1,cycle + Math.PI); // cycle is the speed of the animation cycle += 0.1; } |
Outcome of step 1 is a pair of animated legs with paws.
Step 2. Setting up the body
The goal of this step was to set up a rough outline of the body, neck and head.
The Head and the Body classes look a lot like the Segment class. There is something drawn in the classes; a fixed head or body shape that scales according to the size of the flamingo. The classes have a getpin() function to connect the adjacent parts.
The neck
A flamingo’s neck has a nice sine shape; something that can be easily drawn with code. The neck shape is build out of 19 Segments that are connected by their getPin coordinates. The first neck Segment has a fixed position, which is determent by the Body position. The Head coordinates are determent by the last neck Segment position.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
neck[0].x = body.x + body.getNeck().x + neck[0].width/4; neck[0].y = body.y + body.getNeck().y + neck[0].height/4; neck[0].rotation = 185; for(var j:uint=1; j < neckSize; j++) { var neckSin:Number = Math.sin(neckCycle); neck[j].x = neck[j-1].getPin().x; neck[j].y = neck[j-1].getPin().y; neck[j].rotation = (50*neckSin) + 270; neckCycle += 0.3; } |
The outcome of step 2 is a rough shape of the flamingo.
Conclusion Part 1.
This concludes the first part of the making of The Animated Flamingo. Part two explains how the flamingo walks.
No comments