Adobe Flash CS 6 Level I

Topics:
• Workspace
• Stage
• Grids, Rulers, Guides
• Timeline
• Library Panel
FLASH CS6

Overview
Adobe Flash Professional is an application used by web designers,
developers, and animators to create rich content for screen and
web environments. Web designers use Flash for creating
interactive and animated content for web sites and mobile
applications, working with and converting video using Adobe
Media Encoder. Developers use Flash for creating and editing
ActionScript using the built-in coding tools, developing
cross-platform mobile applications using Adobe AIR, debugging
and testing applications on AIR-enabled mobile devices, and
building applications which can be distributed across various device
app store ecosystems.
Animators use Flash for animating characters and objects using
sophisticated motion tweens, adding visual effects with various
filters and blurs, and creating lifelike environments using the
various drawing tools. Flash Professionals allows you to create
engaging artwork, applications, and animations like the ones you
see here. As a member of the creative suite, Flash Pro integrates
with several other Adobe applications, like Photoshop for bitmap
editing and Illustrator for vector symbol manipulation. No matter if
you are a web designer, developer, or animator, Flash
Professional provides you with an array of tools to help you create
rich and engaging content for the web, screen, or mobile devices.

Properties Inspector
Layers
Timeline
Tools panel
Stage

2
 FLASH CS6

Using the Stage

The Stage is the rectangular area where you place graphic content
when creating Flash Professional documents. The Stage in the
authoring environment represents the rectangular space in Flash
Player or in a web browser window where your document appears
during playback. To change the view of the Stage as you work,
zoom in and out. To help you position items on the Stage, you can
use the grid, guides, and rulers.

The Timeline and Stage with content.

Zoom the Stage
To view the entire Stage on the screen, or to view a particular area
of your drawing at high magnification, change the magnification
level. The maximum magnification depends on the resolution of
your monitor and the document size. The minimum value for
zooming out on the Stage is 8%. The maximum value for zooming
in on the Stage is 2000%.
To zoom in on an element, select the Zoom tool in the Tools panel,
and click the element. To switch the Zoom tool between zooming
in or out, use the Enlarge or Reduce modifiers (in the options area
of the Tools panel when the Zoom tool is selected) or Alt‑click
(Windows) or Option-click (Macintosh).
To zoom in so that a specific area of your drawing fills the window,
drag a rectangular selection on the Stage with the Zoom tool.
To zoom in on or out of the entire Stage, select View > Zoom In or
View > Zoom Out.
To zoom in or out by a specified percentage, select View >
Magnification, and select a percentage from the submenu or select
To show the workspace surrounding
a percentage from the Zoom control at the upper-right corner of
the Stage, or to view elements in a
scene that are partly or completely the document window.
outside of the Stage area, select View To scale the Stage so that it fits completely in the application
> Pasteboard. The pasteboard appears window, select View > Magnification > Fit in Window.
in light gray. For example, to have a To show the contents of the current frame, select
bird fly into a frame, initially position
View > Magnification > Show All, or select Show All from the
the bird outside of the Stage in the
pasteboard and animate it into the Zoom control at the upper-right side of the application window. If
Stage area. the scene is empty, the entire Stage appears.
Move the view of the Stage To show the entire Stage, select View > Magnification > Show
When the Stage is magnified, you may Frame or select Show Frame from the Zoom control at the up-
not be able to see all of it. To change
per-right corner of the document window.
the view without having to change the
magnification, use the Hand tool to
move the Stage.

3
 FLASH CS6
In the Tools panel, select the Hand tool
and drag the Stage. To temporarily Use rulers
switch between another tool and the When rulers show, they appear along the top and left sides of the
Hand tool, hold down the Spacebar and document. You can change the unit of measure used in the
click the tool in the Tools panel. rulers from the default of pixels to another unit. When you move
an element on the Stage with the rulers displayed, lines indicating
the element’s dimensions appear on the rulers.
To show or hide rulers, select View > Rulers.
To specify the rulers’ unit of measure for a document, select
Modify > Document, and select a unit from the Ruler Units menu.
Use guides
When rulers show (View > Rulers), you can drag horizontal and
vertical guides from the rulers onto the Stage.
When you create nested timelines, draggable guides appear on the
Stage only when the Timeline in which they were created is active.

• To create custom guides or irregular guides, use guide layers.

Note: If the grid is visible and Snap to Grid is
turned on when you create guides, guides snap
to the grid. • To display or hide the drawing guides, select View > Guides >
Show Guides.

