Adobe Creative Classroom Suite 5 Design Premium Digital classroom phần 7 pot

Answers
1 The Publish command can create a playable SWF file and
automatically embed it into an HTML page. The Publish
command also offers a wide range of exportable formats in
addition to standard .swf creation.
2 To display your Flash animation on video devices such as
iPods and PSPs, as well as to import into a video editing or
motion graphics program.
3 Adobe AIR applications are able to interact with the user’s
operating system and local files. Projectors have security
restrictions which prevent this, and don’t feature the same
ActionScript capabilities necessary to work with the operating
system.
823
Fireworks Lesson
1: Adobe
Fireworks
Jumpstart
Fireworks is a unique hybrid of vector and bitmap graphics
programs. It provides a user-friendly environment for
prototyping web sites and user interfaces, and creating and
optimizing images for the Web. And because it’s part of
Adobe’s Creative Suite, Fireworks also offers time-saving
824
integration with Photoshop, Illustrator, Dreamweaver, and
Flash.
What you’ll learn in this lesson:
• Publishing to the web and CD
• Customizing Publish Settings
• Creating a standalone, full-screen projector
• Exporting to video

Starting up
You will work with several files from the fw01lessons folder
in this lesson. Make sure that you have loaded the CS5lessons
folder onto your hard drive from the supplied DVD or online.
ePub users go to
www.digitalclassroombooks.com/epub/cs5. See “Loading
lesson files” on page XXIX.
About Fireworks
Adobe Fireworks is a versatile graphics program that
combines features found in image-editing, vector-drawing,
and Web-optimizing applications. Instead of jumping from
one program to another to create graphics for your web site,
Fireworks lets you use one program from start to finish.
Work with vector and bitmap objects
Fireworks includes tools for working with both vector and
bitmap graphics. You can draw an object and then use a wide
825
array of tools, effects, and commands to enhance it. If you’ve
created a graphic in another program, Fireworks also imports
and edits graphics in JPEG, GIF, PNG, PSD, and many other
file formats.
Make graphics interactive
In Fireworks, you can add interactive areas to a Web graphic
using slices. Slices divide an image into exportable areas, to
which you can apply rollovers and other interactive
behaviors.
Optimize and export graphics
The optimization features of Fireworks help you find the right
balance between file size and visual quality for your graphics.
Once you’ve optimized your graphics, you can export them in

a number of different file formats, including JPEG, GIF,
animated GIF, and HTML tables containing sliced images.
Vector and bitmap graphics
Graphics on your computer are displayed in either vector or
bitmap format. It’s important that you understand the
difference between the two file types, because Fireworks is
capable of opening and editing both formats.
About vector graphics
Vector graphics are drawn objects that use anchor points,
lines, and vectors, or mathematical equations that contain
color and position information. They are defined by a series
of points that describe the outline of the graphic. The color of
826
the graphic is composed of the color of its outline (or stroke)
and the color of its interior (or fill).
Vector graphics are also described as resolution-independent.
This means that a graphic’s appearance doesn’t change when
you move, resize, or reshape it.
Vector graphics feature crisp
edges and flat areas of color.
About bitmap graphics
As you may already know, your computer screen is a large
grid of pixels. Bitmap graphics are composed of dots (or
pixels) arranged inside this grid. In a bitmap graphic, the
image is defined by the location and color value of each pixel
in the grid. When viewed at a certain distance, the dots create
the illusion of continuous tone, as in a mosaic.
Bitmap graphics are resolution-dependent, which means that
the image data is restricted to a grid of a certain, specified
size. Enlarging or transforming a bitmap graphic changes the

827
pixels in the grid, which can make the edges of the image
appear jagged.
Bitmap graphics feature gradations in
tone and softer edges.
The startup screen
When you start Fireworks without opening a document, the
Fireworks startup screen appears in the work environment.
The startup screen gives you quick access to Fireworks
tutorials, recent files, and Fireworks Exchange, where you
can add new capabilities to some Fireworks features.
1 Disable the startup screen by clicking the Don’t Show
Again checkbox when the startup screen opens. Fireworks
lets you re-access the startup screen if you want to later. Press
OK.
828
2 Close the startup screen. You’ll be creating a new
document using the File > New menu command.
The Start page appears by default when Fireworks is first
opened.
Creating a new Fireworks document
As with most computer applications, your first step is to
create a new document.
New documents in Fireworks default to its native file
format, Portable Network Graphic (PNG). This means
that regardless of the optimization and export settings
829
you select, the original Fireworks PNG file is
preserved to allow easy editing later.
1 Select File > New. The New Document dialog box opens.

