After analyzing 2 most popular framework both from syntax and performance point of view – I realized that both frameworks is not good enough for me. I work mainly with games and heavy applications that requires both code writing speed and code execution speed. With that knowledge I did what any programmer usually does in such situation – started my own project! where everything will be perfect! it will be fast! it will be comfortable to work with! and sun will shine all day long!

So I started with writing requirements…

Read more…

We all know that using framework in you application will hurt performance, and Flash has long and sad history of performance problems. I decided to find out how much exactly performance using framework costs us. As in last post I focus on 2 most popular frameworks: RobotLegs and PureMVC.

Run PureMVC tests           [Source code: PureMVCSpeedTest.zip]

Then you start creating bigger applications, or start working in bigger teams – using good framework becomes essential.
I spent good amount of time with 2 currently most popular AS3 frameworks – PureMVC and RobotLegs, and here I will compare pros and cons of both.

Generally both frameworks are very similar! :


RobotLegs and PureMVC Pros:

• will help divide your code is small units and wire them;
• will help standardize your code;
• based on MVC;
• can be extended to your needs;
• makes you focus on your fun app instead of focusing on solving architecture puzzles;
• have big and active communities;

RobotLegs and PureMVC Cons:

• hurts performance a bit;
• harder to debug “black box” framework code;
• couples implementation with framework;

…but RobotLegs: Read more…

I work with PureMVC - very popular and flexible framework .

Another tool that lets you enhance your work is FlashDevelop, it’s free, it has amazing templates and snippets to speed your work.

Now imagine what happens then those 2 meet each other. MAGIC HAPPENS!

There are couple of things that makes writing PureMVC not fun. That is:

• Creating proxies, mediators and commands. They must be written as framework demands it.
• Getting your mediators and proxies also annoys. It’s lot of typing – all this getting and casting…

Luckily with FlashDevelop file templates and snippets you totally remove the hassle of doing those not fun things in PureMVC!

Class templates: DerilsPureMvcTemplates.zip

this has to be unzipped to :  your “Application files” folder  - …\Templates\ProjectFiles

I will explain couple of things. That is special to my ‘style’ of using PureMVC.

• I name ‘notice’ for notification object. I use class “Note”,”ViewNote”, “DataNote” as constant holders. I wanted to separate those for quicker typing/code hinting. Just rename it in mediators and commands if you use something else.
• There are 2 variations of mediator and 2 variations of proxy, one with data/viewComponents sent to super class, and one that just keeps it locally. I rarely set it to super class, but sometimes it’s needed.
• I don’t bother casting data or viewComponent to it’s data type, and never will, I store them locally with needed type. Cast object every time you need to use it is a total nonsense, the only danger is setting different object for custom and super classes, but that’s easily fixed ovverideng setData/setVeiwComponent functions. What I did in templates.
• Code style: brackets on the line, package is not intended.

Snippets:

Get proxy(I named it “!retrieveProxy”):

var $(EntryPoint)$(CurWord):$(CurWord) = facade.retrieveProxy($(CurWord).NAME) as $(CurWord);

Get mediator(I named it “!retrieveMediator”):

var $(EntryPoint)$(CurWord):$(CurWord) = facade.retrieveMediator($(CurWord).NAME) as $(CurWord);

Usage scenario:

• ctrl+alt+ space to get class hinting
• write and pick class (mediator or proxy)
• use one or another snippet (I use keyboard shortcuts through macros)
• press delete to delete first letter.
• write deleted letter in lower case.

I create macro to use those snippets and map them on CTRL+ALT+1 and CTRL+ALT+2;

They look like this:

InsertSnippet|!retrieveProxy
InsertSnippet|!retrieveMediator

: initialize note constant quickly.
Depricated. I was using snippet to generate constants quicker:

$(CurWord):String = “$(CurWord)”

but lates FlashDevelop 4.0.0 RC1 does it automaticaly now.

Have fun.

So I needed global KeyboardEvent handling in AS3 project, but ran into problem – stage losses focus in couple of scenarios..

The fact that flash has no global object that never loses focus just SUCK!!!

I found in documentation that in Flex you can put your event on application object and solve this problem, but because I hate Flex – I can’t be bothered.

So possible solution I found all over the internet is force focus back to stage:

stage.focus = stage;


But this method creates another problem if you actually need focus on something not stage.(like text input fields).

My approach makes KeyboardEvent listeners travel with focus, from object to object that gets it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

