TOKI WOKI. 

When I moved in I bought an IKEA Ramvik table and while trav­el­ling this sum­mer I had an idea (don’t ask why): dec­o­rate its top with Lego bricks used as pix­els. 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 col­ors avail­able? Oddly enough this ques­tion is not that eas­ily answered. Prob­a­bly because Lego’s site is crappy, or because nobody really cares… I even­tu­ally found Brick­ipedia which hap­pens to be a much richer resource than the offi­cial ones. Every­thing I was look­ing for was there: the Lego “unit” is 8 mil­lime­ters and the color palette is pretty sim­ple.

Table specs

Know­ing my table size I had var­i­ous options, depend­ing on the “pixel size” I’d choose. Of course the num­ber of bricks (and the price) would also vary. So I cre­ated a dynamic spread­sheet on Google Docs that’d do the cal­cu­la­tions for me… Here it is, with all the options pos­si­ble (French, sorry).

iframe: <a href="https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&amp;hl=en&amp;output=html&amp;widget=true">https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc<span class="amp">&amp;</span>hl=en<span class="amp">&amp;</span>output=html<span class="amp">&amp;</span>widget=true</a>

I chose the 4x4 option, quite cheap and still offer­ing a cool num­ber of pixels.

Design

36x16 pix­els of free­dom, that’s it. I tried lots of dif­fer­ent designs, from lo-fi pho­tos to pixel-art draw­ings. I decided to go for a Heavy Oblique Futura.

Actual size:

Look­ing good.

The Lego palette

I set my type to white, on a black back­ground. The anti-aliasing process cre­ates gray-scale pix­els to smooth the curves, which is great, but Lego bricks aren’t avail­able in all col­ors! To have a real­is­tic pre­view of what it would look like I had to cre­ate a Pho­to­shop Color Table match­ing Lego’s gray-scales (if you’re inter­ested, just ping me [UPDATE: here they are]). Here’s a com­par­i­son between Photoshop’s default gray-scales (left) and Lego’s palette (right):

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

Time to order bricks!

Already? Nope, not that fast. Before order­ing I had to know exactly what to order, that means count­ing the pix­els. Well, I’m not this kind of guy. I’m a devel­oper; I hate repet­i­tive chores, you know.

So I fired up Flash Builder and came up with Palet­te­Counter a sim­ple, Open­Source, app to count pix­els of each color. I also added some kind of “assem­bly instruc­tions gen­er­a­tor” 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 cou­ple of weeks later. Yay!

Let’s do this

I’m not going to describe the process (that hap­pened this sat­ur­day), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for help­ing out!

While redesign­ing this blog I wanted to keep the “one color per post” con­cept I had in the pre­vi­ous ver­sion by chang­ing (tween­ing) the logo’s color accord­ingly to the arti­cle being viewed (or scrolled to). I rapidly real­ized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid load­ing a SWF file on every page).

I remem­bered hear­ing — a few months ear­lier — about Raphaël (a JS lib to ren­der vec­tor graph­ics). At that time I found the con­cept really inter­est­ing but couldn’t see where to use it.

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Raphaël is cool, but its syn­tax looks a bit cryp­tic at first. It says it han­dles SVG, and — guess what — Illus­tra­tor can export to SVG. We’re get­ting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a spe­cific syn­tax meant to be com­pat­i­ble with SVG and VML. Hum… This is when I fire Flash Builder and start writ­ing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a lit­tle demo of an output).

I then sim­ply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the out­put, and wire all that to the scroll/color tween­ing logic. Pretty easy.

Every­thing worked and looked nice on all browsers and OS’s but I real­ized the sole idea of hav­ing a logo chang­ing col­ors didn’t work that well. For purely visual rea­sons. So I dropped it from my theme and rolled back to the black PNG ver­sion you can see right now.

The good thing is, the tool works pretty well (at least with Illus­tra­tor SVGs) and is Open­Source. Either use it or mod­ify it, and tell me what you think. I did this in a hasty fash­ion and I prob­a­bly won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improv­ing it, please do so!

Guess what? AIR app! This one’s for edu­Me­dia.

An intro

We cre­ate and dis­trib­ute ped­a­gog­i­cal sim­u­la­tions and videos, and our school users can down­load them to pre­pare and illus­trate their lessons. Until now we offered server-side gen­er­ated ZIP files with an HTML, some CSS and the SWF, but users (who often are not com­puter geeks) wanted some­thing sim­pler and more pow­er­ful… So we designed the eBox!

The eBox

Basi­cally the eBox is an empty media library wait­ing to be filled. The first time you launch it, it installs itself (and the AIR run­time, if not already there) and then fills itself with the medias you chose. This hap­pens thanks to AIR’s Browser­In­voke logic and removes the “Save As” and “Uncom­press” steps.

You can also fill it with “local medias” (of any type) but drag­ging and drop­ping files on it, or by brows­ing and select­ing them. If these medias are SWFs they’ll be opened within the app, if not the OS will open them with their default app. Handy.

