From after effects to flash poetry in motion graphics - part 8 docx

15. Test the movie. The video has a gradient mask applied to it (see Figure 9-17).

Figure 9-17. Use blend modes to create a

gradient mask for an FLV.

“Getting fluid” in Piccadilly Circus

Inevitably you are going to be asked to put a video in an area of a photograph. A couple

of weeks ago a friend of one of the authors sent him an image of Piccadilly Circus in

London. We looked at the image and thought, “Wouldn’t it be neat if we put the ‘got

fluid?’ animation from earlier in the chapter into the pixel board in the upper-right corner

of the image?”

As Figure 9-18 illustrates, the problem with that is the area curves around the corner of

the intersection. If the video was done right, it would follow the geometry of the area

where it will be placed. The traditional approach to this problem is to place the image into

Flash, draw a mask of the area that will contain the video, and then manipulate the video

object with the Free Transform tool in Flash to get it to fit . . . somewhat.

Figure 9-18. The video is destined for the pixel board in

the upper-right corner.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

330

7486CH09.qxd 11/10/06 5:16 PM Page 330

The issue is not one of getting it to fit. The video will need to have a bit of distortion

added to it. Also, even though the video mask will give the illusion of a video wrapping

around the pixel board, it will still look as though it is still “flat” (see Figure 9-19). It just

won’t look right because the Free Transform tool does not allow you to “bend” the lines to

which it is applied. You can skew, scale, and rotate the video object, but you won’t be able

to bend the video to follow the curve.

Figure 9-19. Something just doesn’t look quite right.

There is a solution. The answer lies in the word bend, and we have used a tool that will

bend a video: the Bezier Warp effect in After Effects. Let’s “get fluid” in Piccadilly Circus:

1. Inside the Chapter 9 Exercise folder is a folder named VideoMask. Open this folder

and open the Warped.ae file to launch After Effects. When the file opens, you will

see that we have included the image we will be using in Flash and a QuickTime

movie rendered from the “got fluid?” exercise you did earlier in this chapter.

2. Select the TextAE layer and twirl down the Distort folder in the Effects & Presets

panel. Drag a copy of the Bezier Warp effect in the Distort folder on top of the

video in the Comp.

As you may recall, the Bezier Warp tool adds Anchor points, called vertices, and handles,

called tangents, to the object in the Comp. What you are going to do is to manipulate the

vertices to get the object to the proper size and then manipulate the tangents to “bend” it

around the edge of the sign.

3. Drag the video and align its upper-left corner with the sign in the picture as shown

in Figure 9-20. When the picture is aligned, drag the middle vertex at the bottom of

the image upwards until the bottom-left corner of the video is roughly placed

on the bottom-left corner of the pixel board. You may have to adjust the place￾ment and size of the video because moving that vertex also moves the opposite

edge inwards or outwards.

THE VIDEO BEHIND THE MASK

331

9

7486CH09.qxd 11/10/06 5:16 PM Page 331

Figure 9-20. Drag a vertex to get the size to match the pixel board.

4. With the video into position, all you need to do now is to start fiddling with the

tangents. Drag the bottom-right tangent point onto the bottom-right corner of the

pixel board. Notice that when you move that point, it is almost as though you were

manipulating a Bezier handle in Illustrator. In fact, it is the same process.

5. Move the upper-right tangent to the upper-right corner of the pixel board. In the

Comp window, change the Magnification level to 200% and start fiddling with

the handles. When you finish, the edge should resemble that shown in Figure 9-21.

Figure 9-21. The edge is pretty well complete.

6. Change the magnification level to 400% and move around the warp to fine-tune

the placement of the handles and the edge of the video on the pixel board. You

can move around the Comp window by pressing the spacebar and dragging the

image.

7. When you finish, reduce the magnification to 100% and scrub through the timeline

to see the effect. As you see in Figure 9-22, it looks a lot more natural than the one

shown in Figure 9-19. Save the project.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

332

7486CH09.qxd 11/10/06 5:16 PM Page 332

Figure 9-22. The image looks more natural than the one in Figure 9-19.

Naturally, solving one problem raises another. Obviously this video is physically too large

to be run through Flash. The Comp size matches the 550✕400 dimensions of the Flash

stage. A video of these dimensions, especially if the file is being streamed from a web

server, will not give you smooth playback. There is a way of solving this problem, and it is

to render out only the video portion, not the image, of the After Effects project. The result

will be a very small video (physically and in file size) that will become even smaller when it

is encoded as an FLV file. Here’s how:

1. Select the Piccadilly.jpg layer and either turn off its visibility or delete it from the

Comp.

2. To the left of the Toggle Alpha Transparency button in the Comp window is the

Region of Interest button. Click it. A box with handles will appear in the Comp

window.

3. Drag the handles, as shown in Figure 9-23, to adjust the size of the selection. What

you have just done is to isolate the video on the screen.

Figure 9-23. Set a region of interest to isolate the video.

THE VIDEO BEHIND THE MASK

333

9

7486CH09.qxd 11/10/06 5:16 PM Page 333

This region of interest not only isolates objects, it can also be used to crop a video to the

size of the region you identify. Here’s how:

4. Add the Comp to the Render Queue. Click the Lossless link and select QuickTime

movie as the Format and use the Animation codec set to Millions of Colors as the

compressor.

5. Click the Crop check box and then click the Use Region of Interest check box, shown

in Figure 9-24. Selecting this crop option outputs the video to the dimensions of

the bounding box used as the region of interest.

Figure 9-24. You can crop a video to the dimensions of the

region of interest.

6. Select Audio Output and click OK to close the Output Module Settings dialog box.

7. Click the Output To link, navigate to your Exercise folder, and save the video as

Warped.mov. Click OK to close the dialog box and click the Render button to create

the video.

8. Save the project and quit After Effects.

The next step is to run the Warped.mov file through the Flash 8 Video Encoder to create

the FLV file. To make life easier for you, we’ve done this already, and have included a copy

of the two FLV files—Warped.flv and Looky04.flv—that are in the VideoMask folder and

will be added in Flash.

Let’s put some video up in Piccadilly Circus:

1. Open the VideoMask.fla file. You will notice that we have actually created the

masks and the videos for you. The masks were created by selecting the Pen tool

and drawing over the area of the image where the video will appear. We then

switched to the Selection tool, clicked each object, and turned off the stroke in the

Property inspector.

The objects were then converted into movie clips named Warped and Tiago. Two

layers were added to each movie clip. One was the Actions layer and the other con￾tains the video object from the Library. The video object was lined up under its

mask and the mask layer was created.

If you zoom in on each of the movie clips, you will see how we used the X position

from the masked video object to align each clip with its pixel board on the screen.

What you might want to do is to scrub through the timeline to ensure the edges

of the video in the Comp are within the region of interest.

FROM AFTER EFFECTS TO FLASH: POETRY IN MOTION GRAPHICS

334

7486CH09.qxd 11/10/06 5:16 PM Page 334