List of Figures

 < Day Day Up > 



Chapter 4: Getting to Know FreeHand

Figure 4-1: The Edit Brush dialog box
Figure 4-2: From top to bottom: original strokes, Paint strokes, Spray strokes. The left column is a Paint brush, and the right column is a Spray brush.
Figure 4-3: Examples of the Brush stroke
Figure 4-4: A Contour Gradient on the left, and a standard blend on the right
Figure 4-5: The Navigation panel leads the way to the Web.
Figure 4-6: Information used by the IPTC is placed in the File Info Xtra dialog box.
Figure 4-7: The HTML Output panel

Chapter 5: Setting Up a FreeHand Document

Figure 5-1: Valuable information is found at the bottom of the FreeHand window.
Figure 5-2: The Object inspector with an ellipse selected
Figure 5-3: The Stroke inspector
Figure 5-4: The Fill inspector, showing a contour gradient
Figure 5-5: The Text inspector
Figure 5-6: The Document inspector. Note the customized location of the default page.
Figure 5-7: The Layers panel
Figure 5-8: The Swatches panel contains colors that you want to use in the document.
Figure 5-9: The Mixer panel. From top-left down: CMYK, RGB, HSL, and the Apple Colors panel on the right side.
Figure 5-10: Make light of your colors in the Tints panel.
Figure 5-11: The Styles panel can save you hours of needless work. Notice the cursor has opened the Options pop-up menu.
Figure 5-12: Make your own custom keyboard shortcuts in this panel.
Figure 5-13: The Library contains your master pages.

Chapter 6: Vector Art in an Eggshell

Figure 6-1: Notice the differences between vector and bitmapped artwork at various enlargements.
Figure 6-2: Spiral dialog boxes differ according to the type of spiral that you select.
Figure 6-3: The development of a spiral
Figure 6-4: This illustration uses two sets of Perspective Grids; only one is visible.
Figure 6-5: The type of Freeform tool settings are different for Push/Pull and Reshape Area.
Figure 6-6: The Freeform tool has two different ways of working.
Figure 6-7: You can draw with the Polygon and Scale tools.
Figure 6-8: The faucet on the left is a 16-color trace to grayscale; the center drawing is the same trace without fills; and the right drawing was done with the Pen tool.
Figure 6-9: Trace tool options include the Uniform option. The original image is at the top, Uniform is selected in the middle, and at the bottom Uniform has been deselected.
Figure 6-10: Flyout Stroke and Fill color menu

Chapter 7: Getting Around in a FreeHand Document

Figure 7-1: The transformation handles allow you to scale, skew, and rotate everything within the selection.
Figure 7-2: The Bend tool can be effective for making a splash.
Figure 7-3: The Bend tool also makes some pretty good points and explosions.
Figure 7-4: The text above the heron's head on the right was 1.5-point before converting to paths. Notice how well it enlarges (700 percent) with the Magnify Lens fill.
Figure 7-5: A screenshot of eight lens fills and their respective centerpoints
Figure 7-6: The effects of lens fill options
Figure 7-7: The effect of Join with Even/Odd Fill turned on (middle) and off (right)
Figure 7-8: Six examples of compound path construction
Figure 7-9: The effects of gradient fills in text that has been converted to compound paths
Figure 7-10: Normal compound paths
Figure 7-11: An ungrouped ellipse turned into a teardrop with a single click and drag
Figure 7-12: Both Roughen and Smooth add points and distort the path.
Figure 7-13: The Expand Stroke dialog box converts a path into a compound path.
Figure 7-14: The Inset Path dialog box
Figure 7-15: Inset Paths, left to right: Uniform, Farther, and Nearer
Figure 7-16: Inset Paths was applied to each of the gray objects (the objects were turned gray after Inset Paths was applied).
Figure 7-17: The all-important Layers panel

Chapter 8: Using FreeHand Symbols and Styles

Figure 8-1: This library is filled with electronic schematic symbols.
Figure 8-2: The Styles panel can save time and prevent errors.
Figure 8-3: The Edit Styles dialog box for text styles
Figure 8-4: The Edit Styles dialog box for strokes and fills
Figure 8-5: Choose groups to spray, or place graphics in the Hose window.
Figure 8-6: The Options dialog box enables you to change many attributes of sprayed objects.
Figure 8-7: The effects of a simple Graphic Hose swamp as used in the Habitat Alert logo.

Chapter 9: Understanding FreeHand Typography

Figure 9-1: The Text Editor box, showing such invisibles as spaces and end of line marks
Figure 9-2: This Find Text dialog box looks for paragraph marks in the selected text.
Figure 9-3: Linked text blocks display a double-arrow icon and connecting path to the next block.
Figure 9-4: The Columns and Rows panel arranges text in a tight grid.
Figure 9-5: The Adjust Columns panel balances columns within limits of the text.
Figure 9-6: Paragraph rules at work
Figure 9-7: This Text Ruler shows only default tab settings. Tab icons at the top left are (from left to right) left, right, center, decimal, and wrapping tabs. Notice the left indent marker triangle has been moved to the right of the first–line indent marker triangle.
Figure 9-8: Wrapping tabs are a major strong point of FreeHand's typographic tools.
Figure 9-9: Raw tablature text and its initial alignment
Figure 9-10: Adding space and paragraph rules to the table
Figure 9-11: A FreeHand table
Figure 9-12: Spiral tool dialog box settings
Figure 9-13: A spiral path on the left, with text attached to the path on the right
Figure 9-14: A Habitat Alert logo concept using text on a path
Figure 9-15: Four steps to inline text effects
Figure 9-16: A soft shadow made with the Trace tool and a contour gradient
Figure 9-17: An inline graphic places logos and artwork inside a line of text.
Figure 9-18: Text flowing inside a path can be effective in a layout.
Figure 9-19: Text runarounds in action
Figure 9-20: An image inside a text block
Figure 9-21: Text with a darken lens fill applied to make a shadow

