Wile Adobe Creative 5 suite Design Premium aio for dummies phần 8 pptx

Book VI
Chapter 9
Publishing Your
Web Site
667
Getting Connected
10. Click the Test button to test your connection.
If the connection is made successfully, Dreamweaver will let you know. If
not, you may need to double-check the information you entered and try
again.

If you experience difficulty connecting to your remote server or the con-
nection is taking unusually long, select the Use Passive FTP checkbox
under the More Options section at the bottom. (You’ll need to expand
this by clicking the arrow next to More Options.) Passive FTP can also
be a workaround if you’re trying to connect from behind a firewall.
11. If your settings are correct, click Save to create the Server connection.
12. Click Save again to exit the Site Setup dialog box.
Your Web site — live!
After your connection is up and running, you’re ready to upload files and
present your Web site to the world. Files can be transferred to and from
your remote Web server by using the built-in FTP functionality of the Files
panel. It displays files in your local directory and the remote server, and
between them, you can put, get, or synchronize site files.
Follow these steps to upload your Web site to a remote Web server:
1. Choose Window➪Files to open the Files panel.
2. Click the Expand to Show Local and Remote Sites icon.
The panel expands so that you see both the local site and the remote
site to which you want to copy (upload) the files.
3. Make sure that the correct site definition is selected in the Show drop-
down list in the upper left corner of the panel.

Your local files appear on the right.
4. To connect to and display files on the remote Web server, click the
Connect button at the top of the panel.
When the connection is made, all files (if any) are displayed on the left
side of the panel.
5. To copy files, select and drag them from the local files on the right to
the remote files on the left, as shown in Figure 9-6.
Alternatively, select the files you want to copy on the right and click the
Put button at the top of the Files panel.

You can put all of the files within your site on your Web server at once
by selecting the root folder at the top of the local files panel and clicking
the Put button.
64_607466-bk06ch09.indd 66764_607466-bk06ch09.indd 667 5/25/10 8:58 AM5/25/10 8:58 AM
668
Getting Connected

Figure 9-6:
Drag and
drop files
from your
local
machine to
your Web
server to
copy and
update
them.

Connect

Get
Put
Synchronize
Expand
6. After you copy all files to the remote Web server, test your site by
opening a browser and typing the Web site’s URL.
The URL is a full address, such as www.mywebsite.com, or an IP
address, such as http://192.1.1.1.
If you notice broken images or files, return to Dreamweaver to double-
check whether all files were copied to the server and then run the Link
Checker by choosing Site➪Check Links Sitewide.
To retrieve files from a remote Web server, follow these steps:
1. Select the files you want to retrieve from the remote files on the left
side of the Files panel.
2. Click the Get button (which appears as a green, downward pointing
arrow) at the top of the panel or drag the files to the local root folder
on the right.

To return the Files panel to its original position on the right side of the work-
space, click the Expand button in the upper right corner of the panel to dese-
lect it. The Files panel minimizes and docks back with the panel group on the
right.
64_607466-bk06ch09.indd 66864_607466-bk06ch09.indd 668 5/25/10 8:58 AM5/25/10 8:58 AM
Book VI
Chapter 9
Publishing Your
Web Site
669
Getting Connected
Synchronizing your site

The handy Dreamweaver site synchronization feature compares files
between your local and remote sites to ensure that both are using the same,
and most recent, versions of your site files. This check is essential if there’s
a chance that files on the remote server may be more up-to-date or if you’re
unsure which files have been updated since the last time you worked on a
Web site.
Follow these steps to synchronize your local and remote directories:
1. If the Files panel isn’t already visible, choose Window➪Files to open it.
2. Select the site you want to synchronize in the Show drop-down list in
the upper left corner of the panel.
Your local files appear on the right.
3. Click the Connect button at the top of the panel to connect to the
remote server.
If you’re not viewing your Files panel in Expanded view, choose Remote
Server from the drop-down list at the top to display your remote files.
4. Click the Synchronize button at the top of the Files panel.
The Synchronize Files dialog box appears.
5. From the Synchronize drop-down list, choose whether you want to
synchronize the whole local site or only files selected in the Files
panel (if any).
6. From the Direction drop-down list, choose whether you want newer
files put to the remote server, retrieved from the remote sever, or
both.
7. To clean up unused or old files on the remote server, select the Delete
Remote Files Not on Local Drive check box.
8. Click the Preview button to begin the process.
This step may take a while, depending on the number of files in your
site.
The Synchronize Files dialog box appears and displays all changes that
will be made between the local and remote folders.

