ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Write less and do more
Target Audience
              Hint

Presenting on the
second day ¡°The
Design Day¡±
The Title
Description
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


                     3
language
E4X - Which makes
xml handling less
verbose than ever
before
What we lost in the process?


 Simplicity



                     3
 Ease of use
 Ease of learning
How to deal with the
Verboseness?
 Accept it as a fact of
 life and ?nd 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                      Author: Josh Tynjala
                                       Twitter: @joshtynjala



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
SimpleAS3                                    Author: Josh Tynjala
                                                           Twitter: @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 Tynjala
                                                    Twitter: @joshtynjala




    // ActionScript 3 with SimpleAS3

    var loader=this.loadChild("images/button.png");

    loader.onClick(function(){
    	 getURL("http://www.example.com/", "_self");
    });
Short                              Author: Arul Kumaran
                                               Twitter: @Luracast


Short 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
Short                               Author: Arul Kumaran
                                                       Twitter: @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                                 Author: Ted Patrick
                                              Twitter: @__ted__



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
//FDOT Usage
//Load.text( url:String , callback:Function , params:Object=null );

//text
//load text via post using this.load method as callback
Load.text('test.txt', load, {method: 'post', data: {a: 1}});

//json
Load.json('test.json', load, {method: 'post', data: {a: 1}});

//xml
Load.xml('test.xml', load, {method: 'post', data: {a: 1}});

//see a trend yet?

//querystring
Load.querystring('test.qs', load, {method: 'post', data: {a: 1}});

//image
Load.image('test.png', load, {method: 'post', data: {a: 1}});

//swf
Load.swf('test.swf', load, {method: 'post', data: {a: 1}});
Usage Modeling - Usage Example


   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 - Generated Class
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
	 	 }
	 }
}
as3Query                             Author: Nitoyon
                                          Twitter: @nitoyon


Inspired 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
as3Query                                        Author: Nitoyon
                                                           Twitter: @nitoyon



   //as3Query

   // add enterFrame event handler
   $(stage).enterFrame(function(event:Event):void {

   $("RoundRect").attr("color", function(...args):uint {
   	 	 	 	 return Math.random() * 0xffffff;
   	 	 });
   	 });
   }
About Me
Pro?le: http://bit.ly/_arul
Twitter: @_arul
Luracast
  Flexplorer
  ThumbSUB
  Restler

More Related Content

Less Verbose ActionScript 3.0 - Write less and do more!

  • 1. Write less and do more
  • 2. Target Audience Hint Presenting on the second day ¡°The Design Day¡± The Title Description
  • 3. Designers Simple solution for your everyday actionscript needs Write less and do more
  • 4. And also Developers How do they work? Behind the scenes How you can contribute Write less and do more
  • 6. What we gained? Speed Performance Consistency in the 3 language E4X - Which makes xml handling less verbose than ever before
  • 7. What we lost in the process? Simplicity 3 Ease of use Ease of learning
  • 8. How to deal with the Verboseness? Accept it as a fact of life and ?nd ways to live with it Keep asking Adobe Work on some solutions ourself
  • 9. Living with it Use better Editor that writes code for you Adobe Flash Builder 4 Flash Develop (Windows Only) FDT IntelliJ IDEA
  • 10. Working on the Solution Needs inspiration ActionScript 1.0 JavaScript
  • 11. Few Solutions ? SimpleAS3 ? Short ? FDOT ? as3Query
  • 12. SimpleAS3 Author: Josh Tynjala Twitter: @joshtynjala 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
  • 13. SimpleAS3 Author: Josh Tynjala Twitter: @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" ); }
  • 14. SimpleAS3 Author: Josh Tynjala Twitter: @joshtynjala // ActionScript 3 with SimpleAS3 var loader=this.loadChild("images/button.png"); loader.onClick(function(){ getURL("http://www.example.com/", "_self"); });
  • 15. Short Author: Arul Kumaran Twitter: @Luracast Short 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
  • 16. Short Author: Arul Kumaran Twitter: @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'); }
  • 17. FDOT Author: Ted Patrick Twitter: @__ted__ 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
  • 18. //FDOT Usage //Load.text( url:String , callback:Function , params:Object=null ); //text //load text via post using this.load method as callback Load.text('test.txt', load, {method: 'post', data: {a: 1}}); //json Load.json('test.json', load, {method: 'post', data: {a: 1}}); //xml Load.xml('test.xml', load, {method: 'post', data: {a: 1}}); //see a trend yet? //querystring Load.querystring('test.qs', load, {method: 'post', data: {a: 1}}); //image Load.image('test.png', load, {method: 'post', data: {a: 1}}); //swf Load.swf('test.swf', load, {method: 'post', data: {a: 1}});
  • 19. Usage Modeling - Usage Example 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();
  • 20. Usage Modeling - Generated Class 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 } } }
  • 21. as3Query Author: Nitoyon Twitter: @nitoyon Inspired 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
  • 22. as3Query Author: Nitoyon Twitter: @nitoyon //as3Query // add enterFrame event handler $(stage).enterFrame(function(event:Event):void { $("RoundRect").attr("color", function(...args):uint { return Math.random() * 0xffffff; }); }); }
  • 23. About Me Pro?le: http://bit.ly/_arul Twitter: @_arul Luracast Flexplorer ThumbSUB Restler