AS 2.0 Basics 1.1 - Variable Usage, [Flash 8] Options Rating

[BetaWar]

This tutorial is an addon to the previous one I released on Variables (AS 2.0 Basics 1 - Variables) in which we will look at how to use variables and what the point of usng variables instead of static values is when using AS, or any othe rlanguage for that matter.

Starting Out
So, now you know how to create variables, but you may be having problems using them within your code, hopefully we can solve those problems.

Lets start off with the simple number 5 in a variable that we want to be doubled:

CODE

var myNum:Number = 5;

Now, under normal circumstances you may shy away from using variables and just say something like 5*2, but that isn't what we are trying to get through in this tutorial.

All you have to do after declaring your variable is either (A) declare a new variable that you want to be double myNum or ( just start using something like so: MOVIECLIP._y = myNum*2;. For now, we are going to look at portion (A):

CODE

var myNum:Number = 5;
var newNum:Number = myNum*2;

Which work great and sets newNum=10, then you can easily change newNum's value by changing that of myNum.

Every time you use myNum inside your Flash application it will be that much easier to change and get working accross the board without having to go through and manually change every instance of where myNum would be used.

The Example - your worst nightmare

Sometimes you will have a rather large block of code that uses the same number (which will always be the same number) throughout it in numerous places. If you decide that that value doesn't work out for what you are trying to get going you will need to change it, but that can be such a daunting task wehn looking at even a few hundred lines of code.

Take this code for example:

CODE

var dragging = 0;
var corner = 0;
var select;
function render(x, y, tx, ty){
    var holder:MovieClip = _root.createEmptyMovieClip("holder", 0);
        holder._x = x;
        holder._y = y;
    var bg:MovieClip = holder.createEmptyMovieClip("bg", 0);
    var top:MovieClip = holder.createEmptyMovieClip("top", 1);
    var right:MovieClip = holder.createEmptyMovieClip("right", 2);
        right._x = tx-holder._x;
    var bottom:MovieClip = holder.createEmptyMovieClip("bottom", 3);
        bottom._y = ty-holder._y;
    var left:MovieClip = holder.createEmptyMovieClip("left", 4);
    var tTop:TextField = holder.createTextField("tTop", 5, 80, -20, 24, 20);
        tTop.text = "200";
        tTop.autoSize;
        tTop._x = (200-tTop._width)/2;
        tTop._y = -tTop._height;
    var tRight:TextField = holder.createTextField("tRight", 6, 200, 40, 24, 20);
        tRight.text = "100";
        tRight.autoSize;
        tRight._x = right._x;
        tRight._y = (100-tRight._height)/2;
    var trc:MovieClip = holder.createEmptyMovieClip("topRightCircle", 7);
    var tlc:MovieClip = holder.createEmptyMovieClip("topLeftCircle", 8);
    var brc:MovieClip = holder.createEmptyMovieClip("bottomRightCircle", 9);
    var blc:MovieClip = holder.createEmptyMovieClip("bottomLeftCircle", 10);
    
    createCircle(tlc, 4, 0, 0, 0x00000000);
    createCircle(trc, 4, 0, 0, 0x00000000);
    createCircle(blc, 4, 0, 0, 0x00000000);
    createCircle(brc, 4, 0, 0, 0x00000000);
    brc._x = trc._x = 200;
    brc._y = blc._y = 100;
    
    createFill(bg, (tx-x), (ty-y), 1, 0x00000099, "Gradient", [0x00ccccff, 0x00666699]);
    createFill(top, 200, 1, 2, 0x00000099, "None");
    createFill(right, 1, 100, 2, 0x00000099, "None");
    createFill(bottom, 200, 1, 2, 0x00000099, "None");
    createFill(left, 1, 100, 2, 0x00000099, "None");
    
    holder.onMouseMove = function(){
        if(dragging == 1){
            if(corner == 1){
                if(select == tlc){
                    left._x = tlc._x;
                    top._y = tlc._y;
                }
                else if(select == trc){
                    right._x = trc._x;
                    top._y = trc._y;
                }
                else if(select == blc){
                    left._x = blc._x;
                    bottom._y = blc._y;
                }
                else if(select == brc){
                    right._x = brc._x;
                    bottom._y = brc._y;
                }
            }
            
            if(left._x<0 && left._x<right._x){
                top._x = bottom._x = left._x;
                bg._width = -left._x+right._x+2;
                top._width = bottom._width = bg._width;
                bg._x = left._x;
                tRight._x = right._x;
                blc._x = tlc._x = left._x;
                brc._x = trc._x = right._x;
            }
            else if(left._x>0 && left._x<right._x){
                top._x = bottom._x = left._x;
                bg._width = right._x-left._x+2;
                top._width = bottom._width = bg._width;
                bg._x = left._x;
                tRight._x = right._x;
                blc._x = tlc._x = left._x;
                brc._x = trc._x = right._x;
            }
            else if(left._x>right._x){
                bg._width = left._x-right._x+2;
                top._width = bottom._width = bg._width;
                bg._x = left._x-bg._width;
                top._x = bottom._x = bg._x;
                tRight._x = left._x;
                blc._x = tlc._x = left._x;
                brc._x = trc._x = right._x;
            }
            else if(left._x<right._x){
                top._x = bottom._x = left._x;
                bg._width = -left._x+right._x+2;
                top._width = bottom._width = bg._width;
                bg._x = left._x;
                tRight._x = right._x;
                blc._x = tlc._x = left._x;
                brc._x = trc._x = right._x;
            }
            
            if(top._y<0 && top._y<bottom._y){
                left._y = right._y = top._y;
                bg._height = -top._y+bottom._y+2;
                left._height = right._height = bg._height;
                bg._y = top._y;
                tTop._y = top._y-tTop._height;
                tlc._y = trc._y = top._y;
                blc._y = brc._y = bottom._y;
            }
            else if(top._y>0 && top._y<bottom._y){
                left._y = right._y = top._y;
                bg._height = bottom._y-top._y+2;
                left._height = right._height = bg._height;
                bg._y = top._y;
                tTop._y = top._y-tTop._height;
                tlc._y = trc._y = top._y;
                blc._y = brc._y = bottom._y;
            }
            else if(top._y>bottom._y){
                bg._height = top._y-bottom._y+2;
                left._height = right._height = bg._height;
                bg._y = top._y-bg._height;
                left._y = right._y = bottom._y;
                tTop._y = bottom._y-tTop._height;
                tlc._y = trc._y = top._y;
                blc._y = brc._y = bottom._y;
            }
            else if(top._y<bottom._y){
                left._y = right._y = top._y;
                bg._height = -top._y+bottom._y+2;
                left._height = right._height = bg._height;
                bg._y = top._y;
                tTop._y = top._y-tTop._height;
                tlc._y = trc._y = top._y;
                blc._y = brc._y = bottom._y;
            }
            
            tRight.text = ""+bg._height;
            tRight._y = bg._y+((bg._height-tRight._height)/2);
            tTop.text = ""+bg._width;
            tTop._x = bg._x+((bg._width-tTop._width)/2);
        }
    }
    
    blc.onPress = brc.onPress = trc.onPress = tlc.onPress = function(){
        select = this;
        dragging = 1;
        corner = 1;
        this.startDrag();
    }
    blc.onRelease = blc.onReleaseOutside = brc.onRelease = brc.onReleaseOutside = trc.onRelease = trc.onReleaseOutside = tlc.onRelease = tlc.onReleaseOutside = function(){
        this.stopDrag();
        dragging = 0;
        corner = 0;
    }
    
    top.onRollOver = function(){
        createFill(this, 200, 1, 2, 0x00990000, "None");
    }
    top.onRollOut = function(){
        createFill(this, 200, 1, 2, 0x00000099, "None");
    }
    top.onPress = function(){
        createFill(this, 200, 1, 3, 0x00009900, "None");
        this.startDrag(false, this._x, Stage.height, 0, -Stage.height);
        dragging = 1;
    }
    top.onRelease = top.onReleaseOutside = function(){
        this.stopDrag();
        dragging = 0;
        this.onRollOut();
    }
    bottom.onRollOver = function(){
        createFill(this, 200, 1, 2, 0x00990000, "None");
    }
    bottom.onRollOut = function(){
        createFill(this, 200, 1, 2, 0x00000099, "None");
    }
    bottom.onPress = function(){
        createFill(this, 200, 1, 3, 0x00009900, "None");
        this.startDrag(false, this._x, Stage.height, 0, -Stage.height);
        dragging = 1;
    }
    bottom.onRelease = bottom.onReleaseOutside = function(){
        this.stopDrag();
        dragging = 0;
        this.onRollOut();
    }
    left.onRollOver = function(){
        createFill(this, 1, 100, 2, 0x00990000, "None");
    }
    left.onRollOut = function(){
        createFill(this, 1, 100, 2, 0x00000099, "None");
    }
    left.onPress = function(){
        createFill(this, 1, 100, 3, 0x00009900, "None");
        this.startDrag(false, -Stage.width, this._y, Stage.width, 0);
        dragging = 1;
    }
    left.onRelease = left.onReleaseOutside = function(){
        this.stopDrag();
        dragging = 0;
        this.onRollOut();
    }
    right.onRollOver = function(){
        createFill(this, 1, 100, 2, 0x00990000, "None");
    }
    right.onRollOut = function(){
        createFill(this, 1, 100, 2, 0x00000099, "None");
    }
    right.onPress = function(){
        createFill(this, 1, 100, 3, 0x00009900, "None");
        this.startDrag(false, -Stage.width, this._y, Stage.width, 0);
        dragging = 1;
    }
    right.onRelease = right.onReleaseOutside = function(){
        this.stopDrag();
        dragging = 0;
        this.onRollOut();
    }
}
render((Stage.width-200)/2, (Stage.height-100)/2, ((Stage.width-200)/2)+200, ((Stage.height-100)/2)+100);

function createFill(obj:MovieClip, w, h, border, borderColor, bgStyle, bgColors){
    obj.lineStyle(border, borderColor, 100);
    if(bgStyle == "Gradient"){
        alphas = [100, 100];
        ratios = [0, h*1.5];
        matrix = {matrixType:"box", x:0, y:0, w:430, h:150, r:Math.PI/2};
        obj.beginGradientFill("linear", bgColors, alphas, ratios, matrix);
    }
    else if(bgStyle == "Solid"){
        obj.beginFill(bgColors[0], 100);
    }
    obj.lineTo(w, 0);
    obj.lineTo(w, h);
    obj.lineTo(0, h);
    obj.lineTo(0, 0);
    if(bgStyle != "None"){
        obj.endFill();
    }
}

function createCircle(obj, r, x, y, bgColor){
    obj.beginFill(bgColor, 100);
    obj.moveTo(x+r, y);
    A = Math.tan(22.5 * Math.PI/180);
    for (angle = 45; angle<=360; angle += 45) {
        endx = r*Math.cos(angle*Math.PI/180);
        endy = r*Math.sin(angle*Math.PI/180);
        cx =endx + r* A *Math.cos((angle-90)*Math.PI/180);
        cy =endy + r* A *Math.sin((angle-90)*Math.PI/180);
        obj.curveTo(cx+x, cy+y, endx+x, endy+y);
    }
}

If it didn't use the dragging, corner, and select variables I would have had to redo all my checks everytime the mousemoved or was dragging something, but, because of the variable usage I set the variables when the user begins dragging something and then just have to make sure that the variables are checked when doing the appropriate function, that way I can say myself a lot of time and energy trying to get all the checks to work out once again.

Wrapping Up - to save for later
If you have ever attempted to maek a game in Flash you know how annoying it is when you have to come up with a movement speed and jump height and everything right off the bat and keep it consistant through out the entire code of your game. But why worry about it? Why not create a variable to hold those values for you and then just change the value of the variable when you want to be able to jump higher, or move faster? It would make sense wouldn't it?

Next time you are making a Flash application or game try using variables and see how much easier it is to edit the way your project works on the fly.

The End