Chapter 10: FreeHand and Web Graphics

Figure 10-1: The Navigation panel links objects on your page to the entire Web.
Figure 10-2: The HTML Output dialog box has basic settings for your Web page.
Figure 10-3: Use the HTML Setup window to choose page attributes manually.
Figure 10-4: The Stroke Styles dialog box provides many variations of line treatments.
Figure 10-5: The bird has been turned into a fuzzy chick with a Hatched stroke style.
Figure 10-6: FreeHand files are imported with the help from the FreeHand Import dialog box.
Figure 10-7: The Illustrator Import window encountered when importing EPS files

Chapter 11: Basic FreeHand Animation

Figure 11-1: The Envelope toolbar can float free or be attached to the Main toolbar.
Figure 11-2: The 3-D Rotation dialog box
Figure 11-3: The finished distortion by use of the Envelope feature in FreeHand
Figure 11-4: The Map view of an envelope
Figure 11-5: The great blue heron in flight
Figure 11-6: Three separate sets of blends make up the animation.
Figure 11-7: Four groups of reeds prepared to animate

Chapter 12: Optional Movie Techniques

Figure 12-1: The Bird Facts 101 Library contains all the elements for the movie.
Figure 12-2: The basic layout for the Bird Facts 101 movie
Figure 12-3: The button attached to this Navigation panel moves the viewer to Page 3.
Figure 12-4: The Movie Settings panel for this movie
Figure 12-5: The Hungry Heron Diner movie
Figure 12-6: Reeds were pasted into the Graphic Hose (left) and applied with the settings on the right.
Figure 12-7: The Navigation panel settings for the Fish link

Chapter 13: Printing FreeHand Documents

Figure 13-1: A color halftone (in black and white), and an enlargement showing the rosette pattern
Figure 13-2: A choke on the left, a spread on the right
Figure 13-3: The upper object will knockout of the bottom object on the left, and overprint the object on the right.
Figure 13-4: How FreeHand displays overprinting
Figure 13-5: The FreeHand Print dialog box
Figure 13-6: The Display Color Setup window
Figure 13-7: The Imaging tab of the Setup section of the Print dialog box
Figure 13-8: The two-color letterhead design
Figure 13-9: The finished envelope
Figure 13-10: The finished business card layout
Figure 13-11: Set up 10 business cards in minutes!
Figure 13-12: A quick and painless three-column layout
Figure 13-13: The brochure's inside panels
Figure 13-14: The outside of the brochure

Chapter 14: Introducing FreeHand MX

Figure 14-1: The Output Area options in the Print dialog box
Figure 14-2: The Mac version of the Export Preferences thumbnail preview controls
Figure 14-3: Notice where the Bend's points are in relation to the final line. The line with the live points on it will not print.
Figure 14-4: The Bend effect is great for creating an exciting starburst, comet trail, or bug splat.
Figure 14-5: The Duet effect multiplies your artwork.
Figure 14-6: The Expand Path effect
Figure 14-7: The Ragged effect
Figure 14-8: Loosen up your artwork with the Sketch effect.
Figure 14-9: You can get carried away with the Transform effect.
Figure 14-10: Examples of the types of bevels and embossing you can apply
Figure 14-11: Make people think they need glasses with blur effects.
Figure 14-12: Live shadow and glow effects
Figure 14-13: Transparency effects including a gradient mask on the text
Figure 14-14: The Calligraphic Stroke offers many options with just the default selection.
Figure 14-15: Variations are quick and painless with the Calligraphic Stroke.
Figure 14-16: Simple examples of the Calligraphic Stroke on text
Figure 14-17: Brushes hug the corners tighter in FreeHand MX.
Figure 14-18: The Eraser tool is versatile. From left to right, it created a single closed path, a pair of closed paths, and a composite path.
Figure 14-19: Key points appear and can be moved when objects are selected with the Blend tool.
Figure 14-20: The Extrude panel determines many factors of the extrusion.
Figure 14-21: Examples of extruded objects and live text
Figure 14-22: The Rectangle information panel allows individual corner development.
Figure 14-23: Rounded corners are really a snap in FreeHand MX.
Figure 14-24: Elliptical modifications are easy to handle through the Object panel.
Figure 14-25: Twelve-point polygons with different settings in the Object panel
Figure 14-26: Connector lines make organization a snap, but precise alignment is necessary.
Figure 14-27: The Gradient Fill Behaviors enhance gradients with a mouse-click.
Figure 14-28: You can add multiple attributes to fills and strokes in the Object panel.
Figure 14-29: Align objects and points anywhere on a path with Snap To Objects.
Figure 14-30: This simplified example of the Action tool shows page relationships.

Chapter 15: Getting Around in Fireworks

Figure 15-1: The Fireworks workspace with a new document open in a Windows PC environment
Figure 15-2: The Layers panel, marked to show the new names and features of all the panels in Fireworks
Figure 15-3: The solid line indicates where the panel will be docked.
Figure 15-4: Typical panel features
Figure 15-5: The Main toolbar open and docked below the Menu bar
Figure 15-6: The Modify toolbar
Figure 15-7: The Tools panel
Figure 15-8: The Property inspector
Figure 15-9: The Layers panel
Figure 15-10: The Duplicate Layer dialog box
Figure 15-11: The Preferences dialog box

