gumbo deck

White Master

Replace with a graphic

5.5” Tall & 4.3” Wide

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

Adobe Flash Platform User Group Tour

Piotr Walczyszyn Platform Evangelist

®


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

Today’s workflow produces static designs that have limited use in development

Design Development

  Visual Design   Define user experience

  Import visual assets   Implement user experience   Development

®


New Workflow

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

Design Development

  Visual Design   Interaction Design

®


Flash Catalyst features

Interaction Design

Layout Design

Cross- product

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 Builder

Flash Catalyst

Flex framework Aligning Flex brand with the open source

framework underlying both FB and FC

Flex framework, Flex Builder

Consistent branding for tools

®


SDK – Major Themes

Design in Mind

Developer Productivity

Framework Evolution

  Spark component model

  MXML 2009

  FXG

  Improved states, effects, and layout

  High-fidelity Text

  New Video Component

  Compiler performance

  2-way binding

  CSS Improvements

®


Design in MXML?

A designer comes to Flex looking for this:

…But finds this instead

<Canvas> <Label text=“name:” /> <Button /> <DataGrid /> </Canvas>

Flash / AIR runtime

Flex UI Framework   Designers need freedom to design

  Mxml needs support for:   Primitives graphics.

  Flexible, expressive layout

  Rich animation and States

®


Halo Component Model

Graphics Layout Animation Parts States Behavior Logic Data

Component Skin /

®


ActionScript MXML

Separation of behavior from appearance

Spark Component Model

Graphics Layout Animation Parts States

Component Skin

CSS properties

Behavior Logic Data

®


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)

  Full range of fills and strokes (solid, transparent, bitmap, linear and radial gradients)

  Masking, filters, blend modes, and more. (blur, glow, dropshadow, screen, multiply…)

  Color and 2D transformations (rotate, scale, tint, brighten…)

  Integrated text, bitmaps

16

<Graphic> <Path data=“ ….. “> <fill> <LinearGradient angle=“90”>…. </LinearGradient> </fill> </Path> <Path blendMode=“screen” data=“…” > <fill> <LinearGradient angle=“45”>… </LinearGradient> </fill> </Path> <GraphicText text=“MXML Graphics”> <filters> <Glow color=“#00FF00” strength=“3” … /> </filters> </GraphicText> </Graphic>

®


Compile Time (FXG) Graphics

FXG: graphics format based on MXML

  Understood by Design tools

  Based on flash rendering model

  Static – no binding, layout, event handlers, styling, etc

  Optimized by compiler (really important for great performance)

Tools to Design and Develop Interactive Content

Animation

Visual Layout

Prototyping

Design/Develop Workflow

Eclipse IDE

Code Profiling

Debugging

Flash CS4 Professional

Flash Catalyst

Flash Builder

Tools to Design and Develop

After Effects Illustrator Fireworks Photoshop

FXG

®


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   Verbose

  hierarchy difficult to manage, factor, tool

  Hard to optimize

<states> <State name=”login”> <SetProperty target=“{goBtn}” name=“label” value=“…” /> </State> <State name=”register”> <SetProperty target=“{goBtn}” 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 ‘State’ tag

  Describe ‘alternate views’ of your markup

  Change values, bindings, event handlers

  Include and exclude components as easily as setting visibility

  Unscoped entries specify the ‘default’ for all states

  Use in 2009 documents – 2006 still supports legacy states.

<states> <State name=”login"/> <State name=”register"/> </states>

<Group> <TextBox text=“username:” /> <TextInput /> <TextBox text=“password:” /> <TextInput /> <Button label=“new user?” /> <Checkbox includeIn=“register” label=“agree to terms” /> <Button label=“log in” label.register=“sign up” /> </Group>

®


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

  Remain true to the design

  Facilitate workflows

  Eliminate manual steps

Data-Centric Development

  Support many different back-ends

  Simplify managing data

  Generate data-aware UI

IDE Productivity & Testing

  Improve hand-coding

  Speed up tuning & debugging

  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

  ColdFusion

  PHP

  Java

  SOAP

  REST

  Flash Builder examines service

  Builds design-time model

  Configure data types and operations

  Databinding

  UI Generation

  Paging

  Data-management

2. Model Service 1. Define Service 3. Bind Operations to Flex UI components

®


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   Extensible – add support for any other back-end

<WSDL>

®


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

White Master

Replace with a graphic

5.5” Tall & 4.3” Wide


Q & A

®


gumbo deck

Technology

adobe confidential

adobe systems incorporated

flex framework copyright

development copyright

appearance copyright

coding copyright

fc copyright

layout design features1