Flash is groovy and all for web presentations, but what if you wanted to convert that nifty Flash logo animation into a HD video intro? You can. In fact, it’s pretty simple. Here’s part one of a step-by-step tut on turning Flash animations into HD video intros using several recent projects at our studio.

Whenever we develop Flash logo animations for clients, the question invariably comes up – “can I use this in my video?” And as a matter of fact the can. Converting Flash animations is relatively simple (once you know what you’re doing) and despite some tweaky stuff (that we’ll cover in part two) with some time, and the right tools anyone can be cranking out HD video animations, using Flash, pretty well right away. The following tutorial assumes that you have a working knowledge of Flash and understand the basic concepts of tweening, symbols, movie clips and creating .SWF files. If that’s you, read on..

Software you’ll need

The software that I use to get decent video results? Flash (any version – I often use Flash MX, featured in this tutorial, because it’s pared down and faster to use without Action Script), QuickTime Pro (the Flash render engine doesn’t seem to like the H.264 codec, which we’ll need) and Fireworks for any bitmap graphics (we use the .PNG format for a multitude of reasons, most importantly the ability to feature transparent backgrounds without any image quality loss). Naturally, all our logo material will be vector based and come from Illustrator. If you want to add sound or music to Flash or the final video, that’s another matter entirely, and will require an application like Final Cut or its companion Soundtrack. For the sake of this tutorial, we’re going silent. If you want to add 3D to your Flash animation, you’ll need to get acquainted with Swift 3D by Electric Rain (the PixelWurx animation at the bottom of the page was created using the Swift 3D render engine). You’ll also need a fairly hefty hard drive as video files (especially raw QuickTime files) are huge. You won’t want to run out of storage half-way through a project.

Frame rate

Movie image size

Exporting Flash to QuickTime

Using QuickTime Pro to compress movie

Caveats

The QuickTime render engine that comes with Flash doesn’t like embedded movie clips when outputting a video file from Flash. In fact, most of the time, QuickTime will ignore the clip and simply render a still frame for the duration of the clip. In order to get around that, you’ll need to break clips into frame-by-frame animations. We’ll cover that tomorrow, as well as show you how to resize old Flash animations into the larger aspect ratios of High-Definition video. In the meantime, check out this nifty little video (and logo design) we produced for PixelWurx, a startup multimedia company.

Related posts:

1. HD video logo animations using Flash
2. Animated logos for HD video using Flash
3. Logo Design Workshop Video

No logos were harmed

“It doesn’t look like it, but it’s a French film,” said Schmerkin, telling the live Oscars audience and TV viewers that he’d also like to thank the picture’s “3,000 unofficial sponsors“, referring to the logos featured in the flick, adding that “no logos were harmed in the making of the film“. Schmerkin also said it took six years to produce Logorama, “So I hope to come back here with a long film in about 36 years.”

Logorama beat out four-time Oscar-winning animator Nick Park, a favorite in the category for the latest Wallace & Gromit film, A Matter of Loaf and Death. For a little more back story, we touched on the Logorama Oscar nomination The movie also won the Kodak Discovery Award for Best Short Film at Cannes last year. What looks like an ‘official’ Logorama website is here. The Logorama movie poster is below. For more about the making of Logorama, there’s an interesting behind-the-scenes interview over at Creativity Online.

Related posts:

1. Logorama. Short film featuring corporate brands as villains and heroes gets Oscar nod.
2. Snippets: The Oscar weekend, Logorama, Blog Fail & new Ubuntu logo edition
3. Oscar best picture nominations and their logos

Blog Fail: Just over a year ago I wrote a blog article called Why you should crowdsource your logo. If you don’t have enough time to read the piece (it’s long, wouldn’t blame you) let’s just say the link will lead you to a 5,585 word diatribe that’s a rabidly anti-crowdsourcing article into which I crowbarred as much snark as humanly possible (and then some) into 16 reasons why crowdsourcing a logo may be a very. Bad. Idea. Alas, at several times since then, the article has been twattered around Twitter, which is cool, by people who think it’s a pro-spec article, which it most certainly isn’t. All of this proves one of two things. Either many people on Twitter don’t read the links they’re twattering, or I need to step up the snark factor when I write my next anti-spec-work screed. The former is possible, the latter not so much. I’m not sure if it’s possible to squeeze more snark into any article before it becomes a black hole of sarcasm and irony, sucking the common sense from every article on this website.