Chapter 16: Applying Color

Figure 16-1: Clicking a color box opens a color pop-up window. There are additional options available in the Options menu.
Figure 16-2: The Color dialog box that opens when you click the System Color Picker icon
Figure 16-3: The Find and Replace panel
Figure 16-4: The Stroke panel
Figure 16-5: The Stroke categories
Figure 16-6: The Stroke Options pop-up window
Figure 16-7: The Edit Stroke Options category
Figure 16-8: The Shape category options
Figure 16-9: The Sensitivity category options
Figure 16-10: The fill area of the Property inspector
Figure 16-11: The Web Dither pop-up menu
Figure 16-12: The Fill options pop-up that opens when the Fill Options button is clicked
Figure 16-13: A pattern-filled object, which is selected revealing the adjustment bars
Figure 16-14: A representation of the gradient options
Figure 16-15: Edit Gradient window
Figure 16-16: The Styles panel

Chapter 17: Drawing Like a Pro

Figure 17-1: The Tools panel showing the Vector tools area
Figure 17-2: The options available in the Properties inspector when the Rectangle tool is selected
Figure 17-3: The warning that opens when you use the Subselection tool to select the rectangle
Figure 17-4: A point deleted resulting in a triangle
Figure 17-5: The triangle being rotated
Figure 17-6: The options of the Polygon tool prior to drawing the shape
Figure 17-7: The first line drawn
Figure 17-8: The second line drawn
Figure 17-9: The lines joined together
Figure 17-10: The completed zigzag line
Figure 17-11: A curved line using the Pen tool
Figure 17-12: A path with straight segments and one with Bezier curves added
Figure 17-13: A curve with the control handles visible
Figure 17-14: A straight line with three points drawn
Figure 17-15: A curve added to the straight line
Figure 17-16: Another curve added by dragging the other control handle
Figure 17-17: A point being added to the intersection of the guide at 160 and 100
Figure 17-18: The two bottom left points moved up 25 pixels
Figure 17-19: The curve added by using the Alt (Option) key and dragging the handles to form the curve shape
Figure 17-20: Two shapes joined by using the Union command
Figure 17-21: A shape with rounded and squared corners
Figure 17-22: Intersect (the image on the left) keeps only the area common to the intersection. Crop (the image on the right) uses the top circle as the cropping region and only keeps the parts of the lower two circles that are within the region.
Figure 17-23: A curve added to a rectangle by using the Intersect command
Figure 17-24: The result of punching the white rectangle. The Layers panel shows the shapes and layers you should have at this point.
Figure 17-25: A rectangle drawn over the top portion of the circle

Chapter 18: Designing Spectacular Text Effects

Figure 18-1: The Property inspector contains tools for controlling text and paragraph properties.
Figure 18-2: Text (from top to bottom) with a stroke, kerning, scaled, rotated, distorted, and using a baseline shift
Figure 18-3: Converting normal text to paths enables you to modify the text outlines. Here, the letter X is selected with the Subselection tool to reveal its points and line segments.
Figure 18-4: An ellipse around the image and the text in place for the logo
Figure 18-5: Paths prepared for the text
Figure 18-6: The top text attached to a path
Figure 18-7: The text is upside down on the bottom half.
Figure 18-8: The text is too high up on the arc.
Figure 18-9: The bottom text is altered and in position.
Figure 18-10: The text has a linear gradient fill. The copied text object is hidden in the Layers panel.
Figure 18-11: The Expand operation applied to the text
Figure 18-12: The text size increased using the Inset Path command
The Curve dialog box with the input and output settings adjusted
The text converted to paths, an inner bevel effect, and the brightness and contrast effect added twice
Two rectangles drawn over the text and filled with white for use as a mask
The text object with the gold skin applied using a mask
The Property inspector showing the metal texture added and two effects disabled
The futuristic text on a background

Chapter 19: Working with Bitmap Images

Figure 19-1: The Tools panel showing the placement of the Bitmap tools
Figure 19-2: The Property inspector showing the Marquee properties
Figure 19-3: The focal point is selected.
Figure 19-4: The selection is inversed and a Gaussian blur is added to only the background.
Figure 19-5: The properties available for the Dodge tool after the tool is selected
Figure 19-6: The gradient handles adjusted, making a nice fade into the background texture
Figure 19-7: The various fade options available in the Fade Image dialog box
Figure 19-8: The left-to-right fade image option from the Fade Image command applied to the image
Figure 19-9: The bird image with a path around the area to remain
Figure 19-10: The vector mask applied to the bird with the background removed
Figure 19-11: A rectangle drawn to cover the top of the circle
Figure 19-12: The image imported and placed above the circle shape
Figure 19-13: The image scaled to fit horizontally
Figure 19-14: The rectangle drawn over the bottom of the circle shape to use as an intersect command
Figure 19-15: The stacking order in the Layers panel
Figure 19-16: A vignette made from the bird image
Figure 19-17: The background removed with a large brush
Figure 19-18: The fine detail is painted in with a white canvas added.
Figure 19-19: The mask separated from the image as a separate object in the Layers panel
Figure 19-20: The mask ready to be saved for later use
The completed project sample
Brightness and contrast added to the image
The shape of the adjusted curve
The results of adjusting the curve for the image
The Layers panel showing the Opacity and Blend Mode settings
The image with the Blend Mode changed to Multiply and Opacity lowered a bit
The Curve dialog box showing the new curve with three points
The image with the contrast/brightness and the adjusted curves
The shape of the blood spots
The shapes traced
The blood shape with the Blend Mode of Color applied
The Layers panel up through Step 10
A dramatic reduction in brightness
The composition with all the image layers complete
The text so far
The text attached to the path
The cloned text moved
The text distorted

