2.1 Conditionals and Properties

This exercise aims to further explore properties of display objects, while learning how to use “if” conditions, in this case to introduce limits to properties variation.

1. First, some thoughts on conditionals. Conditionals “perform different computations or actions depending on whether a programmer-specified boolean condition evaluates to true or false” (from Wikipedia). The if conditional, also known as “if-then-else”, is common in many languages, and follows this structure:

If (predicate) Then
(consequent)
Else
(alternative)
End If

The if mechanism is described in the same Wikipedia article:

When an interpreter finds an If, it expects a boolean condition – for example, x > 0, which means “the variable x contains a number that is greater than zero” – and evaluates that condition. If the condition is true, the statements following the Then are executed. Otherwise, the execution continues in the following branch – either in the Else block (which is usually optional), or if there is no Else branch, then after the End If.

In AS3, the “then” is replaced by the initial “{“, and the “end if” by “}”. The optional “alternative” is also encapsulated in curly brackets.

2. Let’s now focus to our exercise. I would like to modify the size of an object by pressing buttons to increase or decrease. But I would like to limit its lower size, so that it doesn’t disappear.

I will start by drawing a background. Flash uses a system of “levels” with display objects, so the first object we add to the stage will sit behind the next ones. If we keep the default stage size of 550 x 400 pixels, the following code will draw a blue rectangle filling the whole stage:

var myBackground:Shape = new Shape();
stage.addChild(myBackground);
myBackground.graphics.beginFill(0x0000FF);
myBackground.graphics.drawRect(0,0, 550, 400);

3. Now, let’s draw one additional shape, for the object we want to manipulate. I will call it “ship”:

var ship:Shape = new Shape();
stage.addChild(ship);
ship.x=200;
ship.y=150;
ship.graphics.beginFill(0xFF0000);
ship.graphics.lineTo(-50,-50);
ship.graphics.lineTo(100,0);
ship.graphics.lineTo(-50,50);
ship.graphics.lineTo(0,0);

4. Let’s also add a couple of sprites to be our buttons: “up” and “down” (don’t forget to set buttonMode to true):

var upButton:Sprite = new Sprite();
stage.addChild(upButton);
upButton.x=450;
upButton.y=350;
upButton.graphics.beginFill(0x00FF00);
upButton.graphics.lineTo(40,0);
upButton.graphics.lineTo(20,-33);
upButton.buttonMode=true;

var downButton:Sprite = new Sprite();
stage.addChild(downButton);
downButton.x=450;
downButton.y=360;
downButton.graphics.beginFill(0x00FF00);
downButton.graphics.lineTo(40,0);
downButton.graphics.lineTo(20,33);
downButton.buttonMode=true;

So far, nothing diverges much from the previous example.

5. Let’s now add event listeners to the increase size button. I will call the respective function “increaseScale”. The properties we will use to scale our “ship” are scaleX and scaleY, for scaling the width and height of the ship, respectively. scaleX and scaleY work in a percent logic: the default value is 1, as in 100%; the value to scale an object to half would be 0.5.

Let’s say that by every time we press the up button, we want the ship to increase 10%, both in width and in height. In that case, we need to set both properties, scaleX and scaleY, to +=0.1 (we have become acquainted with the “+=” operator in a previous exercise).

Therefore, the code would be as follows:

upButton.addEventListener(MouseEvent.CLICK, increaseScale);
function increaseScale(e:MouseEvent):void {
ship.scaleX+=0.1;
ship.scaleY+=0.1;
}

6. To do the opposite, apparently all we would need to do was to replace “increase” with “decrease”, and “+=” with the symmetrical operator “-=”. But as we have stated, we don’t want the ship to become too small. So we will use a conditional. Let’s assume we don’t want it to be smaller than its original size. Being that both scaleX and scaleY are both being affected simultaneously, it doesn’t matter which one is used by the conditional predicate (we can use scaleX, for example).

The downButton should only work if the size of the scaleX is bigger than 0.5. Otherwise, nothing should happen (nothing will specified as alternative). In AS3, this formulation would look like:

downButton.addEventListener(MouseEvent.CLICK, decreaseScale);
function decreaseScale(e:MouseEvent):void {
if (ship.scaleX>0.5) {
ship.scaleX-=0.1;
ship.scaleY-=0.1;
}
}

7. The whole code follows:

var myBackground:Shape = new Shape();
stage.addChild(myBackground);
myBackground.graphics.beginFill(0x0000FF);
myBackground.graphics.drawRect(0,0, 550, 400);
var ship:Shape = new Shape();
stage.addChild(ship);
ship.x=200;
ship.y=150;
ship.graphics.beginFill(0xFF0000);
ship.graphics.lineTo(-50,-50);
ship.graphics.lineTo(100,0);
ship.graphics.lineTo(-50,50);
ship.graphics.lineTo(0,0);

var upButton:Sprite = new Sprite();
stage.addChild(upButton);
upButton.x=450;
upButton.y=350;
upButton.graphics.beginFill(0x00FF00);
upButton.graphics.lineTo(40,0);
upButton.graphics.lineTo(20,-33);
upButton.buttonMode=true;
var downButton:Sprite = new Sprite();
stage.addChild(downButton);
downButton.x=450;
downButton.y=360;
downButton.graphics.beginFill(0x00FF00);
downButton.graphics.lineTo(40,0);
downButton.graphics.lineTo(20,33);
downButton.buttonMode=true;

upButton.addEventListener(MouseEvent.CLICK, increaseScale);
function increaseScale(e:MouseEvent):void {
ship.scaleX+=0.1;
ship.scaleY+=0.1;
}
downButton.addEventListener(MouseEvent.CLICK, decreaseScale);
function decreaseScale(e:MouseEvent):void {
if (ship.scaleX>0.5) {
ship.scaleX-=0.1;
ship.scaleY-=0.1;
}
}

And the result looks like this:

Download files: ex7-properties.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 2. Controlling Audiovisual Objects and tagged , . Bookmark the permalink.

One Response to 2.1 Conditionals and Properties

  1. 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