Adobe Fireworks CS3 Tutorials
Hotspots/Slices/Behaviors / Slices & Hotspots Overview
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Hotspots/Slices/Behaviors / Slices & Hotspots Overview)
In this section of the tutorial, I introduce the important topics of Slices and Hot Spots. I use both hot spots and slices to incorporate interactivity into your Web pages. Here on this page, my slices are these greenish blue rectangles. My hot spots are these blue circles, and this blue polygon area here. You'll create slices and hot spots using the Slices and Hot Spot creation tools, here in the Tools panel. Notice that for the slices you have a Slice tool that creates rectangles and also polygons. For the Hot Spots you've got a Rectangle hot spot creation tool, Circle hot spot creation tool, and a Polygon hot spot creation tool that I 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 behaviors can be attached to each slice. This allows you to quickly create rollover and swap image effects in your workspaces, 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 that 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 hot spots, but you can use them to also incorporate interactivity into your Web pages. Hot spots are used to create an image map, which is an HTML code that defines a hot region in an HTML region. These regions do not necessarily link anywhere. They could just trigger a behavior, or define alternate text. Hot spots can also receive mouse events allowing JavaScript behaviors to be acted on those hot spots. So, I have some hot spots here in blue. These simply link to other pages on my Website. Now, both slices and hot spots are Web objects. They exist not as images, but ultimately as HTML code. You can view, select, and rename these hot spots and slices through the Web layer area in the Layers panel. So, if I open up the Layers Panel here, Window, Layers, as soon as you start adding hot spots 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 hot spots defined. So notice you can rename the hot spots to be more descriptive, so let's call this The Learning Center link, for example, which represents the link that I have to my Learning Center on my Web page. I'll go ahead now and close this Layers panel and demonstrate how to create and edit your slices and hot spots. 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 the slices independently using the Optimize panel as I introduce 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. You'll 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. There's quite a bit more to working with slices and hot spots to add interactive elements to your Fireworks projects, but let me start in the next movie with a review of how to use hot spots to create image maps.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