Chapter 20: Designing Navigational Elements

Figure 20-1: The instance of the button symbol opened for editing in the Button Editor
Figure 20-2: The Import Symbols dialog box for buttons
Figure 20-3: The button symbol added to the Library panel
Figure 20-4: The rollover state of the image as seen in Preview
Figure 20-5: The buttons library as seen in your document and in the Layers panel
Figure 20-6: The new button added to the buttons library
Figure 20-7: The first button text added to the site interface
Figure 20-8: The rest of the main navigation text added to the layout
Figure 20-9: The Knife tool after it sliced the bottom of the rectangle
Figure 20-10: Slices added to each text link
Figure 20-11: The LEARN slice is selected and given a unique name in the Property inspector.
Figure 20-12: The Simple Rollover dialog box
Figure 20-13: The images used in this exercise
Figure 20-14: An image added to the second frame for the swap image behavior
Figure 20-15: A slice added to cover the new content for Frame 2
Figure 20-16: The drag and drop method being used to add the Swap Image behavior
Figure 20-17: The Swap Image behavior added
Figure 20-18: Text added below the Home button in Frame 2. This text will only be visible when the mouse cursor rolls over the Home button.
Figure 20-19: Frame 3 being used for the second buttons rollover
Figure 20-20: A navigational line that will have hotspots added to it
Figure 20-21: A hotspot is added to the word Home
Figure 20-22: The Property inspector showing the Link and the Alt tag added
The Pop-up Menu Editor when it first opens.
The Appearance tab where you set the font attributes, type of menu, and cell colors.
The Export dialog box
Site panel showing the files within the defined site of Poinciana Key
The template file showing the area that the pop-up menu will be added to

Chapter 21: Automating Your Workflow

Figure 21-1: The Find and Replace panel
Figure 21-2: The actions performed on this document. The Fit Canvas command is actually a crop action.
Figure 21-3: The Batch process dialog box with All Files showing
Figure 21-4: The Batch options that are available
The interface of the command that you will create with this tutorial
Process Flow for creating the Randomizer command
Examining the History panel for building blocks for your command
Copying steps from the History panel
Copying additional copy and paste steps from the history panel
The empty interface of randomizer_start.fla within Flash MX
Adding the Apply button from the Library panel in Flash MX to the active Stage
Adding the ActionScript to the Apply button
Adding the ActionScript to the Apply button to get the document height and width, and to assign random values to variables
Adding the ActionScript to the Apply button to create a nested loop based on random variables
Adding the ActionScript to the Apply button to dynamically assign random values to the variables xPlacement and yPlacement
Final ActionScript for the Randomizer command within the Actions panel of Flash MX
Final Error Checking added to the command for completion of user experience
Exporting your Flash MX command into the Fireworks MX command folder
  The Randomizer command in action within Fireworks MX

Chapter 22: Designing Animations

Figure 22-1: The Symbol Properties dialog box
Figure 22-2: The Animate dialog box
Figure 22-3: A motion path of a symbol
Figure 22-4: The Frames panel with labeled icons
Figure 22-5: The Duplicate Frame dialog box
Figure 22-6: The Onion Skinning options
Figure 22-7: The elongated hourglass shows which frames are affected by onion skinning.
Figure 22-8: The Tween Instances dialog box
Bitmap cat with background
Setting the gradient colors
The gradient mask with the circular handle moved
Transparent gradient overlay
Selection marquee
The cat faded to background
The Layers panel
The bitmap cat selected

Chapter 23: Slicing and Optimizing

Figure 23-1: Four guides placed to aid in slicing the document
Figure 23-2: The Habitat Alert document with the slices visible
Figure 23-3: The link and alt information added in the Property inspector for the location slice
Figure 23-4: The 4-Up view showing a GIF and two different JPEG optimization settings
Figure 23-5: The Export Preview dialog box
Figure 23-6: The Optimize to Size dialog box open
Figure 23-7: The Optimize panel with a file format of GIF
Figure 23-8: The color swatches showing the various feedback icons
Figure 23-9: The white background and white center are both removed using index transparency.
Figure 23-10: When you want to remove the background color only and not the same color from the image, use Alpha Transparency option.
Figure 23-11: The Habit Alert logo seen in preview mode after the optimization settings are made
Figure 23-12: The Optimize panel with a File Format of JPEG chosen
Figure 23-13: The image with the JPEG quality lowered to 40
Figure 23-14: The Selective JPEG Settings dialog box
Figure 23-15: The image with the quality setting of 90% and zoomed in to 200%
Figure 23-16: The Export Wizard opening dialog box
Figure 23-17: The Export dialog box
Figure 23-18: Table options tab
Figure 23-19: The Macromedia Flash SWF Export Options dialog box
Figure 23-20: The Illustrator Export Options dialog box

Chapter 24: Navigating through Flash MX

Figure 24-1: The Flash MX interface
Figure 24-2: The Property inspector when the Pen tool is selected
Figure 24-3: The Toolbox
Figure 24-4: The template documents that ship with Flash MX
Figure 24-5: The Document Properties dialog box
Figure 24-6: Layer and folder options and functions

Chapter 25: Designing Visual Content

Figure 25-1: The Property inspector showing the properties for the Rectangle tool
Figure 25-2: The different Brush tool options
Figure 25-3: The Color Mixer with Linear fill style being selected
Figure 25-4: The gradient is filled in the left rectangle and continues into the right rectangle.
Figure 25-5: Different Fill transform options
Figure 25-6: A selected text box being changed to an input text box
Figure 25-7: The Property inspector for static text
Figure 25-8: The Property inspector as it appears when Dynamic Text is selected
Figure 25-9: The Property inspector when Input Text is selected
Figure 25-10: The Align panel
Figure 25-11: The envelope with the handles manipulated

