less verbose actionscript 3.0 - write less and do more!
DESCRIPTION
While we all like AS3 for consistency, better performance and OOP, many of us hate it for its verbose nature. If you share this view, then you will find this session helpful in your day-to-day development tasks, be it an agency interactive or a complex application. There are micro frameworks like SimpleAS3, as3Query (ported from jQuery) and Short that attempt to reduce the verboseness of the language. This session will explore such frameworks and other tips and tricks to simplify the language for us.TRANSCRIPT
Write less and do more
Target Audience
Presenting on the second day “The Design Day”
The Title
Description
Hint
Designers
Simple solution for your everyday actionscript needs
Write less and do more
And also Developers
How do they work?
Behind the scenes
How you can contribute
Write less and do more
Brief History of Flash
What we gained?
Speed
Performance
Consistency in the language
E4X - Which makes xml handling less verbose than ever before
3
What we lost in the process?
Simplicity
Ease of use
Ease of learning 3
How to deal with the Verboseness?
Accept it as a fact of life and find ways to live with it
Keep asking Adobe
Work on some solutions ourself
Living with it
Use better Editor that writes code for you
Adobe Flash Builder 4
Flash Develop (Windows Only)
FDT
IntelliJ IDEA
Working on the Solution
Needs inspiration
ActionScript 1.0
JavaScript
Few Solutions
• SimpleAS3
• Short
• FDOT
• as3Query
SimpleAS3
Inspired by ActionScript 1.0
Works with Flash IDE (only)
Brings back onClick style event handling
Has many helper methods
Injects itself through Document Class
Uses JSFL to setup a project
Author: Josh TynjalaTwitter: @joshtynjala
SimpleAS3 Author: Josh TynjalaTwitter: @joshtynjala
// ActionScript 3 Before SimpleAS3
var imageLoader:Loader = new Loader();this.addChild( imageLoader );
var request:URLRequest = new URLRequest("images/button.png");imageLoader.load( request );
loader.addEventListener( MouseEvent.CLICK, imageClickHandler );function imageClickHandler( event:MouseEvent ):void{ var request:URLRequest = new URLRequest("http://www.example.com/"); navigateToURL( request, "_self" );}
SimpleAS3 Author: Josh TynjalaTwitter: @joshtynjala
// ActionScript 3 with SimpleAS3
var loader=this.loadChild("images/button.png");
loader.onClick(function(){ getURL("http://www.example.com/", "_self");});
ShortShort syntax for long statements
Inspired by SimpleAS3
Will be released a week after Adobe Flash Platform Summit :)
Does almost the same thing as SimpleAS3. But
It is lightweight
It also works with Flex SDK, thus any IDE
No need to turn off strict mode, no JSFL Needed
Distributed as .SWC
Author: Arul KumaranTwitter: @Luracast
Short Author: Arul KumaranTwitter: @Luracast
// Short Usage
_.to=this;_.onEnterFrame=function():void{ trace('enter frame once manually'); delete _.onEnterFrame;}_.stage.onceMouseMove=function():void{ trace('listen to mouse move only once');}_.onMouseClick=function(e:MouseEvent):void{ trace('listen to mouse click and get the event object');}
FDOT
a collection of ActionScript 3 classes that make hard things easier.
f.net.Load - Load text to binary with one method call and one callback.
f.net.Message - Simple callback messaging for classes.
f.data.ObjectStore - Simple object database for storing anything
Author: Ted PatrickTwitter: @__ted__
//FDOT Usage//Load.text( url:String , callback:Function , params:Object=null );
//text//load text via post using this.load method as callbackLoad.text('test.txt', load, {method: 'post', data: {a: 1}});
//jsonLoad.json('test.json', load, {method: 'post', data: {a: 1}});
//xmlLoad.xml('test.xml', load, {method: 'post', data: {a: 1}});
//see a trend yet?
//querystringLoad.querystring('test.qs', load, {method: 'post', data: {a: 1}});
//imageLoad.image('test.png', load, {method: 'post', data: {a: 1}});
//swfLoad.swf('test.swf', load, {method: 'post', data: {a: 1}});
var foo:*=new UsageModel('f.model.Sample', 'f.model.Parent', 3, "abc", {});foo.data={};foo.loader={};foo.percent=0.75;foo.bytesLoaded=[];foo.bytesTotal=56;foo.bytesAvailable=56;foo.PROGRESS='f.events.LoadEvent.PROGRESS';foo.error='woops';foo.status='status 23';foo.foo(1, 2, 3);foo.addEventListener("myEvent", function():void{});UsageModel.print();
Usage Modeling - Usage Example
package f.model{ import f.model.Parent; [Event(name="myEvent", type="flash.events.Event")] public class Sample extends Parent { public static const PROGRESS:String = "f.events.LoadEvent.PROGRESS"; public var bytesAvailable:int = 56; public var bytesLoaded:Array = []; public var bytesTotal:int = 56; public var data:Object = {}; public var error:String = "woops"; public var loader:Object = {}; public var percent:Number = 0.75; public var status:String = "status 23"; public function Sample(param1:int=3, param2:String="abc", param3:Object=null){ //TODO: implement method } public function foo(param1:int=1, param2:int=2, param3:int=3):void{ //TODO: implement method } }}
Usage Modeling - Generated Class
as3QueryInspired by jQuery.
Ported from jQuery 1.2.1
Brings lambda chain decorating to AS3
Supports CSS Selectors
Supports creating instance, and setting its properties in one line
Enables simple Event Listeners
Has addTween method to play with Tweener library
Author: NitoyonTwitter: @nitoyon
as3Query Author: NitoyonTwitter: @nitoyon
//as3Query
// add enterFrame event handler$(stage).enterFrame(function(event:Event):void {
$("RoundRect").attr("color", function(...args):uint { return Math.random() * 0xffffff; }); });}
About Me
Profile: http://bit.ly/_arul
Twitter: @_arul
Luracast
Flexplorer
ThumbSUB
Restler