Gumbo Deck
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
3,241
On Slideshare
2,953
From Embeds
288
Number of Embeds
4

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 288

http://www.usability.by 257
http://it-job.by 16
http://bafpug.com 14
http://www.health.medicbd.com 1

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