Anatomy of a Smilebox

The above YouTube video is a live capture of the intro animation I recently created for a new collage design.

divider

This November marked the 7-year anniversary of my working relationship with Smilebox.  After all this time, people still ask me what (exactly) it takes to create these interactive, expressive designs.  The answer is always more convoluted than I intend.

Working with multiple tools – like Flash, Illustrator, and Photoshop – a producer or animator begins with a storyboard or layered graphics file and a technical brief.  Much needs to be inferred from these two documents, including how the overall interaction design will function including what, if anything, will be animated.  This is the “soft” side of Smilebox design – the “art” side – where you need to have a firm grasp of typography, color theory, motion graphics and animation techniques, and the ins and outs of storytelling.

divider

anatomyOfASmilebox_xmlSnippet

divider

In a tight 2 – 3 day turnaround period, working with the layered graphics file and the technical brief, I create basically two designs: one that the originating user will edit and customize in “edit mode” within the Smilebox client, and another that will be seen by the receiving user via email, print, or online.

Because both experiences vary wildly, I’ve found that treating them as unique designs has distinct advantages in terms of production efficiency.

divider

anatomyOfASmilebox_timeline

divider

The technical side to creating a Smilebox design requires moderate to advanced knowledge of ActionScript, object oriented programming, and XML.  Many animators rely heavily on built-in tools native to Flash – timeline tweens, for instance – to orchestrate complex, visually engaging animations and stories.  Others, like myself, chose to marry these sorts of native tools with ActionScript and TweenLite.

Anatomy of a Smilebox - actionscript

Those of you in the software industry know the unique challenges designers, animators, and producers face in the design, creation, and development for live software that is in a state of evolution.  Smilebox is no different.  Each week, developers – working in an Agile development environment – focus their energies on sprints in an effort to continually push the product forward.  As they adjust the client, so too must the designers, animators and producers adjust the ways in which they design/develop collages, photo albums, scrapbooks, slideshows, invites, and greetings.

In this ever-evolving environment, I’ve found making notes on my processes, sticking points, and questions has helped me hone my skills and continually improve the way I work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s