Echoes of Burma Jones Design/Developer Blog
ABOUT
"Echoes of Burma Jones" is a blog dedicated to the work, and happenings of Ted Perez + Associates. For our full web portfolio, please check out our main site.
LINKS
TED PEREZ + ASSOCIATES   
RECENT POSTS
Career Opportunities at Ted Perez + Associates
Cocktail of the Week: Daiquiri
Art-Spire's Best 100 Digital Agencies in the World
Cannes Bronze Cyber Lion Winner: Sprint NOW Clock
Cocktail of the Week: Manhattan
Adobe CS5 Student Hub
Cocktail of the Week: Tom Collins
2009 Holiday Gift
Cocktail of the Week: The House Margarita
Webby Winner: Sprint's NOW Widget Media
POSTED BY
POSTS BY GENERALPOSTS BY CAPTAINPOSTS BY ARTISANPOSTS BY PIONEER
CATEGORIZED POSTS
3D
After Effects
Animation
AS3
Awards
Cocktail of the Week
Design
Flash
General
Out of State
Ted Perez Artifact
This Date in History
Video Production

March 5, 2010

AFTER EFFECTS + FLASH (part 3/3)

FILED UNDER: After Effects, AS3, Flash

images/blogheader3.jpg

In the first tutorial we discussed the basics of After Effects and transitioning your work from there into Flash. The second tutorial we took a look at 3 essential skills (Working with green screen footage, Creating masks and Creating loops). In this 3rd post, we'll discuss things to keep in mind when exporting from After Effects to Flash as well as review some performance test results.

TARGET:

Flash developers who are beginners to After Effects who would like to start integrating it into their projects.
Flash developers of all levels who are looking to find some information / tips about embedded video performance.

FOCUS:

Methods for exporting from AE to flash, which methods perform better, and when and why to use each method. This post will also share results from some embedded video performance tests so you can better plan for your projects.

EXPORTING FROM AFTER EFFECT TO FLASH AND THINGS TO KEEP IN MIND:

Incase your not familiar, the basic breakdown of getting something from After Effect to Flash is:
1. Design/Animate/Edit your footage in After Effects.
2. Export your After Effects file as an FLV or as a Quicktime movie and then to a FLV via an FLV encoder.
3. Import into Flash.

Yes, that is the breakdown at it's most simple form, but the ultimate goal is to balance the elements of your footage so that you not only hold onto it's visual integrity, but that you also keep the file size as low as possible and get the most out of your performance. With that in mind, here are a few things to think about when exporting from After Effects and creating your FLVS for Flash:


The Colors In Your Footage.
Orange and Red hues tend to compress poorly. If your footage is heavy with these color ranges, you may find you'll need to ramp up the data rate (kbps) to get something to your liking.

The Type Of Motion In Your Footage
If your footage is primarily quick motion footage, you'll find you can get away with increasing your compression settings mainly because the details will be less noticeable anyhow. Because quicker footage is pushing through a larger amount of frame data, your processor will also benefit from the compression.

The Dimension Size Of Your Displaying Footage

The larger the file dimensions, the more your asking of your processor. If clean footage is your goal, your going to have to up the data rate of your FLV to something that is comfortable visually, but that won't excessively add to the load time. Don't be afraid to up the data rate a bit beyond most FLV encoders defaults as Flash seem to handle higher kbps pretty well but again, that depends a lot on the type of footage your working with, if it has transparency, etc.

If your working with large footage and you are able to get away with a crunchier / pixelated look, a method that seems to work well is half sizing your footage for export and then resizing it back up once inside flash.


If Your Footage Will Have Transparency

The ability to embed transparency into your footage is an awesome thing but does come with some drawbacks.

Firstly, having embedded transparency in your footage will increase file size and affects performance negatively. So, if at all possible, always try to find a solution that doesn't involve using transparency first.