package {
import flash.display.InteractiveObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.KeyboardEvent;
 
public class KeyBoardFocusMain extends Sprite {
 
	private var focusObject:InteractiveObject;
 
	public function Main():void {
		setFocusObject(this.stage);
	}
 
	private function setFocusObject(newFocusObject:InteractiveObject):void {
		if (focusObject){
			focusObject.removeEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
			focusObject.removeEventListener(KeyboardEvent.KEY_UP, handleKeyUp);
			focusObject.removeEventListener(FocusEvent.FOCUS_OUT, handleFocusChange);
		}
		focusObject = newFocusObject;
		//
		focusObject.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
		focusObject.addEventListener(KeyboardEvent.KEY_UP, handleKeyUp);
		focusObject.addEventListener(FocusEvent.FOCUS_OUT, handleFocusChange);
	}
 
	private function handleFocusChange(event:Event = null):void {
		if (focusObject != stage.focus){
			if (stage.focus != null){
				setFocusObject(stage.focus);
			} else {
				setFocusObject(stage);
			}
 
		}
	}
 
	private function handleKeyUp(event:KeyboardEvent):void {
		trace("handleKeyUp:", event);
		switch (event.keyCode){
			//...
			default: 
				break;
		}
	}
 
	private function handleKeyDown(event:KeyboardEvent):void {
		trace("handleKeyDown:", event);
		switch (event.keyCode){
			//...
			default: 
				break;
		}
	}
 
}
}

Hope it helps, have fun.

I want to post series of articles about tool I am building during free time.

All started then I got this insane idea of building GUI library, for creating GUI in applications more fluently and conversant then FLEX. (there is so much things I hate about FLEX…)
I needed a asset library to handle my assets easily. I starter with something simple, but ended up having a lot of features I initially didn’t planed.

Read all features here : http://code.google.com/p/msa-lib/

I will write couple of posts about this library, and transform them to documentation.

If it’s something that interests you, grab code in http://msa-lib.googlecode.com/svn/trunk/ and lets get started.

Then you build application, you almost always have some sort of assets: texts, images, sounds, binary files for 3d and so on.

I am dividing those assets in 3 category:

• Internaly embedded assets.
• External permanent asset. (it’s loaded once, usually in the beginning, and then never removed from memory. )
• External temporal asset. (it’s loaded then needed, and unloaded then not needed any-more.)

Then you deal with internally embedded assets, there is not much to do with them, you just use it then you need it. With external assets its a bit trickier, that’s there AssetLibrary comes in.

Lets just start with most simple example possible:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

package examples {
import com.mindscriptact.assetLibrary.AssetLibrary;
import com.mindscriptact.assetLibrary.AssetLibraryIndex;
import flash.display.Sprite;
 
public class MinimalLoad extends Sprite {
 
	public function MinimalLoad(){
 
		// add assets to library.
		var assetIndex:AssetLibraryIndex = AssetLibrary.getIndex();
		assetIndex.addFileDefinition("test1", "assets/simpleTest/test1.swf");
 
		// load asset and send it to function.
		AssetLibrary.sendAssetToFunction("test1", handleTest1);
	}
 
	private function handleTest1(asset:SWFAsset):void {
		// get instance of object linked in asset library.
		var testSprite:Sprite = asset.getSprite("SquareA_SPR");
		this.addChild(testSprite);
		testSprite.x = 100;
		testSprite.y = 100;
	}
 
}
}

 
To use external assets you need to define them first. AssetLibraryIndex class is created for that.
To get it’s instance you need to call AssetLibrary.getIndex() function. In most cases you will be defining you assets once, and then application starts. After assets are defined you most likely will never use this class again. AssetLibraryIndex class lets you define folders, groups, add file definitions from xml file, and add single file definitions, lets start with those.

Every file definition in AssetLibrary needs an Id. This id is used to work with asset instead of all it’s de-tales like url, asset type, how it’s loaded and such. Most simple asset has id and url. To add asset we use assetIndex.addFileDefinition(); function.

Now then asset is defined we can start using it. We tell AssetLibrary to load it and send asset as parameter to function. We use AssetLibrary.sendAssetToFunction() for that. This function expects assedId and function to send asset to.

Then we write asset handling function we must remember, that same as event handling function gets an event object as parameter, asset handler gets asset as parameter. Because we are using swf asset, we will get SWFAsset class object. This object can be used to get any instance of symbol in assets library. We need to know the type of linked object and its ActionScript linkage class.

Next time I explain how permanent and temporal assets differ, and how to track loading progress with this tool.

Now and then I have a need to quickly add simple shape to my visual object. In most cases for fast and rough debugging. Sometimes for prototyping application if I still don’t have visuals, and sometimes… well I need a shape!

