However, one really cool feature of layers, mostly unrelated to using them as a design technique, is that you can generate Flash animations straight from Illustrator by converting layers
Trang 1#72: Exporting Illustrator Files as HTML
When you define slices, grids appear on the artboard Those gridlines
represent table rows and columns that will generate when you save the
document as an HTML page (Figure 72b)
Figure 72b Slices are displayed on the artboard in Illustrator.
After you create a slice, you can configure it as an image slice or a text
slice Text slices (that were created by selecting text and creating a slice
from that text object) export to HTML pages as editable type To change a
selected slice to a text slice, choose Object > Slice > Slice Options Choose
HTML Text from the Slice Type pop-up menu (Figure 72c) You can assign
attributes like background color and horizontal and vertical alignment in
the Slice Options dialog
Figure 72c Defining a text slice as HTML text.
Saving Slices in Different Formats
The slices produced by ing images can be saved in
slic-different Web-compatible
file formats For instance, one sliced element of an Illustrator file can be saved
as a Flash banner, another element can be saved as a JPEG image, and yet another
as a transparent GIF image
Settings for Slices
To assign settings to vidual slices, click on each slice in the Save for Web & Devices window and adjust settings Then when you save, all slices are saved
indi-as individual images in an images folder and an html page is created
Trang 2You can use the Slice Options dialog to define links for images (along with other attributes like alternate text and target window) With a slice selected, choose Object > Slice > Slice Options to open the Slice Options dialog
Enter a name; this will be the name for your image file after you save your entire Illustrator file in the Save for Web & Devices window
Enter a link target in the URL box, a target browser window in the get box, a message that displays in the browser status bar in the Message
Tar-box, and Alt text (alternate text content) in the Alt box (Figure 73a).
Figure 73a Defining link attributes for a selected slice.
Alt text displays in a viewer’s browsing environment when the image cannot display, or is read out loud to vision-impaired visitors with special
browsing setups A link target defines whether the link opens in the same
browser window (that is the default and requires no additional settings)
or a new browser window (the _blank setting)
Defining Links
in Illustrator
Slicing?
For an exploration of slicing
Illustrator images to prepare
them for export to the Web,
see #72, “Exporting
Illustra-tor Files as HTML.”
Why Assign Links in
Illustrator?
Generally, when you
cre-ate artwork for the Web in
Illustrator, you assign
attri-butes like links in
Dream-weaver, not Illustrator But
sometimes you do want to
define links in Illustrator as
you design things like
navi-gation buttons, icons, and
logos This might be useful,
for example, if you are
cre-ating a wireframe (a rough
mockup) of a Web page and
want working links
Saving for HTML
Images (or any object
includ-ing type) with link attributes
can be saved as part of your
entire Illustrator file to an
HTML file See #72,
“Export-ing Illustrator Files as HTML,”
for instructions on how to
do that
Trang 3#74: Exporting Artwork to Flash SWFs
Exporting Artwork
to Flash SWFs
If you want to share files with a Flash developer, simply save them as AI
CS5 files But if you want to save Illustrator artwork as a Flash (SWF) file
right in Illustrator, you can do that as well.
Flash SWF format is used to play (but not edit) Flash movies SWF files
have the advantage of displaying as scalable vectors online, a property
not shared by traditional Web-compatible graphic formats like JPEG, PNG,
or GIF
To save an Illustrator file as a SWF, choose File > Save for Web & Devices
In the Save for Web & Devices dialog, choose SWF from the Optimized File
Format pop-up menu
Use the Flash Player Version pop-up menu to choose which version of
the Flash Player to save for Choosing an older version makes it more likely
that the SWF file can be played in browsers and on devices Choosing the
latest version ensures that every feature available is supported when your
illustration is rendered on a device or in a browser Generally speaking,
Illustrator artwork can be saved to older versions of the SWF format
(like 6, 7, 8, or 9) without losing any quality
Effects That Fail to Import into Flash CS5
Flash CS5 smoothly accepts Illustrator artwork You can copy and paste into Flash or open Illustrator files right in Flash Animators in Flash will
be able to edit your artwork, but many effects will lose their “effect” properties and import into Flash simply as vectors This is because the effects supported in Flash are constrained by what the Flash Player can recognize
Before You Export to Flash, Read This!
Before diving into how to
export Illustrator files to Flash format, let’s distin-guish between two kinds of Flash files SWF (pronounced
swiff) files play in the Flash
Player and are widely ported in Web and device browsers They cannot be edited in Flash; they are exported from Flash to play in browsers If you are exporting Illustrator artwork for use on the Web, SWF files preserve the advantages of vector artwork, including compact file size and scalability Flash (FLA) files can be edited, but not viewed in browsers
Trang 4sup-Higher Curve Quality settings preserve curves with fewer jagged edges but increase file size The Compressed check box further reduces file size The Preserve Appearance check box creates limited editability when the file is placed in Flash The Protect File check box prevents the file from being opened in any application other than the Flash viewer or Flash The Text As Outlines check box converts text to curves Use this
option for better-quality images (Figure 74a).
Figure 74a Saving to Flash Player 8 with the highest curve quality and noneditable type.
Frame Rate and
Looping
The Frame Rate and
Loop-ing settLoop-ings in the Save for
Web & Devices window only
apply to Flash animation
See #75, “Generating Layers
for Flash Animation.”
Trang 5#75: Generating Layers for Flash Animation
Generating Layers for Flash Animation
Layers in Illustrator can be used to separate components of your
illus-tration Because of Flash’s vector-based logic, it is much easier to select
discrete components of an illustration in Illustrator than in a pixel-based
program like Photoshop And, so, in this highly compressed book of
essentials for Web design with CS5 Design Suite, it won’t be necessary (or
possible) to explore every dimension of using layers in Illustrator
However, one really cool feature of layers, mostly unrelated to using
them as a design technique, is that you can generate Flash animations
straight from Illustrator by converting layers to Flash movie frames
To do that, the more layers the better, so you can use a feature in
Illus-trator that automatically generates layers from paths Do this in the Layers
panel menu—choose either of the Release to Layers options (Figure 75a).
Figure 75a Releasing artwork to sequenced animation.
When you generate layers in the Layers panel, you can either build or
sequence layers Building is better for morphing animation—animated
transition between shapes Sequencing is better for generated tweened
(transitional) frames in a Flash animation
Once you’ve generated layers, follow these steps to convert the
Illus-trator layers into frames of a Flash animation:
1 Select File > Save for Web & Devices to open the Save for Web &
Devices dialog
(continued on next page)
Trang 62 From the Optimized File Format pop-up menu, choose SWF
3 From the Type of Export drop-down menu, choose Layers to SWF
Frames
4 Set Curve Quality (as noted earlier, higher Curve Quality values create
more accurate curves and increase file size)
5 In the Frame Rate pop-up menu, set a Frame Rate for the animation.
Note
Twelve frames per second is a widely used animation setting
6 Select the Loop check box to cause the Flash movie to repeat
indefi-nitely Deselect the check box to play the animation only once
7 Select the Compressed check box to further reduce file size (Figure 75b).
Figure 75b Creating a looping animation from an Illustrator file.
8 Click the Save button in the Save for Web & Devices dialog to export
the file as a Flash movie, converting layers to Flash frames
9 In the Save Optimized As dialog, navigate to the folder with your Web-
site media files and enter a filename Click Save again to save the file
as a SWF (with the option of saving a SWF file) in your Web site folder
Don’t Save Artwork for
Flash Developers as a
SWF!
If you are creating artwork
to be used by a Flash
devel-oper, you won’t want to
export that artwork to the
SWF format, because the
art-work will lose its editability,
restricting the ability of the
Flash developer to work with
your illustrations If you are
preparing artwork for a Flash
movie, just save it to
Illustra-tor format Flash can open
Illustrator files, and many
elements and effects of an
illustration are preserved for
further editing in Flash
Troubleshooting
Layers to Frames
If generating layers creates
sublayers, click and drag
on those sublayers to move
them up to full layers before
generating Flash frames
Trang 7C H A P T E R T W E L V E
Designing Interactive
Elements in Flash Catalyst
Flash Catalyst CS5 is an entirely new application introduced with the CS5
Web Premium Suite Catalyst has something of a split personality: It was
created to allow illustrators to prototype interactive elements (like a
scroll-bar, a button, or a form), and hand them off to high-level programmers
who integrate those elements into complex database-driven applications
coded in Flash Builder 4 If you are designing in a large environment with
a rigid division of labor and an army of programmers and database geeks,
you’ll use the techniques in this chapter to hand your work off to them
Flash Catalyst’s native file format is FXP Those files can be opened in
Flash Builder 4, but—and this is a significant limitation for small, medium,
and semi-large design environments—Flash Catalyst elements cannot
be handed off to Flash Professional CS5 developers But Flash Catalyst
CS5 can also create some basic, interactive Flash (SWF) files that can be
popped directly into a Dreamweaver CS5 Web site It is that workflow that
I’ll focus on in this chapter, even while the techniques are applicable in
any environment
Finding your way around the Catalyst environment will be a breeze
There isn’t that much to it Don’t expect to be able to move or resize
Cata-lyst’s limited set of panels—they sit on the right side of the screen and
stay put The toolbar is minimalist, with a bare-bones set of tools for
selec-tion, drawing, navigaselec-tion, and zoom Text editing and formatting options
are similarly short-handed The concept is you will create artwork and
type in Illustrator and Photoshop, and then assign interactivity to it in
Catalyst And that’s what you’ll learn to do in this chapter
Trang 8Opening and Editing Artwork from Illustrator or Photoshop
When you launch Flash Catalyst, the opening splash screen prompts you
to create a new project from a design file from an Adobe Illustrator (AI) file, Adobe Photoshop (PSD) file, or an FXG file (the native format that Catalyst shares with Adobe Flash Builder 4) Or, if you choose File > New Project from Design File, you can launch a Catalyst project using an exist-ing Illustrator (AI), Photoshop (PSD), or FXG file And, when you need to edit that artwork, you’ll “round-trip” the illustration back to Illustrator or Photoshop, make the edits, and then pop it back into Catalyst
Let’s walk through this I’ll use Illustrator as an example, but the steps are almost identical in Photoshop
1 Create artwork in Illustrator or Photoshop A simple, rounded-
rectangle button will work well if you want to follow my recipe here Save the artwork in native Illustrator or Photoshop format
2 Back in Catalyst, choose File > New Project From Design File The
Import dialog opens Navigate to your Illustrator or Photoshop file and choose Open
3 The Import Options dialog appears Depending on the origin of the
file, the options will differ, but the default settings preserve artwork quality while limiting editability in Catalyst Choose which options work best for you, and click OK
Catalyst’s Minimalist
Drawing Tools
There’s a reason you’re being
diverted to Illustrator or
Photoshop for your artwork
Catalyst has the drawing
tools of an iPod App But it
does a super job of
import-ing artwork from Illustrator
and Photoshop, and if you
have to edit the artwork, it’s
easy to “round-trip”—that is,
edit the artwork in the
origi-nal application, and then
place the edited version
back in Catalyst
Illustrator—A
Good Fit
Illustrator’s vector-based
artwork integrates more
smoothly with Flash
Cata-lyst’s (and Flash’s)
vector-based logic Illustrator
artwork tends to scale (resize)
better, without distortion,
and minimize file size
Copying and Pasting
Works, Too!
You can copy selected
art-work from Illustrator and
Photoshop into Catalyst, and
preserve appearance and/or
editability with the same
options as if you opened an
Illustrator or Photoshop file
in Catalyst
Trang 9#76: Opening and Editing Artwork from Illustrator or Photoshop
4 The artwork appears on the Catalyst artboard As I noted in the
intro-duction to this chapter, you’ll find only the barest set of editing tools
in Catalyst—that’s not its job If you want to edit the artwork, select it
(using Catalyst’s Selection tool), and choose Modify > Edit In Adobe
Illustrator CS5 (or Adobe Photoshop CS5, depending on the origin of
the file) (Figure 76a).
Figure 76a Sending artwork from Catalyst back to Illustrator for editing.
5 When you edit the artwork in Illustrator or Photoshop, a message
appears in a bar at the top of the screen indicating that you are
edit-ing from Adobe Flash Catalyst Click the Done link when you are done
editing the artwork to return to Catalyst, bringing your edited artwork
with you (Figure 76b).
Figure 76b Editing Flash Catalyst artwork in Illustrator.
Image Quality vs Editability
When you import artwork from Photoshop or Illustra-tor into Catalyst, the import options generally provide choices between preserv-ing the greatest (truest) art-work quality, or preserving more editability If you select the default options (which protect quality but not edit-ability), for example, you will not be able to edit text back in Illustrator or Pho-toshop when you edit the artwork You might end up experimenting with differ-ent import options to deter-mine which one sufficiently preserves the appearance
of the artwork, which is— generally—the bottom line
(continued on next page)
Trang 106 When you click the Done link, you’ll again be prompted to define how
your artwork will be exported back into Catalyst—this time with the FXG Options dialog Again, all the various options essentially offer you
a trade-off between preserving editability (of text, effects, and so on)
of elements not supported in Catalyst, or preserving the artwork as faithfully as possible and in the process losing some editability in the source application After you set the conversion settings and click OK, the FXG Save Warnings dialog appears, alerting you to any changes made to your file
One at a Time
Flash Catalyst documents
can be more than one page;
you can have only one
Cata-lyst project open at any time
Limits on Support
for Effects
When you open an
Illus-trator or Photoshop file in
Flash Catalyst, not all effects
are supported Why not?
Because only effects that
“play” in the Flash Player will
work when viewed in the
Flash Player
Trang 11#77: Wireframing in Catalyst
Wireframing in Catalyst
Wireframing is the process of designing a rough, or sometimes a detailed
prototype or sketch of a planned Web page Although Catalyst’s
draw-ing features are limited, they do include basic icons and tools needed to
sketch out a Web page, into which you can add interactive objects (like
forms or buttons) before sending it to a Flash programmer or a
Dream-weaver Web designer (which might be you!)
To sketch a prototype of a page in Catalyst, choose File > New Project
In the New Project dialog, enter a name for your project, and enter the
dimensions of the Web page you are prototyping in the Width and
Height boxes You can choose a background color from the Color swatch
(Figure 77a); then click OK to generate a blank document.
Figure 77a Defining a new document
for wireframing.
Use File > Import to add images (PNG, JPEG, or GIF), video (FLV or FV4),
sound (MP3), Flash (SWF), another Catalyst file (FXG), or Illustrator or
Pho-toshop artwork to your wireframe
Use Catalyst’s Select tool (or Direct Select, available from the toolbar at
the top of the panel) to select or resize objects using the bounding box
Hold down the Shift key as you do to retain height-to-width ratio and to
avoid distorting the objects
Draw shapes with the Shapes tools Control-click (Mac) or right-click
(Windows) on objects to align or arrange them
What Can You Wireframe?
While Catalyst’s drawing tools are limited, you can insert form fields and scroll-bars, add formatted text, and draw shapes This set of wireframe symbols matches Catalyst’s set of actions (see #79, “Assigning Actions,” for an exploration of actions)—thus allowing
a designer to prototype
an interactive page that
is all set for a coder to bring to life
Resize Artwork First
Catalyst can only import images up to 2048 x 2048 pixels, so resize large pho-
tos and artwork before you
import them into Catalyst
Trang 12Use Catalyst’s Transform tool to rotate selected objects (Figure 77b).
Figure 77b Wireframing and rotating an object with the Transform tool.
In addition to placing artwork and media on the artboard, a set of framing icons and objects is available in the Wireframe Components tab
wire-of the top panel in the panel bar to the right wire-of the artboard Click and
drag to pull any of those components onto your wireframe (Figure 77c).
Figure 77c Adding a vertical scrollbar to a wireframe.
To share the wireframe, save it as a SWF file (see #83, “Exporting lyst Projects to SWF”)
Cata-Catalyst Wireframes
Can Be Interactive
Sure, you can wireframe
in any program
(Illustra-tor, Photoshop, a Sharpie
on the back of a napkin…)
But wireframes created in
Catalyst can have some (not
complete) interactivity—
buttons that change when
clicked, links that work, and
elements like video play
but-tons and working scrollbars
Editing Wireframe
Icons and Objects
Use the Select and
Trans-form tools to move, resize, or
rotate the placed wireframe
objects Use the Text tool to
add last-minute or prototype
text, and use the Shapes
tools to add simple artwork
to the wireframe
Trang 13#78: Creating a Four-State Button
Four-state buttons—buttons that display differently in normal, hovered,
clicked, and active states (or some variation of those)—add
interactiv-ity and dynamism to Web pages Designing a four-state button is easy in
Flash Catalyst, as long as you create the artwork in Illustrator or
Photo-shop first But wait! Before you expend the energy creating four buttons
(one for each state), hit the pause button You only need one button from
Photoshop or Illustrator
If you’ve got a button ready as an Illustrator or Photoshop file, follow
these steps to use effects in Catalyst to generate four “looks” for the
button:
1 Create a Catalyst file based on a button you designed and saved as an
Illustrator or Photoshop file (see #76, “Opening and Editing Artwork
from Illustrator or Photoshop”)
2 Double-click on the button artwork from Illustrator (or Photoshop),
and assign Button from Catalyst’s Convert Artwork to Component
pop-up (Figure 78a).
Figure 78a Converting artwork to a button.
3 As soon as you convert the artwork to a button, the Convert Artwork to
Component pop-up menu presents four button states (up, over, down,
or disabled) Click on any of them to open the selected button state
in the artboard (all four button states now display at the top of the
screen, and you can switch to any of them by clicking on one)
Creating a Four-State Button
(continued on next page)
Trang 144 You can use the (admittedly limited) set of graphic filters in Catalyst
to modify the up, over, down, and disabled states of a button, ing from Blur, Drop Shadow, Inner Shadow, Bevel, Glow, or Inner Glow effects available from the Filters section of the Properties panel—part
choos-of the panel bar to the right choos-of the artboard (Figure 78b).
Figure 78b Applying filters to a button state selection.