• home
• services
• portfolio
• contact
• happenings
• Style Switcher
• street sign
• circles

Yamada International House

SEOMUG Spring <br> 2006

Fireworks 8: Tips & Tricks

If you are not using Fireworks 8 (or any other version) for your web design projects, then you should be. It’s flat out the best application for both Mac and PC for delivery of everything website driven, from building website designs complete with interactivity to standalone image optimization and manipulation. It also works great with all things Macromedia (or is it Adobe?).

Learn why you need to start using Fireworks for your web design needs.

Chris Bate has been in the web design industry for 10 years.. He has worked with such firms as Saachi & Saachi Melbourne, Reality Mechanics in Australia and currently works for Electronic Vision in Athens Ohio. Chris specialized is CSS based, template driven designs that are easy to navigate and update.

Ask Chris a Question

Please post you question on GoogleGroups for all to see. Ill answer them as guickly as possible.

http://groups.google.com/group/seomug-06

	SEOMUG Fireworks 06
	Browse Archives

Ohio Univerisity Faculty, Staff & Students

Go to Safari Tech Books Online to Read Any Tech book in their library for FREE. This is avaliable if you are accessing the site from within the OU network. You can also access this area from home via the Alden Library somewhere, but i don't know exacly. Ask a Library employee for more details.

FireFox Web Developer Toolbar

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Click HERE to get the Web Developers Toolbar

Fireworks Extensions:

Download the extensions I'm using in FW8 right now.

If you need to import a Photoshop file in to Fireworks while converting Photoshop Layer Sets to Fireworks Layers, follow the link to get the Photoshop Distribute to Layers addition from Macromedia.

IE 7 Standalone Install Notes + Expand

Sure, you knew IE7 Beta 2 was up on MDSN, but you don't have a free machine to test it on. Can't install it on your main work machine, because you can't afford to mess it up... plus, you need to be testing your work against IE 6, right?
You thought about setting up a Virtual PC image, but it seemed like too much trouble for a Beta 1. Still, it would be nice to click around in it for a few minutes here and there...
Fret no more! IE has a secret standalone mode which lets you run multiple versions side by side (thanks to Joe Maddalone for figuring this out).
It's pretty simple:

• Download the IE7 Beta 2 Install from MSDN
• Open the install file with WinRAR (yep, it's an EXE, but it's a self extracting EXE) and extract them to a folder. Alternatively, you can just run the EXE, make a copy of the files which are extracted in the first step, and cancel the install. I was too chicken to do this on my work computer.
• Look in the folder you extracted to for the file SHLWAPI.DLL. Delete this file.
• Create a new text file in the folder, then rename it to IEXPLORE.exe.local.

That's it. The .local file in the folder tells the IExplore.exe instance to run in local mode, which means it won't mess with your IE6 settings, registry, etc. It sounds complicated, but it takes less than 10 minutes and it goes just great with your Friday morning coffee. Of course, you can help your friends at work (who also have MDSN subscriptions, of course) by zipping the folder and sharing it with them so they don't have to go through this crazy mumbo jumbo.
Incidentally, there are archives of old IE versions converted to standalone mode over at browsers.evolt.org and at skyzyx.com. C'mon, spend a day with IE3 for old time's sake!

Presentation Notes:

This workshop will cover the following: + Expand

USING THE BUTTON EDITOR + Expand

Choose Edit > Insert > New Button to access the Button Editor.

The Button Editor is a separate window where you design your button. All of the tools and panels are available just as they are in the standard document window. If your Fireworks document window is maximized in Windows, the Button Editor will open as a maximized window as well.

Notice the five tabs at the top of the Editor. The Up tab is where you create the normal state of your button. The normal state is the look of the button as it initially appears on the page. The other states of the button are based on this state. Although you can adjust the button later, it is much easier if you make your adjustments now. You know: Get it right the first time!

Select the Over tab to create the rollover image. Click Copy Up Graphic to make a copy of the original button

Adding a New Button

Choose Window > Library to view your button in the library.

The Library panel is docked within the Assets panel group. You could also click the disclosure triangle in the Assets panel group and then click the Library tab.

Double-click the name in the list. In the Symbol Properties dialog box, type a descriptive name and then click OK.

