Foundation Fireworks CS4- P1 docx

Grant Hinkson, Craig Erskine, Matt Heerema, Chuck Mallott, Matthew Keefe, Hugh GriffithForeword by Alan Musselmanand contributions by Sarthak Singhal, both of Adobe Systems In this book

Grant Hinkson, Craig Erskine, Matt Heerema, Chuck Mallott, Matthew Keefe, Hugh Griffith

Foreword by Alan Musselmanand contributions by Sarthak Singhal,

both of Adobe Systems

In this book you’ll learn:

How to take web projects from prototype to implementation using nothing

but Fireworks

How best to integrate Fireworks into an enterprise web development environment

How to use all of the Fireworks tools to be more productive without sacrificing

your creativity

How to use Fireworks alongside the rest of the Adobe Creative Suite

How designers and developers can use Fireworks as a bridge between

their respective disciplines

Foundation Fireworks CS4

Are you a designer looking for a new and quicker way to prototype and create for

the Web? Or are you perhaps a web developer who finds most design tools to be

overly complex for what you need to get done? In either case, productivity is key, and

Fireworks is Adobe’s Creative Suite web productivity tool of choice So even if you’re

an experienced Fireworks pro who wants to keep up to date on the latest additions to

Creative Suite 4, Foundation Fireworks CS4 will show you how to get the most out of

Fireworks so that you maximize your efficiency without sacrificing any creativity

or power

You’ll learn how to use the unique collection of Fireworks vector- and pixel-based

tools Improved integration with Illustrator and smarter Photoshop file support

are fully covered, as is the new workspace featuring tabbed documents Even

more importantly, the book discusses the complete Fireworks workflow, from idea

generation to standards-complete HTML export with CSS layouts Maximize your

efficiency by creating prototypes in Fireworks, importing assets from any of the

applications in Adobe’s Creative Suite, and exporting for finished production

to Dreamweaver

Foundation Firework CS4 includes several real-world case studies, including creating

a blog, building CSS sprites, and assembling a web commerce site Advanced coverage

includes using Fireworks to turn Rich Internet Applications into desktop apps with

Adobe AIR Fireworks CS4 is a complete design and development environment,

and Foundation Firework CS4 is the first book to cover the full spectrum of this

application’s abilities this thoroughly

Make full use of Fireworks CS4’s powerful tools

to take ideas from prototype to the Web Improve your workflow by integrating Fireworks CS4

with the entire Adobe Creative Suite Combine creative design and practical development techniques

SHELVInG CatEGorY

1 wEb dESIGn

uS $39.99 Mac/PC compatible

download source files from:

Foundation Fireworks CS4

Grant Hinkson, Craig Erskine, Matt Heerema, Chuck Mallott,

Matthew Keefe, Hugh Griffith

Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann,

Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft,

Matt Wade, Tom Welsh

Cover Image Designer

Corné van Dooren

Interior and Cover Designer

copyright owner and the publisher.

ISBN-13 (pbk): 978-1-4302-1618-6 ISBN-13 (electronic): 978-1-4302-1619-3 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name,

we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the

trademark.

Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705

Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit www.apress.com.

Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use eBook versions and licenses are also available for most titles For more information, reference our Special Bulk Sales–eBook Licensing web page at

http://www.apress.com/info/bulksales.

The information in this book is distributed on an “as is” basis, without warranty Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or

damage caused or alleged to be caused directly or indirectly by the information contained in this work.

The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.

Credits

iv

Foreword xiv

About the Authors xv

About the Technical Reviewer xvii

About the Cover Image Designer xviii

Layout Conventions xix

PART ONE LEARNING FIREWORKS 1

Chapter 1 Welcome to Fireworks 3

Chapter 2 Fireworks and CS4 Integration 17

Chapter 3 Working with Bitmaps 31

Chapter 4 Working with Vectors 49

Chapter 5 Exporting from Fireworks to the Web 75

PART TWO USING FIREWORKS 99

Chapter 6 Creating Visual Effects 101

Chapter 7 The Ins and Outs of Animation 129

Chapter 8 Skinning Flex Components with Fireworks 143

Chapter 9 Creating Adobe Air Prototypes 155

Chapter 10 Fireworks Extensions 175

Chapter 11 Extending Fireworks: Developing an Effective Workflow Using Javascript and Flash 189

PART THREE FIREWORKS IN ACTION 225

Chapter 12 Web Site Case Study #1: Blog 227

Chapter 13 Web Site Case Study #2: CSS Sprites 245

