Saturday, 10 September 2011

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" ?>
 <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" /> 

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.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(;
 bp.smoothing = true;
 bp.width = 100;
 bp.height = 100;
 var outLine:Shape = new Shape();, 0x000000);,0,bp.width+2, bp.height+2);;
 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.utils.setTimeout;

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(;
 len = xml.logo.length();

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);

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

private function logoLoaded(e:Event):void{
 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{
 for(var i:uint = 0; i < len; i++) {

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()) {
strArray.splice(i, 0);
setTimeout(function(){ input_txt.text = ""; }, 500);     

Step 4 – Export movie

Export the movie Ctrl + Enter.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP