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 logo 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.
Read the rest of this entry »
