The Logo Factor Design Blog » flash

Logo design demo reel

Steve Douglas — Wed, 29 Sep 2010 17:18:24 +0000

Logopalooza 2. A two minute and eleven second showcase of some of our work. Includes logos and a few Flash animations tossed in for good measure

Been buried in video production for the last couple of days, working on this demo reel, a followup to Logopalooza, our first logo design video (at 60,000 views and counting, a pretty worthwhile endeavor). Logopalooza 2 is a little more ambitious (even if it is smaller and shorter). This video was setup as high-def, we’ve added a couple of Flash animations to the mix, tried to make it a little more snazzy than just fading a bunch of logos in and out. As part of the project, we also created opening and closing sequences that we can use in other productions.

Video is a natural way for designers to showcase their work, and if our somewhat limited experience is any indication, a decent way to promote yourself through the various social networks like YouTube, Twitter and what have you. It’s not that terribly difficult either (though it does take a helluva lot of time and a lot of disk drive space – the source file for this project is around 30 gigabytes). The video above was built in Flash using various logos, Flash .SWFs and movie clips. If you can get your head around that, you’re pretty good to go.

If you need some technical info on converting your source Flash files to video, see here for the basics and here for a couple of tutorials. If you have any questions, drop ‘em in the comment section and I’ll try to answer them.

Animated logos for HD video using Flash

Steve Douglas — Thu, 23 Sep 2010 04:01:23 +0000

In this second half of a two-part tutorial, we’ll take a look at creating Flash logo animations of various complexity specifically for HD video intros. We’ll also show you how to reverse engineer-completed Flash files.

As we mentioned yesterday, the most important part of this exercise is to start your Flash animation with video in mind. The first aspect is the frame speed of your Flash document. Set that at thirty frames a second (30 FPS) so that the Flash animation will be compatible with QuickTime later on. The other is overall image size, either 1980px x 1020px or 1280px × 720 px (the recommended size for YouTube). Ironically, the first two examples we’ll take a look at were originally created for Flash presentation only, and reverse-engineered into HD video after the projects were completed. That requires a little more in prep-work that we’ll cover at the end of this post. As with part one, this tutorial assumes that you have a working knowledge of Flash and understand the basic concepts of tweening, symbols, movie clips and creating .SWF file.

Flash animations with vector objects

Flash animations that contain vector based objects (only) are the simplest to work with. Take this animation for CRW Promotions – a recent logo animation project at The Logo Factory. The logo design is relatively simple, contains vector shapes and I was able to break it down into 5 basic elements.

The ‘circles’ in the microphone were built using one Flash symbol (1) and the other elements (2 – 5) were set up as individual symbols, placed on their own layers in Flash and ‘tweened’ to create whatever movement we wanted.

As this movie was to be used on websites, we were concerned with file size, and by minimizing the number of symbols, and keeping everything vector based, the .SWF file is under 16K. This animation is a textbook example of a logo lick. Once the animation is completed, you can simply output the movie for HD video as outlined here.

Turning Flash logo animations into HD video intros

Steve Douglas — Wed, 22 Sep 2010 04:01:29 +0000

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

The most important part of this exercise is to start the Flash animation with video in mind. Flash is notoriously difficult to edit complex animations once they’re completed, so it’s best to get as many ducks in a row as possible from the get-go. The first is frame speed of your Flash document. Set that at thirty frames a second (30 FPS) so that the Flash animation will be compatible with QuickTime later on (Flash’s default frame speed is a tortoise-like 12 FPS). Keep in mind that animations set-up with slower frame speeds will really rip if they’re just dumped into a 30 FPS video and you may have to expand the original timeline.

Movie image size

The size of the image, or stage, area of your Flash animation depends completely on the size you’ll need the video version to be. As a QuickTime movie is basically a series of rasterized frames, the rules that apply to pixel-based bitmap graphics also apply here. You can always reduce your final version, but you should never enlarge it. There are some work-arounds (Flash uses vector based graphics) but we’ll not confuse the issue at this point. Also keep this in mind – the larger the image size of your final video, the larger (sometimes monstrously so) all your files will be. And the amount of rendering and saving time you’ll need goes way up. Bottom line – weight the image size of your video carefully, hopefully striking a happy medium. The sizes you should work at are as follows – 1980px x 1020px or 1280px × 720 px (the recommended size for YouTube). Keep in mind that you can set up videos at any size (for web use) but these are the sizes you have to use for HD video insertion.

Exporting Flash to QuickTime

Once you’re ready to export your Flash animation to video, simply export it as a Movie file. Flash’s integration with some video codecs is a but hinky, so we want to export the animation as a raw QuickTime file, using the highest quality possible. This will become our video source file, from which, using QuickTime Pro, we can export videos six ways to Sunday. The file size of these puppies will be fairly large (a raw, seven second HD QuickTime video at 1920px × 1080px will weigh in at just over 2 GBS. Yes, gigabytes). While a file of that size will show off any logo animation in all its glory, it’s pretty impractical for firing things around to remote clients over the interwebs. Thankfully, we can compress the movie using QuickTime Pro without any appreciable loss in quality.