Chapter 26: Symbols and Libraries

Figure 26-1: A library showing various icons, names, and types
Figure 26-2: The Convert to Symbol dialog box
Figure 26-3: The Button Symbol editor
Figure 26-4: The bar above the stage showing the scene and/or symbols in the edit mode

Chapter 27: Animating a Movie

Figure 27-1: The Timeline
Figure 27-2: New content added to the stage in Frame 10
Figure 27-3: A frame-by-frame animation showing the Timeline with keyframes for each movement change
Figure 27-4: Frame 10 is selected and the onion skin option is turned on.
Figure 27-5: Frame 10 is selected and the onion skin Outline option is turned on.
Figure 27-6: The pivot point in the center and rotated to the right
Figure 27-7: The pivot point moved to the bottom center and rotated to the left
Figure 27-8: The object rotated to the right with the onion skin option turned on to show the rotated movement
Figure 27-9: The properties available for a motion tween
Figure 27-10: The background image in place and the layer renamed
Figure 27-11: The Fireworks PNG Import Settings dialog box with the settings used
Figure 27-12: The gold herons added to the second layer and moved off the stage
Figure 27-13: The Timeline showing both motion tweens added
Figure 27-14: The stroke being added to the text
Figure 27-15: A Motion-Guide layer added above the tweened animation and a guide drawn
Figure 27-16: The object placed with its registration point at the beginning of the Motion Guide
Figure 27-17: A dot added to Frame 1 for the beginning of a shape tween
Figure 27-18: The mouth drawn using the Pen tool

Chapter 28: Using Flash ActionScript

Figure 28-1: The Actions panel
Figure 28-2: The ActionScript Editor tab of the Preferences dialog box, where you can change the color-coding colors or toggle it on or off
Figure 28-3: The Actions panel in Normal mode showing the goto action added
Figure 28-4: The Actions panel in Expert mode showing the goto action added
Figure 28-5: The on (release) line of code selected and the Parameter area open showing the list of events
Figure 28-6: The finished puzzle project
Figure 28-7: The puzzle's horizontal and vertical lines that are still selected after the first ungroup
Figure 28-8: The puzzle pieces aligned and ungrouped
Figure 28-9: The dotted image after the pieces have been broken apart
Figure 28-10: The Movie Explorer with the Movie Clips button being clicked
Figure 28-11: The pieces moved off to the side
Figure 28-12: The Property inspector showing the instance name and x, y coordinates of the first puzzle piece
Figure 28-13: The bird puzzle changed into a different puzzle
Figure 28-14: The interface for selecting the puzzles
Figure 28-15: The buttons visible while a movie is loaded

Chapter 29: Working with Sound

Figure 29-1: The Edit Envelope dialog box
Figure 29-2: The Timeline for the button symbol
Figure 29-3: The Sound Properties dialog box

Chapter 30: Publishing Your Flash Movies

Figure 30-1: The Debugger panel
Figure 30-2: The Flash tab of the Publish Settings dialog box
Figure 30-3: The Test Movie command with a new menu bar with Debug menu in it
Figure 30-4: The Bandwidth Profiler

Chapter 31: Understanding the Dreamweaver Environment

Figure 31-1: Windows users can choose from three workspace options.
Figure 31-2: The application menus
Figure 31-3: The Insert bar
Figure 31-4: The Document bar provides access to all views.
Figure 31-5: The Tag selector
Figure 31-6: Edit window size options and download speeds
Figure 31-7: The fields in the contextual Property inspector change with the page element selected.
Figure 31-8: Use the Panel Options menu to regroup a panel within a group or to rename, close, or maximize the current group.
Figure 31-9: The Keyboard Shortcut Editor

Chapter 32: Starting a Web Site with Dreamweaver

Figure 32-1: Name your site and select a root folder.
Basic Site Setup Mode
Select where you will store files locally.
Figure 32-2: Information about the Web server is added in the Remote Info category.
Figure 32-3: Click the Expand/Collapse icon to view local and remote together.
The biggest difference in Dreamweaver on the Mac is found in the Site window.
Figure 32-4: The Document Gallery

Chapter 33: Building a Simple Page

Figure 33-1: The Page Properties dialog box sets the properties of the <body> tag.
The color button opens a color palette.
Figure 33-2: Right-click (Control-click) to insert an image.
Figure 33-3: Images added to the mission statement page
Figure 33-4: Dreamweaver to Fireworks, at your command
Figure 33-5: Select the top-left anchor to add additional space to the right of the canvas only.
Figure 33-6: No stripe along the right edge, even with the browser wide-open
Figure 33-7: Wrap Tags around a selection with the Quick Tag Editor
Figure 33-8: Six paragraphs formatted using an unordered list
Figure 33-9: Formatted paragraph and lists, separated by a horizontal rule
Figure 33-10: The HTML Styles panel

Chapter 34: Using Tables for Complex Layouts

