TOKI WOKI. 

Happy new year, folks!

I’ve been look­ing for ideas for my 2010 greet­ing card and finally found what I was look­ing for. Dur­ing the process I devel­oped sev­eral iter­a­tions that didn’t made the final cut, I selected two of them that are not that bad but not good enough for prime time!

The “ad” version

The “flash­back trip­tych” version

Since it’s a trip­tych it needs more space, so I set up a ded­i­cated page… Go see it!

What now?

The actual greet­ing card will be posted in January!

I wanted to try Flex 4 with a “real life” project so I wrote this lit­tle thing. Rough draft.

The app will allow you to mon­i­tor files changes: select a text file and you’ll be prompted when it’s updated. Basic. By the way, did I say “rough draft” before?

Every­thing in it is Open­Source, from the Illus­tra­tor files to the MXML and CSS stuff, so play with it! For those who only want the .air, here it is.

Now, why is it cool?

• Build with the brand new Flex 4 (Gumbo) framework
• Uses a home-brewed Icon­But­ton class, because Gumbo doesn’t pro­vide any
• Uses the new Spark cus­tom skins logic (on But­ton, Scroll­Bar and more…)
• Uses the new states’ logic and transitions
• Based on as3corelib’s File­Mon­i­tor class
• Shows you how to build a multi-instance AIR app
• Con­tains Illustrator/Photoshop UI files

And why is it not that cool?

• Prob­a­bly still buggy, wait for updates!
• Flex 4 is not done yet, so the code might break at any time
• No icons yet
• No or very few comments
• Pretty use­less app!

If you’re try­ing to learn Flex/Flex 4 or won­der­ing what’s new in it and how to use it you should defin­i­tively give it a go…

Have ques­tions? Drop’em!

Intro­duc­ing Boks, my lat­est and most ambi­tious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid Sys­tem and Blue­print CSS? Thought it was a pain to imple­ment? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and base­line rhythm, build and fill your lay­out and export all this to HTML and CSS in no time.

Got your own CSS style already? No prob­lemo, Boks can use them and even­tu­ally merge and com­press them within a sin­gle “screen.css”. Your styles use images? Sim­ply point to your asset direc­tory and it will be included too! Afraid of break­ing the base­line rhythm with you ran­domly sized images? Just select the “Add JS to fix base­lines” option and you’re good to go!

Enough. Just go grab it (or just have a look at the lovely screen­shots) and send feedback!

Apr 01, 2009: Update! I’ve done some wacky video screen­casts that can help you under­stand every­thing about Boks, go and have a look! Yes, the sound is not perfect.

A new project is online! It’s called Kwot, and it allows you to share and store your favorite quotes.

The UI is quite min­i­mal­is­tic, with focus on sim­plic­ity. Nav­i­gate through quotes with your mouse wheel, your keyboard’s left and right arrow or the mini time­line at the bot­tom. Add a quote by click­ing on the plus but­ton at the bot­tom right hand cor­ner. If you don’t pick any color they’ll be auto­mat­i­cally cho­sen via a magic algo­rithm! Another magic algo­rithm will rotate your quote in 3D space. But don’t worry you will pre­view that in real-time, ha!

I might add user (login) sup­port, lan­guage tag­ging, an RSS feed and stuff like that but don’t expect that too soon, hol­i­days are coming!

If you don’t have the Flash plu­gin or if you visit the site on an iPhone the site will look quite dif­fer­ent but every­thing will remain!

A few things I used in case you won­der: swfad­dress (you will love deep-linking!), GTween, FlashDe­velop, AMFPHP, the view­port width attribute… Oh, and by the way, the font face is called Neu­tra.

Add some quotes and drop feedback!

We have just updated our site!

We’ve been work­ing on this new ver­sion for about 9 months and now it’s here. The URL hasn’t changed, but the site has!

Let me show you what’s new…

Before/After

The site used to be designed for 800×600 screens, it is now for 1024×[anything], so the UI is wider and not as high as it used to be.

First thing you can notice: the blocks hold­ing the thumb­nails have been through a diet! Many UI ele­ments have been removed for cleaner and sim­pler nav­i­ga­tion. Here’s a quick comparison:

All of the but­tons have been removed but the func­tion­al­i­ties are still here, they’ve just moved to a more log­i­cal place. Also, the cross that indi­cated that you where not logged and had only par­tial access to the sim­u­la­tion is not here any­more. This lim­i­ta­tion is now shown with semi-transparency of the thumb­nail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hid­den and acces­si­ble via a click on the “Log in” link. No extra click, though: your cur­sor will jump in the field automatically.

You now have a direct access to our tree at the bot­tom left of the home­page, faster! You can also search, with suggestions!

We worked on icons to illus­trate the header’s menu items.

On to the browse page!

Not much to say here, sim­pler, clearer, nicer. The RSS feed is clearly shown and you can sub­scribe to our newslet­ter, this is new!

We used to have a 3×3 grid of thumb­nails, we now have a 5×2 one. That’s less pages to browse in some cases!

The media page

It used to be a popup… Nasty. We all decided to avoid it and go for a reg­u­lar page.

The big new thing here are the price but­tons. We used to be quite shy about our com­mer­cial activ­ity. We now fully admit it, which is a good thing!

You can notice the “age bar”, allow­ing you to know who the sim­u­la­tion is intended for. Another new thing is the sug­gestor: sim­ply click on it and you’ll be sug­gested sim­i­lar simulations.

Again, icons. In the tool box:

Every other page has changed, but I’ll let you go and see that on your own! The biggest reworks have been the sub­scrip­tion or the “about us”, if you’re interested.

Our sim­u­la­tions

Not only did we change the UI of the site, we also redesigned our simulations!

Switch­ing from a dual color theme (blue for light sim­u­la­tions, orange for dark ones) to a sin­gle an more uni­ver­sal gray one. Every com­po­nent has been rethinked, here’s what what they look like:

A tech­ni­cal point of view

Of course to end up with this UI and func­tion­al­i­ties, you need some lines of code. Here’s what lies behind the site you see when browsing:

• PHP5: my favorite back end lan­guage, in its last sta­ble version,
• Post­greSQL: I’ve always pre­ferred it to its more famous friend MySQL,
• CSS, lots of them. With Eric Meyer’s reset,
• JavaScript, based on the nicest lib: MooTools (for Ajax and visual effects),
• swfob­ject, to embed Flash files the right way,
• TwinHelix’s PNG fix. Because we love 24 bits trans­parency but some browsers don’t.
• A pimped out ver­sion of the PHP Lay­ers Menu Sys­tem, for the tree,
• AMFPHP, for Flash remot­ing in PHP,
• Action­Script 3 and Flash, to make things move!

And to write those lines of code, you’d bet­ter have good tools! Here’s what we used:

• Eclispe PDT. Because Dreamweaver is no good,
• We plugged File­Sync and Net­Drive in it, for quick upload to our test server. Nice.
• SVN via Sub­clipse and Tor­toise SVN, for good team sync,
• Fire­bug, the best Fire­fox debug­ging plugin.
• Web­De­vel­oper, Firebug’s best friend,
• FlashDe­velop, because nobody likes Flash’s IDE edi­tor, espe­cially for long AS2/AS3 classes…

Of course we also used Illus­tra­tor and Pho­to­shop, for the graphics.

Clap, clap!

Heads up to the team, I think (and hope) we did a great job!

As always, if you’ve got feed­back please drop it there or on the site’s ded­i­cated page. We love feedback.

Finally a new AIR app! It’s called FFFFOUND Desk­top and if you like FFFFOUND you’ll love it.

More info on the projet’s page, as usual.

Just like the other AIR apps, it uses some home-brewed open-source util­ity classes, some of which have been updated for this project, go play with’em!

I finally got a fff­found invite! If you don’t know this image book­mark­ing site, go and have a look, it’s wonderful!

I was brows­ing it, lis­ten­ing to Pauline Croze’s “Quand je suis ivre” song and stum­bled upon this image.

So I did that:

I think it could be a nice CD cover.

Another script, a tool.

Qut­ter lets you cut any­thing on the stage with­out destroy­ing it. Shapes, texts, images, groups and so on… Here’s a video demo:

Grab the source, or go to its Scriptographer’s page!

I ini­tially did it to be able to cut images. You can’t do it in Illus­tra­tor, or I missed something.

ps: Nam­ing all my script with a Q at the begin­ning is prob­a­bly not a good idea. I think this is going to be bor­ing soon…

I’ve just been intro­duced to Scrip­tog­ra­pher, this Illus­tra­tor plu­gin allows you to script actions (in JavaScript) in order to auto­mate things, to raster bitmaps, to cre­ate tools or more.

Being a big Illus­tra­tor fan and know­ing JavaScript quite well I’ve started play­ing with it a bit. It can be a lit­tle tricky when you’re look­ing for doc­u­men­ta­tion or when you’re used to work­ing with a flipped y-axis like in Action­Script but you can achieve nice things with only a few lines of code.

The first script I wrote is called Qink and is some sort of china ink paint­brush. It doesn’t work very well yet so I won’t post it now. Drop a com­ment if you want to try it.

The sec­ond thing I wrote has no name yet but works pretty well. It is not buggy at all but I need to rethink the script a lit­tle before post­ing it. Here’s an exam­ple of what you can do with it:

The con­cept is sim­ple: use any image’s pix­els as your color swatch. Either for live paint­ing, or to apply on a path. Expect nice or funny results! Again, drop a com­ment if you can’t wait.

The third thing is called Qat­tern. This one allows you to quickly and eas­ily build a pat­tern… It’s kind of sim­ple, but a video might explain this better:

I did it to go with my blog theme’s new abil­ity to han­dle back­ground patterns… It’s work­ing alright so here is the source code! Play with it, break it and send feed­back… I’m sure things can be improved, if you’ve got sug­ges­tions, share them!