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 itself 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.
Flash animations with vectors and bitmap graphics.
Flash animations that contain bitmap graphics are a little more problematic. While the Westar Media logo was created as a vector image in Illustrator, it uses a ‘multiply’ transparency effect to achieve the wide range of colors in the ‘flower’ icon at the top of the design. This effect is almost impossible to recreate accurately in Flash, so we had to ‘cheat’, adding a .PNG bitmap version (2) of the flower into the Flash timeline. As with any use of bitmap graphics, we never want to enlarge this image, so we sized the flower up to a HD video size of 1980px x 1020px.
Meanwhile, the three pulsing ‘petals’ of the flower were created using one symbol (1) and the transparency function of Flash. As with the CRW logo, this movie was also destined for website use, so by repeating common symbols and embedded Flash movie clips, we were able to keep the file size down. Trouble is, the QuickTime render engine that comes with Flash doesn’t really like embedded movie clips when outputting a video. In fact, most of the time, Quicktime will ignore the clip and simply render a still frame for its duration. In order to get around that, you’ll need to convert something that QuickTime will like. Luckily, this isn’t as difficult as it sounds.
Flash movie clips.
To use embedded Flash movie clips when exporting an animation to QuickTime, we’ll need to convert them to frame-by-frame animations on the main timeline. To do that, we simply drag the movie symbol onto the timeline and change it to a ‘graphic’ that ‘plays once’ and starts on frame 1.
Then, we simply add key frames after the initial symbol (A), making sure that the symbol is carried over (B). Flash will automatically track the keyframes, adding a frame for each appearance (B2). Do this for the duration of the embedded movie clip, and you’ll now have a frame-by-frame animation that QuickTime will recognize.
Flash animations with vectors, bitmaps and 3D video clips
This advanced Flash animation uses a wide range of media to achieve the motion as seen in the QuickTime movie (above, 8). While the original logo is in vector format, we also wanted to add a nice chromed 3D portion (8) to the movie using Swift 3D to build it. We also wanted to add some moving objects, so we also needed to add several .PNG motion blurs (1, 2) as well as a still frame from the QuickTime (3) that we could zoom at the end of the sequence. As this Flash movie was intended specifically for video, we didn’t have much concerns about file size, so all the bitmaps were created at full HD video size.
Adding a raw QuickTime movie to Flash is a snap. Simply import the movie to your animation’s library and use like you would any symbol (keeping in mind that the movie needs to be created at least as big as you’re going to use it. We NEVER want to enlarge a movie on the timeline). Vector and bitmap graphics can be added to the animation and moved about like the two previous examples.
Resizing old animations.
Old all this is peachy and all, but what if you have an old Flash logo animation that was set-up in the default 550px x 400px of earlier versions of the software? That’s a simple fix. Simply export the Flash movie as a .SWF (turn off import protection as below) and then import that .SWF to the library of a new Flash document that’s been set up for the correct HD video size. That .SWF can then dragged to the timeline and resized to your heart’s content. You’ll have to convert it to a frame-by-frame animation as we just outlined.
Keep in mind two things. The frame rate of the earlier Flash animation may not be 30 FPS as required by video, so you’ll have to change that (and open your timeline ‘tweens’ as necessary) BEFORE exporting the .SWF. Also, any bitmap graphics in the original smaller sized Flash will have to be replaced with at least ‘size as’ versions to retain pristine image quality and to avoid resolution issues.
And that’s about that. With part one and this tutorial, you should be able to create new HD video animations using Flash and/or convert older movies into the newer HD standards. If you have any questions, dump them into the comments, or contact me at the shop.
Image Studios for the CRW Radio Promotions logo and Westar Media Group Inc., for the Westar Media Group logo. Pixelwurx logo Steve Douglas/The Logo Factory. All animations and videos The Logo Factory Inc. See here for more information on our design servcies.