1. Adobe Flash Platform
User Group Tour
Replace with
a graphic
White Master
5.5” Tall & 4.3” Wide
Piotr Walczyszyn
Platform Evangelist
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

2. Agenda
 Flash Platform and Overview
 Catalyst
 Builder
 Framework
 Demos
 Q&A
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2

3. Flash Catalyst
A professional interaction
design tool for rapidly
creating the user experience
of applications and
interactive content without
coding
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3

4. Current Workflow
Design Development
 Visual Design  Import visual assets
 Define user experience  Implement user experience
 Development
Today’s workflow produces static designs that have limited use in development
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4

5. New Workflow
Design Development
 Visual Design
 Interaction Design
The new workflow produces functional designs that can be leveraged in development
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5

6. Flash Catalyst features
Interaction
Design
Cross-
Layout
product
Design
Integration
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6

7. Interaction Design Features
1. Organize projects into Pages and
objects into States
2. Interaction Design without writing code
3. Turn static artwork into a dynamic
components
4. Create a list from artwork
5. Design-Time Data
6. Extensibility through Components
7. Interactions HUD (Heads-up Display)
8. Library Panel
9. States Panel
10. Transitions and Action Sequences
11. Timeline panel
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7

8. Layout Design Features
1. Artboard
2. Pixel-level Placement
3. Layers Panel
4. Properties Panel
5. Vector Drawing Tools
6. Layout productivity tools
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8

9. Cross-Product Integration
1. Integration with Photoshop and Illustrator
2. Integration with Flash Builder
3. Dynamic-Media support (Audio, Video)
4. Flash Player 10 support
5. Preview project in Browser
6. Export to Flash Player
7. Flex 4 framework Support
8. Windows and MacOS (Intel) support
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9

10. Flex Framework
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10

11. Flex Branding Change
FLEX 3 GENERATION FLEX 4 GENERATION
Flash Flash
Builder Catalyst
Consistent branding for tools
Flex framework,
Flex Builder
Flex framework
Aligning Flex brand with the open source
framework underlying both FB and FC
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11

12. SDK – Major Themes
 Spark component model
Design in  MXML 2009
Mind  FXG
 Compiler performance
Developer
 2-way binding
Productivity
 CSS Improvements
 Improved states, effects,
and layout
Framework
Evolution  High-fidelity Text
 New Video Component
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12

13. Design in MXML?
A designer comes to Flex looking for …But finds this instead
this:
<Canvas>
<Label text=“name:” />
<Button />
<DataGrid />
</Canvas>
 Designers need freedom to design
Flex UI Framework
 Mxml needs support for:
 Primitives graphics.
 Flexible, expressive layout
 Rich animation and States
Flash / AIR runtime
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13

14. Halo Component Model
Component / Skin
Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14

15. Spark Component Model
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Logic Animation
CSS Parts
Data
properties States
Separation of behavior from appearance
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15

16. MXML For Graphics
 MXML Graphics library providing rich
primitive support
 Simple Shape primitives
(Rectangles, rounded rects, ellipses, circles)
 Complex Paths
(Linear, Quadratic, and Bezier curve segments)
<Graphic>
 Full range of fills and strokes <Path data=“ ….. “>
(solid, transparent, bitmap, linear and radial <fill>
<LinearGradient angle=“90”>….
gradients) </LinearGradient>
</fill>
</Path>
 Masking, filters, blend modes, and more. <Path blendMode=“screen” data=“…” >
<fill>
(blur, glow, dropshadow, screen, multiply…) <LinearGradient angle=“45”>…
</LinearGradient>
</fill>
 Color and 2D transformations </Path>
(rotate, scale, tint, brighten…) <GraphicText text=“MXML Graphics”>
<filters>
<Glow color=“#00FF00” strength=“3” … />
 Integrated text, bitmaps </filters>
</GraphicText>
</Graphic>
®
1 Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
6

17. Compile Time (FXG) Graphics
Tools to Design and Develop
FXG: graphics format based on
MXML
 Understood by Design tools Flash CS4 Flash Flash
Professional Catalyst Builder
 Based on flash rendering model Interactive
Prototyping Eclipse IDE
Content
Tools to Design and Develop
 Static – no binding, layout, event Design/
Animation Develop Code Profiling
handlers, styling, etc Workflow
Visual Layout Debugging
 Optimized by compiler (really
important for great performance)
FXG
After Effects Illustrator Fireworks Photoshop
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17

18. Productivity Improvements
 2-way binding
 text=“@{myModel.data}”
 <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />
 Advanced CSS
 Multiple Class Selectors:
<Button id=“upButton” styleName=“default tiny” />
 ID Selectors:
#upButton { fontSize: 14 }
 Descendant Selectors:
