This presentation mainly covers the following topics: - Flash Development Environment Setup - Flash Programming Model - OOP in Flash - Flash Programming Best Practice

1. Flash Sharing Lesson 2Flash Development Guide By Stanley Fok

2. We will talk about… Flash Development Environment Setup Flash Programming Model OOP in Flash Flash Programming Best Practice

3. Flash Development Environment Setup

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/

8. Flash Programming Model

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();

15. OOP in Flash

16. Comparing AS3.0 and Java http://flexblog.faratasystems.com/?p=115

17. Demo Time Creating Our First OOP Flash Application

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

20. Flash Programming Best Practice Rules to speed up development

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

22. Rule #1 Extract platform dependent config into XML files

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

35. Rule #7 Avoid using parent, root

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

39. What’s coming… Visual Effect Programming Skills