Simple Graphics - 05graphics.fla

This program creates a movie clip and puts some shapes into it.

• Input - Button press to trigger the processing.
• Process - Create a movie clip.
• Output - Plot some graphics into the movie clip.

1. Start up Flash.
2. Create a new Flash document.
3. Save the file as 05graphics.fla

Place a button onto your canvas. See lesson 01 step 11 for a reminder on how to do this.

The code below creates an empty movie clip. You can plot your graphics into this clip.

Open the Actions - Movie Clip view and enter this code.

on (release)
{
  _root.createEmptyMovieClip("myTriangles", 1);
  
  with (_root.myTriangles) {
    lineStyle(2, 0x00ee00, 100);    // 2 thickness, 0x00ee00 colour, 100% alpha 
    beginFill(0x00cc00, 50);        //              0x00ee00 colour,  50% alpha
    moveTo(50, 50);                 // Start position
    lineTo(200, 150);               // Straight line to this position
    lineTo(80, 210);                // Straight line to this position
    endFill();                      // Complete the path and do the fill

    lineStyle(5, 0xff0000, 100);    // 2 thickness,     0xff0000 colour, 100% alpha 
    beginFill(0xff0000, 50);        // semi transparent 0xff0000 colour,  50% alpha
    moveTo(100, 100);               // Start position
    lineTo(300, 120);               // Straight line to this position
    lineTo(20, 150);                // Straight line to this position
    endFill();                      // Complete the path and do the fill
  }
}

Setting Colours

Colours are set with hexadecimal numbers. You could use a normal number but there is no obvious logic to the colours.
Black = 0
White = 16777215
All the other colours are represented by numbers between these values.

Using hexadecimal

Here is a hexadecimal number 0xFFCC22. The "0x" indicates that the number is hexadecimal. The next two digits represent the amount of red in the colour. The middle two digits represent the amount of green in the colour. The final two digits represent the amount of blue in the mix.

Hexadecimal numbers are written down using the following symbols " 0 1 2 3 4 5 6 7 8 9 A B C D E F "

00 represents none of the colour
FF represents the maximum amount of the colour

Here are come common colours

0x000000 = Black
0xFFFFFF = White
0xFF0000 = Red
0x00FF00 = Green
0x0000FF = Blue
0xFFFF00 = Yellow
0xFF00FF = Magenta
0x00FFFF = Cyan
0x468ACE =Try it out.

Here is the finished program.

To run this again, refresh your page.
(With Internet Explorer, press F5)

You can download the source code.

Task

1. Write your own program and draw your own shapes.
2. Experiment with the alpha value to set the transparency of your shapes.
3. Experiment with the co-ordinates and work out how the co-ordinate system works.
4. Experiment with the colours.