A Koi fish made with Flash’s Bones Tool. It’s my first time really trying out inverse kinematics in Flash. Usually you create some MovieClips and connect them with bones. But you also can apply the bones to a single vector shape with different colors (like the fish in this example). The cool part is that the shape gets bended in a more natural way. Then you can control the bone-joints with ActionScript. I hope Adobe will improve the bones tool in Flash CS5. It would be really cool to add bones to a bitmap like in AfterEffects. Also once you added the bones, you can’t edit them. So when I wanted to make a change to the fish, I had to start over every time. It’s also not possible to combine timeline animation of the bones and AS3, you have to decide either or. See the demo.

A Koi fish made with Flash’s Bones Tool. It’s my first time really trying out inverse kinematics in Flash. Usually you create some MovieClips and connect them with bones. But you also can apply the bones to a single vector shape with different colors (like the fish in this example). The cool part is that the shape gets bended in a more natural way. Then you can control the bone-joints with ActionScript.

I hope Adobe will improve the bones tool in Flash CS5. It would be really cool to add bones to a bitmap like in AfterEffects. Also once you added the bones, you can’t edit them. So when I wanted to make a change to the fish, I had to start over every time. It’s also not possible to combine timeline animation of the bones and AS3, you have to decide either or.

See the demo.

The Magic Mirror is just a little demo. It’s still not complete. The idea is to add Facebook-Connect so it would know what kind of [spoiler-alert “product”] to show, personalized on your gender, age and so on.. I’m also not sure if there is a company that would want to make fun of their clients (Dove is just used as an example). So this might just remain a little lab demo. Note: If you can’t see yourself in the mirror after confirming in the camera settings, just right-click and pick the right webcam driver.

The Magic Mirror is just a little demo. It’s still not complete. The idea is to add Facebook-Connect so it would know what kind of [spoiler-alert “product”] to show, personalized on your gender, age and so on..

I’m also not sure if there is a company that would want to make fun of their clients (Dove is just used as an example). So this might just remain a little lab demo.

Note: If you can’t see yourself in the mirror after confirming in the camera settings, just right-click and pick the right webcam driver.

Playing around with After Effects. It kinda looks like Darth Vader.

The Future Post

Sometimes when I write a new post I wish I could set the post date in the future. I don’t mean publish it on a later date. Publish now, but the blogging system is aware that the post is referenced into the future. The problem now is, that when I write about an upcoming event, visitors will see it too early and when the event get’s closer, that post is already buried with new ones.

As an example, let’s say I plan to attend Chirp, the Twitter Developer Conference. I probably post about it when I first find out about it, or when I get my ticket and maybe after the event already happened. But Nobody will see it right before the event occurs!!

Below a quick example:

The “future posts” appear above normal posts for an easy glance what’s coming up. After the set time passed, a post would fall below the NOW line and you could even update it with news from the event.

A tumblr theme could look like this:

{block:FuturePosts} ... {/block:FuturePosts}
<div id="now">NOW</div>
{block:Posts} ... {/block:Posts}

Actually any kind of stream with chronological posts could use it, even Twitter or Facebook statuses. It would kinda be like a public calendar. Let’s see.

Tumblr Mosaic Viewer 

This is pretty cool. Let’s you view all my content in a nice mosaic.

Passing a lighthouse.

This is the new Design Process I’ve been trying to use lately. Skipping Wireframes and Photoshop comps! This video shows all the different design steps needed to create the Shitty Day site. As you can see, I tried to implement some principles I picked up during the years:

  • Getting Real: Create a working prototype first, worry about Design later.
  • Design from the inside-out (can’t remember the link): Concentrate first on the content (Tweets), then the things around it.
  • KISS: Keep it simple..

So, where are all the wireframes and Photoshop comps? They got skipped..!! no wait.. actually you could say that the wireframe (basic layout at the beginning) and the Photoshop comp got created straight with HTML/CSS and then constantly changed and refined.

The tools I used for this project were Espresso for the HTML markup and then CSSEdit for styling. Later in the process I used Photoshop to create single images like the background tile, paper holder and so on, but never for the layout.

It all seems pretty easy and straightforward, but I think this process works best for smaller simple sites. For bigger and more complex projects, the traditional approach might still be better. Also before I started I had sketched out the idea on a notebook and had already a pretty clear picture in mind how everything should look and work. If you would ask the client for feedback during the process, they would probably tell you nonstop how ugly it looks. ;-)

Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you&#8217;re not alone with your shitty day). First I intended doing everything in Flash, but then I thought it&#8217;s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video. Visit Site

Shitty Day is a side project I created just for fun. It searches for Tweets from people that write about their shitty day. The results can be seen in a fun way (toilet paper roll) and users get encouraged to send back some love. You might even could argue that it will have a therapeutic effect (you’re not alone with your shitty day).

First I intended doing everything in Flash, but then I thought it’s a good chance to play around with some CSS3, jQuery and the Twitter API. And a lot of fixed PNGs to let only the paper roll scroll. Watch the making of video.

Visit Site

Here a short video showing the making (actually cutting) of my new business cards.

I just got the new Moo MiniCards. YAY! When they arrive in the shiny box, they are actually still not finished.. Just by cutting off the edges it looks like the card got shifted from a samurai sword cut.

Watch the making-of.. ahh.. no.. cutting-of video.

Added some custom icons to the site. The bigger ones on the top are scanned to keep the &#8220;sketchy&#8221; look. Makes it more personal and matches more the brush stroke style. The small ones (footer/meta) are all painted pixel by pixel to make them as sharp as possible. If you scan/resize them from your sketch, they would look too blurry.

Added some custom icons to the site. The bigger ones on the top are scanned to keep the “sketchy” look. Makes it more personal and matches more the brush stroke style.

The small ones (footer/meta) are all painted pixel by pixel to make them as sharp as possible. If you scan/resize them from your sketch, they would look too blurry.

Radial menu in Flash. It is dynamic and can be changed trough an xml file. See the demo.

Radial menu in Flash. It is dynamic and can be changed trough an xml file.

See the demo.

“ Meet the new CSS double dream team: border-radius + box-shadow. ”

Together they are unbeatable! It’s such a joy to use them for rounded corners with a drop shadow. The box above uses: border-radius: 8px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2); to do the magic.

And it get’s better: They even work on embeded Flash! See the 4px rounded corners live in the photo/video section.

Note: This is CSS3 and not all browsers support it yet, like our friend IE.

simurai V5

Why I’m switching to tumblr.

This is already the 5th version of simurai.com. I’ve gone trough many phases.. highly graphical - minimalistic chic - fat blog - interactive 3D. But I’ve always struggled meeting all the following goals:

  1. Easy to update
  2. Easy to browse content
  3. Be able to integrate my portfolio with a blog and share other things I like all at the same place in a streamlined way.

With tumblr I think I pretty much found that perfect balance. Thanks tumblr.

Credits: This site is based on the Prologue Theme by Hayden Hunter.

Trip to Korea. Mostly Busan and area. See more photos.

Feed me