Flash CS4 Professional in 24 Hours- P8 docx

With the 3D Rotation tool, you can rotate a movie clip not just on the X-axis and Y-axis, but on the Z-axis as well.. Figure 11.1 shows a movie clip that has been moved with the selected

201Workshop

Q I’m having trouble drawing bones in my shape Flash wants to place

the end of the bone only in specific spots Can I tell Flash to enable me

to put it wherever I want?

A Flash is setting the Transformation Point, what we called the joint, for

you to some degree You can turn that off and place your point

any-where you want by choosing Edit, Preferences (or Flash, Preference on a

Mac) Click on the Drawing Categor y, and uncheck the box that says

Auto Set Transformation Point What’s really cool about doing this is

now you can drag your points outside of your figure and have a little

more control of the movement when you need

Workshop

The Workshop consists of quiz questions and answers to help you solidify

your understanding of the material covered in this hour You should try to

answer the questions before checking the answers

Quiz

1 What’s the downside to using art created with the brush rather than

movie clips?

A There’s really no downside You should always use brush-created art

B If your figure loops on itself, it might not look right Also,

some-times you get jagged edges and unpredictable results

C Bones don’t work with brush art

2 How is posing movie clips different from posing a drawn shape?

A There’s no real difference

B A drawn shape can be posed multiple times; a movie clip figure

can only be posed once

C Each movie clip can rotate independently

3 Once you’ve added bones to your shape, what can you not do in the

armature layer anymore?

A If you’re using clips, you can’t add anymore If you drew yourshape, you can’t draw anymore

B You can’t rename the armature layer

C You’re stuck with whichever easing you selected before youadded bones

Quiz Answers

1 B.Brush-art has to be carefully adjusted when posed to keep it ing good Don’t forget that you can use the Bind tool to adjust thecontrol points to make it look even better

look-2 C.You get the extra benefit of being able to rotate the movie clips inaddition to posing the figure

3 A.After you add your first bone, you can’t add more clips or morebrush strokes to your figure Also, you can only use one kind of cre-ation, either all symbols or all drawing

Prior to this version of Flash, to make an image appear to rotate in 3D

space, you had to use the Free Transform tool and fake it In this version,

the 3D tool takes care of the tedious work of simulating 3D for you and

ac-tually moves and rotates your movie clips on all three axes With the 3D

Rotation tool, you can rotate a movie clip not just on the X-axis and Y-axis,

but on the Z-axis as well This enables you to perform perspective

transfor-mations on anything you can put in a movie clip, even on movie clips

com-bined to form a structure It’s more powerful than it seems at first glance

As you gain more expertise with Flash, you learn how to rotate your clips

dynamically using ActionScript

Creating a 3D Movie Clip

Let’s take a look at two new 3D tools and how they are represented on the

stage Figure 11.1 shows a movie clip that has been moved with the selected

3D Rotation tool, located on the toolbar under the Free Transform tool

Take a closer look at Figure 11.1 The gray shape on the Stage is a movie

clip It started as a rectangle, but was moved in 3D space with the 3D

Rota-tion tool After you select a movie clip with this tool, you see red and green

crosshairs, a blue circle, and a larger yellow circle centered on your movie

clip at the point where the rotation occurs The red line represents the

X-axis; the green line is the Y-axis Because the Z-axis would be sticking

straight out at you, it’s represented by the blue circle Think of this like a

wheel that rotates your shape around the center axis Finally, the orange

cir-cle rotates in all three dimensions at once

Now, we take a quick look at the 3D Translation tool Similar to how the

Rotation tool enabled you to rotate in 3D space, the Translation tool enables

HOUR 11

Simulating 3D Animation

you to move your clip in 3D space along the same three axes Figure 11.2shows you the appearance of your clip on the stage when it’s selected withthe Translation tool

The red arrow is a handle for the X-axis; the green arrow is for the Y-axis;

and the blue dot in the center is for the Z-axis Unlike the Rotation tool, youcan’t move your clip across more than one axis at the same time

When you create a movie clip, the 3D Position and View section of theProperties panel appears, as shown in Figure 11.3 These settings are involved

FIGURE 11.1

The 3D Rotation tool gives you

the ability to rotate on the X-axis,

Y-axis, Z-axis, or all three at the

same time.

FIGURE 11.2

The 3D Translation tool enables you

