Flash Development Guide

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 DataMacromediaFlash PlayerLogsflashlog.txt
Windows Vista: C:Users{user}AppDataRoamingMacromediaFlash PlayerLogsflashlog.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 Logic
ActionScript
UI Definition
FLA file
Server Response
XML / JSON
Controller
Model
View

Class Structure
Flash Display Components
MovieClip, Sprit, …
Other Flash Core Libraries
AS3 Core Libraries
Extends
Imports / Extends
UI Classes
Helper Classes
Data Classes
Application Libraries

UI Class
Tell the UI how to “react” with different events
UI Class
Constructor
this.addEventListener(MouseEvent.Click, this. handleMouseClick);
Event Handlers
private 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
http://flexblog.faratasystems.com/?p=115

Demo Time
Creating Our First OOP Flash Application

Steps to Follow
FlashDevelop Setup
Flash Movie Setup
Define UI Tree
Write the Classes
Link the Classes with UI
Compile!

The UI and Class Structure in this demo
Stage
iconWheelMc
Class: IconWheel
infoMc
iconContainerMc
Class: IconContainer
Dynamic attach
coverMc
iconMc
iconMc
Class: Icon
iconMc

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 URL
should 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

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 #5
Ensure subsections SWF able to run independently

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
Stage
infoMc
iconContainerMc
coverMc
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
If start from home.swf …
In AS 2.0…
home.swf
Root
If start from section1a.swf …
section1a.swf
section1.swf
section2.swf
Root
section1a.swf

The “Root” reference issue
If start from home.swf …
In AS 3.0…
home.swf
Stage
Root
If start from section1a.swf …
section1a.swf
Root
section1.swf
section2.swf
Stage
Root
Root
section1a.swf
Root

What’s coming…
Visual Effect Programming Skills