Action Script Top Notch

Facebook Application Development with Graph API Cookbook

2011-11-24T12:36:00.001-08:00

Find good discounts on this and other books.

How to Morph (manipulate vertices) Proscenium Stage3D Molehil

2011-11-05T10:12:00.000-07:00

In Procenium you can't do something like this

(i-th v-vertex of some mesh)

v[i].x=0.5

v[i].y=0.5

v[i].z=0.3

as you would do in some others frameworks.

The above code in basic tough would mean creation of buffer for one vertex and upload modification into GPU. What about you need to modify many vertices (or all) of the mesh as you will do in the morphing???

After creation of the MeshElement from MeshData local buffer with 3 sets of data is created and uploaded VertexBuffer3DHandle.uploadFromVector(I couln't understand why is internal when uploadFromByteArray is public) and to GPU.

Indices Set - contains indices of the vertex info in vertices setset ex. index[0,1,2...]=30,10,12 ...

inx ex. 30 means 30-th group of vertices set actually vertexSet[30 * stride]

Vertices Set -contains vertex info for every primitive in successive order as defined
in primitive's index vector
.... v30posX,v30posY, v30posZ u30,v30,v30normXv30normY,v30normZ,...(stride=8)

Joints Set -...(think which vertices are connected to which joint)

Idea was changing the content of the verticesSet and upload to the bufffer.
You could obtain copy Indices Set and Vertices Set thru MeshUtils.getCopy but I didn't find way to change their content. Other problem was there is no information about vector indices inside Vertices Set used so you know which value inside vertices set belong to which vertex. Luckily I found local structure created during proccesing of MeshData of type IndexHashMap(simple but powerful packing) which actually contain just that information and expose it to subclasses.
            v[3]=[0,12,29..] // 3-th vertex is involved into face 0,12 and 29...
As much Adobe tried go more on speed and make easy for designers (of course no one want to reinvent the wheel), seems framework is very close by my opinion ,especially when you need for example create your custom MeshElement and MeshElementData or its super classes like MeshPolylistElementData, from one side from the other side back to writing assembler to make particles (of course for custom shader but let's write binary for other cases it will be more easy :)) when we have high level languages)

Update 05.01.12.
      I found reference of this post on one Japanese blog about better solution by creation and removing MeshElements with every vertex change as cleaner solution. I agree (similar thing is done in my MD2 importer) but influence to performance is very big and sometimes thing must be ugly :))
Source

How to cook Flash Facebook games and social application (Tips and tricks)

2011-11-04T02:00:00.000-07:00

As Facebook lack of good documentation and also support of Adobe is somekind of open project I find useful to write few tips that will save you time and headeches.

Tip1: Avoid using obsolete technologies

FBJS
RestAPI
FBML

and tones of google trashy old tutorials. This is very hard as Facebook changes are very often (lately I found that have changed auth.statusChange event status from not_connected to not_authorized) but investing in legacy technologies in only if you desperate . This tips might be obsolete too so be careful and read what is newest.

Tip2: HTML container page

Its not enough to download and included FlashFacebook swc API's . FlashFacebook API's are using ExternalInterface for communication to JS. If you check Facebook documentation 99% of examples not telling to include JSDK js to your html page:

< script src="http://connect.facebook.net/en_US/all.js" type="text/javascript" >

don't forget to put this layer inside body tag.

< div id="fb-root" >

in you swfobject.js code you should have(one is used by IE and one for FF):

var attributes = {};
attributes.id = "qol";
attributes.name = "qol";

Tip3: What and where work

Most of things work in AIR but not in web application.

Facebook.init("YOUR_APP_ID", onFacebookInit);

onFacebookInit

would not fire local or localhost so you need to upload online host on which your Facebook app settings point to then change DEBUG configuration to debug from online

protected function onFacebookInit(success:Object, fail:Object):void {
if (success) {

}else{

Facebook.login(onFacebookLogin);

}

Facebook.login

if you are logged and authorized app would do nothing
if you aren't logged would open login dialog (then if you not authorized application would open permission dialog)
if you are logged and not_authorized app would open permission dialog
every of above situation if successful would trigger onFacebookInit too

Tip4: Invite friends

Facebook.ui("apprequests",{message:"Join Quest of Legends Game",picture:"http://www.google.com/intl/en_com/images/srpr/logo3w.png",description:"Quest of legends is very addictive...",caption: "Quest of Legends"},onFriendsHandler);

-message (required)

- to: '499802820,499802852'....users id's (omitting it mean everyone)

Tip5:Buy credits

works only if you access your html page containing swf thru http://apps.facebook.com/YOUR_APP_ID/ as canvas page

Facebook.ui('pay', {credits_purchase: true }, onFacebookCreditsPurchase );

Tip5:Track user status

If you not track if user is still logged or not or something happen your game or app might blow so its good you listen for this event:

Facebook.addJSEventListener("auth.statusChange", statusChangeHandler);

protected function statusChangeHandler(result:Object):void {
            if (result && result.status) {

                switch (result.status) {
                case "connected":
                    isLoggedOn = true;
                     trace ( "User is logged in and authorised our application.");
                break;
            case "not_authorized":
                isLoggedOn = false;
                           trace "User is logged in but has not authorised our application.");
                break;
            default:
                  Facebook.login(onFacebookLogin);
                    isLoggedOn = false;
                trace( "Status Unknown.");
                break;
                }
            }
        }

Tip6:Publish status/feed

woudn't work if you aren't logged

Facebook.api("/me/feed",submitPostHandler,{message:text},"POST");

Recently I encounter one great book on very hot topic and it was honоr that reviewing is being granted to me . Cooking games and social application of Facebook!!!. ~~I'm still reviewing it but~~ found very useful for someone want to learn to use of Facebook API's fast and in deep, and what is most important is that realtime situations are covered with example source code.

So I warmly recommend it.FaceCookbook

Collada DAE to Proscenium ActionScript Export Stage3D Flash11

2011-10-30T13:26:00.000-07:00

XML that X stating for exchange is well known format of exchanging files between different systems, programs and worlds. Thru Collada specification and its xml file format .dae users could exchange 3D files created in diffrent 3D environments like Maya, 3D Max, Blender, Daz and so on... and this exchanging file format got supported in Procsenium as well.
Having simple running animation of woman model having 51777 vertices in my DAZ exported .dae file, file reach 6.5MB (excluding all unnecessary and unsupported things like morphs) + 1.15MB jpg textures. By zipping DAE file I decrease it to 1.19MB (maybe some packing methods like built in Proscenium LZH would return even better results) but also increase the size of main.swf file, now containing the compression libraries and additional time to for unzipping. Also parsing of text file isn't avoided. All in all parsing of such big .dae (text files) takes a lot to time so I couldn't find logic in using DAE files by many developers in production phase. So lets underline again word EXCHANGE. By my opinion as clearly stated we should use .dae files for exchange and inside the Flash platform swf,swc as we would use .max files in 3DMAX or .obj files in WAVEFRONT...
Being stubborn myself and want to prove the concept to other developers I built little AIR application that can preview .dae files and export then as .as .

with options, texture files to be embed or loaded for external source. By using embed option (model+bones+animation+texture files) I succeed in getting export of 3.44MB swf size loading in less then 5s.
Exporter can create ActionScript files:

-Model.as that is planned for raw inclusion in your project.
-Model.as that is planned as external swf/swc and then loaded in main.swf. (6.5MB .dae was 4.5MB swf)
swf doesn't contain Proscenium.swc so duplication of Proscenium.swc requred inclusion in main.swf is avoided with bit loss of creation speed using getDefinitionByName function.
Model.as in both cases could have source for loading textures or to embed them

There lot of space of improvements and upgrades like using ByteArrays or BinarySerialization to pack model data inside .as.
Next:
Option of generation of relative texture urls is in plan and prevention of duplication of embedlinks. (Currently manual fixed)
Reduce decimals like this 0.35814398527145386 to 6 digits think its enough?
I wish to hear your toughs or at least support so I can provide more to the community and my 3 weeks day night effort isn't futile.
Someone said saying great model as this is not show case :))))).

Source(+ air installation)
Test project file

Import BVH BioVision motion Proscenium Stage 3D Flash11

2011-10-24T12:58:00.000-07:00

In order to do some custom animation or use external motion(animation) files you need to understand how animation works in Proscenium.

!!! Click twice on the buttons <-temp solution

AnimationController - controls animation timeline and contain animation tracks.

    animationController = new AnimationController(name + "AnimationController");

    if you do

     animationController.time=0.5;

it will jump to 0.5s in time.

Sampler - gives interpolated output value based on sampler function, time(keyframes) and input values. All samplers have times vector with incremental time values in which transformation happen - actually KEYFRAMES.

_times=Vector[0,0.5,0.78,..]

and input values in different format depends of type of sampler you use and transform element you plan to target.
SamplerNumber, SamplerBezierCurve gave single output number value so can be used with trasformations like TransformElementTranslate,TransformElementRotate,TransformElementScale
and SamplerNumberMatrix3D giving matrix as output so should be used with TransformElementMatrix

            //create Sampler
            sampler = new SamplerNumber(_times, inputValuesVector);

Warning only SamplerNumber, SamplerMatrix3D, SamplerBezierCurve are functional the others aren't implemented yet.

AnimationTrack - binds sampler output to target source's transformation elements not to scene node transform directly.

   //create Track
            track = new AnimationTrack(animationController, sampler, targetSource);

SceneNode contains transform steak which contains transform elements.

    node.transformStack = new TransformStack();
                 //bone.transformStack.push(new TransformElementMatrix("transformElementID", matrix));
                bone.transformStack.push(new TransformElementRotate("rotateX"));
                bone.transformStack.push(new TransformElementRotate("rotateY"));
                bone.transformStack.push(new TransformElementRotate("rotateZ"));

//targetSource is string in format
   // if transformElement is TransformElementMatrix "node.name/transformElementID"
        // if transformElement is TransformElementRotate "node.name/transformElementID.ANGLE"
   // if transformElement is TransformElementTranslate planned to translate X "node.name/transformElementID.X"
      // if transformElement is TransformElementTranslate planned to translate Y "node.name/transformElementID.Y"
        // if transformElement is TransformElementTranslate planned to translate Z "node.name/transformElementID.Z"

//Connect transform steak with node transform
   Attribute.connect(bone.transformStack.attribute(Transformer.ATTRIBUTE_TRANSFORM), bone.attribute(SceneNode.ATTRIBUTE_TRANSFORM));


//add track to controller
            animationController.addTrack(track);

In onAnimate loop (enterframe) playback of time happen (of course calculating interpolated transformation samples, applying of transformations to the targets and re-render)

override protected function onAnimate(t:Number, dt:Number):void

{

if (!_initialized)

return;

for each (var animationController:AnimationController in animations)

{

animationController.time = (t % animation.length) + animation.start;

}

You can also animate node by appending translation,rotation:

override protected function onAnimate(t:Number, dt:Number):void{

myNode.appendRotation(angle,arroundWhichAxes);//Vector3D.Y_Axis <--- arround y axis

myNode.appendTranslation(translationx,translationy,transaltionz);

}

Source

MD2 Model loader Proscenium framework Stage3D API (Flash11)

2011-10-13T16:29:00.001-07:00

          Proscenium is experimental framework as Adobe says. Used to very user friendly PV3D,Away3D and Alternativa frameworks +plus they are opensource, found Proscenium at least different approach. I expected that black box would be on top of ability of vertex manipulation. Not far far above restricting developer freedom to Adobe's ideas how things should go. Main problem with all big companies and the King is that, they rare walk between people. As a project manager I would listen people's chat/ideas/forums then draw development direction instead thinking that we are the smartest and we are only untouchable politics creators. I could now enter into discussion of clumsy Adobe's tweeners to libraries as Tweener and TweenLite and signals compared to dispatch event system... As is obvious that I don't want restriction (restricted to load DAE,OBJ..) files. I wanted to load Quake2 MD2 as very useful in games, when you don't need complex models with bones and skinning, but cheaper,easy to create, with animation several moves and low number of polygons("low" in past wasn't too low :))

In short to build loader you need to extend ModelLoader class with already binary and text loader helper and event handling mechanism ....
When item is loaded you use loader.model.addTo(sceneNode) function from ModelData and returns ModelManifest.
ModelManifest is document containing info of loaded bones,meshes,animations,materials...
     Magnificent addTo function do everything so find out this approach less customizable for example if you want to init SceneMesh.userData during creation of the mesh not after adding on scene.
It create materials,meshes,bones,nodes??? from MaterialData,MeshElementData,BonesData,SceneNodeData create model manifest and add all nodes and subnodes to scene.
After parsing of data this strucutre should be created
        ModelData
                         ->SceneNodeData
                                                      ->MeshData

First we define types of vertex inputs or properties. Position,Texcoord,Normal

meshData.addVertexInput(new Input(Input.SEMANTIC_POSITION, "positions", 0));

meshData.addVertexInput(new Input(Input.SEMANTIC_TEXCOORD, "texcoords", 1));

meshData.addVertexInput(new Input(Input.SEMANTIC_NORMAL, "normals", 2));

