<-- Home

 

Creating Star People
in Macromedia Flash 3

 

Flash is a drawing and animation program for creating your own graphic images and animation for the web. You, too, can draw! This tutorial shows you how by going through the process of creating Star People. The tutorial steps are in bold typeface and flush left, with extra comments plain and indented.

By the way, there are other ways you can achieve similar artistry using other tools in Flash. Experiment with the various tool options after you've completed the tutorial and you're comfortable with the program. For more information on how to use Star People in your presentations and instructional products, read C. Kearny's Graphics for presenters (1996) Menlo Park, CA: CRISP Publications, Inc.

In this tutorial, you'll learn the following:

Using the Pencil Tool

  • Drawing Lines for a Body
  • Drawing a Circle for a Head

Using the Paint Bucket Tool

Using the Color Window

  • Creating a Gradient
  • Adjusting the Gradient
    • Centering
    • Resizing
    • Rotating

Using the Selection Arrow's Curve and Angle Tools

Using the Modify Menu's Grouping Tool

Using the Paintbrush Tool

 



Using the Pencil Tool


Open the Flash program and select the File > New menu item.

The keyboard shortcut is command N.

Click on the pencil tool icon in the tool section (the upper section within the tool window) to choose the pencil tool.

Notice that the pencil tool icon is now highlighted.
 
The tool modifier section (below the tool section within the tool window) gives you choices that affect the actions of whatever tool you select.

 


Click and hold on the square in the tool modifier section to see the Pencil Mode pop-up menu.

Hold down the mouse key until the bottom of the pop-up menu to choose the line tool.

The tool modifier icon will display a line tool icon to reflect your choice.
 


 


Drawing the Lines for a Body

Place your cursor in the lower part of the drawing window.

Click and drag a line at an angle to start drawing a star-shaped body similar to the one shown here.

Try not to move your cursor when you release the mouse button!

With the cursor as near as possible to the endpoint of the first line, click/drag another line at an angle from the first line.

Repeat this process of drawing connected lines until you've drawn the Star Person's body.

By the way, the middle upper point is for the Star Person's neck.

 


Drawing a Circle for a Head

Click /hold on the tool modifier icon (the square in the middle of the toolbar window) to choose the oval tool from the pop-up menu.

Place the cursor on the screen, away from the star body, and click/drag a circle big enough for a head on the star body.

Note: if you draw the head too close to the body, it will be difficult to rearrange the two later when you're ready to determine the best arrangement for the Star Person's parts.
 

 



Using the Paint Bucket Tool


Choose the paint bucket tool in the tool section within the toolbar window.

The toolbar window's contents will change to reflect your choice.

Click/hold on the color choice button in the middle of the toolbar window to open a pop-up menu of color choices.

Release the mouse button over the gradient selection button at the bottom of the pop-up color choice menu.

This opens the Color window atop the drawing area.
 
Now you will create gradient fills for the Star Person's parts.



Using the Color Window

The Color window offers Solid or Gradient fills to "pour" into your graphics.

For Star People, click on the Gradient tab.

The button below the slidebar offers a choice between Linear or Radial gradients.

Select a Linear gradient for filling the Star Person's body.

Notice that the big square in the middle of the top of the Color window changes to reflect your gradient choices.

Creating a Gradient

Click on the pointer directly above and left of the horizontal slide bar in the middle left of the Color window (not the black pointer on the outside left).

Now, with your cursor, choose any color in the color picker block (the biggest square in the Color window) to start your gradient.

Adjust the color brightness with the vertical slider to the right of the color picker square.

Notice that your color choice is indicated by the values in the RGB boxes and in the rectangle just below the color picker square.

Click on the pointer above and right of the horizontal slide bar, and choose any color in the color picker square to end your gradient.

Adjust the color brightness with the vertical slider.

By the way, you can move the horizontal slide bar pointers to determine where your gradient makes its color transition from the beginning color you chose to the end color.

Click the New button at the bottom of the Color window.

Your new gradient now appears as a choice in the Gradient display at the top of the Color window and within the Color choice pop-up window of the toolbar window.

Close the Color window by clicking on the close button at the top left of the Color window.

Fill the Star Person's body with your new linear gradient by using the paint bucket tool and clicking anywhere within the body.


Adjusting the Gradient

Click on the bottom right button of the toolbar window to activate the gradient adjustment tools.

