20 July 2009
This article assumes you have a basic familiarity with both Flash CS4 Professional and After Effects CS4 and prior experience exporting files from both applications.
Note: I want to give special thanks to Chris Georgenes for permission to use his character "Grotto" in this article. Although Grotto made an appearance in Foundation Flash CS4 for Designers (Friends of Ed, 2008), coauthored with David Stiller, I deeply appreciate the fact that Chris, a master of the craft of Flash animation, allowed him show up in this article as well.
One of the strengths of Flash is its ability to create vector animations. The Timeline in Flash makes it possible to add motion to vector objects, resulting in animation with crisp, clean lines and motion that would be difficult and time-consuming to create in After Effects.
The process of moving a Flash animation into After Effects is very simple. Follow these steps:
There are only two rules and they are rather simple:
Note: This step is optional, but removing unused space is a best practice because it reduces the file size of the published SWF.
Note: You may be wondering about the duration of the composition being 33 seconds and 18 frames long. The Grotto animation is 810 frames long in Flash. Because the SWF file plays back at 24 frames per second, those 810 frames amount to 33.75 seconds. However, After Effects uses frames, not fractions of a second, so the 0.75 second (@ 24 frames) equals 18 frames.
If you want to render and export the project, be sure to read the Rendering and exporting sections in the Using After Effects CS4 online documentation. You can also find the final QuickTime (MOV) and FLV versions of this exercise in the Complete folder among the sample files you downloaded at the beginning of the tutorial.
In this section, I describe the process of preparing a Flash file for output as a QuickTime movie. The movie can then be imported into an After Effects CS4 project.
Creating a QuickTime video from Flash CS4 is one of the more overlooked features of the application. This is understandable because, prior to the release of Flash CS3, converting a SWF file to a QuickTime video was a rather painful process. It involved downgrading Adobe Flash Player to version 5 and moving everything to the main Timeline. Flash CS3 changed all that.
The following example (which uses a file prepared by my coauthor David Stiller for Foundation Flash CS4 for Designers) illustrates how Flash coders can now join the Flash/After Effects party because everything in the SWF is created and driven by ActionScript.
Let's get started:
If you read through the code, is says that every 50 milliseconds, as long as the movie runs, pick a random letter from the alphabet and display it on the Stage. The first function,
createLetter(), creates a random letter between 80 and 120 points in size, assigns a color to the letter, puts it into a movie clip and, using the
addChild() method, displays the letter on the Stage. The last line of the function instructs Flash on how to move the letter.
Movement is managed by the
shimmy() function, which moves each letter in a sine wave manner. While the letter is in motion, the
shimmy() function reduces it in size by 20 percent every time the playhead goes back into the frame.
The final function,
randomBetween(), provides the functionality that determines how a number is used to choose the random letter that is created.
Now that the SWF is working as expected, let's convert this Flash file to a QuickTime movie in order to use it in After Effects. Here's how:
At this point you can import the QuickTime movie into an After Effects CS4 project and work with it as you would with any other element in an After Effects CS4 composition. If you are interested in seeing the animation, open the FinalComp.mov file found in the Complete folder of the sample files (see Figure 10).
Previous sections of this article have discussed some techniques and strategies to move content created in Flash into After Effects. Let's now turn our attention to moving from After Effects to Flash.
The thing I just love about this workflow is that it puts me into what I call a "code-free zone." I am really clear with anybody I talk to that "ActionScript makes my teeth hurt." This explains why David Stiller is responsible for the code examples in our books. I am a visual designer who likes to see what I'm doing—which is why I adore using After Effects. I can apply an effect and instantly see what it does.
Some Flash users assume that any FLV or F4V files exported from After Effects are destined for use in the FLVPlayback component in Flash or in a video object driven by ActionScript. They are partially correct. There are other options, such as embedding the After Effects content directly into the Timeline in Flash or even outputting a document loaded with effects, such as an XFL document. This section explores these two options.
Let's start this exploration on a snowy day in my neighborhood:
With the layer in place and properly sized, the next part involves adding the falling snow. Follow these steps:
Tip: You can find effects quickly by simply typing the corresponding name (for example, Snow) into the Effects & Presets search box (see Figure 12). Also, you don't have to select a layer to apply an effect. Just drag the effect onto the layer in the Timeline panel to apply the effect to the layer.
Those four settings cause the effect to display a great deal of snow, reduce the intensity of the storm, decrease the size of the flakes, and change the opacity to make the flakes more visible against the background image.
The next step in the process is to output the composition as a file that can be used in Flash CS4. Turn off the visibility of the Winter.png layer by deselecting its Video (eyeball) switch. If a layer is not visible in the composition, After Effects will not render it. By hiding this layer, therefore, you can output just the snow effect on the adjustment layer.
The following technique is a best practice that reduces the file size of the final file. Earlier in this exercise, we reduced the width of the adjustment layer to avoid snow falling over the entire image. If we were to output this composition as it is now, the resulting FLV file would match the dimensions of the composition, not the adjustment layer.
Follow the steps below to output just the area of the layer that contains the snow effect:
Note: This technique is important when your After Effects content will be incorporated into a Flash project. I am sure a lot of you may be aghast at the size of the area I am outputting. Yes, it is large and will cause a bandwidth hit at runtime. Still, it is an effective technique, especially if used judiciously. Watch my example on the Layers Magazine website of the rainstorm in the Alps where the image shows rain coming up a valley. I used the CC Rain effect in just that small part of the image and the resulting FLV was miniscule in size. I could have created the rain effect using ActionScript, but I'm a visual guy—and I didn't have a coder handy at the time.
The snowstorm that we created in the previous section is complete. In this part, the goal is to add the snowstorm to the static background image in Flash CS4.
Instead of using the FLVPlayback component or a video object to play the FLV file, let's examine how to add the falling snow to a movie clip:
Note: I used Fireworks CS4 to "split" the image and export it as PNG files. When you import Fireworks CS4 PNG images into Flash CS4, you import the images as well as a movie clip, which is found in the Fireworks Objects folder in the Library. I moved the movie clip out of the folder and renamed it Street. Feel free to delete the Winter.png symbol in the Library. It is really nothing more than a placeholder. But be careful not to delete any of the files in the Fireworks Objects folder.
Note: If you do not have After Effects CS4 installed, you can use the SnowStorm.flv file provided in the sample files folder.
As I pointed out earlier, this project results in a rather large file size. This technique of embedding FLV video in Flash is ideal when creating banner ads that use small canvases or to add small effects (rain, fire, etc.) to your SWF files.
A new feature included in After Effects CS4 (and Adobe InDesign CS4), is the ability to output an XFL file that can be used in Flash. Think of the new XFL container format as a ZIP file that contains an XML file and all the assets referred to in the XML file. The assets and the XML are the files used to build the FLA. A thorough explanation of XFL files and their capabilities is outside the scope of this article. However, if you wish to learn more about working with them, see Export a composition as an XFL file to Flash Professional in the Using After Effects CS4 online documentation.
Follow the steps outlined below to create an XFL document using After Effects CS4:
There are two choices:
Choose the FLV format if any layer in the composition contains a video. If you click the Format Options button, the FLV|F4V export settings dialog box appears. The only codecs available are the Sorenson Spark and On2 VP6 codecs.
Direct your attention to the Timeline. Each of the After Effects layers has been converted to a Flash CS4 motion layer. The folders in the Library contain the PNG files used in the movie clip. Double-click the movie clip to open it in the Symbol Editor and notice that you can easily change the animation because the After Effects frames are now a series of keyframes.
Notice another very subtle change: the Scene 1 link at the top of the Stage has been renamed Comp1, which reflects the name of the source item.
Finally, note how the document name changes to "Untitled." When you open an XFL document, Flash CS4 Professional assumes that you are simply opening a new, unnamed document. As I pointed out earlier, this happens because Flash constructs a new document from the information in the XFL document and new documents in Flash are always untitled. Be aware that although you can open an XFL document directly using Flash, it is not possible to save or export a Flash document to the XFL format.
I have always regarded Flash and After Effects as a sort of "motion graphics dynamic duo." As you have seen, both Flash CS4 and After Effects CS4 strengthens their partnership even further. In this article I have scratched only the surface of what you can do.
Here's what you learned:
To learn more about After Effects CS4, visit the After Effects Help and Support center to find articles and tutorials that will help you dive deep into the application. Also be sure to visit the Flash Developer Center to find sample files and quick-start guides to help you achieve specific tasks.
Outside Adobe, you can find other online resources:
The purpose of this article was to get you thinking. If you are looking at Flash and After Effects and wondering about the possibilities you could achieve by combining them, then you are already on your way to exploring the integration and generating motion elements to leverage the best of both tools.