Complex shapes with the AS3 drawing API

Everybody who uses Actionscript 3 know that you can create basic shapes using the drawing API. These shapes include lines, rectangles and circles. You can also create complex shapes by combining simple shapes together. In this post I will share a few examples of complex shapes. To make life a little easier, you can optionally draw a quick sketch down on paper to give a rough idea of the shape’s placement. Or you can turn on the ‘Grids’ in Flash by going to View > Grids > Show Grids on the menu bar. You will also need to turn on ‘Rulers’ to see the pixel distances. Now you can use the Pen tool to draw your shapes. This will give you an indication of the x and y values to use in your lineTo() methods.

The first example creates a tree using the moveTo() and lineTo() methods. The tree sections can be created using new Shape instances if you are going to add filters to the different parts of the tree. You can also add the shape instances into one container sprite as shown in the next example.

var tree:Shape = new Shape();
tree.graphics.lineStyle(1,0x336600);
tree.graphics.beginFill(0x66CC33);
tree.graphics.moveTo(40,0);
tree.graphics.lineTo(60,20);
tree.graphics.lineTo(50,20);
tree.graphics.lineTo(70,40);
tree.graphics.lineTo(60,40);
tree.graphics.lineTo(80,60);
tree.graphics.lineTo(0,60);
tree.graphics.lineTo(20,40);
tree.graphics.lineTo(10,40);
tree.graphics.lineTo(30,20);
tree.graphics.lineTo(20,20);
tree.graphics.endFill();

tree.graphics.beginFill(0xCC6633);
tree.graphics.lineStyle(1,0x944925);
tree.graphics.moveTo(30,60);
tree.graphics.lineTo(50,60);
tree.graphics.lineTo(50,90);
tree.graphics.lineTo(30,90)
addChild(tree);

The second example create a slice of watermelon using the curveTo() and lineTo() methods. I have added the watermelon seeds inside the red sprite and used a mask to hide any overlapping seeds. Everything is added inside the container sprite which allows you to move the individual shapes as a group.

var container:Sprite = new Sprite();

var green:Shape = new Shape();
green.graphics.lineStyle(1);
green.graphics.beginFill(0x7DE67D,0.8);
green.graphics.moveTo(0,0);
green.graphics.lineTo(140,0);
green.graphics.curveTo(140,70,70,70);
green.graphics.curveTo(0,70,0,0);
green.graphics.endFill();
container.addChild(green);

var red:Sprite = new Sprite();
red.graphics.lineStyle(1);
red.graphics.beginFill(0xFF6F6F);
red.graphics.moveTo(10,0);
red.graphics.lineTo(130,0);
red.graphics.curveTo(120,60,70,60);
red.graphics.curveTo(20,60,10,0);
red.graphics.endFill();
container.addChild(red);

for(var i:uint = 0; i < 24; i++){ 
 var r:uint = uint(Math.random() * 6 +4);
 var seed:Shape = new Shape();
 seed.graphics.beginFill(0x000000);
 seed.graphics.drawEllipse(0,0,r,r/2);
 seed.graphics.endFill();
 seed.rotation = i * Math.random() * 180;
 seed.x = 25 + 20 * (i%6);
 seed.y = 5 + 15 * int(i/6);  
 red.addChild(seed);
}

var redMask:Shape = new Shape();
redMask.graphics.beginFill(0x000000);
redMask.graphics.moveTo(10,0);
redMask.graphics.lineTo(130,0);
redMask.graphics.curveTo(120,60,70,60);
redMask.graphics.curveTo(20,60,10,0);
redMask.graphics.endFill();
container.addChild(redMask);

red.mask = redMask;

container.x = 100;
container.y = 100;
addChild(container);  

The third example uses the Flash player 10’s drawPath() method to draw a lighting bolt. The drawPath() method accepts two parameters which both have to be vector arrays. The first vector array holds the drawing commands, a list of these commands can be found here. The second vector array will hold the x and y positions of the drawing direction.

var com:Vector. = new Vector.();
com.push(1,2,2,2,2,2,2,2,2,2,2,2);

var coo:Vector. = new Vector.();
coo.push(40,0, 30,36, 48,36, 32,77, 48,77,30,130,
  70,65, 55,65, 80,20, 65,20, 80,0, 40,0);


var shape:Shape = new Shape();
shape.graphics.lineStyle(1);
shape.graphics.beginFill(0xFFFF00);
shape.graphics.drawPath(com, coo);
shape.graphics.endFill();
addChild(shape);

Blur guess game in AS3 part 2

This is part 2 of the Blur guess game in Actionscript 3. This time the logos will be loaded in externally using XML to make the process of updating or changing the logos easier. I have written a new helper class for this tutorial. The LogoContainer class will load the logos using the Loader class, display outlines around the logos and set the blur. The rest of the code should be similar to part 1 of the tutorial.


Blur guess game in AS3 part 2

Step 1 - Set up XML

Create a new directory called ‘BlurGuessGame2’. Then open up your text editor and type out the following XML. Save the file with the name: ‘blurgame.xml’. Create another directory called logos and copy the files you want to use in this folder.

<?xml version="1.0" encoding="utf-8" ?>
<blurgame>
 <logo name="youtube" image="logos/youtube.gif" />
 <logo name="master"  image="logos/mastercard.gif" />
 <logo name="ibm"     image="logos/ibm.gif" />
 <logo name="cannon"  image="logos/canon.gif" />
 <logo name="shell"   image="logos/shell.gif" />
 <logo name="bmw"     image="logos/bmw.gif" /> 
</blurgame>

