First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Harry Thomas | Website: http://www.saphotodj.com
Using Flash for video animation

Using Flash for video animation

Assumption: that you know how to create simple, non-interactive Flash animations, such as the "Ray of Light" text or cartooning animations. If not, there are plenty of good tutorials and volumes of books already published on those subjects. This also assumes you have a suitable video editing program, of which a wide range are available. Part 1 is applicable to any video editing program; Part 2 requires a video editor of higher quality, such as Sonic Foundry's Vegas Video, Adobe's Premiere, or Apple's Final Cut Pro that is capable of chromakeying.

This tutorial is divided into two parts; exporting a simple animation into a format such as Windows AVI or QuickTime Video; and creating animations that overlay other video sources, such as titling and cartoon effects over photographic backgrounds. These options rasterize the vector format of Flash, so all interactivity is lost. So forget those fancy interactive buttons and effects - this is straightforward animation. Also be advised that rasterizing tends to make letters look 'jagged,' so be sure to use those fonts at larger sizes. In the same vein, smaller objects tend to get lost, so make everything as large as possible. And this is one time you can't worry about large file sizes. If you don't have the space on your hard drive, get another one. Most video editor programs recommend a 7200 rpm speed one; some require it.

Part 1: Simple export to Windows AVI or QuickTime format.

  1. Determine what size ratio you are going to use. Most full-screen video is in the 1:33 format, so set your movie's dimensions accordingly. For Part 1, select the background color you wish. Set the frames per second to 30. Yes, I know television uses 29.97, but the difference is negligible. If your video is intended for the Web, you're better off sticking with Flash .swf files, but that's your prerogative. If you insist, I'd recommend dimensions not higher than 360x240, and 15 frames per second, unless you're creating content meant to be downloaded by high bandwidth users only.
  2. Create your animation in Flash. Make it as fancy as you like. Use an old one you created, if you just want to test this out. You can use music/sound if you like, but I would recommend that you add that in your video editor instead, as it will come across better. Test it out. I created my own version of the Ray of Light, seen below (resized to 360x240).

  1. Select File>Export Movie. Select Windows AVI or QuickTime, based on which format you prefer or which system (Mac or PC) that you have. Select the directory that you are saving to (preferably to a 7200 rpm hard drive)

  1. When the Export Windows AVI box comes up, be sure to set the dimensions to your original ones (720x480, in this case), and click Maintain aspect ratio. Select 32 bit color w/ alpha and smooth under Video Format, and deselect Compress Video. Enable sound if you used it.

  1. If you have a video editor installed, another box will come up, asking you to select a codec. Select Full Uncompressed, unless you know what you're doing with a codec. (If you don't have a video editor installed, it won't come up, in which case it should default to Full Uncompressed.
  2. After the file has been created, import it into your video editor and place as desired.

Part 2: Creating overlay text effects for use in video

Most of us have heard of "bluescreening;" the technique used in special effects films/television shows such as Star Wars or Star Trek to superimpose the action on top of a fanciful background, such as a star field or planetscape that would be too expensive to get a live shot of the object in question. This technique is also called chromakeying. In this example, we're going to turn it around, in that we are overlaying effects on top of video instead of the other way around.

Once again, this part requires the use of a video editor of higher quality, such as Sonic Foundry's Vegas Video, Adobe's Premiere, or Apple's Final Cut Pro that is capable of chromakeying. And while it is true that these products offer some very good text effect editors, you may want to use some of the creative freedom of Flash to create even more distinctive text effects. You might also want to use this technique to add cartooning animation over video.

The really tough part here is correctly positioning the effect so it appears exactly where you want it to in your video project. You might have to do this a few times to get it right. Be patient.

  1. Look at the video that you want to superimpose text over. Note the color of the area that you are planning to superimpose over.
  2. Set up your movie as required by the video project you're creating (dimensions, etc.). Set the Background color to something you can work with. Just be sure that you know the exact RGB color numbers. For example, Blue (R0, G0, B255).
  3. Create your animation. Suggest that you create something that you can move easily, or know the exact pixel points you want it placed in the final project. And make sure that you're not using the same color for your text that is in the video background. For example, white text doesn't show up very well against snow.
  4. Export the file as outlined above in Part 1, using whatever format you're planning to work in.
  5. Import the rendered video file into your video editor and lay it over the video that you are using in your project. Follow your video editor's instructions on how to chromakey the Flash video file (subtract the background color that you selected for your movie in Step 2).
  6. Test it out. You might have to do this a few times to get the effect you want, but you wouldn't be reading this if you weren't interested in getting it right.

Good luck!

Harry Thomas


» Level Intermediate

Added: 2002-01-29
Rating: 7 Votes: 146
» Author
Graphic artist for the San Antonio Express-News; own and operate SAPhotoDJ.com, a one-stop company for wedding photography and disc jockey services.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.