Hurry Up and Code: Power Shortcuts for Flash and Flex Developers by Joseph Balderson

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.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites

    Hurry Up and Code: Power Shortcuts for Flash and Flex Developers by Joseph Balderson - Presentation Transcript

    1. Hurry Up And Code: Power Shortcuts for Flash and Flex Developers
      • Presented by Joseph Balderson
      • TodCon 2007, June 11-13 2007
    2. Hurry Up And Code: Power Shortcuts for Flash & Flex Developers
      • Who is Joseph Balderson ? (aka ‘joeflash’)
        • Flash Platform Developer
        • Adobe Certified Trainer
        • Author & Community MX Partner
        • Consultant with New Toronto Group
        • email: [email_address]
    3. Hurry Up And Code: Power Shortcuts for Flash & Flex Developers
      • Developing a project successfully and on time is based on several things:
        • Think efficiently
        • Know your tools
        • Know your resources
        • Understand The Plan
        • Know your Metrics For Success
        • Communication
        • Unit Test, Unit Test, Unit Test
    4. Hurry Up And Code: Power Shortcuts for Flash & Flex Developers
      • Know Your Tools:
        • Planning & Document Creation
        • IDEs: Flash 8/CS3 & FlexBuilder
        • Unit Testing
    5. Know Your Tools: Planning & Document Creation
      • You might start with this:
    6. Know Your Tools: Planning & Document Creation
      • … and progress to this:
        • Brainstorming tools
          • Whiteboard + Dig.Camera
          • MindManager
    7. Know Your Tools: Planning & Document Creation
      • … and then to this:
        • UML Modeling
          • gModeller [ link ]
            • Getting a little old, but still suitable
            • easy to use and AS 2.0-ready
          • Visio
            • Complex but versatile
          • Gliffy [ link ]
            • Great for remote dev
            • Online use only
        – author’s 3 rd party tools of choice
    8. Know Your Tools: Planning & Document Creation
        • UML Modeling
          • SaffronModeler (coming soon!) [ link ]
            • Remote dev & offline tool
            • Built entirely in Flash CS3 & AS 3.0
            • Will be ported to Apollo/AIR
    9. Know Your Tools: IDEs
      • Current Flash Platform Development Environments (IDEs):
        • Flash 8
        • Flash CS3
        • FlexBuilder 2.01
    10. Know Your Tools: Flash IDE Power Shortcuts
      • Flash IDE Power Shortcuts:
        • Flash 8
        • Flash CS3
        • ActionScript Coding
        • 3 rd Party Dev Tools
        • AS 2.0 API Explorers
    11. Know Your Tools: Flash IDE Power Shortcuts
      • Flash 8/CS3
        • FLA & Class file Templates
        • Essential Keyboard Shortcuts: (Windows)
              • F4: hide panels
              • F5: new Frame
              • F6: new Keyframe
              • F7: new Blank Keyframe
              • F8/Ctrl-F8: Convert to Symbol / New Symbol
              • F9: Actions Panel
              • Ctrl-F12: Publishing Properties
              • Ctrl-Enter: Test Movie
    12. Know Your Tools: Flash IDE Power Shortcuts
      • Flash 8/CS3
        • Clean out deleted FLA Library items
          • Edit > Save and Compact
        • Panel Shortcuts:
          • BP: Lock the AS layer
          • Layer > Right.Click > Lock Others
          • Double-click panel top to minimize (Windows)
    13. Know Your Tools: Flash IDE Power Shortcuts
      • Flash 8/CS3
        • Finding Your Way In the FLA: (best practices)
          • NEVER EVER USE SCENES!
          • SORT YOUR LIBRARY ASSETS!
          • Pin Your Scripts (but you can’t save them)
          • Use the Actions Navigator
          • Insert Target Path for Authortime Architecture
    14. Know Your Tools: Flash IDE Power Shortcuts
      • Flash 8/CS3
        • How to Code Dump an Entire FLA:
            • In the Movie Explorer panel , besides 'Show:' click the right-most button, 'Customize what items to show'
            • Select > Show: 'ActionScript', 'Layers', 'Frames', Context: 'Movie Elements', 'Symbol Definitions'
            • Go to Movie Explorer panel > Properties > Copy All Text To Clipboard
            • Paste into text file for reference.
    15. Know Your Tools: Flash IDE Power Shortcuts
      • Flash 8/CS3
        • Use the AS 2.0 Debug panel to hack the v.2 Component Architecture
    16. Know Your Tools: Flash IDE Power Shortcuts
      • ActionScript Coding
        • Double-clicking a word selects it
        • Trigger code hinting after “.” : Ctrl-Space
        • Declaring authortime objects to trigger code hinting
        • Clear the ASO Cache (if class files are being improperly compiled)
    17. Know Your Tools: Flash IDE Power Shortcuts
      • ActionScript Coding
        • Escape Key Shortcuts
    18. Know Your Tools: Flash IDE Power Shortcuts
      • ActionScript Coding
        • Custom Escape Key Shortcuts
          • Flash8: C:Program FilesMacromediaFlash 8enFirst RunActionsPanelActionScript_1_2ActionsPanel.xml
          • FlashCS3: (??) C:Program FilesAdobeAdobe Flash CS3enFirst Run ActionsPanelActionScript_1_2ActionsPanel.xml C:Documents and Settings{user}Local SettingsApplication DataAdobeFlash CS3 enConfigurationActionsPanelActionScript_1_2 ActionsPanel.xml
    19. Know Your Tools: Flash IDE Power Shortcuts
      • ActionScript Coding
        • Custom Escape Key Shortcuts
          • Note: save as UTF-8
        • <folder name=&quot;CUSTOM ESCAPE ACTION-FU&quot; id=&quot;Escape Action-Fu&quot; tiptext=&quot;Escape Action-Fu&quot;>
        • <action name=&quot;onEnterFrame&quot; tiptext=&quot;Insert onEnterFrame&quot; helpid=&quot;2862&quot; text=“this.onEnterFrame = function(evtObj:Object):Void { % function name % };&quot; version=&quot;6&quot; quickey=&quot;oe&quot;/> </folder>
    20. Know Your Tools: Flash 3 rd Party Dev Tools
      • Flash 3 rd Party Dev Tools
        • Use The Force (JSFL)
          • gAlign
          • gSearch
          • gProject
            • Creating pre-linked MCs
            • Library organization for linked MCs
            • Class Code Autocompletion
        – author’s 3 rd party tools of choice
    21. Know Your Tools: Flash 3 rd Party Dev Tools
      • Flash 3 rd Party Dev Tools
        • Alternate AS Editors/Compilers
          • SE|PY [ CMX tutorial ]
            • Find In Files
            • Class Stub File Autocreation with Snippets
          • FlashDevelop
          • MTASC , FLASC
    22. Know Your Tools: AS 2.0 API Explorers
      • AS 2.0 API Explorers
        • Transition & Tween Explorer [ link ] [ CMX tutorial ]
        • Kinglong’s Gradient Explorer [ link ]
        • Andreas Weber’s Gradient Tween Editor [ link ]
        • [ CMX tutorial ]
    23. Know Your Tools: Flash IDE Power Shortcuts
      • Flash CS3
        • Integrated “Apply Active Content Update”
        • Code collapsing: learn the shortcuts
        • Code commenting (line & block comment)
          • Tip: Configure custom shortcuts to do this
        • Gotcha: Check Syntax does not work for AS 3.0 files (use the Compiler Errors panel)
        • Improved debugger for AS 3.0
        • Conclusion: new code editing features in CS3 a little disappointing, but then, that’s what FlexBuilder is for…
    24. Know Your Tools: Flex Power Shortcuts
    25. Know Your Tools: Flex Power Shortcuts
      • Flex Power Shortcuts:
        • FlexBuilder 2.01 (Flex IDE)
        • MXML & AS 3.0
        • Flex API Explorers
    26. Know Your Tools: FlexBuilder 2.01 Power Shortcuts
      • First, some terminology:
    27. Know Your Tools: FlexBuilder 2.01 Power Shortcuts
      • Views:
        • Double-click a tab to fullscreen a view in the workbench
        • Outline
          • MXML view: container hierarchy
          • class view: class hierarchy
        • Code Editor
          • Don’t Type <mx: !!
          • Ctrl-click: navigates to where something was declared (even in another file!)
          • Know the keyboard shortcuts!!
    28. Know Your Tools: FlexBuilder 2.01 Power Shortcuts
      • Power Keyboard Shortcuts:
            • Ctrl-Shift-L: See all shortcuts
            • Ctrl+Space: Content assist (aka Code Hinting)
            • Ctrl-Shift-M: insert a line
            • Shift+Enter: Add a new line below
            • Crtl+Enter: Add new line above
            • Ctrl-Alt-Up/Down: Duplicate line up/down
            • Ctrl+D: Delete current line
            • Alt+Down: Move current line down
            • Ctrl+L: Go to line number
            • Ctrl+Shift+C: Block comment (MXML & AS)
            • Ctrl-F12: Run
            • Ctrl-Shift-F12: Debug
    29. Know Your Tools: FlexBuilder 2.01 Power Shortcuts
        • Design Mode
          • Use show surrounding containers to inspect complex container hierarchies
          • Design area > Custom size… to resize Design view to simulate browser size
        • Flex Properties (Design Mode)
          • Category & Alphabetical view: define MXML & AS properties, methods, events, effects
    30. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Coding:
        • Three Golden Rules of The Flex Ninja:
    31. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Coding:
        • The Three Golden Rules of The Flex Ninja:
          • Rule 1 — Each tag corresponds to a new instance of a class ( <namespace:TagName> )
          • Rule 2 — Every attribute is a property of the TagName class.
          • Rule 3 — Every tag with an id turns into a named instance of the TagName class.
    32. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Coding:
        • Use the [inspectable] metadata tag for custom component code hinting
    33. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Building Projects
        • Restart FlexBuilder every once and a while…
        • Don't open too many projects at once
        • Perform a clean build to save SWF filesize:
          • Project > Clean
          • Equivalent of Edit > Save and Compact in Flash?
    34. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Building Projects
        • Ctrl-click to access a launch config’s properties
    35. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Testing & Debugging
        • Use the Problems view to check code as you type
        • Turn on Project >Build Automatically
        • Don’t Use trace() !! Use the debugger
          • Set breakpoints on your vars
          • Inspect in Variables view of the Flex Debugging perspective
    36. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Testing & Debugging
        • &quot;Clear All Breakpoints&quot; to clear all breaks
        • Gotcha: may seem to crash the browser while in Debug mode
        • Highlight the breakpoint that was just hit
          • Breakpoints view > Link with Debug View
    37. Know Your Tools: MXML & AS 3.0 Power Shortcuts
      • Testing & Debugging
        • Debug Apps Uploaded to The Server
          • Upload {filename}-debug.swf
          • Run/Debug > Ctrl-click for options window
          • change default URL or path to launch
        • Eclipse Diff tool: Navigator view > Right Click > Compare with
    38. Know Your Tools: Flex Power Shortcuts
      • Flex API Explorers
        • ( Kuler )
        • Flex Style Explorer (with Kuler import!)
        • Flex Component Explorer
        • Flex Primitive Explorer
        • Flex Charting Explorer
        • Flex Filter Explorer
    39. Know Your Tools: Flex Power Shortcuts
      • Open Style Explorer in FlexBuilder
        • Window > Other Views > Internal Web Browser
        • Paste adobe.com/go/flex_styles_explorer_app into address bar
    40. Know Your Tools: Flex Power Shortcuts
      • Advanced Tips & Optimizations:
        • Changing the filenames in Flex Builder html templates
        • Macros that are available in html-template files
        • What to do when FB won’t launch due to a typo in the workspace name
        • Call enterDebugger() to break into the debugger programmatically
        • Using Flex Ant Tasks
    41. Know Your Tools: Flex Power Shortcuts
      • Fav Resources
        • Flex & AS 3.0 API Posters
        • scale nine: themes for flex & apollo
        • JAM – Just ActionScript & MXML
        • Flex Cookbook beta
        • video.onflex.org
        • flex.org
    42. Know Your Tools: Unit Testing
      • Unit Testing Tools:
        • Flash Switcher [ download ] [ blog ] [ CMX tutorial ]
        • Flash Tracer [ download ] [ blog ] [ CMX tutorial ]
        • Blitz Labs’ Xray [ link ]
    43. Hurry Up And Code: Power Shortcuts for Flash & Flex Developers
      • A Special Thanks To:
        • Mark Lapasa (aka ‘ false’) , Rick Mason (aka ‘egnaro’) from the Flash In TO user group
        • David Stiller (CMX partner)
        • Steve Schelter (CMX partner)
        • and all the gang at New Toronto Group
        • This presentation will be available at CommunityMX
        • email: [email_address]
    44. And now for something completely different…

    + Joseph BaldersonJoseph Balderson, 3 years ago

    custom

    4330 views, 6 favs, 0 embeds more stats

    Visit http://www.communitymx.com/abstract.cfm?cid=9 more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 4330
      • 4330 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    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