Initial content, in Create AIR Package dialog, 168 init method, defined in CDATA section of , 216 Inset/Expand paths command, in Alter Paths section, 63 installing, new extensions, 186 i
Trang 1Initial content, in Create AIR Package
dialog, 168
init method, defined in CDATA section of
<mx:Script />, 216
Inset/Expand paths command, in Alter
Paths section, 63
installing, new extensions, 186
integration
defined, 17–18
how it helps design process, 18
within the Creative Suite, 18
Intersect Paths command, in Paths panel,
59
Into option, in Import Fireworks
Docu-ment dialog, 29
Invert Gradients command, in Alter Paths
section, 64
Invert Paths command, in Alter Paths
section, 64
J
JavaScript and Flash, developing an
ef-fective workflow using, 189–223
Join Paths command, in Paths panel, 58
Join Points command, in Edit Points
section, 72
JPEG compression options, in Optimize
panel, 82–84
JPEG images, smoothing and
sharpen-ing, 83
JPEG (Joint Photographic Experts Group)
format, for use in Fireworks, 78
JPEG or GIF preview mode, 94
.jsf extension, 190
JSF (JavaScript Fireworks), 190
creating a simple command, 191–195
editing and understanding, 194–195
importing and executing, 196
K
Knife on Points command, in Edit Points
section, 72
Knife tool, in Vector tools section of
Tools palette, 56
L
Lasso tool, 32
creating free-form selections with, 35
image of selection, 33
settings, 35
layer comps, creating in Photoshop,
20–21
Layers panel bitmap object in, 32 Flex skin, 145 Line tool, in Vector tools section of Tools palette, 50–51
links, defining on Gallery page, 166 List reset, 250
Live Filters concept, pioneered by Fireworks, 107
live marquee option, as selection technique, 34
loading spinner building an Ajax-style, 136 creating the animation frames, 135–136
fading around the circle, 134 manipulating objects in, 134 previewing the results, 136 logo
adding some detail and dimension
to, 260 creating, 259–260 defining basic shape and color of, 259 polishing up, 260
logo example, creating in Fireworks, 237 Lorem Ipsum command, generating filler text with, 161
Lorem Ipsum panel on Fireworks Ex-change, Mayur Mundada’s, 161 Lossy compression option, in Fireworks optimization, 80
M
Magic Wand tool, 33, 36–37 Tolerance settings, 36 main title, creating for web headers, 119–120
Make Handles Same Length command,
in Edit Points section, 72 Make Handles Tangent command, in Edit Points section, 72
Markup Factory, web site address, 242 Marquee tool, 34–35
automatically selecting, 35 list of settings, 35 master page adding application title to, 160 adding tabs to, 158
adding your logo to, 238 designing content container for, 158 designing for AIR application, 157 designing the background, 157 for blog web site, 229
playing with background patterns and graphics in, 238
Matte option, in Fireworks optimization, 80
Milbourne, Paul, et al, The Essential
Guide to Flash CS4 with Action-Script by, 29
Mirror Points command, in Edit Points section, 69
MMExecute() method, 191 passing JSF to Fireworks via, 196
Moll, Cameron, CSS Mastery Advanced
Web Standards Solutions by, 241 MonkCMS, web site address, 242 morphing
an animation, 136–139 creating the animation states, 138 making some shapes for, 137 preparing the document, 136 separating the groups, 137 shapes on your canvas, 137 ungrouped objects in animation, 138 Mouse.onRelease event handler, adding, 198
Move Points command, in Edit Points section, 69
MovieClips, managing with Alignment-Manager, 209–210
multistate editing, changing, 130 Mundada, Mayur, Lorem Ipsum panel on Fireworks Exchange, 161
<mx:Application> tag, of DrawRect mxml, 215–216
<mx:Script />, init method defined in, 216
N
Name field, in Create AIR Package dialog, 167
navigation image, nav.png, 247 navigation page, Export window for, 247 nav.png
defining the dimensions of back-ground bitmap, 251 navigation image, 247 New Flex Skin, autogenerated layout, 144 New Flex Skin dialog, 144
New/Duplicate States button, in States panel, 132
nine-slice scaling, modifying in Flex project, 152
NumericStepper component creating four instances of, 200 setting values via Component inspec-tor, 201
Trang 2INDEX
280
O
objects
manipulating in animation, 134
ungrouping, 259
objects and layers, organizing for
docu-ments, 258
Objects option, in Import Fireworks
Document dialog, 29
Offset Points command, in Edit Points
section, 71
onFwActiveSelectionChange event, 210
onFwActiveSelectionChange function,
ActionScript defining, 210
onFwActiveToolChange event, 211
onFwStartMovie event, 211
onFwStopMovie event, 211
onion skinning
options, 131
quickly in States panel, 130
onRelease event, adding event handler
to a button, 198
Open/Close Paths command, in Alter
Paths section, 65
Optimize panel
JPEG compression options in, 82–84
selecting Sharpen JPEG edges in, 83
Oval Marquee tool, 34
P
package, defining along with DrawRect
class, 213
page body, defining, 256
page concept, in Fireworks, 4
pages
assembling, 263–271
organizing site design into, 258–259
Pages panel
preparing new page in, 246–247
setting master page in, 229
with four added pages, 258
palette index, options available for color
palettes via, 80
panels
building with ActionScript, 211–218
packaging and deploying, 219–220
paths
altering, 61–66
combining, 58–61
created from a selection, 37
defining initial for web headers, 123
with particle effects for web headers,
124
Paths panel categories organized in, 57 commands in Combine Paths section, 58–61
using in vector graphics, 56–57 Pencil tool, 38–39
Pen tool curved vector object drawn with, 52
in Tools palette, 51–52 Photoshop
creating a new PSD in with Rectangle tool, 24
Fireworks integration with, 19–25 importing a file in Fireworks, 19–21 importing a PNG file into, 24–25 support in Fireworks, 11–12 working with shapes from, 24
Photoshop CS4 See Photoshop
Photoshop Export Options dialog, 12, 25 Photoshop File Import Options dialog, in Fireworks CS4, 19
Photoshop File Open Options dialog, 11
in Fireworks CS4, 21 Photoshop file (PSD), opening in Fire-works, 21–22
Photoshop Live Effects, 22–25 dialog box, 23
Photoshop PSD file, saving file as, 12 PICT format, available in Fireworks, 79 Pixel Dimensions section, in Photoshop File Import Options dialog, 20 Plastic styles, selecting from combo box, 147
plug-ins See filters (or plug-ins)
PNG file, importing into Photoshop, 24–25 PNG (Portable Network Graphic) format, available for use in Fireworks, 78 points
editing, 68–73 selecting on a line or path, 67 Polygon Hotspot tool, drawing header-drag-area hotspot with, 165 Polygon Lasso tool, 32
Polygon Slice tool, 76 portfolio detail pages applying Hue/Saturation filter to, 164 building, 163–164
duplicating and finalizing page names, 164
portfolio viewer application, creating simple mockup of, 156 Prefer native filters over Photoshop Live Effects option, in Photoshop File Open Options dialog, 21
preview window, reviewing file settings recommendations in, 94 primary rectangle, defining for web headers, 117
Property inspector, when Rubber Stamp tool is active, 32
Punch Paths command, in Paths panel, 59
QR
RadioButton symbol, setting properties for, 9
Rectangle Hotspot tool, drawing hotspots on navigation buttons with, 165 Rectangle tool, 4
creating a new PSD in Photoshop with, 24
creating a single rectangle with, 133
in Vector tools section of Tools pal-ette, 53
Rectangle type, properties included in, 194
Red Eye removal tool, 46 reflection effects creating, 113–115 final reflection of glass button, 114 reflection object
adding linear gradient opacity mask to flipped, 113
flipping, 113 Render as images option, in Vector File Options dialog, 27–28
Replace color tool, 45–46 Resize Selected Objects command, 178 Resize Selected Objects dialog, 180 Resolution setting, in Vector File Options dialog, 27
retouching tools, additional, 44–46 returned values, working with, 202–204 Rotate Points command, in Edit Points section, 69
roundness argument, for addNewRectan-glePrimitive method, 194 Round Points to Pixels/Round Points
to Half-Pixels command, in Edit Points section, 69
Rubber Stamp tool active in Property inspector, 32 fixing blemishes on photographs with, 44
settings, 44 using to remove areas of an image, 45
Trang 3text elements, adding to web headers, 119–120
text indent, extreme negative, 251 Text option, in Import Fireworks Docu-ment dialog, 29
Text Properties panel, 54 Text tool, in Vector tools section of Tools palette, 54–55
texture fills, 105
The Essential Guide to Flash CS4 with ActionScript, by Paul Milbourne,
et al., 29 thumbnail symbol adding a shadow or color to, 162 adding highlights to, 161 converting thumbnail elements to, 163 creating for AIR application, 161–163 gradient handle positions for, 161 TIFF (Tagged Image File Format) available for use in Fireworks, 78 preview window, 95
Tolerance property, added to Magic Wand tool, 36
Tools palette, Vector tools section of, 50 Tools panel, bitmap tools housed in, 32–33
Transparency property, in image optimi-zation, 81
Trim Paths command, in Paths panel, 61 T-shirt graphic, drawing, 261
Twist and Fade command dialog, 176
U
Uniform color palette, available in palette index, 80
Uninstall extension confirmation dialog, 187
Union Paths command, in Paths panel, 59 unordered list reset, with no bullets or indentation, 250
V
Vector File Options dialog, 12 settings in, 26–28
vector graphics, working with, 49–73 Vector Path tool
in Vector tools section of Tools pal-ette, 52
random line drawn with, 52 Vector tools, using, 50–56 Version field, in Create AIR Package dialog, 167
visual effects, creating, 101
Slices select box, deciding how you want slices treated in, 89
Slice tool, 4
in Fireworks, 76
vs Hotspot tool, 76 Smart Polygon tool, using, 259 Smith, Nathan, 960.gs templates by, 233 Smoothing setting, for JPEG images, 83 Smooth Points command, in Edit Points section, 68
Smudge tool, 44 Specific components radio button, for skinning a specific component, 145
Split Paths command, in Paths panel, 58 sprites, creating site navigation with, 246 sprite sheet, example of, 245
state delay, between states when anima-tion is playing, 130
states, duplicating and reversing, 138–139 States panel, 129–132
with options menu open, 129 Store page
building, 264–266 propagating, 266 Straighten Points command, in Edit Points section, 68
styles
in Fireworks CS4, 109–110 reviewing applied in Property inspec-tor, 110
Styles panel, launching, 147 Styles panel, selecting style library in, 109 Subdivide Points command, in Edit Points section, 71
Subselection tool, 6 using in vector graphics, 51 SWF files, 190
keyboard shortcut for publishing, 204 updating Add Rect button event handler, 204
Symbol Properties panel, setting proper-ties on selected control with, 9 symbols
editing, 266 indicating properties of color in slice’s color palette, 81
using for efficient workflow, 266
T
terminology, for developing effective workflow, 190
TextBox method, for importing your JSF, 204–205
S
scaleModel and align properties, basics
in action, 208
Scale Points command, in Edit Points
section, 69
Scale setting, in Vector File Options
dialog, 27
Select All Points command, in Select
Points section, 67
Select Contour command, in Select
Points section, 67
Selected Slices Only option, images-only
Export dialog, 89
Select First Point command, in Select
Points section, 67
Select Inverse Points command, in Select
Points section, 67
selections, converting to paths and vice
versa, 37–38
selection tools, 33–37
selective compression, optimizing JPEG
images with, 82
Select No Points command, in Select
Points section, 67
Select Points section, commands in, 67
Select/Deselect Next/Previous Points
command, in Select Points
sec-tion, 67
Select Top/Right/Bottom/Lefts Points
command, in Select Points
sec-tion, 67
SetColor method, how it works with
Fire-works-returned color value, 203
setFillColor method, 195
shared layers and pages, 255–256
Share Layer to All Pages option on Base
layer, 258
Sharpen JPEG edges, selecting in
Opti-mize panel, 83
Sharpen Points command, in Edit Points
section, 70
Sharpen tool, 41–42
Shift key, as selection technique, 34
Show Preview option, in Photoshop File
Import Options dialog, 20
sight design, example of, 246
Simplify Paths command, in Alter Paths
section, 62
site navigation, creating with sprites, 246
skin
importing in Flex, 148
naming, 145
skin images, importing, 149–152
slices, tips to consider when creating, 76
Trang 4INDEX
282
W
web, exporting animations for, 139–141
Web 216 color palette, available in
pal-ette index, 80
Web Adaptive color palette, available in
palette index, 80
web design tool, Fireworks as, 4–6
web headers
adding, 121, 126
adding foreground glass to, 121
adding highlight border to, 118–119
adding text elements to, 119–120
adding texture to primary rectangle,
117
changing Stroke setting and setting
properties for, 123
color palette, 116
creating in Fireworks, 115–121
creating thick diagonal background
texture, 116
defining primary rectangle, 117
defining the container rectangle, 116
evolving the particle effect, 125
final background texture for, 126
final for My Web Site, 115
final magical layout, 126
finding the right color palette for, 116
Web layer, slices stored in, 4 web-safe color palette, 80 web site addresses Adobe AIR information, 156 Adobe Flex, 147
Adobe trial edition applications, 17 downloads for book, 24
Fireworks Developer Center, 223 Fireworks developer tools, 205 Fireworks Exchange, 161 Fireworks Exchange, 182 FWAPI_Inspector panel, 222 Mac OS X Extension Manager, 185 Markup Factory, 242
MonkCMS, 242 Nathan Smith’s 960.gs templates, 233 starter MXI file, 219
Windows Extension Manager, 185 Web site case study #1
blog, 227–242 building out:from graphics to code, 241–242
creating a logo for the design, 236–237 design composition, 237–241 exploring layouts with wireframes, 229–232
integrating blog into a CMS, 242
project details example, 228 project planning and preparation, 228–232
turning wireframes into gray frames, 233–236
Web site case study #2, CSS Sprites, 245–253
Web site case study #3, e-commerce, 255–272
Weld Points command, in Edit Points section, 73
Width and Height options, in Vector File Options dialog, 27
Windows and Mac OS color palette, available in palette index, 80 Window Size field, in Create AIR Package dialog, 168
Window Style drop-down, in Create AIR Package dialog, 168
wireframes basic showing size and placement of elements, 229
creating for the home page, 231 exploring blog layouts with, 229–232 turning into gray frames, 233–236 workspace, setting up for checkout process, 256–259
Trang 61-59059-543-2 $39.99 [US]
1-59059-593-9 $49.99 [US]
1-59059-304-9 $49.99 [US]
1-59059-581-5 $39.99 [US]
1-59059-518-1 $39.99 [US]
1-59059-355-3 $24.99 [US]
1-59059-614-5 $34.99 [US]
1-59059-651-X $44.99 [US]
1-59059-409-6 $39.99 [US]
1-59059-558-0 $49.99 [US]
1-59059-555-6 $44.99 [US]
1-59059-517-3 $39.99 [US]
1-59059-554-8 $24.99 [US]
1-59059-748-6 $49.99 [US] 1-59059-314-6 $59.99 [US]
1-59059-381-2 $34.99 [US]
1-59059-542-4 $36.99 [US]
1-59059-619-6 $44.99 [US]
1-59059-315-4 $59.99 [US]
1-59059-533-5 $34.99 [US]
EXPERIENCE THE
DESIGNER TO DESIGNER™
DIFFERENCE
1-59059-638-2 $49.99 [US] 1-59059-765-6 $34.99 [US]
1-59059-594-7 $39.99 [US]
foEDGalleryBOB_CMYK-75x9.qxd 4/23/07 4:46 PM Page 1