Flash Development Guide

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

Breifly show how code is triggered

4 Favorites

Flash Development Guide - Presentation Transcript

  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: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
  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

+ Stanley FokStanley Fok, 4 months ago

custom

1097 views, 4 favs, 1 embeds more stats

This presentation mainly covers the following topic more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 1097
    • 775 on SlideShare
    • 322 from embeds
  • Comments 1
  • Favorites 4
  • Downloads 25
Most viewed embeds
  • 322 views on http://blog.frogiology.com

more

All embeds
  • 322 views on http://blog.frogiology.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories