Foundation Fireworks CS4

Title Page

Copyright Page

CONTENTS AT A GLANCE

Table of Contents

FOREWORD

ABOUT THE AUTHORS

ABOUT THE TECHNICAL REVIEWER

ABOUT THE COVER IMAGE DESIGNER

LAYOUT CONVENTIONS

Part 1 LEARNING FIREWORKS

Chapter 1 WELCOME TO FIREWORKS

Fireworks as a web design tool

Fireworks as a design and illustration tool

Fireworks as a prototyping tool

Fireworks and the Creative Suite

Photoshop support

Illustrator support

Flash support

Summary

Chapter 2 FIREWORKS AND CS4 INTEGRATION

What is integration?

How integration helps

Integration within the Creative Suite

Integration with Photoshop

Importing a Photoshop file

Pixel Dimensions

Layer Comp

Opening a Photoshop file

Photoshop Live Effects

Working with shapes from Photoshop

Importing a PNG into Photoshop

Saving as PSD

Integration with Illustrator

Opening an Illustrator file

Scale

Width and Height

Resolution

Anti-Alias

File Conversion

Render as images

Importing an Illustrator (AI) file

Integration with Flash

Import as a single flattened bitmap

Import

Into

Objects

Text

Summary

Chapter 3 WORKING WITH BITMAPS

Bitmap layers

Bitmap tools

Selection tools

Common selection techniques

Shift key

Alt key

Arrow tool and arrow keys

Live marquee option

Marquee tool

Lasso tool

Magic Wand tool

Converting selections to paths and vice versa

Drawing tools

Pencil tool

Brush tool

Eraser tool

Image adjustment/effects tools

Blur and Sharpen tools

Dodge and Burn tools

Smudge tool

Additional retouching tools

Rubber Stamp tool

Replace Color tool

Red Eye Removal tool

Summary

Chapter 4 WORKING WITH VECTORS

Using the Vector tools

Line tool

Pen tool

Vector Path tool

Rectangle tool

Text tool

Freeform and Reshape Area tools

Knife tool

Using the Paths panel

Combining paths

Altering paths

Selecting points on a line or path

Editing points

Summary

Chapter 5 EXPORTING FROM FIREWORKS TO THE WEB

File optimization: The tools

Slice tool

Hotspot tool

Image optimization

Choosing the right file type

Compression and color settings

Palette index

Loss

Matte

Colors

The color table

Dither

Transparency

JPEG compression options

Quality

Selective quality

Smoothing and sharpening

Side-by-side comparison

Using the Export command

The Export dialog

Exporting to Adobe PDF

Images only

Selected Slices Only

Include Areas without slices

Current State Only

Current Page Only

Dreamweaver Library (.lbi)

HTML and ImagesCSS and Images (.htm)Director (.htm)

Using the Export Wizard

The Preview window

Summary

Part 2 USING FIREWORKS

Chapter 6 CREATING VISUAL EFFECTS

Building blocks

Gradient fills

Selecting a gradient type

Editing gradient nodes

Adjusting the gradient direction

Advanced gradient editing

Texture fills

Blend modes

Filters

Why use filters?

Applying filters

Styles

Creating popular effects

Creating glass buttons

Creating reflections

Creating web headers

Finding the right color palette

Creating the thick diagonal background texture

Defining the container rectangle

Defining the primary rectangle

Adding texture to the primary rectangle

Adding a highlight border

Adding text elements

Adding foreground glass

Adding “magic”

Summary

Chapter 7 THE INS AND OUTS OF ANIMATION

The States panel

Quick onion skinning

State position and name

State delay

Quick glance

Onion skinning options

GIF animation looping

Distribute to states

New/Duplicate state

Delete state

Building an animation

Manipulating objects

Fading around the circle

Creating the animation frames

Previewing the results

Morphing an animation

Preparing the document

Making some shapes

Applying a morph effect

Separating the groups

Creating the animation states

Duplicating and reversing states

Exporting animations for the Web