Using QuickTime Pro to compress movie

When you open a raw QT video in QuickTime, you’ll be presented with all sorts of different export options. For ease, compatibility and a decent sixe/quality trade-off we use the H.264 codec. There’s a couple of newer, better ones, but this is pretty well an industry standard and any video editor will be able to add your videos to his or hers. We want the logos in the video to really sparkle, so we’ll crank all our settings to the highest quality available. The image reduction is remarkable – a 2 GB raw QuickTime file will compress down to about 2 MBS (higher if there’s a lot of bitmap graphics incorporated into the movie). And that’s it. You’re now on your way to creating HD video from those lovely Flash animated logos.

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.

HD video logo animations using Flash

Steve Douglas — Sat, 18 Sep 2010 12:48:53 +0000

At the shop, we’ve been creating Flash logo animations for years now. As a design studio that specializes in logos, it was always a natural extension, and something that I like to think we’re pretty good at. One of the often overlooked features of Flash is the ability to turn animations into video, and in particular, HD video. Accordingly, I thought you might like to see the new 4 second video introduction that we’ve been working on at the studio. The animation (after the jump) was created originally in Swift 3D by Electric Rain, a nice little 3D animation package that can export as .SWF files and, as in this example, QuickTime video. The HD source animation for the video is 1980 px X 1080 px and weighs in at a couple of gigs. The version featured has been reduced to 560 px X 318 px and weighs in at 2.1 MB.

If you want to convert Flash animations to video, there’s some tweaky stuff you’ll need to know, so we’ll be featuring a step-by-step tutorial later in the week, using a couple of recent HD video logo animation projects (follow us on Twitter or Facebook for announcements of new posts).

Snippets: Crowdsourcing advice for designers, IE6 must die & more unbiased logo reviews

Steve Douglas — Fri, 05 Feb 2010 18:04:13 +0000

Speaking about Microsoft, the Internet Explorer 6 Must Die meme just got a lot louder, with Google announcing that they’d stop supporting IE6 come March. If you’re not on IE6, good for you. If you are on IE6, you’re probably not reading this, because our site is all hinky and broken. Thanks to IE6. [Mashable]

Victors & Spoils front-man Evan Fry doles out some great advice for designers entering design contests a.k.a. crowdsourcing projects. Runs the gauntlet from forgetting about getting paid, to doing lots of revisions and forgiving hungover contest holders who neglect to give any feedback. In other words, cough up lots of free shit to show Victor & Spoils paying clients while Evan heads off to the pub. Awesome. [Talent Zoo]

Speaking of the “world’s first ad agency based on crowdsourcing principles“, Victors & Spoils got so excited about their Dish Network design contest they forgot about pesky licensing and copyright issues, uploading the Adobe Berthold Akzidenz Grotesk font set to the 99designs server so that grateful participants could “Grab it. Download it. Use it. Be brilliant with it“. Shortly thereafter, they removed the font, due to pesky “licensing and copyright issues“, telling everyone that this was a “bummer“. [99designs]

Logoblog.org, an “independent and unbiased” logo design review site that has absolutely nothing (wink, wink) to do with Logo Design Guru (“reviewed” at number one with 4.73 stars out of five) have fallen positively in love with design contest site Myrcroburst, placing it at number two in their “Top Ten Logo Company Reviews” and awarding the site 4.7 stars out of five. And just like having nothing (wink, wink) to do with online design company Logo Design Guru, the “unbiased” Logoblog.org review site has nothing (wink, wink) to do with Mycroburst, which happens to be owned by The Guru Corporation, owners of Logo Design Guru. Hooray for transparency and unbiased reviews. [Guru Corporation]

Adobe, like a jilted lover, continues to have a hissy fit over the Apple iPad‘s lack of Flash support. Taking the feud public, the makers of every graphic design program in the history of ever, published a blog post calling Flash the Apple iPad’s “broken link.” If that wasn’t enough, Adobe platform evangelist Lee Brimelow published a series of screengrabs to illustrate what this lack of support meant to the average surfer. Alas, one of the screengrabs was from a notorious porn site (right). When tech bloggers guffawed that Adobe had “played the porn card“, Adobe went all passive-agressive, just like a typical ex, claiming the inclusion of the Bang Brothers image was only a joke dammitall. Others pointed out that Adobe was bang on the money, because if you can’t surf for porn on the iPad, what’s the purpose of the bloody thing in the first place? [Wired]

Creating a 3D spinning logo animation

Steve Douglas — Wed, 25 Jun 2008 13:37:52 +0000

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.

Anatomy of a flash logo animation

Steve Douglas — Tue, 24 Jun 2008 21:02:17 +0000

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.