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

• PART 1: Creating a new Flash document and choosing a workspace layout
• PART 2: The document window, the toolbar, and drawing on the stage with the brush tool
• PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files

Welcome to the Getting started with Flash CS5 tutorial series by flashpotential.com. In the first part of this series, where going to learn how to create a new document, and we'll also get to know a little bit about workspace layouts.

Step 1 - Creating a new Flash document

Launch the Flash CS5 application.

To create a new document, go to the main menu and choose File > New.

Then from the New Document window, choose ActionScript 3.0, and click OK. Click on the image below to enlarge.

You should now see your new Flash document. Click on the image below to enlarge.

This is your workspace. It's made up of different windows that each have specific functions. You'll see some of those windows highlighted in the image below. Click on the image below to enlarge.

The windows that you see here are just some of the windows that you can work with when you open up a Flash document. You've got the toolbar, the timeline, the properties inspector, etc... But we won't go through each of them right now. There are a lot! We'll learn more about them in the other lessons.

These windows that make up your workspace can be rearranged. You can move them to different locations, adjust the size, you can close some of them, or you can bring up other windows that are not yet visible, etc... The windows that you have open and the way you arrange these windows is referred to as your workspace layout. You can customize your workspace layout or you can choose from any of the preset layouts that are available.

Step 2 - Choosing a workspace layout

To choose a new layout, go to the main menu and choose Window > Workspace. Here you'll see all the available layout presets that are available. You've got Animator, Classic, Debug, Designer, Developer, Essentials and Small Screen.

Click on the choices to see how they look like. You've got the Animator layout, which gives importance to the windows that are most often utilized when one is creating a Flash animation project. There's the Classic layout, which looks like the default layout of older versions of Flash. You've also got the Small Screen layout, which creates a workspace ideal for monitors with lower resolutions. Each workspace is designed to fit the needs of a certain type of user. It's a lot like how you fix your own study table or your room at home. You arrange your things in such a way that makes it easier for you to work, relax or play.

Step 3 - Moving, collapsing, expanding and adjusting the size of windows

If you wish to move your windows around, you can do so by clicking on the window tabs and dragging the windows to the desired location.

If you wish to collapse or minimize a window, just double-click the tab. To expand a window again, then just double-click the tab again.

If you wish to adjust the size of a window, place your mouse pointer over the edge of the window until the pointer turns into a double-headed arrow.

And then click and drag to adjust the window's size. You can adjust from the left or right sides to change the width. And you can also adjust from the top or bottom edges to change the height.

Go ahead and try moving, resizing, collapsing and expanding the windows in your workspace. Don't worry about messing up the layout. We'll fix that in the next step.

Step 4 - Resetting a workspace layout

If you find that you've messed up your workspace layout to a point where it's quite difficult for you to work, you can reset everything by going to Window > Workspace > Reset [Active Layout].

This is going to reset whatever layout is currently active. So if you're using the Animator layout, it's going to reset your workspace back to the default Animator layout, and make everything neat and tidy again.

In part 2 of the Getting started with Flash CS5 tutorial series, we're going to draw some artwork on the stage.

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

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 5 - Flash CS5 Beginners Tutorial

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5

Sometimes, you might make the mistake of drawing in the object mode when you really meant to draw in the merge mode. Or sometimes it might be the other way around. Instead of erasing your artwork and redrawing it, you can just convert your drawing into the opposite mode. That is what we'll learn in the last part of this tutorial series.

Converting Merge Drawings to Object Drawings

Step 1

Select the merge drawing item that you'd like to convert.

Step 2

In the main menu, go to Modify > Combine Objects > Union.

And that's it. The selected merge drawing should now be an object drawing.

Converting Object Drawings to Merge Drawings

Step 1

Select the object drawing item that you'd like to convert.

Step 2

Right-click on the selected object and choose Break Apart.

And that's it. The selected object drawing should now be a merge drawing.

And that concludes this tutorial series explaining the differences between the object drawing mode vs the merge drawing mode.

