Flash after effects sự kết hợp chuyên nghiệp phần 7 ppt

Using Text Animators 135To simulate the file download, select Control > Test Movie.. In this next part of the exercise, you are going to focus on animating the original text layer that is

Using Text Animators 135

To simulate the file download, select Control > Test Movie In the new SWF window that opens, select View > Download Settings Make a selection from the different bandwidth profiles in the popup menu Select View >

Simulate Download to preview how fast the image will load under the chosen

bandwidth The text animation loops until the image is completely loaded

Figure 5.34:In Flash you can simulate file download for different bandwidths.

The break is over Let’s get back into After Effects and explore another advanced technique using text selectors In this next part of the exercise, you are going to focus on animating the original text layer that is currently hidden.

Turn off the visibility of the duplicate text layer by clicking on its video switch

16.

Turn on the visibility of the original text layer (DOWNLOAD).

Double-click on the text to select all Change the text color to a bright green

17.

Increase the font size so that the text fills the width of the Comp Window (Figure 5.35) For this exercise, the font size was set to 104 pixels

Figure 5.35:Change the text color and increase the font size.

In the Timeline, twirl open the text layer to display the Text and Transform

18.

options Click on the arrow next to the word Animate and select Position.

In the

0.0, 500.0 This changes the vertical position of the text in the Comp Window.

On the

Selector > Wiggly A new Wiggly Selector appears underneath the Range

Selector 1 in the Timeline The letters appear at different vertical locations in the Comp Window (Figure 5.36) A Wiggly Selector adds randomness to the overall text animation You can control its affect through the Wiggly properties

Figure 5.36:Apply the Wiggler Selector to the text layer.

Twirl open the

The text now “wiggles” much faster in the Comp Window To enhance the tion, let’s activate the motion blur for this layer

mo-Using Text Animators 137

Turn on the

on the Enable Motion Blur button at the top of the Timeline Whenever this

button is activated, any layer with the Motion Blur switch enabled will display the blur in the Comp Window (Figure 5.37)

