This presentation mainly covers the following topics:
- Flash Development Environment Setup
- Flash Programming Model
- OOP in Flash
- Flash Programming Best Practice
4. 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
5. 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/
6. FlashTracer Configuration Install Flash Debug Player http://www.adobe.com/support/flashplayer/downloads.html flashlog.txt path Windows XP: C:ocuments and Settingsuser}pplication Dataacromedialash Playerogslashlog.txt Windows Vista: C:sersuser}ppDataoamingacromedialash Playerogslashlog.txt Linux: home/username/.macromedia/Flash_Player/Logs/flashlog.txt OSX: /Users/{username}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
7. 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/
9. 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
10. Application Architecture Code Logic ActionScript UI Definition FLA file Server Response XML / JSON Controller Model View
11. 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
12. 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
13. 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
14. 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();
18. Steps to Follow FlashDevelop Setup Flash Movie Setup Define UI Tree Write the Classes Link the Classes with UI Compile!
19. The UI and Class Structure in this demo Stage iconWheelMc Class: IconWheel infoMc iconContainerMc Class: IconContainer Dynamic attach coverMc iconMc iconMc Class: Icon iconMc
21. 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
23. 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
24. Rule #2 Identify and extract frequently changing variables to XML
25. 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
26. Rule #3 ActionScript should be extracted out from .FLA files and write into .AS files
27. 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
28. Rule #4 Ensure Flash App is able to run in Flash IDE already / in local drive
29. 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
30. 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
31. Rule #5 Ensure subsections SWF able to run independently
32. Aim: Speed up debugging time More concentrate on debugging a Flash section Home Section 1 Section 2 Section 1a Debug entry point
33. Rule #6 Plan well the UI structure before development
34. 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
36. 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)
37. 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
38. 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