Issue with HitArea in Canvas hitArea

I happen to generate a graph in Flex, I needed node element to store data, and have some graphics inside that, without second thought I extended Canvas component for GraphNode.

In flex when you use Canvas to draw some thing behind origin or point (0,0)  hitArea of that Canvas happens to behave strangely. I could figure out this problem by giving background colors to this Canvas. You can resolve it in 2 ways,

1. Use a UIComponent for inside a Canvas and set hitArea of that Canvas to it’s child UIComponent

2. Use Container instead of Canvas. If you don’t want given component to respond to updateDisplayList you can safely extend from Container (mx.core.Container)

PS: To have all your graphics behind (0,0) visible, you should have clipContent set to false.

Filtering Array For Objects with Unique values in ActionScript

I happened to go through many instances where I had to filter a flat list on given attribute for unique values. For example I have flat list of employees who is working in different territory with there achievements, problem is show the graph based on territory. In flex you can use GroupedColletion to achieve this, but if you doing it in flash you are left with no options other than Array.filter. Here is how I did it.

var flatData:Array = [

{ Region:"Southwest", Territory:"Arizona", Territory_Rep:"Barbara Jennings", Estimate:40000 , Actual:38865 },

{ Region:"Southwest", Territory:"Arizona", Territory_Rep:"Dana Binn", Estimate:30000 , Actual:29885 },

{ Region:"Southwest", Territory:"Central California", Territory_Rep:"Joe Schmoe" , Estimate:30000 , Actual:29134 },

{ Region:"Southwest", Territory:"Northern California" , Territory_Rep:"Lauren Ipsum" , Estimate:40000 , Actual:38805 },

{ Region:"Southwest", Territory:"Northern California" , Territory_Rep:"T.R. Smith" , Estimate:40000 , Actual:55498 },

{ Region:"Southwest", Territory:"Southern California" , Territory_Rep:"Jane Grove" , Estimate:45000 , Actual:44913 },

{ Region:"Southwest", Territory:"Southern California" , Territory_Rep:"Alice Treu" , Estimate:45000 , Actual:44985 },

{ Region:"Southwest", Territory:"Nevada" , Territory_Rep:"Bethany Pittman", Estimate:45000 , Actual:52888 }

];

 

// sort first to make sure filter logic doesn’t fail

flatData.sortOn("Territory");

// function to return true for false for filtering

function is_unique_ter(item:*, index:int, arr:Array) {

    if (index<arr.length–1) {

        return item.Territory!=arr[index+1].Territory;

    } else {

        return true;

    }

 

}

 

//assign filtered data to different array

var filteredflatData:Array=flatData.filter(is_unique_ter);

 

// trace out contents of filteredflatData

for (var i:Object in filteredflatData) {

    var s="";

    for (var j:String in filteredflatData[i]) {

        s+=( filteredflatData[i][j])+",";

    }

    trace(s);

}

it should give trace output like this:

30000,Southwest,Arizona,29885,Dana Binn,
30000,Southwest,Central California,29134,Joe Schmoe,
45000,Southwest,Nevada,52888,Bethany Pittman,
40000,Southwest,Northern California,55498,T.R. Smith,
45000,Southwest,Southern California,44913,Jane Grove,

Flash Training

Recently I did a flash training at my office,  there were 10 attendants, but I guess that’s not bad for beginner. here is the presentation I used for the training.

Intro to AS3 using Flash CS3

Flash Document

When we create a new file in Flash IDE, we save it in “.fla” document. We call this fla document as a Flash Document.

Every flash document got it’s  own time-line, Stage of given width and height.

We can think of a flash document like a real-world stage play. Both got stages, here actors are symbols. we can add, remove, change, modify actors through out the time line. Every Symbol has it’s own behavior, but we can customize and change as per the requirements.

By default document time line got one layer, we can add or remove layer as per the requirement. We add symbols to layers. Flash time line can contain 2 kinds of frames, Keyframes and Regular Frames.

Key frame: is a frame whose on-Stage content differs from the preceding frame.

Regular frame: by contrast, is a frame that’s on-Stage content is automatically carried over (repeated) from the preceding closest keyframe

Symbols and Instances

Flash support three types of symbols.

• Movie Clip (for animations with programmatic content)
• Graphic (for nonprogrammatic animations that can be previewed directly in the Flash authoring tool)
• Button (for simple interactivity)