• To turn snapping to guides on or off, select View > Snapping >

Snap to Guides.

Note: Snapping to guides takes precedence over • To move a guide, click anywhere on the ruler with the Selection
snapping to the grid in places where guides fall tool and drag the guide to the desired place on the Stage.
between grid lines.

• To remove a guide, use the Selection tool with guides unlocked

to drag the guide to the horizontal or vertical ruler.

• To lock guides, select View > Guides > Lock Guides or use the
Lock Guides option in the Edit Guides (View > Guides > Edit
Guides) dialog box.
Set guide • To clear guides, select View > Guides > Clear Guides. If you
preferences are in document-editing mode, all guides in the document are
cleared. If you are in symbol-editing mode, only guides used in
Select View > Guides > Edit Guides and symbols are cleared.
do any of the following:
To set Color, click the triangle in the
color box and select a guide line color
from the palette. The default guide
color is green.

4
 FLASH CS6
To display or hide Use the grid
guides, select or The grid appears in a document as a set of lines behind the artwork
deselect Show in all scenes.
Guides. Display or hide the drawing grid
• To turn snapping to guides on or Do one of the following:
off, select or deselect Snap To • Select View > Grid > Show
Guides. Grid.
• Select or deselect Lock Guides.
• To set Snap Accuracy, select an
• Press Control+’’ (quote)
option from the pop‑up menu. (Windows) or Command+’’
• To remove all guides, click Clear All. (quote) (Macintosh).
Clear All removes all guides from • Turn snapping to grid lines
the current scene. on or off
• To save the current settings as the
default, click Save Default.
• Select View > Snapping >
• Click OK. Snap to Grid.
• Set grid preferences
• Select View > Grid > Edit Grid and select from the options.
• To save the current settings as the default, click Save Default.

About the main

toolbar and edit bar Use the Tools panel
• The menu bar at the top of the The tools in the Tools panel let you draw, paint, select, and modify
application window contains menus artwork, as well as change the view of the Stage. The Tools panel is
with commands for controlling divided into four sections:
functionality.

• The edit bar, at the top of the

• The tools area contains drawing, painting, and selection tools.
Stage, contains controls and • The view area contains tools for zooming and panning in the
information for editing scenes and application window.
symbols, and for changing the • The colors area contains modifiers for stroke and fill colors.
magnification level of the Stage. • The options area contains modifiers for the currently selected
tool. Modifiers affect the tool’s painting or editing operations.
• To specify which tools to display in the authoring environment,
use the Customize Tools Panel dialog box.
• To show or hide the Tools panel, select Window > Tools.

5
 FLASH CS6
Customize the Tools panel
To specify which tools appear in the Select tools
authoring environment, use the Cus- Do one of the following:
tomize Tools Panel dialog box to add or • Click the tool in the Tools panel. Depending on the tool you
remove tools from the Tools panel. select, a set of modifiers might appear in the options area at
the bottom of the Tools panel.
To show the Customize Tools Panel
dialog box, do one of the following: • Press the tool’s keyboard shortcut. To view the keyboard
(Windows) Select Edit > Customize shortcuts, select Edit > Keyboard Shortcuts (Windows) or
Tools panel. Flash > Keyboard Shortcuts (Macintosh). On the Macintosh, you
(Macintosh) Select Flash > Customize might need to move the mouse to see the new pointer appear.
Tools panel.
• To select a tool located in the pop‑up menu for a visible tool
The Available Tools menu indicates the
tools that are currently available. The such as the Rectangle tool, press the icon of the visible tool and
Current Selection menu indicates the select another tool from the pop‑up menu.
tools currently assigned to the selected
location in the Tools panel.
To browse through the tools to specify
the location to assign to another tool,
click a tool in the image of the Tools
panel or use the arrows.
To add a tool to the selected location,
select the tool in the Available Tools list
and click Add. You can assign a tool to
more than one location.
To remove a tool from the selected
location, select the tool in the Current
Selection scroll list and click Remove.
To restore the default Tools Panel lay-
out, click Restore Default in the
Customize Tools Panel dialog box.
Click OK to apply your changes and
close the Customize Tools Panel dialog
box.
Use context menus

Context menus contain commands

relevant to the current selection. For
example, when you select a frame
in the Timeline window, the context
menu contains commands for creat-
ing, deleting, and modifying frames
and keyframes. Context menus exist
for many items and controls in many
locations, including on the Stage, in the
Timeline, in the Library panel, and in
the Actions panel.