Drag the button name from the Library list to the page.

Select the second button. In the Property inspector, change the text label to Facts & Recipes and then press Enter (PC) or Return (Mac).

Changing Your Buttons

Click the Original button and then double-click any button on the page.

This opens the Button Editor. You can also double-click the button icon or the button image in the Preview pane of the library.

Tip: If you click the name of the button instead of the icon of the button in the Library list, the Symbol Properties dialog box opens instead of the Button Editor. You can then click Edit to open the Button Editor.

CREATING SLICES + Expand

Adding a Slice

You can add a slice to the page in several ways. You can use the Slice tool and draw the slice, or you can select an object and have Fireworks create the slice for you based on the size and placement of the selected object.

You can adjust or move the slice with the Pointer tool once it is created. Drag any of the corner handles to change the size. Use the red slice guides to help you as you add slices to the page. Remember that the red guides are defining the HTML table for the page.

Switch to the Pointer tool and then hold down Alt (PC) or Option (Mac) as you drag the slice to make a copy of it. Add Shift as you drag to constrain the movement to a vertical line. Choose Edit > Repeat Duplicate to create slices for the remaining months.

CREATING DISJOINTED ROLLOVERS + Expand

Adding Frames

Frames are places to store the various states of your rollovers. When you used the Button Editor, Fireworks placed the Over state of the button in frame 2 and the Down state in frame 3. This was all done automatically for you. For the disjointed rollovers you are creating in this exercise, you add frames and place the images individually.

Choose Window > Frames to open the Frames panel.

Select Add Frames from the Frames Option menu.

In frame 2, you see the Over state of your buttons; in frame 3, you see the Down state of your buttons. The Button Editor placed these images in these frames for you.

Adding a Behavior

Select the slice

The center marker (the behavior handle) makes it easy to add the interactivity to this button. If you are familiar with Dreamweaver, you'll recognize the icon that appears when you click the slice. In Fireworks, you use this handle to point to the slice over the image you want to swap out when the user rolls over the button.

OPTIMIZING AND EXPORTING + Expand

Using the Export Wizard

Choose File > Export Wizard.

The Export wizard provides a quick way to export your files. The wizard asks a series of questions and then suggests file types and optimization settings. You can also set a file size for the Export wizard to use as a target for the optimization. At the end of the question dialog boxes, the Export Preview dialog box opens with the optimization suggestions.

Doing it yourself

Choose File > Export

The Export wizard does a good job of analyzing banner ads for you, but normally you will want to take control over the image optimization and export settings.

Picking the correct image format is crucial to the optimization process. The most popular file formats for Web graphics are GIF and JPEG. GIF images are generally used for line art and images with solid colors. GIF images can contain transparent areas and can be used for animation files. The disadvantage of GIF images is that they are restricted to 256 colors. JPEG is generally used for photographic images or images with gradients and more colors. JPEG files cannot be transparent or used in animations.

Choose Window > Optimize to access the Optimize panel.

You use the Optimize panel to pick the formatting options for exporting the file or for each slice. To take more control over the optimization process, you will want to set the optimization for each slice.

Using the 4-Up Preview Button

Fireworks enables you to preview your images within the document window before exporting them. You can determine the export settings on the page as you create it and preview the results. You can also split the document window into two or four preview areas to view different settings. Fireworks also displays the file size and the approximate download times within each preview.

Click the 4-Up button at the top of the document window.

The 2-Up button divides the document into two previews; the 4-Up button divides the document into four previews. In 2-Up and 4-Up modes, the upper-left preview displays the original image and can be edited. The other areas are previews only.

Click the Original button to return to the document window.

EXPORT SETTINGS + Expand

Choose File > Export.

Select Export Slices from the Slices pop-up menu.

The slice (the translucent green area on top of each button) determines how Fireworks creates (cuts) the buttons. If you don't export the slices, the page is exported as one image. The slice also enables the JavaScript for rollovers—if slices are not exported, your rollovers will not work.

Select Put Images in Subfolder.

Generally, you will want to separate your images from the HTML files. This is a file maintenance and organization issue only, but highly recommended. Fireworks defaults to a subfolder named Images. When you select Put Images in Subfolder, you'll see the default folder name—images—next to the Browse button. If you want to store your images in a folder other than the images folder, click the Browse button and locate the folder.