GIF animations

Flash (SWF) animations

Summary

Chapter 8 SKINNING FLEX COMPONENTSWITH FIREWORKS

Creating a new Flex skin in Fireworks

Reskinning the button

Exporting the skin

Importing the skin in Flex

Creating a new Flex project

Adding a Button component

Importing the skin images

Modifying the nine- slice scaling

Summary

Chapter 9 CREATING ADOBE AIR PROTOTYPES

Designing the master page

Defining the background

Defining the content container

Adding the tabs

Adding the application title

Designing the information page

Designing the gallery page

Creating the thumbnail symbol

Building the portfolio detail pages

Duplicating the pages and finalizing page names

Adding hotspots and interaction

Global navigation

Creating the hotspots

Adding interactivity

Defining links on the gallery page

Creating the Adobe AIR package

Packaging content

Creating a digital signature

Previewing the AIR file

Creating and installing the AIR file

Summary

Chapter 10 FIREWORKS EXTENSIONS

Types of extensions

Command and command panel extension types

Other extension types

Default Fireworks commands

Modifying objects

Modifying the document/interface

Finding extensions online

Browsing Adobe Exchange: A repository of extensions

Additional extension resources

Community sites

Personal sites

Using the Extension Manager

Installing new extensions

Disabling an extension

Uninstalling an extension

Summary

Chapter 11 EXTENDING FIREWORKS: DEVELOPING AN EFFECTIVE WORKFLOW USING JAVASCRIPT AND FLASH

Foundation terminology

Learning the basics of an advanced workflow

Defining a Fireworks workflow

Step 1: Creating a simple JSF command

Using the History panel to create a command

What just happened?

Where is the command stored?

Editing and understanding the JSF

Step 2: Creating a Flash UI

Creating a document and adding a button

Steps 3 and 4: Importing and executing the JSF

Adding the Mouse.onRelease event handler

Step 5: Publishing and testing the SWF

Building a functional UI in Flash

Draw Rect.jsf updated with the CreateRectangle function

Working with returned values: Adding a ColorPicker

Streamlining your workflow with the Fireworks developer toolbox

Converting JSF to AS using the FDT

Updating the Draw Rect panel

Defining Flash panel resize behavior

Responding to Fireworks events

Detecting change of selection

Detecting tool changes

Building panels with ActionScript 3

Creating ActionScript 3 panels in Flash

Responding to Fireworks events in ActionScript 3

Creating ActionScript 3 panels in Flex

Packaging and deploying your panel

Learning the Fireworks object model

The Extending Fireworks documentation

The History panel method

The FWAPI_Inspector panel

Summary

Part 3 FIREWORKS IN ACTION

Chapter 12 WEB SITE CASE STUDY #1: BLOG

Phase 1: Project planning and preparation

Project details example

Phase 2: Exploring layouts with wireframes

Wireframe example

Phase 3: Turning wireframes into gray frames

Gray frame example

Phase 4: Creating a logo for the design

Logo example

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

Design example

Phase 6: Build- out: From graphics to code

Phase 7: Integrating into a CMS

Summary

Chapter 13 WEB SITE CASE STUDY #2: CSS SPRITES

Creating site navigation with sprites

Preparing a new page

Writing the HTML

Writing the CSS

List reset

Extreme negative text indent

Defining the dimensions

Sliding the background into position

Summary

Chapter 14 WEB SITE CASE STUDY #3: E- COMMERCE

Checking out with shared layers and pages

Setting up the workspace

Designing the site’s background

Creating a header

Defining the page body

Establishing the site’s navigation

Organizing the document’s objects and layers

Organizing the site design into pages

Building all the graphics in Fireworks

Creating the logo

Defining the logo’s basic shape and color

Adding some detail and dimension

Polishing it up

Drawing a T- shirt graphic

Making a button

Assembling the pages

Building the Store page

Using symbols for efficient workflow

Creating the Cart page

Making the Checkout page

Building the Confirmation page

Summary

INDEX