Here are couple of snippets to add quick shape to your DisplayObject.

#shape-rectangle

var $$(shapeVar=rectangle):Shape = new Shape();
$$(shapeVar).graphics.lineStyle($$(lineThickness=0.1,1,2,3,4,5,10), $$(lineColor=0xFF0000,0×000000,0x00FF00,0x0000FF,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.beginFill($$(fillColor=0x0000FF,0×000000,0xFF0000,0x00FF00,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.drawRect($$(x=0), $$(y=0), $$(width=100), $$(height=100));
$$(shapeVar).graphics.endFill();
this.addChild($$(shapeVar));

#shape-roundRectangle

var $$(shapeVar=roundRectangle):Shape = new Shape();
$$(shapeVar).graphics.lineStyle($$(lineThickness=0.1,1,2,3,4,5,10), $$(lineColor=0xFF0000,0×000000,0x00FF00,0x0000FF,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.beginFill($$(fillColor=0x0000FF,0×000000,0xFF0000,0x00FF00,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.drawRoundRect($$(x=0), $$(y=0), $$(width=100), $$(height=100), $$(ellipseWidth=20));
$$(shapeVar).graphics.endFill();
this.addChild($$(shapeVar));

#shape-circle

var $$(shapeVar=circle):Shape = new Shape();
$$(shapeVar).graphics.lineStyle($$(lineThickness=0.1,1,2,3,4,5,10), $$(lineColor=0xFF0000,0×000000,0x00FF00,0x0000FF,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.beginFill($$(fillColor=0x0000FF,0×000000,0xFF0000,0x00FF00,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.drawCircle($$(x=0), $$(y=0), $$(radius=100));
$$(shapeVar).graphics.endFill();
this.addChild($$(shapeVar));

#shape-ellipse

var $$(shapeVar=ellipse):Shape = new Shape();
$$(shapeVar).graphics.lineStyle($$(lineThickness=0.1,1,2,3,4,5,10), $$(lineColor=0xFF0000,0×000000,0x00FF00,0x0000FF,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.beginFill($$(fillColor=0x0000FF,0×000000,0xFF0000,0x00FF00,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.drawEllipse($$(x=0), $$(y=0), $$(width=100), $$(height=80));
$$(shapeVar).graphics.endFill();
this.addChild($$(shapeVar));

#shape-path

This one is hard to modify and use just by editing snippet parameters, but for quick lines or not standard shape it’s nice starting point as example.

var $$(shapeVar=path):Shape = new Shape();
$$(shapeVar).graphics.lineStyle($$(lineThickness=0.1,1,2,3,4,5,10), $$(lineColor=0xFF0000,0x000000,0x00FF00,0x0000FF,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.beginFill($$(fillColor=0x0000FF,0x000000,0xFF0000,0x00FF00,0xFFFF00,0xFF00FF,0x00FFFF,0xFFFFFF));
$$(shapeVar).graphics.drawPath(
new <int>[
$$(command1=GraphicsPathCommand.MOVE_TO,GraphicsPathCommand.LINE_TO,GraphicsPathCommand.CURVE_TO),
$$(command2=GraphicsPathCommand.LINE_TO,GraphicsPathCommand.MOVE_TO,GraphicsPathCommand.CURVE_TO),
$$(command3=GraphicsPathCommand.LINE_TO,GraphicsPathCommand.MOVE_TO,GraphicsPathCommand.CURVE_TO),
$$(command4=GraphicsPathCommand.CURVE_TO,GraphicsPathCommand.LINE_TO,GraphicsPathCommand.MOVE_TO),
$$(command5=GraphicsPathCommand.LINE_TO,GraphicsPathCommand.MOVE_TO,GraphicsPathCommand.CURVE_TO)
],
new <Number>[
$$(point1x=50), $$(point1y=0),
$$(point2x=100), $$(point2y=50),
$$(point3x=80), $$(point3y=150),
$$(point4x=50), $$(point4y=0), $$(point5x=20), $$(point5y=150),
$$(point6x=0), $$(point6y=50)
]);
$$(shapeVar).graphics.endFill();
this.addChild($$(shapeVar));

Because FlashDevelop is updating so fast, and becoming so good… my 5 of 6 most used snippets are deprecated. I am talking about my #privatVar, #publicVar, #privatFunction, #publicFunction and #functionVarPass snippets.

They now can be easely and much better generated just by using CTRL+SHIFT+1.(except the fact that they can’t detect int type, just Number type… but thats little discomfort in overall goodness.)

So I present you couple of my general purpose snippets. (I don’t set shortcuts to them.)

#getURL

navigateToURL(new URLRequest(“$$(url=http://www.google.com/)”), “_blank”);

#getHtmlVars

var htmlVars:Object = LoaderInfo(this.root.loaderInfo).parameters;

#paragrafSmall

//———————————-

//     $$(paragrafTitle)$(EntryPoint)

//———————————-

#paragrafBig

//————————————————————————–

//

//      $$(paragrafTitle=Time for class splitting?)$(EntryPoint)

//

//————————————————————————–

#stageSetup

this.stage.quality = $$(quality=StageQuality.BEST,StageQuality.HIGH,StageQuality.MEDIUM,StageQuality.LOW);
this.stage.scaleMode = $$(scaleMode=StageScaleMode.NO_SCALE,StageScaleMode.SHOW_ALL);
this.stage.align = StageAlign.TOP_LEFT;
this.stage.frameRate = $$(frameRate=25,60,30,20,12);

One of my most used snippet is – instantiate.

To bind snippets to key-preses I use Macros.

Instantiating a class snippet could be simple one liner, if not for Vector data type. Vector has very unique format, and it requires special attention then instantiating. (I don’t use Array type anymore, so it’s very important for me to cover this case.)

I will present two different ways to instantiate stuff quickly.

1 – my old way of instantiating stuff

We need to create 2 snippets, I named them #instantiateLast and #instantiateSelected.

#instantiateLast :

$(CurWord) = new $(CurWord)($(EntryPoint));

#instantiateSelected :

$(SelText) = new $(SelText)($(EntryPoint));

Now in MENU >> Macros >> Edit Macros… we create 2 new macros :

instantiateLastWord [CTRL+ALT+1] :

InsertSnippet|#instantiateLast

instantiateSelected [SHIFT + CTRL+ALT+1] :

InsertSnippet|#instantiateSelected

(don’t forget to restart FD for shortcuts to start working.)

Use instantiateLastWord with non Vector classes keeping cursor over Class name, and then dealing with Vector – select the whole thing and use instantiateSelected.

2 – my current way of instantiating stuff

This method requires some instructions to use properly, but you will need only one macro for both Vector’s and non Vectors, and then you deal with Vector you will have to select less.

We will reuse #instantiateSelected snippet described above, and will create this macro for it:

instantiateSelectLast [CTRL+ALT+1]:

ScintillaCommand|WordLeftEndExtend

InsertSnippet|#instantiateSelected

You will have same functionality as before with non Vector classes, just use the macro keeping the cursor in the end of class name. With Vector is a bit tricky, you have to select everything except ”Vector”, and keep cursor in the end of this word. Best way to do it – back select to this point.

Have fun with this snippets.

Here is a list of plugins that I daily use, and couple nice little helpers.

Very important plugins :

FDFlexFormatter

Don’t be misguider by low version number of this plugin. It’s best formatter plugin for FD . And I would even say it’s lacking very little to be perfect ActionScript formatter!

trace() generator

Automatically generates trace on variables and functions. Hopefully FD debugger will be stable soon and I will be able to stop using this plugin.

Duplicate

My biggest problem with this plugin was that I kept forgetting to actually use it.. but then you train yourself to use it, you save some time of pointless typing. It lets you make duplication of the code with slight change, like change x to y, addEventListener to removeEventListener, increase index number for vector or variable name. It also lets you switch those variables without duplication. for instance you might want to quickly switch private variable to protected.

SelectionUtils

This plugin is needed for ALT+down, ALT+up code block move functionality, that surpassingly missing in default FD release. Sadly this plugin has a bug. I hope it will be fixed soon. Or I will have to move to another plugin.

HighlightSelection

Highlights your selection. It makes it much easer to scan what variable, or function is doing.

Nice to have plugins :

MultiGenerator

Nice little plugin for generating lot of set, get functions. Or make constructor with lot of fields.

OpenTheDoc 2.2 & TocGen 1.0

Using this plugin you can locally store documentation files for quick access. I had once: AS3 code reference, Away 3d, alternativa 3d and… TweenMax documentations. But technology moves so fast that I fail to update them fast enough… and just start using online versions.

SourceCodeStatistics

Nice plugin to check how little comments and how much code lines you have written.

Sometimes useful :

TraceUtil plugin

Little tool to remove traces from your code.

AIR Application Properties

Helps with AIR application properties.

Ant panel

For running ant scripts easily.

Want more plugins ?

You can find more plugins in 3d Party Plugins FD page.

Or in the forum.