Monday, November 7, 2011

PART 2 - The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5


So now that we have a new Flash document, let's take a look at some of the parts of the workspace. And then after that, we'll draw some artwork on the stage.

The Document Window

First, switch to the Small Screen workspace layout by choosing Window > Workspace > Small Screen from the menu bar. And then go back to the menu bar and choose Window > Workspace > Reset 'Small Screen' to make sure that the layout is set to its default arrangement. I'm asking you to switch to this layout so that your Flash workspace will look similar to the screenshots in this tutorial.

Let's now talk about the document window. The document window shows the Flash movie that you're currently working on. It contains the stage and the pasteboard.


The stage is the white rectangular area (but you also have the option to switch to a different background color). The area surrounding the stage is called the pasteboard.

The stage is your canvas. This is where you add the visual elements for your Flash movie. It can be artwork that you draw, text that you type, or graphics that you import.

The pasteboard is just some extra space where you can draw or place elements that you don't want to be seen. You can add elements to the pasteboard and place them on the stage later on. Or perhaps you might have some artwork that you want to remove from the stage without deleting them entirely. If so, you can move it to the pasteboard for the time being and decide what to do with it later on.

You can adjust the position of the stage by clicking and dragging the document window's scrollbars. I usually like to position the stage so that it's in the center of the document window.


You can also adjust the zoom level by typing in the desired zoom value in the zoom input field.


The Toolbar

The toolbar houses the tools that you need in order to create and edit the visual elements that you put on the stage. In the Small Screen layout, the toolbar can be found in the left side of the workspace.


Each tool is represented by an icon. To select a tool, simply click on it. For most of these tools, you'll be able to know what they do just by looking at the icon. You've got the brush tool, the text tool, and the eraser tool to name a few. Here's a closer look at some of the tool icons:




You'll notice that some tool icons have a tiny triangle on the lower-right corner. Whenever you see this, it means that you can click and hold the icon, and a menu containing more tools will pop up.


In the image below, I am clicking and holding the rectangle tool to reveal the other shape tools. If I want to switch to the oval tool, then I just have to click on it. As you've probably assumed, these shape tools allow you to draw different shapes.


Drawing on the Stage

Now let's go ahead and draw some artwork on the stage using the brush tool.

Step 1 - Selecting the brush tool

Let's use the brush tool to draw a random object on the stage. To select the brush tool, go to the toolbar and click on the brush tool icon.


Or you can also press the B key on your keyboard. That's the keyboard shortcut to access the brush tool.

Step 2 - Setting the tool options

Once you have the brush tool selected, you'll see some tool options at the bottom of the toolbar.


NOTE: It's possible that you'll only see 5 icons for the brush tool options, instead of the 7 icons depicted in the screen shot above. The last 2 icons are for systems that use pen tablets.

Depending on which tool you have selected, you'll see a different set of options in this area. Since we have the brush tool selected right now, then what we see are the brush tool options.

We've got the brush mode, which you can see in the image below. Click and hold the brush mode icon to see the different brush modes. We won't go through the different modes in this lesson so go ahead and just choose Paint Normal for now.


You can also choose from a set of brush sizes. Click and hold the brush size icon to bring up a menu of the different brush size options. Simply click on the desired brush size in order to select it.


You can also choose from a set of brush shapes.


I'm going to use a small, round brush. You can choose whatever you like.

Step 3 - Choosing the color of your brush

To choose the color for your brush tool, look for the fill color box, which can also be found in the toolbar.


Click on the color box to bring up the color swatches.


At the top-right of the swatches, you'll see the alpha level controls for the color.


This controls the visibility of the color you choose. You can click on the number and type in a value anywhere from 0 to 100. A value of 100 means that the color is fully visible. As you bring the alpha level down, the color becomes less and less visible until it becomes completely invisible with a value of 0. You can change the value by clicking on the number and typing in a new one. For now, make sure it's at 100%.

To choose a color, simply hover over the desired color and click on it.

Step 4 - Drawing the object

Now that you've selected a color, go ahead and draw a random object on the stage. To draw with the brush tool, simply click and drag on the stage to make your brush strokes. I'm going to draw a car.


After you've drawn your object, let's stop adding content for now. We'll cover the other drawing features in other tutorials. For now, let's move on to part 3 of the Getting started with Flash CS5 series.

<< PREV: Creating a new Flash document and choosing a workspace layout - Getting started with Flash CS5 - PART 1

Posted by Flash Potential at 3:08 AM

3 comments:

Subscribe to: Post Comments (Atom)