To access preferences, select Edit

Figure 1.6. The General preferences can be used to manage not only the workspace, but also items on the stage.

If you examine the selections, you will realize they are fairly intuitive. You can choose to see the Welcome screen when the application starts, to see tooltips when the cursor is over a tool or object, and to have a test movie appear in a tabbed window or float. You can also specify how items are selected on the stage and the timeline, and even the colors that will be used to indicate which type of object has been selected on the stage.

Now that you know how to set your preferences, let's look at managing the document properties. Click the Cancel button in the Preferences dialog box to close the window and return to the Flash interface.

To access the Document Properties dialog box, use one of the following methods:

The Document Properties dialog box is shown in Figure 1-7. The Dimensions input area is where you can change the size of the stage. Enter the new dimensions, press the Enter (Return) key or click the OK button, and the stage will update. The Match area is commonly used to shrink the stage to the size of the content on the stage when you select Contents (which happens to be grayed out in Figure 1-7 because there is currently nothing on the stage). You can also change the stage (background) color, how fast the movie plays, and the units for the ruler.

Figure 1.7. Set the stage size through the Document Properties dialog box.

For example, if you change the Dimensions setting to a width of 400 and height of 300, set Background color to #000066, and click OK, the stage will shrink to the new dimensions and change color to a dark blue. These changes will also be shown in the Property inspector, as shown in Figure 1-8.

Figure 1.8. Changes made to the document properties are shown in the Property inspector.

There is a fundamental truth to becoming a proficient designer with Flash: master the timeline and you will master Flash.

When someone visits your site and an animation plays, Flash treats that animation as a series of still images. In many respects, those images are comparable to the images in a roll of film or one of those flip books you may have played with when you were younger. The ordering of those images on the film or in the book is determined by their placement on the film or in the book. In Flash, the order of images in an animation is determined by the timeline. The timeline controls what users see, and more important, when they see it.

Animation and the timeline

At its most basic, all animation is movement over time, and all animation has a start point and an end point. The length of your timeline will determine when animations start and end, and the number of frames between those two points will determine the length of the animation. As the multimedia author, you control those factors.

Figure 1-12 shows a simple animation. A ball is placed at the left and right edges of the stage. In between, the ball is at the top of the stage. From this, you can gather that the ball will move upward when the sequence starts and will continue to its finish position at the right edge of the stage after it has reached the middle of the sequence.

Figure 1.12. A simple animation sequence

Obviously, just having three images won't result in a ball moving. Between the start point and the middle point, and the middle point and the end point, there needs to be a series of ball images. These will give the user the illusion of a ball moving up and then down again to its finish position. These images will represent the various locations of the ball as it moves through time, as shown in Figure 1-13.

Figure 1.13. Animation is a series of frames on the timeline.

So where does time come into play? It is the number of frames (discussed in the next section) between the start and middle, and middle and end points in the animation. The default timing in a Flash CS4 movie—called the frame rate—is 24 frames per second (fps). In the animation shown previously, the duration of the animation is 24 frames, which means it will play for 1 second. You can deduce from this that the ball's middle location is the twelfth frame of the timeline. If, for example, you wanted to speed up the animation, you could reduce the length of the timeline to 12 frames or increase the frame rate to, say, 48 fps; if you wanted to slow it down, you could increase the number of frames to 48 or decrease the frame rate.

Let's wander over to the timeline and look at a frame.

Understanding frames

If you unroll a spool of movie film, you will see that it is composed of a series of individual still images. Each image is called a frame, and this analogy applies to Flash as well.

When you open Flash, your timeline will be empty, but you will see a series of rectangles—these are the frames. You may also notice that these frames are divided into groups. Most frames are white and every fifth frame is gray (see Figure 1-14), just to help you keep your place. Flash movies can range in length from 1 to 16,000 frames, although a Flash movie that is 16,000 frames in length is highly unusual.

Figure 1.14. The timeline is nothing more than a series of frames.

A frame shows you the content that is on the stage at any point in time. The content in a frame can range from one object to hundreds of objects, and a frame can include audio, video, programming, images, text, and drawings, either singly or in combination with each other.

