Flex Based Workflow Tools For The Flash IDE

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

Creating Workflow Tools for the Flash IDE

Ian McLean

Chris Deely

Tim O’Hare

#AdobeMax266

®


The User

Upload Assets

Edit Custom Settings

Video EncodingPlatformPlatform

DesignerDeveloper

®


The User

Mindless

Repetitive

Time ConsumingPlatformPlatform

DesignerDeveloper

®


The User

Workflow Tool PlatformPlatform

DesignerDeveloper

®


The Problem

Work Faster

Be more consistent

Provide a higher quality level

Do more with less

WORK SMARTER NOT HARDER

Manually rotating every one of these 1000 snowflakes sucks!

®


Go with the Flow

OutputOutputCreative Tasks

Creative Tasks

Enable more Mindful / Creative Tasks

Step 1Easy

Step 2Advanced

Step 3Easy

The Workflow Tool

®


Go with the Flow


Creative Tasks

Reduce Steps for the User

Step 1Easy

Step 2Advanced

The Workflow Tool

®


Go with the Flow


Creative Tasks

Lower the Learning Curve

Step 1Easy

Step 2Easy

The Workflow Tool

®


Go with the Flow


Creative Tasks

Work faster with more consistency

Step 1Easy

Step 2Easy

The Workflow Tool

Accomplish more with less work

®


The Power at your Fingertips

Your users already understand the IDE

Don’t reinvent the wheel

®


Examples of Workflow Tools for the Flash IDE

Panel to Flash IDE

CUSTOM PANEL UICUSTOM PANEL UI

Manipulate MovieClips

®



Panel to Flash IDE


Manipulate Text

®



Panel to Flash IDE


ManipulateActionScript

®


Server-Side Logic

Server-Side Logic


Panel to Server-Side Logic


Update Server-Side Data

®



Panel to Flash IDE & Server-Side Logic


Server-Side Logic

Server-Side Logic

Update Server-Side Data

Manipulate MovieClips

®


Let’s Build Something

®


Available Technologies:

JSFL (For IDE level functionality)

XUL (XML based Prompts and Pop-ups)

C Level extensibility

Custom Panel Windows (SWF Based)

®


Flash CS4 Custom Panel Windows

SWF based content

Sizable

Dockable

Example: Project Window

®


Panel, Meet Flex

Flex automatically works in Flash CS4 (Flex 4 too!)

What Flex brings to the table

Liquid layouts

Advanced component set

Custom component architecture

Easy consumption of web services

MXML, Flash Builder, Rapid prototyping

®


Creating a Panel Window

Step 1:

Place any .swf in to the WindowSWF directory.

Step 2:

Open panel from Window->Other Panels menu

…Yes, it’s really that easy.

Configuration/WindowSWF

®


WindowSWF Paths

Mac:/Library/Application Support/Adobe/Flash CS4/en/Configuration/WindowSWF

Windows:\Application Data\Adobe\Flash CS4\language\Configuration\WindowSWF

®


DEMO

®


Ok, So What Can A Panel Do?

Nearly everything Flash IDE itself can do

Manipulate Objects on the Stage

Manipulate the timeline

Generate Actionscript on the fly

Interface with Components

Basic file access

®


How User Actions Work

User Action

JSFL Call

var doc = fl.getDocumentDOM()var timeline = doc.getTimeline()timeline.addNewLayer()

MagicalLow(er) Level

Code

MagicalLow(er) Level

Code

®


The Flash IDE Document Object Model (DOM)

fl.getDocumentDom();

fl.getDocumentDom().library

fl.getDocumentDom().getTimeline();

®


JSFL API Hierarchy

®


Example JSFL

Print to the output panel:fl.trace(“Hello World”);

Read a text File:var s = FLfile.read(“/Users/Ian/MyFile.txt”);

Delete a selected object:fl.getDocumentDOM().currentSelection[0].delete();

Remember:

JSFL requires FLA to be open in order to perform FLA-related functionality

Document related functionality requires an open document

®


Configuring a Flex panel project

Point the output directory to WindowSWF/MyPanel folder

Keep files you want copied to WindowSWF in “src”

®


Keep all supporting files in a package with your project name

Disable the HTML wrapper

Configuration/WindowSWFProject structure

Keep it Tidy

®


How to Execute JSFL in a SWF

MMExecute(JSFLCommand:String);

Ex:import adobe.utils.MMExecute;MMExecute(“fl.trace(‘hello world’)”);

®


And some more…

Run an external script

MMExecute(“fl.runScript(‘sample.js’)”);

Call a function and pass in an argument

MMExecute(“fl.runScript(‘sample.js’, ‘doSomething’,’” + myVar “’)”);

Access the configuration directory

MMExecute(“fl.runScript( fl.configURI + ‘WindowSWF/sample.js’)”);

®


DEMO

®


Tips for writing JSFL

JSFL editor in Flash CS4

External JSFL files

fl.trace() for debugging

JSON for passing objects

®


Common Challenges

Problem: JSFL variables are not persistent

Solution: Treat JSFL like a Command pattern.

Problem: Panels do not automatically maintain their state when closes

Solution: Write/Read state information to disc with FLfile

Problem:File I/O is string only.No file handles outside of FileReference. Flash player File upload/download restrictions apply.

Solution: Persuade your local C guru to write a library

®


Resources

Extending Flash CS4 Reference - Adobehttp://help.adobe.com/en_US/Flash/10.0_ExtendingFlash/index.htmlhttp://bit.ly/My63F

Project FilesWatch the Twitter tag #adobemax266 for details

Follow UsIan McLeanhttp://devote.your.life.auricom.com@ianmclean

Chris Deelyhttp://blog.webdeely.com@chrisdeely

Bother TimTim O’[email protected]

®


Flex Based Workflow Tools For The Flash IDE

Documents

Transcript of Flex Based Workflow Tools For The Flash IDE