to move your clip along the X-axis,

Y-axis, or Z-axis.

when you manually adjust the handles in the two tools This section

con-tains the following settings:

X, Y, and Z Position—Imagine a 3D grid covering the entire stage

These values correspond to the center of your movie clip’s location

with reference to that grid The 0, 0, 0 coordinates of this grid exist off

the Stage by default

Width (W) and Height (H)—In 2D space, these would apply to the

width and height of your clip In 3D space, it refers to the rotated

width and height, that is, how wide and tall your movie clip is given

the angle it’s been rotated

Perspective Angle—We talk about this in more detail under

“Per-spective Angle,” but for now, think of the per“Per-spective angle as the

di-rection from where you are viewing the object Pretend you are

filming the screen with a movie camera The perspective angle keeps

track of what angle the movie camera is pointed toward the screen

Vanishing Point X and Y Position—We also talk more about this

un-der “Vanishing Point,” but this controls how far the screen is from our

hypothetical camera

Before we create our 3D object, we quickly learn the rules of using 3D in

Flash

Following the Rules of 3D Animation

Just as motion tweening has different rules than shape tweening, animating

objects in 3D has its own set of rules Because the only reason you probably

FIGURE 11.3

When you create and select a movie clip, the 3D Position and View section of the Proper ties panel appears.

If you want to create a true 3D object, you need to use multiple movie clipstogether and build some sort of hollow structure You angle multiple movieclips into a box, as shown in Figure 11.5 This box only has three sides, butadding three more makes it a cube You can rotate each movie clip individ-ually or all of them together.

Animating movie clips in 3D, as you soon see, can be done by creating asimple motion tween and using the 3D tools to move the clip You can alsouse the Select tool to reposition your clip, but it behaves much the same asthe Translation tool, remembering that your clip is moving in 3D space Youcan use the Free Transform tool as well Basically, anything you can do in anormal motion tween, you can do during your 3D animation It’s worthnoting that you can also use ActionScript to rotate your movie clip instance

We show you a quick example at the very end of this hour in the section,

“Rotating Objects with the 3D Rotation Tool.”

Once you’ve used 3D transformation on a movie clip instance, you can’tedit the parent clip in Edit in Place mode However, you can open it fromthe Library or by right-clicking and choosing Edit You don’t have the

FIGURE 11.5

To build a structure that has height,

width, and depth, you need to

com-bine movie clips.

FIGURE 11.4

Movie clips have no actual depth,

so you can’t see the one here,

which has been rotated along the

X-and Z-axes.

advantage of seeing it in the current position on the Stage When we say 3D

transformation, we mean animating either the position or the rotation of

the object in a motion tween To tell when this has occurred, right-click on

one of the frames in your Timeline, and instead of motion tween, Flash is

now referring to your tween as 3D tween

Another important point to understand is what Flash uses to rotate around

when you move your clip Unlike rotating a 2D movie clip with the Free

Transform tool, when you rotate your clip, Flash uses the center of the

ob-ject, not the Registration point

Although we haven’t talked about publishing your Flash movie yet, keep in

mind that the publish settings must be set to Flash Player 10 and

Action-Script 3.0 to use 3D This becomes important later when you decide to

pub-lish your movie for the web We discuss this process in Hour 20, “Linking a

Movie to the Web.”

Objects in 3D Space

By now, you must be ready to try creating a 3D object yourself

Create a 3D Movie Clip

TRY IT YOURSELF ▼

In this task, you create a movie clip and move it around in 3D space You

also get a chance to adjust how Flash centers the rotation and motion

1 Open a new file, and make sure it’s ActionScript 3.0 Draw a rectangle

on the stage, and turn it into a movie clip

2 Select your movie clip Choose the 3D Rotation tool, located under

the Free Transform tool You see the rotation overlay, as shown in

Figure 11.6

3 Play around with your movie clip by clicking and dragging on the three

axes Get comfor table with the direction that each axis moves your

clip, and then use the orange circle to rotate all three dimensions at

the same time

4 Now change to the 3D Translation tool, and notice how dragging on

the arrow handles changes the location of your clip Dragging the

X-axis handle to the right or left swings it around your view accordingly,

and the Y-axis can move up or down

5 If you drag the blue handle downward, your movie clip appears to move

closer to you If you drag the blue handle upward, it moves farther away,

closer to the vanishing point It seems smaller as you drag the blue

han-dle up Think of watching a car drive away From your perspective it

seems smaller as it drives further and further away from you

NOTEUse the Orange Circle with Caution

It’s much easier to manipulateyour movie clip with each indi-vidual axis in turn, rather thanusing the orange circle handle

to manipulate ever ything atonce Your best bet for themost precise control is to con-sider how your clip should betilted on each axis, and thenadjust each accordingly As yougain practice, you might feelmore comfor table using the or-ange handle to move ever y-thing at once

get-Perspective Angle

As you work with the 3D tools, you need to consider the view you have onthe clips you are manipulating If you pretend your head is a camera, andyour eyes become the lens, you begin to get a sense of what the PerspectiveAngle setting in the Properties panel does When you select your 3D Movieclip, you see a 3D Position and View section containing a Perspective Angleicon Drag the underlined value to change the focal view of the animation

It ranges from 1 degree to 180 degrees The default is generally 55 degrees

In general, it’s easier to use the default Perspective Angle setting If youwant to use it, we recommend you experiment with it before using it in ananimation

Vanishing Point

The vanishing point is the point where an object disappears out of sight As

objects approach the vanishing point, they get smaller and smaller until

they become too small to recognize Imagine a railroad track ahead of you

Look into the distance far enough, and you can’t see the railroad track any

longer You know the sides of the tracks are parallel and are the same

dis-tance apart, but from your perspective, the separate tracks appear to

con-nect to each other, as shown in Figure 11.7

The point is Flash has settings that enable you to change the distance away

from you on the Stage where the vanishing point is set To change the

loca-tion of the vanishing point, click on your movie clip instance on the Stage

Then, use the X and Y sliders on the Properties panel next to the Vanishing

Point setting You see crosshairs on the stage that help you get a sense of

where the vanishing point is shifting Not only can you move the vanishing

point closer or further out, you can also move it to the right or left

Moving Objects with the 3D

Translation Tool

You’ve had a chance to use the 3D Translation tool, but you haven’t

ani-mated anything in 3D In the next exercise, you find it’s like creating a

mo-tion tween

FIGURE 11.7

The vanishing point is the point where you can no longer see the railroad tracks off in the distance.

ptgRotating Objects with the 3D

Use the 3D

Transla-tion Tool to Create an

Animation

In this task, you create a movie clip and move it around in 3D space Youalso get a chance to adjust how Flash centers the rotation and motion

1 Open a new file, and make sure it’s ActionScript 3.0 Draw a rectangle

on the stage, and turn it into a movie clip

2 Click on the Timeline at Frame 25, and choose Insert, Timeline,Frame Now, click on one of the frames, and choose Insert, MotionTween Your frames should now be blue to indicate motion tweening

3 Click on Frame 25, and choose the 3D Rotation tool Rotate yourmovie clip on all three axes

4 Click on Frame 25, and choose the 3D Translation tool Move yourmovie clip on all three axes

5 Move your movie clip by choosing Control, Test Movie (or pressEnter) As you watch it move, get a sense of how it’s moving in 3Dspace A natural easing seems to take place as it moves fur ther awayand closer to you

TRY IT YOURSELF

▼

Create Multiple

Ro-tating Movie Clips

In this task, you create two movie clips that animate and rotate at thesame time

1 Open a new file, and make sure it’s ActionScript 3.0 Draw a rectangle

on the stage, and turn it into a movie clip

2 Use the 3D Rotate tool to rotate on at least two axes

3 Create a second movie clip, or pull a new instance from the Librar y

4 Click on the new instance, and then use the Rotate and Translatetools to move it in a recognizably different direction than the firstmovie clip, as shown in Figure 11.8

5 With the Rotate tool selected, press and hold the Shift key to selectboth movie clips at once You now discover that both of them move asyou rotate with the overlay handles

FIGURE 11.8

With the Shift key, you can select

multiple movie clips to work on

with the 3D tools at the same

time.

Another way to make your movie clips rotate is to use ActionScript We

give you a quick way to make your movie clip rotate without actually

hav-ing to use the 3D rotation tool to do so In Hour 16, “Basic Interactivity,” we

discuss the addEventListenercode more in-depth, but for now, this should

give you a taste of what you can do with ActionScript

Start by creating a new movie clip, and giving it an Instance name in the