When you first open a new Flash document, you will notice that frame 1 contains a hollow circle. This visual clue tells you that frame 1 is waiting for you to add something to it. Let's look at a movie that actually has something in the frames and examine some of the features of frames.

Open the Ball.fla file located in the Chapter 1 Exercise folder. You will see a yellow ball, in frame 1, sitting on the stage. You should also note the solid dot in the Ball layer (layers are discussed later in this chapter). This indicates there is content in the frame. The Empty layer above it has a hollow dot, which indicates there is no content in that frame. This is also shown in Figure 1-14.

Place the cursor on any frame of the timeline and right-click (Ctrl-click) to open the context menu that applies to frames, as shown in Figure 1-15. As you can see, quite a few options are available, ranging from adding a frame to the timeline to adding actions (code blocks) that control the objects in the frame. We aren't going to dig into what each menu item does just yet, but rest assured, by the time you finish this book, you will have used each one.

Figure 1.15. The context menu that applies to frames on the timeline

Place the cursor at frame 12 of the Ball layer, open the context menu, and select Insert Keyframe. Repeat this step at frame 24 as well. You will see that the timeline changes to the series of extended gray rectangles and three black dots, as shown in Figure 1-16. These gray rectangles represent spans of frames, separated by keyframes.

Note

If you prefer to use the keyboard, place the cursor at frame 24 and press F5. With that frame selected, press F6. The F5 command adds a frame (which creates a span of frames), and pressing F6 converts the selected frame to a keyframe. If you prefer to do that all in one move, just select frame 24 and press F6.

Figure 1.16. The timeline contains three keyframes.

An obvious question at this point is, "So, guys, what's a keyframe?" Remember when we talked earlier about animations and how they have a start point and an end point? In Flash, those two points are called keyframes. Any movement or changes are thanks to keyframes. In Flash, there are two types of keyframes: those with stuff in them (indicated by the solid dot shown in frame 1 of Figure 1-16) and those with nothing in them. Blank keyframes are shown as frames with a hollow dot. The first frame in any layer, until you add something to that frame, is always indicated by a blank keyframe.

To navigate to specific frames in the timeline, you use the playhead. It is the red rectangle with the line coming out of it. Drag the playhead to frame 12 and click the ball on the stage. Move the ball to the top center of the stage. Drag the playhead to frame 24 and move the ball to the right edge of the stage.

As you moved the ball in frame 12, you may have noticed there was a ghosted version of the ball's previous position until you released the mouse. This feature is new to Flash CS4. It gives you a reference to the starting position of the motion.

Note

As mentioned earlier in the chapter, the technique of dragging the playhead across the timeline is called scrubbing. As you scrub across the timeline, you will see the values in the Current Frame and Elapsed Time areas at the bottom of the timeline change as well. This is quite useful in locating a precise frame number or time in the animation.

Scrub the playhead across the timeline. The ball snaps to a new position as the playhead encounters each keyframe. But this movement isn't smooth! To fix that, right-click (Ctrl-click) anywhere inside the gray span of frames between each pair of keyframes and select Create Classic Tween from the context menu. Scrub again, and the ball will move smoothly across the stage. Those arrows that appeared indicate a classic motion tween.

Note

Yes, classic tweens are new! To Flash old-timers, this is what used to simply be motion tweens. Flash CS4 introduces a completely new—and mindblowingly cool—timeline tweening model, which is touched on later in this chapter and discussed in detail in Chapter 8.

A classic tween is one of the ways simple animations are created in Flash. Flash looks at the locations of the objects between two keyframes, creates virtual copies of those objects, and puts them in their positions in the frame. If you scrub through your timeline, you will see that Flash has placed copies of the ball in frames 2 through 11 and 13 through 23, and put them in their final positions to give the illusion that the ball is moving up and down.

That was interesting, but we suspect you may be wondering, "OK, guys, do tweens work only for stuff that moves?" Nope, you can also use tweens to change the shapes of objects, their color, their opacity, and a number of other properties. We'll get to those uses later in the book.

