Featured FLA
» Author: Bugra Ozden
» Title: Skatalog v9 - product catalog
» Description: Create your product catalog easly and publish on your website or Create your image gallery, documents list, portfolio. Fully XML Driven
» More by Bugra Ozden
Featured Site
» Posted in the Flash Kit Links section
» Title: Creative DW Image Show PRO
» Description: Creative DW Image Show PRO is a Dreamweaver extension which enables the user to create multimedia presentations. It combines the features of the popular Creative DW Image Show with the ability to add professional text effects to slides (similar to After Effects). The product is very customizable: the user can choose the duration of the transition effects, the slide motion start and end position, zoom and panning type for both images and texts.
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.
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.
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).
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)
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.
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.
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.
Look at the video that you want to superimpose text over. Note the color
of the area that you are planning to superimpose over.
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).
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.
Export the file as outlined above in Part 1, using whatever format you're
planning to work in.
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).
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.
Tutorials Home
Tutorials » Animation/Films
Using Flash for video animation