Click Options to define the HTML options that Fireworks uses when generating the HTML.

You need to set several options to define how Fireworks creates the HTML file. These options are defined in the HTML Setup dialog box. You can access this dialog box from the Export dialog box, as you just did, or you can choose File > HTML Setup.

Document Specific tab.

On the Document Specific tab, you can customize the file naming scheme for the images in the rollovers. As you choose from each of the pop-up menus, an example of the resulting filename appears. The resulting filename appears as home_page_c2_f2.gif in the dialog box.

EXPORT DIRECTOR HTML + Expand

Export Settings

Choose File > Export > Director[.html]...

Using Fireworks to create cast members

Developers can use Fireworks to create entire cast libraries from a single Fireworks document by using layers in Fireworks and exporting the Fireworks layers to Director MX. Any Fireworks MX document that contains layers can be exported as Director HTML with the Source pop-up menu in the Export dialog box set to Fireworks Layers. This setting allows Fireworks MX to export individual layers to separate PNG files which can also be trimmed to each image's extents. This enables Director users to more easily create dedicated cast libraries for Fireworks elements in a Director moviedocument. The 32-bit PNG format supports full Alpha transparency, and transparency in a Fireworks document is retained in the Director movie, so setting sprite blend modes is not an issue.

Using Fireworks to design navigation and other behavior-driven elements

Developers can develop elements that require behaviors—such as the buttons in a navigational interface—by designing the elements in Fireworks, drawing slices, adding behaviors to the slices, and exporting the Fireworks slices to Director MX. Any Fireworks MX document that contains slices can be exported as Director HTML with the Source pop-up menu in the Export dialog box set to Fireworks Slices. This setting enables the images as defined by the slices to be imported into the Director movie along with the behaviors such as Simple Rollovers, Swap Image, Disjoint Rollovers and Set Navbar Image behaviors. Once in the movie, the developer only needs to set markers and target individual buttons with go to marker behaviors.

Fireworks MX behaviors that work when exported as Director HTML
These behaviors are supported when exporting a Fireworks file with slices as described:

* Simple Rollover Behavior
* Swap Image Behavior
* Set Nav Bar Image Behavior

Fireworks MX behaviors that do not work when exported as Director HTML
The following behaviors listed below will not be exported from Fireworks:

* Pop-up Menu Behavior
* Set text of Status Bar

FRAMES TO FILES + Expand

You can take advantage of Fireworks' animation tools to generate multiple-frame documents from which Fireworks can export the images from each frame. Optimize the Fireworks document to the desired setting and then export using the Frames to Files setting in the Export dialog box:

THE WEB LAYER + Expand

The Web Layer is the top layer by default and cannot be moved. As you work with your images, you may want to hide the hotspots or slices to edit the objects below. You can click Show/Hide Slices on the Tools panel or use the Layers panel. If you use the Tools panel, all hotspots, slices, and slice guides are hidden. If you use the Layers panel, you can hide individual slices or hotspots.

Choose Window > Layers to open the Layers panel.

Click the plus (Windows) or triangle (Macintosh) to expand the Web Layer.

If you hide the Web Layer on the Layers panel, hotspots and slices will still be exported when you export as HTML.

You can click the lock column (the column with the pencil) on the Web Layer to ensure that you don't delete or move the hotspots or slices. For this exercise, leave the Web Layer unlocked.

INTEGRATING WITH DREAMWEAVER + Expand

Generally, you will use Fireworks to create your Web graphics, and you will use Dreamweaver to build the Web pages. However, on pages with extensive graphics, you may prefer to use Fireworks as the design tool, exporting the HTML table structure as you did in the previous lessons. Rollovers created in Fireworks appear as native Dreamweaver behaviors when the resulting file is opened in Dreamweaver, ensuring a seamless workflow between the two applications. You can modify the Fireworks-generated table in Dreamweaver to add text or images. If a graphic needs updating, you can edit the image from within Dreamweaver. Dreamweaver launches Fireworks automatically so you can make the changes. Fireworks replaces only the HTML and image slice files needed to update the Dreamweaver file. Any changes you make in Dreamweaver are preserved.