Monthly Archive for June, 2007

Page 2 of 2

Flower animation experiment

Published on June 11, 2007 in Animation, Graphics and Power-up Media. 5 Comments Tags: , , , , .

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!

fla and swf sizes
File sizes before and after.

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

Use “this”…

Published on June 11, 2007 in ActionScript and Power-up Media. 4 Comments Tags: , , , , , , .

Because “this” is just great!

Unfortunately many people omit them in their code :cry: . Not sure why though, but my guess is that they are ignorant or just lazy (don’t be offended if you don’t use the this keyword for another reason, but please let me know why).
Even Adobe (and Macromedia before them) neglects the this keyword. None of their examples uses this and it’s nowhere to be found in their own code either!
Shame on them!

At the company where I work we didn’t use the keyword up until a year or two/three ago. Some of us found the keyword to be very handy and convinced the rest (not sure which group I belonged to at that time).

First of all, using the this instance variables supplies you the option to declare a local variable with the same name:

1
2
3
4

this.myVar = "my instance var"; 
var myVar:String = "my local var"; 
trace(this.myVar); //my instance var 
trace(myVar); //my local var

(Note that the above code only works in a class and not in the timeline!)

This can come in really handy when you need to store some temporarily data, during a for loop for example.

The second and most important reason to use this, is that it keeps your code clean and neat. It will help you to visually distinguish the local variables from the instance variables. This is vital if you work in a team on the same project or if other people need to work on your project later on (bug fixing, implementing new feature, etc.)
In all these cases it’s important to scan through someone’s code quickly and see at a glance where a certain variable comes from or is declared. If you omit the this keyword you would first have to scan the entire method to see if, maybe, the variable is declared local in this method. While if you do use the this keyword you know for sure it is declared in the Class definition and you know you can use it throughout the entire class (and in case of a public var, throughout the entire code).

So using the this keyword gives you more control over your code and it lets you (and your colleagues) programme in old or other peoples code much faster!

If you don’t use the this keyword at the moment, I hope this post convinced you to try out the this keyword for a while (even if it’s only for one single project) and I’m sure you never want to programme with out it, ever again.

If you already did use the this keyword, maybe this post wil help you to convince some ignorant fools in your vicinity :D .

Long lost stuff…

Published on June 3, 2007 in Graphics and Power-up Media. 0 Comments Tags: , , , , , .

Just great! You can check some of my older work on deviantART:
http://ironiceagle.deviantart.com/ (if it’s not as friggin slow as normal :| )

Here are some samples:

Hand - digital sketch
Hand – digital sketch

Touch of God - pencil sketch
Touch of God – pencil sketch

Nailed Myself… - pencil sketch
Nailed myself… – pencil sketch

Frog - pecil sketch
Frog – pencil sketch

Vector doodles

Published on June 3, 2007 in Graphics and Power-up Media. 0 Comments Tags: , , , , , .

It’s just great when people write usefull and to the point tutorials. A while ago I stumbled on this nice tutorial on how to make cool vector drawings in flash. Here is how it turned out…
I started off with this fella:

spacedude - sketch
spacedude – sketch

spacedude - vector
spacedude – vector

Thought this one was OK so I tried a larger one as well:

monster - sketch
monster – sketch

monster - vector
monster – vector

Turned out this technique isn’t that hard to master, it just takes loads of time and patience (the monster took me bout 4 hours).
I hope to do some more of these in the near future.
Fortunately I still have loads of old sketches in my drawer so it’s straight of to the vector part :D