9. Select, change, or delete any actions as necessary.
10. Click OK to have Dreamweaver complete the synchronization process.
Be careful when using the Delete Remote Files Not on Local Drive option;
some files on the remote server are installed by the Web hosting company
and are necessary for the operation of your site.
64_607466-bk06ch09.indd 66964_607466-bk06ch09.indd 669 5/25/10 8:58 AM5/25/10 8:58 AM
670
Improving Your Site
Improving Your Site
Remember that a site is like a living organism: It continues to grow and will
still need care after it’s live. As you add to your site, find new and innova-
tive ways to present information to site visitors; after all, it’s all about giving
them what they came looking for.
To improve your site and keep visitors coming back, try these tips:
✦ Solicit feedback from focus groups or colleagues in different fields. Let
them tell you the best and worst features of your site, and then use this
feedback to assist in design, layout, and content decisions.
✦ Use Web statistics to your advantage. Use these statistics, often pro-
vided for free by Web hosting companies, to see where users are spend-
ing the most time and where they leave your site.
✦ Provide a feedback form. Site visitors can then comment on the service
and information they receive, with the opportunity to provide comments
and suggestions.
✦ Always keep your content fresh. Stale information and features can
deter return visits and ruin first impressions.
✦ Respond immediately to problems that surface. Don’t ignore or put off
broken links, images, or misspellings.
64_607466-bk06ch09.indd 67064_607466-bk06ch09.indd 670 5/25/10 8:58 AM5/25/10 8:58 AM
Book VII
Flash

Professional CS5
65_607466-pp07.indd 67165_607466-pp07.indd 671 5/24/10 10:35 PM5/24/10 10:35 PM
www.zshareall.com
Contents at a Glance
Chapter 1: Getting Started in Flash CS5 . . . . . . . . . . . . . . . . . . . . . . . . .673
Chapter 2: Drawing in Flash CS5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .687
Chapter 3: Symbols and Animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . .707
Chapter 4: Creating Advanced Animation . . . . . . . . . . . . . . . . . . . . . . .729
Chapter 5: Importing Graphics and Sounds. . . . . . . . . . . . . . . . . . . . . .753
Chapter 6: Lights, Camera, Movie Clips! . . . . . . . . . . . . . . . . . . . . . . . .775
Chapter 7: Controlling Your Movie with ActionScript. . . . . . . . . . . . .787
Chapter 8: Getting Into the (Work)Flow . . . . . . . . . . . . . . . . . . . . . . . . .809
Chapter 9: Publishing and Final Delivery. . . . . . . . . . . . . . . . . . . . . . . .823
Chapter 10: Working with Flash Catalyst CS5. . . . . . . . . . . . . . . . . . . .841
65_607466-pp07.indd 67265_607466-pp07.indd 672 5/24/10 10:35 PM5/24/10 10:35 PM
Chapter 1: Getting Started
in Flash CS5
In This Chapter
✓ Creating, saving, and opening documents
✓ Getting familiar with the workspace and tools
✓ Creating and saving workspaces
✓ Introducing Flash Player 10
✓ Understanding layers
✓ Importing and exporting files
✓ Understanding the publishing process
W
elcome to the world of Flash, one of today’s hottest applications for
creating eye-catching motion graphics featuring sound, video, and
visual effects. In this minibook, you explore the whole process, from basic
graphics creation and animation to complex effects and user interaction.

Flash can create full Web sites, complex games, and highly functional, rich
Internet applications. One or more of the sites you visit each day is likely to
use Flash.
Creating Your First Flash Document
You can start creating a new, blank Flash document and set up your work-
space in one of two ways:
✦ From the start page, choose Flash File (ActionScript 3.0) under the
Create New column.
✦ Choose File➪New➪Flash File (ActionScript 3.0).
Your new document is created and the workspace appears. Before you get
to work, specify some important settings, such as width and height, for your
file by using the Document Properties dialog box.
66_607466-bk07ch01.indd 67366_607466-bk07ch01.indd 673 5/25/10 8:59 AM5/25/10 8:59 AM
674
Getting Familiar with the Workspace
To open the Document Properties dialog box, choose Modify➪Document
and set these options:
✦ Frame Rate: Because Flash files behave like movies, the frame rate is
an important setting that affects the performance and playback speed
of your movie. The default setting of 24 frames per second (fps) should
work well.
✦ Dimensions: The width and height you specify determine the size of
your stage and in turn, the visible area of your finished movie. For now,
leave the default setting of 550 pixels wide by 400 pixels high.
✦ Background Color: Click the swatch to pick a background color for your
stage from the Web-safe color palette. This setting also determines the
background color of any Web pages created by Flash when you publish
your movie to the Web.
✦ Ruler Units: Select from this drop-down list the unit of measurement
used for all measurement values in your document, including document

