Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
LIBRARY:TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS Feed

Using After Effects and Flash

COW Library : Adobe Flash Tutorials : Jim Tierney : Using After Effects and Flash
Share on Facebook
Using After Effects and Flash



by Jim Tierney, Digital Anarchy, Palo Alto, Ca, USA
©2001 Jim Tierney. All Rights Reserved. Used at CreativeCow.net by kind permission of the author.

Jim Tierney Article Focus:
This is part of a presentation Jim Tierney will be giving at After Effects West. The presentation will be on using AE and Flash together, with some intro tips for Flash, info on what is supported as vector (the info presented here), the best way to get it out of AE, the best way to get it into Flash, and when and why you should use AE to create Flash content.

The Flashing Cow (and other lurid tales):

Using After Effects and Flash


Flash

I'm assuming that if you're interested in this topic you know something of Flash, so I'm not going to go into a great deal of detail on it. I do want to explain one thing, since I mention it several times later on. That thing is Symbols.

What is a Symbol?

A Symbol has many uses, but the attribute were concerned with at the moment, is it's use as a 're-usable' element in Flash.

What do you mean 're-usable'?

Well, if you copy and paste something in photoshop, for example, if you copy a picture and paste it into a new layer, the photoshop file size goes up. It now has two layers with, say, a 640x480 image on both of them. It saves each copy of the image, resulting in a larger file size.

In Flash, if you make a copy of a Symbol (which can be a 640x480 image), it only includes the original image once. Every time you copy it, it just makes a pointer to it (or proxy is another way of putting it).Flash has the great capability of being able to have multiple copies of something and every time it needs to display one of the copies, it just looks over at the original and uses that. It doesn't need to save all the image data for each copy.

For example... in this file we have a single 200x200 pixel JPEG Symbol, which takes up about 10K by itself. The .swf file is 16K.

If we duplicate that single 200x200 pixel JPEG fourteen more times, and animate a few of them, we end up with this, which is 19K.

That's 15 copies of a 10K image, with animation that takes up a whole 19K of space. Using Symbols can be a very powerful way of keeping your file size manageable, espicially if you're using bitmap images.

Hopefully, that makes sense. The key thing to remember is that if you have copies of Symbols saved in a file, they don't increase the file size. And it's extremely important to keep Flash files (.swf files) down in size, as they'll usually be downloaded over the net.

When does After Effects save out vector objects?

There are four cases where AE saves out elements as vector objects:

1) Solid layers with Masks
2) Illustrator files (without gradients)
3) The Path Text plug-in
4) The Audio Spectrum and Waveform filters

1. Solid Layers With Masks

Pretty simple stuff. The primary way of getting vector objects out of AE is to create a mask on a solid layer (created with the New Solid command). Unfortunately, you can't duplicate the layer, and have the duped layer reference the original as a symbol. Each mask on each layer is a different symbol. So even if you have a mask in the shape of star, and you replicate it 10 times, and don't change anything, AE will still put it in the Flash file 10 different times.

It's fine if you just want to animate one shape or something, but, like I said, one of the key ingredients in keeping the .swf file size down is to use Symbols. If you can't make copies of something that can be referenced, you can't make symbols. This is one of those cases where just designing like you normally would in AE, will bite you when you go to Flash, and you CAN'T fix the fact that you have 20 layers with a star mask (or whatever) that aren't referenced. If each layer is doing it's own thing rotating, and moving, but the mask is exactly the same, there's no reason they shouldn't be a symbol. So now you have 20 symbols when you pull it into Flash, where you should have just one.

So what to do about it…

2. Illustrator Files

Use Illustrator files. Illustrator files are maintained as vectors as well, and more importantly they're referenced.

So, if we bring in a star shape created in Illustrator, and put it on a layer, any duplicates of that layer will be referenced. If we make 10 duplicate layers, only ONE star shape will show up in Flash when we import the .swf file. The other layers that use that star shape will just reference that one copy of it.

Depending on the complexity of the vector object and how many duplicates you have, the amount the file size is going to be reduced will vary, but can be quite significant. The other advantage is that objects are generally easier to create in Illustrator anyways, since you have the full complement of tools.

For simple stuff you're not going to re-use, masks are fine, but for most other stuff, I recommend going the Illustrator route.

One note about Illustrator objects, make sure you don't use gradients. Only Illustrator files with flat color fills (and stroked paths) will be saved as Vector objects. If an AI file has a gradient it will be either rasterized, or left out of the .swf file, depending on your export settings (discussed later). You can't use gradients with masks either, so it's not really a disadvantage… just something to know.

3. Path Text

Probably the most useful vector supported feature in AE is path text. Flash has some pretty decent type tools. By and large they're better than what you find in AE, however, there isn't anything like Path Text.