Figure 34-1: The Insert Tabledialog box
Figure 34-2: What you see in Design view is powered by the HTML in Code view.
Figure 34-3: In Code view, the non-breaking spaces in each cell in the code hold the cells open in Design view.
Figure 34-4: Selecting the <table> tag selects the entire table. The selection is indicated by the thick black border.
Tables make tricky layout possible.
Figure 34-5: A cell selected makes the cell proper-ties available in the Property inspector (notice the table icon in the left corner showing the approxi-mate location of the selected cell).
Figure 34-6: A selected row showing the proper-ties available in the Property inspector
Figure 34-7: Basic page and complicated table structure exported from Fireworks MX
Figure 34-8: The table falls apart when HTML text is added.
Figure 34-9: Merging all of these cells forms an easier-to-edit space.
Figure 34-10: The Property inspector's Merge Cell and Split Cell icons
Figure 34-11: Modular tables make this page layout easier to build and modify. The table border is for demonstration purposes only.
Figure 34-12: The Table dialog box with the settings for the first table in the index page of the Habitat Alert site
Figure 34-13: The first table added with the logo and left side images added
Figure 34-14: The first table with the cells set, spacers added, and the logo inserted
Figure 34-15: The logo in a better position
Figure 34-16: A line added to the bottom of the content area
Figure 34-17: The buttons from the exported Fireworks HTML page are inserted into the layout.
Figure 34-18: A one-pixel border showing around the nested table
Figure 34-19: The center of the rounded table set to Top vertical alignment with the background color the same as the borders

Chapter 35: Building Basic Navigation Links

Figure 35-1: Absolute URLs for the Habitat Alert site are stored as link assets.
Figure 35-2: Choosing the site root from the Relative To menu
Figure 35-3: Dreamweaver indicates when the target page is outside of the site.
Figure 35-4: The contextual Point to File tool works only with text links.
Figure 35-5: Name your map and build hotspots with the map drawing tools.
Figure 35-6: The hotspots added to make the image map and the Alt text added as well
The slider moves back and forth in the page history.
The red X means a step cannot be part of a saved command.
Figure 35-7: The Named Anchor icon
Figure 35-8: A link to a named anchor in a different page places the hash mark and name of anchor after the page link's path.
Figure 35-9: Insert Email Link window

Chapter 36: Using Cascading Style Sheets

Figure 36-1: Applying a class via the Tag selector
Figure 36-2: Applying a class via the context menu in the document in Design view
Figure 36-3: The New CSS Style dialog box and options
Figure 36-4: The CSS Style dialog box filled out for the new style
Figure 36-5: Style Definition for body in main.css
Figure 36-6: The page with its tiling background image and white page color
Figure 36-7: The settings used in the Box category
Figure 36-8: The properties for the head 4 titles applied to the maincontent style
Figure 36-9: Margin around the content in the maincontent cell makes the page easier to read.
Figure 36-10: Attachment options in the Link External Style Sheet dialog box
Figure 36-11: The Style icon pressed
Figure 36-12: As seen in Internet Explorer 6
Figure 36-13: As seen in Netscape 4.4

Chapter 37: Working with Libraries and Templates

Figure 37-1: Library assets live in the Assets panel
Figure 37-2: The bottom ad banners are placeholders. Making a library item will allow easy updating of the element when the site is completed.
Figure 37-3: The Property inspector also provides access to the original item.
Figure 37-4: The Save As Template dialog box
Figure 37-5: The Templates toolset in the Insert bar contains all the functions found in the Template Objects of the Insert menu.
Figure 37-6: You may use spaces but not special characters when naming the new editable region.
Figure 37-7: The Editable Tag Attribute dialog box
Figure 37-8: The regions showing their labels
Figure 37-9: The Habitat Alert Template in the Template Gallery
Figure 37-10: The image is no longer visible but the background of the circle is.
Figure 37-11: Look! No picture! The blue circle area is created by the background image for this cell.
Figure 37-12: Resolving inconsistent regions
Figure 37-13: Selecting the Nowhere option
Completed Local Info category
Completed Testing Server Category
Expanded Site tab
The Site tab after template backup
Syntax Check OK dialog box
Syntax Check showing an error dialog box
Blank Find and Replace dialog box
Competed Find and Replace Dialog box source code
Query Results for Start code F/R
Update Template Files dialog box
Optional Region dialog box
Update Pages dialog — completed

Chapter 38: Tapping into the Power of Forms

Figure 38-1: Simple but insecure form. Place the mailto: e-mail address in the action field of the form tag.
Figure 38-2: The Insert bar contains all the Form tools.
Figure 38-3: Use special characters for cross-platform consistency.
Figure 38-4: The text field and button added to the form field
Figure 38-5: The List Values dialog box is where you add list or menu items.
Figure 38-6: The text field with a value of 12 and a Go button
Figure 38-7: The Jump Menu dialog box
Figure 38-8: The main Find page in Netscape 4x
Figure 38-9: The main Find page as viewed in Internet Explorer 6.0

Chapter 39: Building a Framed Site

Figure 39-1: Simple framesets include rows only, columns only, or a shared row/column layout. Nested framesets are used when you want to vary the total rows and columns between frames.
Figure 39-2: The mini-layout lets you select which frame to size.
Figure 39-3: Add a name for each frame using the Property inspector.
Figure 39-4: You may target the frame or use _parent when your configured framed site doesn't use the stan-dard Dreamweaver nested frames approach.
Figure 39-5: A common nested frameset layout that places two columns in the bottom frame of a two-row frameset
Figure 39-6: The Home and About framesets are child framesets in the btmFrame parent frame.
Figure 39-7: You can change multiple pages using the Go To URL method. Just select the frame and locate a page.
Figure 39-8: The Document Gallery offers many frameset layouts.

Chapter 40: Building Navigation with Behaviors

