One of the fun things about using Fireworks is creating interactive graphics and objects to use in your documents. Fireworks gives you the tools to easily add hyperlinks to sections of your page, create animated GIF's, as well as add rollover and hover effects to objects.
In this article, we will learn about:
-
Creating slices
-
Creating hotspots
-
Creating rollover and hover effects
-
Creating an animated GIF
The Web Tools
Before we go any further in this article, it's important we take a second to talk about the Web tools that we will be using.
The Web tools are located in the Web area of the Tools panel.
At the top left you have three hotspot tools grouped together. These tools allow you to draw hotspots over your image. When hotspots are exported with HTML, they can link to other web pages or trigger events, such as a rollover.
To the right of the hotspot tools are the slice tools. These let you cut an image into smaller pieces.
The Hide Slices and Hotspot button is located below the hotspot tools. This hides slices and hotspots.
The Show Slices and Hotspots button is located below the slice tools. It makes slices and hotspots visible.
NOTE: You can hover your mouse over any tool in the Tools panel to learn the name of the tool.
Creating Slices
A slice is a portion of an image or design that you will export as a graphic. If you export a slice as HTML And Images, the slices can include hyperlinks, rollovers, and other interactive features. Once you create a slice, the slice is added to the Web layer of the document.
There are three different options for the type of slice that you create. These options are listed in the Property panel and are Foreground Image, Background Image, and HTML.
Whenever you create a slice, you will see these options, as shown below in the Type field.
The Foreground Image slice type is the one you will when you are creating click-through prototypes.
For the time being, let's go ahead and learn to create a slice using the document pictured below.
To do this, select the Slice tool in the Tools panel. Next, draw a box over a portion of the page, as we have done below.
You will notice that the area you selected with the Slice tool has a green tint placed over it.
The slice has three main parts:
1. The slice name.
2. The selection handles that can be used to resize the slice.
3. The behavior handle to add interactivity to it.
You can rename the slice in the Properties panel.
Optimizing Slices
To optimize a slice, make sure the slice is selected in the Layers panel.
Next, go to the Tools panel and click Hide Slices and Hotspots, then click the Preview button in the document area.
Optimize the sliced part of the image as you did a single-file image.
You can use 2-Up to compare the original with the optimized version.
Add more slices if you want, then optimize each one.
Creating a Hotspot
A hotspot makes part of an image or page interactive. You can use hotspots to create web links within sliced objects.
We are going to add a hotspot to the chart in the slice below.
To do this, select the Rectangle Hotspot tool.
Press the Shift key and draw a rectangle around the area that you want to turn into a hotspot.
The hotspot has a blue tint to it.
Now, take a look at the Properties panel.
Type a URL in the Link field. You can also enter alternate text in the Alt field.
In the target field, specify what you want to happen when the link is clicked on. For example, _blank opens the link in a new browser window.
To preview your page in a browser, go to File>Preview in browser. This gives you a chance to make sure your new link works.
Creating a Rollover Effect Using States
It's almost a sure bet that you've been on websites where a button or some other graphic will change appearance when you hover your mouse above it. Perhaps it's a navigation button that changes from blue to green, or something like that.
You can create a rollover effect in Fireworks CS6 by using states.
To start, select an object or shape in your document. We've selected the rectangle pictured below.
Next, go to the States panel and create a duplicate state as we learned to do earlier in this article.
The duplicate state should come after the existing state.
Change the appearance of the new, duplicate state so that it's different from the original state. We are going to change the fill color.
Now that we have our two states for our rollover, we need to use slices and behaviors to produce the actual rollover effect.
To insert a slice, make sure the second rectangle is still selected. Go to Edit>Insert>Rectangular Slice.
Next, go to the Behaviors panel. (Window>Behaviors)
Click the + sign, then select Simple Rollover from the dropdown menu.
To make sure your rollover effect is working, click Preview at the top left of the document area, as shown below.
Mouseover the button. You should see the different states.
Using a Slice to Create a Hover State
Now we are going to show you how to use them to create hover states.
To create the hover state, define the area for the slice. This will become the hover area. This must be an area that already has more than one state.
Click on the Pointer tool in the Tools panel. Drag the behavior handle in the center of the slice to the left then up toward the name of the slice.
You will see the blue line shown below, along with the swap image dialogue box.
We have selected State 2.
Click OK.
When you preview in your browser, you will notice the sliced area changes from one state to another when your mouse hovers over it.
Creating an Animated GIF Using States
Creating an animated GIF using the states panel is easy.
To start out with, add a shape or object to a new document, as we've done below.
Create a new state or a duplicate state, then change the shape or object. We are going to enlarge the star.
We enlarged the star in the second state by clicking on the Pointer tool in the Tools panel, then dragging on the blue handles.
Next, create as many more states as you need. We are going to create two more in order to make the star pulsate.
Now click the Menu Options button in the upper right hand corner of the States panel.
Select Properties.
Enter a duration for each state. The larger the number, the longer the duration for each state.
We are going to set ours to 20.
You will need to set the state duration for each state. Make sure "Include When Exporting" is checked for each state.
Now, click in the left column beside each state. This will make a vertical line appear. What you are doing is tying the states together.
When you are finished, go to the Web area of the Tools panel.
Click on the Slice tool. It looks like this: 
Drag the slice tool over your shape or object.
Next, go to the Optimize Panel.
Make sure your settings match the ones in the next snapshot.
When you are finished in the Optimize panel, go back to your document and right click on the slice.
Select Export Selected Slice.
About Prototypes
Fireworks is an excellent prototyping tool that you can use to create mock-ups of web pages, mobile apps, and other user interfaces. By using the Pages panel, the Layers panel, symbols, and other aspects such as hotspots, you can test different designs and figure out existing issues.
A prototype is defined as a mock-up or a demo of what an app or website will look like. A prototype can be something as similar as a sketch you've done on paper, and it can be as complex as a clickable HTML prototype.
The workflow for a prototype is typically:
1. Produce the concept. For example, is it an app, a game, or a website?
2. Create a wireframe.
3. Create a realistic prototype that addresses the look of the project.
4. Make the prototype interactive to test the usability.
5. Build the final project.
Creating the Wireframe
A wireframe is a simple model of a website or app that you want to develop. Wireframes can be hand-drawn and are made up of lines that define a site's structure.
For the purpose of this article, we are going to create a prototype for a very basic website. We drew a wireframe in another program that sketches out the basic layout of the website.
Just keep in mind that you can also draw a wireframe using paper and pencil. It doesn't have to be perfect. In fact, you can compare it to the very first draft of a report – you're just getting the main ideas down.
Our wireframe is pictured below. It is just as simple image file. We have not imported it into Fireworks yet.
Now that we have our wireframe sketched out, we are going to open Fireworks and create a new project.
Make sure you set the proper dimensions for your project when you create the new document.
To start designing our prototype in Fireworks, we first need to go to the Layers panel and create two layers.
We are going to rename the first layer Wireframe, as shown below.
We name the second layer Wireframe Sketch.
Once that is finished, we are ready to import our wireframe.
Click on the Wireframe Sketch layer, then go to File>Import.
Locate your wireframe sketch and import it.
Take a look at the Layers panel again. You can see our sketch appears in the Wireframe Sketch layer. Perfect!
We are going to use the sketch to create a wireframe in Fireworks. To do this, we are going to use guides to mark where we will draw shapes. Use the sketch to determine where you need to place guides.
You can see the guides on our document below.
Next, with the layer named Wireframe active, we are going to draw the shapes on our document using the vector shapes tools.
Now, go to the Layers panel. Lock the Wireframe Sketch Layer, then click the eye icon to the left of it to make it invisible. It should like likes ours does in the snapshot below. We have highlighted it to make it easier for you to see.
When you are finished, go back to your document.
Add text to the shapes and label what each shape represents.
If you haven't already, take the time to name the shapes in the Layers panel so you know what each one is.
If you look at the Layers panel in the snapshot above, you'll see icons in the lower right corner of each object that lets you know the type of object it represents. So far, we have text and shapes.
When you're finished, your wireframe in Fireworks will look something like this:
Now you can start adding design elements to the page, such as the banner. You can create these aspects in other programs, such as Photoshop.
For now, create a new layer above the Wireframe layer. Name it Prototype. Make sure the new layer is active as we move forward.
About Wireframe Symbols
If you go to the Common Library, you can see some wireframe symbols created for you by Fireworks. You can use these wireframes or create your own wireframes and symbols.
Below is a wireframe symbol for a video player.
A tooltip:
A Facebook login:
Here is a wireframe symbol for a vertical web ad:
Adding Pages to a Prototype
You can still see our wireframe beneath the graphics we have added. However, we are going to hide the wireframe layer for now by clicking on the eye icon to the left of the layer.
Now go to the Pages panel.
If you want to create a master page, right click on the page, then select Set As Master Page.
For our prototype, we are only going to have two pages.
To add another page, right click on the existing page, then select New Page
You can then name your pages. The first page should be named "index."
Assembling the Prototype
At this point in your prototype, you want to add graphics, images, symbols, vector shapes, and anything else you want to incorporate into the design aspect of the prototype. In other words, focus on the visual aspect of the prototype for the time being and get all the pages finished in that regard. Once you have all of that ready, you're ready to move forward.
Creating States
The next step is states to different design elements. You can add hover states to navigation elements. You may also want to add hover states to dropdown menus, tooltips, and links. Remember, to create a hover effect, all you need to do is change the look or appearance of the object for the second state. Use the States panel to do this.
Slices and Hotspots
Once you have everything else placed in your prototype, you can start adding slices and hotspots. You can use slices to define interactive regions such as hover states and hotspots to create areas for hyperlinks.
Most websites will use the logo area as a hotspot. Clicking on the logo will take you to a page in the website. This page is usually the home – or index – page.
In the snapshot below, we are going to turn the logo area into a hotspot by clicking on the Rectangle Hotspot tool and dragging it over the logo.
To add the hyperlink, we go to the Properties panel.
Type in the URL in the Link field, then alternate text in the Alt field.
To test the hotspot in a browser window, go to File>Preview in browser, then select your browser.
Linking Pages Together
Creating hotspots in your prototype and linking them to external websites is easy, but you also need to link the pages of your website together. By now, you have your navigation built with all its buttons. Now you just need to link your pages. You can do this by creating hotspots if you don't want to add hover effects. The link that you enter in the "Link" field in the Properties panel should be the name of the page you are linking to. This should be the name of the page as it appears in the Pages panel.
Adding HTML Slices
HTML slices allow you to embed things such as videos and Google maps into your prototype. You can add a snippet of HTML into a slice by following the following steps.
Draw a slice, then go to the Properties panel.
For the type of slice, select HTML.
Click on the Edit button.
Paste the HTML code you want to use into the slice using CTRL+V into the Edit HTML Slice dialogue box.
Click OK.
NOTE : You may need to use the <iframe> tag, as well as height and width attributes if you are embedding an object.
Exporting Your Prototype
It goes without saying that before you export your prototype, you want to test it out by going to File>Preview in Browser.
When you are ready to export your prototype to share with clients or other people, you have a few options. Let's discuss both of those.
Your first option is to export it as an HTML file. To do this, go to File>Export.
You will then see the Export dialogue, as shown box below.
As you can see, Export is set to HTML & Images.
In the HTML field, we have Export HTML file. This is our export file type.
We also have it that we want to export slices, and we want to export ALL pages. By default, the export settings are set to current page. For your prototype, you want to make sure this is set to all pages.
Make sure Selected Slices Only is unchecked, and put a checkmark beside Put Images in Subfolder.
Click Save when you're ready to export.
You can also export your prototype to an interactive PDF.
To do this, go to File>Export.
In the Export field, choose Adobe PDF.
Click Save when you're ready to export your prototype.
