November 23, 2009
AFTER EFFECTS + FLASH (part 1/3)
Flash is a great starting point for animations designed for the Web. But when it comes to more realistic motion effects, Flash is certainly limited. Enter After Effects. The combination of Flash and After Effects enables animators to create a broader cache of animations and techniques and ultimately develop more compelling deliverables. The goal of this three part analysis is to touch on the topics most beginners want and need to know in order to get started with integrating After Effects and Flash. Beyond beginner level topics, the 3rd and final post will touch on performance issues, concepts, and methods.
TARGET: Developers and animators with limited to no experience integrating After Effects with Flash.
FOCUS: A step-by-step tutorial on creating and embedding videos/image sequences in Flash from After Effects. This post will not explore streaming video, video players or anything of that nature as that is another beast all together.
POST 1: Pros and cons of using AE videos/image sequences in Flash, the basics of the AE interface and the process of setting up AE to create, export and integrate animations from AE to Flash.
POST 2: After Effects for Flash Essentials. Key topics will include working with green screen, creating masks, and creating loops.
POST 3: Exporting and Testing. Which methods perform best and when to use one protocol over another as well as helpful test scenarios and results.
AFTER EFFECTS + FLASH - GENERAL PROS AND CONS
PROS:
1. Get more realistic and/or complicated motion graphic effects into your projects that you couldn't using Flash alone.
2. With Flash now supporting alpha channels, you can export effects and/or videos that can lay over your Flash interfaces.
CONS:
1. Larger file sizes.
2. Less flexibility. Once the video or image sequence has been rendered, there isn't much you can do at runtime other than altering the alpha, blend modes, color tints, size, position and rotation of the clip the video resides in. Example: Snow. If you dynamically create snow in Flash, you can have the snow particles fall from randomized locations so they don't look repetitive. If you were to produce the snow effect in AE, although it make look more realistic, you won't have the flexibility to alter or randomize the falling particles as they are contained in a single embedded animation.
PRO and/or CON:
1.Performance. Anytime you're making Flash run any type of video you're asking more from it....performance can really only go down. But, it's all relative. Using a video or image sequence from After Effects can actually help performance if, say, your alternative is to layer up a bunch of Flash effects, blend modes, and/or masks directly in Flash. In this instance, creating a flash video or image sequence can give you a much nicer effect with less runtime processing forced upon the Flash player.
AFTER EFFECTS BASICS:
Here's a quick rundown on the basics of the AE interface to get a little more familiar with the layout.
A. Tool Panel: A lot like Photoshop or Flash, this is where you find your selection, zoom, shape, text, clone and other tools.
B. Project Panel: This is where all your imported and created assets will live including but not limited to Compositions, Videos, Audio, Graphics etc.
C. Layers Panel: AE, again like Photoshop or Flash, uses layers where the top layer sits above the lower ones [not always the case if you are using AE's 3D mode] Each layer has drop down control settings along with Layer Mode [blend modes], TrkMat [masks] and Parent [for parenting layers].
D. Composition Window: Displays the current frame content for the selected composition.
E. Layer Modes Panel: Additional layer modes switches for Motion Blur, Frame Blending, Shy Hide and more.
F. Timeline Panel: Displays the lengths of your layers along with all keyframe data for those layers.
G. The Timeline Scrubber: Drag this in order to scrub the timeline and see your animation frame to frame.
H. The Timeline Render Bar: This slider selects and represents the keyframes you want exported in the final render.
I. All Other Panels: There are several such as Time, Audio, Effects etc. These panels are great but not completely necessary for basic usage. These may be covered in a future post.
AFTER EFFECTS TO FLASH TUTORIAL
Here's a quick tutorial that will go through the basic process to get a particle effect from After Effect into Flash.
STEP 1: Open After Effects [in case that isn't obvious].
STEP 2: Create a Composition in which all the animation, layers, and effects will live.
Go to Composition>New Composition...
STEP 3: Setup the Composition...
A. Give your Composition a name [something a little more descriptive than "Comp 1"]
B. Set your required stage dimensions if you know them [these can be changed later if needed]
C. Set Pixel Aspect Ratio to Square Pixels since this is going into Flash
D. Set the AE frame rate to match the frame rate you intend to use in Flash
E. Set your required Composition duration [these again, can be changed later if needed].
STEP 4: Create a new solid layer to apply the effect to.
Go to Layer>New>Solid...
STEP 5: Add an effect to the layer. For this example you'll use a great plug-in called Trapcode Particular.
Go to Effect>Trapcode>Particular. [If you don't have Trapcode you can use a built in particle system]
STEP 6: Select a Trapcode Particular Present from the drop down menu. Choose "ElectronDance".
If you don't want to use a preset, you can fiddle with the Particular setting to create your own.
A. Particular's Settings in the Effect Panel. These give you control over the Emitter, Particles, Physics and more. There are way too many sub-settings to go over in these tutorials. Be ready to experiment on your own and define your own tool box.
B. The Composition window will display your particle animation as you scrub the timeline.
C. You can also manipulate Particular's settings in the layers panel drop down.
D. This is where you'll set your animation keyframes on the timeline of the layer here.
STEP 7: Animating the particles.
Now, time to animate the ElectronDance preset effect so it slowly fades out from 40 particles / sec down to 0 particles / sec over a few seconds. First set a keyframe for the particle setting you want to manipulate, in this case, the particles/sec setting.
A. This is the Time-Vary Stopwatch. Set your Timeline Scrubber to the desired point in time and click the stopwatch to set your first keyframe.
B. This is the keyframe that is created once you click the stopwatch. Notice the Particles/sec is currently set at 40 for this keyframe.
Second, you'll set the end keyframe.
A. This is the keyframe on/off switch [diamond]. Move the Timeline scrubber to the point you want to set your end keyframe and click this.
B. This is the keyframe that is created once you click the diamond. Now change the Particles/sec to 0 for this keyframe. Scrub the timeline to see the effect in action.
C. Resize the Timeline Render Bar to the total length of your desired animation.
STEP 8: Rendering your animation.
Go to Composition>Make Movie...
STEP 9: The Render Queue appears.
First, click "Output To" and select a name and destination for your rendered movie.
Next, click "Output Module" to configure your render settings.
A. Here you choose your export format such as Quicktime Movie, Image Sequence, Flash Video File or more...Choose "Adobe Flash Video" file.
B. Channels can normally be set to RGB unless you plan on exporting a movie with transparency, which you'll need, so select "RGB + ALPHA".
C. Format Options gives you many different possibilities for compression. "None" is ideal but the default "Animation" compression works well when exporting for Flash and isn't as hefty in file size.
D. Color setting is important when exporting an alpha channel. Set this to Straight [unmatted]. Post 3 will discuss more on Straight vs. Premultipled alpha.
E. Stretch will resize your exported movie from your composition dimensions to a new set of dimensions you specify [resize if you'd like].
F. Crop will allow you to crop out composition area that isn't used or needed for the export [crop if you'd like].
G. Audio allows you to set export setting for audio data included in your movie [add audio if you'd like].
Note: You won't always want to export your movie as an Adobe Flash Video file. Depending on the usage of your movie and taking into consideration Flash performance, you may want to export it as a quicktime mov or image sequence. Post 3 will discuss more about performance including why and when to use certain export file types.
STEP 10: Render the movie.
A. Click the render button to export your movie.
Note: Turning Caps Lock on will speed up render time since the application doesn't have to render your preview as well.
STEP 11:
Open Flash ....ummmm....yeah.
STEP 12:
Importing your movie into Flash.
Go to File>Import>Import to Stage...
A. Select the keyframe you would like to import your movie to.
B. Select the flv we created.
Next, select the import type:
A. Select to "Embed FLV in SWF and play in timeline".
Finally, select your import symbol type.
A. You can select to leave your symbol type as the Embedded video, or nest it inside a graphic or movieclip. "Embedded video" will work fine for this example.
STEP 13: Finished! Drop in a background or any Flash elements you would like and export your swf.
Check back shortly for the continuation of After Effects + Flash posts 2 and 3.