Join Anastasia McCune for an in-depth discussion in this video Working with shapes in Merge Drawing mode, part of Up and Running with Flash Professional.
Let's practice adding some Merge Drawing mode shapes to our fastCar project. So go ahead and open that file if you don't have it already, from your Exercise files. We're going to draw the sun and our sun is going to have four elements; yellow points to look like sun's rays, orange points to look like more sunrays, a yellow circle for the face and finally, the face itself, made up of sunglasses and a smile. Each item will have its own layer. So we need four new layers. The sun should appear throughout our entire 96-frame movie.
So let's select the background layer and insert four new layers above it. I'm going to expand my timeline, so we can see them all at once. Let's rename our new layers bottom to top as "yellowSun," "orangeSun," "sunCircle" and "sunFace." So with our layers like this, all five of them that are going to exist for all 96 frames are kind of visually grouped together on the timeline. Now let's select Frame 1 of the yellowSun layer and in the toolbar, click and hold down the Oval or the Rectangular, whichever one you got showing there, and choose the PolyStar tool.
This tool allows us to choose between drawing polygons and stars. So in the Property Inspector under Tool Settings, click on the Options button. Under the Style dropdown, choose Star; for Number of Sides, choose 7. So we get seven points. For Star point size, type in 0.5 if it's not already there and click OK. For our star's stroke, let's choose black and for the sill, let's choose yellow. Click and drag to draw your star and before you release the mouse, try to have one of the seven points pointing straight down.
You can rotate your star afterward with the Free Transform tool if you don't get the rotation right off. Don't worry too much about the size. Once you've got your star, switch to your Arrow tool and double-click the star, so you're sure to get the fill and the stroke. Than in the Property Inspector, under Position and Size, make sure the little icon of the chain looks like a connected chain. If it's a broken chain, click it so that as we change the width, the height will change proportionally. Type in 100 for your width.
Let's zoom in on our star for the next step. Now we'll copy our yellowSun and then rotate and change the color to orange for the copy. Go ahead and select your star and then hit Command+ or Ctrl+C on your keyboard to copy. Now lock your yellow star layer and click in Frame 1 in the orangeSun layer. Go to Edit menu and choose Paste in Place. Press Q on your keyboard to bring up the Free Transform handles on the star and then rotate it so the points are juxtaposed with the star behind it.
If you can't get the star to line up just how you'd like, go to the Window menu and choose Transform. The Transform panel comes up and next to Rotate, you can click and drag the number indicating the rotation to the right or to the left to rotate the star slowly. Once you're happy with your rotation, grab the Arrow tool, click on a blank part of the stage to deselect everything and then click once on the fill. In the Property Inspector, change the Fill color to orange FF9900.
Now we need the circle for the sun's face. Lock the orangeSun layer and select Frame 1 of the sunCircle layer. This part will be easy. In your tools, choose the Oval tool. The stroke is already set to black, so just change the fill to the same yellow color we used for our star, FFFF00. Draw a circle that nestles in the center of the sun. Remember that you can hold down the Shift key as you draw to have the dimensions of the circle remain proportionate to each other. Adjust the position of your circle and when you're done, lock your sunCircle layer.
All we have left to do is to place the sun's face. We imported this into our library, as a vector Illustrator file previously. So select Frame 1 of the sunFace layer, open your Library and drag face to the stage. Use your mouse or your Arrow keys to position the face to your liking and we're done. So our sun looks good and if you've zoomed in as you worked, now might be a good time to change the zoom back to Fit in Window. Let's test our movie and indeed the sun appears and persists during the entire 96-frame movie.
Go ahead and close your SWF. Now there's only one thing we might want to do as we go along. While it's good that each part of the sun has its own layer, if you don't like the position of your sun, you have to unlock all four layers, hit Command+ or Ctrl+A to select all of the sun assets and then move them all at once. While that's okay, a better solution would be to have all the shapes move as a group to prevent accidents. So let's try it. With all of the sun assets selected on all four of the layers, hit Command+ or Ctrl+G. Now try to move the sun using your arrow keys and you can see there just one of the layers moves.
Our sun pieces weren't grouped together because they're on different layers. So grouping only works for items all on one layer. We really do want to keep things on separate layers because we're going to animate the sun down the line. So for now we're just going to leave it the way it is. So go ahead and lock all of your sun layers again and we're done. We've used a lot of the different drawing tools here, but if you want a detailed explanation of all the drawing tools and all their options, check out the Flash Essential Training courses by Todd Perkins here in the lynda.com Online Training Library.
- Choosing the type of document to work with
- Changing document settings and orientation
- Importing bitmaps and vector files
- Organizing layers
- Understanding the timeline, frames, and keyframes
- Creating shapes
- Understanding the three symbol types (graphics, buttons, and movie clips)
- Defining motion and shape tweens
- Nesting timelines
- Using effects and masks
- Working with text
- Importing and adding audio and video
- Publishing your project