If your using your transparency footage for a mask (perhaps a cool ink reveal mask or something) consider exporting your footage as only one color with transparency. Any other color data will only increase file size and affect performance negatively and since that color data won't even be seen as this is a mask, there is not reason to include it.  Many times with masks, you can also get away will exporting your footage at half size and then resizing your footage back up once inside flash. This will help cut down on file size as well as increase performance.  Be careful with using video footage as a mask if it has very complex transparency in it as Flash has been know to act very odd and with less than desirable results.

When choosing your exported alpha type, your best bet is gonna be Straight (unmatted) alpha. Why? Matted transparency will premultiply your edges with your composition background color which usually results in an unwanted color halo around the edge of your footage.

Always crop out unused transparency in your footage as it not only increases your file size, but it can dramatically affect your performance. We encountered this transparency issue on a recent game we developed, Milk's "Thrashteurizer".  Our 3D character images sequences had an alpha channel that was initially sized to the entire game stage (for ease of alignment). When running into a performance issue, the solution was to cut down the image sequences to the very minimal area needed which save on file size as well as solved the performance hit. The image below shows the sizing change.


images/whitegold.jpg

The White Gold 3D character was set up as a PNG sequence. It started off with a good amount of extra transparency that wasn't necessary other than for easy alignment (marked by the outer red line, point "A"). After trimming the PNG sequence down to just the necessary area (marked by the inner red line, point "B") the result was a decrease in file size and in increase in performance.


How Your Footage Will Be Used

If your footage used as a mask, see the above notes about Transparency.

If your footage will be used for full-screen video, see the above notes about Dimensions.

If your the type of person that likes to run your Flash timeline backwards as well as forwards, you'll find you'll probably need to use an image sequence as opposed to an FLV as Flash doesn't seem to like trying to calculate a reversing FLV and the result seems to be a crash.

If you plan on using your footage as a video loop, always try to make the first frame of your footage the loop point because the first frame always has a key frame set. If you try and jump to the middle of your FLV timeline to loop, your most likely run into an issue where the flash player seems to hiccup or pause for a split second before resuming which is not desirable for a seamless loop.  The reason this happens is because when you jump to the middle of the timeline, your landing on an interpolated frame which Flash seems to need more time to recalculate causing a pause. FLVs contain key frames that are generally set automatically when encoding the FLVs but they can also be set manually in the "Key Frame Interval" setting. You might be thinking to yourself, I'll just set the key frame interval to every frame and thus be able to jump to the middle of my FLV timeline and loop seamlessly right? Well, although this is true, placing a keyframe on every frame will dramatically increase your file size and also seems to affect performance negatively. So, if you run into a situation where you have footage where you need to jump back to the middle of the timeline to loop, you should consider breaking the footage up into 2 separate pieces...The lead in video and the loop video.

If you footage will be set to a blend mode once in flash, you'll want to think about increasing your compression once again. The calculation of blend mode aren't friendly in flash so the less work flash has to do the better. As well, the blending pixels will most likely help hide the fact that you've increased the compressing and possibly cut out some of the finer details.


The Frame Rate Your Flash File Will Be Running At
Try and keep the frame rates identical between what you've created/exported from After Effects for use in Flash. If you using heavy video footage in your swfs that are larger in dimension, it's always a good idea to lower the frame rate a bit so the processor isn't working overtime.

 

 

CREATING FLVS


OK, now that you have a few things to keep in mind for prepping your FLVs, the next question some may ask is what application should i use to create my FLVs? There are a few apps that people seem to use and although they will produce similar results, there were a few unexpected ones as well. For this test, the same piece of video footage was used to create an FLV from 3 different apps. All FLVs were exported with the exact settings and conditions (On2 VP6 Codec, no audio, 1500 kbps).

Here are the Results:

Adobe Flash Video Encoder
Time to create the FLV:   9 min. 42 secs.
Final FLV compressed file size:   2,547,255 bytes


Adobe Media Encoder
Time to create the FLV:    1 min. 58 secs.
Final FLV compressed file size:   2,774,748 bytes


Adobe After Effects
Time to create the FLV:   10 min. 37 secs.
Final FLV compressed file size:  2,678,029 bytes

