Adobe Fireworks CS3 Tutorials
Hotspots/Slices/Behaviors / Working with Slices pt. 2
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 / Working with Slices pt. 2)
As useful as hot spots and slices are, and as frequently as you'll be using them, they can get in the way of seeing objects on the canvas, so you'll very often want to hide them. Hiding a slice renders the slice invisible in the Fireworks PNG file, but doesn't prevent the slice from being exported in the HTML file. You can turn off all or some Web objects, using the Layers panel here, and because slices are Web objects, you can turn off individual slices, and hot spots as well, by the way, there's a hot spot right there that I can toggle on or off. You can also turn off all hot spots and slices, or make them invisible using the Tools panel. Right there, there's a tool there called Hide Slides and Hot Spots. Click on that button and that'll hide them. To bring them back again, click on the next icon there, the Show Slices and Hot Spots button. I usually use this tool for just turning everything on or off. Now if the colors used in a document are similar to the slice color, it can be difficult to see slices against the objects on the canvas, so for ease of viewing, you can assign a new color to selected slices. Assigning unique colors to individual slices and hot spots can also help you organize them. You can alter slice guide colors as well, these are the colors right here that you see that are guiding those slices. To change the color of a hot spot or slice, select it using the Pointer tool, and then here in the Properties Inspector, notice that there's a little color chip there, change that color chip, so I can modify each of these slices to a different color, helping me keep track of them. Let me change something different, so they look quite different, so there's a blue and a yellow. I can also change the hot spot color to make that stand out more. Let's make that red, like so. To change the color of a slice guide, from the Main menu, choose View, Guides, and then on the bottom here, Edit Guides. Here you can change the color, you can Show guides, Snap to Guides, Lock the Guides, and also the Slice Color here. Let's go ahead and change this to something very obvious. Let's change this to a bright red, and this one to black. click OK. Let me go ahead and draw out another slice so you can see these new colors more easily. So there's my red slice guide there. Now, in Fireworks you can work with a Slice layout as if it were a table in a word processing application. When you drag a slice guide to resize a slice, Fireworks automatically resizes all adjacent rectangular slices as well. In addition, you can use the Properties Inspector to resize and transform slices as you would vector and bitmap objects. For example, I can take the Selection tool, and I can move this slice, notice that the slice guides follow it. You can also take the edge node there that control node, and move it to resize the slice. Notice that I'm moving slices as they were objects, as well as the guides here. Now I can also use the Properties Inspector down here. Notice that with this slice selected, that's 57 pixels wide, 195 pixels tall, but I can change that to 250 tall by typing 250 there in the H box. I can also change its location. It's 442 pixels from the left edge; let's make that 450 and watch, it'll move over to the right a little bit. Ninety-three pixels from the top, let's move that down to 150, so this is a very precise way of numerically positioning your slices. And lastly, one more technique to show you is the Transform tool. I can use the Transform tool to transform these slices, including rotating them and scaling them, and so on. Notice that even though I've changed the shape of that slice and rotated it, the slice outline is still a rectangle. Let me now move on to the next movie and demonstrate how to make your slices interactive.
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