Drag the playhead to frame 12 and click the ball on the stage. Drag the ball to the bottom of the stage. If you scrub through the timeline again, you will see the ball move in the opposite direction. This tells you that you can change an animation by simply changing the location of an object in a keyframe. Close the file without saving it.

Another key concept to grasp, especially if you are new to Flash, is that everything on the stage has properties that can be changed or otherwise manipulated. To understand this concept, let's step away from Flash and consider the authors.

At our most basic, we are two humans on the planet Earth. In Flash terms, we are two objects on the stage. The things that describe us are our properties. For example, our height, weight, hair color, and location on the planet are properties that describe visual facets of who we are. If we were somehow able to be placed on the Flash stage, those descriptive properties of us would appear in the Property inspector when the mouse selects us. The neat thing is that the Property inspector lets you do more than just review those properties: it also lets you change them.

The Property inspector, shown in Figure 1-17, is designed to make your life easy. As you become more proficient and comfortable with Flash, this panel will become an indispensable aid to your workflow.

The panel is positioned, by default, to the right of the workspace. You can move it elsewhere on the screen by simply dragging it into position and releasing the mouse. There are locations on the workspace where you will see a shadow or darkening of the location when the panel is over it. This color change indicates that the panel can be docked into that location. Otherwise, the panel will "float" above the screen.

Figure 1.17. The Property inspector

When an object is placed on the stage and selected (or even when the stage itself is selected), the Property inspector will change to reflect the properties of that object that can be manipulated. For example, in Figure 1-18, a box has been drawn on the stage. The Property inspector shows the type of object that has been selected (Shape), and tells you the stroke and the fill color of the object can be changed. In addition, you can change how scaling will be applied to the object and the treatment of the red stroke around the box.

Figure 1.18. The Property inspector changes to show you the properties that can be manipulated regarding a selected object on the stage (in this case, the stroke and fill properties of the box on the stage).

Let's experiment with a Flash file:

Figure 1.21. The width, height, stage location, fill, and stroke are properties of objects on the stage.

The Tools panel, shown in Figure 1-22, is divided into four major areas:

Figure 1.22. The Tools panel

If there is a small down arrow in the bottom-right corner of a tool, this indicates additional tool options. Click and hold that arrow, and the options will appear in a drop-down menu, as shown in Figure 1-23.

Figure 1.23. Some tools contain extra tools, which are shown in a drop-down list.

The Library panel (officially called the library) is one of those features of the application that is so indispensable to Flash developers and designers that we simply can't think of anyone who doesn't use it religiously.

In very simple terms, the library is the place where content used in the movie is stored for reuse later in the movie. It is also the place where symbols and copies of components are automatically placed when the symbols are created or the components are added to the stage.

Let's take a look at the library. Assuming your Library panel is collapsed, click the Library icon on the right side of the screen. The Library panel will fly out, as shown in Figure 1-24. Inside the library, you will see that the image of the kayaks is actually a library asset. Drag a copy of the kayaks image from the library to the stage. Leave it selected and press the Delete key. Notice that the image on the stage disappears, but the library asset is retained.

To collapse the Library panel, click the stage. Panels are configured by default to collapse automatically. You can change this preference under Edit

Figure 1.24. The Library panel

In previous versions of Flash, the Property inspector could be used to change the properties of an animation. This would include techniques such as ramping the speed of an animation, called easing, or even changing how an animation occurs, such as adding or removing rotation. This is still true for shape tweens and classic tweens, but the new home for this sort of configuration—for motion tweens—is the Motion Editor panel.

Though we are going to get deeper into using this new panel in Chapter 8, now would be a good time to stroll over and take a peek at it. Open the MotionPath.fla file in the Chapter 1 Exercise folder. The first thing you will notice is a different icon beside the layer name. This "zooming square" icon indicates the layer is a tween layer (more on those in Chapter 8). The other thing you may have noticed, especially if you've used Flash before, is the absence of an arrow between the two keyframes. The tween span is indicated in blue, and because of the icon, the use of the arrow is not necessary. The dotted line on the stage, visible when you select the tween layer, indicates a tween path.