You also have the abil­ity to cre­ate direc­to­ries to orga­nize your library, and to reorder medias (via drag and drop). Pretty com­mon, but cool.

Let’s talk tech

Flex 4.1, local­ized with Lupo (now free and Open­Source!) and designed with Illus­tra­tor. Server-side com­mu­ni­ca­tion is made through AMFPHP. I used some tiny tech­niques that helped deploy two dif­fer­ent ver­sions with only one project (we have a school and an indi­vid­ual ver­sion), I might detail that in a next post.

This is my first real-life project with Robot­legs, it helped me learn how to use it and how to write really clean code; with view, medi­a­tors and all. I loved it and think I will con­tinue build­ing big projects with RLs, makes you feel pretty.

So?

I’m pretty happy with the final result (not that final, expect updates!), both on visual and tech­ni­cal points of view. Go grab a free media and tell me what you think! We also set up a spe­cial page with a nice pre­sen­ta­tion of how it works, in case you’re lost.

I recently started work­ing with Robot­legs on a daily basis and I’ve never had to write that much cus­tom event classes, so I felt like it was start­ing to be a lit­tle bit bor­ing… That’s why I wrote a pretty basic/simple app that does hard part for you!

Sim­ply enter you cus­tom event’s class name and pack­age, drop in some con­stants and prop­er­ties: you’re all set!

Pro-tips:

1. Reorder the con­stants and prop­er­ties by drag­ging and drop­ping them
2. Use cus­tom types for the prop­er­ties, imports will be taken care of for you
3. Hit “Copy to Clip­board” or “Save As…” for a quick export!

Project is brand new so it might require some fixes or improve­ments… If you have ideas, please share!

And before you ask: no, it wasn’t writ­ten with Robotlegs… But it’s Open­Source so if you want to take a spin and write the RL ver­sion of it, you’ll be able to do so!

Hope this helps!

Hey! Another free AIR app! This time that ain’t no side project I made on my free time for some obscure users, but rather a big thingy for a big com­pany. Namely Foto­lia.

I did all of the cod­ing part (Action­Script 3, Flex 4) and Steaw is respon­si­ble for the UI and all graph­ics. The app is basi­cally a solu­tion for power-users, pro­vid­ing most of the func­tion­nal­i­ties of the web­site and adding some more (such as direct down­load and local library). Allow­ing you to search, browse pre­view and buy all types of medias, includ­ing video and vectors. You can also log into your account and store your favorites in a light­box or cre­ate and fill gal­leries.

This is my first multi-lingual app: to this day it pro­vides 13 trans­la­tions includ­ing Japan­ese, Chi­nese and other funny look­ing languages!

Flex 4

This is also my first big real-life project with Flex 4 and I have to say it’s way better/easier than Flex 3. Really. What changed my life is the way it han­dles states and com­po­nent cus­tomiza­tion via skins… Oh boy, this is easy!

AIR 2.0

Yep, using the brand new AIR 2.0.2, buddy. What for? Mainly for global error han­dling and the almighty open­With­De­fault­Ap­pli­ca­tion (for both folder and medias). I’ve also heard this ver­sion of the run­time is faster and lighter, and we all like that.

Open­Source

As for every project I work on, I try to have some Open­Source bits so that any­one can ben­e­fit from the work and time I spent on it. I asked Foto­lia if the AS3 API I was going to write could be OpenSource’d and guess what, they accepted. So here it is, based on the as3-rpclib and on the as3 Sig­nals logic: fotolia-as3-api. I imple­mented most of (if not all) fea­tures of their offi­cial API so build­ing an AS3 app off of that should be pretty easy, do so!

Go get it!

Yeah, go get it.

Warn­ing: techy post for once; sorry about that reg­u­lar folks. Look­ing for some­thing nicer than cryp­tic bug fixes? Have a look around here!

So here we go: I’m work­ing on a big multi-lingual AIR app within Flash Builder and just received the locale files from my client today (made with Lupo).

Couldn’t wait to see what it looked like in Japan­ese and in all other lan­guages sup­ported (13, to be pre­cise) so I copied the “locale” folder into my project, updated the “Addi­tional com­piler argu­ments” with “–locale de_DE en_GB en_US es_ES fr_FR it_IT ja_JP pl_PL pt_BR pt_PT ru_RU tr_TR zh_CN –allow-source-path-overlap=true –source-path=locale/{locale}” and refreshed the project. Which broke, say­ing “unable to open ‘[blablah]\frameworks\locale\en_GB’”.

“Ouch”, I thought. Flex doesn’t sup­port Great Britain’s English?