size, width and height values, and ruler increments when rules are vis-
ible in the workspace.
When you’re done fine-tuning your document’s properties, click OK.
Getting Familiar with the Workspace
On the Flash workspace, shown in Figure 1-1, you create your Flash movies.
The most prominent item you’ll notice is at the top of your screen: The stage
is where the action happens — where you draw, build, or import graphics,
create text, and construct layouts.
The gray area surrounding the stage is the pasteboard. Items placed on it
aren’t visible in your finished movie because they’re outside the bounds of
the stage. However, it helps to think of this area as backstage — where text,
artwork, and images can make their entrances or exits or be placed until
they’re ready to appear in your movie.
The Tools panel
What CS5 application would be complete without a fancy toolbar? Flash has
a comprehensive set of tools for just about any drawing task you need to
wrap your hands around. Table 1-1 gives you a rundown and description
of the tools you’ll find. The Tools panel has been redesigned to make your
work area flow more smoothly. A double arrow at the top lets you toggle
between expanded and icon views to maximize your work area.
66_607466-bk07ch01.indd 67466_607466-bk07ch01.indd 674 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
675
Getting Familiar with the Workspace

Figure 1-1:
The Flash

workspace.

Pasteboard
Timeline Stage Panels
Table 1-1 The Tools Panel
Button Tool Name/Keyboard
Command
What You Can Do with It
Selection (V) Select and move objects on the stage and
work area
Subselection (A) Select and move specific points on a path
or a shape
Free Transform (Q) Change an object’s dimensions, rotation,
or proportions
Gradient Transform (F) Change the size, intensity, and direction of
a gradient fill
3D Rotation (W) Translate 2D artwork into the 3D plane and
rotate it around an x, y, and z axis
(continued)
66_607466-bk07ch01.indd 67566_607466-bk07ch01.indd 675 5/25/10 8:59 AM5/25/10 8:59 AM
676
Getting Familiar with the Workspace
Table 1-1 (continued)
Button Tool Name/Keyboard
Command
What You Can Do with It
3D Translation (G) Click and drag artwork along the x, y, or z
axis to illustrate depth and distance
Lasso (L) Create freehand selections around one or
more points

Pen (P) Create accurate, point-by-point straight
and curved paths
Add Anchor Point (=) Add anchor points along an existing path
Delete Anchor Point
(-)
Remove anchor points from an existing
path
Convert Anchor Point
(C)
Change the curve orientation of an exist-
ing point
Text (T) Create text on the stage
Line (N) Draw straight lines
Shape Tools (R, O) Create rectangular, oval, or multisided
shapes on the stage
Primitive Tools (R, O) Create rounded rectangles and multiradi-
used ovals that can be modified
Pencil (Y) Draw freehand paths
Brush (B) Draw broad, freehand fill areas
Spray Brush (B) Create a spattered, airbrush-like painting
with symbols from the library
66_607466-bk07ch01.indd 67666_607466-bk07ch01.indd 676 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
677
Getting Familiar with the Workspace
Button Tool Name/Keyboard
Command

What You Can Do with It
Deco (U) Create animated or non-animated flower-
and-leaf style fills or symmetrical artwork
with symbols
Bone (M) Join shapes or symbols with virtual
“bones” for creating posable inverse kine-
matics (IK) objects
Bind (M) Edit connections between objects created
using the Bone tool
Paint Bucket (K) Apply or modify the fill color of an area
Ink Bottle (S) Apply or modify the stroke color and style
of a shape or path
Eyedropper (I) Sample the color property from an object
Eraser (E) Erase parts of a fill or path
Hand (H) Reposition the stage and work area within
the workspace
Zoom (Z) Zoom in or out of a selected area of the
stage
The Timeline
Below the stage sits the Timeline, where you bring your artwork to life through
animation. The Timeline is composed of frames, each one representing a
point in time moving from left to right. The Timeline is further broken out
into layers; new documents automatically contain one new layer labeled
Layer 1. Each layer on the Timeline is composed of frames that span hori-
zontally from left to right, each one representing a point in time, just like
frames in a movie reel (see Figure 1-2).
The Motion Editor
The Motion Editor lets you see and modify all properties of an animation in
a graph-style format. All properties that can be animated are displayed in
rows, each of which contains a value line that can be manipulated to change