The only instance where Path Text is rasterized is where Fill Over Stroke is utilitized, which is one of the rendering modes. It's not that big of a deal, as I don't know that I ever would have used it if not for having to write this. Path Text as your probably aware lets you use a path (mask) to have letters follow around. It gives you a lot of animation control that you don't have in Flash.

As you can see in this example (37K), we can animate the tracking, have it randomly animate the scale of each letter, the position, etc.

You could do some of this in Flash, but the issue is that, you have to break the text apart, which means that you can't edit it after you animate it. If I decided to change this text to 'motion graphics' and I was in Flash, I'd have to redo the complete animation.

Since it's Path Text I can just open up the options dialog and change the text. Badda bing, same animation, same everything, except different words.

I can then animate the path and do all sorts of other stuff to the text that wouldn't be doable or would be difficult in Flash. Very easy stuff in AE, tho. :) Take a look at it here (still 37K)

4. Audio Waveform/Spectrum

Interesting couple filters and very cool to play with.

They're very useful for creating elements that can be used in Flash. If you need to create some randomly animating lines or create something to go along with or based on an audio file, these filters do it very well. Basically, it takes an audio file and renders out the waveform in a vector.

I'll show you a couple examples of the type of stuff it does. It works pretty similar to Path Text. You can assign a path to it and have it follow the path or just leave it alone, and it will animate based on an audio file you specify. Check this out. (35K)

It also has a built in polar coordinates filter, which gives you a look like this (87K). As you may have noticed, the file size can get kind of large. Espicially if you turn on the gradient feature (Hue Interpolation). This doesn't actually create a gradient, but it does cause each line segment to be a different color. This can cause a pretty dramatic increase in size. Just take a look at the file size of the above file.

Basically, just a neat little filter for automatically creating randomly animating lines, which can be very useful. As far as I know there aren't any limitations on it, that would cause it to rasterize.

5. The Export Dialog

Alright, what does all this junk mean?

JPEG Quality: Should be pretty self-explanatory… If something gets rasterized, it's going to become a jpeg image, and this just sets the quality of the ensuing jpeg image.

Unsupported Features pop-up: This defines what happens when AE can't save something out as a vector. If you have Ignore selected, then anything that isn't a vector doesn't get saved in the .swf file. For example, if you have an Illustrator file in the shape of a star, and the outline of the star is just a stroked path, but the inside has a gradient applied to it… This will cause just the stroked outline to be saved to the .swf file. Since the gradient would cause the star to be rasterized, the unsupported gradient is left out. If you select Rasterize for this pop-up, then anything that can't be saved as a vector will be rasterized as a JPEG image, with the quality set to the amount in the JPEG Quality slider.

Audio Controls: Turn this on if you want your .swf file to have audio. The three pop-ups control the quality of the audio.

Loop Continuously: By default this is off, causing your Flash movie to play once, then stop. Selecting this is just like selecting 'Loop' in the Quicktime Player… it causes the .swf movie to play over and over and over again.

Prevent Import: This prevents the .swf file from being imported into the Flash application, so people can't reverse engineer your movie. There are ways to get around this, so don't put too much faith in it.

Include Object Names and Include Layer Marker Web Links: Just means those things will show up in the Flash application if you import it in there.

Flatten Illustrator Files: This is appears to be buggy, but I haven't heard one way or the other from anyone at Adobe about it.

6. Other Notes

One other bug… jpeg files aren't referenced like they're supposed to be. If you import a logo saved as a jpeg, and use it 20 times, it should only be saved once. Currently, it's saved in the .swf file 20 times. This is a bug and should be fixed in a future version of AE.

The AE Team chose to implement vector support in as many places as possible over spending the time to optimize the file size of exported .swf files. This is a fair choice given that AE doesn't support most of Flash's key features (interactivity for example), and you are most likely going to bring it into Flash anyways to add interactivity and use with other elements. Flash will then do the optimizing when you re-export out of it.

When you import an AE .swf into Flash you'll notice that there are a large number of Symbols created. AE creates a Symbol for each object, on each frame, so in the name of convenience, keep your animations short or you'll end up with several hundred Symbols. There's a bit more to it than that, but just be careful about exporting long animations. You may end up with a couple thousand Symbols in your library.


Hope you enjoyed it...

cheers,
Jim
--------------
Jim Tierney
™Digital Anarchy
www.digitalanarchy.com


Jim Tierney is the creator of Digital Anarchy and has worked on some of the most widely known and respected After Effects plug-in packages out there. Starting at MetaCreations, with Final Effects, and moving on to Atomic Power and their Evolution and Psunami packages . He also worked for Cycore for awhile, but was primarily involved with their 3D software and only remotely involved with Cult Effects. You can visit Jim's website by clicking on his logo to the right.