Properties panel of myClip Then, click on the first frame in the Timeline,

and choose Window, Actions This opens the code window Type the

This code tells Flash to rotate the movie clip on all three dimensions It

con-tinues to rotate indefinitely To see your work, choose Control, Test Movie

Your clip slowly rotates

Summary

Applying 3D in Flash used to be difficult and generally not worth doing In

this version of Flash, you have access to tools that make it more worthwhile

to think of your movie clips in 3D space While it’s still not perfect,

prima-rily because of the lack of a third dimension in a movie clip, it’s certainly

come a long way With a bit of perseverance, you can create solid objects

that seem to move and rotate in 3D space

This hour you’ve learned how to create 3D objects, rotate and move them in

3D space, and animate them You’ve also touched on concepts such as

per-spective angle and vanishing point There’s more to explore with 3D Flash,

but now that you’ve had a good introduction, you can discover at your own

pace Have fun with your 3D animations in Flash and push the envelope!

Q&A

Q I created this great movie clip, but then I wanted to change its fill Can I

go back and do that now?

A You definitely can Remember, though, that you can’t do any more ing in place Keep in mind what your Timeline looked like, and edit theclip in the Librar y

edit-Q Can I put a video/audio/animation in my movie clip and animate it in3D?

A You most cer tainly can Your best bet is to focus on creating your movieclip and doing whatever you need to do to it before working on the 3Dside of things

Q I tried to put a Flash movie with 3D on my website, but it didn’t work

What did I do wrong?

A You probably saw a warning from Flash when you tried to publish yourmovie Chances are you are using the wrong version of Flash We talkabout publishing in Hour 20, “Linking a Movie to the Web.”

Q It was cool to rotate my shape with that code, but when I tried it withtwo movie clips on the stage, it didn’t work

A Flash can rotate only one movie clip at a time with the ActionScript code

we gave you To get the other one rotating, give it a different instancename, and copy and paste the code again, modifying the name myClip

to the new instance name

213Workshop

Workshop

The Workshop consists of quiz questions and answers to help you solidify

your understanding of the material covered in this hour You should try to

answer the questions before checking the answers

Quiz

1 3D Translation is the same as

A Turning a 2D object into a 3D object

B Rotating a movie clip in any of three dimensions

C Moving a movie clip in any of three dimensions

2 In 3D space, you can manipulate

A Only movie clips

B Movie clips, graphic symbols, and buttons

C Anything you want

3 To rotate more than one movie clip in 3D space, you need to

A Create a separate layer for each clip

B Convert the multiple clips into a single clip

C Press the Shift key to select all the movie clips

Quiz Answers

1 C.Translation moves things; rotation rotates them

2 A.You can use only movie clips with the 3D tools

3 C.While A and B work, the best answer is C Extra points if you

realized all three should work

ptg

WHAT YOU’LL LEARN INTHIS HOUR:

Using ready-mademotion tweens

Saving your own tion tweens for re-use

mo- Modifying existing tion tweens

mo-After you’ve been using Flash for a while, you might find yourself creating

the same motion tween again and again to apply to different symbols In

this hour, you learn about the Motion Preset panel This panel serves as a

repository for motion tweens you can reuse It’s a great time saver when

you want to apply the same motion to multiple objects What makes it even

better are the tweens that Flash has already provided Finally, it’s a great

way to share your tweens with someone else or vice versa

The Motion Presets Panel

For the remainder of this hour, keep in mind that motion presets can only

be used in ActionScript 3.0 files This means you should select the first

op-tion, Flash File (ActionScript 3.0), when you create a new Flash file that will

use a motion preset

Open the Motion Presets panel by choosing Window, Motion Preset (see

Figure 12.1) At this point, it doesn’t look like much There are two folders:

Default Presets to store previously created motion tweens and Custom

Pre-sets to store your own

All the good stuff is in the Default Presets folder If you double-click on it or

click on the gray arrow to the left, it expands and shows you the existing

Flash presets, as shown in Figure 12.2 If you click on one of them, you see a

demonstration of what it does in the Preview Pane on the top part of this

panel If you click on the Menu button on the top right of the panel, you see

the fly-out menu, also shown in Figure 12.2

HOUR 12

Reusing Your Animations

with Motion Presets

FIGURE 12.1

This is the Motion Presets panel when it is first opened.