3B - Drawing Shapes

15/11/2010 11:16

You can draw shapes in Flash CS5 by using the various drawing tools provided.

Shape Tools

Now we will use the shape tools to draw the grass and tree.

The Grass

Make a new layer for the grass. To do this:

  • Click the “Insert layer” icon at the bottom of the timeline.
  • A new layer “layer 2” will appear.
  • Rename it “Grass”.

    insert new layer in flash cs3

Rectangle Shape Tool

Now let’s use the rectangle tool to make the green grass area. The fill color will be green and we do not want an outline for this rectangle. The stroke color indicates the outline color. Since we don’t want a stoke this should be “none”.

  • Set the stroke color to none in the tools palette (accessed by clicking  the tiny triangle) in the stroke color icon. 

    stroke coolor and color palette in flash cs3 
     
  • Choose the rectangle tool. 

    rectangle shape tool in flash cs3 
     
  • Click on the stage where the top left corner of the rectangle (for grass) should be and drag (without releasing the mouse) to the bottom right corner of the rectangle. 
     
  • Once the rectangle is drawn you can change the fill color to green in the properties window. 

    fill and stroke color in flash cs3
     
  • Finally convert the grass to a graphic symbol named “grass”.
     
  • If you look at the “library” palette now you will notice that there are 2 symbols – ‘grass’ and ‘train title’.

    library window in flash cs3

    If you cannot see your library palette, go to Window > Library and you will be able to see it. As you create new symbols you will be able to access them from the Library too.

 

Draw oval shapes and circles with the oval shape tool.

Continuing with the tutorial let us make a simple tree next.

The Tree

  • Make a new layer called “tree”.

Oval Shape Tool

The Tree Top

  • Making sure that the "tree" layer is selected, choose the oval drawing tool. 
     
  • To select the oval drawing tool you will need to click the tiny arrow at the bottom of the rectangle tool for a little while. 
     
  • Different shape options will open up. 
     
  • Select the “oval tool” option. 

    Oval / circle shape tool in flash cs3
     
  • You might want to have a light green fill color and dark green stroke color. 
     
  • On the stage, draw an oval shape for the top part of the tree. 
     
  • Double click on the oval you just drew to select both the stoke, and the fill. 
     
  • In the properties palette increase the stroke height to 3. Notice that the outline is thicker now.
     
  • You can manipulate the properties of the stroke or the fill individually by select only the stroke or only the fill.
     
  • Select the oval (double click so both the stroke and the fill areas are selected) and convert to a graphic symbol named  “oval”. You can also get the “convert to symbol” option when you right click after selecting the shape.

The Tree Trunk

Now in the same “tree” layer, let’s make the tree trunk.

  • Using the rectangle tool draw the tree trunk with a dark brown stroke color and a lighter brown fill color. 
     
  • Select it and convert it to a graphic symbol named “rectangle”. 
     
  • You will notice that the tree truck is showing where it overlaps with the tree top. 
     
  • To bring it behind we need to use the “send to back” option.
    Modify > Arrange >Send to Back
     
  • Select the tree top and the tree trunk (select tree top first, press Shift key, select tree trunk) and convert to a graphic symbol named “tree”.
     
  • This is how the stage looks now:
    flash cs3 animation tutorial
  • Draw lines in Flash CS3 using the Line Tool.

    Continuing with the tutorial let's begin to draw the railway track using the line tool.

    Railway Tracks

    • Create a new layer named “railway tracks”. 
       
    • Ensure that it is the top most layer. If not, drag it to the top.
       
    • Select the line tool.

      Line Tool in Flash CS3
       
    • In the properties palette choose the color black, enter the line height “2” and select the option “Solid”.
       
    • Draw a straight horizontal line across the stage.
       
    • Select it and convert it to a graphic symbol named “line”.

Reusing Symbols

 

Reusing symbols reduces the file size of the animation and makes it faster to load.

We can make copies of symbols which are called instances of the symbol. Each instance can also be given a different name in the Properties window.

Continuing with the tutorial, let's reuse the "line" symbol to create the 2nd line of the railway track.

  • Select this line symbol (on the stage)
  • Copy it (Edit Copy)
  • Paste it (Edit > Paste)
  • Position this copy a bit lower than the first. 

ASSIGNMENT:

At this point you should have this done.  Export as a movie and put it in your YouTube channel then put it as a link in your facebook account.