//indices 0,1,2 specify
how array of primitives would be filled with vertex values( x1,y1,z1,u1,v1,w1, nx1,ny1,nz1

add sources to of the Inputs

meshData.addSource(new Source("texcoords", new ArrayElementFloat(texcoords), 2));

// index 2 mean that data in texcoords would be read by pairs texcoords=[u1,v1,u2,v2,u3,v3....num_texcoords pairs

meshData.addSource(new Source("positions", new ArrayElementFloat(positions), 3));

// index 3 mean that data in position would be read by tripples texcoords=[x1,y1,z1, next tripple x2,y2,z2...num_vertices

meshData.addSource(new Source("normals", new ArrayElementFloat(normals), 3));

Create MeshElementData

var polylist:MeshElementDataPolylist = new MeshElementDataPolylist(meshData, meshData.vertexInputs,num_primitives, primitives, null, vcount, "MeshElementDataPolylistDoll", "materialName");

//primitives array containing vertex position, texcoord, normal, index triples
//ex primitives=[0,1,2, 0,2,3...
//ex. 0,1,2 => 0 is index inside vertex position array, 1=> is index inside texture cords array, 2=> index inside vertex normals postion

//vcount is array showing how many vertices in primitives array make primitive(face/polygon).(index>3)

//ex. vcount=[3,4,3,4,3,5...] so first primitive is formed of 3 groups of ( x1,y1,z1,u1,v1,w1, nx1,ny1,nz1)

And workhorse is MeshElementDataSource that extends MeshElement process and puck all data and source of vertices, normals and texcoords to structures and buffers ready for AGAL Compiler.
How we can access vertices(and structures containing data) so we can apply some transformation???
To expose them we need to extend MeshElementDataSource or MeshElementDataPolylist so I can access vertexSources and vertexIndices??? Ofcourse vetex positions and normals should be calculated before putting inside this structures.

override protected function initModels():void
{
//super.initModels();
var md2Model:String =
//"../res/models/"+
//"doll.md2";
//"box.md2";
//"spos_body.md2";
//"spos_weapon.md2";
//"spos_body.md2";
"tris.md2";
_md2Loader = new MD2Loader(md2Model );
_md2Loader.addEventListener( Event.COMPLETE, completeEventHandler, false, 0, true );
}

protected function completeEventHandler(event:Event):void

{

var loader:MD2Loader = event.target as MD2Loader;

var manifest:ModelManifest = loader.model.addTo(scene);

_mesh = manifest.meshes[0];
...

As half of Proscenium lean towards handling Collada files it is important to check Collada specification.

Many thanks to my friend Tim Knip for quick 3D tips and creator of extraordinary Collada library .

You will also need Proscenium framework from Adobe site.

Source

Flex4 Custom Validator (Compare and Multifields)

2011-04-23T13:16:00.000-07:00

I've been not satisfied by Adobe example of making custom validators making model object when you need to compare 2 or more fields. For example you want to compare password fields or you want to compare several string fields not duplicating same StringValidators. I found on net lot of hacking solution but not one clean.
So after spending several hrs exploring how Validators are functioning and found that grail was "listener" parameter. Seal source param by overloading it. Create sources field to accept sources involved in validation.
By switching the listener switch source of error listening.

package components
{
import flash.events.IEventDispatcher;

import mx.core.mx_internal;
import mx.events.FlexEvent;
import mx.events.ValidationResultEvent;
import mx.validators.IValidatorListener;
import mx.validators.StringValidator;
import mx.validators.ValidationResult;
import mx.validators.Validator;

import spark.components.TextInput;

public class CompareValidator extends StringValidator
{
private var _sources:Array;
private var _actualTriggers:Array;
private var _emptyErrorMessage:String="No value to compare with ";
private var _compareErrorMessage:String="Comparation equality failed";
private var _minmaxErrorMessage:String="Length of value should be between min and max";

public function CompareValidator()
{
super();

}

public function get actualTriggers():Array
{
return _actualTriggers;
}
[Bindable]
public function set actualTriggers(value:Array):void
{
_actualTriggers = value;
}

[Bindable]
public function get compareErrorMessage():String
{
return _compareErrorMessage;
}

public function set compareErrorMessage(value:String):void
{
_compareErrorMessage = value;
}

[Bindable]
public function set sources(value:Array):void
{

removeTriggerHandler()
_sources = value;
_actualTriggers=_sources;
listener=_sources;
addTriggerHandler();

}

public function get sources():Array
{
return _sources;
}
override public function get source():Object
{
return null;
}

override public function set source(value:Object):void
{

}

/**
* @private
*/
private function addTriggerHandler():void
{
if (_actualTriggers)
for each(var trigger:IEventDispatcher in actualTriggers)
trigger.addEventListener(FlexEvent.VALUE_COMMIT, triggerHandler);
}

private function triggerHandler(e:FlexEvent):void
{
validate();
}

/**
* @private
*/
private function removeTriggerHandler():void
{
if (actualTriggers)
for each(var trigger:IEventDispatcher in actualTriggers)
trigger.removeEventListener(FlexEvent.VALUE_COMMIT, triggerHandler);
}

override public function validate(value:Object=null, suppressEvents:Boolean=false):ValidationResultEvent
{

if (required)
{
var errorResults:Array = doValidation(null);

// Validate if the target is required or our value is non-null.
return handleResults(errorResults);
}
else
{
// We assume if value is null and required is false that
// validation was successful.
var resultEvent:ValidationResultEvent =
new ValidationResultEvent(ValidationResultEvent.VALID);

if (!suppressEvents && enabled)
{
dispatchEvent(resultEvent);
}
return resultEvent;
}
}

override protected function doValidation(value:Object):Array {

// Clear results Array.
var results:Array = [];
var comparationValue:String;
var stringResults:Array;

if(_sources)
{
for(var i:int=0;i<_sources.length;i++){

comparationValue=String(_sources[i][property]);

results=super.doValidation(comparationValue);

listener=_sources[i];

if(results.length){
this.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.INVALID,false,false,_sources[i].id,results));

}else if (!compareWithRest(comparationValue)){

results[results.length]=new ValidationResult(true,"","",_compareErrorMessage);
this.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.INVALID,false,false,_sources[i].id,results));

}else{

this.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.VALID,false,false,_sources[i].id));

}

}
}

return results;
}

private function compareWithRest(comparationValue:String):Boolean
{
var result:Boolean=true;

for(var i:int=0;i<_sources.length;i++){
if(_sources[i][property]!=comparationValue) return false;
}

return result;
}

}
}

package components
{
import mx.controls.TextInput;
import mx.events.FlexEvent;
import mx.events.ValidationResultEvent;
import mx.messaging.FlexClient;
import mx.olap.aggregators.MinAggregator;
import mx.validators.CreditCardValidator;
import mx.validators.StringValidator;
import mx.validators.ValidationResult;
import mx.validators.Validator;

public class MultiStringValidator extends StringValidator
{
private var _sources:Array;

private var _actualTriggers:Array;

public function MultiStringValidator()
{
super();

}

public function get actualTriggers():Array
{
return _actualTriggers;
}
[Bindable]
public function set actualTriggers(value:Array):void
{
_actualTriggers = value;
}

[Bindable]
public function set sources(value:Array):void
{

removeTriggerHandler()
_sources = value;
_actualTriggers=_sources;
//listener=_sources;
addTriggerHandler();

//this.subFields=["firstNameTextInput","lastNameTextInput"];

}

public function get sources():Array
{
return _sources;
}
override public function get source():Object
{
return null;
}

override public function set source(value:Object):void
{

}

/**
* @private
*/
private function addTriggerHandler():void
{
if (_actualTriggers)
for each(var trigger:IEventDispatcher in actualTriggers)
trigger.addEventListener(FlexEvent.VALUE_COMMIT, triggerHandler);
}

private function triggerHandler(e:FlexEvent):void
{
validate();
}

/**
* @private
*/
private function removeTriggerHandler():void
{
if (actualTriggers)
for each(var trigger:IEventDispatcher in actualTriggers)
trigger.removeEventListener(FlexEvent.VALUE_COMMIT, triggerHandler);
}

override public function validate(value:Object=null, suppressEvents:Boolean=false):ValidationResultEvent
{

if (required)
{
var errorResults:Array = doValidation(null);

// Validate if the target is required or our value is non-null.
return handleResults(errorResults);
}
else
{
// We assume if value is null and required is false that
// validation was successful.
var resultEvent:ValidationResultEvent =
new ValidationResultEvent(ValidationResultEvent.VALID);

if (!suppressEvents && enabled)
{
dispatchEvent(resultEvent);
}
return resultEvent;
}
}

/* override protected function get actualListeners():Array
{
if(listener && listener is Array) return listener as Array;
if(_sources)
return _sources;

return [];
}*/

override protected function doValidation(value:Object):Array {

// Clear results Array.
var results:Array = [];
var comparationValue:String;
var stringResults:Array;

if(_sources)
{
for(var i:int=0;i<_sources.length;i++){

comparationValue=String(_sources[i][property]);

stringResults=super.doValidation(comparationValue);

listener=_sources[i];

if(stringResults.length){

this.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.INVALID,false,false,_sources[i].id,stringResults));

}
else{

this.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.VALID,false,false,_sources[i].id));

}

results=results.concat(stringResults);

}
}

return results;
}

private function compareWithRest(comparationValue:String):Boolean
{
var result:Boolean=true;

for(var i:int=0;i<_sources.length;i++){
if(_sources[i][property]!=comparationValue) return false;
}

return result;
}

}
}

Multidimesnional Vectors Arrays

2011-03-23T10:02:00.000-07:00

Creation of multidimensional vectors(arrays) is painful and slow process.
1D I - vector (length)
2D IxJ -matrix (width x height)
3D IxJxK - quader (width x height x length)
4D IxJxKxM - quader of quaders (width x height x length x time)
...
Especially when you don't have some function like var vector:Vector.=new Vector.(5,3,4) which will create 3D vector 5x3x4; (Matlab has... and some other languages)
In Action script3 you can create for example 3D vector(5x3x4) width x height x length:


var m:Array=new Array(new Array(new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array())),
//
new Array(new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array())),
//
new Array(new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array()))
//
new Array(new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array()))
//
new Array(new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array(),new Array(new Array(),new Array(),new Array()))
);
//even with shorter m=[[[],[],[]...]
m[0][0][1]=1;
trace(m[0][0][1]);

Using auto resizing vectors as Array isn't memory efficient. For example Array reserve 10 memory locations. If you are using 2 you have 8 empty but reserved location. If you start using 11 locations, it will be allocated another 10memory locations.
Restricting Array to fixed size we would manage memory better. But creation of 3D vector of 5x3x4 size would need initialization loops and make creation lengthy. New loop for every dimension on top of the rest. Also creation of lot of objects with "new" consume even more time and memory.


