Subtitles of the Movie

Once you've added slices or hotspots to your canvasses, you can attached pre-built behaviors to them. These behaviors let you quickly add interactivity to your Fireworks projects. Behaviors are collections of JavaScript code that's inserted into the HTML document when it's exported by Fireworks. This JavaScript code makes this interactivity work in a web browser. I have several behaviors attached here to various hotspots and slices. Most of them are simple mouseovers or simple rollovers. I have a simple rollover attached to that hotspot, but also simple rollovers attached to these slices. Now, you don't have to preview this document in a browser just to see these behaviors in action. You can just click on the preview button here to move into preview mode. Let's turn off my slices and now let's preview these simple rollovers. You can also preview these by choosing file, preview in browser. Now, the simple rollover adds a behavior to the selected slice or hotspot using frame one as the up state and frame two as the over state. So if I go up here to my frames panel, you'll notice that I have two frames; one with yellow buttons and one with red buttons. So really this all this behavior is doing, this simple rollover behavior, is swapping out the image underneath that slice or hotspot when the mouse rolls over it to frame two. This simple rollover option is actually a behavior group containing the swap image and the swap image restore behaviors. I have examples of those here. I call these disjointed menus, but they're essentially using the swap image and swap image restore. The swap image replaces the image under the specified slice with the contents of another frame or the contents of an external file. This swap image restore restores the target object to its default appearance in frame one. So if I go back to the original view here and turn on my slices, you can see that I have a slice here. And I have a variety of frames. Up to five frames that are showing different content. So what's happening here is as I roll over each slice here under page one, page two, page three, I'm displaying different content in this slice here. In this case, frame three, frame four or frame five. So when I rollover page three, this slice here, I'm displaying frame five in this slice. That's why I call it a disjointed rollover is I'm actually rolling over this part of it, but this part over here of the page is actually being changed or swapped. I also have a set nav bar image. This sets a slice to be part of a Fireworks navigation bar. Each slice that is part of the bar must have this behavior. The set nav bar image option is actually a behavior group containing the nav bar over, nav bar down, nav bar restore behaviors. Those are notice right here in the behaviors panel. Set nav bar image. I have examples of nav bars here. Notice that they're changing color. They also, what's nice about these nav bars is they communicate with each other. That's why they're all in essence one piece here. So that when I click on the bottom menu button there, the top menu in the navigation bar is effected. To demonstrate how to create one of these behaviors and how easy they are to add to your Fireworks projects, let me demonstrate the creation of the fourth behavior, setting a pop-up menu over a slice. So to do this let's create a new document and let's add a little label here. Pop-up menu. And then we'll take the slice tool and we'll drag a slice rectangle over that. That's the critical piece here because I need to attach the pop-up menu behavior to the slice. So I'll go up to my behaviors panel, choose set pop-up menu and then I get this pop-up menu editor to create this button system that will be part of the pop-up menu. So let's just say this is menu one and then I can put a link here. So this, let's say, goes to page one dot htm. And then let's add a menu two or a button two. Menu two will be the second button and that will go to page two dot htm. And what makes this interesting is that I can add additional buttons here that are underneath, or sub-menus of menu one. So this is going to be menu one A and let's go ahead and add another one. Let's go ahead and delete this one because I actually want to add it underneath menu one A. Like so. And notice that I can drag and move these menus around here in my editor. So let's call this menu one B and let's indent that. You'll see why that's important in a minute. This'll actually be a sub-menu underneath menu one. Notice that it gets indented there. So if you go ahead and click next, I can now style this button and I have preview here of what the standard up button and how it will look when it's rolled over. I can choose either images here or I can do HTML-based button menus which usually take up a little less space. So let's go ahead and accept the default there. And I can also change the cell width, the cell height, the cell padding and position here. Over and down to the right, over to the right or underneath. Let's choose this options here, as well as my displacement. So there's quite a bit of adjustments that you can make. But let's go ahead and just click done. And then notice that the preview will not display the pop-up menu. Instead I have to go file preview in browser. This will only preview if you look at it in the browser. The preview mode will not work. So there's my page with my pop-up menu. I roll over the pop-up menu. I get my two menu choices; menu one and menu two. Because I indented menu one A and one B underneath menu one, I get these pop-ups. So you can very quickly create sophisticated, detailed pop-up menus with many, many options here. Many, many menus and buttons and sub-menus. And then also you can always go back and modify. Go back to the original view, modify by double clicking on the behavior there in the behaviors panel and then you get the pop-up menu editor to modify, remove sub-menus or add sub-menus or name menu items, as well as changing the links and the targets. To give you a better idea of what a finished menu would look like, I've prepared this menu that I'm ready to publish onto a website. Notice that I can add as many subcategories as needed. So I can build out the rest of this menu to include supplies and instruments and clothes and fuel, but notice in this case I can choose from the fruit; oranges and then specific oranges; a Valencia orange or navel orange. That gives you an idea of the kinds of behaviors that you can apply in Fireworks CS3 quickly and easily using the behaviors panel and slices or hotspots on your canvas.