TOKI WOKI. 

I recently wrote a pretty big tutorial about Adobe AIR, its captive runtime mode, and how to generate a Windows installer on top of that. It was written in French and published on flex-tutorial.fr.

I then contacted the fine folks at Adobe Developer Connection and offered to translate it to English. They accepted, reviewed it, and boom: published it.

Wether you’re a French or English reader, I got you covered. Tell me what you think.

Back in 2008 I would spend some of my Saturday afternoons sitting in a Laundromat, waiting for my clothes to smell good. I quickly realized these moments were perfect to bring my laptop with me and code. One of the first AIR apps I wrote was Shrink O’Matic, now you know where the name comes from.

It quickly became successful. It now has been downloaded 168,000+ times, a best-seller of sorts. Except it’s free.

But with success comes feedback, and with feedback comes feature suggestions. Most of them were included through updates, some of them didn’t make the cut. Probably because of me being lazy or because of AIR’s limitations.

Then AIR 2 came out, then I learnt Robotlegs… So I re-wrote it from scratch! Introducing Shrink O’Matic 2, the same quick and simple app but with more features and a nicer theme.

Here’s what’s fresh off the oven:

• Drop folders onto the app: every image in it (or in its sub-folders) will be shrinked.
• New “Rotation” settings pane: either use a specific angle or let the app read your images’ EXIF data and decide what to do.
• Custom name option: choose exactly what the output name will be using your own pattern and injecting the original file’s name (using $name) and/or its position in the queue (using $num).
• PNG files now keep their transparency when shrinked.
• Watermark: watermark your images, even choose where to place the overlay.
• Drop files onto the app while it’s processing, no problemo!
• No more dimension limits.
• Shiny new theme!

But! I decided some features had to go. I removed the “name preview” that used to be in the status bar. I also removed the ability to drop images from web pages. If you need these features and want them back, make sure to drop a comment and let me know!

That’s it, go get it!

I’ve been working on an app for a French sport hospital, designed to browse its msk image library. It’s called “MSK view” and it is available for free in iTunes (iPhone and iPad version) and in the Android Market.

Pretty technical stuff in it, not sure everyone will want to install it but hey, there may be some doctors out there!

The hospital is French but the app is both in French and English. Built in Flash Builder with Flex Mobile, Robotlegs and AMFPHP, UI design by Jumo.

Now go show off browsing images of “Scaphotrapezial Synostosis” or “Rectus Femoris intramuscular Haematoma”, whatever it may be!

Boks is one of my most successful apps and this is probably not only because of its usefulness, but also because it is free, too. I released it more than 2 years ago and it is still heavily downloaded.

The CSS community is really active and fast-moving. When I wrote Boks, Blueprint CSS was one of the most watched and forked project on GitHub which is mostly why I chose to base my UI and logic on it (it still is at the top, by the way). But with today’s CSS3 hype and because of the ever-growing list of CSS frameworks (not going to list them here) I started receiving lots of feature requests.

At first I thought I could wait and handle them later, but I quickly realized it would need a lot of time, and I definitively didn’t have it in my hands (or at least not for this project). The idea to OpenSource it seemed obvious and I’ve been slow doing so, but here it is. If anyone’s willing to take a look at what I wrote and fix or improve it, do it! Don’t forget that this has been written a while back and I wouldn’t re-write it this way (think Robotlegs); I know the code will look crappy to some but hey, we all learn and evolve, right?

I’ve licensed Boks’ source under GNU GPL v3 in order for it to remain OpenSource, but if you have other suggestions, just tell me.

Remember Evnt, the quick and simple UI to generate AS3 Event subclasses?

Well, it’s still here but I don’t use it much anymore, since I’m a big fan of Robert Penner‘s Signals! So I wrote Signl. It’s basically the same thing, but for Signals.

I know writing Signal classes is an easy task; but, why not make it easier? I hope this helps! Oh, and by the way, it’s OpenSource, just like Evnt was.

When writing in French I’m always looking for characters that can’t be easily typed with a keyboard (like œ, for example). I used to go to copypastecharacter.com for its simplicity: just go to that page, click on a character and boom, it’s in your clipboard, ready to be pasted!

But I wanted something more powerful/thorough that would remember my frequently used characters. So I wrote Unipasta!

Here’s what you should know about it:

1. Every input under the selected character (char, code and hex) can be edited and will update each other. Easily jump to any character!
2. The font metrics (baseline, x-height and cap-height) are auto-calculated and will help you know where the char lives;
3. Click on the “More Info” link to jump to fileformat.info and access a lot of details about the selected character;
4. Every character your click will be automatically copied to your clipboard, handy!
5. Use the “Recent characters” list to quickly access your favorite ones (latest used will always be listed first).

If you think some missing Unicode blocks are important to you or if you’d like to add a new character listing, just ask for it!

Remember Shrink O’Matic, the “oh, so easy to use” image shrinker for Windows, Mac and Linux? Introducing Shrink O’Mobile, the “oh, so easy to use” image shrinker for Android!

Because cameras on phones take big pictures and because you might want to send smaller/lighter versions, Shrink O’Mobile is here to help out. Just launch the app, choose the way you want your image to be shrunk, pick your image and BOOM! Your fresh, smaller, new version is instantly stored in your camera roll. Easy as pie.

And did I mention the app is free? It is.

Some projects become real, others never see the light of day. This one is more of an abortion.

Six month ago I’ve been contacted by an architectural firm to provide some consulting on a project of theirs (I’m not going to name names, you’ll understand why). The goal was to find ideas to make a building’s front more interesting. The building being a place to help and promote Hip-Hop culture.

So I started working on it and came up with ideas and concepts. The architect I was in contact with seemed pretty happy with it and everything was looking good.

Until I no longer received any answer to my e-mails… Our last interaction is now 5 month old and I think time has come to mourn. What I came up with can be interesting and since it involves an OpenSource project, here are a few bits about it.

At that time I was discovering  GML (Graffiti Markup Language) and Evan Roth‘s work. Bordeaux hosted Les Grandes Traversées and all of this really inspired me. So I thought of a mash-up between GML’s #000000book (black book, open archive of GML tags), a player of my own (Okr), the building itself and Twitter. Here’s the document I presented to explain what I had in mind.

The steps are:

1. Creating and sending a graffiti;
2. Receiving data;
3. Converting it to an image;
4. Projecting it on the building’s front;
5. Photo-shooting of the front;
6. Sending to Twitter;
7. Online consultation.

After a few e-mails with Jamie Wilkinson (heads up!) I started working on the core classes writing GMLPlayer and GMLCreator. The goal was to provide both a way to display tags and to create/upload them. I then built a UI around all that (a Flex one, after noticing Minimal Comps didn’t work the way I expected).

[iframe src=”http://toki-woki.net/p/Okr/” width=”752″ height=”506″]

Note: you’ll also find the app on its dedicated page. Try searching for “dasp” or “hello world” for example and play with the settings (the 3 top sliders).

Unfortunately it is only after creating all this that I realized the project would never become real… So I simply stopped working on it. I am well aware that some parts of the code is a bit raw and could be optimized and I haven’t built the creation/upload feature into the UI yet. Don’t know if I will, but the project is OpenSource so feel free to give it a spin! I also share my initial attempt and a pixel version in case you’re interested.

Pretty happy that — even if not feature complete — Okr made it to the GML project gallery, yay!

And just because a project will never see the light of day doesn’t mean it doesn’t need a proper logo, right?

[iframe src=”http://toki-woki.net/p/golden-ratio/”]

I wrote a quick and simple golden ratio tool (dedicated page). Basically it helps you find “golden ratio neighbors” for a given number: every number in the list divided/multiplied by its neighbor = φ.

Pretty straightforward but could come in handy. I’m aware it could be improved; if you have suggestions…

When I moved in I bought an IKEA Ramvik table and while travelling this summer I had an idea (don’t ask why): decorate its top with Lego bricks used as pixels. Here are the steps I went through. If you don’t care about those steps and want to see a nice time-lapse video, scroll to the end of the article!

Lego bricks

First things first. What are the Lego brick sizes and colors available? Oddly enough this question is not that easily answered. Probably because Lego’s site is crappy, or because nobody really cares… I eventually found Brickipedia which happens to be a much richer resource than the official ones. Everything I was looking for was there: the Lego “unit” is 8 millimeters and the color palette is pretty simple.

Table specs

Knowing my table size I had various options, depending on the “pixel size” I’d choose. Of course the number of bricks (and the price) would also vary. So I created a dynamic spreadsheet on Google Docs that’d do the calculations for me… Here it is, with all the options possible (French, sorry).

[iframe src=”https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&hl=en&output=html&widget=true” height=”374″]

I chose the 4×4 option, quite cheap and still offering a cool number of pixels.

Design

36×16 pixels of freedom, that’s it. I tried lots of different designs, from lo-fi photos to pixel-art drawings. I decided to go for a Heavy Oblique Futura.

Actual size:

Looking good.

The Lego palette

I set my type to white, on a black background. The anti-aliasing process creates gray-scale pixels to smooth the curves, which is great, but Lego bricks aren’t available in all colors! To have a realistic preview of what it would look like I had to create a Photoshop Color Table matching Lego’s gray-scales (if you’re interested, just ping me [UPDATE: here they are]). Here’s a comparison between Photoshop’s default gray-scales (left) and Lego’s palette (right):

You may notice that Lego’s black is a little bit light and the grays are yellowish.

Time to order bricks!

Already? Nope, not that fast. Before ordering I had to know exactly what to order, that means counting the pixels. Well, I’m not this kind of guy. I’m a developer; I hate repetitive chores, you know.

So I fired up Flash Builder and came up with PaletteCounter a simple, OpenSource, app to count pixels of each color. I also added some kind of “assembly instructions generator” to help us build it. Handy.

Time to order!

Really? Yup. I placed an order on lego.com’s Pick A Brick and received it a couple of weeks later. Yay!

Let’s do this

I’m not going to describe the process (that happened this saturday), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for helping out!

[vimeo id=”16376065″ height=”374″]

This page has been translated in Russian by Karina.