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

Hurry Up And Code: Power Shortcuts for Flash and Flex Developers

Presented by Joseph Balderson

TodCon 2007, June 11-13 2007

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]

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

Know Your Tools:

Planning & Document Creation

IDEs: Flash 8/CS3 & FlexBuilder

Unit Testing

Know Your Tools: Planning & Document Creation

You might start with this:

… and progress to this:

Brainstorming tools

Whiteboard + Dig.Camera

MindManager

… 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

UML Modeling

SaffronModeler (coming soon!) [ link ]

Remote dev & offline tool

Built entirely in Flash CS3 & AS 3.0

Will be ported to Apollo/AIR

Know Your Tools: IDEs

Current Flash Platform Development Environments (IDEs):

Flash 8

Flash CS3

FlexBuilder 2.01

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

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

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)

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

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.

Flash 8/CS3

Use the AS 2.0 Debug panel to hack the v.2 Component Architecture

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)

ActionScript Coding

Escape Key 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

ActionScript Coding

Custom Escape Key Shortcuts

Note: save as UTF-8

<folder name="CUSTOM ESCAPE ACTION-FU" id="Escape Action-Fu" tiptext="Escape Action-Fu">

<action name="onEnterFrame" tiptext="Insert onEnterFrame" helpid="2862" text=“this.onEnterFrame = function(evtObj:Object):Void { % function name % };" version="6" quickey="oe"/> </folder>

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

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



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 ]

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…

Know Your Tools: Flex Power Shortcuts

Flex Power Shortcuts:

FlexBuilder 2.01 (Flex IDE)

MXML & AS 3.0

Flex API Explorers

Know Your Tools: FlexBuilder 2.01 Power Shortcuts

First, some terminology:

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

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

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

Know Your Tools: MXML & AS 3.0 Power Shortcuts

Coding:

Three Golden Rules of The Flex Ninja:

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.

Coding:

Use the [inspectable] metadata tag for custom component code hinting

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?

Building Projects

Ctrl-click to access a launch config’s properties

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

Testing & Debugging

"Clear All Breakpoints" 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

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



Flex API Explorers

( Kuler )

Flex Style Explorer (with Kuler import!)

Flex Component Explorer

Flex Primitive Explorer

Flex Charting Explorer

Flex Filter Explorer

Open Style Explorer in FlexBuilder

Window > Other Views > Internal Web Browser

Paste adobe.com/go/flex_styles_explorer_app into address bar

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

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

Know Your Tools: Unit Testing

Unit Testing Tools:

Flash Switcher [ download ] [ blog ] [ CMX tutorial ]

Flash Tracer [ download ] [ blog ] [ CMX tutorial ]

Blitz Labs’ Xray [ link ]

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]

And now for something completely different…

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

0 comments

Notes on slide 1

6 Favorites