Flex 4 Gregg Suzukawa

Flex 4 Overview Codename Gumbo Flex 4 development focused on three main themes Design in Mind Developer Productivity Framework Evolution 1

Codename Gumbo

Flex 4 development focused on three main themes

Design in Mind

Developer Productivity

Framework Evolution

Flash Builder 4 Beta Previously Flex Builder Improved debugger New features such as profiling Supports ASDoc tooltips 2

Previously Flex Builder

Improved debugger

New features such as profiling

Supports ASDoc tooltips

Flash Builder Profile 3

Flash Catalyst Beta Interaction design tool for rapidly creating user interfaces without coding. Transform artwork from Photoshop, Illustrator or Fireworks into user interfaces Compatible with Flash Builder 4 4

Interaction design tool for rapidly creating user interfaces without coding.

Transform artwork from Photoshop, Illustrator or Fireworks into user interfaces

Compatible with Flash Builder 4

Spark New component architecture Built on top of existing Halo architecture Includes approximately 30 new components Easily integrates with Flash Catalyst 5

New component architecture

Built on top of existing Halo architecture

Includes approximately 30 new components

Easily integrates with Flash Catalyst

Improved Layout Model Goal was to decouple the layout scheme from the rules of individual components New runtime-assignable layouts include full support for 2D rotations and scalibility New 3D capabilities 6

Goal was to decouple the layout scheme from the rules of individual components

New runtime-assignable layouts include full support for 2D rotations and scalibility

New 3D capabilities

Improved Animation Engine Improved effects and transitions Supports auto-reversing of transitions Transformations on all three planes Complex keyframe-base animations 7

Improved effects and transitions

Supports auto-reversing of transitions

Transformations on all three planes

Complex keyframe-base animations

3D Animation Example 14

FXG (Flash XML Graphics) New XML-based vector graphics for Flash and Flex applications Similar to SVG (Scalable Vector Graphics) Easy to include in source control Maps directly to MXML 8

New XML-based vector graphics for Flash and Flex applications

Similar to SVG (Scalable Vector Graphics)

Easy to include in source control

Maps directly to MXML

FXG Example 9

MXML 2009 New namespaces fx for MXML 2009 s for Spark mx namespace is preserved Example – MXML using both Halo and Spark components 10

New namespaces

fx for MXML 2009

s for Spark

mx namespace is preserved

Example – MXML using both Halo and Spark components

MXML Example 11

States Improved layout over Flex 3 Flex 4 promotes states functionality to a full MXML language feature Much simpler to code in Flex 4 12

Improved layout over Flex 3

Flex 4 promotes states functionality to a full MXML language feature

Much simpler to code in Flex 4

States Example 13

ASDoc support Improved ASDoc tool for ActionScript and MXML Inline code hints New ASDoc view 15

Improved ASDoc tool for ActionScript and MXML

Inline code hints

New ASDoc view

ASDoc Example 16

Upgraded Binding Updates to the binding destination will be copied back to the source. Improved two-way data binding 17

Updates to the binding destination will be copied back to the source.

Improved two-way data binding

Text Primitives Uses the new text engine in Flash Player 10 Text object model is defined by the Flash Text Engine (FTE) and Text Layout Framework (TLF) Supports controlling text metrics, vertical text and bidirectional text Uses DefineFont4 embedded font format 18

Uses the new text engine in Flash Player 10

Text object model is defined by the Flash Text Engine (FTE) and Text Layout Framework (TLF)

Supports controlling text metrics, vertical text and bidirectional text

Uses DefineFont4 embedded font format

Catalyst Example 19

Flash Builder Example 20

The End 5 minutes of question time starts now!

Questions 4 minutes left!

Questions 3 minutes left!

Questions 2 minutes left!

Questions 1 minute left!

Questions 30 seconds left!

Questions TIME IS UP!