Teach Yourself Fireworks MX - Chapters 9, 10, 13

Notes from Teach Yourself Macromedia Fireworks MX in 24 Hours

Chapter 9 - Tools and Techniques for Layout and Design

Redraw Path Tool (P)
Select path (e.g. one you created with the Vector Path tool), then select Redraw Path Tool, when you mouseover the path, it will change color. Click on the path at the point where you want to redraw it and drag to create the new path. If you release the mouse on the original path, the path you draw replaces the existing path between these two points. If you release the mouse off the original path, the path will then end at the release point, thus eliminating all the rest of the original path beyond the point at which you began
Freeform Path Tool (O)

Select a path to edit with the pointer, then select the Freeform Path Tool. Mouseover a portion of the line. Click drag to change the position of the points and nearby points. How many nearby points are affected is a function of the size setting in the Property Inspector. To make changes along a larger segment of the path, click with the Freeform Path Tool on a blank area of the canvas. A round, red cursor will appear. Drag the cursor to change the path when it comes into contact with the outer edge of the circle. The dimension of the circle can be set in the Property Inspector or by left arrow while holding down the mouse key (to make it smaller) or right arrow (to make it bigger). The Up and Down arrows have similar effects.

Massaging Shapes with the Reshape Area Tool (O)

Two settings. Size (in pixels) is the outer limit of the cursor and strength (a percentage) is the amount of the area that is changed within the boundary of the circle. A smaller percentage means a smaller inner circle.

Combining Paths - Modify>Combine Paths>

Join creates a composite path from multiple path; any filled areas that overlap will be removed.. Joining a circle over a rectangle will create a transparent void

Split returns joined paths to their original states as separate objects

Union creates a single shape from two or more paths. Stroke and fill are taking from the path that's the furthest back in the stacking order.

Intersect creates a new area from the common area between all selected paths; stroke and fill properties are again taken from the path that's furthest back.

Punch will punch out any area in the bottom object covered by another shape, with stroke and fill properties from the bottom object..

Crop - The topmost object is used to crop. Areas in lower layers covered by the top object are preserved; areas outside of the top object are removed. Cropped paths retain their stroke and fill settings.

Alter Paths - Modify>Alter Path>

Simplify removes unnecessary points from a path, thus reducing jaggedness and file size. The setting determines the extent of removal with 1 removing the least and 25 the most points.

Expand Stroke - the original stroke is retained on the inside, the original fill is discarded, and a stroke is created on the outside, with the original fill used between the inside and outside. Other settings determine the style of the corners (miter, rounded or beveled) and the miter limit. "A miter is a joint made by beveling each of two surfaces to be joined, usually at a 45 degree angle, to form a corner, usually a 90 degree angle. The most obvious use of mitering is in the creation of picture frames."
Inset Path - Create a larger or smaller path object with the same fill and other settings as the original, retaining the aspect ratio. You can set corners to be miter, rounded, or beveled and set the miter limit. One can use clone or duplicate to create a copy of the original path and then use inset. If you use inset outside, you will want the outside to be behind the original; if you use inset inside, you will wan the inside to be in front of the original.

Converting Text to Paths

Text>Convert to Paths. The object will then be a grouped object. Modify>Ungroup will then make each character a separate path. Once you've converted to a path, you can use any of the tools in the vector group or any of the path operations in the Modify menu. However, you no longer have access to the kerning and other features of text objects.

Using Paths as Masks

