F O U N D AT I O N F L A S H C S 3 F O R D E S I G N E R S
The Property inspector
We have been mentioning this panel quite a bit to this point, and now would be a good
time to stroll over to it and take a closer look.
The Property inspector is designed to make your life easy. When you select something on
the stage, or select the stage itself, the panel will update to reflect the properties that can
be changed in regard to what was just selected (see Figure 1-9). As you become more pro-
ficient and comfortable with Flash, this panel will become an indispensable aid to your
workflow.
The panel is positioned, by default, at the bottom of the screen. You can move it elsewhere
on the screen by simply dragging it into position and releasing the mouse. There are loca-
tions on the screen 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-9. The Property inspector
When an object is placed on the stage and selected, the Property inspector will change to
reflect the properties of that object that can be manipulated. For example, in Figure 1-10,
a box has been drawn on the stage. The Property inspector shows you the type of object
that has been selected and tells you the stroke and the fill color of the object can also be
changed. As well, you can change how scaling will be applied to the object and the treat-
ment of the red stroke around the box.
12
L E A R N I N G T H E F L A S H C S 3 P R O F E S S I O N A L I N T E R FA C E
1
Figure 1-10. 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).
Zooming the stage
There will be occasions when you will discover that the stage is a pretty crowded place. In
these situations, you’ll want to be sure that each item on the stage is in its correct position
and is properly sized. Depending on the size of the stage, this could be difficult because
the stage may fill the screen area. Fortunately, Flash allows you to reduce or increase the
magnification of the stage through a technique called zooming.
Zooming the stage has no effect upon the actual stage size.
Follow these steps to zoom the stage:
1. Click the Magnification drop-down menu near the upper-right corner of
the screen (see Figure 1-11). The drop-down contains a variety of sizes
ranging from Fit in Window to 800% magnification. Figure 1-11. Select a zoom level
using the Magnification drop-
If you want more zoom, you can get a lot closer than 800%. Select down.
View ® Zoom In to increase the zoom level to 2000%. If you want a real
god’s-eye view of the stage, Zoom Out allows you to reduce the magnification level
to 8%. For you keyboard junkies, Zoom In is Ctrl+= and Zoom Out is Ctrl+-. On the
Mac, the commands are Command++ to zoom in and Command+- to zoom out.
13
F O U N D AT I O N F L A S H C S 3 F O R D E S I G N E R S
2. Click the 400% option, and the stage will fill the screen (as shown in Figure 1-12).
Click the Show Frame option and the stage will be visible in its entirety.
Figure 1-12. Selecting a 400% zoom level brings you close to the action.
If you want a side-by-side comparison in which one image is at 100% view and the other is
at 400% or 800%, follow these steps:
1. Select Window ® Duplicate Window. The current document will appear in a separate tab.
2. Set the new window’s magnification level to 400% or 800%.
3. Select Window ® Tile. The two windows will appear beside each other, and any
change made to the contents in one window will be reflected in the other window
(see Figure 1-13). This is a handy feature if you need to really zoom in on an object
or the stage to precisely position or change a property, yet want to see how your
change will work with the rest of the content on the stage.
4. To close a window, click its Close button.
Figure 1-13. Duplicating a window and then tiling the open windows gives you a bird’s-eye
view and a detailed view of your work simultaneously.
14 99b97f3f1bc9631d160a36b01c7e500e
L E A R N I N G T H E F L A S H C S 3 P R O F E S S I O N A L I N T E R FA C E
Exploring the panels in the Flash interface
At this point in our stroll through the Flash interface, you have had the chance to play with
a few of the panels. We also suspect that by this point you have discovered that the Flash 1
interface is modular. By that we mean that it’s an interface composed of a series of panels
that contain the tools and features you will use on a regular basis, rather than an interface
that’s locked in place and fills the screen. You have also discovered that these panels can
be moved around and opened or closed depending upon your workflow needs. In this sec-
tion, we are going to take a closer look at the more important panels that you will use
every day. They include the following:
The timeline The library
The Property inspector The Actions panel
The Tools panel The Help panel
The timeline
There is a fundamental truth to becoming proficient with Flash: master the timeline and
you will master Flash.
When somebody 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, therefore, controls what the user sees, and more importantly, when he or she
sees it.
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 author, you control those factors.
For example, Figure 1-14 shows you 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 posi-
tion at the right edge of the stage once it has reached the middle of the sequence.
Figure 1-14. A simple animation sequence
15
F O U N D AT I O N F L A S H C S 3 F O R D E S I G N E R S
Obviously, just having three images won’t result in a ball moving. Between the start and
the middle, and the middle and the end points, there needs to be a series of ball images.
These will give the user the illusion of a ball moving up and returning down to its finish
position. These images will represent the various locations of the ball as it moves through
time (as shown in Figure 1-15).
Figure 1-15. Animation is a series of frames on the timeline.
So where does time come into play? It is the number of frames between the start and mid-
dle or middle and end points in the animation. The default timing in a Flash movie—called
frame rate—is 12 frames per second (fps). In the animation shown previously, the duration
of the animation is 24 frames, which means it will play for 2 seconds. You can assume from
this that the ball’s middle location is the 12th frame of the timeline. If, for example, you
wanted to speed up the animation, you would reduce the length of the timeline to 12
frames; if you wanted to slow it down, you would increase the number of frames to 48.
In the lower-left corner of the timeline, under the layers, is an icon that looks like a
piece of film. It is the Hide Timeline button. Click it and the timeline will be minimized.
Click it again and the timeline will return. If you are a Flash 8 user, note that this icon
replaces the Timeline button that was located in the upper-left corner of the timeline.
Let’s wander over to the timeline and look at a frame.
Frames
If you unroll a spool of movie film, you will
see that it is composed of a series of indi-
vidual still images. Each image is called a
Figure 1-16. The timeline is nothing more than
frame, and this analogy applies just as well a series of frames.
to Flash as it does for the film industry.
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-16).
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. The thing you need to keep in mind is that a
frame shows you the content that is on the stage at any point in time. The content in a
16
L E A R N I N G T H E F L A S H C S 3 P R O F E S S I O N A L I N T E R FA C E
frame can range from one object to hundreds of objects, and a frame can include audio,
video, code, 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 1
look at a movie that actually has something in the frames and examine some of the features
of frames:
1. Open the Ball.fla file located in the Chapter 1 Exercise folder. When the file
opens you will see a yellow ball, in frame 1, sitting on the stage. You should also
note the solid dot in the Ball layer. This indicates that here is content in the frame.
2. Place the cursor on any frame of the timeline and right-click (PC) or Ctrl-click
(Mac) to open the context menu that applies to frames (see Figure 1-17).
Figure 1-17. The context menu that applies to frames on the timeline
As you can see, there are quite a few options available to you, ranging from adding
a frame to the timeline to adding code that controls the objects in the frame (code
blocks added to the movie are referred to as actions). We aren’t going to dig into
what each menu item does yet, but we guarantee that by the time you finish this
book, you will have used each menu item. Instead let’s deal with the absolute basics.
3. Place the cursor at frame 12, open the context menu, and select Insert
Keyframe. Repeat this step at frame 24 as well. What you will notice is that
the timeline changes to the series of gray frames and three black dots shown Figure 1-18. This timeline
contains three keyframes.
in Figure 1-18.
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 and F6 converts the selected
frame to a keyframe. If you just want to add a keyframe, select frame 24 and press F6.
17
F O U N D AT I O N F L A S H C S 3 F O R D E S I G N E R S
An obvious question at this point is, “So, guys, what’s a keyframe?” Remember when we
talked earlier about animations and how they had a start point and an end point? In Flash,
those two points are called keyframes; any movement or changes can only occur between
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-17) and those with nothing in them. The lat-
ter are called blank keyframes, and they 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.
4. To navigate to specific frames in the timeline, you use the playhead. It is the red rec-
tangle 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.
The technique of dragging the playhead across the timeline is called scrubbing.
As you scrub across the timeline, you will also 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.
5. Right-click (PC) or Ctrl-click (Mac) between the first two keyframes to open the
context menu. Select Create Motion Tween. Repeat this step between the next two
keyframes. When you release the mouse, an arrow will appear between the frames.
Simple animations are created in Flash using motion tweens. Flash looks at the locations of
the objects between two keyframes, creates 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 24, 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
only work 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
them in Chapter 7.
6. 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, you will see the ball move
in the opposite direction. This tells you that you can change an animation by sim-
ply changing the location of an object in a keyframe.
7. Save the movie as Ball1.fla to the Chapter 1 Exercise folder.
Using the Property inspector
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 of this book.
18
L E A R N I N G T H E F L A S H C S 3 P R O F E S S I O N A L I N T E R FA C E
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 each of us. If we were
somehow able to be placed on the Flash stage, those things that describe us would appear in
the Property inspector. The neat thing about the Property inspector is that we can use it to 1
change our properties. Let’s wander over to the Property inspector and have a look:
1. Open the file named Properties.fla in the Chapter 1 Exercise folder.
When the file opens, you will see an image of kayaks over a black back-
ground and the words Ocean Kayaks at the bottom of the stage.
Figure 1-19. Click a tool or
2. Click the Selection tool, which is the solid black arrow at the top of the use the keyboard to select it.
Tools panel (see Figure 1-19).
Clicking tools is one way of selecting them. Another way is to use the keyboard. When
you roll the cursor over a tool, you will see a tooltip containing the name of the tool
and a letter. For example, the letter beside the Selection tool is V. Press the V key and
the Selection tool will be highlighted in the Tools panel.
3. Click the text once. The Property inspector will change to show you that you have
selected some text and that you can change a lot of the text’s properties.
4. In the Property inspector, click the Fill color chip to open the Color Picker, as shown
in Figure 1-20. Click the white color, and the text will turn white. You have just
changed the color property of the selected text.
Figure 1-20. Color is a text property.
19
F O U N D AT I O N F L A S H C S 3 F O R D E S I G N E R S
5. Click the gray area of the stage. The Property inspector will change to show you the
stage properties. Change the stage color to a dark gray: #666666. When you select
the color, the stage will change color and the color selected will appear in the
Property inspector.
6. Click the black box surrounding the image. The Property inspector will change to
tell you that you have selected a shape and that the fill color for this shape is black.
It also lets you know that there is no stroke around the shape. At the left side of
the Property inspector are four boxes that tell you the width, height, and x and y
coordinates of the shape on the stage. Select the Width value and change it from
428.9 to 435. Change the Height number from 333 to 335, as shown in Figure 1-21.
Each time you make a change, the selected object will get wider or higher.
Figure 1-21. The width, height, stage location, fill, and stroke are properties of objects
on the stage.
The Tools panel
The Tools panel, shown in Figure 1-22, is divided into four major areas:
Tools: These selections allow you create, select, and manipulate text and graphics
placed on the stage.
View: These allow you to pan across the stage or zoom in on specific areas of the
stage.
20
L E A R N I N G T H E F L A S H C S 3 P R O F E S S I O N A L I N T E R FA C E
Color: These tools allow you to select and change fill, stroke, and gradient colors.
Options: This is a context-sensitive area of the panel. In many ways, it is not unlike
the Property inspector. It will change depending upon what you have selected.
1
Figure 1-22. The Tools panel
If there is a small down arrow in the bottom-right corner of the 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 menu.
The library
The library is one of those features of the application that is so indispensable to Flash devel-
opers and designers that we simply can’t think of anybody that doesn’t use it . . . religiously.
In very simple terms, it is the place where content that is used in the movie is stored for
reuse later on in the movie. It is also the place where symbols and copies of components
that you may use are automatically placed when the symbols are created or the compo-
nents are added to the stage.
Let’s take a look at the library:
21
Copyright by webtailieu.net