Adobe Flex 4 Overview

28
Flex 4 Gregg Suzukawa

description

This is a lightning talk given by Gregg Suzukawa to our team introducing the new features in Adobe Flex 4 and why we might consider upgrading.

Transcript of Adobe Flex 4 Overview

Page 1: Adobe Flex 4 Overview

Flex 4

Gregg Suzukawa

Page 2: Adobe Flex 4 Overview

Flex 4 Overview

• Codename Gumbo• Flex 4 development focused on three main

themes– Design in Mind– Developer Productivity– Framework Evolution

1

Page 3: Adobe Flex 4 Overview

Flash Builder 4 Beta

• Previously Flex Builder• Improved debugger• New features such as profiling• Supports ASDoc tooltips

2

Page 4: Adobe Flex 4 Overview

Flash Builder Profile

3

Page 5: Adobe Flex 4 Overview

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

Page 6: Adobe Flex 4 Overview

Spark

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

5

Page 7: Adobe Flex 4 Overview

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

Page 8: Adobe Flex 4 Overview

Improved Animation Engine

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

7

Page 9: Adobe Flex 4 Overview

3D Animation Example

14

Page 10: Adobe Flex 4 Overview

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

Page 11: Adobe Flex 4 Overview

FXG Example

9

Page 12: Adobe Flex 4 Overview

MXML 2009

• New namespaces– fx for MXML 2009– s for Spark

• mx namespace is preserved• Example – MXML using both Halo and Spark

components

10

Page 13: Adobe Flex 4 Overview

MXML Example

11

Page 14: Adobe Flex 4 Overview

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

Page 15: Adobe Flex 4 Overview

States Example

13

Page 16: Adobe Flex 4 Overview

ASDoc support

• Improved ASDoc tool for ActionScript and MXML

• Inline code hints• New ASDoc view

15

Page 17: Adobe Flex 4 Overview

ASDoc Example

16

Page 18: Adobe Flex 4 Overview

Upgraded Binding

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

• Improved two-way data binding

17

Page 19: Adobe Flex 4 Overview

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

Page 20: Adobe Flex 4 Overview

Catalyst Example

19

Page 21: Adobe Flex 4 Overview

Flash Builder Example

20

Page 22: Adobe Flex 4 Overview

The End

5 minutes of question time

starts now!

Page 23: Adobe Flex 4 Overview

Questions

4 minutes left!

Page 24: Adobe Flex 4 Overview

Questions

3 minutes left!

Page 25: Adobe Flex 4 Overview

Questions

2 minutes left!

Page 26: Adobe Flex 4 Overview

Questions

1 minute left!

Page 27: Adobe Flex 4 Overview

Questions

30 seconds left!

Page 28: Adobe Flex 4 Overview

Questions

TIME IS UP!