Cochesaurus Playground

Dessins, peintures, infographies, animation et pensées

08 septembre 2008

The Animated Forest

Hello, I hope that you - whom are reading this - are ok. May God take care of the men and women of good will.

Well let me tell you that I added a cool splash banner for this my blog and although some time ago, I was thinking in doing something different (and more complicated), but I think this banner is ok.

Like some people know, I had some vacation and although it was only one week, It was ok for some sleep and rest. I needed vacation very badly. One of the coolest things that I did in this vacation, was reading the Anne Frank's diary, I enjoyed reading the diary very much. And now I'm not only would like to travel to France and Spain, but also I would like to travel to the Netherlands, to the Anne Frank's museum, that would be very cool.

Ok, enough for the introduction, let's begin!

I did this animation, part of a whole project that I was collaborating. The project's objective was teaching Spanish (language and literature) to some high school kids, using Moodle for giving the course. In the first stage of the project we had some meetings with the teachers and they gave to us all the materials, classes and texts that we could require. Then we used that stuff to make the classes. One of the classes assigned to me was "Argumentation" and they also give to me a short history to illustrate better the topic. The animation showing the short history follows:

I would  like at that time, I would had more time to do the animation, but the overall result was ok for me. Let me share some tips about this animation with you.

Character design

Each character is made using many layers. Each layer usually haves a graphic symbol. We usually create a graphic symbol for every "part" of the character's body. For example a graphic symbol for the shoe, another symbol for the leg, another for the arm, another for the hand, etc. (FIGURE 1 and 2)


FIGURE 1  Designing the rabbit character in Flash.


FIGURE 2  The set of layers used for the rabbit.

Eye blinking

I used a "sliding doors" technique to make the character's eyes blink (FIGURE 3). The problem then was making the eyes blink not only once but the whole movie. I added a little bit of Actionscript code for making the eyes of each character blink at a given interval in milliseconds.


FIGURE 3  The sliding door technique used for animating the blinking of each character's eyes.

Notice the first layer called "actions" in FIGURE 2, well in that place I added the following Actionscript code:

var blink_interval:Number = setInterval(blinkEye, 7000, eye1, eye2);
function blinkEye(target_mc:MovieClip, target2_mc:MovieClip):Void {

The code basically sets a interval that will call a "callback function" every given time in milliseconds. For the eyes of the rabbit I set a interval of 7 seconds (7000 milliseconds) to make the eyes blink. I also pass to the callback function two symbols (movie clips): the left and right eye denoted by eye1 and eye2 respectively.

Making pauses

After every text balloon that appears in the short history I needed some pause to allow the viewer to read the text. Doing a pause in Flash's timeline would have been a very terrible idea because the timeline's length would increase considerably. So I used a specialy designed movie clips that made the pause for me (check at the end of this post for the pause flash source file)


Original story "El bosque animado" by Wenceslao Fernandez Florez

Background Design by Disney's Tarzan.

Character Design by Robert Navas (me, coche, cochesaurus, we all are the same character :)

Pause Flash source file by Chris Georgenes.

Final thoughts

Some people in the forum complain about using the Disney's Tarzan background (and maybe they are right), but I'm using this background for educational purposes, you know :)

The code shown along this post is written in Actionscript 2. I hope I could update this code for ActionScript 3

Finally this is the end of a very long post. As always thanks for reading!


Source Files

Posté par coche à 02:01 - Animation - Commentaires [0] - Permalien [#]


Poster un commentaire