Gumbo Deck

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

Agenda

  Flash Platform and Overview
  Catalyst
  Builder
  Framework
  Demos
  Q&A

®


Flash Catalyst

A professional interaction
design tool for rapidly
creating the user experience
of applications and
interactive content without
coding


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

®


New Workflow

Design Development

  Visual Design
  Interaction Design

The new workflow produces functional designs that can be leveraged in development

®


Flash Catalyst features

Interaction
Design

Cross-
Layout
product
Design
Integration

®


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

®


Layout Design Features

1.  Artboard
2.  Pixel-level Placement
3.  Layers Panel
4.  Properties Panel
5.  Vector Drawing Tools
6.  Layout productivity tools

®


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

®


Flex Framework


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
®


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

®


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

®


Halo Component Model

Component / Skin

Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data

®


Spark Component Model

ActionScript MXML

Component Skin

Graphics
Behavior Layout
Logic Animation
CSS Parts
Data
properties States

Separation of behavior from appearance
®


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

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

®


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 }

®


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>

®


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.

®


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

®


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
®


Flash Builder 4

Flex Builder 3
plus new features


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

®


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

®


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

®


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

®


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

®


Coding Productivity

  Package Explorer

  Getter/setter generation

  Code indentation (auto-indent)

  Custom file templates

  ASDoc integration

®


Testing and Deployment

  Network Monitor

  Unit Testing

  Code Coverage

  Command-line Builds

®


DEMO


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

®


Q&A Replace with
a graphic
White Master
5.5” Tall & 4.3” Wide


®


Gumbo Deck

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Gumbo Deck

Similar to Gumbo Deck (20)

More from Транслируем.бел

More from Транслируем.бел (20)

Recently uploaded

Recently uploaded (20)

Gumbo Deck