Drag the playhead across the timeline in the Timeline panel, and you will see that the object fades in, tumbles, and grows as you move the playhead from left to right. Click anywhere in the span of tweened frames and select the Motion Editor panel, as shown in Figure 1-25.

Figure 1.25. A tween layer, tween path, and the Motion Editor panel

One of the really interesting aspects of the Motion Editor panel is that it gives you more control over how things move than at any point in the history of Flash. When Adobe acquired Macromedia a few years back, there was a lot of speculation in the Flash design community about whether Flash would start to inherit some of the powerful features of After Effects. We didn't have to wait very long to find out. The process started in Flash CS3 with how After Effects creates an FLV video file used by Flash. This version of Flash essentially "seals the deal" and sends a very strong message to both the video and Flash communities that these two applications were made for each other.

The Motion Editor panel can trace its roots in a straight line back to After Effects (Adobe's powerhouse video postproduction software). In that application, objects put in motion or otherwise manipulated over time have a full set of properties and guides for each layer of content in an After Effects project. The major property is motion. Flash users who use After Effects to create motion graphics for their Flash projects find the "After Effects way of doing things" to be relatively compact and simple. The result over the years has been Flash designers wondering why Flash didn't have this feature. Obviously, enough of you have asked the question, because it is now an integral feature of Flash CS4.

If you have never used After Effects, now would be a good time to start easing you into the application. We'll start with terminology. See those triangles beside the property names in Figure 1-25? If you click one, it rotates down and the area is revealed. After Effects users call those triangles twirlies, and the term for clicking one of them to reveal the contents of its area is twirl down. We will be using these terms quite extensively when we talk about the Motion Editor panel.

The Motion Editor panel is divided into five distinct areas:

When you twirl down an area of the panel, all of the properties it can affect are revealed.

At the bottom of the panel are three icons with a blue number beside each one, as shown in Figure 1-26. These allow you to control how the graph and frames appear in the panel.

Figure 1.26. You can manage the look of the Motion Editor panel.

Place the cursor over one of the numbers, and notice how the cursor changes to a pointer finger with a double arrow. This tells you the number can be changed, because it's hot text. One way to change the value is to double-click the number and type a new value. Another way is to click and drag across the number; as you do so, the value changes. This click-and-drag method is called scrubbing. Yup, it's just like scrubbing the timeline. Hold Shift while you scrub to change the rate at which your values change. Scrubbing here works as follows:

Twirl down the Basic motion section. Scrub across any of the values, and the object in that particular frame will change.

Click the drop-down list in the Eases area, and you see that you can remove any eases or apply a Simple (Slow) ease to the entire area or to individual properties. We aren't going to explain a Simple (Slow) ease yet, because you have strolled over here for a peek, rather than a lesson. We'll cover this in greater depth in Chapters 7 and 8.

You will notice that you have a timeline in this panel's grids. Obviously, if you have a timeline, you should be able to add a keyframe. Drag the playhead to frame 15 of the timeline in this panel. In the keyframe area are two arrows on either side of a diamond. Click the diamond. This adds a keyframe to the animation. The keyframe is visible as a dot on the graph and, if you look back to the Timeline panel, you'll see a keyframe has also been added in frame 15 of the main timeline, as shown in Figure 1-27. The diamond also turns golden. If you move the playhead to another position, the keyframe changes back to gray. This should tell you that a golden diamond means there is a keyframe in the frame. If you click the arrows on either side of the diamond, you will jump to the previous or next keyframe. When one of those arrows is grayed out, you are essentially being told there are no further keyframes beyond the current position of the playhead.

Figure 1.27. Keyframes added in the Motion Editor panel also appear on the main timeline.

The Color Effect, Filters, and Eases strips are treated a bit differently. Instead of a curved arrow, they have plus and minus signs. Click the + in the Filters area. A drop-down menu containing a list of the available filters appears, as shown in Figure 1-28. To remove a filter, click and hold on the –. A drop-down list of the filters applied to that object will appear. Click a filter in that list, and it will be removed.

Figure 1.28. Filters can also be added and tweened.

In the early days of desktop computing, software was a major purchase, and nothing made you feel more comfortable than the manuals that were tucked into the box. If you had a problem, you opened the manual and searched for the solution. Those days have long passed. Software is more complex, and printing large manuals would be costly. Today, such manuals are supplied on discs or are web-based. In this version of Flash, the user manuals are found in the Help menu, which opens these documents in your default web browser.

To access Help, select Help

The documentation is divided into a series of books, listed on the left side. They cover a variety of subjects, ranging from the use of Flash CS4 Professional to the coding languages used to program content for mobile devices. The right side is where the information you are looking for is displayed.

Figure 1.29. The Flash documentation is extensive.

Click the Using Flash book to open it, and then click Adobe Flash CS4 Professional. As you can see, the books are actually collections of individual documents designed to help you learn what you need to know, along with practical examples of specific techniques.

To go to a specific topic, just continue to click hyperlinks on the left to drill down to the subject of interest. For example, click the + next to Working with video to open that book. Notice the documents About digital video and Flash, Importing and playing Flash video files, and so on.

Alternatively, you can use the Search field to look for answers both in the documentation and among tutorials, articles, and blogs on various Adobe and third-party websites. For example, search for the phrase Video class and note that results include free training videos from Lee Brimelow's lauded gotoAndLearn.com website and the flash.media.Video entry of the ActionScript 3.0 Language and Components Reference, as shown in Figure 1-30. Use the drop-down filter to the right of the Search field to sort by product (in this case, Flash, obviously).

Figure 1.30. Searching for a term in the Flash help documents

Layers can be switched among very specific modes, which change the behavioral characteristics of the layer. We will be using this feature quite extensively in Chapter 3 (which covers symbols) and Chapters 7 and 8 (on animation).

To configure modes, right-click (Ctrl-click) a layer's name and choose Properties. The modes are as follows:

Let's start using layers. First, we'll create some new layers.

Content can be added to layers in one of two ways:

Let's put some content in our layers:

You may have noticed three icons—an eyeball, a lock, and a hollow square—above the layers, as shown in Figure 1-33. Let's see what they do.

Figure 1.33. The Show/Hide All Layers, Lock/Unlock All Layers, and Show All Layers as Outlines icons. Note the pencil icon in the Ball layer, which tells you that you can add content to that layer.

Click the eyeball icon. Notice that everything on the stage disappears and the dots under the eyeball in each layer change to a red x. This eyeball is the Show/Hide All Layers button, and clicking it turns off the visibility of all of the content in the layers. Click the icon again, and everything reappears. Using this feature lets you temporarily hide all existing content while you add something new. Or you can hide everything, and then unhide the one layer of interest.

Note

In previous versions of Flash, a layer's visibility did not carry into the SWF file itself. This was merely a feature to be used for convenience during authoring. In Flash CS4, invisible layers may optionally be omitted from the published SWF. Select File

Next, select the Pentagon layer, and click the dot under the eyeball. Just the pentagon disappears. This tells you that you can turn off the visibility for a specific layer by clicking the dot in the visibility column.

When you click a layer, you may notice that a pencil icon appears on the layer strip. This tells you that you can add content to the layer. Click the Ball layer, and you'll see the pencil icon. Now click the dot under the lock in the Ball layer. The lock icon will replace the dot. When you lock a layer, you can't draw on it or add content to it. You can see this because the pencil has a stroke through it. If you try to drag the pentagon symbol from the library to the Ball layer, you will also see that the layer has been locked—the cursor changes from a tan arrow to a circle with a line through it. Also, if you try to click the ball on the stage, you won't be able to select it. Locking a layer is handy in situations where precision is paramount and you don't want to accidentally move something or delete something from the stage.

The final icon is the Show All Layers as Outlines button. Click it, and the content on the stage turns into outlines. This is somewhat akin to the wireframe display mode available in many 3D modeling applications. In Flash, it can be useful in cases where dozens of objects overlap, and you simply want a quick "X-ray view" of how your content is arranged. With animation in particular, it can be helpful to evaluate the motion of objects without needing to consider the distraction of color and shading. Like visibility and locking, the outlines icon is also available on a per-layer basis.

You can also group layers using folders. Here's how:

Now that you have had a chance to wander through the interface and try out a few things, let's put what you have learned to practical use. Moving squares and circles around the stage isn't exactly why you are here, so let's take what you have learned and hike over to Lake Nanagook.

The specifications for the project dictate the stage is to be 400 pixels wide by 300 pixels high. It also calls for a dark-blue stage color to give the illusion of night. Follow these steps to set up the stage:

Figure 1.35. The stage is set.

Next, use the Gradient movieclip for the sky. Although using your eyes for object placement on the stage is a great way to get stuff into position, your eyes aren't as precise as Flash. The gradient needs to completely cover the stage and not hang out on the pasteboard (the nonstage work area) by even one pixel. Why? So that the gradient covers the whole "sky" area. Here's how you do that:

When Flash measures the location of an object on the stage, it uses the upper-left corner of the stage as its 0,0 point. The actual position of the object is based on something called its registration point. In the case of this gradient, the registration point of the symbol also happens to be its own upper-left corner, which is why x and y values of 0 cause it to fit neatly on the stage. If the registration point of the gradient were changed to 200,150—that is, down and in from its own upper-left corner—the gradient would end up being positioned partly on the pasteboard and partly on the stage, as shown in Figure 1-36. The symbol's registration point is indicated by the + sign you see inside the symbol (near the small circle) in Figure 1-36. In the sample file, you'll see the + sign is in the symbol's upper-left corner instead. In Chapter 3, you'll learn how to change a symbol's registration point however you see fit.

Figure 1.36. The stage and the object's registration point determine position on the stage when using the Property inspector.

One of the really great things about Flash is that it gives us designers the chance to practice the art of illusion. If you look at the gradient on the stage, you will notice that the sky is a dark blue that gradually changes to black as it approaches the bottom of the stage. This gives the illusion of a night sky. Let's look at how this was accomplished.

The Symbol Editor looks suspiciously like the main timeline. In fact, symbols have their own timelines that can function independently of the main timeline. You'll see what we mean by this in a couple of minutes. For now, let's just get you oriented. Beside the Scene 1 link on the top-left corner of the stage, you see a movieclip icon and the name Gradient. This tells you that you are in the Symbol Editor, editing the Gradient symbol. Clicking the Scene 1 link returns you to the main timeline. But for now, get yourself back to the Symbol Editor.

The color in the gradient actually fades in from transparent black to opaque black. As the color moves from the top to the bottom, the pixels become visible, hiding the blue. As they increase in number, the black takes over and the blue looks like it is transforming to black. Now you know how the illusion of a night sky was created.

With the stage prepared and the sky in place, you can now turn your attention to adding the assets to the movie. The scene involves mountains, trees, grass, a lake, a twinkling star, and the moon. What this tells you is that the objects furthest away need to be placed near the bottom of the layering order. This means that the mountains are the next piece of content to be added.

The mountains are in place and are faintly visible against the night sky. Let's add some depth to the scene by adding a couple of trees.

The tree gets a bit smaller, moves to the left side of the stage, and, due to the low tint amount, becomes a bit brighter than the tree behind it, as shown in Figure 1-39. The reason for this is that it will be lit by the moon, which you will create in a couple of minutes.

Figure 1.39. Location and size are other properties that can be manipulated using the Property inspector.

Let's finish off the scene by adding the grass and the lake.

So far, so good. It is starting to look like Lake Nanagook (see Figure 1-40), but we need to add two more elements to make it a bit more realistic: the moon and a twinkling star. We obviously need the moon because it is reflected in the lake, and a twinkling star is a subtle bit of eye candy that will make the scene that much more interesting and catch the viewer's attention. Let's start with the star.

Figure 1.40. The project is starting to come together.

One of the steady messages running throughout this chapter is that we, as Flash designers, are illusionists. In this exercise, you will discover how to create the illusion of a star twinkling in the night sky.

You need to convert the rectangle primitive to a symbol in order to apply the sort of tween you're about to do. Note that converting a symbol from a shape or primitive already in place keeps everything positioned where it was.

If you are an After Effects user, you are about to discover the Motion Editor panel is a very familiar place. If you are new to Flash or have never used After Effects, you are about discover that creating motion in Flash has moved, in one leap, from a general tool to a finely tuned precision instrument. We will be getting deeper into this panel in Chapter 8, which means the intent of this exercise is to give you an opportunity to take the Motion Editor panel for a short spin around the block. In this exercise, you are going to do nothing more than have the star rotate 360 degrees in a clockwise direction, and best of all, it requires only a couple of mouse clicks.

To this point, we have essentially handed you the assets and let you put them in place and otherwise manipulate them. It is now your turn to go solo and create the moon that rises over Lake Nanagook, complete with shadow.

What has happened here is that the stroke you just pasted into the shadow layer has actually cut the football shape for you. The reason this is possible is because you turned off Object Drawing mode in step 3. You'll learn more about this mode in Chapter 2.

The final task in the process of creating the moon is to add a gradient fill in order to give it a bit of a glow.

Next, let's really make the moon and the star shine in the sky over Lake Nanagook. Let's add a glow effect to both of them. Here's how:

The star looks like it is about to go into supernova. Let's make it a bit smaller.

If we are going to have an outdoor scene, it only makes sense to add a bit of outdoor sound to the mix. Fortunately, adding audio to a Flash file is not terribly complicated.

You may have looked at Figure 1-47 and thought, "Hey, my Audio layer doesn't look like yours." Good eye. Layers can also be made larger. To do this, right-click (Ctrl-click) on a layer's name to open the context menu. Select Properties to open the Layer Properties dialog box, as shown in Figure 1-48. Select 200% in the Layer height drop-down list, or enter your own value. Click OK to accept the change.

Figure 1.48. Even layers have their own properties.

You have created the animation and scrubbed through the timeline, and everything looks like it is in order. Now would be a good time to test your movie in Flash Player. We can't overstate the importance of this step in your workflow. The procedure, as one of the authors is fond of telling his students, is, "Do a bit. Test it. Do a bit more. Test it." Flash movies can be quite complex. Each element you add to your movie adds to the complexity of the movie. Developing the habit of regularly testing your work, regardless of how simple it may be, will point out mistakes, errors, or problems in the work that you've just completed. What it comes down to is this: do you really want to burrow through a complex movie, and even more complex code, searching for an issue, or do you want to catch it early?

Figure 1.49. Testing a movie in Flash Player

To test your Flash movie, press Ctrl+Enter (Cmd+Return). If you prefer to use a menu, select Control

If you open the folder where you saved the FLA file, you will see that a SWF file has also been added to the folder.

We've been gently reminding you that Flash involves the art of illusion. The other thing you need to know is that Flash developers are fanatics about detail. They pay close attention to their environment, and then try and mimic it in their projects.

In this final piece of this exercise, we are going to get you up close and personal with that last statement. The plan is to have the moon rise into the night sky. On the surface, that sounds like a no-brainer: tween the motion of the moon between its start position and its finish position. But that's not quite how it works.

This is a night scene, and if there is no moon, things are quite dark. They only light up when the moon is in the sky. If you look at Lake Nanagook, you can see there is a problem. The lake already contains the reflection of the moon. The lake should be dark and only start to light up as the moon rises in the sky. The other issue is the trees. They, too, are lit by the moon. but they should be dark and start to light up as the moon rises.

Although fixing the movie may sound rather complex, it can all be handled by the Property inspector and Motion Editor panel. Follow these steps to start yourself on the path to becoming a fanatic about detail:

Want to earn some "bonus marks"? How about we have the moon travel through an arc to its final position?

Obviously, if the moon is behind the mountains when the movie starts, the lake and trees shouldn't be lit up. Let's have them become distinct as the moon rises.

You have concluded your introductory walk through Flash CS4 Professional.

Figure 1.51. The new Motion Tween model and classic tweens can be combined.