display api core classes
overview
general intro to ActionScript 3.0
deeper study of selected topics
from the ground up
new virtual machine, "AVM2"
ActionScript 1.0 and ActionScript 2.0: "AVM1"
AVM1 and AVM2 run simultaneously in the player
AVM2 rewritten from scratch
core language vs player API
ActionScript includes the "core language" and "player api"
ActionScript 3.0 core language: incremental evolution of ActionScript 2.0
player api: complete overhaul; stark, wide-ranging changes
core language: major changes
fully re-engineered for performance
runtime exceptions
E4X
regular expressions
core language: minor changes
warnings for missing type declarations
final
public, internal, protected, private
all classes must reside in a package
overrides must be declared
package-level variables and functions
class-level statements
constants
bound methods
int, uint, Number
* vs Object
Void now void
default parameter values
... (rest) parameter
error on argument/parameter mismatch
is replaces instanceof
for-each-in
flash player api
completely rewritten and reorganized
much more object oriented
major topics
flex
Flex Builder
Flex Framework
Flex Data Services
it's free!
free ActionScript 3.0 + Flex Framework command-line compiler
E4X
XML is a built-in datatype in ActionScript 3.0
var novel:XML = <BOOK ISBN="0141182806"> <TITLE>Ulysses</TITLE> <AUTHOR>Joyce, James</AUTHOR> <PUBLISHER>Penguin Books Ltd</PUBLISHER> </BOOK>;
novel.AUTHOR // All child elements of <BOOK> named "AUTHOR"
trace(novel.TITLE); // Displays: Ulysses
trace(novel.@ISBN); // Displays: 0141182806
novel.AUTHOR = "Hemingway, Ernest";
novel.PUBLISHER = "Scribner";
novel.@ISBN = "0684800713";
E4X: for-each-in
var order:XML = <ORDER> <ITEM SKU="209"> <NAME>Trinket</NAME> <PRICE>9.99</PRICE> <QUANTITY>3</QUANTITY> </ITEM> <ITEM SKU="513"> <NAME>Gadget</NAME> <PRICE>149.99</PRICE> <QUANTITY>1</QUANTITY> </ITEM> <ITEM SKU="374"> <NAME>Toy</NAME> <PRICE>39.99</PRICE> <QUANTITY>2</QUANTITY> </ITEM> </ORDER> // Set the initial total cost to 0. var total:Number = 0; // This loop runs once for every <ITEM> element. for each (var item:XML in order.*) { total += item.QUANTITY * item.PRICE; } trace(total);
E4X: filtering predicate
var staff:XML = <STAFF> <EMPLOYEE ID="501" HIRED="1090728000000"> <NAME>Marco Crawley</NAME> <MANAGER>James Porter</MANAGER> <SALARY>25000</SALARY> <POSITION>Designer</POSITION> </EMPLOYEE> <EMPLOYEE ID="500" HIRED="1078462800000"> <NAME>Graham Barton</NAME> <MANAGER>James Porter</MANAGER> <SALARY>35000</SALARY> <POSITION>Designer</POSITION> </EMPLOYEE> <EMPLOYEE ID="238" HIRED="1014699600000"> <NAME>James Porter</NAME> <MANAGER>Dorian Schapiro</MANAGER> <SALARY>55000</SALARY> <POSITION>Manager</POSITION> </EMPLOYEE> </STAFF> // XMLList containing all employees var allEmployees:XMLList = staff.*; // XMLList containing Marco and Graham var employeesUnderJames:XMLList = allEmployees.(MANAGER == "James Porter");
display api
divides display functionality into three tiers
display api core classes
new-based display object creation
var t:TextField = new TextField()
var mc:MovieClip = new MovieClip()
the display list
hierarchy of all objects currently on screen
hierarchy's root is the Stage instance
Stage instance is a container
Stage's first child is auto-added: .swf's main app class
display objects can exist detached from the display list
object state (properties) retained even when detached
containers and children
DisplayObjectContainer.addChild()
DisplayObjectContainer.removeChild()
DisplayObjectContainer.addChildAt()
DisplayObjectContainer.removeChildAt()
depths auto-collapse when a child is removed
vector drawing
Sprite and Shape define a Graphics object for vector drawing
var rect:Shape = new Shape(); rect.graphics.lineStyle(1); rect.graphics.beginFill(0x0000FF, 1); rect.graphics.drawRect(0, 0, 75, 50);
display api example
package { import flash.display.*; import flash.text.TextField; public class GreetingApp extends Sprite { public function GreetingApp() { // Create a rectangle var rect:Shape = new Shape(); rect.graphics.lineStyle(1); rect.graphics.beginFill(0x0000FF, 1); rect.graphics.drawRect(0, 0, 75, 50); // Create a text message var greeting_txt:TextField = new TextField(); greeting_txt.text = "Hello world"; greeting_txt.x = 60; // Add assets to the display list addChild(greeting_txt); // Depth 0 addChild(rect); // Depth 1 // Create a circle var circle:Shape = new Shape(); circle.graphics.lineStyle(1); circle.graphics.beginFill(0xFF0000, 1); circle.graphics.drawCircle(0, 0, 25); circle.x = 75; circle.y = 35; // Put the circle beneath the rectangle. addChildAt(circle, getChildIndex(rect)); } } }
Custom Display Classes
display classes can be extended
package { import flash.display.Shape; public class Rectangle extends Shape { public function Rectangle (w:Number = 100, h:Number = 100, lineThickness:Number = 1, lineColor:uint = 0x000000, fillColor:uint = 0xFFFFFF) { graphics.lineStyle(lineThickness, lineColor); graphics.beginFill(fillColor, 1); graphics.drawRect(0, 0, w, h); } } }
addChild(new Rectangle(10, 10));
Event Model: Registration
general code
someObj.addEventListener(EventName, listenerFunction)
public function listenerFunction (e:EventType):void { trace("event fired"); }
example code
var s:Sprite = new Sprite(); s.addChild(new Rectangle(25, 25)); s.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
public function mouseDownListener (e:MouseEvent):void { trace("mouse down listener triggered); // Method bound to current object (delegation built in) trace("current object is: " + this); }
Event Model: Event Flow
for display objects, 3-phase event flow:
var s:Sprite = new Sprite(); s.addChild(new Rectangle(25, 25)); s.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener); // Register parent for capture phase addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener, true); // Register parent for bubble phase addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener); addChild(s);
public function mouseDownListener (e:MouseEvent):void { trace("mouse down listener triggered"); trace(" event phase: " + e.eventPhase); trace(" current target: " + e.currentTarget + ", final target: " + e.target + "\n"); }
Event Model: Custom Events
package { import flash.events.*; public class Game extends EventDispatcher { // Event Names: all caps, underscore separated words, present tense public static const GAME_OVER:String = "GAME_OVER"; public function die ():void { dispatchEvent(new Event(Game.GAME_OVER)); } } }