Adobe Fireworks CS3 Tutorials
Hotspots/Slices/Behaviors / Making Slices Interactive
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 / Making Slices Interactive)
Let me now focus on how to make slice objects interactive. Slices are the basic building blocks for creating interactivity in Fireworks, and so they're very important. Fireworks offers two ways to make slices interactive. The first is a drag and drop rollover method, and the way that works is you select the slice with the Selection tool, the black arrow tool, [`00:00:20] and then there's a little slice handle right there, and you click on that and drag it, and where you drag it will make [`00:00:26] that slice change to whatever frame you choose. In this case I can choose Frame 1 or Frame 2, so this is going to create a simple rollover. What I'll do is create an object in Frame 2. Let's go ahead and do that. Let's go ahead and hide my slices and go to my layers frames panels here, and in the Frames panel choose Duplicate Frame. That creates a duplicate frame after the current frame. Now let's go ahead and change the color of the button in that frame. So there's Frame 1 and there's Frame 2. Now I've already added the simple rollover, so that this slice that I added earlier will change to whatever is in Frame 2, which is the current view. Let's change that back to Frame 1. Turn off my slices, go to the Preview mode, and when I roll over the button, notice that it changes to the purple color, which is the image in Frame 2. Another way to make your slices interactive is to use the Behaviors panel. Let me go back and turn on the slices again, go back to Original view, and let's take the Slices tool here, the Rectangle, and draw out another slice below the first one. And with the Selection tool, let's make sure that slice is selected, and then from the Behaviors panel I can create more complex interactivity, including the simple rollover which will again swap out Frame 1 with Frame 2, or I can do a Swap image, and a Swap image Restore, and use the Behaviors panel here to set up a Nav bar image, pop-up menus, and a status bar. I'll be covering each of these behaviors in more detail a little bit later. Now you can also attach multiple behaviors to a single slice creating interesting effects. You can also select from a variety of mouse events that trigger these interactive behaviors. Now notice that for this slice, I added the behavior using the drag and drop rollover method, but I have here in the Behaviors panel, a listing of that interactivity that I added. Notice that it's divided into two parts, events and actions. There's the Actions swap image, but the event can be changed from a mouse over to a mouse outer on click or on load, which also allows you to create some interesting effects. I should also point out that behaviors in Fireworks are fully compatible with Dreamweaver behaviors. In fact, if you export this to an HTML file and graphic images, and then open up that HTML file in Dreamweaver, select that graphic, and then open up Dreamweaver's behaviors panel, you'll see this same events and actions information here where you can change it in Dreamweaver. So to summarize, when you export a Fireworks roll over to Dreamweaver, you can edit the Fireworks behaviors using the Dreamweaver behaviors panel. Let me talk a little bit more about the drag and drop roll over method. Let's start off by adding another slice, this time to the third button there. Now, specifically, this drag and drop rollover method allows you to determine what happens to a slice when the pointer passes over it, and again, when you select the slice you get a little icon right there, which is called a Behavior handle. Now if I add another slice to my canvas, let's add a slice to the fourth button, and now take that Behavior panel and drag it over onto the third slice, I can Swap Image there in Frame 2, click OK. So what's going to happen here is when I roll over this slice, that slice will change to Frame 2. So, let's go ahead and turn off my Web layer, let's go ahead and add a different graphic in Frame 2 for that button, changing it to this same purple color, like so, and now when I preview, and I roll over this slice here, notice that this third button is actually changing. So using that drag and drop [`00:04:41] rollover, I can swap out any slice that I have on my current canvas. It doesn't necessarily have to be the slice that you're rolling over. If you check the Fireworks documentation, it refers to the slice where you're adding the behavior the "triggering slice," and the one that you drop the handle onto is the "target slice," so using the triggering slice and the target slices you can easily create roll over and swap image effects. If you change the location of the trigger and target, that's called a "disjointed rollover." If the trigger and target slices are the same, this is referred to as a "simple rollover." I should probably point out at this stage also that hot spots also have behavior handles for incorporating rollover effects. So let's go ahead and delete this second slice and instead, let's add a hot spot on top of it, and notice that there is the behavior handle. And like I did for the slice, I can drag this behavior handle onto another slice, or the same hot spot, right here, to create a simple rollover or a disjointed rollover. So this drag and drop rollover method is a quite fast and efficient way to create rollovers and swap image effects, and add interactivity to your slices. But most of your effort will probably be in using Behaviors, so let me move on to the next several movies and review the various behaviors that are available here to add to your Fireworks CS3 slices.
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
