Scott Fegette

October 31, 2005

Studio 8 Case Studies - Got Content?

Have you been using the Studio 8 products to create your online content? Got some interesting work to show? Not averse to being featured in a case study and getting tons of exposure? If your answers to the last three questions are a resounding "yes" (and you missed Mike's post earlier this evening), the Studio product marketing folks are currently looking for some reference customers, and would be interested in checking out your work. Should you (or even someone you know) fit the bill, please drop a comment on this post with some details (or email me directly at sfegette AT macromedia DOT com) and I'll be sure to pass your info along for consideration.

Posted by sfegette at 07:33 PM | Comments (2)

September 06, 2005

FOTD 21: Fireworks 8 - Feature Frenzy

A week or so ago we took a look at one of the new/updated panels in Fireworks 8 (the Image Editing panel), and today I'm going to run down several more that you'll find useful once you get version 8 in hand- the Auto Shape Properties, Special Characters and Align panels, and the new Add Shadow command in Fireworks 8.

First up, if you were a fan of Auto Shapes in Fireworks MX 2004, you'll want to check out the added flexibility/precision the new Auto Shape Properties panel will afford you in Fireworks 8. Simply call it up from the "Window > Auto Shape Properties" menu option:

In a nutshell, the Auto Shape Properties panel gives you direct, numeric input control over the properties of your currently-selected Auto Shape - in this case an Arrow object, as well as allowing you to insert a new Auto Shape into your document at any time. It works directly with the Auto Shapes noted below:

• Arrow
• Beveled Rectangle
  
• Chamfer Rectangle
• Connector Line
• Doughnut
• L-Shape
• Pie
• Rounded Rectangle
• Smart Polygon
• Spiral
• Star
• Add Shadow (new Command- see below)

The editing interface presented in the Auto Shape Properties, of course, will differ based on the currently selected/inserted Auto Shape (all three Rectangle Auto Shapes share the same 'Rectangle' editing interface, however).

As an added bonus for the Rectangular shapes, you can also opt to either 'lock' the shape corners in order to edit their properties in synch with one another, or edit each corner's properties separately. The 'Corner Style' toggle buttons allow you to change between Rectangle styles (Standard, Bevel, Chamfer) either on a corner-by-corner basis (if the 'Lock' is disabled), or as a group.

For radial objects, you can even specify segments of the object- by degree (FAR easier than creating these types of cuts by hand!), illustrated here with a Doughnut shape:

And except for the Connector Line, all Auto Shapes still behave and act as they did in Fireworks MX 2004. On that note, the Connector Line Auto Shape was updated for Fireworks 8, however- it now snaps to an object, directly below a control point- making charting/wireframing/flowcharting much much easier as well! I honestly didn't use Auto Shapes much in the past, but can see myself using them much more now that I can quickly edit and/or initialize them to exact dimensions.

You may have noted that Fireworks has been rather limited in cases when you needed to set special characters in your image text- you usually had to copy the character from another application, then paste it into Fireworks directly (or use other, less pretty 'hacks') to get the extended characters inserted correctly. That little annoyance will plague you no more...

... with the new Special Characters panel in Fireworks 8.
Just click the appropriate button, and insert special/extended characters as needed. If this limitation ever got in the your way of your project workflow speed before (especially when doing international sites, in my experience), you'll know exactly what I'm talking about when I say this is a long-needed and very, very welcome new panel addition to Fireworks. ;-)

The Align panel also got a facelift, mostly to make it more consistent with the rest of the application:

... considering I use the Align panel constantly, the added consistency in Fireworks 8 is a very welcome aesthetic improvement. If you haven't explored the Align panel before, you should make a point of doing so when Fireworks 8 ships- it's a very flexible panel for getting your designs perfectly lined-up and crisp- the ability to 'cascade' alignment to downstream/upstream anchor points is very useful, for example.

