quangtien
10-12-2006, 11:46 AM
From After Effects to Flash and Back, Part 1 Fresh-squeezed FLV and SWF sequences direct from After Effects SWF-tastic
As I may have mentioned once or twice before, SWF export from After Effects works best when you try to keep your comps as vector-based as possible. Animating text works great. Solids are a go. Illustrator assets—no worries. But as soon as you start adding effects (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) or applying transfer modes or anything else that "unvectors" a vector-based object, then you're talking about end results in terms of MB in size rather than double-digit KB. And while you're certainly welcome to make your SWF files as large and as anti-vector as possible, doing so feels very much like cheating, doesn't it? I sincerely hope that the marriage of Adobe and Macromedia produces a future version of After Effects that can translate certain AE effects (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) (like blurs or drop shadows) to Flash's equivalent filters with no file size penalty, but that's nothing more than wishful thinking and a topic for another discussion.
Anyway, the goal here, at least for today, is to create a vector-based SWF file from After Effects. And what better use of After Effects for such a purpose than to create one of those text animations that is not-so-straightforward to do in Flash? So let's do just that—Figure 7 shows a very simple text animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) setup.
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig07.jpg
Figure 7
Can't get any simpler than an editable text layer with the Center Spiral preset preset dragged onto it. Figure 8 shows the incredible fruits of ten seconds of labor.
Figure 8 Doing something like that in Flash would take considerably longer, and we'd lose all editability to boot, so stuff like text animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) is a perfect use for After Effects. Now, once I'm happy with the animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#), it's time for the darn-near-impossible task of exporting the sequence to a SWF file. File:Export:Macromedia Flash does the trick here, as shown in Figure 9.
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig09.jpg
Figure 9
With that daunting step out of the way, the SWF Settings panel presents itself (fig. 10).
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig10.jpg
Figure 10
For as limited as After Effects currently is in terms of vector-based SWF output, there are a decent number of options available here. The really key item is the Unsupported Features selector, which allows you to either rasterize or ignore unsupported features. I usually choose Ignore, since doing so keeps the file size down even if I've slipped and done something dumb (like apply a Tint effect (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) to a solid, which one wouldn't think is a no-no yet is). Anyway, after we click OK and render the SWF, After Effects not only produces the finished file, but also provides a companion HTML document that contains info about the newly-completed SWF file (fig. 11).
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig11.jpg
Figure 11
This HTML file is somewhat helpful in that it lists any unsupported frames it rendered, but depending on your situation, it may, in fact, be quite useless. Your call.
Anyway, we've got all the assets ready to go. If you're really chomping at the bit for insight into our next installment, which is highly unlikely though theoretically possible, take a look at the finished file we're going to be putting together in Flash from all the pieces we exported out today. Go ahead and click anywhere in there to start the unbelievably riveting show (fig. 12).
Figure 12 So there you have it. Creating Flash-ready content from After Effects is really pretty simple when you get right down to it, and hopefully you've gotten a sense of the situational benefits of exporting to both FLV and SWF files. As I mentioned, next time we're going to switch over to Flash to hook all these things up, so stay tuned, kiddos!
As I may have mentioned once or twice before, SWF export from After Effects works best when you try to keep your comps as vector-based as possible. Animating text works great. Solids are a go. Illustrator assets—no worries. But as soon as you start adding effects (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) or applying transfer modes or anything else that "unvectors" a vector-based object, then you're talking about end results in terms of MB in size rather than double-digit KB. And while you're certainly welcome to make your SWF files as large and as anti-vector as possible, doing so feels very much like cheating, doesn't it? I sincerely hope that the marriage of Adobe and Macromedia produces a future version of After Effects that can translate certain AE effects (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) (like blurs or drop shadows) to Flash's equivalent filters with no file size penalty, but that's nothing more than wishful thinking and a topic for another discussion.
Anyway, the goal here, at least for today, is to create a vector-based SWF file from After Effects. And what better use of After Effects for such a purpose than to create one of those text animations that is not-so-straightforward to do in Flash? So let's do just that—Figure 7 shows a very simple text animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) setup.
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig07.jpg
Figure 7
Can't get any simpler than an editable text layer with the Center Spiral preset preset dragged onto it. Figure 8 shows the incredible fruits of ten seconds of labor.
Figure 8 Doing something like that in Flash would take considerably longer, and we'd lose all editability to boot, so stuff like text animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) is a perfect use for After Effects. Now, once I'm happy with the animation (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#), it's time for the darn-near-impossible task of exporting the sequence to a SWF file. File:Export:Macromedia Flash does the trick here, as shown in Figure 9.
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig09.jpg
Figure 9
With that daunting step out of the way, the SWF Settings panel presents itself (fig. 10).
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig10.jpg
Figure 10
For as limited as After Effects currently is in terms of vector-based SWF output, there are a decent number of options available here. The really key item is the Unsupported Features selector, which allows you to either rasterize or ignore unsupported features. I usually choose Ignore, since doing so keeps the file size down even if I've slipped and done something dumb (like apply a Tint effect (http://aftereffects.digitalmedianet.com/articles/viewarticle.jsp?id=58444-1#) to a solid, which one wouldn't think is a no-no yet is). Anyway, after we click OK and render the SWF, After Effects not only produces the finished file, but also provides a companion HTML document that contains info about the newly-completed SWF file (fig. 11).
http://images.digitalmedianet.com/2006/Week_33/oqtc2ogo/story/fig11.jpg
Figure 11
This HTML file is somewhat helpful in that it lists any unsupported frames it rendered, but depending on your situation, it may, in fact, be quite useless. Your call.
Anyway, we've got all the assets ready to go. If you're really chomping at the bit for insight into our next installment, which is highly unlikely though theoretically possible, take a look at the finished file we're going to be putting together in Flash from all the pieces we exported out today. Go ahead and click anywhere in there to start the unbelievably riveting show (fig. 12).
Figure 12 So there you have it. Creating Flash-ready content from After Effects is really pretty simple when you get right down to it, and hopefully you've gotten a sense of the situational benefits of exporting to both FLV and SWF files. As I mentioned, next time we're going to switch over to Flash to hook all these things up, so stay tuned, kiddos!