In this video, we're going to cover drawing shapes in Flash. Feel free to try this along with me, to pause and rewind, and practice. Now, a note before we get started. All of the Drawing tools that you'll use in Flash create vector shapes, which means they're infinitely scalable. So, your Pen tool, your Rectangle and Oval tool, your Pencil, the Primitive Drawing tools will all be creating scalable, small file size art.
So to start, before I create a new document, I'm going to switch to my favorite workspace using the Workspace Switcher on your Application Bar across the top. So, Classic is my favorite workspace. And once I'm on Classic, I'll choose File > New. In the new document window, I always leave it on Action Script 3, and click OK. And now, I'm going to go to my View menu, Magnification > Fit in Window. I have assigned a keyboard shortcut to that to be Cmd+0 on the Mac, or Ctrl+ 0 on the PC. And you can do that on the Mac under Flash keyboard shortcuts, or on the PC under your Edit menu keyboard shortcuts.
So, I'll be using that throughout this video. Now, here are my Shape tools. If I click and hold for two seconds or right-click, you could see underneath the Rectangle tool, we have Nested tools. In this video, we're going to be covering the Rectangle tool and the Oval tool, and how Flash draws by default. So, let's start with the Rectangle tool. Like other Adobe programs, single letters change tools. So, if I was on the Selection tool, simply hitting the letter R by itself, the rectangle on my keyboard would jump me to this tool.
You'll notice down at the bottom of the tools panel I have a Stroke Color and a Fill Color. I can click on the black and choose a new stroke. Stroke is Adobe's term meaning border or outline. A lot of my students who are newer to computer drawing keep asking me what it's called a Stroke. Well, that's a term that's been around for a while, even in the high-end print world. But it means the border of the object or the outline of the object. I'll choose a blue for the stroke color. Another spot you could set the stroke or outline or filler inside color is in the Property Inspector.
So, I'm going to come over to my Properties panel, there's the blue I selected for the outliner stoke. And here's the Fill Color. And when I click on Fill Color, I can come down and select a yellow. Now, I'll click and hold and drag to make a rectangle. I can keep my Shift key held down if I want to constrain it to a perfect square and I let go of my mouse first then the Shift key. I call them clutch keys. You put them in, you shift the gears, then you let them go. To move or select the object, I need to go back to the Selection tool. And since I'm a keyboard shortcut fanatic, I'm going to hit the letter V for move, and that jumped me back to the Selection tool. Feel free to click on it if you're not as into shortcuts as I am. When I click once on the fill, the yellow inside color of this square that I've created, you'll notice a pattern.
This pattern means that it was created using Flash's default Merge Drawing mode, and you'll notice in the Properties Inspector, there is no stroke color. And you might say, hey, I just saw you choose blue as your stroke color and I could see that blue on the stage. Well, if I click and drag this square outside, you'll notice it separated this stroke from the fill. This, to me, was not natural because I've been teaching Illustrator for a few years more than Flash and this doesn't happen in Illustrator.
However, this is called Cookie Cutting. And it's been with Flash since its inception. The logic behind it is, if you don't send the entire stroke, this little piece that's sliced away, it makes a smaller file size. Well, we have the technology to slice that on export. We don't need to slice the objects as they're built. Here's another thing to be aware of when drawing in the Merge Drawing mode. If I click on the top of the square, I get only the top of this border or stroke selected, and that can be moved. If I undo that and double-click, I can get the entire stroke and click and drag, and there's the cookie cutter effect I was referring to. So, a lot of Flash users early on got in the habit to double-clicking to select the entire shape.
Or once they've drawn a shape, they would do a Select All and group them. There's no need to do either of those things anymore. To be safe and to make it more comfortable for me, for someone who is used to Adobe Illustrator before she started using Flash, I'm going to turn on a feature called Object Drawing mode. When I go to my Rectangle tool at the bottom of the toolbar, they added a new feature, and I think this was added in Flash CS3. It may have been a little bit before then, but we've had it for a few versions.
When I turn on Object Drawing mode, and this only shows up once you're on a Drawing tool, the good news is, once it's on, it's on forever. But once I turn that on and draw roughly the same shape, holding down Shift to make a perfect square, letting go of my mouse then letting go of Shift. Now, when I go back to the Selection tool and click and drag to move the object, I'm moving the entire shape. In fact, if I click and hold on the rectangle, or right-click the Oval tool and draw an oval, you'll notice a blue bounding box around the outside. This blue box means that object drawing is on. If I turn Object Drawing off and click and drag to create another oval, there's no blue box.
If I go to my Selection tool, click on the oval, I've only got the inside. Double-click, and I've got the fill and stroke. Click on this one, and the whole object is selected. No need to group, no need to double-click. So, the moral of the story is to be comfortable in creative shapes. I'm going to always have Object Drawing mode on, and to not forget that I'll go back to my Oval tool. Back to Object Drawing, and make sure it's on before I quit or begin creating any other shapes.
So, give these two different drawing modes a try on your own, the Merge Drawing and the Object Drawing. Have fun.
- Understanding the Timeline
- Working with Timeline effects
- Adding keyframes
- Creating slideshows
- Incorporating other media into your movies
- Distributing your work effectively
- Organizing your assets
- Developing efficient workflows