Post on 28-Jul-2015
®
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2
The User
Upload Assets
Edit Custom Settings
Video EncodingPlatformPlatform
DesignerDeveloper
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3
The User
Mindless
Repetitive
Time ConsumingPlatformPlatform
DesignerDeveloper
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4
The User
Workflow Tool PlatformPlatform
DesignerDeveloper
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
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!
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
Go with the Flow
OutputOutputCreative Tasks
Creative Tasks
Enable more Mindful / Creative Tasks
Step 1Easy
Step 2Advanced
Step 3Easy
The Workflow Tool
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7
Go with the Flow
OutputOutputCreative Tasks
Creative Tasks
Reduce Steps for the User
Step 1Easy
Step 2Advanced
The Workflow Tool
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
Go with the Flow
OutputOutputCreative Tasks
Creative Tasks
Lower the Learning Curve
Step 1Easy
Step 2Easy
The Workflow Tool
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
Go with the Flow
OutputOutputCreative Tasks
Creative Tasks
Work faster with more consistency
Step 1Easy
Step 2Easy
The Workflow Tool
Accomplish more with less work
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
The Power at your Fingertips
Your users already understand the IDE
Don’t reinvent the wheel
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
Examples of Workflow Tools for the Flash IDE
Panel to Flash IDE
CUSTOM PANEL UICUSTOM PANEL UI
Manipulate MovieClips
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12
Examples of Workflow Tools for the Flash IDE
Panel to Flash IDE
CUSTOM PANEL UICUSTOM PANEL UI
Manipulate Text
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
Examples of Workflow Tools for the Flash IDE
Panel to Flash IDE
CUSTOM PANEL UICUSTOM PANEL UI
ManipulateActionScript
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
Server-Side Logic
Server-Side Logic
Examples of Workflow Tools for the Flash IDE
Panel to Server-Side Logic
CUSTOM PANEL UICUSTOM PANEL UI
Update Server-Side Data
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
Examples of Workflow Tools for the Flash IDE
Panel to Flash IDE & Server-Side Logic
CUSTOM PANEL UICUSTOM PANEL UI
Server-Side Logic
Server-Side Logic
Update Server-Side Data
Manipulate MovieClips
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
Let’s Build Something
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
Available Technologies:
JSFL (For IDE level functionality)
XUL (XML based Prompts and Pop-ups)
C Level extensibility
Custom Panel Windows (SWF Based)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18
Flash CS4 Custom Panel Windows
SWF based content
Sizable
Dockable
Example: Project Window
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21
WindowSWF Paths
Mac:/Library/Application Support/Adobe/Flash CS4/en/Configuration/WindowSWF
Windows:\Application Data\Adobe\Flash CS4\language\Configuration\WindowSWF
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22
DEMO
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 23
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25
The Flash IDE Document Object Model (DOM)
fl.getDocumentDom();
fl.getDocumentDom().library
fl.getDocumentDom().getTimeline();
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26
JSFL API Hierarchy
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28
Configuring a Flex panel project
Point the output directory to WindowSWF/MyPanel folder
Keep files you want copied to WindowSWF in “src”
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29
Keep all supporting files in a package with your project name
Disable the HTML wrapper
Configuration/WindowSWFProject structure
Keep it Tidy
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30
How to Execute JSFL in a SWF
MMExecute(JSFLCommand:String);
Ex:import adobe.utils.MMExecute;MMExecute(“fl.trace(‘hello world’)”);
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31
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’)”);
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32
DEMO
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 33
Tips for writing JSFL
JSFL editor in Flash CS4
External JSFL files
fl.trace() for debugging
JSON for passing objects
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 35
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’Haretohare@pointroll.com
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 36