Flash Animation Tutorial - Junk Boys part 1
Client: Junk Boys Toronto
Project: Flash animation movie (advanced) Part 1 | 2

At The Logo Factory studio, we've always viewed animation and logo design as going hand-in-glove, especially when it comes to the web, and we've been animating logos with Flash since the software was introduced in the mid-ninties (when it was called Future Splash and wasn’t owned by Macromedia). Certainly, animating a logo in Flash has some limitations, but the file size and compatibility makes the resultant movies well worth-while and if handled correctly, can be quite effective in setting a logo apart from static counterparts. As long as clients aren’t expecting broadcast quality animations (though, that is possible in some instances) we can usually develop a Flash logo animation that's fairly high in the ‘wow factor’. Not content with just ‘breaking’ a logo apart and then having it reassemble into a final form, The Logo Factory has always pushed logo animations past beyond just moving bits of the design around the screen.

We're often asked how we create our Flash animations, especially by designers who use Flash themselves, so we thought it might be interesting to present a quasi Flash tutorial, using one of our actual projects. Accordingly, here's a step-by-step anatomy of a Flash logo movie, using a recently completed project for Junk Boys, a Toronto based ‘junk removal service’ . In order to illustrate the various parts of the animation, we’ve broken the movie down into the movie's individual scenes.

The setup
We had decided fairly early on that a simple looped animation - say the Junk Boys logo assembling as part of a Logo Lick - wasn’t going to have enough ‘oomph’ for the client’s needs. We decided that the only way to illustrate the client’s company was to create a mini-movie that illustrated, in very graphic terms, the various steps in the company’s clean-up services. That would require the development of a full-blown Flash movie that was a little more complicated than your average animation. A project of this scope also requires more pre-production planning than usual - often, we'll create Flash logo animations ‘on the fly’, winging it through trial and error until we get something that clicks. Animations of the type we planned for Junk Boys require a lot more planning and story boarding.

Top of page

Pre-production. Setting up the artwork
As this animation was intended primarily use on the Junk Boys website, we had to be cognizant of file size, and needed to use Flash’s symbol ability (symbols are artwork items that are stored in an object library, and can be used repeatedly without bloating the animation file size). Wherever possible, we also wanted to embed symbols within symbols, duplicating images wherever possible.

In terms of style, we decided that the two central logo characters didn’t lend themselves to animation without looking ‘canned’. To get around that our designers created a set of derivative characters with more personality and from a technical point of view, the ability to be animated fairly easily. The animation also required various bits and pieces developed, from the Junk Boys trucks (developed from photographic reference) to the house that the two Junk Boys characters would be ‘cleaning’ and the garbage that would need to be strewn about.

This additional illustration work was created in Adobe Illustrator as to maintain the vector format editability and scaling, and as we worked through the production of the animation we also added art and illustrations as they were needed. By the time the animation was completed, there were over 72 ’symbols’ in the animation library. An added benefit to having source files created in Illustrator is that the various graphics can be also used as design accents in other marketing materials such as brochure design and the company's website. The movie ‘timeline’ was set up as 7 different scenes for ease of editing. A Flash movie with lots of layers can become hard to manage, and setting up complicated productions as individual scenes means that each scene can be edited individually, without impacting the rest of the movie.

Top of page

Scene one - the 3D logo introduction
In order to get to the main focus of the animation, we wanted to get the logo into the frame as fast as possible, rather than wasting time with overly complicated assembly sequences. A fade-in using an alpha channel would do the trick, but for a little more ‘oomph’, we developed a 3D rotation of a portion of the main logo - sans character - using a nifty animation programme Swift 3D. If you’ve got the right software (Swift 3D is excellent) ’spinning logos’ like this are fairly easy to create but keep this in mind - when a logo ’spins’ 180 degrees, any words featured in the logo will be backwards, not terribly effective for brand recognition and something that just looks wrong. There is a fix - with a little deft editing in Flash we can remove most of the ‘backwards’ frames so that the logo is always facing the right-way throughout the sequence. There's an added benefit too - this ‘trick’ has the added benefit of dropping almost half of the rendered frames, a bonus when it comes to file size. Unlike Flash, Swift 3D does not use Flash's ‘tweening’ system, but renders each animation sequence frame-by-frame approach. Similar to traditional animations, this can increase animation files - especially if we're rendering at a high quality, an option in most animation software.

Top of page

Scene two - the Toronto skyline introduction
Part of the movie ’script’ called for a Junk Boys truck to roll across the screen, while the Toronto skyline (or something that looked vaguely like the Toronto skyline) was to roll across the background. This throwaway scene would also give us some download time - as we weren't using a pre-loader in this animation, we needed some time for the Flash player to download the symbols and artwork that would be needed throughout the movie. The next scene - a Truck Crawl - required truck artwork to be loaded, so we stalled the movie for a bit using a simple skyline introduction.

Flash animation tutorial part 2 >

Copyright

This article is copyright 2008 The Logo Factory Inc./Steve Douglas. The Flash animation and Logo Lick examples, movies and animated logos shown in our portfolio are the property of the respective copyright and/or trademark holders. Used by permission. All other rights reserved. Website material is copyright 2008 - The Logo Factory Inc. All rights reserved. If you'd like to use any of our web site material in design publications, not-for-profit reproduction or for educational material, and would like non-watermarked versions, please contact us.