s|Scrollbar #upButton { baseColor: #FF8888 }
 Pseudo Selectors:
s|Scrollbar #upButton:over { baseColor: #8888FF }
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18

19. States
 Difficult to use <states>
<State name=”login”>
 Verbose <SetProperty target=“{goBtn}”
name=“label” value=“…” />
 hierarchy difficult to </State>
<State name=”register”>
manage, factor, tool <SetProperty target=“{goBtn}”
 Hard to optimize name=“label” value=“…” />
<AddChild target=“grp”>
<Checkbox label=“Agree to terms” />
</AddChild>
</State>
</states>
<Group id=“grp” >
<TextBox text=“username:” />
<TextInput />
<TextBox text=“password:” />
<TextInput />
<Button label=“new user?” />
<Button id=“goBtn”
</Group>
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19

20. States
 Declare your states with a <states>
<State name=”login"/>
‘State’ tag <State name=”register"/>
</states>
 Describe ‘alternate views’
of your markup <Group>
<TextBox text=“username:” />
 Change values, bindings, <TextInput />
event handlers <TextBox text=“password:” />
<TextInput />
 Include and exclude <Button label=“new user?” />
<Checkbox includeIn=“register”
components as easily as label=“agree to terms” />
setting visibility <Button label=“log in”
label.register=“sign up” />
 Unscoped entries specify </Group>
the ‘default’ for all states
 Use in 2009 documents –
2006 still supports legacy
states.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20

21. Layout
 Runtime assignable
 Supports 2D and 3D transformations on contained objects
 Supports virtualization directly, so it’s not only Lists that can be
virtualized
 Goodbye hacky Repeater!
 Smooth scrolling
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21

22. High-Fidelity Text
 FTE: New low level text engine (player
10)
 TLF: New text layout library built on top of
FTE.
 Benefits:
 Soft hyphens
 Baseline control (e.g., superscripts and
subscripts)
 Right, center, and decimal tabs
 Vertical justification
 Multiple columns
 Ligatures, capitalization styles, digit styles
 Integrated Rendering of device fonts (a.k.a. I
can fade and rotate my text)
 Bi-Directional text
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22

23. Flash Builder 4
Flex Builder 3
plus new features
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 23

24. Flash Builder 4 Themes
Support both design and data focused apps in a productive environment
Designer/Developer Data-Centric IDE Productivity &
Development Testing
 Remain true to the
design  Support many different  Improve hand-coding
back-ends
 Facilitate workflows  Speed up tuning &
 Simplify managing data debugging
 Eliminate manual
steps  Generate data-aware UI  Fit in with established
testing and build
processes
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24

25. Designer/Developer Features
 Adobe Flash Catalyst Workflow
 Open Catalyst projects (FXP) in
Builder
 New states editor
 Adobe Flash Professional
Workflow
 New “Flash Component”
 Launch Flash Professional, create or
edit, and return to Builder
 Themes Support
 New UI to apply themes
 Easily manage the look & feel of Flex
components in an application
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25

26. Data-centric Development
3. Bind Operations to
1. Define Service 2. Model Service
Flex UI components
 ColdFusion  Flash Builder  Databinding
examines service
 PHP  UI Generation
 Builds design-time
 Java Paging
model 
 SOAP Data-management
 Configure data 
 REST types and
operations
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26

27. Data Centric Development: Supported Services
 ColdFusion
 Consume any ColdFusion Component (CFC)
 New workflow with ColdFusion Builder to auto-generate
data access CFCs
 PHP
 Built-in support for Zend Framework
 Use Zend components or any PHP5 classes
 New workflow with Zend Studio for class generation
 Java
 BlazeDS
 LiveCycle Data Services ES – new workflow with
LiveCycle Model Editor
 HTTP, REST, SOAP Web Services <WSDL>
 Extensible – add support for any other back-end
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27

28. Data Centric Development: Data-bound UI
 Drag and drop to bind
operation results to UI
 Invoke operations from
component events
(e.g. button clicks)
 Generate Master/Detail
relationships
 Generate Charts
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28

29. Coding Productivity
 Package Explorer
 Getter/setter generation
 Code indentation (auto-indent)
 Custom file templates
 ASDoc integration
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29

30. Testing and Deployment
 Network Monitor
 Unit Testing
 Code Coverage
 Command-line Builds
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30

31. DEMO
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31

32. Tools Summary
 Flex 4 framework is the
foundation of both tools
 New tools deliver increased
productivity, integration with
servers and services and
high-fidelity applications
 Flex Builder becomes Flash
Builder
 First public preview of Flash
Catalyst
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32

33. Q&A Replace with
a graphic
White Master
5.5” Tall & 4.3” Wide
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 33

34. ®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34