Chapter 14 Web Site Case Study #3: E- Commerce 255

Index 275

vi

Foreword xiv

About the Authors xv

About the Technical Reviewer xvii

About the Cover Image Designer xviii

Layout Conventions xix

PART ONE LEARNING FIREWORKS 1

Chapter 1 Welcome to Fireworks 3

Fireworks as a web design tool 4

Fireworks as a design and illustration tool 6

Fireworks as a prototyping tool 8

Fireworks and the Creative Suite 10

Photoshop support 11

Illustrator support 12

Flash support 13

Summary 15

Chapter 2 Fireworks and CS4 Integration 17

What is integration? 17

How integration helps 18

Integration within the Creative Suite 18

Integration with Photoshop 19

Importing a Photoshop file 19

Pixel Dimensions 20

Layer Comp 20

Opening a Photoshop file 21

Photoshop Live Effects 22

Working with shapes from Photoshop 24

Importing a PNG into Photoshop 24

Saving as PSD 25

vii

Integration with Illustrator 26

Opening an Illustrator file 26

Scale 27

Width and Height 27

Resolution 27

Anti-Alias 27

File Conversion 27

Render as images 27

Importing an Illustrator (AI) file 28

Integration with Flash 28

Import as a single flattened bitmap 29

Import 29

Into 29

Objects 29

Text 29

Summary 29

Chapter 3 Working with Bitmaps 31

Bitmap layers 32

Bitmap tools 32

Selection tools 33

Common selection techniques 34

Shift key 34

Alt key 34

Arrow tool and arrow keys 34

Live marquee option 34

Marquee tool 34

Lasso tool 35

Magic Wand tool 36

Converting selections to paths and vice versa 37

Drawing tools 38

Pencil tool 38

Brush tool 39

Eraser tool 41

Image adjustment/effects tools 41

Blur and Sharpen tools 41

Dodge and Burn tools 42

Smudge tool 44

Additional retouching tools 44

Rubber Stamp tool 44

Replace Color tool 45

Red Eye Removal tool 46

Summary 47

Chapter 4 Working with Vectors 49

Using the Vector tools 50

Line tool 50

Pen tool 51

Vector Path tool 52

Rectangle tool 53

Text tool 54

Freeform and Reshape Area tools 55

Knife tool 56

Using the Paths panel 56

Combining paths 58

Altering paths 61

Selecting points on a line or path 67

Editing points 68

Summary 73

Chapter 5 Exporting from Fireworks to the Web 75

File optimization: The tools 75

Slice tool 76

Hotspot tool 76

Image optimization 77

Choosing the right file type 78

Compression and color settings 79

Palette index 80

Loss 80

Matte 80

Colors 81

The color table 81

Dither 81

Transparency 81

JPEG compression options 82

Side-by-side comparison 84

Using the Export command 85

The Export dialog 85

Exporting to Adobe PDF 86

Images only 87

Dreamweaver Library (.lbi) 89

HTML and Images\CSS and Images (.htm)\Director (.htm) 89

Using the Export Wizard 91

The Preview window 94

Summary 96

ix

PART TWO USING FIREWORKS 99

Chapter 6 Creating Visual Effects 101

Building blocks 102

Gradient fills 102

Selecting a gradient type 102

Editing gradient nodes 102

Adjusting the gradient direction 103

Advanced gradient editing 104

Texture fills 105

Blend modes 106

Filters 107

Why use filters? 107

Applying filters 107

Styles 109

Creating popular effects 110

Creating glass buttons 110

Creating reflections 113

Creating web headers 115

Finding the right color palette 116

Creating the thick diagonal background texture 116

Defining the container rectangle 116

Defining the primary rectangle 117

Adding texture to the primary rectangle 117

Adding a highlight border 118

Adding text elements 119

Adding foreground glass 121

Adding “magic” 121

Summary 127

Chapter 7 The Ins and Outs of Animation 129

The States panel 129

Quick onion skinning 130

State position and name 130

State delay 130

Quick glance 130

Onion skinning options 131

GIF animation looping 131

Distribute to states 132

New/Duplicate state 132

Delete state 132

Building an animation 132

Manipulating objects 134

Fading around the circle 134

Creating the animation frames 135

Previewing the results 136

Morphing an animation 136

Preparing the document 136

Making some shapes 137

Applying a morph effect 137

Separating the groups 137

Creating the animation states 138

Duplicating and reversing states 138

Exporting animations for the Web 139

GIF animations 139

Flash (SWF) animations 140

