Subtitles of the Movie

In this movie I introduce Fireworks's 9-slice Scaling feature. This Scaling feature was introduced in the CS3 version of Fireworks and allows you to scale vector and bitmap Symbols up or down without distorting their geometry. The Symbols can be scaled using either three or nine regions, depending on the shape of the Symbol. This diagram right here demonstrates how images will be scaled using the 9-slice Scaling feature. Notice that you have areas outside of the inner section of these two parallel lines, the yellow areas that will experience no scaling. Some areas inside here, in between the two sets of lines, this green area, will experience both Horizontal and Vertical Scaling, and then you have regions that will only scale vertical, and other regions that will only scale horizontally. Probably the best way to demonstrate this is to show you some examples by changing the locations of these Scaling Guides, and then scaling the object and then noticing what happens in these various regions. But let me back up and demonstrate how to set up your 9-slice Scaling. You'll do that by inserting a new Button and then notice, by default, the new Button has these Guides that allow you to set up your scaling. Notice here in the Properties Inspector there is a box labeled Enable. If you check that box you will get the Guides, if you uncheck it the Guides will disappear. Also, when converting a Graphic to a Symbol, like so, if I choose Modify, Symbol, Convert to Symbol, here in the Convert to Symbol dialog I have an option for enabling 9-slice Scaling guides in the new Symbol and then when I double-click on the Symbol the Guides will appear here in the Button Editor. Let's go back here, though to this Symbol, and let me demonstrate how this 9-slice Scaling works by changing the location of the Guides and then scaling the object. So first off, let me bring up this first horizontal Guide, up above the corners of my rectangle. Let's go back to Page 1 here, let's take the Scale Tool and notice what happens when I scale in the horizontal direction, notice that these chamfer edges at the top above my Scaling Guide are changing, and contrast that to the ones below the Scaling Guide, they are not changing. Notice that this looks quite a bit different than the one below there. Let's go back and let's first delete this extra Symbol there, and now if I double-click on my Symbol Instance, and now let's bring the Guide down below the edges so that now notice that both the top and the bottom are outside of my Scaling Guide. Now if I rescale this like so, notice that all four edges will stay the same. In other words, I'm not scaling this part of the graphic right here. Let's go back and edit the Guides by double-clicking on my Button Symbol and now this time let's mov the Horizontal Guide, the second one down below the bottom half of my Symbol, so now this part of the Symbol will be Scaled. Notice that this part is outside of the Scale region. Let's go back to Page 1, take my Scale Tool and scale this up, and notice that this time both of the lower edges, those are regions inside of the scale region there, those are areas inside the Scale region, those are being scaled. Again notice that the shape of that curve is different on the bottom than it is on the top. So, the moral of the story here is, if you want to make sure that your edges in this particular design don't change from top to bottom or don't scale at all, in fact, what you probably want to do is position the Guides there. These 9-slice Scaling Guides are positioned on this Button so that the corners will not be distorted when the Button size is changed. You can also Lock the Guides, here in the Properties Inspector so that they cannot be moved accidentally, so when you do scale this Button Symbol none of the corners will be distorted. That then will conclude this section of the Tutorial on Button Symbols. In this section you've learned about the three types of Fireworks Symbols: Animation, Button, and Graphic. You've learned how to create Symbols and how to use the Button Editor to modify your Button Symbols, as well as how to create Navigation Bars. And the section closed out with the review of 9-slice Scaling. Let's now move on to the next movie. Fireworks is a great tool for quickly and easily creating moving graphics and Slideshows for use as banner ads, animated logos, cartoons, and much, much more. So, let's now learn how to create Slideshows and Animations in this next section. You'll learn about how to change Slideshow Properties, how to work with Animation Symbols, how to modify Animation Symbols, how to create Frame Tweening Animations, how to Export Animations, and much, much more.