the behavior of a selected tween. You can also add complex forces, such as
gravity and inertia, and even add to or subtract from your tween without
using the Timeline or stage.
66_607466-bk07ch01.indd 67766_607466-bk07ch01.indd 677 5/25/10 8:59 AM5/25/10 8:59 AM
678
Getting Familiar with the Workspace

Figure 1-2:
The
Timeline
contains
frames and
layers.

Keyframe Timeline ruler
Layer Frame
The Property inspector
Sitting at the right side of your workspace, the Property inspector lets you
get (and set) attributes, such as height and width, for a selected item on the
stage or work area (see Figure 1-3). The contextual Property Inspector dis-
plays adjustable options for any item you select on the stage, such as width
and height for a selected shape or fill and stroke color. When you don’t have
any objects on the stage selected, the Property inspector will display global
document properties such as frame rate.

Figure 1-3:
The
Property
inspector
shows

options for
selected
graphics,
frames, or
tools.

66_607466-bk07ch01.indd 67866_607466-bk07ch01.indd 678 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
679
Getting Familiar with the Workspace

To modify a document’s properties, such as frame rate and dimensions, at
any time, either use the Property inspector when no items on the stage are
selected or choose Modify➪Document.
Panels (right side)
The numerous panels included in Flash give you total control over most
aspects of your movie, from creating and managing colors to exploring the
structure of your project and adding code to frames.
The default (Essentials) workspace launches with the Property inspector
and Library panel in full view, as well as a minimized group of eight panels
that include
✦ Color
✦ Swatches
✦ Align
✦ Info
✦ Transform
✦ Code Snippets

✦ Components
✦ Motion Presets
Get familiar with panel behaviors and features so that you can manage their
appearance and make organizing your workspace a snap.
Taking a look at the panel group
The panel group sits on the right side of the workspace and features multiple
grouped panels. Panels can be added to or removed from the panel group on
the right.
You can’t freely reposition the panel group in the workspace. However, you
can resize or collapse it to icon view with the double arrows found in its
upper-right corner.
You can remove and float panels from the panel group. Simply click and drag
a panel away from the group by its title tab. To add a panel to the group,
drag it into the panel group on the right.
Managing individual panels
You can position each panel individually anywhere in the workspace by
dragging it by its title tab. You can find additional appearance options under
each panel’s menu, accessible from the icon in its upper-right corner (see
66_607466-bk07ch01.indd 67966_607466-bk07ch01.indd 679 5/25/10 8:59 AM5/25/10 8:59 AM
680
Creating and Saving Workspaces
Figure 1-4). This panel menu also provides another way of reaching that
panel’s primary tasks.

Figure 1-4:
Anatomy of
a panel.

Close panel
Collapse to icons

Panel menu
Panel tab
To group panels, simply drag one on top of the other; after they’re grouped,
you can move and minimize several panels as one unit. This technique is
handy for keeping commonly used or related panels together.
You can save panel groups and panel positions as part of custom work-
spaces. (See the later section “Creating and Saving Workspaces.”)

Panels can always be toggled on or off from the Window menu. If you don’t
see a panel you need or have accidentally closed one, look for it on the
Window menu. Many panels have shortcut keys; if you use a panel often,
use its shortcut key combination for easy access.
Creating and Saving Workspaces
One of the most useful additions in recent versions of Flash is its ability to
save your workspaces, or the appearance and layout of workspace items
such as the toolbar, Timeline, Property inspector, and panels.
Saving workspaces is essential if you’re sharing a computer workstation with
other people and want to recall your favorite panels and setup instantly.
However, a workspace can also be useful for maintaining different views for
different projects, even if you’re the only person working on your computer.
66_607466-bk07ch01.indd 68066_607466-bk07ch01.indd 680 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
681
Saving and Opening Documents
To create and save your workspace layout, follow these steps:
1. Open and position any panels you want to make available, including
the Tools panel, Timeline, Motion Editor, and Property inspector.

You can toggle panels on or off from the Window menu.
2. Choose Window➪Workspace➪New Workspace.
3. Enter a new name for your workspace and click OK.

