main-vox-underground-3d-logo

Animating a logo in Flash can net us some pretty impressive results. Turning logos into 3D and spinning them around is where animated logos shine.

Preamble and update: This post was written back when Flash was the go-to software for web animation. In recent years, Flash has been abandoned by many developers due to the presumed lack of support in Apple iPhones and iPads. However, there’s a responsive HTML5 workaround for this and while this movie was built in Flash as outlined in the tutorial, it’s playing as an HTML5 animation in the actual presentation here. The animation is still vector based, scalable, compatible with mobile devices and is responsive to screen size. You can view more logo animations here. Sadly, Swift 3D software by Electric Rain is no longer available, nor does it run on newer machines. At the studio, we still have copies running on a couple of old Mac G5 towers and a beat-up Titanium laptop because it remains the best solution for 3D animations in Flash that was ever developed. Keep all of that in mind if you continue to read on..

Picking a logo.

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 (now discontinued) and Macromedia Adobe 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, our Vox Underground logo.
logo-to-animateGenerally 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. The low fidelity of vector-based 3D files are also noticeable (especially at larger sizes.) 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 software and a basic grasp of the various 3D concepts involved.

Preparing and importing the .AI file.

Any professional logo project should end up with vector based file formats of the design, Swift 3D uses vector format, so importing your artwork into the 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 (see here for more on color spaces.) 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.flash-3d-animation-tutorial-opening-screenWhen 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 artwork 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.

The 3D stage.

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.flash-3d-animation-tutorial-adding-depth

Hints for spinning the logo.

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.

Creating an object ‘group.’

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 Swift’s nifty light source trackball.flash-3d-animation-tutorial-spinning-logoBy 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).3D-animation-timelineIn 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’.)flash-3d-animation-camera-anglesAt 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.

Frame by frame render options.

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.flash-3d-animation-tutorial-adding-depthBy 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.flash-3d-animation-tutorial-backwards-logoWhile 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.changing-flash-timelineNow, 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.flash-3d-animation-tutorial-logo-on-stageOnce 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.flash-3d-animation-removing-key-framesAlso, 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

Loading

(Update: We converted this animation to HTML5. You can read about that here.)

Let’s critique.

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 two hours (including screenshots for this tutorial.) 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.