Please feel free to come to the Adobe After Effects Cow to discuss this technique or others. Jim Tierney is a also a frequent visitor and contributor to the Broadcast Design and Tips COW.




And in case you're wondering why a COW? COW stands for Communities of the World. If you've found this tutorial from a direct link outside our site, please drop by CreativeCOW for a visit. We hope you'll make it your new home.




  Adobe Flash Tutorials   •   Adobe Flash Forum
Reply   Like  
Share on Facebook


Related Articles / Tutorials:
Adobe Flash
Adobe Edge Animate/The Missing Manual Software/Book Review

Adobe Edge Animate/The Missing Manual Software/Book Review

Increasingly, web developers are being asked to create sites that are viewable on tablets and mobile devices, as well as desktops and laptops running Windows, OS X or Linux. One of the challenges in creating a site like that is animation. Flash, for many years the preferred cross-platform animation solution, is no longer supported on many tablets and mobile devices. Michael looks for - and finds - answers within Adobe's Edge Animate.

Review, Editorial
Adobe Flash
HTML5 (CreateJS): Interactivity and Debugging

HTML5 (CreateJS): Interactivity and Debugging
  Play Video
Building on two previous tutorials on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz introduces interactivity (specifically, responding to a mouse click), debugging using the JavaScript "alert" statement, and assigning names to objects exported from Flash. Project files included.

Tutorial, Video Tutorial
Adobe Flash
HTML5 (CreateJS): Animate with JavaScript

HTML5 (CreateJS): Animate with JavaScript
  Play Video
Building on a previous introductory tutorial on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz shows how to modify the JavaScript exported from Flash, to change attributes such as position, speed, wait time, and color. Project files are included.

Tutorial, Video Tutorial
Adobe Flash
HTML5 (CreateJS) for Adobe Flash Professional CS6

HTML5 (CreateJS) for Adobe Flash Professional CS6
  Play Video
Creative COW leader Michael Hurwicz provides a brief introduction to CreateJS, an extension for Adobe Flash Professional CS6 that allows you to export Flash projects as HTML and JavaScript, even on platforms that do not support the Flash Player.

Tutorial, Video Tutorial
Adobe Flash
Building an Interactive Whiteboard in Flash: Part Two

Building an Interactive Whiteboard in Flash: Part Two
  Play Video
In part two of this series, Justin Junda walks you through the necessary steps to connect the graphical elements from part one, with Actionscript 3.0 using the Flash drawing API in order to bring this whiteboard to life.

Tutorial, Video Tutorial
Adobe Flash
Building an Interactive Whiteboard in Flash: Part One

Building an Interactive Whiteboard in Flash: Part One
  Play Video
In this tutorial, Justin Junda takes you through the step by step process on how to build and interactive whiteboard. These whiteboard are often seen in drawing applications, scratch pads, and educational sites. This is part one of a two part series. Part one takes you through setting up all the graphical elements within the stage. Then part two shows a user how to connect the graphics to Actionscript using flashes drawing API to make this whiteboard truly interactive.

Tutorial, Video Tutorial
Adobe Flash
Embedding a Speech Transcript in a Flash Video with Adobe CS5

Embedding a Speech Transcript in a Flash Video with Adobe CS5
  Play Video
In this tutorial, Creative COW Leader Michael Hurwicz shows you how to create a scrolling transcript synced with a Flash video, using Adobe Creative Suite 5 (Story, OnLocation, Premiere Pro, Soundbooth and Flash Professional).

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics - Springs

Inverse Kinematics - Springs
  Play Video
Springs are a new feature for Inverse Kinematics in Flash CS5. In this video tutorial, Creative COW leader Michael Hurwicz shows you a simple technique for implementing springs, as well as several other "tricks and traps" to make your work with Inverse Kinematics in Flash easier, more flexible and more powerful.

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics - Control Points

Inverse Kinematics - Control Points
  Play Video
Fine-tune your Inverse Kinematics animations in Flash CS5 by working with control points. In this Adobe Flash video tutorial, Creative COW leader Michael Hurwicz shows you how to associate bones with control points, how to move, add and delete control points, and how to adjust control point handles.

Tutorial, Video Tutorial
Adobe Flash
Inverse Kinematics

Inverse Kinematics
  Play Video
Inverse Kinematics allows you to create structures of bones and joints and use them to animate characters in Flash. Fun and easy! Creative COW leader Michael Hurwicz shows you how in this video tutorial, step by step. Learn some basic ActionScript, too!

Tutorial, Video Tutorial
MORE


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]