Summary 141

Chapter 8 Skinning Flex Components with Fireworks 143

Creating a new Flex skin in Fireworks 144

Reskinning the button 146

Exporting the skin 147

Importing the skin in Flex 148

Creating a new Flex project 148

Adding a Button component 149

Importing the skin images 149

Modifying the nine- slice scaling 152

Summary 153

Chapter 9 Creating Adobe Air Prototypes 155

Designing the master page 157

Defining the background 157

Defining the content container 158

Adding the tabs 158

Adding the application title 160

Designing the information page 160

Designing the gallery page 161

Creating the thumbnail symbol 161

Building the portfolio detail pages 163

Duplicating the pages and finalizing page names 164

Adding hotspots and interaction 165

Global navigation 165

Creating the hotspots 165

Adding interactivity 165

Defining links on the gallery page 166

Creating the Adobe AIR package 166

Packaging content 168

Creating a digital signature 168

Previewing the AIR file 171

Creating and installing the AIR file 171

Summary 172

xi

Chapter 10 Fireworks Extensions 175

Types of extensions 176

Command and command panel extension types 176

Other extension types 177

Default Fireworks commands 178

Modifying objects 178

Modifying the document/interface 180

Finding extensions online 182

Browsing Adobe Exchange: A repository of extensions 182

Additional extension resources 184

Community sites 184

Personal sites 184

Using the Extension Manager 185

Installing new extensions 186

Disabling an extension 186

Uninstalling an extension 187

Summary 187

Chapter 11 Extending Fireworks: Developing an Effective Workflow Using Javascript and Flash 189

Foundation terminology 190

Learning the basics of an advanced workflow 190

Defining a Fireworks workflow 191

Step 1: Creating a simple JSF command 191

Using the History panel to create a command 192

What just happened? 192

Where is the command stored? 193

Editing and understanding the JSF 194

Step 2: Creating a Flash UI 195

Creating a document and adding a button 195

Steps 3 and 4: Importing and executing the JSF 196

Adding the Mouse.onRelease event handler 198

Step 5: Publishing and testing the SWF 198

Building a functional UI in Flash 199

Draw Rect.jsf updated with the CreateRectangle function 199

Working with returned values: Adding a ColorPicker 202

Streamlining your workflow with the Fireworks developer toolbox 204

Converting JSF to AS using the FDT 205

Updating the Draw Rect panel 207

Defining Flash panel resize behavior 207

Responding to Fireworks events 210

Detecting change of selection 210

Detecting tool changes 211

Building panels with ActionScript 3 211

Creating ActionScript 3 panels in Flash 212

Responding to Fireworks events in ActionScript 3 214

Creating ActionScript 3 panels in Flex 215

Packaging and deploying your panel 219

Learning the Fireworks object model 221

The Extending Fireworks documentation 221

The History panel method 221

The FWAPI_Inspector panel 221

Summary 223

PART THREE FIREWORKS IN ACTION 225

Chapter 12 Web Site Case Study #1: Blog 227

Phase 1: Project planning and preparation 228

Project details example 228

Phase 2: Exploring layouts with wireframes 229

Wireframe example 229

Phase 3: Turning wireframes into gray frames 233

Gray frame example 233

Phase 4: Creating a logo for the design 236

Logo example 237

Phase 5: Putting all the pieces together: The design composition 237

Design example 238

Phase 6: Build- out: From graphics to code 241

Phase 7: Integrating into a CMS 242

Summary 242

Chapter 13 Web Site Case Study #2: CSS Sprites 245

Creating site navigation with sprites 246

Preparing a new page 246

Writing the HTML 247

Writing the CSS 248

List reset 250

Extreme negative text indent 251

Defining the dimensions 251

Sliding the background into position 252

Summary 253

Chapter 14 Web Site Case Study #3: E- Commerce 255

Checking out with shared layers and pages 255

Setting up the workspace 256

Designing the site’s background 256

Creating a header 256

Defining the page body 256

Establishing the site’s navigation 256

Organizing the document’s objects and layers 258

Organizing the site design into pages 258

xiii

Building all the graphics in Fireworks 259

Creating the logo 259

Defining the logo’s basic shape and color 259

Adding some detail and dimension 260

Polishing it up 260

Drawing a T- shirt graphic 261

Making a button 262

Assembling the pages 263

Building the Store page 264

Using symbols for efficient workflow 266

Creating the Cart page 268

Making the Checkout page 268

Building the Confirmation page 271

Summary 272

Index 275