Another new feature (actually, it's a specialized new Auto Shape, from my perspective), is the 'Add Shadow' command (found via the menu option "Commands < Creative < Add Shadow..."). Rather straightforward, simply select an object on your canvas and apply the command, and you'll get this new Auto Shape applied to it:

From there, simply manipulating the direction/perspective handles and gradient color/dispersion will let you quickly apply- and customize- a cast shadow on your Fireworks drawing objects. This is a serious timesaver- in vector apps I've gotten used to simply making a copy of the object, skewing and offsetting it, shifting it to a lower layer and then adding the gradient fill to simulate the shadow's falloff- but with this command it's a pretty point-and-click experience. For example, changing the perspective of the shadow is a one-click job:

You'll still want to use the Drop Shadow effect for drop shadows (even, isometric shadow simulating the object/layer 'hovering' above its background), this command/Auto Shape will cover the rest of your shadowing needs.

So as with the last two Fireworks FOTDs, this feature of the day is actually a few rolled into one- as there are really so many little (but important) updates that I fear they'll get overlooked once you see how much faster and expressive - especially on Macs - Fireworks 8 is. Hope you had a great 3-day weekend, and I'll see you back tomorrow for another feature highlight!

Posted by sfegette at 02:25 PM | Comments (1)

August 31, 2005

FOTD 18: Fireworks 8 - All the Small Things

Fireworks 8 has a lot of small tweaks, changes and updates that to me, aren't necessarily big enough for a dedicated feature - so for today's FOTD I wanted to cover a bunch of small tweaks that collectively make for a much, much more flexible imaging tool. There's a lot to cover (and this post won't even get close to covering them all), so let's get started!

Layer Improvements
First, in Fireworks 8 you can lock objects individually within the Layers panel- unlike Fireworks MX 2004 and earlier, which only supported locking by layer (including all objects within that layer).
Secondly, Text layers are now automatically named with the text that you've placed, making it easier to differentiate between multiple text layers (and of course you can rename them at will to even more relevant titles). The combination of these two makes for a much more intuitive Layer panel, if you ask me. ;-)

Blend modes
26 new Blend modes were added in Fireworks 8 (!!), so along with your old favorites you've now got these options for blending from both the Object Property Inspector as well as the 'Blend' drop-down menu in the Layers panel (and where these correspond 1:1 with Photoshop's blend modes, they are maintained correctly both when exporting a PSD from Fireworks as well as when importing a PSD from Photoshop):

1. Average
   This mode is commutative (base and blend color can be swapped). It returns the same result, when opacity is set to 50%.
2. Negation
   This blend mode is the "opposite" of difference mode. Note that it is NOT difference mode inverted, because black and white return the same result, but colors between become brighter instead of darker. This mode can be used to invert parts of the base image, but NOT to compare two images.
3. Exclusion
   This blend mode approximates Photoshop's Exclusion blend mode, and creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.
4. Hard Light
   This blend mode multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image.
5. Soft Light
   This blend mode approximates Photoshop's Soft Light blend mode and either darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image.
6. Fuzzy Light
   This mode is very similar to the Photoshop soft light mode, for dark blend colors it is identical, for bright ones it does not share the disadvantage of the Photoshop soft light mode.
7. Color Dodge
   This blend mode approximates Photoshop's Color Dodge blend mode, and looks at the color information in each channel- brightening the base color to reflect the blend color by decreasing the contrast. Blending with black produces no change.
8. Color Burn
   This blend mode approximates Photoshop's Color Burn blend mode and looks at the color information in each channel- darkening the base color to reflect the blend color by increasing the contrast. Blending with white produces no change.
9. Inverse Color Dodge
   This blend mode is more or less same as color dodge mode, but base color and blend color are swapped.
10. Inverse Color Burn
    This blend mode is more or less same as color burn mode, but base color and blend color are swapped.
11. Soft Dodge
    This blend mode is a combination of both the Color Dodge and Inverse Color Burn mode, but much smoother than both. The base image is darkened slightly, with very bright blend colors "dodged" in .
12. Soft Burn
    This blend mode is a combination of Color Burn and Inverse Color Dodge modes, but much smoother than both. The base image is lightened a wee bit, with very dark blend colors "burned" in.
