display list

combining authoring assets with code

the display list

the hierarchy of all graphical objects currently displayed by the Flash runtime

loosely: the "stuff (movie clips, text fields) on screen"

the DisplayObject class

what can go on the display list?

  • anything that descends from DisplayObject
  • DisplayObject defines a core set of graphics features

  • position
  • rotation
  • scale
  • hit testing
  • filters, transforms, masks
  • DisplayObject's descendants

    InteractiveObject: adds mouse/keyboard functionality

    DisplayObjectContainer: adds containment for grouping

    Sprite: adds dragability, button-style interaction features

    MovieClip: adds timeline control

    the Stage class

    the outermost container for all graphical content

    root of the display list

    control over the global characteristics of the display area

  • quality, scaleMode, frameRate
  • display list for an empty flash runtime

    at startup, flash runtime auto-creates Stage instance

    auto-adds Stage instance to display list

    a .swf file's main class

    every .swf has a main class that must inherit from either Sprite or MovieClip

    when an empty runtime loads a .swf, it:

  • creates an instance of .swf's main class
  • adds that instance to the display list as the Stage instance's first child
  • example main class instance

    GreetingApp.swf, whose main class is GreetingApp

    specifying the main class

    different for each .swf creation tool

    in Flash CS3, main class is called "document class"

    document class represents main timeline

    to specify document class, use Properties panel's "Document class" field

    document class requirements:

  • must be in the class path
  • normally is a MovieClip descendant
  • GreetingApp Example

    create GreetingApp.fla

    create GreetingApp class

    package { import flash.display.MovieClip; public class GreetingApp extends MovieClip{ public function GreetingApp () { trace("Hello"); } } }

    specify GreetingApp as Document class

    add new content to display list

    new children of GreetingApp instance

  • a Shape instance, rectAndCircle
  • a TextField instance, greeting_txt
  • rectAndCircle

    import the Shape class

    import flash.display.Shape;

    then add the following code to GreetingApp constructor:

    // Create the Shape object var rectAndCircle:Shape = new Shape(); // Set line thickness to one pixel rectAndCircle.graphics.lineStyle(1); // Draw a blue rectangle rectAndCircle.graphics.beginFill(0x0000FF, 1); rectAndCircle.graphics.drawRect(125, 0, 150, 75); // Draw a red circle rectAndCircle.graphics.beginFill(0xFF0000, 1); rectAndCircle.graphics.drawCircle(50, 100, 50); // Move the shape to the right 125 pixels and down 100 pixels rectAndCircle.x = 125; rectAndCircle.y = 100;


    import the TextField class

    import flash.text.TextField;

    then add the following code to GreetingApp constructor:

    // Create a TextField object to contain some text var greeting_txt:TextField = new TextField(); // Specify the text to display greeting_txt.text = "Hello world"; // Position the text greeting_txt.x = 200; greeting_txt.y = 300;

    add rectAndCircle and greeting_txt to display list

    add the following code to GreetingApp constructor:

    addChild(rectAndCircle); addChild(greeting_txt);

    current display list contents

    timeline control

    code in GreetingApp can control timeline

  • and some frames to GreetingApp.fla
  • then add the following code to GreetingApp constructor:
  • gotoAndStop(5);

    main timeline variables

    main timeline variable declarations create document class instance variables

    main timeline variables available before declaration

  • (but have default values)
  • example main timeline variable

    create keyframe at frame 10 of GreetingApp.fla

    add the following code to frame 10's frame script:

    var msg:String = "Welcome";

    add the following code to GreetingApp constructor:

    trace(msg); // Displays: null (default value)

    add the following code to GreetingApp constructor:

    trace(price); // Error: no such variable

    prove the instance variable msg exists

    import describeType()

    import flash.utils.describeType;

    then add the following code to GreetingApp constructor:


    main timeline functions

    main timeline function declarations create document class instance methods

    main timeline functions available before declaration

    example main timeline function

    add the following code to frame 10's frame script:

    function halfHeight ():void { height = height/2; }

    add the following code to GreetingApp constructor:


    frame scripts are instace methods

    each main timeline frame script creates a document class instance method

    named frame1, frame2, frame3 (starts at 1 not 0)

    player uses addFrameScript() to register frame methods to execute

    undocumented, but developers can also use addFrameScript()

    // Invoke doSomething when playhead reaches frame 1 // (Replaces any existing script on frame 1) addFrameScript(0, doSomething)

    // Remove frame 1's script addFrameScript(0, null)

    instance methods called from frame scripts

    document class instance methods can be invoked directly from main timeline scripts

    add the following method to GreetingApp:

    public function halfWidth ():void { width = width/2; }

    create keyframe at frame 5 of GreetingApp.fla

    add the following code to frame 5's frame script:


    accessing stage instances

    main timeline stage instances become display children of the document class instance

    make a star symbol

    make a new main timeline layer

    place 3 stars on the new layer

    add the following code to GreetingApp constructor:

    for (var i:int=0; i < numChildren; i++) { trace("Found child: " + getChildAt(i)); }

    align all instances at y-coordinate 0:

    for (var i:int=0; i < numChildren; i++) { getChildAt(i).y = 0; }

    accessing named stage instances

    instances with names can be accessed via getChildByName()

    name the star instances star1, star2, star3

    add the following code to GreetingApp constructor:

    getChildByName("star1").width = 600;

    matching variables for named stage instances

    flash compiler auto-assigns stage instances to matching instance variables

    for example, the compiler inserts this in GreetingApp's constructor:

    star1 = getChildByName("star1"); star2 = getChildByName("star2"); star3 = getChildByName("star3");

    but GreetingApp does not declare star1, star2, star3 variables

    by default, flash compiler does it automatically

    for example, the compiler inserts this in GreetingApp class:

    public var star1:Star; public var star2:DisplayObject; public var star3:Star;

    thus, stage instances can be controlled from GreetingApp:

    star2.height = 600;

    disabling stage instance auto-declaration

    to prevent automatic variable declaration for stage instances:

  • Open File > Publish Settings > Flash > ActionScript Version > Settings
  • Under Stage, uncheck "Automatically declare stage instances"
  • when declare stage instances is disabled, programmer must declare variables manually

    for example, insert this in GreetingApp class:

    public var star1:MovieClip; public var star2:MovieClip; public var star3:MovieClip;

    explicit declarations:

  • make the variables more obvious in the class that uses them
  • prevent compiler errors when editing the class in other tools (such as Flex Builder 2)
  • linking classes to movie clip symbols

    the document class represents the main timline

    likewise, linked classes represent indiidual movie clip symbols

    to set the linked class for a movie clip symbol:

  • Select the symbol in the .fla file's Library
  • Select the pop-up Options menu in the top-right corner of the Library panel, and choose the Linkage option
  • In the Linkage Properties dialog box, for Linkage, select Export for ActionScript
  • In the Linkage Properties dialog box, for Class, enter the fully qualified class name
  • Always leave the "Base class" field at its default value, except when linking more than one symbol to a single superclass
  • if the specified class is not found, flash generates a linked class by the specified name

  • the automatically generated class extends the specified base class
  • linked class example

    link the star symbol to this class:

    package { import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent; public class Star extends MovieClip { private var timer:Timer; public function Star () { timer = new Timer(100, 0); timer.addEventListener(TimerEvent.TIMER, timerListener); timer.start(); } private function timerListener (e:TimerEvent):void { randomFade(); } private function randomFade ():void { // Set alpha to a random floating-point value from 0 up to (but // not including) 1. The instance variable alpha is inherited from // the DisplayObject class (which is ancestor of MovieClip). alpha = Math.random(); } // Provide a means of stopping the timer. As discussed in section // "Deactivating Objects" in Chapter 14, // external code should use this method before removing a star instance // from the program. public function dispose ():void { timer.stop(); } } }

    linked class example dialog

    programmatically creating instances of a symbol

    use standard "new" syntax to create object:

    var star:Star = new Star();

    then add the object to the display list:


    example: add the following code to the GreetingApp constructor:

    var star:Star; for (var i:int=0; i < 30; i++) { star = new Star(); star.x = Math.floor(Math.random()*550); star.y = Math.floor(Math.random()*400); addChild(star); }

    auto-assigned document class

    if no document class specified, one is assigned automatically

    autoassigned class is either:

  • MovieClip
  • an auto-created MovieClip subclass
  • bonus round

    linking multiple symbols to a single superclass

    create superclass

    under linkage for each symbol:

  • specify superclass as base class
  • specify arbitrary class name under "Class"