Subtitles of the Movie

If you have an older version of Fireworks, there are a number of reasons to upgrade to the CS3 version, including enhanced symbol features, better layer organization, MXML export, as well as better integration with other Adobe tools, including Dreamweaver, Flash, Photoshop, and Illustrator. Fireworks CS3 introduces new and enhanced symbol features including a new Button Editor where it's now much easier to create the various button states that make up an animated button. You can get into this button editor by double-clicking a button symbol on the canvass and that brings up the Editor. Notice that there's an Up, Over, Down, Over While Down, and Active area tabs for building the various states of the animated button. There is also a Copy-over graphic here for copying into the Down frame, or the Down tab. Notice it makes a copy of the Over Button. Now I can just simply change the color. So very quickly, create an animation, let's go ahead and select that button and now change the color to a green. And let's do the same for Over While Down; copy that graphic. I cannot only change the color, I can add filters and make any other changes that I desire to that button. Now, if I click on the Done button, go back to the canvass and click on preview, you can see the various button states that I just created using the Button Editor. Using these button symbols, which are stored in the Library, it's very easy to drag out multiple copies of the buttons to create navigation elements such as menus and Nav bars. Notice also that if you drag out multiple buttons of the same symbol they interact with each other and communicate with each other. You also have a new Swap Symbol feature that allows you to easily swap symbols as you're designing your document. For example, let's swap this button symbol by choosing Modify A Symbol, Swap Symbol, with another symbol that I have available in the Library. That button symbol there, so it's very easy to swap out and change your navigation elements. You also have a pre-designed Library of graphic symbols that utilize this new functionality that's been included in Fireworks CS3. You can access these new symbols by choosing Window, Common Library. Notice that you have animations, including a clock. The animation of this symbol extends beyond the last frame of the document; Automatically Add New Frames, click OK, and that'll create an animation for you. You also have buttons and bullets. Let's bring out a couple copies of the buttons from the Common Library, and if I choose Preview you can see that these animate as well. In addition to buttons and bullets you've got Flex components, Flow diagram components, as well as Mac buttons, checkboxes, combo boxes, mobile components, as well as Windows XP components here, buttons, checkboxes, sliders, radio buttons, and so on. Fireworks CS3 introduces a dynamic new feature called 9-Slice Scaling. This allows you to intelligently scale vector or bitmap symbols. Symbols can be scaled using 3 or 9 regions based on the shape of the symbol. If we go back to the original view here and then double-click on one of these buttons you can see these nine regions here by positioning a set of guides over your artwork. You can define exactly how each part of a symbol will be scaled, any of nine different regions can be specified to scale only horizontally, scale only vertically, scale both horizontally and vertically, or to not scale at all. Probably the easiest way to learn how to use these is to try some scaling features by moving these guides, scaling guides, in different positions. So let's set this guide over here so that the left half of the button will scale differently than the right half because it's within these scaling guides. Let's click on Done, and then let's take this button and scale it, and you'll notice that the left edge of the button looks different than the right edge. Notice that the right edge I'm maintaining that curvature of the button, whereas the left edge is not maintaining the curvature. Let's go ahead and delete this button here, and this one as well, and now compare that too. Let's bring this scaling guide to the left so that now both sides of the button should scale the same, and now let's scale the button again. Notice that now both sides look the same when you're scaling it. This is a little bit tricky and hard to explain, better that you practice trying different kinds of arrangements with this scaling guides; notice that there's a button here to reset the scaling guides to the default position here. Another new feature with Fireworks CS3 is the multiple pages feature. You can add multiple pages to a single document using this New Pages dialog or window right here, Pages. If I move to this BOL-Pages document, notice that I have four pages in this one document. This allows you to build complex multi page Web prototypes using a single PNG file. Notice that each page contains its own settings for canvas or document size, color, image resolution, and guides. What's obvious here is, notice that the canvas sizes are different, particularly page two. These settings can be set on a per-page basis or globally across all pages in the document. Let me now move on to the next movie and cover some additional new features in Fireworks CS3, including Flash-based slide shows, hierarchical layers, and also better compatibility with Photoshop and Illustrator.