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

December 4, 2009

AFTER EFFECTS + FLASH (part 2/3)

FILED UNDER: After Effects, Animation

images/blogheader2.jpg

In the first tutorial we discussed the basics of After Effects and transitioning your work from there into Flash. This post will focus on three essential skills: Working with green screen footage, Creating masks and Creating loops. We hope you enjoy and if you do not enjoy, we hope you learn something. And if you neither enjoy nor learn something - we can do nothing for you other than ask...Why did you read through the whole bloody mess?

TARGET: Flash developers who are beginners to After Effects, and who would like to start integrating motion graphic style effects into their projects.

FOCUS: This post will look at some After Effects for Flash Essentials. It will break down a few of the core things that will help when prepping your After Effects files for import into Flash. Key topics will include working with green screen, creating masks, and creating loops all in this one post.


WORKING WITH GREEN SCREEN

STEP 1: Open After Effects and import your green screen footage.
Go to File>Import>File...

images/greenscreen_1b.jpg

 

STEP 2: Drop your footage into a Composition.

images/greenscreen_2.jpg

There are a few ways to create a new composition for your footage:
A. Drag your footage file from the project panel to the "New Composition" button on the bottom of the project panel.
B. Drag your footage file from the project panel to the blank Composition Window.
C. Drag your footage file from the project panel to the Layers panel.


STEP 3:
Keying your footage.

"Keying", in this instance, is the process of removing all data/imagery from the canvas save the principal.

Select the layer to apply a key to.