When we create a symbol master copy of that symbol is stored in library. Whatever we see on the stage is instance of those symbols, aka related copies of that symbol. changing symbol affect all instances, but change instance doesn’t affect symbol.

Accessing child clips of a movie

getChildAt()
getChildByName()

Timeline Control

• play( )
• stop( )
• gotoAndPlay( )
• gotoAndStop( )
• nextFrame( )
• prevFrame( )
• currentFrame
• currentLabel
• currentLabels
• totalFrames

Drawing API

ActionScript allows us  to create primitive vector shapes and lines via Graphics class. Each ActionScript class that supports drawing creates an instance of Graphics class through which we care add graphical elements into it.

Say for example you have a class by name Ball.

you create a new instance of ball like

var smallBall:Ball = new Ball()

assuming that Ball is of width and height equal to 100px, to draw a border around the ball you can you code like this.

smallBall.graphics.lineStyle(1, 0x000000);
smallBall.graphics.moveTo(0, 0);
smallBall.graphics.lineTo(100, 0);
smallBall.graphics.lineTo(100, 100);
smallBall.graphics.lineTo(0, 100);
smallBall.graphics.lineTo(0, 0);

you can categorize methods of Graphics class as follows:

Drawing lines
curveTo( ), lineTo( )

Drawing shapes
beginBitmapFill( ), beginFill( ), beginGradientFill( ),  drawCircle( ), drawEllipse( ), drawRect( ), drawRoundRect( ),
drawRoundRectComplex( ), endFill( )

Defining line styles
lineGradientStyle( ), lineStyle( )
Moving the drawing pen
moveTo( )

Removing graphics
clear( )

Timer Event

Timer Events are events that  get triggered between given delay (in milliseconds).

Using Timer Events in Actionscript

var timer:Timer = new Timer( );

timer.delay = 100;

timer.repeatCount = 5;

timer.repeatCount = 0; // Unlimited TimerEvent.TIMER events

function timerListener (e:TimerEvent):void {
// Code here will execute when triggered by a TimerEvent.TIMER event
}

timer.addEventListener(TimerEvent.TIMER, timerListener);

timer.start()

and use timer.stop() to stop timer event triggering.

Enterframe Events

EnterFrame is an event that get dispatched according to the frame rate of given movie. we can assign frame rate for a flash movie between 12 to 120.

Say if we associate an Enterframe event listener to Stage of a movie which has frame rate 20, flash run time tries to dispatch 20 Enterframe events per second. This is basically used to animate graphical objects in flash, but we cannot completely assume that this event will get triggered with respect to the given frame rate.

the Flash runtime does not always achieve the designated frame rate. If the computer is too slow to render frames fast enough to keep up with the designated frame rate, the animation slows down. This slowdown can even vary depending on the system load; if other programs are running or if Flash is performing some processor-intensive task, the frame rate may drop for only a short period and then resume its normal pace.

Data Types

Primitive:

• Boolean
• int
• null
• Number
• String
• uint
• undefined

Complex:

• Object
• Array
• Date
• Error
• Function
• RegExp
• XML
• XMLList

* type that is used to represent any data type. This should be used instead of omitting typing information for your variables.

Casting is treating variable of one type as variable of another type.

example:

int(true) //results 1

Mouse Events

• MouseEvent.MOUSE_DOWN
• MouseEvent.MOUSE_UP
• MouseEvent.CLICK
• MouseEvent.DOUBLE_CLICK
• MouseEvent.MOUSE_MOVE
• MouseEvent.MOUSE_OVER
• MouseEvent.MOUSE_OUT
• MouseEvent.ROLL_OVER
• MouseEvent.ROLL_OUT
• MouseEvent.MOUSE_WHEEL

interesting thing to observe here is ROLL_OVER and MOUSE_OVER looks similar but they have it’s own purpose. The purpose of the rollOver event is to simplify the coding of rollout behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container.

Hence these two events make difference, when they are assigned to MovieClips with child display objects.

Operators

Basic Operators

Arithmetic Operators: +, -, *, /, %, ++, –, +=, -=, *=, /=, %=
Comparison Operators: <, >, <=, >=, ==, ===, !,!=, !==, &&, ||
Other Operators: is, as, in, typeof, instanceof

There are even more operators for bitwise operations, I will  cover that later.