Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,300
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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