Using After Effects to Transition Between Content in Flash
Balind on 16 Mar 2008 | Tips & Advice
Today I’m going to walk you through the process and execution of the event micro-site UFC 82: Pride of a Champion. This article was originally written for Layers Magazine but wasn’t approved in time to go to print, so I’ve modified and posted it here.
UFC 82: Pride of a Champion Created by Red Interactive Agency, 2008
What makes this site unique is the heavy use of AE but not necessarily in the way you might think. Yes you can see we used AE for button rollovers etc. but did you notice the transitions between pages within Flash were also done in AE? That means the entire content area in Flash consisting of Textfields and Movieclips is replaced by a large (1280 x 720), FLV that carries the user from scene to scene ending on a content area. This is truly an example of integrating the broadcast medium of video within Flash without bringing attention to it.
Why do the transitions in AE?
- To give the animation a broadcast touch that the user isn’t expecting. There’s things you can do in AE that you can’t in Flash. In this example we make use of 3d layers, motion blur and particle effects, (It should be noted that with PaperVision it is now possible to create 3d layers in Flash).
How did we integrate the FLV’s so seamlessly?
- Strong communication between the animators and developers. These things need to be planned out to the pixel, so the lead-designer and lead-developer need to be solid buds.
It’s not unusual to start off with a sketch.
What’s the process?
- The final design is contained within a well-organized PSD. Once approved, sections within sub-folders become their own PSD file, which is imported into AE as a composition and cut up into separate PNG’s to be imported, converted to Movieclips and aligned in Flash. The FLV is embedded within a Movieclip, when the playhead reaches the last frame it’s told to move forward one frame in the parent directory, which puts it on the Movieclip containing that sections design elements and interactivity.
How did we optimize?
- We determined that the motion needed to be fast-paced and large, so we settled on a resolution of 1280 by 720 for maximum impact, by keeping the motion quick and the videos short we were able to keep the file-size low for quick loading and optimal playback speed.
Rishi on 17 Mar 2008 at 6:49 am #
Wow! Thanks Balind! Great article!! The amount of AE on 82 is incredible! When is a new site by you coming?
Rex-furibundus on 17 Mar 2008 at 7:02 am #
Nice stuff and interesting blog.
Just out of curiosity: apart from the 16×16 multiple rule (that you seem to follow), is there any other trick or tip you usually apply when delivering FLVs? ‘Cause in my experience FLVs are really picky when it comes to optimization…
Oh, and it would be interesting to now if you take advantage of any non-Adobe tool to make up your videos.
P.S. Hope your sanity does well after so many UFC sites
Nicolas Elizaga on 17 Mar 2008 at 7:31 am #
Hi Balind,
at school I had the same line of thinking, where After Effects can help you achieve many visual effects that Flash can’t. Lately, for some reason, I’ve become over-burdened with making things “dynamic”, which isn’t realistic in all cases. My thinking is “if all the transitions are videos, how can someone change them quickly without re-rendering?” Not always the best argument, I think, and your recent after effects + flash posts have inspired me to go back to my roots and try more with AE. I always end up using both separately, but not always as a tool for interesting broadcast-quality transitions. Thanks for the inspiration,
-Nicolas
ilfan on 17 Mar 2008 at 7:36 am #
hey man,
just wanted to say thanks and APPRECIATE all the help/advice you’ve giving us especially with articles like this.
thanks!
Jmm on 21 Mar 2008 at 4:08 pm #
Dope blog.
With all the talk about RIA’s and OOP, I started to think that the niche of sites focused on graphics and animation was coming to and end. This blog is more encouragement that it’s still very much alive.
Balind on 21 Mar 2008 at 7:39 pm #
Right on.
YAPP on 25 Mar 2008 at 4:57 pm #
A nice informative rundown man, thanks. I love all the AE integration with some of the UFC sites. It’s obviously been very inspiring to alot of people including Lee Brimelow over at gotoandlearn.com. Appreciate ya takin the time to explain a little bit of your process that goes into these projects.
Jason
Dex on 01 Apr 2008 at 8:01 am #
Hello Balind,
I am curious about what it takes to develop the UFC sites. What is the time frame for them. And also, how big is your design/development team?
Thank you for sharing. I found your blog very interesting
Balind on 05 Apr 2008 at 2:04 pm #
UFC time-lines are anywhere from 2 - 6 weeks, rarely longer.
Dwayne Neckles on 09 Jun 2008 at 1:03 am #
Balind
After numerously reloading replaying those transitions I saw that one key part of your process that wasn’t mentioned is the way u transition the current state to the state it was in when ae intro was done.
For example if one of those pages had a list of ufc matches that say the user went to a different match . U would transition back to the original match first and then call the ae transition to do itsthing …
That is pretty sophisticated man , got any pointers?
Dwayne on 24 Jun 2008 at 10:28 am #
my question not clear enough?
Balind on 24 Jun 2008 at 10:52 am #
Very observant, yes, in order to leave a section you need to get back to the starting point of the FLV that will be carrying you out. Whatever state the graphics in your movieclips where in when you arrived to that section, you need to animate back to that state in order to have a smooth transition from Flash to FLV. Thanks for the comment.
Christian Kragh on 25 Jul 2008 at 1:28 pm #
Very nice insight, including the sketch. xD Thanks.
Christian