Hardcore AS3: JibJab Starring You Headcut Application
JibJab Starring You, 28 million movies viewed in 4 months!
Why do all AS developers claim that ActionScript 3 is so powerful? because it is! Developing the HeadCut application for JibJab I could finally push to the limits many of the powerful features in AS3. This application required complex handling of BitmapData, PNG encoding, multi-part send simulation, etc.
When the great guys at TheLift gave me the specs for this app, I got thrilled and excited by the challenge. And actually it HAS BEEN a challenge. It took a few months of hard work, moving betwen Italy, Germany and Brazil to complete and integrate the RIA.
Starring You is a great system, invented by super-creative team at JibJab, to use your own heads in talking cartoons. The user can upload a library of images and cut from them a series of heads, with jaw selection in order to allow speech motion, to use in JibJab funny movies.
Movies can then be stored, sent, shared and viewed at will. During tests, I often involved my family and friends and laughed like crazy watching my beer-bellied brother dancing the hula, or my 77 years old dad going wild with charleston.
Take a look at JibJab Starring You, and enjoy some movies!
The system its quite large, and involved a lot of skilled people. Since I am usually called for impossible missions, my task was to produce the HeadCut Tool, with which the user can cut head and jaw, and generate relevant graphic files. Lots of headache and hard tasks to face, but in the end satisfaction was great, and especially I could use ActionScript 3 at full boost.
Cut your head
After selecting an image from the library, controls and multi-dotted curves allow the user to set borders of the head to be cut. Dots can be added and removed at will. Image can be rotated and zoomed.

Cut your jaw
Once head is cut, it is time to create the jaw. The tool allows to set jaw cut and to place it in relation to head centering.

Preview your jaw
Head starts talking for the first time. It's... alive!

Position head
Head can then be placed in relation to body positioning. Size and rotation can be fine tuned here. If the cartoon is in black and white, heads are rendered in b/w accordingly.

And then?
Lots of things happen after this step. Some PNGs are encoded and zipped, then sent to the server simulating a form file send. All parts of the head that then will be rendered in the cartoon are stored on the server with relevant meta-data about positioning, etc. Heads are then stored in the system, and the user can use them to populate and send cartoons. And, of course, laugh like crazy.
Take a tour of JibJab Starring You, you are going to love it.