Right-click (Windows) or Control-click

(Macintosh) an item.

6
 FLASH CS6

About the Timeline

The Timeline organizes and controls a document’s content over
time in layers and frames. Like films, Flash Professional documents
divide lengths of time into frames. Layers are like multiple film
strips stacked on top of one another, each containing a different
image that appears on the Stage. The major components of the
Timeline are layers, frames, and the playhead.

Layers in a document are listed in a column on the left side of the

Timeline. Frames contained in each layer appear in a row to the
right of the layer name. The Timeline header at the top of the
Timeline indicates frame numbers. The playhead indicates the
current frame displayed on the Stage. As a document plays, the
playhead moves from left to right through the Timeline.
Note: When an animation is played, the actual
frame rate is displayed; this may differ from the
document’s frame rate setting if the comput- The Timeline status displayed at the bottom of the Timeline
er can’t calculate and display the animation indicates the selected frame number, the current frame rate, and
quickly enough. the elapsed time to the current frame.

Parts of the Timeline

A. Playhead
B. Empty keyframe
C. Timeline header
D. Guide layer icon
E. Frame View pop‑up menu
F. Frame-by-frame animation
G. Tweened animationH. Center Frame
button
I. Onion-skinning buttons
J. Current Frame indicator
K. Frame Rate indicator
L. Elapsed Time indicator

The Timeline shows where animation occurs in a document,

including frame-by-frame animation, tweened animation, and
motion paths.

Controls in the layers section of the Timeline let you hide, show,
lock, or unlock layers, as well as display layer contents as outlines.
You can drag Timeline frames to a new location on the same layer
or to a different layer.

7
 FLASH CS6

Change the appearance of the Timeline

By default, the Timeline appears below the main document
window. To change its position, detach the Timeline from the
document window and float it in its own window or dock it to any
other panel you choose. You can also hide the Timeline.

To change the number of layers and frames that are visible, resize
the Timeline. To view additional layers when the Timeline contains
more layers than can be displayed, use the scroll bars on the right
side of the Timeline.
Dragging the
Timeline
To move the Timeline when it is docked
to the document window, drag the title
bar tab at the upper-left corner of the
Timeline.

To dock an undocked Timeline to the

application window, drag the title bar
tab to the top or bottom of the
document window.

To dock an undocked Timeline to other

panels, drag the Timeline title bar tab
to the location you choose. To prevent
the Timeline from docking to other
panels, press Control while you drag.
A blue bar appears to indicate where
the Timeline will dock.

To lengthen or shorten layer name

fields in the Timeline panel, drag the
bar separating the layer names and the
frames portions of the Timeline.

8
 FLASH CS6

Change the display of frames in the

Timeline
1. To display the Frame View pop‑up menu, click Frame View in the
upper-right corner of the Timeline.

Frame View pop‑up menu.

Change layer height

in the Timeline
Do one of the following:

• Double-click the layer’s icon (the

icon to the left of the layer name)
in the Timeline.
• Right-click (Windows) or
Control-click (Macintosh) the layer
name and select Properties from
the context menu. 2. Select from the following options:
• Select the layer in the Timeline and
select Modify > Timeline > Layer • To change the width of frame cells, select Tiny, Small, Normal,
Properties. Medium, or Large. (The Large frame-width setting is useful for
• In the Layer Properties dialog box,
viewing the details of sound waveforms.)
select an option for Layer Height
and click OK. • To decrease the height of frame cell rows, select Short.
• Short and Normal frame view options.
• To turn the tinting of frame sequences on or off, select Tinted
Resize the Timeline Frames.
• To display thumbnails of the content of each frame scaled to fit
• If the Timeline is docked to the the Timeline frames, select Preview. This can cause the
main application window, drag the apparent content size to vary and requires extra screen space.
bar separating the Timeline from
• To display thumbnails of each full frame (including empty
the Stage area.
• If the Timeline is not docked to space), select Preview In Context. This is useful for viewing
the main application window, drag the way elements move in their frames over the course of the
the lower-right corner (Windows) animation, but previews are generally smaller than with the
or the size box in the lower-right Preview option.
corner (Macintosh).

9
 FLASH CS6
