Hardcore AS3: JibJab Starring You Headcut Application

Screenshot
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.
Screenshot

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.
Screenshot

Preview your jaw

Head starts talking for the first time. It's... alive!
Screenshot

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.
Screenshot

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.

Flash, ActionScript, OOP, object oriented programming, freelance flash developer, actionscript developer, flash programmer, flasher, rich internet applications developer, ria, flash games, flash 3D, web applications, ActionScript 2.0, free actionscript classes, swf, free flash downloads, free flash components, flash tutorials, actionscript tutorials, flash developer beijing, programmatore flash, sviluppatore flash, sviluppatore flash italia, sviluppatore flash roma, sviluppatore flash italiano, freelance flash developer, Flash, ActionScript, actionscript, OOP, object oriented programming, freelance, actionscripter, programmer, freelance flasher, actionscript developer, rich internet applications, ria, flash games, 3D, web applications, interface developer, ActionScript 2.0, classes, swf, useability, usability, free stuff, free code, free classes, Flash Components, Flash Developer, Flash Games developer, Flash MX 2004, Flash 8, Flash Developer in Italy, Italian Flash developer, Flash Sviluppatore roma, Flash Developer Beijing, flash developer china, flash Developer Bangkok