The resulting FLVs visually were very close in quality, although there was slightly more noticeable artifacts in the FLVs created by Adobe Flash Encoder and Adobe After Effects...but, these two apps also produced FLVs with slightly more compressed K size.

 

 

PERFORMANCE RESULTS


Finally, Lets looks at some results regarding questions that I'm sure many people have been curious about.

All testing was done on a MacBook Pro (OS X), 2.6 GHz Intel Core 2 Duo, 4GB RAM, Flash CS4 exporting as flash 9 as3.

Here are some of the questions and results generated from the performance tests:

Q: Does stacking video, even if the lower videos aren't visually seen, affect performance differently than just running one video?
A: YES. Stacking, even if not seen, effects performance.

Q: Do stacked videos perform better than videos that are side by side?
A: YES. The more video on stage, the more processing power it appears is needed.

Q: If video is running off stage, will performance be effected?
A: NO. Looks like performance change is minimal when videos are running off stage. Running 1 video on stage appears to have the same performance as running 1 video on stage with 50 off stage...go figure.

Q: Does video without transparency perform better than video with transparency?
A: YES. Although embedding transparency is an awesome feature, avoid it when possible.

Q: Does video with premultiplied transparency or video with straight transparency perform better?
A: Seems to be about the same. But, Straight transparency hands down looks better. 

Q: Does transparency perform differently if it's just a solid transparency as opposed to feathered transparency?
A: On the average, feathered transparent video performed slightly better than video with a hard edge transparency.

Q: If using a video mask with transparency, will it perform better if my video is using just one solid color and transparency as opposed to multicolored video footage with transparency?
A: YES. The file size will be lower and performance will be better. Why include color data when you won't see it anyways?

Q: Will performance be affected if I have extra unused transparency area in my video?
A: YES, Always crop video with transparency down to the smallest amount of area needed as performance can be drastically affected by extra transparent video area.

Q: Which performs better, a flv with transparency, or a png sequence with transparency?
A: PNG Sequence performs and looks much better but will render a much higher file size.

Q: Does a png sequence with extra transparency perform differently than a png sequence cropped of all unnecessary transparency?
A: YES, just like a transparent flv, you should always avoid unwanted/unneeded transparency.

Q: Does video with slower or less movement perform differently than video with quick or move movement?
A: YES, slower or less movement will tend to perform better.

Q: Will video perform better if I half size my video and then rescale the video up once inside flash?
A: YES, your video will be lower in file size and perform better, but the visual quality will suffer.

Q: Which performs / look better, a full size video at 1500kbps, or a half sized video at 3000kbps that has been scaled back up in flash to the original size?
A: The half sized video with double the data rate performs quite a bit better, although, even though we doubled the kbps, anytime you resize the footage from it's original size, the quality will suffer some.

Q: If I'm not embedding transparency, will a jpeg sequence perform better than a flv?
A: YES, a image sequence will perform better but again, your file size will increase.

Q:
If my videos are set to use a blend mode, will they perform worse.
A: YES.

Q:
Will my video perform better or worse if, when exporting my flv, I increase the key frame interval more than the automatic setting gives me?
A: Yes it will perform worse and have a much larger file size. But, visually it will look better.

Q:
If I mask my video in flash, will it perform worse than if it isn't masked?
A: YES.

Q: Will performance of my video be affected negatively the more complicated the flash vector mask is?
A: YES.

Q: Will cranking the bitrate up for my flv effect performance negatively?
A: Yes, but it seems you can crank it up a bit more than the defaults and it will still perform well. Its all about balancing your footage with file size and quality.


I hope the results from this post where helpful and might be able to help guide you in future projects. Check back for more updates/results regarding After Effects and Flash performance tests.

 

0 RESPONSES TO "AFTER EFFECTS + FLASH (part 3/3)"

LEAVE A COMMENT

NAME:EMAIL: (NOT PUBLISHED)*WEBSITE:
COMMENT:
BOT-BUSTER 3000 SECURITY CODE:
(*) = REQUIRED



0 posts found