Power-up Media Blog » Animation

Jolly jellyfish

Arno van Oordt — Fri, 21 Mar 2008 15:48:11 +0000

At the moment I’m trying to learn how to make timeline animations in Flash and yet somehow I end up animation which is 80% coded, isn’t that just great!?

Just fooling around I came up with this result:
If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.
Jolly jellyfish - vector animation | download

The movement and generation of the jellyfish is all actionscript (2.0), the “squezing” is timeline-animation…

Cartoon animations

Arno van Oordt — Sat, 23 Jun 2007 20:33:58 +0000

Just great how easy it is to make simple animations in Flash. Check out these cute fellas…

If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.
cute frog cartoon – vector animation | download

If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.
cute whale cartoon – vector animation | download

Each took me about 4 hours in total (sketch, vectorizing and animating).
I used a couple of animation techniques like the “growing flower mask” to animate the whale’s fountain and a little as2 to make the frog’s eyes follow the mouse. Furthermore some shape- and motion-tweens. Let me know what you think of them…

Flower animation experiment

Arno van Oordt — Mon, 11 Jun 2007 19:59:23 +0000

Isn’t it just great experimenting with new techniques even though you don’t have any use for it (yet)?
Recently I made this animation of a flower ornament (grabbed from the “Flower Ornaments” font). I tried a couple of approaches to see which had the best result.
If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.

It was quite obvious I had to use a mask because animating the shape itself would just have been a great mess.
First I tried to use the shapetween to animate the mask, but I abandoned this approach quickly because the flower-shape turned out to be way too complicated to use a shapetween; I would have to make a new tween every 3 or 4 frames.

Then I started to paint the mask frame-by-frame. Each frame I made the mask a little bigger by using the brush tool. It was an time consuming job, but one hour later I got the job done. The result was OK, but unfortunately when I looked at the file size of the fla as well as the swf, it became clear to me that apart from time consuming this method was also space consuming. For just that little flower ornament the swf was already 117kB and the fla was even worse: almost 20mB. It turned out that a dot made by the brush tool has about 50 vector points; you do the math.

I started to think about other ways to get the same result without the huge file sizes.

I thought about using the flower shape as a mask itself and work backwards, brushing away the mask frame by frame. I failed just after I made the mask. Why? I just didn’t know where to start brushing. Because this animation has one start point but many different endpoints (because of all the leaves).

One last try then: a combination of the shapetween and the brush. Since the brush had too many vector points I started off using the oval-tool instead (which has only 8 points).
Using the shapetween would just save me bout half the frames, since I would have to make a new tween every 3 or 4 frames. And on the other hand it would have cost me way more time to make it, as the shapetween is quite unpredictable and I would have to experiment a lot to get the right tween… (this might work better on less complicated shapes though.)

All of this left me with just the oval tool and frame-by-frame approach. Each frame I expanded the oval mask by dragging it’s edges. In about the same time I did the brush version I completed this one and the result was pretty nice; a 17kB swf and a 101kB fla. Not bad at all!

File sizes before and after.

Update (2008-01-30):
I uploaded the source of the animation. You can download it here: Flower Animation source.