To recall a workspace, choose Window➪Workspace➪Your Workspace Name
or select a workspace from the Workspace selector in the upper-right corner
of your screen. The current workspace rebuilds and appears exactly as you
saved it.
You can view all saved workspaces at any time by choosing Window➪
Workspace➪Manage Workspaces. From this dialog box, you can also
choose to delete or rename existing workspaces.
You can’t modify, delete, or rename default workspaces, such as Default,
Classic, and Designer.
Saving and Opening Documents
Always save a document after you make significant changes or additions to
it, and always save (though it isn’t necessary) a new document immediately
after you create it. To save a document, choose File➪Save. Enter a name for
the file and choose a location on your hard drive to save it. You can save
Flash work files in .fla format or the new .xfl file format.
To open an existing document, choose File➪Open and locate the Flash file
on your hard drive. Flash files are saved using the .fla extension, and pub-
lished Flash movies are saved using the .swf extension.
You may need at some point to save a copy of your document under a new
name, to either create an alternative version or perhaps make it compatible
with an older version of Flash. Flash CS5 can save .fla files in CS4 format to
make it compatible with the previous version of Flash.
Flash CS4 can’t open .xfl or Flash CS5–format .fla files. To share a
file with someone using Flash CS4, choose File➪Save As➪Flash CS4
Document (*.fla).
To save a copy of your document under a new name, choose File➪Save As.

Choose a location on your hard drive and enter a new filename. The drop-
down list at the bottom of the Save As dialog box lets you choose in which
version of Flash to save the file. For example, you can save files one version
earlier into Flash CS4 format.
66_607466-bk07ch01.indd 68166_607466-bk07ch01.indd 681 5/25/10 8:59 AM5/25/10 8:59 AM
682
FLA vs. XFL File Format
FLA vs. XFL File Format
If you used previous versions of Flash, you probably noticed that Flash CS5
features a new file format: .xfl. Thus new, uncompressed file format results
in a project folder containing a number of .xml files and any original assets
(such as images and audio files) that you may have imported into your proj-
ect’s library. Because of this open file format, resources in your project can
be exchanged with and opened in other applications. The XFL file format
opens up the possibility of Flash files eventually being editable in other
applications.
The traditional FLA file format combines all your project’s vital information
and resource files into a single file, making it more portable but less likely
to exchange with other applications. You don’t have direct access to assets
you’ve imported into your project; for most purposes, however, the stan-
dard FLA file format is suitable, especially if Flash CS5 Professional is your
sole editor for Flash applications.
Saving a document in an older version of Flash may make some newer fea-
tures unavailable. Avoid saving files in an older file format unless you abso-
lutely need to make them available to an older version of Flash.
Getting to Know Flash Player 10
Flash Player is at the heart of Flash technology. The player, which you can
find as a plug-in to Web browsers or as a standalone application, runs and
plays completed Flash movies, known as SWF (ShockWave Flash) files.
Beyond simple playback, Flash Player is also responsible for deciphering

and carrying out instructions written in ActionScript, the powerful, built-in
Flash scripting language. ActionScript, discussed in Chapter 7 in this mini-
book, gives your Flash movies many more capabilities, including playback
control, real-time user interaction, and complex effects.
Users must have Flash Player installed in order to view movies. If you don’t
have it installed, you can get the free download from the Adobe Web site at
www.adobe.com. Fortunately, the Flash Player is installed on over 90 per-
cent of Internet-enabled PCs on average worldwide.
Talking about Layers
If you’ve worked with other programs that use layers (such as Photoshop
or Illustrator), the concept is much the same as using layers to arrange and
stack artwork in these applications. If you’re new to layers, think of them as
clear pieces of film stacked on top of each other. Each layer can contain its
own artwork and animations.
66_607466-bk07ch01.indd 68266_607466-bk07ch01.indd 682 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
683
Talking about Layers
In Flash, you use layers to stack artwork and animations on the stage, allow-
ing them to exist together visually but to be edited or moved independently
from one another. You can reorder layers to position artwork in front of or
behind artwork on other layers.

To create a new layer, click the New Layer icon at the bottom of the Timeline.
The layer is automatically assigned a name; you can rename any layer by
double-clicking its name and typing a new name.
To delete a layer, follow these steps:

1. In the Timeline window below the stage, select the layer you want to
delete.
Hold down the Shift key to select multiple layers. You can then click the
Trash icon to delete all selected layers at one time.

2. Click the Delete Layer icon below the Timeline.
The beauty of working with layers is that you can easily change the stacking
order and appearance of artwork and animations distributed across those
layers. To reorder layers, simply select a layer by clicking its label on the
Timeline and then click and drag the layer up or down in the stacking order
and release it to its new position (see Figure 1-5). Layers at the top of the
list appear in front of other objects in lower layers; in contrast, layers at the
bottom of the list appear below or behind items on higher layers.

Figure 1-5:
Shuffling
layers is
easy —
just drag.

Two additional aspects of managing layers include toggling a layer and its
contents to be visible or invisible and locking layers to prevent their con-
tents from being accidentally moved or modified.

