Flex 4<br />Ihor Matrofaylo<br />
Adobe Flash Catalyst<br />Adobe Flash Builder 4<br />Work flow with Flash Catalyst and Flash Builder<br />FXG Support<br /...
Adobe Flash Catalyst<br />Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating expre...
Adobe Flash Builder 4<br />Flash Builder 4, formerly known as Flex Builder, is the latest version of the Eclipse based IDE...
Work flow with Flash Catalyst and Flash Builder 4<br />
Work flow with Flash Catalyst and Flash Builder 4<br />Demo. Adobe Flash Catalyst for design.<br />Demo. Adobe Flash Build...
FXG Support<br />FXG (Flash XML Graphics) is an xml graphics file format being developed by Adobe Systems, which enables p...
Updated Layout Model<br />Spark component<br />Halo component<br />Canvas<br />Group<br />vscrollbars<br />vscrollbars<br ...
Spark Component Architecture<br />Flex 4 Component Lifecycle Methods<br />Overriding UIComponent methods<br />createChildr...
Skinning Enhancements<br />Spark component<br />Spark Skin<br />[HostComponent] –<br />points to the component you're skin...
Skinning Enhancements<br />Demo. Skinning.<br />spark.components.Button & spark.skins.spark.ButtonSkin<br />
Improvements of View States<br />Flex 3 View State model<br />Flex 4 View State Model<br />Base View State<br />State A<br...
Compiler Performance<br />Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25...
New Text Capabilities<br /><ul><li> High quality of text rendering and support of CFF (Compact Font Format)
 Font size: MIN = 1 & MAX = 720
Upcoming SlideShare
Loading in...5
×

Flex 4

824

Published on

New features of Flex 4. Differences between Flex 3 and Flex 4

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
824
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Create simple design in AI.Create new project from AI design in Catalyst.Save as FXP project.Open save projectin Flash Builder 4.
  • Speak about FXG format.
  • In the new Spark component model, core logic, skinning, and layout have been broken out so that they are handled independently of one another. The Spark component model is built on top of the Halo component model. Basically, that means that it extends from Halo&apos;s core base class UIComponent, allowing Flex4 to be adopted incrementally and Flex 3 components to be used in Flex 4 applications.http://flexstuff.co.uk/wp-content/uploads/examples/coverflowlayout/Coverflow_Flex4.swfhttp://flexstuff.co.uk/wp-content/uploads/examples/timemachinelayout/TimeMachine_Flex4.swf
  • Speak about new methods: addElement(), addElementAt(). Now addChild() method throws exception.Declaration without adding on a stage in MXML.
  • Applying skinsAttach skin; Skin parts. Base classes for skin. Meta tags. How define skin and aplly it on component.
  • Show states on demo.
  • A major pain point most everyone developing Flex 3 applications has encountered is poor compiler performance. Thus, one of the published goals for Gumbo was to improve compiler performance in Flex 4. At this point, there are not any official benchmarks published from this work. However, Adobe&apos;s Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring. He also said that to achieve a 3-4 times improvement, a redesign will be required.
  • Show TLF graphic.Some features.
  • Flex 4

    1. 1. Flex 4<br />Ihor Matrofaylo<br />
    2. 2. Adobe Flash Catalyst<br />Adobe Flash Builder 4<br />Work flow with Flash Catalyst and Flash Builder<br />FXG Support<br />Updated Layout Model<br />Spark Component Architecture<br />Skinning Enhancements<br />Improvements of View States<br />Compiler Performance<br />New Text Capabilities<br />Agenda<br />
    3. 3. Adobe Flash Catalyst<br />Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating expressive interfaces and interactive content without writing code. Create interactive portfolios, product guides, microsites, site navigation, interfaces for RIAs and more.<br />When is Flash Catalyst shipping?<br />The final product will ship in the first half of 2010.<br />http://labs.adobe.com/technologies/flashcatalyst/<br />
    4. 4. Adobe Flash Builder 4<br />Flash Builder 4, formerly known as Flex Builder, is the latest version of the Eclipse based IDE for application developers. The new version comes with a handful of updates including: conditional debug break points, more refactoring tools, and FlexUnit 4 support. As always, it includes MXML, ActionScript 3, CSS editors, a visual designer, and the Flex performance and memory profiler (profiler only in the Professional version).<br />When will the final version of Flash Builder 4 be available?<br />We expect it to be in the first half of 2010.<br />http://labs.adobe.com/technologies/flashbuilder4/<br />
    5. 5. Work flow with Flash Catalyst and Flash Builder 4<br />
    6. 6. Work flow with Flash Catalyst and Flash Builder 4<br />Demo. Adobe Flash Catalyst for design.<br />Demo. Adobe Flash Builder 4 for development.<br />
    7. 7. FXG Support<br />FXG (Flash XML Graphics) is an xml graphics file format being developed by Adobe Systems, which enables portability of assets between tools.<br />PSD<br />AI<br />PNG<br />FXG<br />MXML<br />FXG<br />http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification<br />
    8. 8. Updated Layout Model<br />Spark component<br />Halo component<br />Canvas<br />Group<br />vscrollbars<br />vscrollbars<br />layout<br />layout<br />h scrollbars<br />h scrollbars<br />http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/<br />
    9. 9. Spark Component Architecture<br />Flex 4 Component Lifecycle Methods<br />Overriding UIComponent methods<br />createChildren()<br />commitProperties()<br />invalidateProperties()<br />measure()<br />invalidateSize()<br />updateDisplayList()<br />invalidateDisplayList()<br />Overriding SkinnableComponent methods<br />attachSkin(), detachSkin()<br />addElement()<br />partAdded(), partRemoved()<br />getCurrentSkinState()<br />invalidateSkinState()<br />
    10. 10. Skinning Enhancements<br />Spark component<br />Spark Skin<br />[HostComponent] –<br />points to the component you're skinning, and it is required to access the component from the skin.<br />[SkinPart]–<br />defines part of the host component.<br />[SkinState]–<br />defines state of the host component.<br />http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning<br />https://www.adobe.com/devnet/flex/articles/flex4_skinning.html<br />
    11. 11. Skinning Enhancements<br />Demo. Skinning.<br />spark.components.Button & spark.skins.spark.ButtonSkin<br />
    12. 12. Improvements of View States<br />Flex 3 View State model<br />Flex 4 View State Model<br />Base View State<br />State A<br />Base component<br />State B<br />State A<br />Component A<br />Base component<br />includeIn=“A”<br />State B<br />Component A<br />excludeFrom=“B”<br />Component B<br />Component B<br />http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax<br />
    13. 13. Compiler Performance<br />Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring.<br />http://opensource.adobe.com/wiki/display/flexsdk/Notes+on+Compiler+Performance+Improvements<br />
    14. 14. New Text Capabilities<br /><ul><li> High quality of text rendering and support of CFF (Compact Font Format)
    15. 15. Font size: MIN = 1 & MAX = 720
    16. 16. Vertical text alignment and highlighting
    17. 17. Bidirectional text and over 30 writing systems
    18. 18. Selection, editing and flowing text across multiple columns and linked containers, and around inline images
    19. 19. Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
    20. 20. Cut, copy, paste, undo and standard keyboard and mouse gestures for editing (work with text object model)</li></ul>http://labs.adobe.com/technologies/textlayout/<br />http://labs.adobe.com/technologies/textlayout/demos/<br />
    21. 21. Thank you for attention.<br />
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×