Flash Sharing Lesson 2Flash Development Guide<br />By Stanley Fok<br />
We will talk about…<br />Flash Development Environment Setup<br />Flash Programming Model<br />OOP in Flash<br />Flash Pro...
Flash Development Environment Setup<br />
FlashDevelop<br />A famous open source ActionScript Editor<br />Useful Features Include: <br />Code hints<br />Code comple...
FlashTracer<br />Flash tracer is a firefox extension which enables you to see all the output generated by any running flas...
FlashTracer Configuration<br />Install Flash Debug Player<br />http://www.adobe.com/support/flashplayer/downloads.html<br ...
Firebug & HttpWatch<br />Useful to trace Request and Response between Flash Movie and Server<br />Firebug (only Firefox): ...
Flash Programming Model<br />
Program Entry Point<br />Flash is an event-driven program<br />No specific program entry point<br />Unlike java / C, there...
Application Architecture<br />Code Logic<br />ActionScript<br />UI Definition<br />FLA file<br />Server Response<br />XML ...
Class Structure<br />Flash Display Components<br />MovieClip, Sprit, …<br />Other Flash Core Libraries<br />AS3 Core Libra...
UI Class<br />Tell the UI how to “react” with different events<br />UI Class<br />Constructor<br />this.addEventListener(M...
Helper Class<br />Implements reusable methods / business logic which can be shared within the application / across project...
Data Class<br />To define the variables and methods of a data object, e.g.<br />A user has attributes:<br />name<br />gend...
OOP in Flash<br />
Comparing AS3.0 and Java<br />http://flexblog.faratasystems.com/?p=115<br />
Demo Time<br />Creating Our First OOP Flash Application<br />
Steps to Follow<br />FlashDevelop Setup<br />Flash Movie Setup<br />Define UI Tree<br />Write the Classes<br />Link the Cl...
The UI and Class Structure in this demo<br />Stage<br />iconWheelMc<br />Class: IconWheel<br />infoMc<br />iconContainerMc...
Flash Programming Best Practice<br />Rules to speed up development<br />
Flash’s Common Problems<br />No standard programming framework <br />Long compile time<br />Long debug time<br />Involves ...
Rule #1<br />Extract platform dependent config into XML files<br />
Aim: Make application more portable<br />Platform Dependent Variables, such as<br />host name, <br />API URL<br />should n...
Rule #2<br />Identify and extract frequently changing variables to XML<br />
Aim: Speed up debugging time<br />Frequently changing variables:<br />Visual effect parameters<br />Warning messages<br />...
Rule #3<br />ActionScript should be extracted out from .FLA files and write into .AS files<br />
Aim: To let programmer and designer work in parallel<br />In the timeline of FLA, only allow:<br />Timeline control functi...
Rule #4<br />Ensure Flash App is able to run in Flash IDE already / in local drive<br />
Aim: Speed up debugging time<br />Do not need to copy the complied .SWF files to server and reload browser to debug every ...
Flash Player “Global Security Setting”<br />Allow the application access data from other domain when testing in local driv...
Rule #5<br />Ensure subsections SWF able to run independently<br />
Aim: Speed up debugging time<br />More concentrate on debugging a Flash section<br />Home<br />Section 1<br />Section 2<br...
Rule #6<br />Plan well the UI structure before development<br />
Aim: <br />Leave room for designer to add timeline effect<br />Make UI Class independent of UI structure<br />Stage<br />i...
Rule #7<br />Avoid using parent, root<br />
Aim: Make UI Code independent of UI structure<br />UI Structure will be usually changed during integration phase<br />When...
The “Root” reference issue<br />If start from home.swf …<br />In AS 2.0…<br />home.swf<br />Root<br />If start from sectio...
The “Root” reference issue<br />If start from home.swf …<br />In AS 3.0…<br />home.swf<br />Stage<br />Root<br />If start ...
What’s coming…<br />Visual Effect Programming Skills<br />
Upcoming SlideShare
Loading in …5
×

Flash Development Guide

5,647 views

Published on

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

Published in: Technology, Travel
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
5,647
On SlideShare
0
From Embeds
0
Number of Embeds
2,415
Actions
Shares
0
Downloads
113
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • Breifly show how code is triggered
  • Flash Development Guide

    1. 1. Flash Sharing Lesson 2Flash Development Guide<br />By Stanley Fok<br />
    2. 2. We will talk about…<br />Flash Development Environment Setup<br />Flash Programming Model<br />OOP in Flash<br />Flash Programming Best Practice<br />
    3. 3. Flash Development Environment Setup<br />
    4. 4. FlashDevelop<br />A famous open source ActionScript Editor<br />Useful Features Include: <br />Code hints<br />Code completion<br />Code generation<br />Code searching<br />Feature Tour: http://www.flashdevelop.org/wikidocs/index.php?title=Features:Interface<br />
    5. 5. FlashTracer<br />Flash tracer is a firefox extension which enables you to see all the output generated by any running flash swf movies in browser<br />Download:http://www.sephiroth.it/firefox/flashtracer/<br />
    6. 6. FlashTracer Configuration<br />Install Flash Debug Player<br />http://www.adobe.com/support/flashplayer/downloads.html<br />flashlog.txt path<br />Windows XP: C:Documents and Settings{user}Application DataMacromediaFlash PlayerLogsflashlog.txt<br />Windows Vista: C:Users{user}AppDataRoamingMacromediaFlash PlayerLogsflashlog.txt<br />Linux: home/username/.macromedia/Flash_Player/Logs/flashlog.txt<br />OSX: /Users/{username}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt<br />
    7. 7. Firebug & HttpWatch<br />Useful to trace Request and Response between Flash Movie and Server<br />Firebug (only Firefox): http://getfirebug.com/<br />HttpWatch (IE and Firefox): http://www.httpwatch.com/<br />
    8. 8. Flash Programming Model<br />
    9. 9. Program Entry Point<br />Flash is an event-driven program<br />No specific program entry point<br />Unlike java / C, there is no “main function” as the entry point and main loop<br />Code logic is usually triggered by:<br />Event handler<br />Timeline<br />UI Class constructor<br />
    10. 10. Application Architecture<br />Code Logic<br />ActionScript<br />UI Definition<br />FLA file<br />Server Response<br />XML / JSON<br />Controller<br />Model<br />View<br />
    11. 11. Class Structure<br />Flash Display Components<br />MovieClip, Sprit, …<br />Other Flash Core Libraries<br />AS3 Core Libraries<br />Extends<br />Imports / Extends<br />UI Classes<br />Helper Classes<br />Data Classes<br />Application Libraries<br />
    12. 12. UI Class<br />Tell the UI how to “react” with different events<br />UI Class<br />Constructor<br />this.addEventListener(MouseEvent.Click, this. handleMouseClick);<br />Event Handlers<br />private function handleMouseClick(…) {}<br />UI Class Pattern<br />
    13. 13. Helper Class<br />Implements reusable methods / business logic which can be shared within the application / across projects, e.g.<br />String Operation<br />Server Communication<br />Sound Manager<br />Usually implemented as static class<br />
    14. 14. Data Class<br />To define the variables and methods of a data object, e.g.<br />A user has attributes:<br />name<br />gender<br />photoPath<br />And methods:<br />save();<br />logOut();<br />
    15. 15. OOP in Flash<br />
    16. 16. Comparing AS3.0 and Java<br />http://flexblog.faratasystems.com/?p=115<br />
    17. 17. Demo Time<br />Creating Our First OOP Flash Application<br />
    18. 18. Steps to Follow<br />FlashDevelop Setup<br />Flash Movie Setup<br />Define UI Tree<br />Write the Classes<br />Link the Classes with UI<br />Compile!<br />
    19. 19. The UI and Class Structure in this demo<br />Stage<br />iconWheelMc<br />Class: IconWheel<br />infoMc<br />iconContainerMc<br />Class: IconContainer<br />Dynamic attach<br />coverMc<br />iconMc<br />iconMc<br />Class: Icon<br />iconMc<br />
    20. 20. Flash Programming Best Practice<br />Rules to speed up development<br />
    21. 21. Flash’s Common Problems<br />No standard programming framework <br />Long compile time<br />Long debug time<br />Involves many people within the project<br />Frequently changing requirement from client<br />
    22. 22. Rule #1<br />Extract platform dependent config into XML files<br />
    23. 23. Aim: Make application more portable<br />Platform Dependent Variables, such as<br />host name, <br />API URL<br />should not be hardcoded inside ActionScript<br />The Flash Application should be able to port onto any platform without compilation<br />
    24. 24. Rule #2<br />Identify and extract frequently changing variables to XML<br />
    25. 25. Aim: Speed up debugging time<br />Frequently changing variables:<br />Visual effect parameters<br />Warning messages<br />Compilation is not needed during test<br />Provide room for designer to adjust visual effect without editing ActionScript<br />
    26. 26. Rule #3<br />ActionScript should be extracted out from .FLA files and write into .AS files<br />
    27. 27. Aim: To let programmer and designer work in parallel<br />In the timeline of FLA, only allow:<br />Timeline control function,<br />play(), stop(), gotoAndPlay(), etc<br />Triggering functions defined in .AS files<br />
    28. 28. Rule #4<br />Ensure Flash App is able to run in Flash IDE already / in local drive<br />
    29. 29. Aim: Speed up debugging time<br />Do not need to copy the complied .SWF files to server and reload browser to debug every time<br />Can be achieve by:<br />Not using relative path for API or other assets:<br />Do: http://www.abc.com/php/getData.php<br />Do not: /php/getData.php<br />
    30. 30. Flash Player “Global Security Setting”<br />Allow the application access data from other domain when testing in local drive <br />http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html<br />
    31. 31. Rule #5<br />Ensure subsections SWF able to run independently<br />
    32. 32. Aim: Speed up debugging time<br />More concentrate on debugging a Flash section<br />Home<br />Section 1<br />Section 2<br />Section 1a<br />Debug entry point<br />
    33. 33. Rule #6<br />Plan well the UI structure before development<br />
    34. 34. Aim: <br />Leave room for designer to add timeline effect<br />Make UI Class independent of UI structure<br />Stage<br />iconWheelMc<br />Stage<br />infoMc<br />iconContainerMc<br />coverMc<br />infoMc<br />iconContainerMc<br />coverMc<br />Not modulized<br />Modulized<br />
    35. 35. Rule #7<br />Avoid using parent, root<br />
    36. 36. Aim: Make UI Code independent of UI structure<br />UI Structure will be usually changed during integration phase<br />When the Flash become very complex, you will see horrible code like:<br />parent.parent.parent.parent… Please avoid it!!!<br />Avoid traversing the UI tree when accessing objects in other .SWF file<br />Try singleton or global variable (by static class variable)<br />
    37. 37. The “Root” reference issue<br />If start from home.swf …<br />In AS 2.0…<br />home.swf<br />Root<br />If start from section1a.swf …<br />section1a.swf<br />section1.swf<br />section2.swf<br />Root<br />section1a.swf<br />
    38. 38. The “Root” reference issue<br />If start from home.swf …<br />In AS 3.0…<br />home.swf<br />Stage<br />Root<br />If start from section1a.swf …<br />section1a.swf<br />Root<br />section1.swf<br />section2.swf<br />Stage<br />Root<br />Root<br />section1a.swf<br />Root<br />
    39. 39. What’s coming…<br />Visual Effect Programming Skills<br />

    ×