The cursor now has a gradient bar next to it to reflect your choice.

Click on the Star Person's body.

Now, adjustment lines with 'tool icons' on them are both sides of the Star Person's body. and there is a circle midway between the lines.

 


Centering

Put your cursor on the white circle within the Star Person's body; click/drag it around to set the center of your gradient -- where you want the midpoint of the gradient's transition.

Resizing

Click/drag the square on the adjustment line to shrink or enlarge the gradient within your graphic.

Rotating

Click/drag the top circle on the adjustment line to rotate the gradient.

Make whatever adjustments you wish to the gradient until you're satisfied with the result.

Then, deselect the body by clicking on a blank portion of the drawing area.

Also, deactivate the adjustment tools at the bottom of the toolbar window by clicking the adjustment tool icon dark or "off."

Notice that the cursor reverts to the tool icon shape, in this case, the paint bucket.
Now you're ready to create a Radial gradient for the Star Person's head.

Choose the paint bucket tool from the toolbar.

Select Radial from the Gradient option in the Color window.

Notice that the middle square of the Color window also reflects the change from linear to radial.
 
By the way, when you choose colors for the head, be sure that your starting color (on the left of the gradient bar) is lighter than your ending color (on the right of the gradient bar); otherwise your Star Person will have a convex head (and look like a dishpan!). Also, the lighter color in the middle will make the eyes and mouth (which you'll add soon) show up better.

Click on the New button and close the Color window.

Fill the Star Person's head using the paint bucket tool and your new Radial Gradient.

Make any adjustments you wish to the radial gradient's position within the Star Person's head by selecting the icon on the bottom right of the toolbar to activate the adjustment tools.

Notice that because you are adjusting a radial gradient, the graphic is surrounded by a circular adjustment line with tool icons on it.
 
By the way, in addition to centering, resizing, and rotating adjustments available for linear gradients, you can also adjust radial gradients vertically (middle tool icon on the circle adjustment line).
 

 



Using the Selection Arrow's Curve and Angle Tools

Now you'll make adjustments to the Star Person's body to give it some curves and adjust its proportions.

Choose the selection arrow tool at the top of the tool section within the toolbar window.

Notice that, now, when the cursor is next to a straight line, the cursor has a curve next to it; and when the cursor is next to an angle, the cursor has an angle next to it.

With the curve cursor, click/drag the lines forming the legs and arms, reshaping them as curves and giving them a semblance of motion and fluidity.

 

 

 


With the angle cursor, adjust the proportions of the Star Person's limbs to indicate direction and stature.


 


Using the Modify Menu's Grouping Tool


Select the entire body by drawing a selection square around it with the selection arrow tool.

Select the Modify > Group menu item so the body is protected during assembly with the head.

The keyboard shortcut is command G.

 
Now that the Star Person's body is filled and flexible, it's time to finish the head.

Select the pencil tool, and choose Smooth from the pencil tool modifiers pop-up menu in the middle of the toolbar window.

Draw a smile (or otherwise) on the Star Person's face.

 



Using the Paintbrush Tool

Select the paintbrush tool from the tool section of the toolbar window.

Select an appropriate size for the Star Person's eyes from the top square of the paintbrush modifier section.

Select the color choice icon and choose solid black for fill.

Draw a pair of eyes on the Star Person's face.

Note: if you had used your radial gradient as the fill, the eyes would have a different (interesting?) look to them.

 


Select the entire head using the selection arrow tool in the tool section at the top of the toolbar window.

Click on Modify > Group menu item (keyboard shortcut command G) so that you can move the entire head without leaving anything behind.

Note: if you ever want to change anything about the Star Person's head or body, you must first Ungroup them (keyboard shortcut command U).


Now that each graphic element is grouped, the Star Person's head and body can be arranged and rearranged without accidently losing an eye or changing any of the shapes or fills.

Click/drag the Star Person's head into a more satisfactory position on the body.

Use the keyboard's arrow keys to make fine adjustments in the head's position.

Note: without grouping, the separate graphics would actually combine where they now overlap, causing "rips" or empty spaces if you try to rearrange them later.

If the head appears to be behind the body, reselect the head (if currently unselected, using the Edit > Undo menu command -- keyboard shortcut command Z).

Then select Modify > Arrange > Bring to Front.

Finally, to be able to move the Star Person around, select and Group (command G) your final arrangement.