1.4 Introduction to Variables

The objective of this exercise is to display someone’s name, year of birth, and age in 3 text fields. Age will be calculated automatically. The exercise will illustrate the use of variables in AS3.

1. First some thoughts on variables, which we will use for this exercise.

Variables are entities that represent information. We might need, for example, to create a variable called “userName”, to retrieve the name of the user, and reuse it, independently of what the name of that user might be. From there forward, we can use “userName” in our code, instead of a specific name, because this information will change depending on the user interacting with our application – hence the name “Variable”

There are 3 main types of variables in AS3:

  • String – textual information, such as a name, always between quotes (“”)
  • Number – numerical information, such as age, that can be used in calculations
  • Boolean – binary information of the type “true” or “false”, very useful to turn things on and off, or to test the validity of a question (condition) we might need to ask. By the way, the name comes from George Boole, who invented Boolean logic, “the basis of modern digital computer logic” in the 19th century, according to this Wikipedia article.

Numbers can be floating points or floats (“numbers that would be too large or too small to be represented as integers” according to Wikipedia, for example 1.56233 or 0.2334), integers – “int” in AS3 (for example, 2 or -95 or 2383634) or unsigned integers – “uint” in AS3 (non-negative integers, for example, 2 or 95).

Specifying the type of variables helps Flash handle the information, and give us better feedback when something goes wrong.

2. Let’s define the main information we need: the name, year of birth and current year; and use the last two elements to calculate age.

First, let’s introduce a name (let’s call it “myName”, could be anything else), birth year and current year (again, both variables could be called anything else):

var myName:String="Nuno";
var birthYear:Number=1972;
var currentYear:Number=2010;

So, the name is defined as String, and the years are defined as Numbers. We could be more precise, and specify the years as “int”, or better yet, as “uint”, but for now we will not do it.

Now, let’s ask Flash to calculate my age, by using the arithmetic operator “-” to subtract my birthYear to the currentYear. Let’s use a variable for storing the result (myAge):

var myAge:Number=currentYear-birthYear;

3. Now we have the information we need, but we do not have where to put it yet. Let’s create 3 text fields, and put them on the stage, similarly to the previous exercise:

var myTextField1:TextField = new TextField();
stage.addChild(myTextField1);
var myTextField2:TextField = new TextField();
stage.addChild(myTextField2);
var myTextField3:TextField = new TextField();
stage.addChild(myTextField3);

Now, we need to position the text fields in different points of the stage, and resize them (default size is 100 by 100 pixels). I will also add a border around the text field so that we better check position and size.

By default, the Flash stage has 550 by 400 pixels (this can be changed in the Properties window). I will position each text field on pixel 30 on the horizontal axis, and specify 490 pixels of width (thus leaving 30 pixels on the right edge as well). The first text field will be positioned vertically at pixel 30, each subsequent one will be positioned 120 pixels bellow (at 150 and 270).

Horizontal position of any graphical element (called “display objects” in AS3) is defined by the property “x”. Therefore, this is the code for putting the first text field at the pixel 30 of the stage in the horizontal axis:

myTextField1.x=30;

The property for vertical positioning is “y”:

myTextField1.y=30;

And the property for width is, appropriately, “width”:

myTextField1.width=490;

We can use the property “border” of the TextField class to make the border of our text field visible (this property is of the boolean type):

myTextField1.border=true;

The code for text fields 2 an 3 will be similar:

myTextField2.x=30;
myTextField2.y=150;
myTextField2.width=490;
myTextField2.border=true;
myTextField3.x=30;
myTextField3.y=270;
myTextField3.width=490;
myTextField3.border=true;

4. Now we should ask Flash to display the information we want in those text fields.

Let’s put the name on the first text field, like we did in the previous exercise:

myTextField1.text=myName;

To put the age on the second text field, we should convert the number to a string. Text fields only display strictly text, so we have to use the method String() for the conversion, putting our number between the parenthesis:

myTextField2.text=String(birthYear);

In the last text field, I’d like to have a nicer message, of the type “User is 99 years old.”.

To do that, we have to join different bits of information together. When we join numbers and strings, the end result will be a string, so we don’t have to worry about converting the number. To join different string elements together, we use the “+” operator, which for strings means “concatenate”, or join. We also have to include some fixed expressions, such as ” is ” (note the spaces before and after “is”, or Flash would join everything together, leaving no space) and ” years old.” (again, check the space before and punctuation after “years old”).

The resulting line of code would be:

myTextField3.text=myName+" is "+myAge+" years old.";

5. This would be the whole code:

var myName:String="Nuno";
var birthYear:Number=1972;
var currentYear:Number=2010;
var myAge:Number=currentYear-birthYear;
var myTextField1:TextField = new TextField();
stage.addChild(myTextField1);
var myTextField2:TextField = new TextField();
stage.addChild(myTextField2);
var myTextField3:TextField = new TextField();
stage.addChild(myTextField3);
myTextField1.x=30;
myTextField1.y=30;
myTextField1.width=490;
myTextField1.border=true;
myTextField2.x=30;
myTextField2.y=150;
myTextField2.width=490;
myTextField2.border=true;
myTextField3.x=30;
myTextField3.y=270;
myTextField3.width=490;
myTextField3.border=true;
myTextField1.text=myName;
myTextField2.text=String(birthYear);
myTextField3.text=myName+" is "+myAge+" years old.";

The result would look like this:

Download files: ex2-variables.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 1. User Interface Design and tagged . Bookmark the permalink.

2 Responses to 1.4 Introduction to Variables

  1. Pingback: Teaching Designing Interaction with Electronics course | nuno correia .com

  2. Pingback: Flash and ActionScript | Software Studies for Media Designers

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s