To toggle a layer’s visibility on or off, click any layer in the column below the
Eye icon. To toggle all layers on or off, click the Eye icon at the top of the
column.

To prevent layer contents from being modified, click any layer in the column
below the Padlock icon. To unlock it, click the Padlock icon again. To lock or

unlock all layers, click the Padlock icon at the top of the column.
66_607466-bk07ch01.indd 68366_607466-bk07ch01.indd 683 5/25/10 8:59 AM5/25/10 8:59 AM
684
Importing Files
Locking layers ensures that you don’t accidentally move or delete the art-
work it contains. Make a habit of locking layers whenever you aren’t working
with them.
Layer visibility affects only what you see inside the authoring environment
and has no effect on the finished SWF file. Layers whose visibility is toggled
off in your document still appear when published. You can, however, over-
ride this behavior in your document’s publish settings, discussed in Chapter
9 of this minibook.
Importing Files
Sometimes you need to use assets — such as artwork or photo files created
in Adobe Photoshop or Illustrator, MP3 sound files, and even video files — that
weren’t created in Flash. Here are some of the file formats you can import
into your Flash movie:
✦ Images: EPS, GIF, JPEG, PNG, TIFF
✦ Flash SWF
✦ Layered artwork files: AI (Adobe Illustrator) and PSD (Photoshop)
✦ Audio files: AIFF, MP3, and WAV
✦ Video files: DV, F4V, FLV, MOV, MPEG, QuickTime
You can import these types of files directly to the stage for immediate use or
to your document’s library (see Chapter 3 of this minibook) for storage until
you’re ready to place them on the stage.
Follow these steps to import files to the stage:
1. Choose File➪Import➪Import to Stage.
2. Select from your hard drive the file or files you want to import.
Imported items are placed on the stage on the selected layer and frame.
Follow these steps to import files directly to the library:

1. Choose File➪Import➪Import to Library.
2. Select the files from your hard drive that you want to import and click
the Open button.
Imported files don’t appear on the stage but are available in the Library
panel for later use.
66_607466-bk07ch01.indd 68466_607466-bk07ch01.indd 684 5/25/10 8:59 AM5/25/10 8:59 AM
Book VII
Chapter 1
Getting Started in
Flash CS5
685
Publishing Your Movie

To select multiple files for import, hold down the Shift key when prompted
to select files from your hard drive. You can bring several files to the stage
or library in one step.
Exporting Files from Flash
In contrast to the Import menu, the Export menu is used to generate files
from your current document out of Flash, most often to create a compressed
SWF file (movie) for final delivery. Additionally, the menu can be used to
generate static (such as JPEG or GIF) images from specific frames in your
movie.
Publishing Your Movie
The final step in preparing your movie to be posted on the Web, distributed
on CD-ROM, or used as a desktop application is the publishing process,
which includes these important tasks:
✦ For Web publishing: Export the final SWF file that’s playable by Flash
Player and create all additional files (such as Web pages) necessary to
display your movie.
✦ For desktop publishing: Create an AIR application that’s viewable in the

AIR runtime.
✦ For the desktop or a CD/DVD-ROM: Create self-contained .app or .exe
files.
The life of a Flash project involves at least two dif-
ferent types of files: your authoring (FLA or XFL)
file, in which all your work is created, and the final
product, your compressed movie or SWF file.
FLA and XFL are used only during the authoring
process. When you’re ready to distribute your
finished movie, publish a SWF file that can be
displayed by Flash Player.
These SWF files can be created from either
the Publish or Export menu options and are
compressed movie files (typically smaller than
their FLA and XFL counterparts) that contain
all the graphics and information necessary to
display your movie.
Flash Player can’t read FLA or XFL files, and
SWF files can’t be deconstructed into usable
FLA files. Changes to your Flash movie are
always made in the original FLA or XFL file and
must be exported to a new SWF file again if you
want to view them in Flash Player.
FLA and SWF files
66_607466-bk07ch01.indd 68566_607466-bk07ch01.indd 685 5/25/10 8:59 AM5/25/10 8:59 AM
686
Publishing Your Movie
The File menu’s publish settings and options handle the setup and publica-
tion of your movie so that you can show the world your new creation.
Flash can create all these file types at publish-time:

✦ HTML: To display movies on the Web, you need to contain them within
a Web page or HTML file. Flash takes care of creating this page for you.
✦ JPG, GIF, or PNG: You can create static images from the first frame of
your Flash movie in these Web-friendly image formats. These are useful
for a number of purposes, including previews or stand-ins when the
Flash plug-in is not available.
✦ Projector: If you want to distribute your movie as a standalone file, you
can create a Mac or PC compatible projector that includes Flash Player.
Projectors are good in situations where you want to distribute a movie
offline and not require your users to download the Flash player.
✦ SWF: This is the most common format in which you’ll publish your Flash
movies. SWF files are playable in the Flash player/plug-in, and are com-
pressed, ready-to-view versions of your original file.
Chapter 9 of this minibook explores publishing in more detail.
66_607466-bk07ch01.indd 68666_607466-bk07ch01.indd 686 5/25/10 8:59 AM5/25/10 8:59 AM
Chapter 2: Drawing in Flash CS5
In This Chapter
✓ Creating shapes and lines
✓ Editing and selecting shapes
✓ Tweaking and splicing shapes and lines
✓ Transforming shapes and artwork
✓ Creating and modifying text
✓ Working with colors and gradients
✓ Using the Brush tool
M
any great creations start with the most basic shapes and build from
there. In this chapter, you discover the secrets of drawing shapes
and lines and working with colors in Flash.
Drawing Shapes and Lines
To get your creation started, become familiar with the Shape and Line tools

on the Tools panel and use them as the starting point for everything from
basic buttons to complex illustrations.
When you’re ready to create more complex artwork beyond the capabilities
offered by the Shape and Line tools, the Pen and Pencil tools are standing
by. These tools work quite differently, and for that reason should be chosen
based on the kind of artwork you want to create.
The following sections show you how to get started creating basic shapes
and lines.
Drawing basic shapes with the shape tools
On the Tools panel, locate the Rectangle tool; also notice a small arrow in
the lower-right corner of the icon, which means that more tools are hidden
underneath. Click and hold the Rectangle tool to reveal the Oval and
Polystar tools; select the shape tool you want to use.
Before you draw the shape, set some colors for it by using the two swatches
at the bottom of the Tools panel. The Fill color swatch (indicated by the
67_607466-bk07ch02.indd 68767_607466-bk07ch02.indd 687 5/25/10 8:59 AM5/25/10 8:59 AM
688
Drawing Shapes and Lines
paint bucket icon) lets you specify a color to fill your shape. The Stroke
Color swatch (indicated by the pencil icon) controls the outline color.
Flash lets you choose colors from the Swatches panel. You can add your
own colors to this panel, but for now, choose one of the available colors for
your shape’s fill and stroke.

Click and drag on the stage to create a shape. Notice that shapes are drawn
by default from the left corner outward. You can draw shapes from the
center (which is sometimes easier) by holding down the Option (Mac) or
Alt (Windows) key while drawing the shape.
To constrain a shape proportionally, hold down the Shift key while drawing
or resizing.

Merging shapes
If you overlap two or more shapes in Flash, they automatically merge, or
become one complete shape. You can take advantage of this behavior by
using an overlapping shape to knock out another, or you can make more
complex shapes by combining simpler ones.
You may also find that overlapping strokes results in divided fill areas,
which can be a desirable effect. Experiment by drawing and overlapping
shapes and using the Selection tool to select parts of the resulting object.
Creating perfect lines with the Line tool
The Line tool makes constructing perfect, straight lines quick and easy. To
create a straight line, choose the Line tool from the Tools panel, click and
drag on your stage where you want the line to start, and release the mouse
button where you want the line to end.
To modify your line’s color or appearance, select it with the Selection tool
and use the Property inspector to change the stroke color and size. You also
find a Style drop-down list, which lets you choose among straight, dotted,
dashed, and artistic stroke styles.

To create perfectly vertical or horizontal lines, hold down the Shift key while
using the Line tool. You can also create diagonal lines in 45-degree incre-
ments by using this same method.
Creating lines and curves with the Pen tool
Using the Pen tool may be a bit different from tools you’re used to, unless,
of course, you’ve used the Pen tool in applications such as Illustrator or
Photoshop. The Pen tool isn’t a freehand drawing tool; rather, you use it to
67_607466-bk07ch02.indd 68867_607466-bk07ch02.indd 688 5/25/10 9:00 AM5/25/10 9:00 AM
Book VII
Chapter 2
Drawing in
Flash CS5