var i,j,k;
var mainArray:Array=new Array(5);
for(i=0; i<5;i++) { mainArray[i]=new Array(3); for(j=0;j<3;j++) { mainArray[i][j]=new Array(4); for(k=0;k<4;k++) {   //fill } } }

Using not typed vectors would slow down processing cos AVM need to check type of element with every access. We could use typed Vector instead of Array with defined length and fixed flag set to true.


var d1:Vector.<vector.<int>> = new Vector.<vector.<int>>(5*3*4,true);
//follow loop init

Access to element of d1[i][j][k] is very clean but it is slow. AVM access d1[i] then search of property of "j" of unnamed vector then k of unnamed vector and so on. Some speed you could obtain by


var d2=d1[i];
var d3=d2[j];
var value=d3[k];

VectorEx class solves all this problems,


var vector:VectorEx=new VectorEx(int,5,3,4);

to create 3D(5x3x4) vector with integers. VectorEx use assembler trick of making multidimensional vectors with one-dimensional vector and quick shifting index math to access other dimensions in it.


                    trace(vector[0][1][2]);//you can use this clean way but
//using getElementAt is much faster   
      trace(vector.getElementAt(0,1,2));
      vector.setElementAt(55,0,1,2);//s
      trace(vector.getElementAt(0,1,2));

Source: Download

How to make Associative Array using Proxy

2010-12-13T16:41:00.001-08:00

Many times you need to access elements thru index as key but sometime thru object or string as key. Here comes Associative Array.
Simplest way of making Associative Array is by using normal Array.


var arr:Array=new Array();
arr['mile']=111;
arr[0]=222;
//you cant var myObject:Object={};  arr[myObject]=333;

If I do


trace(arr.join(','));

would return 222. But where is my element at 'mile' ?;
Above implementation is very slow and have restriction of using objects as keys, join, reverse, slice, splice and other useful function don't work properly.
Even in ActionScript documents you will find recommendation of use of Object for Associative Arrays.

Lot of problems would be solved if we have internal indexer structure.
We could build something like:


  var arrThruKeys:Array=new Array();
 var arrThruIndex:Array=new Array();
  var myElement:int=222;
  arrThruKeys['mile']=myElement;
  arrThruIndex[0]=myElement;

or as documentation propose:


var objThruKeys:Object=new Object();
var arrThruIndex:Array=new Array();
var myElement:int=222;
objThruKeys['mile']=myElement;
arrThruIndex[0]=myElement;

If we want all Array functions to function same and we could access elements thru key or thru index, we need to use something like this


public class AssociativeArray
{
   var objThruKeys:Object=new Object();
   var arrThruIndex:Array=new Array();

   public function push(key:*,value:*):void
   {
     var elem:Object={key:key,value:value,inx:arrThruIndex.length};
      objThruKeys.key=elem
      arrThruIndex[arrThruIndex.length]=elem
   }

   public function getByKey(key:*):*
   {
      return  objThruKeys[key].value;
   }

   public function getByInx(key:*):*
   {
      return  arrThruIndex[key].value;
   }

   public function reverse():void
   {
     arrThruIndex.reverse();
   }


}

How we could keep direct speed access thru index that array offer and avoid slow slow operations like unshift, splice (remove,insert), merge ... etc. I decided to use Single Linked List and for direct access I prefer using Dictionary ( until utilizing HashTable to this implementation for more speed) . Instead of using dynamic object {key:key,value:value,inx:arrThruIndex.length} which is much slower then using object from final class


final class SNode
{
  public var key:*;
  public var value:*;
  public var inx:int;

  public function SNode(key:*,value:*,inx:int):void
  {
    this.key=key;
    this.value=value;
    this.inx=inx;
  }

}

In order we use [] operator instead of getByIndex and getByKey functions, also to use for each and for..in in normal way and easy to replace some older code with just replacing Array with AssociativeArray/AssociativeFastArray,
we could extended our class from dynamic Proxy Class.(maybe little bit slower but clean and fast development).


var assoc:AssociativeFastArray=new AssociativeFastArray();

//this is tha same as assoc.first='first';
assoc['first']='firstvalue';
assoc[0]='new first value';//element at inx 0 will be overwritten in strict mode

NEXT:
- reverse function to be implemented
- sort functions to be implemented
- strict mode test
- bug testing and optimization

Download

How to make MultInheritance(Multiextends) in Action Script 3

2010-12-08T12:11:00.000-08:00

If you recall yourself on the movie "Twins" with Arnold Schwarc. and Denny de Vito you probably understand what MultiInheritance mean. Childs from more then one parents. But In Action Script you could extends only one class (child from only one parent). This restrictions solves some problems like diamond problem when both parents come from same grandparent or awareness from which parent comes what, in child, when they have same function's or attribute's name. Still in some cases you would need MultInheritance(Multi extends).


public Class1
{
 public var sameVarInAll:int=0;

 public Class1(param1:*):void //whatever constructor arguments or no arguments
 {
 }

 public function sameFunctionIn():void
 {
 }
 
 public func1():void
 {
  
 }
}


public Class3
{
 public var sameVarInAll:int=0;
 public Class3(param3:*):void //whatever constructor arguments or noarguments
 {
 }
 
 public function sameFunctionIn():void
 {
 }
 
 public func3():void
 {
  
 }
 
}


public Class2
{

 public var sameVarInAll:int=0;

 public Class2(param2:*):void
 {
 }
 
 public function sameFunctionIn():void
 {
 }
 
 public func2():void
 {
  
 }
 
}

Let make interfaces from classes Class1,Class2,Class3.


interface IClass1
{
 func1():void
}

interface IClass2
{
 func2():void
}


interface IClass3
{
 func3():void
}

Now we can extends interfaces IClass1,IClass2,IClass3


interface IMulti extends IClass1,IClass2,IClass3
{
 
}

and implements IMulti interface:


public class MultiInheretanceClass implements IMulti
{
 private _class1:IClass1;
 private _class2:IClass2;
 private _class3:IClass3;
 
 
 public class MultiInheretanceClass(param1:*,param2:*,param3:*):void
 {
  _class1=new Class1(param1);
  _class2=new Class2(param2);
  _class2=new Class3(param3);
 }


public function set(value:int):void
{
 //here we make decision from which class would be set
_class3.sameVarInAll=value;
}

public function get():int
{
 //here we make decision from which class would be returned
return _class3.sameVarInAll;
}

 public function sameFunctionIn():void
 {
  //here we make decision from which class would be called
  _class.sameFunctionIn();//ex
 }
 
 func1():void
 {
  _class1.func1();
 }
 
 func2():void
 {
  _class2.func2();
 }
 
 func3():void
 {
  _class3.func3();
 }
 
}

Fuzzy Logic Games library 0.1 in ActionScript 3

2010-08-25T12:08:00.000-07:00

Download
Soon examples. Stay tuned.

How to use AMF and JSON serialization in UNION platform(Multiplayer)AS3, BlazeDS, Java

2010-07-24T12:20:00.000-07:00

If you like to send complex data you need to forget about ancient string spliting technique and even XML. JSON is something better but if you want also speed and preservation of the Class object(also dynamic objects are slow in compilation and execution) and use the power of Union support of hibernate, you need AMF.(Thx Adobe that decide to reveal its code). Combination with zip or lzw or other compression methods you will get even better results.
If you stuck with JSON as3corelib would help you on the client side like


yourObject={now:new Date()}
room.sendModuleMessage("TESTJSON",{data:JSON.encode(yourObject));

but not on the server side.


String input=evt.getMessage().getArg("data");
JSONObject data = new JSONObject(input);

data.getString("now")
In attachement you will find json.jar library. Put it in "lib" of your union instalation and add it to the startserver.bat like lib\json.jar;
I'm bit tightent with scarce JAVE Message interface having 3 not so useful methods(designed only for dynamic Objects) in discussed cases. I hope in future Message would be more customizable in the future so we could send custom structure of the message content and we could write more optimize code instead writing hacks :)).
This made me problems when I tried


room.sendModuleMessage("TESTAMF",{data:AMF.serializring(classObject)); and to use byteArray.compress(), cos

Message content has much more chars above the 64 ASCII array or chars, so it makes big problems in getArg/s parsers of Message obejct to produce something.
The solution was


CurrentDayVO classObject=new CurrentDayVO();
classObject.now = new Date();
room.sendModuleMessage("TESTAMF",{data:Base64.encode(AMFSerializer.serializeToString(classObject)));

In attachement you can find AMFSerializer.as and Base64.as for client side and for server side
you need to include into lib folder of your union instalation BlazeDS flex-messaging-core.jar;flex-messaging-common.jar;(also attached )
and in startserver.bat lib\flex-messaging-core.jar;lib\json.jar;lib\flex-messaging-common.jar; so you can use
AMFSerialize.java like this:


String input=evt.getMessage().getArg("data");
input=Base64decoder.decode(input);
CurrentDayVO output = AMFSerializer.fromAmf(input);

For sending complex class object you need to make 2 classes one in AS3(CurrentDayVO.as) and one in Java(CurrentDayVO.java).


AS3:
package com.jdftm.vo{
    [Bindable]
    //[RemoteClass(alias="com.jdftm.vo.CurrentDayVO")]
    public class CurrentDayVO{
        private var _now:Date;

        public function get now():Date{
            return _now;
        }

        public function set now(value:Date):void{
            _now=value;
        }
    }
}

JAVA:
package com.jdftm.vo;

import java.util.Date;

    public class CurrentDayVO
    {

        private Date now;

        public CurrentDayVO() {
        }

        public void setNow(Date now) {
            this.now = now;
        }

        public Date getNow() {
            return now;
        }

    }

They need to be in same packages. Dont forget to
registerClassAlias("com.jdftm.vo.CurrentDayVO", CurrentDayVO); in you client code so compiler know to preserve Class object strucuture during serialization.
You need to put CurrentDayVO.class (compiled java) into your "lib" folder of union instalation.
TestUnion.as is the basic client application that sends JSON and AMF packages.
TestRoomModule.java is custom room module handling unpack and use of JSON or AMF messages sent by the client and send back.


 public void TestJson(RoomEvent evt)
    {
     String input=evt.getMessage().getArg("data");
     JSONObject data = null;
     //Map msgMap=evt.getMessage().getArgs();
     System.out.println("---------------------------------------");
     System.out.println("Received JSON Test Package:"+input);
     
  try {
   data = new JSONObject(input);
  } catch (JSONException e1) {
   // TODO Auto-generated catch block
   System.out.println(e1.getMessage());
  }
     
  try {
   System.out.println("Data from JSON Obeject "+data.getString("now"));
  } catch (JSONException e1) {
   // TODO Auto-generated catch block
   System.out.println(e1.getMessage());
  }
     
     
     try {
     
     //{echo:ofTheMessage,key:"We User1 know what JSON is!"}
     data.put("echo",input);
     data.put("key", "We User1 know what JSON is!");
    
     m_ctx.getRoom().sendMessage("MODULE_RESPONSE", data.toString());
    
     
     
   } catch (JSONException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
    }
    
    public void TestAmf(RoomEvent evt)
    {
     String input=evt.getMessage().getArg("data");
     //Map msgMap=evt.getMessage().getArgs();
     byte[] iBytes=null;
     CurrentDayVO output=null;
     System.out.println("---------------------------------------");
     System.out.println("Received AMF Test Package:"+input);
  
     /* try {
   iBytes = ZIPCompressor.uncompress(input.getBytes());
  } catch (DataFormatException e1) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  }
         
     try {
      
   input=new String(iBytes, 0, iBytes.length, "UTF-8");
  } catch (UnsupportedEncodingException e) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  }
     //evt.getMessage().
     System.out.println("uncompressed:"+input);
     */
     decoder.reset();
     
     decoder.decode(input);
     
     iBytes=decoder.flush();
     try {
   input=new String(iBytes, 0, iBytes.length, "UTF-8");
  } catch (UnsupportedEncodingException e) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  }
     System.out.println("AMF:"+input);
     
     
     
  try {
   
   output = AMFSerializer.fromAmf(input);
  } catch (UnsupportedEncodingException e) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  } catch (ClassNotFoundException e) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  } catch (IOException e) {
   // TODO Auto-generated catch block
   System.out.println(e.getMessage());
  }
  System.out.println("Data from CurrentDayVO getNow()"+output.getNow().toString());
  /*System.out.println(input);
      System.out.println(evt.toString());*/
    }

Source download

Facebook Graph and AOuth API in Flex 4

2010-06-27T04:36:00.000-07:00

DEPRICATED!!!

Official Adobe Facebook API's become/would become obsolete with new API's that were introduced by Facebook. It was about time that they make something breadcrumb style like and simple, clear and understandable.
http://graph.facebook.com/who/what?arguments
who - id or name of the person,company...,id of the comment,photos album,event...
what - could be properties of "who" like /photos,/feeds...,
could be query
could be method
...and more.

Out there you can found facebook-actionscript-api supporting the new Facebook API's (as they could cos new API's aren't final nether have passed child sickness).
This post would show you how you can make Flex application that will access FacebookAPI's without using too much JavaScripts as in some examples. If you want to just wrap your swf file with the Facebook functionalities you will took this kind of approach making all API's calls and responses thru JavaScripts without involving swf in it.
In order to handle query string parameters returned from Facebook we need change default .htm file adding:


var flashVars = {};
     var strHref = window.location.href;
     if ( strHref.indexOf("?") > -1 ) {
    var strQueryString = strHref.substr(strHref.indexOf("?")+1);
    var aQueryString = strQueryString.split("&");
    for ( var iParam = 0; iParam < aparam =" aQueryString[iParam].split(">

which will parse the url and send parameters as flash variables to the embedded swf.
We could use this approach in order to avoid changing default html file produced by Flash Builder:


var queryString:String=ExternalInterface.call("window.location.href.toString");
//parse string

with ActionScript parsing url returned by JavaScript call but we will gone into bottle neck later if we want to add support of Opera, Safari or some early version of IE or Mozzila in which window.location.href not work as expected. I hope this would be JSON encoded object in the future.

We will focus our code on 2 parameters returned, for orientation of actions in our code:
-fb_sig_added (defines if user has granted permission to your application or not)
-fb_sig_logged_out_facebook (mean that user has loggout option, actually that user is logged)

If this fb_sig_added exist we could be sure we are access application thru Facebook.



if(loaderInfo.parameters.hasOwnProperty('fb_sig_added'))
{
  //check if user is logged
  if(!loaderInfo.parameters.hasOwnProperty('fb_sig_logged_out_facebook'))
  {
  }
  else
  {
    //send the user to login facebook page with refrence to continue to your application
  }
      {
}
else//user has access application not thru facebook
{
//send the user to login facebook page with refrence to continue to your application
}

If user isn't logged we redirect him/her to facebook login page with refrence to continue to your application after login.
To access user data,photos,videos... access should be granted and access_token received. Every time user access your application would be redirected to authorization page. If user haven't grant permission to the application will be ask to do in page like this:

with listed permissions defined in scope(scope=user_photos,user_videos,publish_stream...)
else application would be supplied with access_token.
You may look in access_token as somekind of grant permission key that application is using to identify itself as permited to access user data or write on user wall or else.


 if (loaderInfo.parameters.hasOwnProperty("access_token"))
       {
          _accessToken = loaderInfo.parameters.access_token;
        
        
        
        
        
        _urlVariables = new URLVariables();
        _urlVariables.access_token = _accessToken;
        _urlVariables.fields = "id,name,picture";
        call(_urlVariables, onUserDataComplete);
        
       
       }
       else//
       {
                
            //https://graph.facebook.com/oauth/authorize?
        //client_id=application_api_key&
        //redirect_uri=http://www.example.com/myapplication&
        //scope=user_photos,user_videos,publish_stream
       
      
     
     
         navigateToURL(new URLRequest(AUTORIZE_URL+"?client_id="+loaderInfo.parameters.fb_sig_api_key+"&redirect_uri="+APPLICATION_URL+"&type=user_agent&display=page&scope=publish_stream"),"_top");
  
       }

There is a possibility access_token to be saved as SharedObject and fb_sig_added to be checked, if true, not to send user every time to authorization page so access_token is acquired. But access_token is short lived and after expiration new access_token need to be requested.

Application API key isn't hard coded inside your application as that is security risk
but obtained thru fb_sig_api_key parameter.
Important thing is that in authorization you need to use "GET" and in requesting data "POST" method.
Obtaining access_token allow us to request data:
https://graph.facebook.com/uid or me(meaning current user)/?access_token=...,&fields=id,name,picture
and got JSON coded data.


/**
               *
               * @param arg (arguments)
               * @param handler (function that will handle response)
               * @param category (subcategory or property)
               * @param method (GET or POST)
               */
     private function call(arg:URLVariables,handler:Function,category:String="",method:String=URLRequestMethod.GET):void

Our handler function will decode and assign values


/**
      * 
      * @param e
      */
     private function onUserDataComplete(e:Event):void 
     {
      var data:Object;
      _urlLoader.removeEventListener(Event.COMPLETE, onUserDataComplete, false);
      
      //Alert.show(_urlLoader.data);
      
      /*{
         "id": "1104286707",
         "name": "Alex Extream",
         "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs256.snc3/23172_1104286707_7803_q.jpg"
      }*/
      data= JSON.decode(_urlLoader.data);
      
      if (data.error)
      {
       throw new Error(data.message);
      }
      else
      {
      userImg.source = data.picture;
      nameLbl.text = data.name;
      publishButton.visible=true;
      }
      
      
      
      
      
     }

to the Lable and Image control previously add to mxml.

source download

Move Effect TabNavigator (Flex 4 SDK)

2010-05-28T05:03:00.000-07:00

Maybe MXML put much on what we call RAD(Rapid application Development) but if you really want to do something more then fast UI Design, codding of ActionScript is inevitable. Maybe some MXML guru would embed all that code inside MXML tags but I think that way we lose the power of readable and manageable MXML.
I actually wanted to change showEffect and hideEffect on fly depending of direction of selection of tabs in TabNavigator (from left to right or opposite).
Good news in Flex4 is that you can declare effects, strings, templates...inside the declarations tags and use them where and as much time you want, avoiding redundancy.

First we need some event that happen before change of container in TabNavigator. When user click on tab button FlexEvent.BUTTON_DOWN is dispatched.


for (idx=0; idx<len;idx++){
flightDetailsTabNavigator.getTabAt(idx).addEventListener(FlexEvent.BUTTON_DOWN,onTabClick);
flightDetailsTabNavigator.getTabAt(idx).label="Tab"+idx;
}

Handling that event mean finding the direction of selection of the tabs and attaching proper hide/show effects to previous and next container.


private function onTabClick(e:FlexEvent):void
{
var currentIndex:int;
var currentContainer:*;
var nextContainer:*;


if(!e.target.selected)
{
currentIndex=e.target.parent.getChildIndex(e.target);
currentContainer=flightDetailsTabNavigator.getChildren()[_prevSelectedIndex];
nextContainer=flightDetailsTabNavigator.getChildren()[currentIndex];


if( _prevSelectedIndex>currentIndex)//we go rigth to left
{
currentContainer.setStyle("hideEffect",moveToRight);
nextContainer.setStyle("showEffect",moveFromRight);
}
else//we go left to right
{
currentContainer.setStyle("hideEffect",moveToLeft);
nextContainer.setStyle("showEffect",moveFromLeft);
}

_prevSelectedIndex=currentIndex;


}
}

source: download

Ultimate freelancer's survival guide

2010-04-28T01:11:00.000-07:00

Protect you self from buyers, defend your freedom and financial independence.

Rule number one:
Buyers have advantage in the oDesk system (Don't wanna to compare other just fixed price systems). Remember this. You are building your profile and feedback with hard work, tests,constant learning.... Buyer can wait until you have crashed yourself bidding, could blackmail you and ruin your feedback(*) in second without harm with just creating himself other profile. You could create new account too but is futile cos you spent so much time and effort to build it and you can just hope of better feedback system. They could have no skills in the area and can evaluate your skills and code quality, and can forbid to show any information that you have been worked on that project(even screenshot)

(*)Use oDesk Feedback Policy
"Manipulating or coercing another User to perform a given task by threatening to leave negative feedback..."

Rule number two:
Avoid fixed price projects
You will get often into trap. First fixed projects aren't guaranteed by Odesk system nether have dispute option. Percentages of buyer who would agree to pay 100% in front no matter what feedback and experience you have is minimal. So request very good specification of request at front, with good defined development/payment phases and resolve all misunderstanding as soon as possible. Spoken language isn't invented for precise specification so buyer would take advantage of any doubtful statement to increase the requests and you can finished in the loop of new requests/bad feedack blackmail.

Rule number three:
Avoid buyers who send you decompiled code, ask hacking, cracking or request selling your already developed application protected by NDA.
You will have problems with law soon or later.

Rule number four:
Remember that most of the buyers are "wanna banna" people and "what they see what they think". Use this to present to your profile the best looking things(best put movie clips in your profile). You could developed most complex system and if you don't have 100$ makeup it worth 0 in your profile for them. So during development thru things to look good not run only for functionality they can't evaluate that.

Rule number five:
Never return on provocation("You have spent so much"),insults("f*** you","thief"...) and bad attitude. Record every conversation and try to finish the project as soon as possible. Records might help you with oDesk team to intervene changing your feedback.

Rule number six:
Use polite language(use could,should...) when want to complain or disagree with buyer's crazy requests like work outside oDesk, not logging hours, work 9-5(what is free(lance) in this chain???) .

Rule number seven:
Remember that to be constant with you work,availability and attitude. One error mean one star less to most of the buyers. They actually don't know what every feedback category consist of and didn't care. Your bad communication would reflect on your skill feedback category and your skill will reflect your communication feedback category.

Rule number eight:
Try to avoid other freelancers as customers. Dont get in chain first hand -> hand second hand ----> tenth hand -> You. They will request more and for less money and less time.

Rule number nine:
Don't get to close with the customer and don't involve emotion to relation. Remember on what is this relation based. You are earning for decent live and they to double,triple their fortune a.k.a interests so no friends,dudes,pals,morale,chivalry.... Play smart, understand how the capitalism function,keep professional distance and you wont be hurt.

Rule number ten:
Better with one eye then bad word about you.Better refund money (if you refund and cost of the project goes below 1$ => oDesk system would remove the project/feedback from your portfolio) then keep bad feedback.

Rule number eleven:
Don't beleave in charity,church and so on organizations or paying in stocks or percentage of profit especially when you are not US or EU citizen and don't have court signed agreement.

Rule number twelve:
Inform the customer/s what you were doing and how that leads to his goal and on the technical level consumable by them. They often not read all Memos and don't understand what is involved and even you don't have fancy system like CampFire, Unfuddle,Bugzilla... email on regular base will do.

More to come...

How to use Animated Bitmap Clip (Games)

2010-04-01T03:21:00.000-07:00

When you build avatars(virtual worlds) or characters(games) it is good to have container movie clip with all animated actions, understandable for designer, as we know that they aren't Action Script gurus.

Here comes Movie Clip Class disabilities.
Having many instances of same Movie Clip(ex. 50 or more enemies of same type, flock of birds, fish) will consume lot of memory and processor time. "Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches it automatically and creates 2 bitmaps in memory : One to work with pixels and another one to generate the filtered result. This time, for each transformation made to the DisplayObject, the two bitmaps previously generated are updated in memory. This time, your CPU occupancy rate is gonna go crazy" Thibault Imber

The idea was to use one Bitmap Source for all instances.

AnimationResourcer

class object takes the designer's container movi clip and parse frame actions and graphics making resource of bitmaps and actions that can be use by any

AnimatedClip(enhanced MovieClip) instance.

 The original source done by designer can be .swf container containing the animation,or on stage or embedded in main swf.

It is important mc to be ready(added to displayed obejct list render) so AnimationResourcer could access the frames graphi

If original animation source movie clip "mc" is on stage in Event.ADDED_TO_STAGE event instantiate AnimationResourcer


private function onAddedToStage(e:Event){

var aniResources:AnimationResourcer = new AnimationResourcer(mc);
}


or if embedded:

private function onAddedToStage(e:Event){

var mc:MyMovieClipClass=new

MyMovieClipClass();
    addChild(mc);

var aniResources:AnimationResourcer = new AnimationResourcer(mc);

removeChild(mc);}

of if you loaded from outside swf:

private function onLoadComplete(e:Event){

  var mc:MovieClip=event.target.content as MovieClip;
     addChild(mc);

var aniResources:AnimationResourcer = new AnimationResourcer(mc);

removeChild(mc)}

aniClip3:AnimatedClip=new AnimatedClip();

aniClip3.source = aniHeroResources;
       aniClip3.gotoAndPlay("Jump");
       aniClip3.x = 10;

One of the advantages of this is you could change the source of on fly (ex. your hero transformed in wolf)

aniClip3.source = aniWolfResources;//resource conatining wolf animations

or modify current source(ex. adding some matrix transformation) which will affect all the instances

or adding additional resources from aditional container (ex. your hero have learned new skils and moves so you need more animation action frames):

aniHeroResources.addSource(mc2); //mc2 is MovieClip containing addtional

animation frames source that will be concatenated to the frames from "mc" used as initial frames source
or concatenate animated resousrces
aniResources1.concat(aniResources2);

Other advantage is control of the animation speed e.g . (ex character normal/faster walk or with increase of heroes dexterity faster hit or enemy feels effect of slow down potion) and you not need to create and load new slower or faster animation.

aniClip.frameRate=60 //60 fps

Animated Clip has internal timer which control timing between every frame (bitmap) a.k.a frame rate has support almost all things and control/interaction as original MovieClip.

aniClip.rotate=45;

aniClip.gotoAndPlay("Jump");

aniClip.addEventListener(MouseEvent.Click,onMouseClick);

AnimatedClip is successor of Bitmap class which isn't supporting MouseEvent's so we need to attach our listeners to stage or our parent.

Also we need to keep track z-order index change.Unfortunelly Flash don't have INDEXCHANGE event which I need for elegant solution of reordering priority of the events, so AnimatedClips's parent DisplayObjectContainer need to override setChildIndex, swapChildIndex and swapChildren functions and we need custom IndexChangeEvent.


override public function setChildIndex(child:flash.display.DisplayObject, index:int):void 
  {
   
   var prevChildAt:DisplayObject;
   
   prevChildAt = this.getChildAt(index);
   super.setChildIndex(child, index);
   
   if (prevChildAt)
   prevChildAt.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, index + 1));
   
   child.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE,index));
  }
  
   
  override public function swapChildrenAt(index1:int, index2:int):void 
  {
   super.swapChildrenAt(index1, index2);
   
   this.getChildAt(index1).dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, index1));
   this.getChildAt(index2).dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE,index2));
   
  }
  
  override public function swapChildren(child1:flash.display.DisplayObject, child2:flash.display.DisplayObject):void 
  {
   super.swapChildren(child1, child2);
   child1.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, this.getChildIndex(child1)));
   child2.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, this.getChildIndex(child2)));
  }