<< PREV: Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4 - Flash CS5 Beginners Tutorial

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5

When you use the paint bucket tool to fill the inside of shapes, you'll find that it will sometimes behave differently depending on whether it was drawn in merge mode or object mode.

Let's take a look at an example.

In the image below, you'll see three separate segments drawn using the brush tool in the merge drawing mode.

In the next image, the segments were moved closer so that they would intersect with each other - the two diagonal segments meet each other at the top, while the segment at the bottom touches both diagonal segments. So what we have is a closed area in the shape of a triangle.

And because merge drawings combine when they intersect, what we have now is just one shape with an empty area inside it. We can then use the paint bucket tool to fill this empty area with any color we choose.

Here's the shape with the empty area filled with red.

This works because all the segments merged together to form one closed area. And the paint bucket tool is capable of filling empty areas that are closed. If there is a gap or opening that's too large, then the paint bucket will not be able to fill the area.

Now in the next image, all the segments were drawn in the object drawing mode instead.

If we move the segments to form a triangle, each segment will still be considered separate.

Visually, we may have a triangle, but Flash still sees each segment as separate from each other because they were drawn in the object drawing mode. Therefore, the segments will NOT merge to form into one closed shape. And since we don't have a closed shape, the paint bucket tool will NOT be able to fill the inside.

However, we can actually still use the object drawing mode to create closed areas that can be filled using the paint bucket tool. This can work provided that the shape is drawn in one continuous stroke. In the image below, the triangle was drawn in one continuous stroke instead of drawing three segments separately.

You'll notice that the entire shape is enclosed within just one set of borders. This means that the shape is just one object, unlike the previous example which was made up of three different objects. Because of this, you will be able to fill the inside using the paint bucket tool.

In the final part of this series, we'll learn how to convert an object drawing into a merge drawing and vice versa.

<< PREV: Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 5: NEXT>>

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3 - Flash CS5 Beginners Tutorial

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5

The merge drawing mode is referred to as such because when merge drawings that are of the same color overlap with each other, they will end up merging with each other. But with object drawings, each shape is treated as a separate object (hence the term object drawing mode), so they will not merge with each other when they overlap.

Let's see how this works.

Step 1

Create a new Flash document.

Step 2

Select the oval tool. Make sure that the object drawing mode is OFF.

Step 3

In the properties inspector, remove the stroke by clicking on the stroke color box and choosing no stroke color.

Step 4

Draw two circles on the stage. Both should be merge drawings, and both should have the same color.

Step 5

Switch to the selection tool and then click and drag one of the circles so that it overlaps with the other circle.

Step 6

Once they overlap, press ctrl + shift + A (PC) or cmd + shift + A (Mac) in order to deselect the selection.

Check to see that the dotted pattern on top of the shape disappears. If it disappears, it means that the shape has been deselected. Another way of deselecting an object is to use the selection tool and then click on any empty area on the stage.

Step 7

Then click anywhere on the newly overlapping shapes using the selection tool. You should see that both shapes are now merged together.

This is now considered as one shape. If you click and drag it, then the whole shape will move to wherever you reposition it.

Step 8

Now, let's find out what happens if you overlap merge drawings that have different colors.

Select the oval tool again, and then go to the properties inspector and choose a new fill color.

Step 9

Then draw another circle on the stage, and then use the selection tool to move this new circle so that it overlaps with the other two circles that were merged.

Step 10

Then press ctrl + shift + A (PC) or cmd + shift + A (Mac) in order to deselect the selection.

Step 11

Once the selection is deselected, click the new circle again and drag it away from the other shape.

Once you've moved it to a new location, you'll see that it takes with it a chunk of the other shape.

This is what happens when merge drawings of different colors overlap - the shape on TOP will "eat up" the parts of the shape underneath it.

As I mentioned in the beginning of this tutorial, this only applies to merge drawings. Object drawings will not combine with each other if they overlap. This difference in behavior is probably one of the more important considerations you have to think of when choosing to work in the merge drawing mode or the object drawing mode. If you want to easily combine shapes just by overlapping them, then choose the merge drawing mode. If you want to make sure that each shape remains separate, then choose the object drawing mode.

In part 4 of this series, we'll see how the paint bucket tool behaves depending on the drawing mode used to create closed shapes.

<< PREV: Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 4: NEXT >>

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2 - Flash CS5 Beginners Tutorial

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5

When you create shapes using the rectangle, oval and polystar tools, you'll also have the option to work in either the object drawing or merge drawing mode. And just like in the examples we created in the first part of this tutorial series, these rectangles, ovals, polygons and star shapes will behave differently depending on the drawing mode used to create them.

Step 1

Create a new Flash document.

Step 2

Select the Oval tool.

Once it's selected, you'll see the object drawing mode icon at the bottom of the toolbar as well. Just like with the brush tool, you can turn the object drawing mode on or off by clicking on it.

Step 3

In the properties inspector:

• choose a stroke color and a fill color (make sure you choose different colors for each)
• set a stroke height of 10
• choose the solid style

Step 4

Draw two circles on the stage - one on the left and one on the right. The one on the left side should be drawn in the merge drawing mode, while the one on the right side should be drawn in the object drawing mode.

Step 5

Choose the selection tool, then click and drag the object drawing circle on the right side to a new location. Just move it anywhere you'd like as long as it does not cover the circle on the left.

When you do this, nothing out of the ordinary happens. You'll be able to move the circle to a new location, just like you'd expect.

Step 6

Now, let's try to move the merge drawing circle on the left.

First, position the selection tool somewhere in the center of the circle.

Then click and drag to move the circle to a new location. When you do this, you'll see that the stroke gets left behind.

This is really how merge drawings will behave. With merge drawings, the stroke and the fill are treated separately. If you click on the fill, then it's only the fill that gets selected. If you click on the stroke, then its only the stroke that gets selected.

With object drawings, all you have to do is click anywhere on the shape, and the fill and stroke are automatically included in the selection. However, if you double-click on it, then you end up going inside the object drawing where you can select the fill and the stroke separately. And as always, remember to go back to the main scene after you're done editing inside the object drawing.

Step 7

So what do you do if you have a merge drawing, but you'd like to select both the fill and the stroke?
To do this, you can use the selection tool to click and drag a selection area that covers the entire shape.

Or you can also hold down the shift key on your keyboard, which lets you make multiple selections. While holding down the shift key, click on the fill, and then click on the stroke in order to select both.

In part 3 of this series, we'll learn why the terms merge and object were used to define these drawing modes.

<< PREV: Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 1

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 3: NEXT>>

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 1 - Flash CS5 Beginners Tutorial

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5

When you use the drawing tools in Flash, you have the option to draw in two modes: object drawing mode vs merge drawing mode. This article will explain a few of the differences between the two.

Step 1

Create a new Flash document.

Step 2

Select the brush tool. You can use any brush size, color and shape that you'd like. But I recommend that you choose a brush size that's not too small so that what you draw will be thicker and more visible. Also, make sure that the color you choose is different from the background color of your document.

Step 3

Once the brush tool is selected, take a look at the toolbar and look for the icon that shows a circle inside a square.

You can click on this button, and it allows you to activate or deactivate the object drawing mode. If the icon appears to look inset, it means that the object drawing mode is ON. If not, then it means that the object drawing mode is OFF, and you are therefore on merge drawing mode instead.

Clicking on this button lets you switch between object mode and merge mode. Check the object drawing mode button in your toolbar to see whether it's ON or OFF. If it's ON, then click on it to turn it OFF. If not, then leave it as is.

Step 4

The best way to explain the differences between the two drawing modes is to create examples. So make sure that the object drawing mode is OFF. Then draw a line on the left side of the stage using the brush tool.

Now remember, since the object drawing mode is OFF, this means that this line was drawn in merge mode.

Step 5

Now let's switch to the object drawing mode. So this time, make sure that the object drawing mode is ON. And then draw another line on the right side of the stage using the brush tool.

