Date post: | 20-May-2015 |
Category: |
Technology |
Upload: | belarus-state-university |
View: | 2,395 times |
Download: | 2 times |
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2
Agenda
Flash Platform and Overview
Catalyst
Builder
Framework
Demos
Q & A
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 4
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
New Workflow
The new workflow produces functional designs that can be leveraged in development
Design Development
Visual Design Interaction Design
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
Flash Catalyst features
Interaction Design
Layout Design
Cross- product
Integration
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 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. 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. 10
Flex Framework
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
Halo Component Model
Graphics Layout Animation Parts States Behavior Logic Data
Component Skin /
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
ActionScript MXML
Separation of behavior from appearance
Spark Component Model
Graphics Layout Animation Parts States
Component Skin
CSS properties
Behavior Logic Data
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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)
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>
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 19
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>
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
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>
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 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. 23
Flash Builder 4
Flex Builder 3 plus new features
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 26
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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 Extensible – add support for any other back-end
<WSDL>
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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. 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. 30
Testing and Deployment
Network Monitor
Unit Testing
Code Coverage
Command-line Builds
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31
DEMO
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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
White Master
Replace with a graphic
5.5” Tall & 4.3” Wide
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 33
Q & A
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34