I'm attempting to write a program in ActionScript 3 using the Flex library and the FlashDevelop IDE. The program needs to have five blank squares drawn on the stage, and clicking on any of those squares will independently render a unique pattern (made up of geometic primitives) that takes the place of that square. Clicking on those patterns again will will switch them back to blank squares.
I decided to abstract this behavior into a a user-defined class that was an extension of Sprite, called PatternTile. However, I am getting a procedural error where the PatternTile itself isn't visible despite being added to the stage (confirmed by an event handler). The object by default should render in the center stage, and according to the parameters there should at least be a black outline around a rectangle. When clicked on, the object is supposed to redraw itself by way of clearing and respecifying the graphics properties.
There is an argument for the constructor that switches what properties these will be. Right now they are all equivalent.
Below is the code of the PatternTile class:
package
{
/**
* ...
* @author ...
*/
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Stage;
public class PatternTile extends Sprite
{
// OBJECTIVE: Generalize a tile object that can be drawn several times independently and change pattern when clicked.
// DECLARE+INSTANCE VARS
private var tileFlip : Boolean = new Boolean( true ) ; // tileFlip - switch for tracking state of shape when clicked on
// PatternTile, for the sake of simplicity, will include all its potential shapes in its constructor.
private var patternCode : int = new int( ); // Stores pattern classification to switch what the pattern for this tile is.
// CONSTRUCTOR
public function PatternTile( xBase:int, yBase:int, xTrans:int , yTrans:int , patternType:int ):void
{
/* ARGUMENTS:
* xBase - reference point for translations on the X axis.
* yBase - reference point for translations on the Y axis.
* xTrans:int - integer representing displacement of pixels from center on X axis.
* yTrans:int - integer representing displacement of pixels from center on Y axis.
* patternType:int - sets code for pattern
*/
patternCode = patternType
x = xBase + xTrans ; // x - new X position
y = yBase + yTrans ; // y - new Y position
// Assign Parametres to blankTile
this.graphics.lineStyle( 5, 0x000000, 1)
this.graphics.beginFill( 0xFFFFFF, 1 );
this.graphics.drawRect( x , y , 200 , 200 );
this.graphics.endFill( );
// EVENT LISTENERS - Clicking on the Sprite
addEventListener( MouseEvent.CLICK , mouseClickHandler ); // Will this generalize to handling clicks on both pattern types (tile, altObject?);
addEventListener( Event.ADDED_TO_STAGE, addedToStage ); // Created event handler for debugging purposes.
}
// Mouse Click Function
public function mouseClickHandler(event:Event):void
{
if (tileFlip) {
this.graphics.clear(); // clear previous properties
switch (patternCode) {
// Because I know there are only five cases, I can include all of them within the object.
case 0: // Pattern 0
// Colour Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
// Draw shape primitives here
this.graphics.drawCircle( x, y, 50 ); // PLACEHOLDER
this.graphics.endFill( );
// trace("you are here")
break;
case 1: // Pattern 1
// Colour Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
// Draw shape primitives here
this.graphics.drawCircle( x, y, 50 ); // PLACEHOLDER
this.graphics.endFill( );
break;
case 2: // Pattern 2
// Colour Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
// Draw shape primitives here
this.graphics.drawCircle( x, y, 50 ); // PLACEHOLDER
this.graphics.endFill( );
break;
case 3: // Pattern 3
// Colour Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
// Draw shape primitives here
this.graphics.drawCircle( x, y, 50 ); // PLACEHOLDER
this.graphics.endFill( );
break;
case 4: // Pattern 4
// Colour Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
// Draw shape primitives here
this.graphics.drawCircle( x, y, 50 ); // PLACEHOLDER
this.graphics.endFill( );
break;
}
tileFlip = false; // prime alternate state to be checked on next click
} else {
this.graphics.clear(); // clear previous properties
// Blank Tile Properties
this.graphics.lineStyle( 1, 0x000000, 1 );
this.graphics.beginFill(0xFFFFFF, 1);
this.graphics.drawRect( x , y , 100 , 100 );
this.graphics.endFill( );
tileFlip = true; // prime alternate state to be checked on next click
}
}
public function addedToStage(e:Event):void
{
trace("Added PatternTile to stage");
}
}
}
And below is the Main class:
package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// User-Defined Classes
import PatternTile
/**
* ...
* @author kbruskie
*/
public class Main extends Sprite
{
// Center Stage, called throughout program.
private var xCenter : int = new int( stage.stageWidth / 2 );
private var yCenter : int = new int( stage.stageHeight / 2 );
// Tiles
private var tile1 : PatternTile ;
/*
private var tile2 : PatternTile = new PatternTile( 0, 0, 0 );
private var tile3 : PatternTile = new PatternTile( 0, 0, 0 );
private var tile4 : PatternTile = new PatternTile( 0, 0, 0 );
private var tile5 : PatternTile = new PatternTile( 0, 0, 0 );
*/
public function Main():void
{
trace(xCenter) // prints center of stage on X axis - working
trace(yCenter) // prints center of stage on Y axis - working
tile1 = new PatternTile( xCenter, yCenter, 200, -200, 1 ) // draws single clickable tile in the middle of the stage. Not yet added to stage.
// instances the object but it isn't visibly drawn. What's going on?
stage.addChild(tile1) // Finally - all the properties are set, and this object is ready for showbiz. Add to stage.
}
}
}
I don't understand what is happening and I am not confident in my theories. Can anyone help?
I am assuming that your objects are on the stage, but outside the visible area... In PatternTile constructor you are setting position, eg:
x = xBase + xTrans;
Then you are drawing a square starting at x:
this.graphics.drawRect( x , y , 200 , 200 );
So square is effectively drawn at position x+x. Shouldnt it be this?
this.graphics.drawRect( 0 , 0 , 200 , 200 );