Around the shop, we pride ourselves in coming up with decent animations using client logos and Flash (see here for a few flash animation examples). I’ve always viewed animation and logo design as going hand-in-glove, especially when it comes to the web, and I’ve been messing around with Flash since 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 cobble together a Flash logo animation that isn’t too shabby in the ‘wow factor’. I’ve never been content with just ‘breaking’ a logo apart and then having it reassemble into a final form, but always try to push logo animations past beyond just moving bits of the design around the screen.
For what it’s worth, we’ve often been told that The Logo Factory has a certain ’style’ when it comes to logo animation, and I often get asked about the medium and our Flash animation techniques. Accordingly, I thought it would be fun to publish an Anatomy of a Flash Animation – a quasi-tutorial on how we put together fairly complicated animations using the original logo as the animation itself, or as the lynch-pin for a more elaborate movie production. We’ll use a recently completed project, Junk Boys, a Toronto based ‘junk removal service’ for whom we designed their company logo (above) and other branding bits and pieces like business cards (below) and brochures. In order to illustrate the various parts of the animation, we’ve broken the movie down into a scene-by-scene anatomy, and each scene can by viewed individually, followed by the entire shebang. If you’re impatient, you can view the full animation here.
As this was a new launch, when it came to an animation for their website, Junk Boys wanted a ’slick’ presentation that somehow illustrated what it was their company did – namely pick-up of garbage and junk using a small fleet of trucks and vans. As we’d worked on several previous design projects with the client, I was given free reign on the direction of the project and allowed a bit of time to brainstorm on how to portray the service effectively.
We had decided fairly early on (after a few motion studies) that a simple looped animation – say with the two Junk Boys characters sweeping and moving the featured garbage can about – wasn’t going to have enough ‘oomph’ for the client’s needs. We figured that the only way to illustrate the client’s services 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 incorporated the logo (as opposed to featuring only the logo) and a production that was a little more complicated than your average animation. A project of this scope also requires more pre-production planning than usual – often, I’ll create a Flash logo animation ‘on the fly’, winging it through trial and error until I get something that clicks. Animations of the type we planned for Junk Boys requires much more detailed planning and storyboarding.
Pre-production. Setting up for the animation.
As this animation was primarily destined for website use, I had to be cognicent of file size, and needed to use the Flash’s symbol ability (symbols are items that are labeled with a certain name, stored in an object library, and can be used repeatedly without bloating the animation file size). Wherever possible, I also wanted to embed symbols within symbols, duplicating images wherever possible.
In terms of style, I realized quite quickly that the two Junk Boys characters, while cool in the logo, where illustrated in a highly-stylized manner that didn’t lend itself to animation without looking ‘canned’. To get around that, I created a new set of derivative characters with a little more personality and more importantly, the ability to be animated fairly easily. On top of the new character treatments, 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’ up as well as the garbage that would need to be scattered about.
Any additional artwork was created in Adobe Illustrator as to maintain the vector format editability and scaling, and as I worked through the production of the animation I also added vector artwork and masks as they became needed. By the time I was done, there were over 72 ’symbols’ in the Junk Boys animation library. One 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. In terms of the movie ‘timeline’ it was set up as 7 different scenes for ease of editing. A Flash movie with loads of layers and tweening can become hard to manage, and setting up complicated productions in unique scenes means that I can edit each scene individually, without impacting the rest of the movie.
Scene 1: The Logo Intro.
So that we could get on with the guts of the animation, I wanted to get the logo into the frame as fast as possible, rather than messing about with overly complicated assembly sequences. A fade-in using an alpha channel would do the trick, but for a little more ‘oomph’, I threw in a 3D rotation of the original logo shield portion, created using Swift 3D. If you’ve got the right gear (Swift 3D is excellent) ’spinning logos’ like this are fairly easy to do but keep in mind – when a logo ’spins’ 180 degrees, any writing featured in the logo will be backwards, not entirely a good thing. This generally isn’t a problem with straight-on spins – a little deft editing in Flash and we can remove most of the ‘backwards’ frames so that the logo is always right-way round throughout the sequence. This ‘trick’ also 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 ‘tweening’ but rather a frame-by-frame approach, similar to traditional animations. This can bloat 3D logo animation files unless we use some caution in number of frames and rendering quality.
View Scene 1 here.
Scene 2: The Skyline Intro.
Part of the movie ’script’ called for a Junk Boys truck to roll across the screen, while a skyline was to roll across the background. This ‘throwaway’ scene would also give us some download time – as I wasn’t using a pre-loader in this animation, we needed some time for the Flash player to download the various symbols and artwork that would be used throughout the movie. The upcoming Truck Crawl scene required the truck artwork symbol, so I stalled the movie for a bit using a simple skyline introduction scene.
View Scene 2 here.
Scene 3: The Truck Crawl.
Once the skyline and truck are loaded, the movie progresses to this scene. The truck artwork was created in Adobe Illustrator using photographic reference from the actual Junk Boys trucks. The artwork is brutally simple and consists mainly of several cloned symbols – there is only one wheel that’s used twice, the logo is a symbol that will be reproduced throughout the animation and the various truck details are symbols pulled from the library. The skyline is actually 3 duplicated smaller objects laid side-by-each. The CN Tower, a Toronto landmark, was added at the last minute, on a lower layer and at a slower crawl rate than the skyline in order to give some sense of depth.
View Scene 3 here.
Scene 4: The Truck Beauty Passes.
This scene required a 3/4 front view of the Junk Boys truck, once again created from photos supplied by the client. There’s actually only one truck in this sequence – the artwork is flipped to go in the opposite direction, and the logo, added to the player in the previous scene is distorted through the Flash shear function.
It was decided early on not to feature the Junk Boys characters on the truck logos (even though they are in the real world vehicles) in order to emphasize the name of the company without too much distraction.
View Scene 4 here.
Scene 5: Introducing the house and the Junk Boy characters.
This is actually the most download intensive scene of the whole piece. It features new house artwork, a new version of the truck (3/4 rear), open doors and the re-jigged Junk Boys characters. In order to focus the animation on the characters, and separate them from a cluttered background, I placed a 50% transparency black mask over the entire shooting match. Folks, meet the Junk Boys. Junk Boys, meet the folks.
View Scene 5 here.
Scene 6: More Character Movement.
Now that we have the characters in place, might as well let them strut their stuff. And while they’re doing so, the last bits and pieces of artwork – masks required for the next scene – are busy loading.
View Scene 6 here.
Scene 7: Clean Up and Wrap Up.
At this point, the Flash animation has all the symbols it needs to run, so I created a rapid-fire animation of the characters loading up the truck with the various bits of garbage scattered about. By keeping the animation fairly frantic, we can camouflage that the characters aren’t actually doing anything at all (the animation is actually fairly haphazard in moving the characters and garbage about). As it’s fast, and short-lived, the animation serves its purpose quite well without adding unnecessary details (and more importantly to the client – time and budget overruns). Once we finished clearing the garbage from the scene, we added another logo rotate, timed to match the first frame of the movie. By doing this, the movie can be run as a loop.
View Scene 7 here.
You can view the complete Junkboys Flash Animation here. See here for more Flash logo examples. If you have any questions about Flash logo animation, please feel free to comment on this post. I’ll get you the answers as soon as I can.
Related posts:
Steve, thank you again for doing a fantastic job on the “JUNK BOYS” logo and flash animation. You were truly able to capture the look we wanted.
Best Regards,
Darren Cook
Founder & CEO
JUNK BOYS Inc.