Figure 40-1: For greater browser compatibility, choose Show Events For ® 4.0 and Later Browsers.
Figure 40-2: The circle image swaps as you move your cursor over the buttons.
Figure 40-3: Name your button elements and select their buttons states. Add alternate text and locate the page for each button link. Click the Add (+) button to move to the next element of the navigation bar.
Figure 40-4: The Down state of the button reinforces the current location in the site.
Figure 40-5: The Contents, Appearance, Advanced, and Position screens in the Fireworks Pop-Up Menu Editor are used to modify the menu items.
Figure 40-6: The Contents screen is where you edit menu items, including their URLs.
Figure 40-7: The arrays contain the URL for each menu item, among other properties.
Figure 40-8: The Contents screen in the Show Pop-Up Menu dialog box lets you enter the text and format your main menu and submenu items.

Chapter 41: Inserting Media Elements

Figure 41-1: The Insert Flash Button dialog box options
Figure 41-2: Flash text options
Figure 41-3: The sound file and plug-in properties
Figure 41-4: Enter settings required using the Property inspector.
Figure 41-5: Flash Assets can be played in the Assets panel or in the document after a SWF is inserted.
Figure 41-6: Use the Property inspector to modify Flash movie properties or to add parameters.
Figure 41-7: Expand the Site panel (window) to enter Site Map View.
Figure 41-8: The parameter accolor sets the color for the link and makes the text look clickable.

Chapter 42: Working with Behaviors, Custom Scripts, and Snippets