Turn on the visibility of the duplicate text layer (

on its Video switch Click on the

look like it belongs in the opening credits to “The Matrix.” Save your project

Figure 5.37:Enable the Motion Blur switch and button to enhance the animation.

Press the

Deselect all text layers in the Timeline Make sure nothing is highlighted Go to

26.

the Effects & Presets panel Twirl open the Backgrounds folder Double-click on

Circuit A new solid layer is added to the Timeline and Project panel.

In the Timeline, move the

U key to reveal all its keyframed properties The Scale and Evolution properties

appear Click and drag both keyframes to the beginning of the composition

Type

to 40% This provides better contrast between the text and the background

Click on the RAM Preview button to see the final results.

Figure 5.38:The final composition includes an animated background preset.

The composition is done The project has evolved from a Flash preloading

Set the Format to Adobe Flash Video Click on Format Options and set the Bitrate setting to 400.

Click on

the final destination for the rendered movie Click the Render button The

final file size for the FLV file is 270 KB Import the video into Flash using

“progressive download.”

Summary

This completes the chapter on type in motion You covered a lot of ground with text and all its properties This chapter only scratches the surface of what you can do with the text engine in After Effects The possibilities are endless The best way to keep learning is to apply the text animation presets and examine their structure From there, you can start creating your own custom presets

In the next chapter you cross over into the third dimension

CHAPTER 6

The Third Dimension

Step into the third dimension After Effects allows you to position and animate layers in 3D space

This chapter continues your journey into a new frontier of creativity for Flash Web and broadcast design using the Z-axis as your guide

Entering 3D Space

2 140 Animating in 3D Space

2 147 Creating 3D Environments

2 156

Entering 3D Space

The third dimension unleashes a lot of creative possibilities Up to this point

in the book, you have worked exclusively in two dimensions — X and Y After Effects travels beyond 2D by allowing you to move layers along the Z-axis (depth) In addition, you can rotate the layers, add cameras, and even lights that illuminate 3D layers, creating realistic cast shadows It is so much fun and all it takes is one simple click and you are in 3D space

This chapter explores how to create, adjust, and animate 3D layers Each exercise builds on your 3D skills The chapter projects are geared either towards integrated Flash and After Effects for Web output or broadcast video Let’s cross over into the third dimension

Locate the Chapter_06 folder on the DVD Copy this folder to your hard drive

The folder contains all the files needed to complete the chapter exercises.

The first exercise starts with the basics, converting layers into 3D layers Any layer, other than an adjustment layer, can be positioned in 3D space as long as

it contains content You will create a 3D animation using a text animation preset and render the composition as a Flash Video file optimized for the Web

Once imported into Flash, the FLV file will be used as a navigational button

To see what you will build, locate and launch the 3DSpaceConsole.swf file in

the Completed folder inside the 01_3DSpace folder in Chapter_06 (Figure 6.1)

Click on the video The Flash playback head jumps to another frame and plays

an animation that zooms out of the scene

Figure 6.1:The planet and text are 3D layers in After Effects.

Entering 3D Space 141

In Adobe After Effects, select

folder inside Chapter_06 Select 01_3DSpace.aep, and click Open.

The project contains one composition named 3DSpace It holds two layers: a

2.

QuickTime movie of a planet rotation and a Photoshop still image of a star field

Figure 6.2:The composition holds two layers: a QuickTime movie and a still image.

Select the

Position property Hold down the Shift key and type R to open the Rotation

property as well Notice that these properties work in two-dimensional space (Figure 6.3) The layer’s position can only move along the X-axis (left and right) and the Y-axis (up and down)

Figure 6.3:By default, all layers in After Effects are displayed in two-dimensional space.

In the Timeline panel, locate the

icon is a cube Select the 3D Layer switch for the Planet30.mov layer You just crossed over into the third dimension Exciting huh? Well, nothing much happened in the Comp Window, but take a look at the transform properties you opened in the previous step (Figure 6.4)

Figure 6.4:3D layers acquire additional transform properties.

When a layer is converted into a 3D layer, it acquires the Z-axis There are now six Rotate properties to choose from A new transform property called

Orientation represents the layer’s absolute rotational XYZ angles It is best

to use the other XYZ Rotation properties for any type of 3D animation Only use Orientation to set a 3D layer’s rotation angle that does not animate

Let’s rotate the planet in 3D space Select the

the second value by moving your cursor left and right The layer rotates around the X-axis (Figure 6.5) The Rotation value is measured in degrees

Figure 6.5:X Rotation rotates the layer around the X-axis.

When you are done, set the

Select the

cursor left and right The layer rotates around the Y-axis (Figure 6.6)

Figure 6.6:Y Rotation rotates the layer around the Y-axis.

When you are done, set the

Select the

cursor left and right The layer rotates around the Z-axis (Figure 6.7)

Figure 6.7:Z Rotation rotates the layer around the Z-axis.

Set the

You may have noticed that the 3D layer does not contain any thickness to it After Effects allows you to position flat 2D layers in three-dimensional space Think of it as holding

a sheet of paper up in front of you and turning it from side to side You cannot model spherical-shaped objects in After Effects For that, you would need an actual 3D program such as Autodesk Maya or Maxon’s Cinema 4D.

Let’s continue with your project by adding another 3D layer For this, you will

11.

add a 3D text animation preset Make sure that none of the layers are selected

in the Timeline Go to the Effects & Presets panel Twirl open the Animation

Presets folder Twirl open the Text folder

Entering 3D Space 143

Twirl open the

creates a new text layer in the Timeline It is already set as a 3D layer

Figure 6.8:Double-click on the 3D animation preset to add it to the composition.

A yellow circle appears around the layers in the Comp Window You need to

13.

adjust its rotation on the X-axis to see the letters Go to the Timeline and select

the 3D text layer Type R on the keyboard to open its Rotation property.

Scrub through the

Go to the Comp Window Double-click on the yellow line to select the path

layer The First Margin property appears with two keyframes in the Timeline

This controls the text animation around the circular path

Press the

to the beginning of the composition (00:00)

Scrub through the

Press the

Click and drag the second keyframe to the end of the composition Hold the

20.

Shift key while dragging and the keyframe will snap to the CTI

Scrub through the

Figure 6.10:Click and drag the second keyframe to the end of the composition.

Scrub through the Timeline until the text is in front of the planet in the Comp

21.

Window Select the Text tool and highlight all the text

Change the default text from Adobe After Effects to

Go to the Character panel and change the text to whatever font 3

and size you want Arial Black was used for this exercise

The text color is set to yellow

3

Figure 6.11:Click and drag the second keyframe to the end of the composition.

Click on the

even though in the Timeline the text layer is stacked on top of the planet layer

Why is this happening? 3D layers ignore the stacking order The layer’s distance from the active camera determines which layer is in front (Figure 6.12)

Figure 6.12:3D Layers ignore the stacking order in the Timeline panel.

Entering 3D Space 145

Leave the

the same composition Save your project Select Composition > Make Movie.

Click on

Video Click on Format Options and set the Bitrate setting to 400 The correct

dimensions (320 x 240) and frame rate (15 fps) were set when the composition was initially created using the Web Video (320 x 240) preset

Click on

the final destination for the rendered movie Click the Render button

Let’s move to Flash Double-click on

folder to open the file in Flash It contains four layers: actions, grid, video, and console Everything is in place except for the video

Figure 6.13:The Flash file is assembled and ready for the FLV file.

Select the blank keyframe on Frame 1 of the video layer Select

Import Video The Import Wizard dialog box appears To import the FLV file:

Locate the

Set the deployment for

Set the Skin to

Click

Center the FLVPlayback component within the grid artwork on the Stage Go

28.

to the Properties panel and give the component an instance name of myVideo.

You will next add ActionScript to loop the video and turn it into a navigational button To do this, the code must reference the instance name

Select the keyframe in Frame 1 of the

Enter the following code before the “stop” action in the Actions panel

The code imports the Flash Video package This allows Flash to access video events such as when it is done playing (COMPLETE) An event listener “listens”

for the video to complete When it “hears” the event, the linked event handler (loopVideo) instructs the FLVPlayback component to rewind the video back to the first frame (0) and starts playing it again

Another event listener detects a mouse click on the video component itself

When that event occurs, the Flash movie jumps to the second frame in the Timeline and plays the animation To provide user feedback, the buttonMode for the FLVPlayback component is set to true This will change the appearance

of the cursor when it rolls over the video indicating that the video is clickable

Select

This completes the exercise In this exercise you converted a 2D layer into a 3D layer When a layer becomes three-dimensional, it acquires additional Z-axis transform properties You experimented with the layer’s XYZ Rotation properties

in 3D space You also added a 3D text animation preset 3D layers ignore the layer stacking order in the Timeline Let’s switch our focus from rotation to posi-tion The next exercise continues your 3D trek using the Z-axis Position property

// import Flash Video package import fl.video.*;

// add Event Listeners myVideo.addEventListener(VideoEvent.COMPLETE, loopVideo);

Animating in 3D Space 147

Animating in 3D Space

The goal of this exercise is to animate a layer’s position in three-dimensional space Position in 3D space is defined by X-, Y-, and Z-coordinates Changing the X-position of a layer moves it left or right Changing the Y-position moves

a layer up or down The Z-axis moves a layer towards or away from the active camera Table 6.1 describes how 3D space works in After Effects

Table 6.1: Understanding X-Y-Z in After Effects

Axis Position + Value - Value

X Left and Right Moves Right Moves Left

Y Up and Down Moves Up Moves Down

Z Toward and Away Moves Away Moves Toward

To see an example of what you will build in this exercise, locate and play the

RomanMarch.mov in the Completed folder inside the 02_3DAnimation folder

in Chapter_06 You will build a 3D animation using an imported Flash SWF file

The final composition will be prepared for NTSC video

Figure 6.14:The final movie contains a Flash SWF file animated along the Z-axis.

In Adobe After Effects, select

Navigate to the 02_3DAnimation folder inside Chapter_06 Select

2.

02_3DAnimation.aep and click Open.

The Project panel contains all of the footage you need to complete the exercise

3.

Deselect any highlighted footage in the Project panel by clicking on the gray

area under the footage Click on the New Folder icon at the bottom of the Project panel Rename the new folder to Comps.

Figure 6.15:Create a new folder and name it Comps.

Select

Composition Name Select NTSC D1 from the Preset popup menu

Set the duration to 0:00:15:00 Click OK.

Figure 6.16:Create a new composition.

Click and drag the

the Timeline Release the mouse A group of Roman soldiers appear in the Composition panel This animation was created in Flash and published as a SWF file Let’s quickly deconstruct the walk cycle

Motion tweens are applied to nested graphic symbols that only change in position over time These include the head, shield, spear and arm The torso and skirt are vector shapes that morph Shape hints were used to achieve the desired effect The leg movement is a frame-by-frame animation

The entire animation is encapsulated within a graphic symbol This symbol was placed on the Flash Stage and duplicated three times The symbols occupy 32 frames in the main Timeline, the number of frames contained in the walk cycle