13. Reflect
    This blend mode is useful when adding shining objects or light areas into your images. The formula is very similar to a color dodge, but the result is less bright (in most cases), looking a bit like Soft Light.
14. Glow
    This blend mode is a 'harsher' variation of Reflect mode (base and blend color are swapped). The result appears a bit more like the Hard Light blend mode.
15. Freeze
    The Freeze blend mode is yet another variation of the Reflect mode (base and blend color are inverted, and the result is inverted again).
16. Heat
    Another variant of the Reflect mode, similar to Freeze mode but with the base and blend colors swapped.
17. Additive
    The Additive blend mode looks at the color information in each channel, and adds the base color to the blend color.
18. Subtractive
    The Subtractive mode also looks at the color information in each channel, subtracting the base color from the blend color.
19. Subtract
    Forgive me, but I didn't have time before posting to really dig into the difference between Subtract and Subtractive. Sorry! I'll repost more detailed info shortly on this.
20. Interpolation
    This blend mode somewhat combines both the Multiply and Screen modes (and appears similar for very dark or bright colors).
21. Stamp
    This blend mode is similar to Average mode, and is particularly useful when applying relief or "bump" textures to images. Gray blend colors do not change the background, brighter or darker colors make the background either brighter or darker. The result can become very extreme, so this mode works best with mid-range colors.
22. XOR
    Both the base and blend color are combined using a binary XOR operation. The result looks very strange if used on normal images (like photos). Much like Difference, Exclusion and Negation modes, the XOR mode can be used to invert parts of the base image, and to compare two images (resulting in black pixels where they are equal). While XOR mode can be compared to exclusion, a logical AND mode could be compared to multiply, and a logical OR could be compared to screen mode. Don't sweat the math, though- you'll really want to play with this in practice once you get your hands on Fireworks 8. ;-)
23. Red
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
24. Green
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
25. Blue
    As opposed to the modes above, the Red, Green and Blue blend modes don't work on all channels of both images- but instead take the appropriate channel from the blend image, and the other channels are taken from the base image.
26. Overlay
    Overlay blend mode multiplies or screens the colors, depending on the base color. Patterns or colors overlay existing pixels, while preserving the highlights and shadows of the base color. The base color is not replaced- but is mixed with the blend color to reflect the relative lightness or darkness of the original color.

(much thanks to the eng/QA teams for documenting these well!)

'Live' Marquee settings
So you've got a complex selection marquee active, and you realize that your feathering settings aren't just right. Or the tolerance of the magic wand tool isn't quite what you wanted. In Fireworks MX 2004 and earlier, you had to drop and reselect the region after making settings changes to marquee/selection tools, but in Fireworks 8 you can change these on the fly without losing your selection. Make sure to check the 'Live Marquee' checkbox in the PI for your selection tool to turn this new feature on.

Save and Export - Smarter Default Folders
When you're saving libraries/styles/image files/etc., you won't have to worry about re-navigating to where you last saved to- Fireworks got a brain here in v8, and will remember the last path you saved to, even after restarting- a serious productivity boost if you're working with a lot of images or assets.

Undo in Preview Mode
Yep- you heard right- you can revert prior changes in the Preview pane, so make those relative changes with wanton abandon and just hit Control/Command-Z to revert 'em one by one. Very handy for when you're just visually previewing a bunch of different compression/format options and need to step back- save your brainpower for more important tasks.

Fonts
Fireworks now remembers the most recent fonts you've used, and displays them at the top of the font lists so you don't have to scroll endlessly (my experience, having a zillion-plus fonts installed on my machines) to get back down to Zapf Dingbats, should you use it a lot (yikes).

Save Multiple Selections
As opposed to prior versions of Fireworks that would only allow one marquee selection to be saved per PNG file, you can now save, restore, and name/rename multiple marquee selections within your PNG source files. Very cool!

If you've read this far, you're probably getting the picture I came to after diving into Fireworks 8 for the first time a few months ago- although at first glance the 'gee whiz' features seem more evolutionary than revolutionary, the amount of small, reasonably-unearthed workflow and productivity enhancements in v8 - in my opinion - are worth a heck of a lot more collectively than the sum of their parts.