You can use path objects and text as masks. Areas within the path outline (the area covered by the mask's fill will be visible, those outside will not be. There are various ways to add a mask. Here is one way:

(1) Using a path object as a mask - Bring in the object to be masked. Draw the path such as a rectangle. Change the fill to none so that you can see the object underneath the path. Select the path and choose Edit>Cut. Select the image and then choose Edit>Paste as Mask The stroke on the rectangle disappears when you made it a mask. If you wnat to show the stroke, then in the Layers Panel and look for the icon for the mask -- it will be on the right and contain a small pen, for vector. Click on the mask icon and then in the Property Inspector select Show Fill and Stroke. You can change the stroke settings in the Property Inspector. (from p. 234-237; Macromedia Fireworks: Training from the Source)

(2) Using Text as a Mask - Bring in the image to be masked. Select the text tool and type the text. Select the text and choose Edit>Cut. Select the image and then choose Edit>Paste as Mask (from p. 240-Macromedia Fireworks MX: Training from the Source).

Guides, Rulers, Alignment

View>Rulers. Click in the top ruler and drag in horizontal guides, click in the left ruler to drag in vertical guides. View>Guides>Show Guides toggle to hide or display guides. View>Guides.Snap To Guides

Laying out and Drawing with the Grid - View>Grid>Show Grid toggles to hide or display grid. View>Grid>Edit Grid to control grid. View>Grid>Snap to Grid is similar to snap to guides.

Aligning objects with the Align Panel or Align commands on the modify menu - With the Align panel, you can select the To Canvas button to align things relative to the canvas or the Anchors button to align points selected with the Subselection tool. A lot of alternatives which will take some playing around with to understand their behavior

Chapter 10 - Tricks of the Trade

Gradients

A gradient is a fill that gradually shifts between two or more colors. Choose Fill Options from the Fill cateogry menu next to Fill Color on the Property Inspector. The options range from Linear to Folds. There are about 13 preset colors, or you can click the Edit button to customize the color and transparency settings. The top slider sets the transparency of the gradient, and the color sliders are shown at the bottom. Click and drag the sliders. You can eliminate a slider by dragging it off the bar, and create a new slider by clicking.

After you choose a gradient style and colors, you can can change how the gradient is applied relative to the object. Select a gradient filled object with the pointer tool and handles will appear. The round handle is where the gradient starts or is centered, depending on the type of gradient. The square handles define the range and angle of the gradient. You can save the gradient fill as a style. Click the Add Effects button in the Property Inspector and choose Save as Style from the Options menu. Save the style, making sure that Fill Type is selected among the Properties check boxes. You can access it from the Style panel.

Using Preset and Custom Patterns

Select the object with the pointer and choose Fill Options after clicking the color swatch. Chosse Pattern from the Type menu. When a pattern fill has been applied to an object, pattern-fill handles will appear when the object is selected with the Pointer tool. Moving the round handle changes were the tiling is centered relative to the object, and moving the square handles will skew or scale the tiles in the pattern.

Advanced stroke options

Choose Stroke Options from the drop down menu on the Property Inspector next to the stroke color swatch. You can select a number of options from this menu or for additional options, click the Advanced button to bring up the Edit Stroke dialog box which has tabs for Options, Shape, and Sensitivity. (p. 219-220)

Adding effects to vectors

Effects can be applied to any object, including bitmaps, paths, text, and groups.

Gaussian blur

Drop Shadow will make the object appear lit from the front. To create a bigger shadow, increase the offset. You can specify the color and opacity of the shadow, and change the angle to reflect the angle of the light source. Use Knock Out to treat the shadow as a separate object and to remove the original object from the effect output

Inner Shadow simulates shadows cast on the object by other objects

Glow and Inner Glow make an object appear to be a source of light.

Bevel and Emboss to give a 3 dimensional shading to an object - often used for buttons on a website to make them appear more like real push buttons

Chapter 13 - Working with Flash MX

Exporting from Fireworks as a Flash SWF file

File>Export. From the Save As type menu, select Macromedia Flash SWF. Click the Options button to bring up Flash export options. For vector objects, you choose between Maintain Paths or Maintain Appearance. The former results in smaller file sizes but effects, textures, and patterns won't be there unless you choose Maintain Apperance. For text, you have a choice between Maintain Editability and Convert to Paths. JPEG quality affects degree of compression to bitmap objects and vectors that have been rendered to maintain appearance, and you can also set the number of frame rate and number of frames. An alternative to doing File>Export is to click the "fw" icon on the upper right hand side of the document workspace.

Working with PNGs in Flash

Exporting to a Flash file from Fireworks does not preserve layer information and images shared across frames will be repeated, thus creating larger file sizes, so normally it is better to import PNGs directly into Flash rather than to export from Fireworks

Import options - Import as movie clip and retain layers vs. import into new layer in current scene; vector paths and objects (rasterize if necessary to maintain appearance vs. keep all paths editable), text (rasterize if necessary to maintain appearance vs. keep all text editable), or Import as a single flattened bitmap. The disadvantage of keep all editable is that unsupported effects are completely lost if not supported in Flash. Even if you have chosen to retain layers, the image will initially appear as a single object; to see all the layers, double-click the symbol on the stage.

Exporting as GIF or JPEG from Fireworks for Image Call

In Flash MX, you can use the loadMovie command to load SWF animations, JPEG images and MP3 sounds from external files. These files are dynamically loaded; if the image changes, you don't need to delete the old instance of the image in the Flash movie, insert the new instance, redo anything you did in Flash, and then publish the Flash movie again if the content of one of these files is changed . If done this way, the relationship between a Flash movie and an image or sound file can be the same as between a web page and an image or sound file; both the Flash movie and the web page will reflect any changes made in the image. (File for example on p. 275-278)

Exporting from Flash to Fireworks

Choose the frame on the Timeline or within a symbol you would like to export, then File>Export and choose the format. If you want to preserve vectors for editing, choose EPS or Adobe Illustrator format. You will get a choice regarding image dimensions and format options. To export an entire movie as a sequence of images, File>Export Movie and then make format choice.

Revised: October 10, 2003. Comments to William Pegram, wpegram@nvcc.edu