less verbose actionscript 3.0 - write less and do more!

23
Write less and do more

Upload: arul-kumaran

Post on 22-Apr-2015

3.440 views

Category:

Technology


0 download

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

Page 1: Less Verbose ActionScript 3.0 - Write less and do more!

Write less and do more

Page 2: Less Verbose ActionScript 3.0 - Write less and do more!

Target Audience

Presenting on the second day “The Design Day”

The Title

Description

Hint

Page 3: Less Verbose ActionScript 3.0 - Write less and do more!

Designers

Simple solution for your everyday actionscript needs

Write less and do more

Page 4: Less Verbose ActionScript 3.0 - Write less and do more!

And also Developers

How do they work?

Behind the scenes

How you can contribute

Write less and do more

Page 5: Less Verbose ActionScript 3.0 - Write less and do more!

Brief History of Flash

Page 6: Less Verbose ActionScript 3.0 - Write less and do more!

What we gained?

Speed

Performance

Consistency in the language

E4X - Which makes xml handling less verbose than ever before

3

Page 7: Less Verbose ActionScript 3.0 - Write less and do more!

What we lost in the process?

Simplicity

Ease of use

Ease of learning 3

Page 8: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 9: Less Verbose ActionScript 3.0 - Write less and do more!

Living with it

Use better Editor that writes code for you

Adobe Flash Builder 4

Flash Develop (Windows Only)

FDT

IntelliJ IDEA

Page 10: Less Verbose ActionScript 3.0 - Write less and do more!

Working on the Solution

Needs inspiration

ActionScript 1.0

JavaScript

Page 11: Less Verbose ActionScript 3.0 - Write less and do more!

Few Solutions

• SimpleAS3

• Short

• FDOT

• as3Query

Page 12: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 13: Less Verbose ActionScript 3.0 - Write less and do more!

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" );}

Page 14: Less Verbose ActionScript 3.0 - Write less and do more!

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");});

Page 15: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 16: Less Verbose ActionScript 3.0 - Write less and do more!

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');}

Page 17: Less Verbose ActionScript 3.0 - Write less and do more!

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__

Page 18: Less Verbose ActionScript 3.0 - Write less and do more!

//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}});

Page 19: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 20: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 21: Less Verbose ActionScript 3.0 - Write less and do more!

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

Page 22: Less Verbose ActionScript 3.0 - Write less and do more!

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; }); });}