Blog Fail 2. Speaking about mucking up this bloggy thing, I wrote a bit yesterday that looked at the most knocked-off, copied and overdone approaches to logo design. Nothing terribly big deal, bit of a puff-piece really, that featured the Ubuntu and Joomla logos as prime examples of how popular logos can get knocked off left, right and center. You know, logo copying dooshbaggery and all that. Next thing you know, folks are getting all hopped up, claiming I’m hating on the Joomla and Ubuntu logos and that I’m holding them up as examples of crap design, even inducting them into some Bad Logo Hall of Fame. Trouble is, I like the bloody things. The Joomla logo is a clever combination of network imagery, little ‘networked’ people, all made up using the letter ‘J’ and the nifty little Ubuntu ‘Circle of Friends‘ logo is ground zero for all the copying I was carping about in the first place (for what it’s worth, I don’t have a Bad Logo Hall of Fame, real or imagined, either). Oh yeah, they also think I’m “arrogant“. And our work sucks. [Twitter]

Speaking about the Ubuntu logo (whoa, that’s a good segue), there’s a new one. As part of their new branding program, Canonical Ltd (the folks behind Ubuntu) announced the new mark yesterday. “After six years it was time to refresh the face of Ubuntu starting with the word mark. We wanted Ubuntu to reflect the precision and engineering that sits at the heart of the product. The new logo reflects this but not at the expense of the immediately recognizable circle of friends“. You didn’t ask my opinion, but if you did, this is what I’d say: “Best logo in the history of ever“. Seriously. Ever.

Now, if you’ll excuse me, there’s some villagers banging at the door.

Related posts:

1. Logorama wins Oscar for best animated short film
2. Logorama. Short film featuring corporate brands as villains and heroes gets Oscar nod.
3. Snippets: The Easter weekend, spec work, new freelance site & Pink Ponies round-up edition

As the 2010 Winter Olympics in Vancouver are grinding down to a finish in the next few days, we may be a tad late to the party with this brilliant BBC animated ad for The Winter Games. Still, it’s worth a looksee, as this is unlike any Olympics ad we’ve seen before For starters, it doesn’t feature any live clips from actual Olympic events. Most notably, the spot avoids the official day-glo Silly Putty logo while still tipping a hat to the real-life Inukshuk monument that stands at the top of Whistler Mountain. Quick overview: the ad features a bloody great bear that rips the Inukshuk’s head clean off and using almost every winter sport from The Games, our little hero dude has to get it back. Great stuff, all set to an epic soundtrack. For more on what an inukshuk is, and how it relates to the Olympic brand, see our bit on the Vancouver Winter Olympics logo from a few weeks ago.

