Tutorial:Graphics (AS3)

From Anipedia

Matt here again to teach you about the Graphics class in Actionscript 3 and how to add click behaviors to said graphics.

First off, here's a quick bit of code I whipped up. If you followed the first tutorial, you'll know how to create a box with code. I've added a few new features along with click functionality.

var button:Sprite =  new Sprite();
button.graphics.beginFill(0x000);
button.graphics.drawRect((stage.stageWidth-150) /2, (stage.stageHeight-25)/2, 150, 25);
button.graphics.endFill();
addChild(button);

var box:Shape =  new Shape();
box.graphics.beginFill(0x00FF00);
box.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
box.graphics.endFill();
addChild(box);
box.visible = false;
box.alpha = .25;

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	box.visible = true;
}

You should notice some unknown snippets of code. Here they are explained.

button.graphics.drawRect((stage.stageWidth-150) /2, (stage.stageHeight-25)/2, 150, 25);

Most of you should know the BEDMAS theory, or the order of operations in math.

Brackets, Exponents, Division, Multiplication, Addition, and Subtraction.

In this case, I'm telling flash to draw the rectangle at a position of "Stage Width - 150 (width of rectangle), divided by 2" on the x axis. This will center the box in the middle of the screen. The same concept is used for the y axis, except the height of the rectangle is 25.

You will also notice this snippet.

box.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);

Here, I've set the x and y values to 0. I've told Flash to draw a rectangle the total size of the stage. This should be pretty straightforward.

Next, you'll see this.

box.visible = false;

This is an easier way of working with opacity as opposed to alpha values. It's how tooltips and popups are made. Right now, Flash will read that and hide the box from view.

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	box.visible = true;
}

When Flash reaches the buttonClick function, it will show the box.

Next, I'm going to add a tooltip to the rectangle.

var button:Sprite =  new Sprite();
button.graphics.beginFill(0x000);
button.graphics.drawRect((stage.stageWidth-150) /2, (stage.stageHeight-25)/2, 150, 25);
button.graphics.endFill();
addChild(button);

var box:Shape =  new Shape();
box.graphics.beginFill(0x00FF00);
box.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
box.graphics.endFill();
addChild(box);
box.visible = false;
box.alpha = .25;

var tooltip:Shape = new Shape();
tooltip.graphics.beginFill(0xCCC);
tooltip.graphics.drawRect((stage.stageWidth/2) + 15, (stage.stageHeight/2) -13, 100, 150);
tooltip.graphics.endFill();
tooltip.alpha = .75;
tooltip.visible = false;
addChild(tooltip);

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	box.visible = true;
}

button.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
function buttonOver (evt:MouseEvent):void{
	tooltip.visible = true;
}

button.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
function buttonOut (evt:MouseEvent):void{
	tooltip.visible = false;
}

You should understand this code by now. That's a great asset because tooltips are all over the internet.

Now, I'm going to add text to the tooltip.

var button:Sprite =  new Sprite();
button.graphics.beginFill(0x000);
button.graphics.drawRect((stage.stageWidth-150) /2, (stage.stageHeight-25)/2, 150, 25);
button.graphics.endFill();
addChild(button);

var box:Shape =  new Shape();
box.graphics.beginFill(0x00FF00);
box.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
box.graphics.endFill();
addChild(box);
box.visible = false;
box.alpha = .25;

var tooltip:Shape = new Shape();
tooltip.graphics.beginFill(0xCCC);
tooltip.graphics.drawRect((stage.stageWidth/2) + 15, (stage.stageHeight/2) -13, 100, 150);
tooltip.graphics.endFill();
tooltip.alpha = .75;
tooltip.visible = false;
addChild(tooltip);

var toolbox:TextField = new TextField();
toolbox.border = true;
toolbox.borderColor = 0x00FF00
toolbox.width = 100;
toolbox.height = 150;
toolbox.textColor = 0x00FF00;
toolbox.x =  (stage.stageWidth/2) + 15;
toolbox.y =  (stage.stageHeight/2) - 13;
toolbox.multiline = true;
toolbox.wordWrap = true;
toolbox.selectable = false;
toolbox.text = "This gun is the best gun ever. Cool, maybe this would make a stupid plot device in the sequel."
toolbox.visible = false;
addChild(toolbox);

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	box.visible = true;
}

button.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
function buttonOver (evt:MouseEvent):void{
	tooltip.visible = true;
	toolbox.visible = true;
}

button.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
function buttonOut (evt:MouseEvent):void{
	tooltip.visible = false;
	toolbox.visible = false;
}
stage.scaleMode = StageScaleMode.NO_SCALE;

var toolbox:TextField = new TextField();
toolbox.border = true;
toolbox.borderColor = 0x00FF00
toolbox.width = 100;
toolbox.height = 150;
toolbox.textColor = 0x00FF00;
toolbox.x =  (stage.stageWidth/2) + 15;
toolbox.y =  (stage.stageHeight/2) - 13;
toolbox.multiline = true;
toolbox.wordWrap = true;
toolbox.selectable = false;
toolbox.text = "This gun is the best gun ever. Cool, maybe this would make a stupid plot device in the sequel."
toolbox.visible = false;
addChild(toolbox);

This code may seem foreign, but it's really more of the same. Most of you have played around with the type settings in the GUI part of flash, so you know what the settings are.

All text (for textbox purposes) must be a string in AS3, meaning it must be contained inside ""/quotations at all times.