689
Drawing Shapes and Lines
create paths, or outlines, composed by connecting anchor points. When you
click and create new points, lines are automatically drawn to connect those
points. You can then either bend those lines into precise curves or leave
them straight.
The best way to understand the Pen tool is to practice working with it.
Visualize a shape you want to draw (for example, a leaf), and try to create it
with the Pen tool.
To get started, follow these steps:
1. Select the Pen tool from the Tools panel.
2. Use the Color swatch on the bottom of the Tools panel to set a stroke
color.
3. Click to set the first point on the stage and then construct a line by
clicking again to set a second point where you want the line to end.
4. Click to set a new point and before releasing the mouse button, drag
to the left or right to bend the new line into a curve.
The more you drag in a particular direction, the more extreme the curve
you create.
5. Continue creating new points and experimenting with different
curves.
6. Move your mouse pointer over the first point you created (a loop
appears above the icon) and click to close the path and complete the
shape.

The Pen tool attempts to continue a curve in the same direction even after
a new point is set. To reset the last point drawn back to a straight line, hold
down the Option (Mac) or Alt (Windows) key and click the last point created
before setting a new one.
Drawing freehand with the Pencil tool

The precise nature of the Pen tool is great for certain situations, but if you
prefer the intuitive feel of freehand drawing or want to create more natural
or rough artwork, consider using the Pencil tool.
An attractive feature of the Pencil tool is that it has three different modes to
choose from. Each mode provides a different level of smoothing, so even if
your hand isn’t the steadiest, the Pencil tool compensates by automatically
smoothing out lines or curves while you create them.

Select the Pencil tool and choose the appropriate smoothing mode using the
selector in the lower-right corner of the Tools panel:
67_607466-bk07ch02.indd 68967_607466-bk07ch02.indd 689 5/25/10 9:00 AM5/25/10 9:00 AM
690
Selecting and Editing Shapes
✦ Straighten: Forces lines to the nearest straight line; perfect for drawing
or tracing straight edges or boxy outlines.
✦ Smooth: Smoothes out lines or curves to the next closest perfect curve.
✦ Ink: Provides less smoothing and keeps lines and curves as natural as
possible.
The mode you select depends completely on what type of shapes and lines
you’re trying to draw. If your shape is more diverse than one mode can
handle, you can switch modes from line to line as needed.
Selecting and Editing Shapes
After you create a shape, you can select and move it by using the Selection
tool at the top of the Tools panel. Flash shapes are easy to edit because you
can select the stroke and fill independently to separate one from the other.
To select and move the stroke or fill only, follow these steps:
1. Select the Selection tool from the Tools panel.
2. Click either your shape’s stroke or fill once to activate it.
To select the entire shape, double-click the fill of your shape or use the
Selection tool to drag around it on the stage (see Figure 2-1).

Figure 2-1:
Fill (left)
or stroke
(right)?

3. Click and drag the selected stroke or fill or use the arrow keys to sepa-
rate it from the rest of the shape.
Modifying fill and stroke colors
You can choose your fill and stroke colors ahead of time before you start
drawing, but if you change your mind, modifying colors is easy to do.
67_607466-bk07ch02.indd 69067_607466-bk07ch02.indd 690 5/25/10 9:00 AM5/25/10 9:00 AM
Book VII
Chapter 2
Drawing in
Flash CS5
691
Selecting and Editing Shapes
You can modify either the fill or stroke colors of a preexisting shape in these
three ways:
✦ Select the entire shape and change its fill and stroke colors from the
swatches in the Property inspector (see Figure 2-2).

Figure 2-2:
Use the
Property
inspector
to change
the shape’s
fill or stroke

color.

✦ Select the entire shape and change the fill and/or stroke colors by using
the Fill and Stroke swatches on the Tools panel.
✦ Specify colors on the Tools panel and use the Ink Bottle tool by clicking
the stroke or use the Paint Bucket tool by clicking the fill.
To apply a fill color to your shape, select it on the stage and choose a color
from the Fill swatch at the bottom of the Tools panel. Grab the Paint Bucket
tool and click inside the shape. To apply a stroke color, select a color from
the Stroke swatch at the bottom of the Tools panel and select the Ink Bottle
tool. Click the edge of your shape once to set a stroke with the selected
color.

You can also set Fill or Stroke colors from the Fill and Stroke section of the
Property inspector when the Ink Bottle or Paint Bucket tools are selected.

To remove a fill or stroke completely, select a shape and select None from
either the Fill or Stroke color swatch.
Merge versus Object Drawing mode
Being able to freely tear apart shapes can be quite flexible and useful,
though some people prefer to work with shapes as single objects (similar
to Illustrator CS5). For this reason, Object Drawing mode was created; this
optional mode automatically combines the stroke and fill of a shape into a
single object, which you can move and resize as a whole. A shape drawn in
67_607466-bk07ch02.indd 69167_607466-bk07ch02.indd 691 5/25/10 9:00 AM5/25/10 9:00 AM