Hope you enjoy all these little enhancements as well- and I'll catch you again tomorrow for FOTD 19!

Posted by sfegette at 12:55 PM | Comments (0)

August 30, 2005

FOTD 17: Flash 8 - Fireworks Import

I do a lot of asset generation in Fireworks, and often these assets are headed towards Flash. In Studio MX 2004, there were a few hitches in that workflow, primarily in that any blend modes and effects needed to be rasterized, and vector paths from Fireworks always showed up in Flash as grouped objects. If you follow a similar workflow, you'll be glad to hear that things have shored up here quite a bit in Flash 8.

First and foremost, I've gotten rather accustomed to the Effects in Fireworks, primarily the Drop Shadow filter (which gets used constantly for both subtle and not-so-subtle effects). When importing a Fireworks PNG with a single object and it's applied Drop Shadow effect into Flash MX 2004, you had the not-so-enviable choice of either rasterizing the entire object and effect (losing editability) or ignoring the effect entirely (and requiring you to recreate it within Flash).

In Flash 8, however- many of the Fireworks effects are supported natively, and you'll be presented with a slightly different dialog box when attempting to import a PNG from Fireworks:

As you can see, you now have the option to import the entire file as a movie clip (retaining layers and blend modes), or import the file into a new layer in the current scene. You can have Flash 8 rasterize the file (as in previous versions), or keep your Fireworks objects fully editable (much preferred, in my opinion). Text can be handled separately as well- either rasterizing right away or maintaining it's editability in Flash. Tons of options are available, you may just find yourself using Fireworks a lot more now than you have in the past. ;-)

So in a nutshell, a Fireworks object with a Drop Shadow applied looks like this in Fireworks 8's property inspector:

... and after importing to Flash 8, the Drop Shadow appears as so:

Now of course not all of the Fireworks Effects are supported in Flash 8- this is the list of supported effects (and how they map to Flash 8's filters):

• Drop Shadow
  (maps directly to a Flash Drop Shadow Filter)
  
• Solid Shadow
  (maps to a Flash Drop Shadow Filter with the Blur X/Y radius at 1)
  
• Inner Shadow
  (maps to a Flash 8 Drop Shadow Filter with 'Inner' checked)
  
• Blur
  (maps to a Flash 8 Blur Filter with the Blur X/Y radius at 1)
  
• Blur More
  (maps to a Flash 8 Blur Filter with the Blur X/Y radius at 1)
  
• Gaussian Blur
  (the standard Flash 8 Blur Filter)
  
• Adjust Color Brightness
  (maps to the Flash 8 Adjust Color Filter)
  
• Adjust Color Contrast
  (maps to the Flash 8 Adjust Color Filter)
  

Any other Effects in Fireworks will be either rasterized or ignored when imported to Flash 8- but knowing how these map to one another will greatly help you set up your Fireworks files for best Flash import, the new importer is certainly a better option than either rasterizing or dropping entirely your Fireworks effects.

As Flash MX 2004 didn't support blend modes, there was never a direct option for importing Fireworks objects you've layered in this respect, and you again needed to rasterize it first, losing any editability. In Flash 8, however (which does support blend modes), you'll have much less hassles in this respect, as blend modes are maintained when importing your Fireworks PNGs. But as Fireworks supports a LOT more blend modes than Flash 8, these are the key blend modes you can use in Fireworks and still keep intact/unrasterized when importing to Flash.

• Darken
• Multiply
• Lighten
• Screen
• Overlay
• Hard Light
• Additive
  (Maps to Flash 8's Add blend mode)
• Subtractive
  (Maps to Flash 8's Subtract blend mode)
• Difference
• Invert
• Erase

This small update to Flash 8 should prove to be very helpful indeed when comping in Fireworks, then moving your assets around between Studio apps- for example, slicing up a Fireworks comp for integration in Dreamweaver, exporting its buttons/assets as individual PNG files for Flash development, and making sure you can maintain editability across the board. Enjoy- and I'll see you tomorrow for FOTD #18!

Posted by sfegette at 03:20 PM | Comments (7)

August 24, 2005

FOTD 13: Fireworks 8 - Image Editing Panel

Fireworks 8 got some very nice updates this release, and several of them are in the form of new SWF-based panels that either extend, or consolidate groups of functionality in Fireworks around key tasks. Today I'm going to shine a flashlight on the new Image Editing Panel in Fireworks 8- which is basically a handy centralized location for all the functions you'll need the most when editing digital photos, design comps and other bitmap images. Let's take a look.

You can bring up the Image Editing Panel (if it's not already displayed in your 'panel stack') by choosing "Window > Image Editing". Across the top you'll find 7 icons, from left to right they are:

• Red Eye Removal Tool
• Crop Tool
• Rotate
  (functionally the same as the crop tool, which serves both purposes)
• Blur Tool
• Sharpen Tool
• Dodge Tool
• Burn Tool

As you'd expect, these icons simply allow you quick access to the most common tools used during image editing. But there's a lot more hidden in the 'subsection menus' beneath the icons. Let's step through these next.

Transform Tools
These tools apply the following commands to a selected object:

• Free Transform
• Scale
• Skew
• Distort
• Free Rotate

Transform Commands
The Transform Commands menu lets you apply the following commands to selected objects:

• Numeric Transform
• Rotate 180 Degrees
• Rotate 90 Degrees CW (Clockwise)
• Rotate 90 Degrees CCW (Counter-Clockwise)
• Flip Horizontal
• Flip Vertical
• Remove Transformations

Adjust Color
You can apply the following filters to a selected object from within the Adjust Color menu:

• Auto Levels
• Brightness/Contrast
• Curves...
• Hue/Saturation...
• Invert
• Levels...
• Convert to Grayscale
• Convert to Sepia Tone

Filters
Some of the most common filters used in Fireworks can be quickly accessed via the Filters menu:

• Blur
• Blur More...
• Sharpen
• Sharpen More...
• Unsharp Mask
• Add Noise
• Convert to Alpha
• Find Edges

View Options
And finally, the View Options menu gives you quick access to some of the more common view options you may want to toggle on/off while editing images:

• Show/Hide Rulers
• Show/Hide Grid
• Snap/Don't Snap to Grid
• Edit Grid...

Now of course this panel doesn't add new functionality in Fireworks, it helps consolidate your options and streamline your workflow- which you'll find a common theme throughout the new Studio 8 products. Personally speaking, I find the Image Editing panel a great time-saver to have out and floating next to my image - especially when I'm working with a Wacom tablet and stylus - so I have virtually all the options I'll need close at hand without needing to wander the menus. If you find this type of feature interesting, then by all means leave a comment and let me know- there's more 'workflow-centered' panels like this added to Fireworks 8 that I could talk more about, if you're interested. See you tomorrow for FOTD #14!

Posted by sfegette at 11:53 AM | Comments (13)

August 17, 2005

FOTD 08: Fireworks 8 - Save to Bitmap

Sometimes small updates can be important ones to note. Have you ever just wanted to open an image up in Fireworks and save it out as another format? If so, you've noted this requires an export step in earlier versions of Fireworks- not particularly intuitive for those familiar with other image-editing applications. In Fireworks 8, however, you can simply open an image and select "File > Save As..."?, choose from the variety of export filetypes that Fireworks supports, and you’re done converting the format. Sure, this isn’t exactly a huge new feature, but for adding more options to your image editing workflow, it could be a timesaver nonetheless- and a great example of the strong focus on expanded/improved workflow in Studio 8.

Now this workflow tweak might be a bit confusing to Fireworks old-timers, however- where the Fireworks PNG file was always treated as sacred property- the holy source from which all 'flat copies' were created. So how does this new Save As feature actually affect you in practice?

Well, if you open a PNG source file, the default Save option still saves back to PNG- no change there. You can still treat your PNGs as your 'clean source' files, and export them to other formats if/when needed. If you use Save As... to save the original PNG image as another format, however- your open, working image will then change to the newly-specified format, and any Fireworks-specific edits made since you either opened or last saved the original PNG file will be lost.

If you've opened a non-PNG format file such as GIF, JPEG, PSD, TIFF (et al), Save As... will default to the image's original format- not PNG (key change of note from prior versions of Fireworks, which would save any edited non-PNG source file to PNG by default). In case you're concerned that this new 'Save As' functionality could result in losing work, here's what the 'Save As' dialog looks like if your open document is not in the PNG format, and you've made changes that aren't supported by that format:

As such, I'd recommend using your existing PNG workflow (exporting) for key asset files in your project (to maintain a clean PNG source to work from), and using the 'Save As...' feature to quickly convert and/or flatten a specific image (watch that 'warning' section for format mismatch alerts, of course!). Now you may be wondering what happens if you open, for example, a GIF image, make edits and hit command (control)-S to Save the document instead of 'Save All'. This scenario (which honestly, I find the most frequent in my own day-to-day usage) provides even more verbose feedback before committing anything to disk- you'll be presented with the following dialog and options:

This makes it reasonably certain that if you're starting from a non-PNG format and make a bunch of Fireworks-specific edits to it, hitting "command(control) + S" (or choosing "File > Save" won't assume you want to lose the editability of your changes by saving back to the original format, and gives you the option to choose which format to save back into- select PNG if you want to preserve all your edits, of course. However, for those times where you quickly want to open a file, add a quick change and save it back, you can also cut out that export step here too, if you really want to. Personally I like having source PNG files for everything, this just gives me a few options I didn't have before in case the extra 'save as PNG'/export steps aren't necessary. You choose what's best for your own workflow.

Note that 'Save As...' always saves a copy of the currently-opened file- so if you open a PNG file, add some layers and text, then use the new 'Save As...' functionality to save the image to JPEG, for example- you won't have modified anything in your original PNG file, and will have instead saved a flattened, JPEG version of that PNG file reflecting all the changes you've made- and losing any chance of editing the newchanges you've made. Key point to note- just to be on the safe side.

So as with any feature that changes established workflows, I'd recommend stepping carefully into your exploration and use of this new 'Save As...' functionality in Fireworks 8 to get a handle on it before diving into complex projects- but for all those instances where you've wished Fireworks was as quick at basic image conversion as it is deep for involved design and asset generation, this little v8 feature update could help quite a bit. Although I was a bit apprehensive at first in regards to how it would affect my own workflow (and any potential for data loss), honestly- I've grown to rely on this particular FW8 feature much more than I would have expected. Hope you do too!

Enjoy!

(side note: keep posted to Greg Rewis' blog for Captivate simulations of these daily features, too- he's a little backlogged now due to his travel schedule but will be putting more up shortly!)

Posted by sfegette at 11:54 AM | Comments (6)

August 10, 2005

FOTD 03: Fireworks 8 CSS Pop-Up Menus

One of the most popular features in previous versions of Fireworks had to be the pop-up menu generator. However, despite being handy and popular, these menus had a lot of inherent problems that became evident over time (not search engine friendly/indexable, difficult to customize after the fact, maintained links in JS files, etc.). The new CSS Popup Menus feature in Fireworks 8 is a much different story, however- much more robust than any prior 'stock' pop-up menu features in Fireworks or Dreamweaver (although I still recommend learning the basics of menu generation yourself as well- visual tools are great, but understanding the underlying principles is a skill worth cultivating). Here’s the basic rundown for creating pop-up menus in Fireworks 8.

So, we've got a plain-Jane navigation bar in Fireworks that needs some help- we want to add a drop-down menu to the 'Products' section to allow deeper navigation from the menu. Just select a slice or hotspot on your image (this demo made with hotspots for simplicity's sake), then choose “Modify > Pop-Up Menu > Insert Pop-Up Menu...�?. You’ll then be presented with the swanky new Pop-up Menu Editor interface, shown here:

Within the Pop-up Menu Editor interface, you'll find a preview pane at the top, and tabs for Content (manage your links, targets and text labels for the menu itself), Appearance (selection of the color and font themes, style and type of menu), ‘Advanced’ (width, height, padding, spacing, borders and their colors for the menu items themselves), and ‘Position’ (i.e. the x/y offset and placement of the menu in relation to the hotspot/slice that activates it). Let's step thru these options one by one.

First, we've added some entries to the pop-up menu (see above screenshot) by clicking the '+' icon at the top of the list box (or just double-click in the 'ghosted' first entry to start typing), and then entering the link, text label for the menu item, and (if necessary) a target for the link. I generally don't use target attributes, so will leave that column blank if you don't mind. ;-)
For submenus, enter and order your content, then use the two indent/outdent buttons (right underneath the Content tab, for the curious) to 'indent' a given line as a submenu item- it will eventually become a submenu underneath the next highest 'parent' entry. Next, let's click on the 'Appearance' tab, to give our pop-up menu a more custom look. Here's the options available within 'Appearance':

Within the Appearance tab, you'll find the following options:

• Cells: HTML or Image
  Specify whether your pop-up menu will be straight HTML, or use images as their background.
• Vertical/Horizontal drop-down menu
  Choose whether your pop-up menu will fly out vertically, or horizontally.
• Font/Size/Style
  Choose the font(s) and font size used for your drop-down menu's text, and both their formatting and alignment.
• Up State/Over State
  Select the background and text color for both the default and 'active' (i.e. the mouse is over it) menu choices.
• Image Styles
  If you have chosen 'Image' as your cell type, you can choose a style for your button's background here (not shown in this screenshot).
• Preview
  As you'd expect- you can preview your changes in realtime down in the bottom-most pane.

For purposes of this demo I've just chosen the HTML style of menu, of course. Let's take a look at what you can specify in the 'Advanced' tab next:

The Advanced tab lets you specify the menu's cell width/height, padding and spacing (width/height can be either a pixel value, or automatically generated), along with a default indent for your menu items and a delay (in closing the menu after a user's mouse has rolled off the 'hotspot'). You can also choose whether to show borders on your menu, a width and color for that border, and whether a shadow/highlight should be added to each menu entry. Next up, the 'Position' tab:

Within the 'Position' tab, you'll tell Fireworks where you want the pop-up menu displayed, in relation to the hotspot/slice it's attached to. You can choose to have the menu pop up to the left, right, top or bottom of your hotspot/slice, and customize it as needed in pixel values to get things 'just so'.
You can also specify (and/or override) the offset value for your submenus, within the 'Submenu Position' section. Options include offset and aligned with the bottom of the parent menu item, offset and parallel with the parent menu item, or aligned with the bottom/center of the parent menu item. The checkbox can be toggled to make the submenu appear at the exact location of the parent item as well, if that's your intent.

Click "Done", and you’ve just created your pop-up menu! All you need to do now is select the "File > Export..." menu option, and click the 'Advanced' button next to the 'Export' drop-down menu (which should be set to "HTML and Images"). In the first (General) tab of the Options dialog, make sure 'Use CSS for Popup Menus' is selected, and 'Write CSS to an external file' if that's your preference.

Continue your Export process as usual, and you're done!
(Make sure to check out Greg Rewis' blog for a Captivate simulation of this feature, as well. He should have it live shortly after this post goes out- if it isn't live already, FYI.)

One caveat- this feature is in Fireworks and not in Dreamweaver, so you won't be able to round-trip Fireworks popup menus in DW 8 (but as always, you can dive into code mode and hand-tweak if you so desire). And although I strongly recommend learning how to build CSS pop-up menus by hand (and using lists to do so- which really helps both for keeping your (x)html clean and flexible), if you need quick and simple pop-up menus, this feature will definitely be of interest. Of course, there are a wide range of amazing third-party extensions and options for pop-up menus that can offer far more options (pop-up menus have proven VERY popular in the extension development community) - but it's nice to know there's a reasonable, default option available within Studio 8 right out of the box that doesn't rely solely on Javascript to get the job done. Enjoy!

Posted by sfegette at 11:15 AM | Comments (18)