Step 2 - LogoContainer class

Firstly, I will begin with creating the LogoContainer Class. Open up a new AS3 class file and save it with the name: ‘LogoContainer’. In this class file start with typing out the import statements and variables.

package  {
 
 import flash.display.Sprite;
 import flash.display.Shape;
 import flash.display.Loader;
 import flash.display.Bitmap;
 import flash.events.Event;
 import flash.net.URLRequest;
 import flash.filters.BlurFilter;

 public class LogoContainer extends Sprite{
  
  public static const LOGO_LOADED:String = 'logoloaded';
  private var bp:Bitmap;  

}

}

Next is the constructor, I have passed in a parameter called ‘_logoName’ which will be the name of the file to be loaded. I have created a new instance of the Loader class and added an event complete listener to the Loader.

public function LogoContainer(_logoName:String) {
 var loader:Loader = new Loader();
 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, logoLoaded);
 loader.load(new URLRequest(_logoName));   
}

This function cast the loader content as a Bitmap to allow the logo image to be smoothed and resized without distorting or pixelating the image. A 2 pixel black outline is added to the Bitmap, and a new event is dispatched.

private function logoLoaded(e:Event):void{
 bp = Bitmap(e.target.content);
 bp.smoothing = true;
 bp.width = 100;
 bp.height = 100;
 addChild(bp);
   
 var outLine:Shape = new Shape();
 outLine.graphics.lineStyle(2, 0x000000);
 outLine.graphics.drawRect(0,0,bp.width+2, bp.height+2);
 outLine.graphics.endFill();
 addChild(outLine);
   
 dispatchEvent(new Event(LOGO_LOADED));
}

These two public functions will blur and unblur the bitmap using the BlurFilter.

public function unBlur():void{
 bp.filters = [];
}
  
public function blur():void{
 bp.filters=[new BlurFilter(15,15,3)];
}

Step 3– BlurGuess FLA and document class

Open a new AS3 FLA file and save it with the name: BlurGuess2. Inside the FLA create the two text fields like in step 3 of part 1 of the tutorial. Then open a new AS3 class file and save it with the name: BlurGuess2. Set the document class to this name. In the class file add the following import statements and variables.

package {

import flash.filters.BlurFilter;
import flash.display.*;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.setTimeout;
import flash.net.URLLoader;
import flash.net.URLRequest;

public class BlurMatch2 extends MovieClip {

 private var strArray:Array = new Array();
 private var containerArray:Array = new Array();
 private var namesArray:Array = new Array();
  
 private var counter:uint=0;
 private var totalWords:uint;
 
 private var xOffset:int=133;
 private var yOffset:int=122;
 private var xStart:int = 45;
 private var yStart:int = 25;
  
 private var len:uint;
 private var xml:XML;
  
 private var loadCount:uint = 0;

}
}

The constructor creates a new instance of the URLLoader class and loads the XML file. When the XML has finished loading the ‘len’ property is set to the number of logo nodes. Then the ready() function is called.

public function BlurMatch2() { 
 var uloader:URLLoader = new URLLoader();
 uloader.addEventListener(Event.COMPLETE, xmlLoaded);
 uloader.load(new URLRequest('blurgame.xml'));
}

private function xmlLoaded(e:Event):void{
 xml = new XML(e.target.data);
 len = xml.logo.length();
 ready();
}

The ready() function loads the logos onto the stage using the LogoContainer class created earlier. The parameter for the LogoContainer is: xml.logo.@image[i] which is the name of the logo files to be loaded. The logoLoaded event is added the LogoContainer, and the LogoContainer are pushed into the containerArray. The logo names are also added into the namesArray.

private function ready():void{
 for(var i:uint = 0; i < len; i++){
 var lc:LogoContainer = new LogoContainer(xml.logo.@image[i]);
 lc.y = yStart + yOffset * int(i/3);
 lc.x = xStart + xOffset * (i%3);
 lc.addEventListener(LogoContainer.LOGO_LOADED, logoLoaded);
 addChild(lc);
    
 containerArray.push(lc);
    
 namesArray.push(xml.logo.@name[i]);
 }
}

The logoLoaded function calls the init() function when all the logos have been added to the stage.

private function logoLoaded(e:Event):void{
 loadCount++;
 if(loadCount == len) init();
}

The function sets the strArray to the names of the logos in namesArray. The counter is set to zero and the totalWords is set to the number of the items in the strArray. The founds_txt text field will display the initial found words which will be zero. All the logo containers are blurred and the change event is added the input_txt text field.

private function init():void{
   
 strArray=namesArray;
   
 counter=0;
 totalWords=strArray.length;
 found_txt.text=String(counter)+"/"+String(totalWords)+"correct";
 stage.focus=input_txt;
   
 for(var i:uint = 0; i < len; i++) {
  containerArray[i].blur();
 }
   
 input_txt.addEventListener(Event.CHANGE,detectKeys);
}

The detectKeys function increments the counter if the correct word is typed and updates the found_txt text field. The relevant logo gets unblurred and value gets removed from the strArray. The input_txt text field get cleared after a 500 millisecond delay.

private function detectKeys(e:Event):void {
for (var i:int = 0; i < strArray.length; i++) {
if (strArray[i] == input_txt.text.toLowerCase()) {
counter++;  
  
found_txt.text=String(counter)+"/"+String(totalWords)+"correct"; 
 
containerArray[i].unBlur(); 
    
strArray.splice(i, 0);
      
setTimeout(function(){ input_txt.text = ""; }, 500);     
}
}
}  

Step 4 – Export movie

Export the movie Ctrl + Enter.