Go to Effect>Keying>Keylight  (If you don't have Keylight, you can use an alternative such as Color Key).

images/greenscreen_3.jpg


STEP 4:
Selecting the color.

images/greenscreen_4.jpg

A. The default Key Screen Color is set to Black.
B. Select a mid-range green (or whatever color you need to key) from the composition window with the eye dropper tool.

STEP 5: Manual clean up

images/greenscreen_5.jpg

A. Your View mode is currently on FInal Result but you have other options to help clean up this matte even better.
B. The key above is pretty good instantly, but there are still dark and light spots in the corners that still need to be removed.

STEP 6: Refinements 

images/greenscreen_6.jpg

A. Changing the view mode to Screen Matte will give you a better look at what is going on. The goal here is to keep everything in white and have everything in the black area removed.
B. You can see here that the darker shades of green aren't fully removed. You need to remove this unless you want some nastiness going on in the final video.

STEP 7:

images/greenscreen_7.jpg

A. First "Screen Pre-blur". This will help your matte edges so they aren't so harsh.
B. Next, use the "Clip Black" setting which will help pull out the unwanted pixels from the black portion of your matte (you could do the same with "Clip White" if needed)..
C. Finally, use "Screen Shrink/Grow" to shrink your matte just a little to further clean up the matte edges.
D. The final matte is looking much better now. All the straggling pixels have been pulled out and the matte's edges aren't so harsh.
Note: Depending on your footage, you most likely will need to play with some of the other settings to get your desired results.

STEP 8: Finalize the keyed footage.

images/greenscreen_8.jpg

A. After taking care of the key, add any further effects you want...Color correction, a background or whatever.
B. Check your final composite. If your keyed element still needs further adjusting for the specific environment it is in, you can go back into Keylight and clean it up a bit more.

CREATING MASKS

The first type of Mask to be covered is applied directly to your desired layer.

STEP 1:

images/masks_1.jpg

A. Select the layer to apply the mask.

 

STEP 2:

images/masks_2.jpg

A. Choose a mask. You can use the pen tool to draw your own mask, but for now, select the star from the shape drop down menu.

 

STEP 3:

images/masks_3.jpg

A. The star mask at work.
B. The mask setting options which include how the mask displays, its opacity, its feathering, etc.

 

STEP 4:

images/masks_4.jpg

A. The deselected star mask at work.
B. The current mask feather is set to 0 which gives the mask a hard edge.

 

STEP 5:

images/masks_5.jpg

A. Here is the new star mask at work once feathering has been applied.
B. Setting the feather up to 50 here gives the mask a much softer edge.

 

STEP 6:

images/masks_6.jpg

A.  The nice thing is that you can add several masks to any one layer. Here a circle mask has been added to the same layer.
B. The second mask layer is added to the main layers drop down.
C. The circle mask cuts out the middle of the star because of this "Subtract" mask setting. You have several options for how masks act including Add, Subtract, Intersect, Lighten, Darken and Difference.

You can also use other layers as masks, which is great when you have a video, animation or specific graphic you want use to as a mask.

STEP 1:

images/masks_7.jpg

A. Add a new layer you would like to use as a mask. In this case a stick man layer has been added.
B. Make sure your layer to be used as the mask is on top of the layer to be masked.

 

STEP 2:

images/masks_8.jpg

A. Using a layer Track Matte, you are able to use the stick man as a mask.
B. This is the Track Matte setting used for this effect. Select which type of Track Matte to use and the layer to target as the Track Matte. The Track Matte options can use either Alpha, Luminosity or the inverse of each to create masks.

 

CREATING LOOPS

There are a few basic ways to create loops in After Effects. Ideally, a seamless loop is always your goal but unfortunately, not all footage and/or animation allows for this. In these instances there are a few methods you can use. Here are a few of the basic loop types and how to go about creating them.

Best Method: "The Seamless Loop".
As the name states, this will give you the most ideal results as the viewer won't be able to distinguish where the actual loop takes place.

Video Footage: When prepping video footage, you'll need all elements to have a "First Position".  All these elements must start and end in this exact "First Position" allowing for you to loop seamlessly from the end to start frame seamlessly. As you can imagine, this can be almost impossible to do if you have several actors and elements in the scene that will shift dramatically and won't align perfectly. This method is rarely used for pre-shot video footage.

After Effects: When animating After Effects content that isn't imported footage, accomplishing a seamless loop is much easier because you have the ability to control your start and end keyframes for all elements. As well, many effects plugins for After Effects, such as the "Fractal Noise" for instance, come with a built-in evolution setting. This setting is a great way to create seamless loops for what appears to be a more complicated cloud or fog animation. Here's quick look at how to use this feature.

 

STEP 1: Create a new Composition and then a new Layer to apply the effect to.
Go To Composition>New Composition...
Go To Layer>New>Solid...

 

STEP 2: Now apply the Fractal Noise plugin effect filter.
Go To Effect>Noise & Grain>Fractal Noise


STEP 3:

images/loop_seamless_1.jpg

A. The Fractal Noise effect has been added to the layer.
B. Set the Time Line Scrubber to your desired keyframe, and click the "Evolution" stopwatch to set the first keyframe.
C. Set "Cycle Evolution" to "On".
D. Set the number of "Cycle (In Revolutions)". Just one was set for this example.

 

STEP 4:

images/loop_seamless_2.jpg

A. Now move the Timeline Scrubber to your desired loop position and change the "Evolution" setting to 1 (this means that at this new keyframe the Evolution will have completed one full time at the desired number of Cycles which is also set to 1.
B.
The keyframe will appear once you have changed the Evolution setting.
Note:
Now the loop is complete as the start and end keyframes are identical and the Fractal Noise plugin handles the animation in between.

 

STEP 5:

images/loop_seamless_3.jpg

A. Let's drag in the Timeline Render Bar to isolate this animation. To finish the seamless loop, you'll need to cut this animation down one frame before the end keyframe so it continues back to the first frame without doubling up the "First Position".

 

STEP 6:
Export your animation....Finished!

 

Next Best Method: The Time Reverse Loop.
This method is great for certain types of pre-shot video footage and can get very seamless results. The basic concept is, since you don't have a seamless point to loop from, you need to create one. How do you do this? Here is a quick example.

STEP 1:
First, create a new Composition and Import the footage you want to use.
Go To Composition>New Composition...
Go To File>Import>File...

STEP 2:
Now drop your footage into a composition and create a desired loop time.

images/loop_reverse_1.jpg

A. This is the starting point of your video. The goal is to get A and B to match exactly. Currently though, they do not.

 

STEP 3:

images/loop_reverse_2.jpg

A. Take your layer and cut it in half of the desired loop time. Then duplicate your layer.
B. This is your duplicated layer. Slide this layer over so that it fills up the second half of the animation. Now you have two of the same exact clip that just run one after the other.


STEP 4:
Select your top layer (the second half of your loop) and reverse it.
Go To Layer>Time>Time-Reverse Layer.

images/loop_reverse_3.jpg

 

STEP 5: Finished!  Now your starting footage frame is the same at point A as it is at point B creating a nice loop.

images/loop_reverse_4.jpg

Note: You can tell our B layer is time reversed by the red diagonal slashed line that appears on the bottom of the layer bar.

 

Things to consider with the Time Reverse Loop method:
1.
The type of footage will matter for this method. This method works best for footage that is subtle and doesn't have too much drastic motion. A lot of footage won't work with this method. For instance, if you have snow fall from the sky and then suddenly reverse back up into the sky, that won't give you the illusion of constantly falling snow.
2. The half way point where your footage starts its "reversing" should be selected carefully. Ideally you choose a point in time where not much is happening. If say, right before the reverse point, one of our characters makes a big movement, that big movement will also happen again immediately in reverse. Although it will still be a fairly clean movement, the obvious doubling of the footage will give your loop less of a seamless feel.
3. Audio. If you have audio that is tied to your footage, you're gonna find that reversing the video will also reverse your audio which most likely isn't your desired result. In this instance, you'll probably need to separate the audio from the video and some some additional audio editing.

 

Last Resort Method: The Fade Blend Loop:

This method is best for very subtle animation/footage and works well for things such as ocean or rain loops where the blend won't become too obvious. For the most part, try to avoid this type of loop because it will give you a much less elegant loop effect.  But, it is handy and works well in certain situations so here's a quick example:

STEP 1: First, create a new Composition and Import the footage you want to use.
Go To Composition>New Composition...
Go To File>Import>File...

STEP 2: Now drop your footage into a composition.

images/loop_fadeblend_1.jpg

A. Pick a loop start point somewhere in your time line.

 

STEP 3:  Resize your Timeline Render Bar to the size you would like your loop.

images/loop_fadeblend_2.jpg

Duplicate your layer and then move the top layer to the right until your start loop point (A) lines up with your end loop frame (B). Now A and B are the same footage frame and will allow for a nice seamless loop. The only problem now is the nasty harsh transition inbetween your points.

 

STEP 4: Fixing the middle.

images/loop_fadeblend_3.jpg

A. Set the first frame of the top layer to 0% opacity.
B. Your keyframe is created. Now you just need to fade this layer's opacity up.

 

STEP 5:

images/loop_fadeblend_4.jpg

A. Move the Timeline Scrubber to the last frame of the loop and now set the opacity to 100%. You'll now have a seamless loop, but the actual transition to the loop will be a blend dissolve. As you can see, this isn't the most elegant method,  but it can work well with the appropriate footage. Finished!

 

If the fade is too long or obvious, you can always experiment with lengthening/shortening the transition animation duration like so:

images/loop_fadeblend_5.jpg

A. Here is an example where you can move the 0% opacity keyframe over to the right in order to speed up the fade transition a bit.

 

Check back shortly for After Effects + Flash post 3.

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

LEAVE A COMMENT

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



0 posts found