Move the playhead
The red playhead at the top of the Timeline moves as a document
plays to indicate the current frame displayed on the Stage. The
Timeline header shows the frame numbers of the animation. To
display a frame on the Stage, move the playhead to the frame in
(CS5.5 only) To play, rewind, skip back, and the Timeline.
skip forward in the Timeline, use the Playback
buttons at the bottom of the Timeline panel. To display a specific frame when you’re working with a large
number of frames that can’t all be displayed in the Timeline at
(CS5.5 only) To loop through a specific range of
frames, click the Loop button at the bottom of once, move the playhead along the Timeline.
the Timeline panel. Then move the frame range To go to a frame, click the frame’s location in the Timeline header,
markers to the first and last frames you want or drag the playhead to the desired position.
to loop.
To center the Timeline on the current frame, click the Center
Frame button at the bottom of the Timeline.

10
 FLASH CS6

Work with libraries

The library in a Flash Professional document stores media assets
that you create in the Flash Professional authoring environment
or import to use in the document. You can create vector artwork
or text directly in Flash Professional; import vector artwork, bit-
maps, video, and sound; and create symbols. A symbol is a graphic,
a button, a movie clip, or text that you create once and can reuse
multiple times. You can also use ActionScript to add media content
to a document dynamically.

The library also contains any components that you have added to
your document. Components can be either compiled clips or
MovieClip based components.
Note: (Flash Professional CC and later versions
only) Dragging objects from Stage to the
You can open the library of any Flash Professional document while
Library panel to convert to a Symbol is dep- you are working in Flash Professional, to make the library items
recated, and will not be functional with Flash from that file available for the current document.
Professional CC.
Note: (Flash Professional CC and later versions You can create permanent libraries in your Flash Professional
only) Dragging objects on to the Stage across
two undocked documents is deprecated, and
application that are available whenever you start Flash
will not be functional with Flash Professional Professional. Flash Professional also includes several sample
CC. libraries containing buttons, graphics, movie clips, and sounds.

You can export library assets as a SWF file to a URL to create a

runtime-shared library. This lets you link to the library assets from
Flash Professional documents that import symbols using runtime
sharing.

The Library panel (Window > Library) displays a scroll list with the
names of all items in the library, which lets you view and organize
these elements as you work. An icon next to an item’s name in the
Library panel indicates the item’s file type.

Open a library in another Flash file

• From the current document, select File > Import > Open Exter-
nal Library.
• Navigate to the Flash Professional file whose library you want
to open and click Open.
• The selected file’s library opens in the current document, with
the filename at the top of the Library panel. To use items from
the selected file’s library in the current document, drag the
items to the current document’s Library panel or to the Stage.

11
 FLASH CS6
Sort items in the Library panel
Columns in the Library panel list the name of an item, its type, the
Create a new folder number of times it’s used in the file, its linkage status and
• Click the New Folder button at the identifier (if the item is associated with a shared library or is
bottom of the Library exported for ActionScript), and the date on which it was last
panel. modified.
You can sort items in the Library panel alphanumerically by any
Open or close a column. Items are sorted within folders.
Click the column header to sort by that column. Click the
folder triangle button to the right of the column headers to reverse the
• Double-click the folder, or Select
the folder and select Expand Folder sort order.
or Collapse Folder from the Panel
menu for the Library panel.
Work with library items
When you select an item in the Library panel, a thumbnail preview
Open or close all of the item appears at the top of the Library panel. If the selected
folders item is animated or is a sound file, you can use the Play button in
the library preview window or the Controller to preview the item.
• Select Expand All Folders or Col-
lapse All Folders from the Panel Use a library item in the current document
menu for the Library panel. Drag the item from the Library panel onto the Stage.
Move an item The item is added to the current layer.

between folders Convert an object on the Stage to a symbol

• Drag the item from one folder to
another.
in the library
• If an item with the same name
• Select the object on stage, right click, and select Convert to
exists in the new location, Flash Symbol.
Professional prompts you to • Use a library item from the current document in another
replace it with the item you are document
moving. • Drag the item from the Library panel or Stage into the Library
panel or Stage of another document.
• Copy library items from a different document
• Select the document that contains the library items.
• Select the library items in the Library panel.
• Select Edit > Copy.
• Select the document that you want to copy the library items to.
Note: When starting a supported
external editor, Flash Professional opens the
• Select that document’s Library panel.
original imported • Select Edit > Paste.
document. • Edit a library item
• Select the item in the Library panel.
• Select one of the following from the Panel menu for the Library
panel:
• To edit an item in Flash Professional, select Edit.
• To edit an item in another application, select Edit With and then
select an external application.

12
FLASH CS6

Wrap-up
By the end of this workshop, you should be able to:

Use the Workspace.

Understand the Stage, grids, rulers, guides, timeline, and the library
panel

13