Tag Archive for 'design'

micro dudes coverart (Boings & Tickles EP)

A couple of weeks ago Jürgen Sachau asked me if he could use my micro dudes for the cover of his Boings & Tickles EP. A great honor of course so I agreed and made a nice design for him as well. Here is the result:

Boings & Tickles CoverArt Front Boings & Tickles CoverArt Back
front / back (click for full-size on flickr)

You can listen to (and download) the EP here: http://www.ektoplazm.com/free-music/outolintu-boings-tickles/

Game tiles experiment

justGREAT! I start off designing some tiles just for practice and one day later I end up with a neat experiment 😀

I was inspired by the graphics of Dofus Arena and decided to try and create some similar tiles… Spending half a day fooling around with Fireworks I ended up with this image:

game tiles

Another half a day later I turned the graphics into an animated terrain generator: http://www.powerupmedia.nl/#/exp080302

The terrain is generated according to three small bitmaps (see top left corner). The first one determines the type of the tile. The second one is like a bumpmap and determines the elevation of eacht tile. The third bitmap determines where objects (plants, rocks, gold, etc.) should be placed.
In the future I might create an editor which can write the bitmaps.

Once I designed more versions of each tile-type (4 or 5 different grass tiles for example) the generator will be able to pick a random version of that tile. This way repetition in the structure should be avoided (at the moment the tiles are just mirrored at random).

MADinSPAIN was just GREAT!

The 3-day trip with the TFE-design team to Madrid was a big success. There were lots of inspiring speakers, but the ones that really stood out and inspired me the most (on all kinds of levels) were AllOfUs, Group94, Pleix and de-construct (in random order):

A really cool agency that showed some amazing mobile phone apps and interactive installations. They really gave me the inspiration to create new experiments (if only they could give me some more time as well).
site: http://www.allofus.org/

I was already familiar with their amazing work, but it was really nice to see how they handle their projects and how they solved some complicated Flash problems with really simple solutions. The most surprising thing about Group94 is that they work with only 8 people and yet manage to create so much fantastic products.
site: http://www.group94.com/
old site: http://www.group94.com/home_old.php 

A group of freelancers with various disciplines who join together to create cool commercials, music videos and non-commercial films.
site: http://www.pleix.net/

A webdesign agency who have a great vision towards user experience on their websites. A nice example of this is a site they made for Panasonic:
The three cameras that are exposed on the site are presented in a short story. Each camera has it’s own story in which it’s characteristics are displayed. This way the user is not directly confronted with all kind of specs (which he has to compare to find the right camera), but he can simply select a camera by a specific purpose. A very nice approach towards potential customers if you ask me.
site: http://www.de-construct.com/

Of course there were a lot of other interesting speakers but for now I’ll leave this post to these four agencies because I need my time to work out my newborn ideas.

Stay tuned….

PS: drop a line to the guys of DoubleYou:

I’ll be going MAD in SPAIN!

Just great! I got a last minute ticket to the MADinSPAIN convention. We’re going with the entire design team from <theFactor.e> and myself as the only Flash person. I’m not sure how much Flash there is gonna be, but I guess it’s gonna be an interesting trip nonetheless!

According to the site it’s “An international design event” and I mainly hope to find some new (general) inspiration as I’ve been quite lazy recently (as it comes to design and art).
I’ll keep you posted…

Flower animation experiment

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.