2 In the New Document dialog box, type 800 in the Width
text field, 600 in the Height text field, and make sure that both
drop-down menus are set to Pixels. Measurements are usually
expressed in pixels in Fireworks, as you’re designing for a
pixel-based monitor.
Use the New Document dialog box to set up your file.
830
3 Set the Resolution, or number of pixels per inch in your
bitmap grid, to 72. Most computer monitors can only display
graphics at between 72 and 100 pixels per inch.
4 Set the Canvas Color, or the background color to
Transparent. You could also have used the Custom color
swatch to select a custom canvas color.
5 Press OK to accept your new document settings.
Workspace basics
You create and manipulate your files using various elements,
such as panels, bars, and windows. Any arrangement of these
elements is called a workspace. The workspaces of the
different applications in the Adobe Creative Suite share the
same basic appearance, so that you can easily move between
the applications.
Fireworks workspace overview
When you open a new document in Fireworks, the document
window appears in the center of the screen, and displays the
file you’re working on. Document windows can be tabbed
and, in certain cases, grouped and docked.
831
The document window displays the file you’re working on in
the center of the screen.
The Fireworks workspace includes the Tools panel, Property

Inspector, Application bar, and other panels.
• The Application bar, across the top of your screen, contains
a workspace button for switching workspaces, menus, and
other application controls.
The Application bar contains menus and other application
controls.
832
• The Property Inspector, at the bottom of the document
window, initially displays document properties. It’s
context-sensitive, however, and changes depending on which
tool you’ve chosen, or what you’ve selected in the document.
The Property Inspector is context-sensitive and displays
content relative to what you’ve selected.
• The Tools panel, on the left side of the screen, contains
Bitmap, Vector, and Web tool groups. These tools are used
for creating and editing elements of your graphic. Related
tools are grouped, or nested.
833
834
The Tools panel contains tools for creating and editing
elements of your graphic.
Other Fireworks panels
Panels are floating windows that let you work with layers,
paths, and colors, and otherwise edit the appearance or
behavior of a selected object. Although they are docked to the
right side of the workspace by default, each panel is
draggable, and so you can group panels into your own custom
arrangements.
835
836

Panels let you edit the appearance or behavior of a selected
object.
Working with bitmaps
Creating bitmaps
As mentioned earlier in this lesson, bitmap graphics are
composed of small squares called pixels, which fit together
like the tiles of a mosaic to create an image. Some examples
of bitmap graphics are photographs captured with your digital
camera, or graphics created in paint programs. They are
sometimes referred to as raster, or pixel-based, images.
In Fireworks, you can create bitmap images by drawing and
painting with bitmap tools, by converting vector objects to
bitmap images, or by opening or importing images.
Bitmap images cannot be converted to vector objects in
Fireworks.
Importing a bitmap
In this exercise, you’ll import a JPEG file to use as a header
graphic for a web page. Fireworks imports and edits graphics
in JPEG, GIF, PNG, PSD, and many other file formats.
1 With your Fireworks document open, select File > Import.
The Import File dialog box opens.
2 Navigate to the fw01lessons folder within the CS5lessons
folder, and select the file BlueSky.jpg.
837
3 Press Open. The corner-shaped, import cursor indicates
that the file is ready to be placed in your Fireworks document.
4 Click once in the upper-left corner of your canvas to place
the image at its original size.
You can also drag the import cursor to draw a
rectangle that scales the image to fit.

Bitmap images are imported using the File > Import
command.
Cropping a bitmap
The imported image fills your canvas, but you’ll want to crop
its dimensions for use as a web page header.
838
1 From the Tools panel, choose the Crop tool ( ).
2 Choose View > Rulers, if you do not see the rulers in the
document window. Position your cursor on the left edge of
the canvas, at the 200-pixel mark on the vertical ruler.
3 Drag down to the 300-pixel mark on the vertical ruler, and
across to the right edge of your canvas. You should end up
with a crop selection box that is 800 pixels wide and 100
pixels high.
Images can be cropped with the Crop tool.
4 Double-click inside the bounding box or press Enter to
crop the selection.
839
To cancel a crop selection, press Esc.
Double-click inside the bounding box to accept your crop.
Applying a filter
Next you’ll use a filter to lighten a portion of the image and
complete the bitmap portion of your header graphic.
1 From the Tools panel, choose the Rectangular Marquee
tool ( ).
2 Drag a rectangle over the bottom half of your header
graphic. A flashing selection outline appears over the area,
840
identifying those pixels as being currently selected for
editing.