Source download

How to customize Flash Components Cells - CellRenderer

2010-03-23T04:50:00.000-07:00

In many scenarios you don't want to reinvent the wheel by making component from scratch and will need more complex cells then cells in List,ComboBox,DataGrid containing just text, Carousel,TileList containing text and picture etc.
First we will design look of cell.

Then create class that extends MovieClip ( or Sprite or some component if we use different cell design) implementing the ICellRender Interface.

package  
{
 import fl.controls.listClasses.ICellRenderer;
 import fl.controls.listClasses.ListData;
 import fl.events.ListEvent;
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 
 /**
  * ...
  * @author DefaultUser (Tools -> Custom Arguments...)
  */
 public class CustomCellRenderer extends MovieClip implements ICellRenderer
 {
  private var _listData:ListData; 
        private var _data:Object;
  public function CustomCellRenderer()
  {
   
        } 
  
  public function set data(d:Object):void 
  { 
   
   
            _data = d.TestColumn; 
   
   
   textTextArea.text = _data.label;
   checkCheckBox.selected = _data.checked;
   imageUILoader.source = _data.icon;
   
   //colorColorPicker.selectedColor = _data.color;
          
        } 
...

Most important to be implemented is "data" property
public function set data(d:Object):void which is called each time object from your DataProvider is supplied for the cell.You will need to create objects that comply to your above cell design movie clip.

 DataProvider([{TestColumn:{color:0xFF00FF,label:"testText1",checked:true,icon:"logo.gif"},normalColumn:"normalText1"},
          {TestColumn:{color:0x0000FF,label:"testText2",checked:false,icon:"logo.gif"},normalColumn:"normalText1"}]);

Next you should linkage the cell design movie clip with the custom class CustomCellRenderer

When we use custom cells in other components we do
component.setStyle("cellRenderer",CustomCellRenderer)
but for DataGrid we will customize one column cell
column.cellRenderer=CustomCellRenderer;

Source:download

How to Solve scale9Grid Problem AS3(Flash)

2010-03-04T03:56:00.000-08:00

Scaling in Flash using partitioning of DisplayObject to 9 pieces is well known to developers and designers. The problems of using it goes from not affecting children of DisplayObject, proper scaling only when same(equal) scaling to X and Y, no scaling support of the Bitmaps and so on...
The idea is to make bitmapData of the DisplayObject, partition and drawing 9 parts of the inital bitmapData according to supplied scale9Grid rectangle and scaling requested.

I wanted to have OO approach to the problem YourSprite inherts ScaleBitmapSprite inherts ->Spite and not helper static object SpriteHelper.createScale9GridAvailableSprite(YourSprite) returning new Scale9GridAvailableSprite or Scale9GridAvailableSprite Class Scale9GridAvailableSprite(sourceSprite) that takes source in constructor.
First I took the Troy Gilbert version and made it 00. But I wasn't satisfied with making 9 Bitmap children and add to original Spite (ScaleComponentsSprite).
Then I wrote ScaleBitmapSprite based on Didier Brun's ScaleBitmapSprite which uses one BitmapData instead of nine incapsulated in Bitmaps as in above example and have advance options like outer Rectangle for effects and filters.
So you can use my version like:

var s:ScaleBitmapSprite=new ScaleBitmapSprite();
addChild(s);
s.scale9Grid=new Rectangle(5, 5, 90, 90 );
s.width=500;

or inherits to as much SkinClasses in your library or run-time as you like.

package 
{
 
 /**
  * ...
  * @author alex winx (www.winx.ws)
  */
 public class MySkinClass extends ScaleBitmapSprite 
 {
  
 }
 
}

Using OO way you can extend functionality in different or scenario that suit you.

Class code:

package {
 import flash.display.BitmapData;
 import flash.display.Shape;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.geom.Matrix;
 import flash.geom.Rectangle; 

 public class ScaleBitmapSprite extends Sprite {
  
    
  // ------------------------------------------------
  //
  // ---o properties
  //
  // ------------------------------------------------
  
  private var _width : Number;
  private var _height : Number;
  private var _inner : Rectangle;
  private var _outer : Rectangle;
  private var _bitmapData : BitmapData;
  private var _outerWidth : Number;
  private var _outerHeight : Number;
  private var _minWidth : Number;
  private var _minHeight : Number;
  private var _originalWidth:Number;
  private var _originalHeight:Number;

  // ------------------------------------------------
  //
  // ---o constructor
  //
  // ------------------------------------------------
  
  public function ScaleBitmapSprite():void 
  {
   
   
   _width = super.width;
   _height = super.height;
   
   _bitmapData = new BitmapData(_width, _height, true, 0);
   _bitmapData.draw(this, new Matrix(), null, null, null, true);
   
  }
  
  
  
  
  override public function get scale9Grid():Rectangle { return super.scale9Grid; }
  
  override public function set scale9Grid(value:Rectangle):void 
  {
   //super.scale9Grid = value;
   
   _inner = value;
   
   if (!_inner) return;
   
   if (_outer!=null){  
    _width = _outer.width;
    _height = _outer.height;
    _outerWidth = _bitmapData.width - _outer.width;
    _outerHeight = _bitmapData.height - _outer.height;
   } else {
    _width = _inner.width;
    _height = _inner.height;
    _outerWidth = 0;
    _outerHeight = 0; 
   } 
   
   
   _minWidth = _bitmapData.width - _inner.width - _outerWidth;
   _minHeight = _bitmapData.height - _inner.height - _outerHeight;
   
   draw();
  }
  
  
  public function get scale9OuterGrid():Rectangle { return _outer }
  
  public function set scale9OuterGrid(value:Rectangle):void 
  {
   _outer = value;
   
   if (!_outer) return;
   
    _width = _outer.width;
    _height = _outer.height;
    _outerWidth = _bitmapData.width - _outer.width;
    _outerHeight = _bitmapData.height - _outer.height;
  
   
   
   _minWidth = _bitmapData.width - _inner.width - _outerWidth;
   _minHeight = _bitmapData.height - _inner.height - _outerHeight;
   
   draw();
  }
  
  
  

  // ------------------------------------------------
  //
  // ---o public methods
  //
  // ------------------------------------------------
  
  /**
   * draw
   */
  public function draw():void {
   
   graphics.clear();
   
   ScaleBitmap.draw( _bitmapData,
        graphics,
        Math.floor(_width + _outerWidth),
        Math.floor(_height + _outerHeight),
        _inner,
        _outer);
  }
  
 
  // ------------------------------------------------
  //
  // ---o public methods
  //
  // ------------------------------------------------
  
  /**
   * get width
   */
  override public function get width():Number{
   return _width;
  }
  
  /**
   * set width
   */
  override public function set width(w:Number):void 
  {
   if (_inner)
   {
    removeAll();
    
    //reset
     this.scaleX = 1;
     this.scaleY = 1;
     
    _width=Math.max(w,_minWidth);
    draw();
   }
   else
   {
   _width = w;
   super.width = w;
   }
  }
  
  /**
   * get height
   */
  override public function get height():Number{
   return _height;
  }
  
  /**
   * set height
   */
  override public function set height(h:Number):void 
  {
   if (_inner)
   {
    removeAll();
    
    //reset
    this.scaleX = 1;
    this.scaleY = 1;
     
   _height=Math.max(h, _minHeight);
   draw();
   }
   else
   {
   _height = h;
   super.height = h;
   }
  }
  
  /**
   * get bitmapData
   */
  public function get bitmapData() : BitmapData{
   return _bitmapData;
  }
  
  /**
   * set bitmapData
   */
  public function set bitmapData(b : BitmapData) : void {
   
   _bitmapData=b;
   draw();
   
  }
  
  /**
   * 
   */
  public function removeAll():void
   {
    var i:int = 0
    var num:int = this.numChildren;
    
    for (; i < num; i++)
    removeChildAt(0);
   }
  
 }
}

Source:download

How to make Multilanguage support AS3 (Flash) Localization

2010-03-03T11:50:00.001-08:00

The story of multilanguage support of your application
or localization in Flash begins with Strings Panel that can be accessed Window->Other Panels->Strings. Actually the basic logic of localization is creating of file (txt, XML, database, SWF(in Flex) or other), containing key-value pairs (ID of the string as key and value actual string) for each language.

When you choose Settings from String Panel you can add languages from the list on

right that your application would support or custom languages (mk (Macedonian)) and Flash will crate the xml language files for you in separate folder. (This is very buggy and you will find sometime new version of your xmls where the 0S folder pointer was pointing last time)

There are 3 ways how you can use those files:
"automatically at runtime" —Flash Player replaces string IDs with strings from the XML file matching the default system language code returned by flash.system.capabilities.language.
"manually using stage language" —String IDs are replaced by strings at compile time and cannot be changed by Flash Player.
"via ActionScript at runtime" —String ID replacement is controlled using ActionScript at runtime. This option gives you control over both the timing and language of string ID replacement.
I prefer the last, cos give me more flexibility then other two . TIP:If you use it be sure that you not have static fields. You will got stuck with static fields for in scenario when you want to change application languages in runtime.

Creating key(ID)-value pairs is done by selecting of the TextField and filing the data in StringsPanel. The smaller TextField in Strings Panel is for ID and the bigger one is for string value for currently selected language. When you hit Apply, you will see that row in the table below got filled and you can add string values for additional languages.
XML created would look like

TIP:It would be of great help to the translator and developer if you put descriptive IDS like IDS_CREATBUTTON_LABEL, IDS_BASEWND_CAPTION and so on

As I said above for bigger control and flexibility you will use "third" mode and you will create the XML files yourself, without using Strings Panel at all, following the requested convention.
In Flash ResourceManager(FlexSDK) class is Locale class import fl.lang.Locale; and have handy methods.
In the constructor of your application you can set the location from where swf will load xml file for requested language designated with language code (ex. "en","mk"):



Locale.addXMLPath("mk", pathT0+"My_mk.xml");

Locale.addXMLPath("en", pathT0+"My_en.xml");

You can load different languages in runtime:

btn.addEventListener(MouseEvent.Click,onSwitchButtonClick);

private function onSwitchButtonClick(e:MouseEvent):void 

{

//initiate loading of the xml file previously added with

addXMLPath

 Locale.loadLanguageXML(languageCode,onLanguageLoad);

}





private function onLanguageLoad(success:Boolean):void

{ 

//setLanguage(languageCode:String):void function used to change language of all components of the window or group or components that need language change.

setLanguage(languageCode);

}

 

public function setLanguage(languageCode:String):void 

{

myTextField.text = Locale.loadStringEx("IDS_TEST_STRING", languageCode);

myCheckBox.label =Locale.loadStringEx("IDS_MYCHECKBOX_LABEL", languageCode);

}



In the case of localization of the components that have dataProvider like ComboBox,List,TabBar,Tree... we can use JSON library to decode:


 //in language xml file < resname="IDS_COMBOBOX_DATA">

<source>

"{'label':'Item1','data':1},{'label':'Item2','data':2},{'label':'Item3','data':3}"</source>  data has been JSON formated 
 myComboBox=new DataProvider(JSON.decode(Locale.loadStringEx("IDS_COMBOBOX_DATA"
 ,languageCode ) as Array);
 
 
 //inside you language xml file < resname="IDS_STRING_WITH_FORMATING" >

<source> "I'm %s and I've %d wifes" </source>

 > 
 StringUtil.format(Locale.loadStringEx("IDS_STRING_WITH_FORMATING", languageCode),"'"+stringVariable1+"'",intVariable2);

StringUtil is used to fill special tags %d,%s... with variables values



Source:download

MovieClipUIComponentMaterial

2008-12-10T14:26:00.000-08:00

One of stuffs that I needed and missed in papervison2.0 was lack of material that supports UIComponents. Basically I don't want to use mambo-jumbo tricks in Flash as possible. I've found the Jonh Garden blog about using UIComponents on material and problems. Problems wasn't just that UIComponents are changing size after init but constant render which affect then material bitmap. I didn' like hiding component movie in x=y=1000 and wiring evets and waiting for every tcomponet to be added on Stage. About component movie the first idea was to make upadate by using of native render() method but I've ended with set alpha=1 on the RenderTick and then alpha=0. To force to draw components I've used the well known parent-child tactics on making components UIComponent(child).drawNow(); To make ComboBox, ColorPicker and other to work on this material you need a little hack ;D. Bla bla....The source source