Adobe Fireworks CS3 Tutorials
Button Symbols / Creating Button Symbols
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 / Button Symbols / Creating Button Symbols)
In this section of the tutorial I demonstrate how to add buttons, navigation bars, and pop-up menus to your Fireworks projects through the use of symbols. Let me introduce this topic of symbols with an overview on how to work with button symbols. 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 that'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 created 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. You can also import button symbols or button graphics here. There are some instructions down here, Over While Down state is when the button is down. Rolling over the button with your mouse will 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 graphic 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 could be pressed to the time, notice that it's obeying and responding to each other. The way you'll add more buttons here is you open up the Library and simply drag another button. Let's go back to the original tab here and move that up, and now let's preview and notice that 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 where 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 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. Let's click 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 and in the Library, dragging out a couple of more copies. Let's see, I've forgotten which one that is. Let's undo that and let's undo that, and I think it's button 5, is the one that I just created right 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 5 symbol communicate with each other as well as these buttons here. It's interesting that even the two groups of button navigation series communicate with each other in the sense that if I have a button here selected and I click one of these buttons, this one deselects; a 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. You can 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. Notice that it looks identical to the other graphics there, but this one's a button symbol, the 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 for exporting a button or a 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.
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
