AS3-101: Introduction to Variables – taterboy
August 5th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials

Actionscript 3 101: Introduction to Variables.

ActionScript 3 (AS3) 101 is a series that will cover the fundamental use of actionscript in the process of building interactive projects. We will start with an elementary overview of terminology and the basic elements that make things happen in actionscript. The first few posts in this series will be an extended version of AS3 101, The First ActionScript I Ever Learned. If you feel you are able to jump in at that post and move forward than you will be able skip a lot of extra reading. These first few posts should enable someone with a very little to no knowledge of Flash itself to start building projects in AS3.

The most basic script element is the variable. It is best to describe it with an example.

x + 2 = y

Yes, just like pre-algebra. x and y are variables, they can represent any number, y’s value is determined by the value of x. To write this equation in ActionScript we have to declare the type of elements these variables represent which are numbers.

var x:Number = 2;
var y:Number = x + 2;
trace(y); // compiler error

The word “var” tells the compiler that we are about to declare a variable for the first time. Following the name is a colon and the type of variable we are declaring. This seems like a lot of extra typing, but it helps the compiler find potential errors in your code.

Very important to note, this code will not compile in Flash ActionScript 3 because x and y are reserved for the x and y coordinates of the DisplayObject class. So lets take this sample and rewrite it into something that really works. Type the following into the Flash Actions palette.

var num:Number = 2;
var product:Number = num + 2;
trace(product); // 4

This current revision will compile perfectly and produce a number 4 in the Output panel. Now lets do a little playing around to explore some of the more common variable types.

**Note: Below we will use some examples and variable names more than once. To avoid compiler errors please only do one example at a time in the Actions palette.

There are some examples where compilers errors are expected and will be noted in the comments. Just delete the offending code, which will be noted, and move on. If there are two examples in the Actions panel at once, there is a chance the same variable name will be declared twice which will also cause compiler errors.

1. Let’s change the value of num to a decimal, something like 2.5. The result will now show in the Output panel as 4.5

var num:Number = 2.5;
var product:Number = num + 2;
trace(product); // 4.5

2. Now take the same equation and swap the variable types to “int” for integer instead of “Number”.

var num:int = 2.5;
var product:int = num + 2;
trace(product); // 4

Integers only work in whole numbers and ignore the decimal value, always rounding down. This is important because sometimes you want whole numbers and sometimes you do not. Integers can only represent a value range of -2,147,483,647 to 2,147,483,647 according to Adobe’s documentation, though I was only able to get 991,158,271 in my tests.

You can mix and match numbers and integers in an equation, but the interger will prevail and round down the product.

var num:Number = 2.8;
var product:int = num + 2;
trace(product); // 4

Here is another thing to try, integers will always resolve to a whole number value even if the a value is not assigned. Numbers must always have a value assigned or it will cause things to break.

Example 1:

var num:int;
trace(num); // 0

Example 2:

var num:Number;
trace(num); // NaN (not a number)

Example 3:

var num:Number;
var product:Number = num + 2;
trace(product); // NaN

Example 4:

var num:Number = 0;
trace(num); // 0

Strings:
Strings can represent characters or text, numbers can also be used in strings.
Example 1:

var str:String = "some text";
trace(str); // some text

To assign a place holder for a string use empty quotes, otherwise it will resolve to null .
Example 2:

var str:String = "";
trace(str) // (shows nothing, but better than null);

Example 3:

var str:String;
trace(str);// null

Booleans:
Represents true or false, resolving to false by default.
Example 1:

var bool:Boolean = true;
trace(bool);// true

Example 2:

var bool:Boolean;
trace(bool); // false;

Objects:
The object is a very flexible type, representing a Display Object like a MovieClip or Button as well as non visual container for data.

Combining Numbers and Strings:
In most cases mix matching variable types will result in a compiler error, but there are a few combinations that can come in handy. We already saw what happens when combining Numbers and integers. What about numbers and strings?

Combining numbers and strings are useful for naming conventions, dates, timers displays and many other things. There are a few rules or warnings to keep in mind though.

1. The result of a string/number combination must always be a string. Strings can include numbers but numbers can not include strings.

var numStr:String = "4";
var num:int = 2;
var combo1a:Number = numStr + num; // (delete)
trace(combo1a); // will not compile due to coercion error (delete).
 
 
var combo1b:String = num + numStr;
trace(combo1b); // 24 (notice the result was not 6, but concatenated 2 and 4)

Note: Remember, compiler errors are nothing to be afraid of, they happen to the most experienced coders. One of the most common is the coercion error, it pops up when two incompatible variable types come together. These errors can be a real frustration to new developers, so face your fears and make this important de-bugging feature your friend.

2. String first, as a general rule

var str:String = "moveclip";
var num:int = 2;
var combo2:String = str + num;
trace(combo2);// movieclip2

3. To display numbers with commas or zero digit place holders use a string.
Example 1:

var numComma1:Number = 2,000;
trace(numComma); // will not compile due to coercion error (delete)

Example 2:

var numComma:String = "2,000";
trace(numComma); //2,000
 
var numZero:int = 0;
var num:int = 2;
var combo3a:int = numZero + num;
trace(combo3a); // 2 (no zero place holder)
 
var numZeroStr:String = "0";
var combo3b:String = numZeroStr + num;
trace(combo3b); // 02

3. numbers convert to strings a lot easier the strings to numbers

var ZeroNumStr:String = "02";
var numCombo1:int = ZeroNumStr; // (delete)
trace(numCombo1); // will not compile due to coercion error (delete)
 
var numCombo2:Number = ZeroNumStr; //(delete)
trace(numCombo2); // will not compile due to coercion error (delete)
 
var numCombo1:int = int(ZeroNumStr);
trace(numCombo1); // 2 (forced string to integer)
 
var numCombo2:Number = Number(ZeroNumStr);
trace(numCombo2); // 2 (forced string to integer)

Try changing the value of ZeroNumStr to 4.2, the conversion still works as expected.

If the value of ZeroNumStr contains any commas or any other non numerical characters, the results will fail. The integer value will result in a 0 and the Number value will be NaN.

Where to go from here:
This may not seem like a big deal, wow! we have some numbers and strings showing up in an Output panel. But you now have a very strong foundation on the most fundamental programming tool you will use. Another important tool in your coding toolbox is writing out equations, here is a simple counter that you can experiment with. You can change the values of num1 manually or hook up some buttons. Try multiplication, division and even square roots. Add more variables to increase functionality.

var num1:Number = 0;
 
var product:Number = num1 += 1;
 
trace(product);

sample button code:

//add a button to the stage with the instance name of "btn1";
btn1.addEventListener(MouseEvent.CLICK, function(event:MouseEvent){ num1 += 1;trace(num1);});

Technorati Tags: Actionscript, compile error, Flash, Flex, Howto, Intro, Tutorial, variables

Other Related Articles:

• AS3-101: Intro to Functions Part 2 and Class Overview
• AS3-101: Intro to Functions Part 1
• Intro to MVC Part 1: The Controller Class
• Building Custom Loaders in Flex
• Flash/Flex Tips and Free Book Drawing - Using Test Projects

|

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment