INFO 424 SCHEDULE

Olympic medals, Phase 10 - Draw circles

Phase 10:
Draw the circles with ActionScript

Now that the data is coming from an external file, other possibilities start opening up to allow us to make the application more scalable and flexible. Ultimately, you'll want to be able to add any number of countries to the database and have them automatically display.

In this phase, we'll continue to address the barriers to making this happen. One is the fact that we've drawn the country circles by hand and carefully placed them in the correct locations. In this phase, youi'll automate that process.

Step 1: Learn to draw with ActionScript

a. Download the code module: introToDrawing.fla. You'll see that there is nothing on the stage and the timeline consists only of an actions layer.

b. Test the movie. You should see this:

rectangle drawn with ActionScript

c. Look at the code. Here are some things to note:

import statements

The concept of an import statement is fairly straightforward. You use an import statement to specify which ActionScript classes or packages you will use in your code. This allows you to keep your application small because it only brings along the parts of the ActionScript code that are needed for the particular application.

In reality (in my experience), it isn't so straightforward. Sometimes things work just fine without an import statement and I don't understand why. And one reference said that only the used portions of the classes are loaded which makes it sound like you could load all of the classes without slowing things down.

Sprite

A sprite is a basic display object. Other basic display objects are Shapes and Movieclips. Shapes are even more basic than sprites - they can appear as simple shapes on the screen, but they aren't interactive (they don't have mouse events so you can't click on them and have something happen). Also they can't have 'children'. Sprites can have children and can be interactive. Movieclips can do everything Sprites do, plus they have a timeline. Shapes take less space than Sprites. Movieclips take more space than Sprites.

You may notice that these three elements, Shapes, Sprites and MovieClips sound somewhat related to the three symbol types, Graphic, Button and MovieClip but the first three are created in ActionScript while the last 3 are created with the Flash GUI interface.

Graphics class

Every Sprite, Shape and MovieClip object has a graphics object which is used to draw. You will learn about this in this lab. For common shapes (circles, elipses, rectangles, and rounded rectangles), you can use built-in drawing methods. You can create more complex shapes by producing a series of lines and curve.

c. Make a copy of the code module, then change the code to create a circle (look in the comments at the bottom of the code panel to learn how). Give the circle a radius of 30 pixels, with a fill color 0x0022FF and a 7-pixel stroke that is this color: 0x5500DD. Position it 50 pixels from the top of the stage, 50 pixels from the left of the stage. When you test this movie, It should look like this:

actionScript circle

IMPORTANT POINT: notice that there are two sets of x,y values

When you draw an element in your sprite, you specify the x & y coordinates of that element within the sprite with the first two parameters in the parentheses:

When you position the sprite itself, you specify the x & y coordinates like this:

Here is an illustration of that concept:

Step 2: Draw the country circles in AS

a. Open Medals_9_XML.fla and save it as "Medals_10_draw.fla."

b. Incorporate the code for drawing a circle into this file (put the import statement at the top with the other import statement, then put the rest of the code together somewhere after the list of var statements.

Test it to be sure it works. The circle should appear on top of everything else:

Next, you will be modifying this code so that the circle it draws is the Canada circle.

c. Change the sprite variable name from "myShape" to "canadaCircle" and add another var statement to create a sprite called "japanCircle":

var japanCircle:Sprite = new Sprite();

d. Change the size and color values for the original circle to make them match the values for Canada below, and draw a second circle which matches the values for Japan (note that these circles don't have lines, just fills).

country radius color
Canada 26 0x4D8390
Japan 31 0x979D6D

e. Change the x & y coordinates to following values:

country x y
Canada 124.55 157.8
Japan 814.55 225.80

NOTE: these numbers might not match up with your circles. Don't worry about it. Just use these numbers anyway. It will be easier later on (since I'll be giving you more numbers like this and you don't want to have to convert them each time).

e. Test your movie. You should have circles that look just like the previous Canada and Japan circles, but that sit there doing nothing while the other circles move:

Step 3: Add the labels to the circles

Next step will be to add the labels Canada and Japan.

You'll do this by adding a child to the existing sprite. The child will be another object, that becomes part of the parent object.

a. Download the code module addTextWithAS.fla. When you run it, you'll see this:

howdyText

Make a copy of this module and spend some time tweaking the settings to see the results. In my experience, this can be a little frustrating because sometimes the results aren't what you expect. Here are some of my experiments:

b. Read the comment at the beginning of the code pane which explains the connection between a TextField object and a TextFormat object.

c. Go to your Medals_10_draw.fla file and create the following 3 variables:

  1. A TextFormat variable called "circleFormat"
  2. & 3. Two TextField variables called "CanadaTextField" and "JapanTextField" (note: since the text has the same color, size and font for both circles, you'll just need one TextFormat object which you'll use for both TextField objects).

d. Now set the parameters for your TextFormat like this:

parameter value
font "Arial"
color "0xffffff"
size 12

e. Now set the parameters for your TextFields like this:

type TextFieldType.DYNAMIC
autoSize TextFieldAutoSize.CENTER
x -2 [start with 0 and you'll see why I've changed it]
y -10 [as above, start with 0 to see why I've set it to -10]
text "Canada" or "Japan"

e. Assign the format to the text object by following this model:

<textFieldname>.setTextFormat(<formatname>);

f. FInally, add the text fields to their circles like this:

<circlename>.addChild(<textField name>);

g. Test your code, your circles should now have their names.

h. Zip your .fla and .xml file (you didn't modify a .xml file, but for testing purposes please include this).

FINAL PRODUCT: Medals_10_draw.zip

In the next phase, you'll refine this to pull this info from the XML file rather than hard-coding it. But first solidify what you've just learned by reading over the summary and doing the exercise.

SUMMARY

In this phase, you've learned how to generate shapes and text with ActionScript, and how to add them to the stage or another display object to make them show up.

Sprite

a basic type of display object

var myDisplayObject:Sprite = new Sprite();

Graphics

an object which is included with every Sprite, Shape or Movieclip object and lets you draw

myDisplayObject.graphics.beginFill(0x000000);
myDisplayObject.graphics.drawCircle(0,0,60);
myDisplayObject.graphics.endFill();

code module: introToDrawing.fla

TextField

a display object which contains text (has many properties which can be set)

var myText:TextField = new TextField();

code module: addTextWithAS.fla

TextFormat

an object which specifies the formatting (size, color, font etc) of text

myText.setTextFormat(myformat);

add to stage or existing display object

<name of display object>.addChild(<name of parent display object>);