Figure 42-1: Dreamweaver's behaviors. Which behaviors are available depends on what object or link is selected in the current document.
Figure 42-2: The Change Property dialog box
Figure 42-3: The Check Browser dialog box
Figure 42-4: In Netscape 4x, turn off JavaScript by unchecking the option.
Figure 42-5: Turn off scripting in Netscape 6x here.
Figure 42-6: A meta refresh doesn't require JavaScript to function.
Figure 42-7: Select the type of action needed to control your named Shockwave or Flash movie.
Figure 42-8: Use the Open Browser Window dialog box to set up your pop-up window.
Figure 42-9: The Validate Form dialog box lets you choose a form element, specify whether content is required, and then check the type of data provided.
Figure 42-10: Paste a script or type it (if you're hand-coding) into the Content field.
Figure 42-11: The dynamic date displays in the browser.
Figure 42-12: The Snippets panel comes with many predefined code snippets.
Figure 42-13: The Snippet dialog box

Chapter 43: Extending Your Dreamweaver

Figure 43-1: Notes associated with an extension provide quick-start information about the extension.
Figure 43-2: The History panel options include Save As Command.
Figure 43-3: The Save As Command dialog box is where you name your command.
Figure 43-4: Your new set of table tools

Chapter 44: Building a Dynamic Site with DHTML

Figure 44-1: Layer tools include the Layers panel, the Draw Layer object, and the Property inspector.
Figure 44-2: The completed puzzle for the Habitat Alert site
Figure 44-3: The Drag Layer basic options
Figure 44-4: The Advanced Drag Layer options include adding JavaScript alerts.
Figure 44-5: The Behavior channel is used to add JavaScript functions. They are triggered when the playback enters the frame, and use an onFrame event.
Figure 44-6: Slides with captions
Figure 44-7: The Autoplay dialog box
Figure 44-8: The Loop dialog box
Figure 44-9: The Show-Hide behavior dialog box
Figure 44-10: Submenus are written dynamically onMouseOver.
Figure 44-11: The Set Text of Layer dialog box
Figure 44-12: A sliding "What's New" menu
Figure 44-13: Add settings to open the menu in the AniMagic by PVII dialog box.
Figure 44-14: Snappy menus are a "snap" to build!
Figure 44-15: Use the Property inspector to position multiple layers.
Figure 44-16: By not selecting any layer to show, all layers will be hidden. The Set to Use menu is useful when you have other layers that are not part of the menu.
Figure 44-17: The Snap Layers dialog with two Snap actions, one for the button's menu and the other for the MenuCloser
Figure 44-18: Showing the MenuCloser and MenuLearn layers in Set Two

Chapter 45: Publishing Your Site

Figure 45-1: Check Spelling suggests changes for mispelled or unrecognized words.
Figure 45-2: The Results panel houses the Link Checker.
Figure 45-3: Check target browsers for a page, files or folders, or the entire site.
Figure 45-4: Questions in the Site Definition Wizard are designed to elicit the proper information about how you connect to your Web server and where the server is located.
Figure 45-5: The Remote Info category is accessed in the Site Definition's Advanced screens.
Figure 45-6: A successful connection test
Figure 45-7: The Remote Info panel using FTP server access
Figure 45-8: The host directory indicates the remote root folder, which ideally should mirror the structure of the local root folder.
Figure 45-9: Expand the Site panel.
Figure 45-10: Click the arrow to expand the Site window.
Figure 45-11: Connecting to the Web server reveals the mirrored Web files and folders.
Figure 45-12: File Management Put and Get options
Figure 45-13: Put or get the current document using the Site menu.
Figure 45-14: Synchronize dialog box
Figure 45-15: A preview of the proposed synchronization

Chapter 46: Building a Web Application

Figure 46-1: Dynamic, data-driven pages must be processed by the application server and a recordset extracted against a database via a query passed back and forth through a database driver.
Figure 46-2: Right-click to get the Properties of the database folder and select the Web Sharing tab to share the folder. Create an alias for the folder. Use the Edit Properties button to set up READ and EXECTUTE permissions.
Figure 46-3: Choosing how you'll test your dynamic pages
Figure 46-4: System DSNs are available to all users on the local computer or network.
Figure 46-5: The Connection String dialog box
Figure 46-6: With your connection in place, you can view fields for the tables available in your database.
Figure 46-7: Making all data columns available to the page
Figure 46-8: Complex queries built in the Advanced panel cannot be displayed with the Simple panel.
Figure 46-9: The Tag inspector is a valuable tool when working with dynamic page attributes. Be sure to expand the panel fully to view the attributes.
Figure 46-10: Insert application objects that build HTML elements with server behaviors already incorporated.
Figure 46-11: The Server Behavior menu options

Chapter 48: Creating a ColdFusion Application in Dreamweaver

Figure 48-1: The subscriber database table shown in Microsoft Access' design view
Figure 48-2: The subscriber database table shown in Microsoft Access' Datasheet view
Figure 48-3: ColdFusion MX Administrator's Datasource panel
Figure 48-4: Defining a Recordset query in Dreamweaver
Figure 48-5: The output of Dreamweaver's dynamic table function
Figure 48-6: Using Dreamweaver MX to Generate a <cfinsert> Block
Figure 48-7: The General tab in <cfmail>
Figure 48-8: The Message Body tab in <cfmail>

Chapter 49: Using Program Flow in ColdFusion MX

Figure 49-1: The output of the http_refer variable in a ColdFusion MX template
Figure 49-2: Viewing a <cfif> block in Dreamweaver's Design View
Figure 49-3: The output of one of four conditions in check_referral.cfm
Figure 49-4: Creating polldata.mdb in Microsoft Access
Figure 49-5: The output of question1.cfm when no action is passed
Figure 49-6: The output of question1.cfm when action is "Go"

Chapter 50: Using ColdFusion MX Functions

Figure 50-1: Using Left() to truncate text strings
Figure 50-2: An error message displays when a form is submitted without required data.
Figure 50-3: An error message occurs when a <cfform> element is required but is left empty.

Chapter 51: Working with ColdFusion MX Variables

Figure 51-1: The "summary" page of a sample drill-down application, showing only film titles
Figure 51-2: The "detail" page of a drill-down application, showing details on a single film
Figure 51-3: The "films" table in the ed_wood datasource
Figure 51-4: The template film_detail.cfm, when called with an ID of 14
Figure 51-5: Grouping query results by year
Figure 51-6: Displaying search results using <cfloop>

Chapter 52: Using Client, Session, and Application Variables

Figure 52-1: Collecting user preferences with a form
Figure 52-2: The result of a preference change; note that a user's preferences are saved between visits.

Chapter 53: Creating ColdFusion MX Custom Tags

Figure 53-1: Defining custom tag paths in ColdFusion Administrator
WSDL file for the weather forecast service
Using Dreamweaver MX to parse a WSDL file for a Web service
Dreamweaver MX displays a list of functions provided by the Web service.

Chapter 54: Using ColdFusion MX with Flash Remoting

Figure 54-1: Flash Remoting adds several objects to the Flash MX Actions panel.
Figure 54-2: The first frame of the Flash movie enables users to preview available ecards.
Figure 54-3: The third frame of the movie provides users with a form for entering data.
Figure 54-4: Users enter information and send the ecard from frame 3 of the movie.
You can debug your Flash MX remote applications using the NetConnection Debugger.
Using Dreamweaver MX to create a component outline
Flash MX application that provides the question-and-answer form for your component
ColdFusion MX's internal representation of your XML document object
The elements returned by a call to XmlSearch()
An XHTML representation of our school data after applying an XSLT transformation

Appendix C: Installing Macromedia Studio MX

Figure C-1: The Macromedia Flash Player 6 opens to display the install screen.
Figure C-2: The dialog box to install the Flash Player
Figure C-3: The Finish dialog box
Figure C-4: License agreement for ColdFusion MX
Figure C-5: The Customer Information dialog box
Figure C-6: The Webroot Folder dialog box
Figure C-7: The Custom Setup dialog box
Figure C-8: The Select Passwords dialog box

Bonus Tutorial 2: Making a Vector Interface, by Joyce J. Evans

The Vortex design from Photoshop Foundry at Eyeland Studio
The gradient colors changed in the Gradient editor
The position of the gradient
The effects added to the oval
The curve you are using
The Hue and Saturation settings
The Input values of the Levels dialog box
A diagram showing where to click and add points
The handle pulled out for the second point
The third point being adjusted
The fourth point being adjusted
The fifth point moved up
The fifth point's handle being adjusted
Adjusting the curve for the seventh point
Point nine being adjusted and point 10 moved into position
The eleventh point fitted to the curve
The path drawn and the stroke adjusted
Two more lines (paths) added
The Path Scrubber Subtractive tool being used to taper the path
The edge added and shaded to the center shape
Changes being made to fit the edge shape to the center burgundy oval
The finished main shape
The curve drawn using the Pen tool
The gradient colors and positions used
Two curves with the effects adjusted on one
The curves in position
A small edge being added with the Pen tool
The line cloned and the colors reversed
The lines that appear inset added to both sides
Highlights added to both curved shapes
The buttons added and effects added to them
Highlights being added to the button
The finished interface

Bonus Tutorial 3: Making a Jukebox, by Joyce J. Evans

The Mixer panel with the Alpha set to 50%
The rectangle that will cut the circle in half
The jukebox with the buttons added
The two dynamic text boxes in place

Bonus Tutorial 4: Using Paste As Mask to Build a Jigsaw Puzzle in Fireworks, by Donna Casey

Create the pieces through the use of the Combine Paths functions.

Bonus Tutorial 5: Three–Dimensional Product Display, by Joyce J. Evans

The finished lure project
The timeline of the lure Movie Clip
The first invisible button in place
The Actions panel with gotoAndStop added to the invisible button

Bonus Tutorial 6: Making a Button, by Joyce J. Evans

A gold button



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net