Subtitles of the Movie

With Fireworks it's easy to create a variety of JavaScript buttons, cascading-style sheet files, CSS or JavaScript pop-up menus even if you know nothing about JavaScript and CSS code. I have some examples here of some JavaScript animated menus, as well as a much more sophisticated pop-up menu behavior. It's all based on JavaScript as well. In this movie, however, let me focus on the Fireworks button editor. I created these buttons with the button editor. The button editor leads you through the button creation process, automating many button-making tasks. The result is a convenient button symbol. After you've create a button symbol, you can then easily create additional copies or instances of the symbol to make a navigation bar, a nav bar. So notice that I have here my button editor and I have the top here, the up, over, down, over while down and then active area. And also import button symbols. Button graphics here. And there's instructions down here. Over while down state is when the button is down, rolling over the button with your mouse. You can still change the appearance. Use this button state for multi-button navigation bars. Over while down is not used in simple rollovers. To edit links or behaviors, first select the active area tab here. So let's go ahead and copy the down graphic and put it right in the over while down and then I can, with the graphics selected, just simply change the color like so. So there's my animated sequence. Let's click done and now let's preview the menu that I've created using multiple copies of these buttons. And what's interesting is notice that if I put multiple copies of this button symbol on my canvas, they all communicate with each other. So in other words, only one of them can be pressed at a time. Notice that it's obeying and responding to each other. The way you'll add more buttons there is you open up the library and simply drag another button. Let's go to the original tab here and move that up and now let's preview and notice now this button is a member of this menu group simply because I'm using the same button symbol that I created in the Fireworks button editor. Now, you can make almost any graphic or text object into a button. You can create a button from scratch, convert an existing object into a button, or even import already created buttons from other Fireworks files. Let me demonstrate how to create a button from scratch. Choose the edit, insert, new button from the main menu. Notice that that will bring up the button editor and you can then take your various up, over, down, over while down and active area tabs to create your button. Let's go ahead and draw out a button here. Like so. Let's change the color so it makes that a little bit darker. And now let's go to the over and copy the up graphic, change the color. Look how easy this is to quickly generate animated buttons. Let's go to the down and copy the over graphic, change the color yet again and now I have my, my button. The up tab here displays the button as it will look before it's interacted with. Over is how it will change when the mouse is rolled over it and down is the appearance of the button when it's clicked on. Notice I can import a button. There is where you will import an existing button. Let's click on done. And there's my new button right there on the stage. I can create a nav bar by opening up the assets window here in the library, dragging out a couple more copies. See, I've forgotten which one that is. Let's undo that and let's undo that and I think it's button, button five is the one I just created there. And let's go ahead and preview this. And notice that these sets of buttons here that are all based on the same button five symbol communicate with each other as well as these buttons here. Interesting that even the two groups of button navigation series communicate with each other in a sense that if I have a button here selected and I click one of these buttons, this one deselects. Very interesting new tool, relatively new in the Fireworks application. To convert an existing graphic to a button symbol, select the graphic here on the canvas and then choose from the main menu modify, symbol, convert to symbol, choose the button option and provide a name for that symbol. Let's call this new underscore button. click OK. And that new symbol will appear here in the library. Notice if I double click on it, actually there's the new button there. If I double click on the new button here in the library, I get the button editor where I can go ahead now and create my button by clicking on the various tabs. Let's copy the up graphic. Do the same thing I did before. Create this new button. The down, copy the over graphic and so on. When you're finished click done and now you have yourself a brand-new button symbol that you can drag out onto the stage. And it looks identical to the other graphics there but this one's a button symbol, difference being that it's now here in the library and I can easily create a nav bar using that new button symbol. Now, when it comes time to export a button or pop-up menu or navigation bar, Fireworks automatically generates all the CSS code or JavaScript necessary to display this in a web browser. In Dreamweaver you can easily insert the CSS code, JavaScript or the HTML code from Fireworks into your web pages or you can just cut and paste the code into any HTML or CSS file.