Adobe Fireworks CS3 Tutorials
Button Symbols / Using the Button Editor
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 / Using the Button Editor)
In this movie, I review in more detail how to use the Button Editor. Fireworks' button editor is where you'll create and edit JavaScript button symbols. To get into the Editor you can choose Edit, Insert, New Symbol, or New Button, either one, and then choose Button here, as the type of new symbol. Let's go ahead and label this button 1. click OK. That brings us right here into the Button Editor. You'll notice that the tabs along the top of the Editor correspond to the four button states and the active area. The tips on each option in the Button Editor help you make design decisions for all button states down here. Notice that Up, the normal state of the button, use the drawing and the editing tools to create the Up state of the button. To edit links or behaviors, first select the Active Area tab, so let's take the Vector tool, convert it to a rectangle, and let's draw out a rectangle for my Up state. I can also enable 9-slice scaling guides. I'll go over in detail what those are in the next movie. In the Over frame, this displays when your cursor is over the button. Use the drawing and editing tools to create the Over state of the button. To edit links or behaviors, first select the Active Area tab. Let's go ahead and copy the Up graphic. That makes it very convenient to give me the same size there. And let's go ahead and change the color, so I have some kind of change that I can see it animate. I can also import an existing button from Photoshop, or from another Fireworks PNG file. When I'm done, click Done here, that'll create what's called a 2-state button, but let's continue and create a Down frame as well, or an image in the down frame. Notice here, this creates a depressed image for your button when the mouse presses on the button. Let's go ahead and copy the Over graphic. Notice that it's blue now, because I changed the Over image from the original Up image, which was purple, to blue. And let's go ahead and change that again to a different color. Oh, I've got to make sure that I've selected the object there before I change the color chip. Let's change that to green. More like that color green. Let's make that a little bit more green than blue. The idea here is I just want to make it very distinct from the Over and Up frames, so I can see this really well. The Over While Down, this is when the button is down and then when you roll over the button with your mouse, it will still change the appearance. Use this button state for multi-button navigation bars. Over While Down is not used in simple rollovers. Let's again, copy the Down graphic in this case, and that's going to be green, and we'll change it yet one more time to be a different color. Now let's go to the Active Area tab, the last tab here, reading in the instructions: The "active" or "hit" area of the button is defined by a slice object linked to the button. Use the Properties Panel to define the URL and other link properties. Once I've defined all of my information for each of the tabs, I click on the Done button. It's probably a good idea now to preview this button. Notice that when I roll over it, it changes to the color in the Over tab. When I press down, it changes to the color in the Down tab, and then there should be also an Over While Down, there we go. And the hit area is the area that's active. I can, notice, modify this. Let's go back to the original tab here and double-click to bring up my Button Editor again, and then let's go to the Active area. Let's take my Pointer tool here in the Active Area and let's change the size of that Active Area. Notice that this is actually changing the slice size, so that will now represent an active area in the middle of the button there. Let's click Done. Now, notice back here in my original view, my slice is, in fact, much smaller. So, now if I preview it, notice that I can actually see the active area in there, because my slices are still on, but now the active area of the button is much smaller. Let's go ahead and turn off my slices and you can see that I'm rolling over the button, but nothing's happening because my active area now has been refined and focused to the middle of that button there. So, that's a good demonstration of what that active area does. Let's double-click on the button and that brings me back to the Button Editor, and there is my Active Area tab there, and I can go back now and modify this to make that Active Area larger so more of the button represents the active area. So, to conclude with the Button Editor, you can create all of these different button states, as well as an area for triggering the button action. Now, several times I mentioned here, as I was creating my button, this 9-slice scaling guides. This 9-slice scaling feature is introduced here in Fireworks CS3. It allows you to scale vector and bitmap symbols up or down without distorting the geometry. It's probably better for me to demonstrate this technique, so let me now move on to the next movie and demonstrate how to use this 9-slice scaling.
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
