Subtitles of the Movie

You often discover when working with multiple objects on your Fireworks canvasses that you'll have a need for aligning those objects. The Align commands in the Modify menu, or the Options on the Align panel give you a wide range of arrangement options, allowing you to align objects along the horizontal or vertical axes. Align selected objects vertically along their right edge, center, or left edge, or horizontally along their top edge, center, or bottom edge. I should point out that edges are determined by the bounding boxes enclosing each selected object. Notice that when I select an object here my bounding box is very tightly snugged up against that object so when I do align these I'm going to get a nice even alignment because those bounding boxes are tight against the image edge. You could also distribute selected objects so that their centers or edges are evenly spaced, and lastly you can apply one or more align commands to selected objects. Let me start by selecting all of these objects by drawing a marquee around them on the canvas, and then from the Main menu choosing Modify, Align, Left. Notice that all their left edges line up. If I rearrange these again, I can also line them up so that their right edges line up by choosing Modify, Align Right. And the third option is align center point. Now because all these buttons are the same, each of these commands will achieve the same results, Center, Vertical. You can also align them so that their top edges are even, like so and bottom edges, or Center, Horizontal. Now again because these objects are all the same you don't see much difference, but you'll want to experiment with each of these alignment options to see which works best for you. The last two options are to distribute evenly the alignments. Distribute widths makes these all evenly spaced. Let's move these now in a vertical pattern, select them all, and now choose Modify, Align, Distribute heights, and that will make these all even, so that they're evenly spaced height-wise here. Now remember you can also apply more than one alignment command at a time, so let's now line these up better by choosing Align, Left. And now I have a perfectly aligned and distributed menu system consisting of these four buttons that are all aligned and evenly distributed. Now in addition to the Align commands, you also have a panel dedicated to aligning your objects, and that is the Window, Align option here from the Main menu. That'll bring up this very handy optimize and align panel. I'll be covering the Optimize tab a little bit later, but now let me review the various options here on the Align tab. I think this is a little bit easier to use than the Align commands because it's more visual. Notice that you can either align objects to the canvas, or to each other, for example, notice if I select just one of these objects and then click on the To Canvas option, I can align this so that it moves right to the center of the canvas, both in the vertical and horizontal directions, so right now that object is right smack dab in the middle of the canvas. I can also move it to the left, to the right, put it on the bottom of the canvas, and so on, however, I most often use the Alignment Panel to align several objects, for example, these buttons in my menu bar. So let's go ahead and align these all to the left, like so. Align them all center. Notice that I have my To Canvas option selected, so this has aligned them to the center of the canvas, but also left edges all lined up. Let's turn off To Canvas there and now let's distribute these buttons so that they're evenly distributed in the vertical dimension. These icons take a little bit of getting used to, and you'll need to experiment a little bit with how to use them, but if I choose that option, Distribute, Vertical Center, notice that everything gets spaced out now evenly in the vertical direction. Let's spread these out a little bit so I have more space between them, and now let's highlight all the buttons, align them left to each other, and then evenly distribute them along a vertical axis there. If I rearrange these in the horizontal direction, I can use slightly different alignment options as I did before for the menu, but this, I think, is a little bit easier to use because you have these visual cues. So, let's highlight all my buttons. Again, make sure To Canvas is deselected. First, let's align these things all up so that they're center, or their top edges, or bottom edges, are even, and now let's distribute using this option right here, Distribute, Horizontal Center, and notice that that now distributes them easily in the horizontal direction. Let's spread these out a little bit to get more space, and let me repeat those commands again. First, let's center them up, like so, and now let's click on this option to distribute them along the horizontal axis there, and that looks pretty good; a nice horizontal menu bar. You also have some match size commands down here at the bottom of the Align panel. Let me switch files here to demonstrate these commands. Let me go to my Gems page. I have two Gems here. Notice that they're not the same size, so if I click on the Match Width option notice that this one stretches out so that both of the widths are the same. Likewise, I have here, a Match Height, so if I highlight both of those and click on the Match Height, this one expands a little bit so that these two have the same height. I can also do both, Match Width and Height, so notice if I undo those last two changes, let's match both the width and the height and notice that this Gem on the bottom expands both in the horizontal and vertical directions. And my last Alignment option spaces the selected objects evenly vertically, or evenly horizontally. So that'll wrap up this section of the tutorial on selecting and transforming objects. In this section you've learned how to select vector objects, how to select pixels from your bitmap objects, that is individual pixels from your bitmap objects, how to transform your objects, and how to organize and align objects on the canvas. Let me now move on to the next section of the tutorial on working with text. I'll show you how to format text, attach text to a path like I have here, how to import text, spell checking, and much, much more.