overview

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;

greeting_txt

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:

trace(describeType(this));

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:

halfHeight()

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:

halfWidth()

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:

someContainer.addChild(star)

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"