In fact en_GB was not the only locale to break the project, so I Googled around and found that copy­ing your Flex frame­work en_US direc­tory and renam­ing it to the miss­ing locale could do the trick. For exam­ple I copied “C:\tools\flex4-air1.5.3\frameworks\locale\en_US” to “C:\tools\flex4-air1.5.3\frameworks\locale\en_GB” (I also did that for tr_TR, pt_PT and pl_PL)… Not the nicest solu­tion but lookin’ good anyways!

Almost.

I then stum­bled upon a lovely “Inter­nal build error”. But that’s cool.

I can’t explain how I found how to fix this but I did: some of the locale files (named Main.properties) where hav­ing lines with only a back-slash in them (\). I sim­ply removed those lines every­where I found them and that was it.

I don’t know if this has any­thing to do with Lupo, or else; but it’s fixed and yes: the app looks nice in Japan­ese, thank you.

Meet Dok, my lat­est and nicest AIR app to this day!

Always look­ing for help when writ­ing AS3 for Flash, Flex and AIR? Think Adobe’s ref­er­ence is rich but brows­ing it sucks? Well, I did too. So I wrote this lit­tle thingy that loads, parses and caches help pages and then presents them in a slick and quick UI!

Since this app is only intended for devs and there­fore may not be very inter­est­ing to oth­ers, I decided it should look good. So I tried my best and worked hard on those pix­els and styles (col­ors and tex­tures inspired by that sweet clock)… Jump to the project page for life-size screenshot!

This project is absolutely Open­Source, from top to bot­tom. AS3 classes, MXML, Illus­tra­tor and Pho­to­shop files, PNGs and so on… Help your­self.

This post is a techy one, so if you don’t write AIR apps or if you think this wouldn’t be enough to show off dur­ing cof­fee break I rec­om­mend some­thing fun­nier.

Work­ing on a big fat AIR app (more than 400 Mb) I noticed some­thing quite strange: using Encrypt­ed­Lo­cal­Store get/setItem meth­ods hap­pened to be slow, I mean very slow, but like, slow as hell (like 5 to 10 sec­onds per call) but only after launch­ing the app, and not after. Some­thing that I never noticed before ; nei­ther with other AIR apps, nor for this one before I added its heavy con­tent… And the tricky part is that it only occurred with a com­piled app, but not within ADL.

I googled a bit and found this thread which is mainly about the strongly­Bound para­me­ter for setItem, but its last post by Oliver Gold­man rang my bell:

The first time ELS is accessed the application’s sig­na­ture needs to be ver­i­fied, regard­less of whether or not strongly­Bound is set. If strongly­Bound is set, then the sig­na­ture is re-verified as the appli­ca­tion is run­ning. Either way, it’s expen­sive if you have a big application.

Small app: fast, fat app: slow as hell. Les­son learned…

And this is true both for Flash and HTML/JS AIR apps. So if you don’t need your data to be encrypted I highly rec­om­mend using Share­dOb­ject (or else) instead. As far as I’m con­cerned the first calls dropped from 5/10 sec­onds to a few milliseconds.

Bingo.

Dur­ing the last cou­ple of months I’ve been work­ing on a free AIR app for a French community-based site called Weecast. Its pur­pose is to allow users to sub­mit and/or buy screen­casts about your favorite apps and lan­guages (mostly Adobe’s and Microsoft’s, but also 3D ones’, OS’s and more).

Intro­duc­ing the Weecast Player!

The app allows you to browse your videos, watch them (4 view modes), search for more, drop com­ments and stars… I think that’s called an RIA, right? There’s also an offline mode, so you can access all your stuff anytime.

All of this is made in Flex+AIR. The visual iden­tity was made by Weecast ; thanks for the PNGs, folks!

By the way, some parts of it are actu­ally Open­Source, includ­ing:

• Mis­cel­la­neous AIR util­i­ties
• The infa­mous Gra­di­ent­La­bel (for Flex)
• Dynam.ize and BaseOb­ject, for work­ing with syn­chro­nous SQLite databases

If you don’t know Weecast yet I highly rec­om­mend you go visit their site, grab an account and the player, enjoy free videos, and then buy some! Now if you don’t under­stand French… Well, learn it!

If you’ve ever won­dered whether it’s pos­si­ble to apply a gra­di­ent on a Flex Label, well it is ; but that’s not very straight for­ward… As I’m work­ing on a app that requires this kind of glit­ter I decided to try and see what could be done.

I started with a basic Action­Script project (no Flex involved) and came up with this. Quite func­tional, could prob­a­bly be opti­mized but my goal was actu­ally a Flex com­po­nent and I knew that was tech­ni­cally fea­si­ble. I then sim­ply extended Flex’s Label class and basi­cally copied/pasted the logic into it. Just had to fig­ure out which event to lis­ten to and I was good to go…

Here’s a demo app for your play­ing pleasure.

You may notice that in this exam­ple I embed the font so it looks nicer, but this is not mandatory…

All this is open­source (class+project) and you can grab it at my brand new Google Code dump: as3-bits. Help yourself.

As always, feed­back welcome.