Upload
stanley-fok
View
7.766
Download
3
Embed Size (px)
DESCRIPTION
This presentation mainly covers the following topics:- Flash Development Environment Setup- Flash Programming Model- OOP in Flash- Flash Programming Best Practice
Citation preview
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