Home » Adobe Manuals » Computer Software » Adobe 38039927 » Manual Viewer

Adobe 38039927 User Guide - Page 225

Creating Buttons and Pop-up, Menus

UPC - 883919091389

Add to My Manuals
Save this manual to your list of manuals

Page 225 highlights

220 Chapter 12: Creating Buttons and Pop-up Menus In Fireworks you can create a variety of JavaScript buttons and Cascading Style Sheet (CSS) or JavaScript pop-up menus, even if you know nothing about JavaScript and CSS code. The Fireworks Button Editor leads you through the button-creation process, automating many button-making tasks. The result is a convenient button symbol. After you've created a button symbol, you can easily create instances of the symbol to make a navigation bar, or nav bar. Fireworks also has a Pop-up Menu Editor, which allows you to quickly and easily create vertical or horizontal popup menus. The Advanced tab of the Pop-up Menu Editor gives you creative control over cell spacing and padding, text indention, cell borders, and other properties. When you export a button or pop-up menu, Fireworks automatically generates the CSS code or JavaScript necessary to display it in a web browser. In Adobe Dreamweaver, you can easily insert CSS code, JavaScript, and HTML code from Fireworks into your web pages, or you can cut and paste the code into any HTML or CSS file. This chapter contains the following topics: • "Creating button symbols" on page 220 • "Creating navigation bars" on page 228 • "Creating pop-up menus" on page 229 Creating button symbols Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics: • You can make almost any graphic or text object into a button. • You can create a button from scratch, convert an existing object into a button, or import already created buttons. • A button is a special type of symbol. You can drag instances of it from the symbol library into your document. This allows you to change the graphical appearance of a single button and automatically update the appearance of all button instances in a nav bar. For more information on symbols, see "Using symbols" on page 186. • You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the symbol-instance relationship. • A button instance is encapsulated. When you drag the button instance in the document, Fireworks moves all the components and states associated with it, so there is no need for multiframe editing. • A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the Property inspector. • Like other symbols, buttons have a registration point. The registration point is a center point that helps you align text and the different button states while in the Button Editor.

Section	Page
Contents	3
Chapter 1: Getting Started	6
Installation	6
Requirements	6
Install the software	6
Activate the software	6
Register	7
Read me	7
Viewing the files installed with Fireworks	7
Adobe Help	7
Adobe Help resources	7
Using Help in the product	8
How to choose the right Help documents	9
Resources	9
Adobe Video Workshop	9
Fireworks CS3 videos	10
Extras	10
Bridge Home	11
Adobe Design Center	11
Adobe Developer Center	12
Customer support	12
Downloads	12
Adobe Labs	12
User communities	13
What’s new in Fireworks CS3	13
Chapter 2: Fireworks Basics	17
About working in Fireworks	17
Vector and bitmap objects	17
Interactive graphics	18
About optimizing and exporting graphics	18
About vector and bitmap graphics	18
About vector graphics	19
About bitmap graphics	19
Creating a new document	20
Opening and importing files	21
Opening recently closed documents	21
Opening graphics created in other applications	21
Animated GIFs	22
EPS files	22
PSD files	22
WBMP files	22
Creating Fireworks PNG files from HTML files	22
Inserting objects into a Fireworks document	23
Dragging images into Fireworks	23
Pasting into Fireworks	24
Location of pasted objects	24
Resampling pasted objects	24
Importing PNG files	25
Importing from a digital camera or scanner	25
Saving Fireworks files	27
Saving Fireworks PNG files	27
Saving documents in other formats	28
The Fireworks work environment	29
Using the Start page	29
Using the Tools panel	30
Changing tool options	30
Selecting a tool from a tool group	31
Using the Property inspector	31
Using panels	32
Organizing panel groups and panels	33
Using the panel group or panel Options menu	35
Saving panel layouts	35
About the Quick Export button	36
Opening and moving toolbars (Windows only)	36
Navigating and viewing documents	36
Using document tabs (Windows)	36
Zooming and panning	37
Using view modes to manage the workspace	38
Displaying multiple document views	38
Controlling document redraw	39
Changing the canvas	39
Changing canvas size, color, and resolution	39
About resampling	41
Rotating the canvas	41
Trimming or fitting the canvas	41
Cropping a document	42
Using context menus	42
Using rulers, guides, and the grid	43
Using rulers	43
Using guides	43
Using the grid	44
Using the History panel to undo and repeat multiple actions	45
Chapter 3: Selecting and Transforming Objects	46
Selecting objects	46
Using the Pointer tool	46
Using the Subselection tool	47
Using the Select Behind tool	47
Selection information in the Property inspector	47
Modifying a selection	48
Selecting pixels	49
Bitmap selection tool options	49
Creating pixel selection marquees	50
Plotting points to create a marquee selection	50
Selecting areas of similar color	51
Removing a selection marquee	52
Adjusting selection marquees	52
Moving or adjusting a marquee	52
Adding or subtracting pixels	52
Creating a marquee from intersecting marquees	53
Using thumbnails and modifier keys to modify pixel selections	53
Creating an inverse pixel selection	54
Feathering a pixel selection	54
Expanding or contracting a marquee	54
Selecting an area around an existing marquee	55
Smoothing the border of a marquee	55
Converting a marquee to a path	55
Transferring a marquee selection	55
Saving marquee selections	56
Restoring marquee selections	56
Deleting marquee selections	57
Creating and moving a floating pixel selection	57
Inserting a new bitmap by cutting or copying	58
Editing selected objects	58
Transforming and distorting selected objects and selections	59
Resizing (scaling) objects	60
Rotating objects	60
Flipping objects	61
Skewing objects	61
Distorting objects	62
Transforming objects numerically	62
Viewing transformation information in the Info panel	62
Organizing objects	63
Grouping objects	63
Selecting objects within groups	63
Stacking objects	64
Aligning objects	64
About arranging objects among layers	65
Chapter 4: Working with Bitmaps	66
Working with bitmaps	66
Creating bitmap objects	66
Accessing photo editing tools	68
Drawing, painting, and editing bitmap objects	68
Drawing bitmap objects	68
Painting bitmap objects	69
Sampling a color to use as a stroke or fill color	69
Erasing bitmap objects	70
Feathering pixel selections	70
Retouching bitmaps	71
Cloning pixels	71
Blurring, sharpening, and smudging pixels	72
Lightening and darkening pixels	73
Removing red-eye from photos	73
Replacing colors	74
Cropping a selected bitmap	75
Adjusting bitmap color and tone	76
Adjusting tonal range	77
Evening out highlights, midtones, and shadows	77
Adjusting tonal ranges automatically	78
Correcting colors using Curves	79
Correcting the tonal range using tonal eyedroppers	80
Adjusting brightness and contrast	81
Changing object colors	81
Adjusting hue and saturation	82
Inverting an image’s color values	83
Blurring and sharpening bitmaps	84
Blurring an image	84
Changing a bitmap into a line drawing	85
Converting an image to a transparency	86
Sharpening an image	86
Adding noise to an image	88
Chapter 5: Working with Vector Objects	89
Drawing vector objects	89
Drawing basic lines, rectangles, and ellipses	89
Drawing basic rounded rectangles	90
Drawing basic polygons and stars	90
Drawing Auto Shapes	91
Changing the properties of Auto Shapes	93
Adjusting arrow Auto Shapes	93
Adjusting bent arrow Auto Shapes	94
Adjusting beveled, chamfered, and rounded rectangle Auto Shapes	94
Adjusting connector line Auto Shapes	95
Adjusting doughnut Auto Shapes	95
Adjusting pie Auto Shapes	95
Adjusting L-shaped Auto Shapes	96
Adjusting smart polygon Auto Shapes	96
Adjusting spiral Auto Shapes	96
Adjusting star Auto Shapes	97
Adding Auto Shapes to drawings	97
Adding new Auto Shapes to Fireworks	97
Drawing freeform paths	98
Using the Vector Path tool	98
Drawing paths by plotting points	99
Drawing straight path segments	99
Drawing curved path segments	100
Adjusting the shape of a straight path segment	100
Adjusting the shape of a curved path segment	101
Converting path segments to straight or curved	102
Selecting points	103
Moving points and point handles	103
Inserting and deleting points on a path	104
Continuing an existing path	104
Merging two open paths	104
Auto-joining similar open paths	105
Editing paths	105
Editing with vector tools	105
Bending and reshaping vector objects	105
Distorting paths	107
Redrawing paths	107
Changing a path’s appearance by varying pressure and speed	108
Cutting paths into multiple objects	108
Editing with path operations	108
Combining path objects	108
Converting a path to a marquee selection	109
Creating an object from the intersection of other objects	109
Removing portions of a path object	110
Cropping a path	110
Simplifying a path	110
Expanding a stroke	111
Contracting or expanding a path	111
Editing paths using the Path panel	112
Chapter 6: Working with Text	114
Entering text	114
Naming a text object	115
Creating text blocks	115
Moving text blocks	116
Using auto-sizing and fixed-width text blocks	116
Formatting text	117
Choosing a font, size, and text style	117
Inserting special characters	118
Applying text color	118
Applying color to all text in selected text blocks	118
Applying color to highlighted text in a text block	119
Setting kerning	119
Setting leading	120
Setting text orientation	121
Setting text alignment	121
Indenting text	122
Setting paragraph spacing	122
Smoothing text edges	123
Adjusting character width	123
Setting baseline shift	124
Applying strokes, fills, and filters to text	124
Attaching text to a path	125
Editing paths and text attached to paths	125
Changing text orientation and direction on a path	126
Transforming text	126
Converting text to paths	127
Importing text	127
Photoshop text	128
RTF files	128
ASCII text	128
Handling missing fonts	128
Checking spelling	129
Customizing spell checking	129
Using the Text Editor	130
Chapter 7: Applying Color, Strokes, and Fills	131
Using the Colors section of the Tools panel	131
Organizing swatch groups and color models	132
Applying colors using the Swatches panel	132
Changing swatch groups	133
Customizing the Swatches panel	133
Clearing and sorting swatches	134
Creating colors in the Color Mixer	134
Mixing colors in the Color Mixer	135
Creating colors using the system color pickers	136
Viewing color values	136
Dithering with websafe colors	137
Color management using the Color Palette panel	138
Using color boxes and color pop-up windows	140
Selecting colors from a color pop-up window	140
Sampling colors from a color pop-up window	141
Working with strokes	141
Applying strokes	141
Creating custom strokes	143
Placing strokes on paths	144
Creating stroke styles	145
Working with fills	145
Setting fill attributes of the drawing tools	145
Editing solid fills	146
Applying gradient and pattern fills	146
Applying a pattern fill	146
Adding a custom pattern	147
Applying a gradient fill	147
Editing a gradient fill	147
Creating fills with the Gradient tool	148
Transforming and distorting fills	149
Setting hard-edged, anti-aliased, or feathered fill edges	149
About saving a custom gradient fill	150
Removing a fill	150
Adding texture to strokes and fills	150
Adding texture to a stroke	150
Adding texture to a fill	151
Adding a custom texture	151
Chapter 8: Using Live Filters	152
Applying Live Filters	152
Applying beveled edges	154
Applying embossing	154
Applying shadows and glows	154
Applying filters and Photoshop plug-ins as Live Filters	155
Plug-ins from the Filters menu	156
Installing Photoshop plug-ins	156
Applying Photoshop layer effects	156
About applying filters to grouped objects	156
Editing Live Filters	157
Reordering Live Filters	157
Removing Live Filters	157
Creating custom Live Filters	157
Saving Live Filters as commands	158
Chapter 9: Pages, Layers, Masking, and Blending	160
Working with pages	160
Adding and removing pages	161
Editing pages	161
Using a master page	162
Exporting pages to HTML	162
Exporting pages as image files	163
Working with layers	164
Activating layers	164
Adding and removing layers	165
Viewing layers	166
Organizing layers	166
Protecting layers and objects	167
Merging objects in the Layers panel	167
Sharing layers	168
Using the Web Layer	168
About importing Photoshop grouped layers	169
Masking images	169
About masks	169
About vector masks	169
About bitmap masks	170
Creating a mask from an existing object	171
Masking objects using the Paste as Mask command	171
Masking objects using the Paste Inside command	172
Using text as a mask	174
Masking objects using the Layers panel	174
Masking objects using the Reveal and Hide commands	175
About importing and exporting Photoshop layer masks	176
Grouping objects to form a mask	177
Editing masks	178
Selecting masks and masked objects using mask thumbnails	178
Selecting masks and masked objects using the Subselection tool	178
Moving masks and masked objects	179
Modifying a mask’s appearance	180
Changing the way masks are applied	181
Adding objects to a masked selection	183
Replacing, disabling, and deleting masks	183
Blending and transparency	184
About blending modes	184
Blending mode examples	185
Adjusting opacity and applying blends	186
About the Color Fill Live Filter	187
Chapter 10: Using Styles, Symbols, and URLs	188
Using styles	188
Applying a style	188
Creating and deleting styles	189
Editing styles	190
Exporting and importing styles	190
Using style defaults	191
Applying attributes without creating a style	191
Using symbols	191
Creating a symbol	191
Placing instances	192
Editing symbols	192
Using 9-slice scaling	193
Creating and using rich graphic symbols	195
Creating editable symbol parameters using JavaScript:	196
Editing instances	198
Editing rich symbols	198
Breaking symbol links	198
Editing instance properties	198
Importing and exporting symbols	199
Importing symbols	199
Exporting symbols	200
Updating exported symbols and instances in multiple documents	200
Working with URLs	201
About absolute and relative URLs	201
Working with pages	202
Assigning a URL to a web object	202
Creating a URL library	202
Editing URLs	203
Importing and exporting URLs	203
Chapter 11: Slices, Rollovers, and Hotspots	205
Creating and editing slices	205
Creating slice objects	206
Creating HTML slices	206
Creating nonrectangular slices	207
Viewing and displaying slices and slice guides	208
Viewing slices in the Layers panel	208
Showing and hiding slices	208
Changing slice and slice guide color	208
Editing slices	209
Moving slice guides to edit slices	209
Using tools to edit slice objects	210
About using the Property inspector or Info panel to edit slice objects	210
Making slices interactive	210
Adding simple interactivity to slices	211
About rollovers	211
Creating a simple rollover	212
Creating a disjoint rollover	213
Applying multiple rollovers to a slice	213
Removing a drag-and-drop rollover	214
Using the Behaviors panel to add interactivity to slices	214
Attaching behaviors	215
Editing behaviors	215
Using external image files for swap image	216
Preparing slices for export	216
Assigning URLs	217
Entering alternate text	217
Assigning a target	217
Export settings	218
Naming slices	218
Custom-naming slice files	218
Auto-naming slice files	218
Changing the default auto-naming convention	218
Defining how HTML tables are exported	220
Working with hotspots and image maps	221
Creating hotspots	221
Editing hotspots	222
Preparing hotspots for export	222
Creating image maps	223
Creating rollovers with hotspots	223
Using hotspots on top of slices	224
Chapter 12: Creating Buttons and Pop-up Menus	225
Creating button symbols	225
About button states	226
Using the Button Editor	226
Creating a simple two-state button	226
Creating a three- or four-state button	227
Using bevel filters to draw button states	227
Converting Fireworks rollovers into buttons	228
Inserting buttons into a document	228
Importing button symbols	229
Editing button symbols	229
Editing symbol-level properties	229
Editing instance-level properties	230
Setting interactive button properties	231
Modifying the active area of a button symbol	231
Setting the URL for a button symbol or instance	231
Setting the target for a button	232
Setting the alternate (alt) text for a button symbol or instance	233
Creating navigation bars	233
Creating pop-up menus	234
About the Pop-up Menu Editor	234
Creating a basic pop-up menu	235
Creating submenus within a pop-up menu	236
Designing the appearance of a pop-up menu	237
Adding pop-up menu styles	238
Setting advanced pop-up menu properties	239
Positioning pop-up menus and submenus	240
Editing pop-up menus	241
About exporting pop-up menus	242
Chapter 13: Creating Animations	243
Building animation	243
Working with animation symbols	244
Creating animation symbols	244
Editing animation symbols	245
Changing animation properties	245
Removing animations	246
Editing symbol graphics	246
Editing symbol motion paths	246
Working with frames	247
Setting the frame delay	247
Showing and hiding frames for playback	248
Naming animation frames	248
Adding, moving, copying, and deleting frames	248
Moving selected objects in the Frames panel	249
Sharing layers across frames	249
Viewing objects in a specific frame	250
Using onion skinning	250
Tweening	251
Previewing an animation	251
Exporting your animation	252
Setting the animation repetition	252
Setting transparency	252
Optimizing an animation	253
Animation export formats	253
Working with existing animations	253
Using multiple files as one animation	254
Chapter 14: Creating Slideshows	255
The Create Slideshow command	255
Building or editing a slideshow	255
Slideshow properties	257
AlbumBook Properties panel	257
Album Properties panel	258
Captions panel	258
Filters panel	258
Slideshow Properties panel	259
Export Options panel	259
Creating a custom Fireworks album player	259
Node definitions	260
Chapter 15: Optimizing and Exporting	262
About optimizing	262
Using the Export Wizard	263
Using Image Preview	263
Optimizing in the workspace	266
Using optimization settings	267
Previewing and comparing optimization settings	268
Choosing a file type	270
Optimizing GIF, PNG, TIFF, BMP, and PICT files	270
Choosing a color palette	271
Setting the color depth	271
Removing unused colors	272
Dithering to approximate lost colors	272
Viewing colors in a palette	273
Locking colors in a palette	274
Editing colors in a palette	274
Using websafe colors	275
Saving palettes	275
Adjusting compression	275
Making areas transparent	276
Interlacing: Downloading gradually	277

Match case Limit results 1 per page

220

Chapter 12: Creating Buttons and Pop-up

Menus

In Fireworks you can create a variety of JavaScript buttons and Cascading Style Sheet (CSS) or JavaScript pop-up

menus, even if you know nothing about JavaScript and CSS code.

The Fireworks Button Editor leads you through the button-creation process, automating many button-making tasks.

The result is a convenient button symbol. After you’ve created a button symbol, you can easily create instances of the

symbol to make a navigation bar, or nav bar.

Fireworks also has a Pop-up Menu Editor, which allows you to quickly and easily create vertical or horizontal pop-

up menus. The Advanced tab of the Pop-up Menu Editor gives you creative control over cell spacing and padding,

text indention, cell borders, and other properties.

When you export a button or pop-up menu, Fireworks automatically generates the CSS code or JavaScript necessary

to display it in a web browser. In Adobe Dreamweaver, you can easily insert CSS code, JavaScript, and HTML code

from Fireworks into your web pages, or you can cut and paste the code into any HTML or CSS file.

This chapter contains the following topics:

•

“Creating button symbols” on page 220

•

“Creating navigation bars” on page 228

•

“Creating pop-up menus” on page 229

Creating button symbols

Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following character-

istics:

•

You can make almost any graphic or text object into a button.

•

You can create a button from scratch, convert an existing object into a button, or import already created buttons.

•

A button is a special type of symbol. You can drag instances of it from the symbol library into your document.

This allows you to change the graphical appearance of a single button and automatically update the appearance of all

button instances in a nav bar. For more information on symbols, see “Using symbols” on page 186.

•

You can edit the text, URL, and target for one button instance without affecting other instances of the same button,

and without breaking the symbol-instance relationship.

•

A button instance is encapsulated. When you drag the button instance in the document, Fireworks moves all the

components and states associated with it, so there is no need for multiframe editing.

•

A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the

Property inspector.

•

Like other symbols, buttons have a registration point. The registration point is a center point that helps you align

text and the different button states while in the Button Editor.