[Hat tip: Designer's Couch]

Related posts:

1. 2010 Vancouver Winter Olympics logo. Who designed it, what it means & why some don’t like it.
2. 2014 Sochi. Russian Winter Olympics games logo
3. 2010 Vancouver Winter Olympic mascots. And how they met Pedobear.

Stumbled onto this over the weekend (hat tip: I Watch Stuff) and thought you might like a gander. This classic HBO 1980′s logo animation is full-blown logo porn that sees a detailed cityscape morphing into the famous TV network’s text logo. Many of you may be familiar with the spot, but HBO wasn’t available at all in Canada during the 1980s, and could only be viewed in the mid-nineties and early 2000s through technically illegal (though not enforced) Direct TV dishes using hacked cards (not that I’d know anything about such nefarious activities). Even those watching HBO illegally saw their satellite feeds go dark after the introduction of supposedly unhackable R4 cards (not that I’d know anything about this either). After that, Canada remained a completely HBO-free zone until October of 2008, when HBO Canada was launched (though that version is owned by Astral Media and Corus Entertainment, owners of The Movie Network and Movie Central respectively, not Time Warner as in the US). Anyhoo, even though the clip is over twenty five years old, that’s why it’s relatively new to me and hope you’ll understand why I think it’s so cool.

What’s even cooler is this behind-the-scenes video that illustrates how the spot was made, sans any CGI special FX, using itsty-bitsy models created with an almost pathological attention to detail. The documentary is a little dated, especially the cheesy music that would do any retro porn movie proud. It is, however, worth a looksee for the pure craftsmanship and love that went into a logo spot that lasts less than 30 seconds. Hope you enjoy it as much as I did. And if it’s a little old hat, please forgive me.

We don’t get out much up here.

Related posts:

1. Logo porn revisited: Another look at awesome DVNO motion video by Justice
2. Behind the scenes of the online logo design game
3. Obama logo design – behind the scenes

Little bit late to the party on this one (this logo was released December 15 and I sorta neglected it courtesy the Christmas and New Year hubbub) but despite my tardiness, the UEFA Euro 2012 scoccer logo is still worth a mention and a looksee. So let’s.

Developed by Portuguese design group Brandia Central, the design will represent the 14th UEFA European Football (soccer) Championship, scheduled to be held in Poland and Ukraine in July 2012. For what it’s worth, this is only the third time that the championship hosted jointly by two countries, a fact that was an integral factor in the creation of the logo. And while the announcement was ignored in North America (we tend to like the other version of football), the championships are an awfully big deal in Europe, with a predicted 1.4 millions fans taking in the matches at the various stadiums and the TV coverage broadcast to 200 markets. From a personal POV, I absolutely love the logo (while many others are decrying its complexity) and think the development video (below) to be brilliant – a must-see for any graphic designer, particularly those interested in the logo design niche. It explains, in exquisite graphic detail, the thought processes behind the logo; concept, execution and color choices. If only more logo design projects were this thought out.

There’s a lot going on in this logo, both stylistically and symbolically, but there’s not one piece of the design that doesn’t have a reason for being there. Typically, and despite being quite cool with illustrative logos, I’m not a big fan of extraneous War-and-Peace extravaganzas, but I’m more than willing to make an exception here. The font work is lovely too.

Logo described as “a bunch of flowers” and “too girly”

Will the design resonate with soccer fans? Who knows. Reception has been mixed. “Too girly” seems to be one of the main beefs, with some fans carping that a “bunch of flowers” has no place in the presumably masculine world of European soccer. Some graphic designers were quick to jump on the logo, criticizing as “too complex” with some claiming that the logo wouldn’t effectively convert to black and white (not true – see below).

I’m glad to see sports organizations pushing the envelope back a bit (I think we can all agree that this is a much better example of an unorthodox sports logo than the arguably disastrous London Olympics logo trotted out a few years back). Also, and as mentioned earlier, I tend to lean towards more illustrative logos myself so perhaps I’m a little biased on what is, and isn’t effective for this particular design. What about you? You like or no like? Too complex or a decent visual exercise? Have at it in the comment section if you’re so inclined.

Hat tip: David Airey‘s Logo Design Love

Related posts:

1. Obama hearts Milton. Glaser becomes first graphic designer to be awarded National Medal of Arts
2. Twitter graphic $6 proof that design crowdsourcing works? Not quite.
3. European Logo Design Annual contest…

A few posts ago, we featured an anatomy of a Flash logo animation in which we took a general overview of an animation project typical of The Logo Factory. That post glossed over the 3D portion, so I figured this time around, I’d delve a little deeper into spinning logos using Electric Rain’s Swift 3D and Macromedia’s Flash showing you, step-by-step, how we do it. Rather than reverse-engineer an earlier project, I figured I’d pick a previously ‘Un-Flashed’ design to work with, in this case, one of our Vox Underground music logos. Generally speaking, the Vox Underground logo isn’t the type of design for which I’d opt to animate in 3D. It’s a little complex (and the more complex the artwork, the larger the resultant Flash file usually is) and runs the risk of being ‘cluttered’ once we add depth and start spinning it around. On the other hand, creating a 3D logo animation of this home-grown design allows us to demonstrate the concepts involved fairly dramatically, so we’ll give it a shot. The screen captures that follow were all made during the animation process and are actual steps that we’d use if this animation were a live gig. Keep in mind, the tutorial is also written for folks who have a little knowledge of Flash animation and the various concepts involved.

Preparing and importing the .AI file.

Any professional logo design project should end up with vector based file formats of the design, Swift 3D uses vector format, so importing your artwork into the animation software should be a snap. Simply export the logo as an Illustrator .ai file and you should be set, with a couple of important caveats. Swift doesn’t like blends, and as this is primarily an RGB program, you should reset all logo spot colors and CMYK palettes to RGB. Also, Swift sometimes has an issue with complicated compound path objects (items – such as the letter ‘O’ – where there’s a ‘hole’ in the object). You may have to play around in Illustrator, releasing the compound path and then recreating it, to get the artwork to import correctly. I usually back save the original logo artwork as a ‘Legacy’ file into Illustrator 8, and then import onto the stage in Swift. When it’s imported successfully into Swift, your artwork should look something like this. The left panel is how your artwork will look from a ‘front’ view, while the right panel is how your artwork will look from a ‘top’ view.

When Swift 3D imports your .ai logo design file, it is already converted into an extruded object (an object that has depth). The depth of all the elements that make up the logo are uniform, so while the object is technically 3D, it’s not ready to animate just yet. We want to give the pieces of the original logo design varying depths so that the finished animation is more interesting, and more importantly, gives places for shadows and highlights to appear. We do that by varying the scale of the objects using the ‘Z’ Axis (called the Z Factor in Swift). By Ungrouping the artwork into its various elements, selecting individual elements and adjusting the Z Factor, we can create a multi-tiered 3D object that will make for a much more dynamic movie. In terms of the amount of Z Factor to add, there are no hard rules – simply play around with the amount of Z Factor until you arrive at a satisfactory result. Keep in mind that the parts of your logo that are in front (in this case the text making up Vox Underground) will need to be higher, while background objects (the wings and the heart) will need to be thinner, therefore a smaller Z Factor will be required. Important note – make sure your X Factor and Y Factor scales – the height and width of your logo – remain the same. Changing one or the other will result in a distorted aspect ratio of your original artwork.

By switching from the various camera angles, you can tell how your logo is shaping up in terms of relative depth. In this case, we’re looking at the Vox Underground object from a top view, and the multiple Z Factor depths are readily apparent. The logo is now shaping up to be a multi-planed object that will animate quite nicely once we’re done. Depending on the complexity of the logo you’re working with, and the amount of patience you have, this step can be quite time-consuming. Having said that, keep in mind that the more time you spend here, the better the end-result will be.

Throughout the animation process, you’re probably going to be using the Swift 3D Trackball to spin the logo object (this can also be done with X, Y and Z co-ordinates, but I always prefer to work ‘visually’). Here’s a couple of hints that will save you a lot of grief. The Trackball Tools palette contains the Trackball itself as well as three Axis buttons (you can spin the logo along all three). The Trackball also features a set of spin increments, in degrees, and I suggest you always use a locked amount of rotate, especially if we’re animating a simple spin. It’s much easier to undo a mistake by simply reversing the Trackball than it is trying to figure out how to reverse a ‘free form’ movement.

Once we’ve finished adding a variety of depths to the logo elements, it should look something like the screengrab below. By using the Trackball we can spin the object around, making sure that parts of the logo aren’t missing (a background element has more depth than a foreground element can cause this). At this point, you need to group the various elements again, as we’re going to be animating them as a whole rather than individually. And now that we’ve finished setting up the logo as a 3D object, we can also add some lighting to the animation using Swifts nifty Light Source Trackball.

By default, Swift 3D features two lights sources – left and right – which, as anyone who knows about photography will tell you, gives very ‘flat’ lighting, with little or no shadows or highlights. That’s not particularly effective, so we want to add at least one extra light (I usually place another light to the right and slightly above the object). As this logo is rotating right to left, there’s a point when the visible portion of the logo will be cast in darkness, so I also like to add another less powerful light, behind the object and to the left. This helps ‘fill in’ the logo when it’s turned away from the main light sources. Lighting an animation effectively is an art form in itself, but by trial and error, using Swift 3D’s light and intensity options, you should be able to obtain some bankable results fairly quickly.

Animating the 3D logo object.
Whenever I create a spinning logo, I always find it easier to use the top view to rotate the object. Simply select the logo artwork in the right frame and Swift will show you the Trackball options. By selecting the Top Spin icon and locking the rotate increment to 90 degrees, we’re now ready to set up our animation.

The spinning logo animation is set up using the Timeline in the Animation Tools. First, we need to decide the length of the spin by frame number, keeping in mind that more frames equals a smoother animation, but also ends up with a larger Flash file once we’re done. For the purposes of this exercise, I selected a 60 frame animation (that equals about a 5 second movie at Flash’s default 12 frames per second).

In order to spin the logo, we need to set up two sequences – the first rotate to 180 degrees for the initial thirty frames, and the final position at 360 degrees for the remaining part of the rotation. Click on the Animate button (red), click on frame 30 in the Timeline. Select the logo object in the top view window, and using the locked Trackball rotate the logo around 180 degrees so that the logo is now facing away from us. You’ll see a green line appear in the Timeline as Swift computes the object’s rotation and how to spin the various bits and pieces. To finish the sequence, click on the last frame of the timeline and rotate the logo to its final front-facing position. If the movie is looping, Swift will automatically remove the last frame so that the animation can loop smoothly, otherwise there would be two identical frames at the beginning and end of the animation causing the movie to halt for 1/12 of a second (believe it or not, that would appear as a ‘hiccup’).

At this point, the logo rotation sequence is done. If you want a more dramatic effect, you can experiment with various camera angles and positions. Swift 3D allows you to set up multiple Cameras and the Viewpoints of each can be viewed in the main window with varying effectiveness (keep in mind that you might have to adjust your lights, and the size of the logo object if it spins out-of-frame). For the purposes of this exercise, I selected a front-on camera view, with a long Focal Length. The focal length of the Swift 3D cameras is very similar to real-world cameras – the higher the length, the less perspective of the logo object as it spins. The shorter the focal length, the closer the view is to a wide-angle lens. As the Vox Underground logo is already complicated enough, I wanted to avoid the forced perspective caused by wide-angle lenses, so I changed the focal length from 50mm to 110mm.

Now that we’ve finished our animation, it’s time to render the movie frame-by-frame. Swift 3D offers a multitude of rendering options – color depth, specular highlights and shadows, curve accuracy and object detail. Keep in mind that the higher quality you set the options, the bigger the bigger the Flash file and the longer the render time (depending on your platform and your CPU resources). Luckily enough, Swift also features a ‘Render Selected Frame’ option, so you can render one frame of your movie while experimenting with various settings to see how things look. I generally crank up the Curve Accuracy (otherwise, round artwork can look jagged), set the Color Depth at Average Cartoon Color (any higher and a complex logo animation can become increasingly cluttered), turn on Specular Highlights and keep Shadows turned off. Once the animation has rendered, we can export the final animation as a .swft file (it’s actually a cleverly named .swf format).

Importing the raw Swift output into Flash.
While technically Swift movies (output as .swf files) can be added straight to HTML documents or used standalone, I like to take them into Flash for a few additional steps. This is done by simply importing the Swift .swf file into the Library of an open Flash document. This is the easiest part of the animation process, though here’s an important note – don’t import the movie onto the Flash stage. This will result in a mess of unconnected frames that will be very difficult to edit or scale.

By importing into the Flash Library, the Swift output of your 3D animation will be turned into a Movie Clip that can be used for a variety of purposes, and can be scaled like any other Flash symbol. Once the Swift animation file is safely embedded in our Flash Library as a Movie Clip, we can now drag it onto our stage for butchering (I mean, editing).

Fixing the backwards part of the spin.
One of the problems of a spinning 3D logo animation is that for 50% of the animation sequence, any wording that’s featured in the logo is backwards. While this is sometimes okay (if we’re animating a real-world sign for example), I usually like any wording to remain right-way-round. With a little editing in Flash this backwards type can be ‘fixed’ be removing the backwards frames and looping the animation at the correct point. By double-clicking on the animation Movie Clip, we can open the movie and inspect the frames. With this animation we can see that just before the logo turns backwards, the object is at a 90 degree position around frame 19. If we move along the time frame, we can see that this position is duplicated around frame 49, as the logo spins once again into a frontwards position. By removing the frames between these two timeline positions, we create a ‘cheat’ in the spin – the logo is always facing the correct way while still appearing to rotate through a full 360 degree spin. By editing these frames out, we also reduce the file size of the final animation.

Optimizing the animation for streaming play.
One of the problems with using Movie Clips in Flash is that the entire Movie Clip has to load before the movie can run, while a streaming frame-by-frame animation can run as each frame is loaded. As complex 3D logo animations (like this one) can be on the large size, we now want to create a streaming version that won’t hang as various bits and pieces load. In order to do this, we’re going to ‘break’ our final movie into a frame-by-frame version (important note – save a pristine version of your Flash document before starting to hack away). Firstly, we need to convert our Movie Clip to a Graphic. We do that by selecting the clip on the stage and selecting the Graphic option in the symbol toolbar.

Now, we want to set the Graphic to Play Once. This allows us to view separate keyframes for each frame of the Graphic we’ve now set up.

We know that the animation takes 29 frames to play, so we need to open the Flash animation timeline to that number of frames. After we’ve set up our timeline, we need to select the animation on the stage, and insert a Keyframe for every-single frame of the 29 frame sequence. As you add each Keyframe, you’ll see that each frame will feature an progressive incremental rotate as the Graphic ‘plays’ the sequence once. This is just like our original movie, but set up as individual frames.

Once we’ve added Keyframes for the 29 frames, we can now break apart the frames into completely separate artwork, using Option + B, or the Break Apart option found in the Modify pull-down menu. This ‘breaking apart’ will create a series of 29 individual frames featuring sequential artwork from our original movie. This setup will run as a streaming animation without the need to load an entire Movie Clip. This step is a little time-consuming but well worth-it, especially if the animation is used once and without the benefit of the brower’s cache feature. Also, a frame-by-frame animation can be exported from Flash as a Quicktime movie (Quicktime doesn’t recognize embedded Flash Movie Clips and renders them using only the first frame for the duration of the clip). That could be important as Quicktime is pretty handing for setting up your animations for upload to You Tube.

And that’s about it. All that’s left to do is export our new Flash animation as a .swf movie which can then be added to any HTML document.

The final spinning logo animation.
And here’s a look at the finished 3D logo animation as it might appear on a website.

If we wanted to be real critical, here’s a couple of things that we’d change. The relatively low frame number of the overall sequence (60) gives the animation a slightly herky-jerky motion, so we should probably set up a longer timeline in the original Swift animation. The backwards ‘cheat’ on the animation isn’t as smooth as I’d like it – I think I removed one too many frames in Flash – so I’d be more selective in frame selection and subsequent editing. Should point out that a lot of times, animations of this nature are of the trial-and-error variety, and it’s only through experimentation that you’ll be able to develop project processes that work for you and your particular logos.

All-in-all though, I think it’s a perfectly serviceable animation, considering we were working with a logo that wasn’t terrible suited to a 3D rotation in the first place. How long did our logo animation take? Total production time – just over an hour (including screenshots for this tutorial). If you’re interested in more of our Flash work, take a look at our Flash animation examples here. If you’re interested in The Logo Factory animating your logo, give us a shout. If you’re interested in what this Vox Underground deal is all about, it’s a little pet project of mine that’s devoted to music production and recording. You can download quite a few finished .mp3s from the music for Flash section of our main site.

As usual, any questions or comments, feel free to add them to the post. I’ll try to answer any questions you might have as soon as scheduling permits.

Related posts:

1. Anatomy of a flash logo animation
2. Animated logos for HD video using Flash
3. Turning Flash logo animations into HD video intros

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:

1. Animated logos for HD video using Flash
2. HD video logo animations using Flash
3. Creating a 3D spinning logo animation