![Page 1: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/1.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.1
Flex for Flash Developers
Sho Kuwamoto
Sr. Director, Engineering
Adobe Systems, Inc.
![Page 2: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/2.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.2
What is Flex?
Tag/script-based app development for Flash
ActionScript class library Layout
Effects, skins, etc.
Networking and data
Compiler, debugger, and other tools
![Page 3: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/3.jpg)
32006 Adobe Systems Incorporated. All Rights Reserved.
HTML vs Flex vs Flash
Unlike HTML, Flex was designed for application development (no more creating navbars by slicing up
images!)
HTML / CSS files
Includes
JavaScript libraries
Tag-based
HTML output
HTML Flex Flash
MXML / CSS files
Components
ActionScript classes
Tag-based
SWF output
FLA files
Symbols
ActionScript classes
Timeline-based
SWF output
format
reuse
behavior
metaphor
output
![Page 4: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/4.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.4
Let’s see some code
![Page 5: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/5.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.5
Our first application – Step1.mxml
<Application> <Panel> <Label text="Hello, world!" /> <Button label="goodbye" /> </Panel></Application>
![Page 6: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/6.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.6
Adding layout – Step2.mxml
<Application> <Panel layout="absolute" width="80%" height="80%"> <TextArea text="Hello, world!" top="10" bottom="71"
left="10" right="30"/> <Button label="goodbye" right="30" bottom="41"/> </Panel></Application>
![Page 7: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/7.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.7
Adding styles – Step3.mxml
<Application> <Style> TextArea { font-size: 36px; font-weight: bold; } </Style>
<Panel layout="absolute" width="80%" height="80%"> <TextArea text="Hello, world!" top="10" bottom="71"
left="10" right="30"/> <Button label="goodbye" right="30" bottom="41"/> </Panel></Application>
![Page 8: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/8.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.8
Adding behavior – Step4a.mxml
<Application> <Style source="style.css"/>
<Panel id="myPanel" layout="absolute" width="80%" height="80%">
<TextArea text="Hello, world!" top="10" bottom="71" left="10" right="30"/>
<Button label="goodbye" right="30" bottom="41" click="myPanel.visible = false"/> </Panel></Application>
![Page 9: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/9.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.9
Adding behavior – Step4b.mxml
<Application> <Style source="style.css"/> <Script> public function goodbye() : void { myPanel.visible = false; } </Script>
<Panel id="myPanel" layout="absolute" width="80%" height="80%">
<TextArea text="Hello, world!" top="10" bottom="71" left="10" right="30"/>
<Button label="goodbye" right="30" bottom="41" click="goodbye()"/>
</Panel></Application>
![Page 10: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/10.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.10
Adding behavior – Step4c.mxml
<Application initialize="doInit()"> <Style source="style.css"/> <Script source="Step4c_code.as"/>
<Panel id="myPanel" layout="absolute" width="80%" height="80%">
<TextArea text="Hello, world!" top="10" bottom="71" left="10" right="30"/>
<Button id="goodbyeButton" label="goodbye" right="30" bottom="41"/>
</Panel></Application>
![Page 11: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/11.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.11
Adding behavior – Step4c_code.as
public function doInit() : void{ goodbyeButton.addEventListener("click", goodbye);}
public function goodbye(event: Event) : void{ myPanel.visible = false;}
![Page 12: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/12.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.12
Adding states – Step5.mxml
<Application initialize="doInit()"> <states> <State name="small"> <SetProperty target="{myPanel}" property="height"
value="200"/> <SetProperty target="{myPanel}" property="width"
value="300"/> </State> </states>
<Style source="style.css"/> <Script source="Step5_code.as"/>
<Panel id="myPanel" layout="absolute" width="80%" height="80%"> <TextArea text="Hello, world!" top="10" bottom="71" left="10"
right="30"/> <Button id="goodbyeButton" label="goodbye" right="30"
bottom="41"/> <Button id="smallButton" label="small" left="10" bottom="41"/> </Panel></Application>
![Page 13: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/13.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.13
Adding states – Step5_code.as
public function doInit() : void{ goodbyeButton.addEventListener("click", goodbye); smallButton.addEventListener("click", makeSmall);}
public function goodbye(event: Event) : void{ myPanel.visible = false;}
public function makeSmall(event: Event) : void{ currentState = "small";}
![Page 14: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/14.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.14
Adding effects – Step6.mxml
<Application> <states> <State name="small"> <SetProperty target="{myPanel}" property="height"
value="200"/> <SetProperty target="{myPanel}" property="width"
value="300"/> </State> </states>
<Style source="style.css" /> <Script source="Step6_code.as" />
<Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="Fade" resizeEffect="Resize"> <TextArea text="Hello, world!" top="10" bottom="71" left="10"
right="30"/> <Button id="goodbyeButton" label="goodbye" right="30"
bottom="41"/> <Button id="smallButton" label="small" left="10" bottom="41"/></Panel></Application>
![Page 15: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/15.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.15
Deeper dives
![Page 16: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/16.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.16
Application structure
Flex Application FrameworkFlex Application Framework
Codebehind
(AS)
Codebehind
(AS)
CSSCSS
ComponentComponentMXMLMXML
ComponentComponentApp-specificcomponent(AS/MXML)
App-specificcomponent(AS/MXML)
Reusable component libraryReusable component library
State StateStateSWFSWF
Skins &Styles
Layout &Effects
Behavior &Data ComponentsDesigner Developer
![Page 17: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/17.jpg)
172006 Adobe Systems Incorporated. All Rights Reserved.
Designers and developers
Responsible for skinning and styling through CSS and SWF
Does initial layout. May do final layout (via tool)
Does effect and transition design.
Responsible for program logic and component development
May be responsible for final layout (via containers)
May implement effects and transitions
Connects to data and services
Designer Developer
MXML
ASCSS/SWF
![Page 18: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/18.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.18
Keys to des/dev workflow
Separate out code into “code behind” pages Use <Script source="xxx"> or other methods to separate
the ActionScript code
Add event handlers from ActionScript, not MXML
Try not to write fancy data binding code in MXML
Do not create visual components programmatically unless absolutely necessary
Do as much styling in CSS as possible
Use states when possible to express changes to user interface
![Page 19: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/19.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.19
Skinning and styling
SWF files or GIF/PNG can be used for skinning SWF attached to controls via CSS Scale 9 can be done in SWF or in CSS
CSS gives tons of control for the look of Flex controls
http://weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html
CSS styles can be defined per tag, or per class
![Page 20: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/20.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.20
Working with states – music app
welcomewelcome
top 100top 100
by genreby genre
useruser user - edituser - editlogin
genre listinggenre listingwhich genre?
whichuser?
![Page 21: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/21.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.21
How are the states related?
welcomewelcome
top 100top 100
by genreby genre
user - edituser - edit
genrelistinggenrelisting
(base state)(base state)
(listing)(listing)
useruser
![Page 22: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/22.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.22
When do effects run?
When a specific trigger firese.g., show, hide, and resize
When a transition from one state to another occurs<Transition fromState="xxx“ toState="yyy">
<Effect /></Transition>
When called explicitly through ActionScriptmyEffect.play();
![Page 23: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/23.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.23
Defining your own effects
Using parallel and sequence<Parallel>
<Dissolve duration="500" alphaFrom="1" alphaTo="0" /><Dissolve duration="500" startDelay="500" alphaFrom="0" alphaTo="0" /><Resize duration="500" startDelay="500" widtoTo="50" heightTo="50" />
</Parallel>
Effects can also be defined programmatically
![Page 24: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/24.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.24
Interstate gotchas
Control how the state change interacts with effects by using SetPropertyAction, et. al.
<Transition fromState="from" toState="to"><Sequence target="{startPanel}">
<Dissolve duration="500" alphaFrom="1" alphaTo="0" /><SetPropertyAction property= "visible" value= "false" />
</ Sequence ></Transition>
![Page 25: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/25.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.25
Components
MyApp.mxml
Break your application into pieces using components
<Application><Script>
function initStartPanel() {…}function initDetailPanel() {…}
</Script><HBox>
<Panel id="startPanel" creationComplete="initStartPanel()">
…</Panel><Panel id="detailPanel" creationComplete="initDetailPanel()">
…</Panel>
</HBox></Application>
![Page 26: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/26.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.26
Components
MyApp.mxml
StartPanel.mxml
Break your application into pieces using components
<Application><HBox>
<StartPanel id="startPanel"/><DetailPanel id="detailPanel"/>
</HBox></Application>
<Panel creationComplete="initStartPanel()"><Script>
function initStartPanel() {…}</Script>
…</Panel>
![Page 27: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/27.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.27
Service calls
Make calls to the server using RPC calls <HTTPService url=“xxx” request=“yyy” />
<WebService wsdl=“xxx”><operation name=“yyy” />
</WebService>
<RemoteObject destination=“xxx”><method name=“yyy” />
</RemoteObject>
![Page 28: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/28.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.28
Service calls
Results come asynchronously; listen for the “result” event.
Alternatively, use data binding.
Results can be retrieved off of the “result” property of the service itself.
Always add fault handlers; you never know whether the connection will work.
![Page 29: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/29.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.29
Data binding
Use curly braces to bind ActionScript expressions to MXML attribute values.
Not all attributes can be bound – use the [Bindable] metadata in order to make a member variable bindable.
In beta 2, properties with getters and setters can also be made bindable through the same metadata.
![Page 30: 2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc](https://reader031.vdocuments.site/reader031/viewer/2022020417/5697c00d1a28abf838cc946b/html5/thumbnails/30.jpg)
2006 Adobe Systems Incorporated. All Rights Reserved.30