Flash uses panels to display controls for you as the developer. To better demonstrate some of the most commonly used panels, I'm going to start a new blank ActionScript 3.0 FLA. Now I'm going to choose my Rectangle tool and quickly draw three rectangles on my Stage. So I'll draw one here and a second one here and a third here. Panels are displayed in the Windows surrounding the pasteboard and the Stage, and you can see that a number of panels are visible by default.
Know that if you can't find a panel, or you want to turn on one that's not on by default, you can open up the Window menu and all the panels available to you are listed here. Now, if I choose the Arrow tool and click on the Stage--or the pasteboard is okay too--look to the right and you'll see the Properties panel that we mentioned earlier. The Properties panel displays information about whatever you've selected. Since we clicked on the Stage, the Properties panel is displaying information about our FLA. So we can see that we're targeting Flash Player 11.2 and ActionScript 3.0.
Our document has a background color of white, and a Stage dimension of 550 x 400. If I double-click one of the rectangles, notice that the Properties panel changes to tell us information about the rectangle. For instance, the Width of this rectangle is 141.95 and the Height is 65. The X position is 101 and the Y is 39. I can also type in new values if I wish. So for instance, I'll change the Width of this rectangle to 100.
So I'll click on the pasteboard to deselect, and notice that there's a whole bunch of other panels here, such as the Color panel, which allows you to precisely control color of objects on the Stage, and the Swatches panel, which can help you create a custom palette for use in your movies. Notice at the upper-right of each panel, if you click on this little arrow, a flyout menu appears which offers you options pertinent to that panel. So here's the one for the Swatches panel, and here's the flyout menu for the Color panel. So the Library panel is a place where you can keep copies of the items that you're using in your Flash project, like bitmaps, images, and sounds.
It's a pretty important panel, and we'll cover it in depth a little later on in the course. Down at the bottom of the screen is the Timeline, which is where you can control when and for how long content appears on the Stage, as well as create animation. The Motion Editor allows you to fine-tune animations, and since we don't have any animations, right now nothing shows up. Other panels that may appear here in this area are the Output panel, which I'll open up for you, and the Compiler Errors panel.
This is where Flash can give you messages about any errors or problems with your movie when you test. For now, I'm going to move my mouse right over to the Toolbar panel, which is where all the drawing tools are kept. I'm going to choose the Rectangle tool again, and when I do, you'll notice that two places on the screen change. First of all is the Properties panel, and it shows you the different settings that you can set for a rectangle that you're about to draw, for instance the fill and the stroke, the width of the stroke, the style, and so on and so forth.
Also notice there's some settings below the Drawing tools, such as the fill and the outline color again. If I click on several other of the tools in the toolbar, like the Text tool, the Line tool or the Pencil tool, you'll see that the Properties panel and the area below the toolbar change depending on what options are available for that particular tool. Another really useful tool is the Align panel. Let's say I want to align my three rectangles on the Stage. So I'm going to grab my Arrow tool from the Tools panel and now click and drag around all three rectangles to select all of them.
To open the Align panel, I'm going to go to the Window menu and then Align. Notice that the menu also tells you what the keyboard shortcut is for the Align panel. It's Ctrl+K for the PC and Command+K on the Mac. So looking at the options here, we could align our rectangles on the left edge, horizontal center, or on the right edge. Of course you could align them on the top edge, vertical center, or along the bottom edge. I'm going to align them to the left. Notice in the second row there are some options for distributing them so there's an equal amount of space between them, like distribute top edge, vertical center, or bottom edge.
I'm going to choose Distribute vertical center. So now there's an even amount of space between each one vertically. Match size is kind of interesting. You can choose to match width, height, or width and height. I'll Match width and you can see that all three rectangles are now the same width. Notice also this little checkbox of Align to stage at the bottom. If I left-align all of my rectangles now, they'll left-align relative to each other. If I click Align to Stage and then left align, the left-align relative to the left side of the Stage.
I'm going to click on the Stage to get rid of my Align panel. And there's one other panel you might like to know about, which is the History panel. If you make a mistake while working, you can hit Ctrl+Z or Command+Z, just like you can in many other programs to undo. If you open the History panel, which is in Window and then Other panels and then History, you'll see that we have a history of each move and change that we've made so far. You can drag his little slider up the left-hand side to step back through your moves one by one.
Or you can drag it back down to step back forward through them. So this can be really useful. I'll close out of the History panel. And the panels are designed to be moved around to best suit your workflow. For instance, I could click on the Color panel and the Swatches panel and so on, one by one, or I could click on the double-headed arrow here and expand this entire panel set to reveal all the panels at once. You can also drag this around to make your panels bigger or smaller.
You've probably noticed that some panels are grouped with, and hidden behind, others. So I could click Align and then Info and Transform to bring each one of those panels to the front. You can also change the grouping of panels. Say we want to move the Align panel to appear next to the Color and Swatches panel. To move it, you simply click and drag the title of the panel to group it with Color and Swatches. You can also change where an entire panel group is docked. So I'm going to collapse my Color group, and see this little dotted area at the top? If you click and drag that, you can move the whole panel, say, over to the left.
If I hover over the left side of the screen for a moment, you'll see a blue outline and a gray shade pop up, which shows the new spot you can dock the panel into. Clicking on the gray area next to the Timeline in the Motion Editor, I can drag this panel group up to the top, and wait for the little blue outline and dock them at the top. Some people like to pull their toolbar out so it just floats above everything else as they work. You can change the panel layout as much as you wish. If you move something somewhere you don't like and you can't get it to unstick, you can always go to the dropdown at the upper-right of the screen that says Essentials.
If you choose Reset Essentials, your panel layout will return to the default layout you see when you open Flash. You can also checkout some of the other preset layouts. Here's one that's meant to be useful for designers that has the Timeline at the top and the Tools on the left. Here's another one that's meant to be useful for developers, and so on. Finally, let's say you've created a panel layout you really love. So I'm just going to pull my toolbar out in the middle, and say this is what I really like, like this.
You can now choose New Workspace, type in a name for your layout, and save it. So I'll call it myWorkspace. Your new workspace now appears in the list of possible layouts you can choose. I'm just going to be boring and stick with Essentials. I'm going to click once on the pasteboard to make sure everything is deselected, and the final thing I want to point out is this little area in the Property inspector labeled SWF History. I'm going to hit Ctrl+Enter on my keyboard to quickly preview my SWF file and then immediately close the SWF.
You'll see that the SWF History area handily shows you the size of the SWF we just published, and that updates every time you test your movie. So, panels offer you information and controls for all the elements in your Flash movie. You'll get to know the most commonly used ones, like the Property inspector and the Timeline, quickly, and remember, that you can always go to the Window menu and choose any other panel that you might need.
- Choosing a document type
- Working with panels and workspaces
- Importing bitmap and vector graphics into a project
- Understanding the Timeline and frame rate
- Defining frames and keyframes
- Creating button, graphic, and movie clip symbols
- Nesting timelines
- Building shape tweens and motion tweens
- Defining inverse kinematic (IK) motion
- Applying filters, blend modes, and masks
- Integrating audio and video
- Using ActionScript code snippets
- Configuring SWF and HTML publish settings
- Publishing with AIR