Immediately, you'll notice a difference. You'll see that this new line that you drew while you were in the object drawing mode is enclosed in a box. When it's enclosed in this box, it means that the artwork is currently selected. And when it's selected, this means that you can edit it (e.g. move it, change the color, modify the size). However, when you select something that was drawn in merge mode, it will NOT show a box or a border around it. In the next step, we'll see what happens instead.

Step 6

Now let's select the other line to see how artwork drawn in merge mode will look like when it's selected.

In the toolbar, choose the selection tool (it's the black arrow).

Then click on the line that you drew on the left side of the stage in order to select it.

Here, you'll see that the selection looks different (click on the image above to enlarge). Instead of being enclosed in a box, you'll see dots all over the artwork. So when you see this, this means that you currently have a merge type of drawing selected.

So here we see that object drawings and merge drawings look different from each other when they are selected. This easily lets us know whether something is an object drawing or a merge drawing.

But aside from this, what other differences do they have?
Another difference between a merge drawing and an object drawing is this:

Merge drawing - you have the ability to directly select just a portion of the drawing

Object drawing - if you try to select even just a small portion of the object drawing, the entire object drawing automatically gets selected

To better understand this, let's practice it using our examples on the stage.

Step 7

Make sure you're still using the selection tool. Let's first try to select a portion of the merge drawing on the left side of the stage. To select a portion, use the selection tool, then just click and drag a selection area that covers a small part of the artwork. Refer to the image below as a guide:

Once you release the mouse and you've selected the portion, you'll see the dots appear only on top of the part that was selected. So this means that the parts that are not covered with dots are not included in the selection.

Step 8

Now let's edit the currently selected portion.

Go to the toolbar, and select a new color for the selected portion by picking one from the fill color box.

Just click on the color box and select a different color. You'll then see that the new color only applies to the selected portion.

So with merge drawings, you see that we can easily select just a portion of it. The selected portion can then be edited without affecting the rest of the drawing. You can change the selected portion's color, modify it's shape, move it to a different location, or you can even delete it if you'd like.

In the next step, we'll see if we can do the same thing with the object drawing on the right.

Step 9

So now, while still using the selection tool, we'll try to select just a portion of the drawing on the right.

Go ahead and click and drag a selection area that just covers a portion of the shape, similar to what we did in step 7.

Once you release the mouse, you'll see that even though you selected only a portion of the drawing, the entire shape still gets selected. That is what happens with object drawings. As long as you select even the tiniest portion of the drawing, the entire thing gets selected.

But what can you do if you've got an object drawing, but you'd still like to be able to select only a portion of it? The next step will show you how.

Step 10

With object drawings, it's still possible to select just a portion of the shape. There's just an extra step that you have to do.

First, take note of the edit bar, which can be found above the stage. It should say Scene 1.

The edit bar tells you where you are. Right now, you are on scene 1.

Now go ahead and double-click on the object drawing on the right side of the stage.

After you double-click on it, look at the edit bar again. It should now say Scene 1 followed by Drawing Object.

What this means is that you are now inside the drawing object. You should see that you no longer have the box around your drawing. So in a way, it's as if you opened the box to get direct access to the artwork inside it. And now that you're inside the box, you'll be able to treat the artwork as a merge drawing. So you'll now have the ability to select just portions of it instead of the entire shape.

Step 11

Once you're finished editing an object drawing, it's important that you go back to the main scene. Otherwise, you might end up inadvertently adding unwanted elements to the object drawing that you're currently editing.

To go back to scene 1, just click on the Scene 1 link in the edit bar.

NOTE: Always be mindful of the edit bar. It's a common mistake for many to accidentally double-click on an object drawing, and then they fail to notice that they are no longer in the main scene, but continue to work as if they are.

In part 2 of this series, we'll create some object and merge drawing examples using the oval tool.

Understanding the difference between Object Drawing Mode vs Merge Drawing Mode in Flash - PART 2: NEXT >>