Web and Video

Notes from the session on interactive video with After Effects (AE) and Flash (Fl) at MAX 2007, by Michael Coleman (AE product manager).

These are messy for now. I’ll clean them up, but do watch Michael’s blog on blogs.adobe.com for more details, source code, and the project soon.

Purpose: Show a workflow where use After Effects and Flash together to create an interactive experience.

Create a microsite video viewer. Want to combine footage with bike rider information on a site. The rider info should be accessible throughout the video experience. And you can show the hide and the data in a heads up display, which is essentially a pop-up.

Using the Aquo assets (which are the assets used in Adobe demos and Video Workshop).

Will be creating 3D text - can let each character have 3d rotation, and so on. Will be modifying animation presets (you can modify for your own needs), motion tracking (of an object through a scene), parenting (one layer can inherit the mvt of another layer - don’t have to copy/paste keyframes, can just lock together), track mattes (vx term of using alpha layer of one layer for another layer, keep motion related), markers (put a note in time, comment, FLV cuepoints), FLV encoding with render queue (can do batch rendering of FLV).

Flash concepts: importing PSD and video, basic ActionScript (AS), event cue points, basic interactivity. How to write AS to listen for cuepoints.

Showing final piece: 3d text spinning around the rider, click it and there’s a display of data. Driven dynamically by cuepoints in the video. Can automatically change it.

– Importing video into AE –

D-click on Project window (quick way to import), finding footage.

Creating a new composition - drag footage onto new comp icon, and it will set it up with all the right settings (aspect ratio, framerate, etc).

Viewing raw footage.

– Adding text –

Starting with animation presets. Going to presets panel, and checking out 3d text folder. Goes to Browse Presets, and browse them visually in Bridge (you can see previews). Selecting text in a circle, and add it to the comp by d-clicking it in Bridge.

Changing the rotation - click the “r” key in the timeline and it narrows down the options so you can quickly find rotation. All live, dynamic text so you can change it afterwards.

Positioning the text so it’s around the rider, double click it so you get Free Transform controller.  Previewing. Text stops, but want it to stay animating, and doesn’t match the rider’s mvt yet.

Going into the text layer again. Select a layer, and press “u” key - shows you everything in layer that has keyframes on it - shows you everything that’s animated, so you can see path options. Making the animation the whole length of the comp so it animates.

Using motion tracker to let you attach something with motion and attach it to something in video with motion. Added a motion tracker to the layer - place it on an object that you want to follow though the scene. So you can set an attach point (the rider in the video), and then you add a search region - tells AE where to look for the object (speeds things up).

Setting motion tracker options. Then set analyze movement, and it quickly looks through the shot and tracks the object. Then we hit the apply button to apply it to the other layer with text. So now the text is following the racer. Want to tweak the text.

To tweak, selecting all the position keyframes, and shift the entire thing down - so then AE adjusts all of the values at the same time. So, going to comp window with all selected, and drag the text in the comp downwards and so on. Preview again, and the text still follows the rider.

Text needs to go around the rider - right now it’s rotating on top of the rider.. text is in front of the rider. Now the background layer goes partially in between the text. So now you’re making that layer 3d. But now the text sort of hides behind the rider. Switch view to “top” on the now 3D layer. So we need to create a mask around the text so it looks as you’d expect.

Going to create a new solid layer. Put a mask on the solid layer, a round mask. So you mask out the rider so the text can go behind her. Cmd T to free transform and position the mask on the rider. Makes the text look like it’s going behind the rider. Feathering the mask, so it’s a gradual fade instead of just clipping off.  But now you need to have the mask track the rider so it is animated/follows the rider too. Use parenting to do this - so the mask inherits the movement of the text layer.

In the timeline, parenting column, and you select the layer you want to parent. Now if you preview again, you can see the mask tracking the rider as well.

Create a track matte - layer as alpha channel on top of the layer that’s being matted. On the background rider MOV, use the alpha matte from the mask layer, and applies it to the video. Then they can be animated independently.

Then you add another copy of the video to the back. Everything on the video side has now been put together - motion graphics done.

Before we leave AE, we need to create FLV cuepoints. All layer markers can be saved as an AS3 cuepoint. You can add the name, cuepoint, parameter names and parameter values in the Layer Marker dialog in AE. Or, you can create a script that takes keyframe data, and automatically create markers for them.

Selects a tack point, scripts > select properties (something) - creates a marker for every frame. Now it prepopulates the cuepoint parameter names and values for each one.  Now all markers out as FLV cuepoints.  (Will not overwhelm flash with that many cuepoints). Note - current script does not input names. You’d need to insert names at the moment. However — There will be an update for that script soon - and Michael will post this on his blog. Will also post this project, and you can drop it into your AE installation. Now you will have to go through each marker and put in the name.

Using Adobe Media Encoder in After Effects to output FLVs. Will have the H.264 updater soon so can output using new video codec for FLV, but for now can do VP6 out of AE.  If you want, you can output different versions of the same video - can do more than one output module per render item.

Going to Flash. Creating a new FLA. Importing a PSD to use as a background. Bring in the video onto a new layer, and using the File > Import Video. Selecting the FLV that was encoded from AE, and then setting a skin if you want Putting the video onto the Stage, and centers it. Giving the component an instance name.  But now we want to add the “heads up display” (click the text and see a pop-up with racer data).

So for the display pop-up, importing another PSD with the graphics. It’s an image with text and stuff. Then adding some AS to hook it up.

Creating a new actions layer. Which is copied and pasted from a text file

Basically importing the fl.video. Creating some variables for properties, object and value.

myVid is listening for an event, which is a cuepoint. When you hear the cuepoint, you execute a certain function. The function iterates through the cuepoint data, and it listens for the cue point name. When you see that name, the next lines divde the value up to X and Y data, and assign it to the racer data x and y. Also want to add a second event that handles a click. It listens for a mouse click, and when you do, toggle the dataview, which turns on and off the racer data pop-up.  (it’s about 35 lines of code, and it will be up on Michaels blog).

testing the SWF now. When you click you see the heads up display. Then you move the pop-up back in Flash authoring.

You could take it farther by having the pop-up be a dynamic SWF that brings in live data or something.

That’s it!

(2 votes, average: 4.5 out of 5)

 Loading ...