A selection flashes when the pixels inside are ready for
editing.
3 Select Filters > Adjust Color > Hue/Saturation. The Hue/
Saturation dialog box appears.
4 In the Hue/Saturation dialog box, slide the Lightness slider
to 50, and click the Preview checkbox to see the results of the
lightening in your image.
Set a Lightness value in the Hue/Saturation dialog box.
5 Press OK to accept the Hue/Saturation filter setting.
841
Press OK to accept your filter setting.
6 Choose File > Save, and save this file as Header.png in the
fw01lessons folder. Now you’ll work with the vector tools to
add a navigation bar to your header.
Working with vector objects
As mentioned previously, a vector graphic’s shape is defined
by a path, and by the anchor points that are plotted along it. A
vector graphic’s stroke color follows the path, and its fill
occupies the area inside the path.
Vector object shapes include basic shapes, free-form shapes,
and Auto Shapes, or object groups that have special controls
for adjusting them. You can use a variety of tools in
Fireworks to draw and edit vector objects.
Drawing and editing basic shapes
You use the basic shape tools to draw rectangles, ellipses, and
polygons.
842
Fireworks features both basic and auto
shape tools.
Drawing a rectangle

The Rectangle tool draws rectangles as grouped objects. To
move a rectangle corner point independently, you need to
ungroup the rectangle or use the Subselection tool ( ).
1 From the Tools panel, select the Rectangle tool ( ).
843
If you can’t see the Rectangle tool in the Tools panel,
click and hold on the tool to choose it from the list that
appears.
2 Move the pointer to the canvas, positioning it on the left
side of the lightened area of your header. The cursor changes
to a plus sign (+), indicating that you can draw the rectangle.
3 Click and drag diagonally from upper left to lower right,
creating a rectangle that is 750 pixels wide and 25 pixels high,
and leaving a small margin of the lightened sky around it.
The rectangle automatically fills with the default fill color
(gray). Leave the fill at its default; you’ll change it later in
this exercise.
844
Leave the rectangle’s fill at its default color (gray).
While holding down the mouse button, press and hold
the spacebar to adjust the position of a basic shape as
you draw it. Release the spacebar to continue drawing
the object.
Resizing a rectangle
If you have difficulty drawing your rectangle at the correct
size by dragging, you can do one of the following:
• Enter new width (W) or height (H) values in the Property
Inspector or the Info panel.
• In the Select section of the Tools panel, select the Scale tool
and drag a corner transform handle.

• Select Modify > Transform > Scale and drag a corner
transform handle, or select Modify > Transform > Numeric
Transform and enter new dimensions.
• Drag a corner point on the rectangle.
Auto Shapes
Auto Shapes, unlike other object groups, have
diamond-shaped control points in addition to the object group
handles. Dragging a control point alters only its associated
visual property. Most control points have tool tips that
describe how they affect the Auto Shape.
845
Auto Shape tools create shapes in preset orientations. For
example, the Arrow tool draws arrows horizontally.
Use the Auto Shape tools to create
shapes with preset orientations.
The Auto Shape tools
Arrow: Simple arrows of any proportions, and straight or
bent lines.
846
Arrow Line: Straight, thin arrow lines providing quick
access to common arrowheads (simply click either end of the
line).
Beveled Rectangle: Rectangles with beveled corners.
Chamfer Rectangle: Rectangles with chamfers (corners that
are rounded inside the rectangle).
Connector Line: Three-segment connector lines, such as
those used to connect the elements of a flowchart or
organizational chart.
Doughnut: Filled rings.
L-Shape: Right-angled corner shapes.

Measure Tool: Simple arrow lines that indicate dimensions
for key design elements in pixels or inches.
Pie: Pie charts.
Rounded Rectangle: Rectangles with rounded corners.
Smart Polygon: Equilateral polygons with 3 to 25 sides.
Spiral: Open spirals.
Star: Stars with any number of points from 3 to 25.
Working with text
Now you’ll add some text to serve as navigation links for
your header bar.
847