Flash Sharing Lesson 2Flash Development Guide

By Stanley Fok

We will talk about…

Flash Development Environment Setup

Flash Programming Model

OOP in Flash

Flash Programming Best Practice

Flash Development Environment Setup

FlashDevelop

A famous open source ActionScript Editor

Useful Features Include: › Code hints› Code completion› Code generation› Code searching

Feature Tour: http://www.flashdevelop.org/wikidocs/index.php?title=Features:Interface

FlashTracer

Flash tracer is a firefox extension which enables you to see all the output generated by any running flash swf movies in browser

Download:http://www.sephiroth.it/firefox/flashtracer/

FlashTracer Configuration

Install Flash Debug Player› http://www.adobe.com/support/flashplayer/downloads.html

flashlog.txt path› Windows XP: C:\Documents and Settings\{user}\Application

Data\Macromedia\Flash Player\Logs\flashlog.txt› Windows Vista: C:\Users\{user}\AppData\Roaming\

Macromedia\Flash Player\Logs\flashlog.txt› Linux:

home/username/.macromedia/Flash_Player/Logs/flashlog.txt› OSX:

/Users/{username}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

Firebug & HttpWatch

Useful to trace Request and Response between Flash Movie and Server

Firebug (only Firefox): http://getfirebug.com/

HttpWatch (IE and Firefox): http://www.httpwatch.com/

Flash Programming Model

Program Entry Point

Flash is an event-driven program

No specific program entry point› Unlike java / C, there is no “main function” as

the entry point and main loop

Code logic is usually triggered by:› Event handler› Timeline› UI Class constructor

Application Architecture

Code LogicActionScript

UI DefinitionFLA file

Server ResponseXML / JSON

Controller

Model View

Class Structure

UI Classes

Helper Classes

Data Classes

Flash Display Components

MovieClip, Sprit, …

Other Flash Core Libraries

Extends Imports / Extends

Application Libraries

AS3 Core Libraries

UI Class

UI Class

Tell the UI how to “react” with different events

Constructorthis.addEventListener(MouseEvent.Click, this. handleMouseClick);

Event Handlersprivate function handleMouseClick(…) {}

UI Class Pattern

Helper Class

Implements reusable methods / business logic which can be shared within the application / across projects, e.g.› String Operation› Server Communication› Sound Manager

Usually implemented as static class

Data Class

To define the variables and methods of a data object, e.g.› A user has attributes:

name gender photoPath

› And methods: save(); logOut();

OOP in Flash

Comparing AS3.0 and Java

AS 3.0 Java

Inheritance Yes Yes

Access Modifiers Yes Yes

Abstract Class No Yes

Interface Yes Yes

Function Overriding Yes Yes

Function Overloading No Yes

Private constructors No Yes

http://flexblog.faratasystems.com/?p=115

Demo TimeCreating Our First OOP Flash Application

Steps to Follow

1. FlashDevelop Setup2. Flash Movie Setup3. Define UI Tree4. Write the Classes5. Link the Classes with UI6. Compile!

The UI and Class Structure in this demo

Stage

iconWheelMc

infoMc iconContainerMc

coverMciconMciconMciconMc

Dynamic attach

Class: Icon

Class: IconContainer

Class: IconWheel

Flash Programming Best Practice

Rules to speed up development

Flash’s Common Problems

No standard programming framework

Long compile time

Long debug time

Involves many people within the project

Frequently changing requirement from client

Rule #1

Extract platform dependent config into XML files

Aim: Make application more portable

Platform Dependent Variables, such as› host name, › API URLshould not be hardcoded inside ActionScript

The Flash Application should be able to port onto any platform without compilation

Rule #2

Identify and extract frequently changing variables to XML

Aim: Speed up debugging time

Frequently changing variables:› Visual effect parameters› Warning messages

Compilation is not needed during test

Provide room for designer to adjust visual effect without editing ActionScript

Rule #3

ActionScript should be extracted out from .FLA files and write into .AS files

Aim: To let programmer and designer work in parallel

In the timeline of FLA, only allow:› Timeline control function,

play(), stop(), gotoAndPlay(), etc› Triggering functions defined in .AS files

Rule #4

Ensure Flash App is able to run in Flash IDE already / in local drive

Aim: Speed up debugging time

Do not need to copy the complied .SWF files to server and reload browser to debug every time

Can be achieve by:› Not using relative path for API or other assets:

Do: http://www.abc.com/php/getData.php Do not: /php/getData.php

Flash Player “Global Security Setting”› Allow the application access data from

other domain when testing in local drive › http://www.macromedia.com/support/documentation/en

/flashplayer/help/settings_manager04.html

Rule #5Ensure subsections SWF able to run independently

Aim: Speed up debugging time

More concentrate on debugging a Flash section

Home

Section 1 Section 2

Section 1a Debug entry point

Rule #6

Plan well the UI structure before development

Aim: › Leave room for designer

to add timeline effect› Make UI Class

independent of UI structure

Stage

iconWheelMc

infoMc iconContainerMc

coverMc

Stage

infoMc iconContainerMc coverMc

Not modulized Modulized

Rule #7

Avoid using parent, root

Aim: Make UI Code independent of UI structure

UI Structure will be usually changed during integration phase

When the Flash become very complex, you will see horrible code like:› parent.parent.parent.parent…

Please avoid it!!!

Avoid traversing the UI tree when accessing objects in other .SWF file› Try singleton or global variable (by static class

variable)

The “Root” reference issue

Root

home.swf

section1.swf section2.swf

section1a.swf

Root

If start from section1a.swf …

If start from home.swf …

section1a.swf

In AS 2.0…

The “Root” reference issue

Root

home.swf

section1.swf section2.swf

section1a.swf Root

If start from section1a.swf …

If start from home.swf …

section1a.swf

In AS 3.0…

Stage

Stage

RootRoot

Root

What’s coming…

Visual Effect Programming Skills