Subtitles of the Movie

In this movie, I introduce the important topic of Fireworks slices and hotspots. We use both hotspots and slices to incorporate interactivity into your web pages. Here on this page my slices are this greenish-blue rectangles. My hotspots are these blue circles and this blue polygon area here. You create slices and hotspots using the slices and hotspot creation tools here in the tools panel. Notice that for the slices you have a slice tool that creates rectangles and also polygons. The hotspots, you've got rectangle hotspot creation tool, circle hotspot creation tool and a polygon hotspot creation tool that I've used to create this polygon here, this complex shape right there. Let me start with slices. Slices are the basic building blocks for creating interactivity in Fireworks. One or more of Fireworks' built-in behavior can be attached to each slice. This allows you to quickly create rollover and swap image effects in your work spaces and many other behaviors that are available via the behaviors window, which I'll be talking about a little bit later. Using slices in conjunction with the optimize panel here also enables you to optimize separate areas of your Fireworks independently from each other using the most appropriate file format and compression settings, which you can establish here in the optimize panel. This will reduce your overall file sizes of your Fireworks graphics and improve their visual appearance. You can't optimize separate areas of your pages with hotspots, but you can use them to also incorporate interactivity into your web pages. Hotspots are used to create an image map, which is an HTML code that defines a hot region in an HTML document. These regions do not necessarily link anywhere. They could just trigger a behavior or define alternate text. Hotspots can also receive mass events, allowing JavaScript behaviors to be acted on those hotspots. So I have some hotspots here in blue. These simply link to other pages on my website. Now, both slices and hotspots are web objects. They exist not as images but ultimately as HTML code. You can view, select and rename these hotspots and slices through the web layer area in the layers panel. So if open up the layers panel here, window, layers, as soon as you start adding hotspots and slices, you'll notice that there are areas here in the very top of the layer stack called web layer. In this example, notice that I've got in my web layer all of these slices and hotspots defined. So notice you can rename the hotspots to be more descriptive. So let's call this learning center link, for example, which represents the link that I have to my learning center on my web page. Go ahead now and close this layer's panel and demonstrate how to create and edit your slices and hotspots. Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file. Upon export, Fireworks also creates an HTML file containing table code to reassemble the graphic in a browser. So essentially, when you choose the slice tool here in the tools panel right there and you start adding these rectangles to your pages, you're cutting up the image and instructing Flash to create a table based on those rectangles. The reason these are rectangles is the table that it creates will also be rectangular. However, you can also open up the tool and create polygon slices as well. Let's go ahead and cancel out of this and let's delete that slice and let's create a polygon over here by just clicking and creating straight-line segments which creates the polygon. Now, notice that there's a red outline here that borders that polygon and that is going to be the shape of the table that Fireworks will export. In fact, you can see the entire table here if you look at all the outlines of red there. Those represent the table cells that will probably be created. It's not always this topography, but Fireworks will try to get you close to this table setup here. Now, slicing up a Fireworks document has at least three advantages. One advantage is to optimize these slices independently using the optimize panel as I introduced earlier. Here notice you can select the slice and then choose how to optimize just that slice. One challenge of web graphic design is ensuring that images download quickly without sacrificing image quality. So slicing enables you to optimize each individual slice using the most appropriate file format and compression settings here in the optimize panel. Another advantage is to use slices to create areas that respond to mouse events. We use the behaviors panel to take advantage of this. Notice you can select a slice here and then add any one of a number of built-in behaviors, which I'll be reviewing in more detail a little bit later. Now slicing also allows you to easily update parts of a web page that change frequently. For example, your company's web page might have an employee of the month section that changes monthly. In my case here I could have a different registry to register for a different prize each day or each month and swap out just this section of my web page that I've sliced up right here. So slicing would enable me to quickly change just the prize and the description of the prize right here without having to replace the entire page. Now, there's quite a bit more to adding behaviors to these slices using the behaviors panel so let me now move on to the next movie and give you some highlights of some of the built-in behaviors that can be attached to these slices, such as the simple rollover, swap image behavior, how to set up a nav bar image and also how to create a pop-up menu.