Normandy JUG

Adobe Flex®: Premiers pasPrésenté parSébastien PANNIER

Normandy JUG

• Présentation• Adobe Flash®• Adobe Flex®• Démos• Conclusion

SOMMAIRE

Normandy JUG

Présentation

Normandy JUG

Présentation

Je me présente…

Ingénieur en Etudes et Développement Team Partners Normandie

Ex Formateur Photoshop

Normandy JUG

Ce que j’aime…

Présentation

E-onVue Xtream®

AutodeskMaya®

EyeonDigital Fusion®

Normandy JUG

Présentation

pannierseb@gmail.com

harok@live.fr

Harok_Seb

Harok [Seb]

Contact…

spannier@tpg-normandie.com

Normandy JUG

Adobe Flash®

Normandy JUG

Adobe Flash®

Qu’est-ce que Flash ?Repose sur l’Actionscript– Langage basé sur ECMA Script (ECMA-262 edition3)

à l’instar de Javascript et Jscript– Langage Objet (depuis la version 3 en 2006)– Exécuté à partir du fichier SWF (ShockWave Flash)

(prononcez "souiffe")– Cible : applications RIA (Rich Interface Application)

Normandy JUG

Adobe Flash® Historique

FutureSplash Animator

SmartSketch 1995 Application dessin vectoriel par Jonathan Gay

1996 Vient concurrencer Macromedia Shockwave®

Fin 1996Flash Macromedia rachète FutureSpash

Flash Player 5 2000 Actionscript 1.0 + support XML, HTML text…

Flash Player 7 2003 Actionscript 2.0

2006Flash Player 9 + Flex 2® Actionscript 3.0 + Flash CS3 Pro

2010FP 10.1 + Flash Builder® Adobe CS5®

2004Flex 1.0® Macromedia distribue le produit 15 000$ par CPU

2005Flash Basic 8 Adobe System rachète Macromedia

2008Flex 3.0® Flash CS4 Pro + manipulation 3D basique

Normandy JUG

Adobe Flash® Qu’est-ce que Flash ?

• Une plate-forme multimedia– Images : Gif, Png, Jpg,

Ia (Illustrator Vector Shape)

– Codecs Audio : MP3, ADPCM, Nellymoser, AAC & HE-AAC, Speex

– Codecs Video : Sorenson Spark, On2 VP6, H264, M4A & M4V & MP4,

MOV, 3GP

Normandy JUG

• Une plate-forme …

Adobe Flash® Qu’est-ce que Flash ?

Cross-browserCrossOS

Cross-device

Normandy JUG

• Une plate-forme riche

Livecycle Data Services

Flash Catalyst

Business Catalyst

Scene7

Flash Media Server

Flash Builder

Air

Flash

Adobe Flash® Qu’est-ce que Flash ?

Normandy JUG

Adobe Flash® Statistiques

Source : Millward Brown survey, Décembre 2009

89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!

Normandy JUG

Adobe Flash® Et Open Screen Project

Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR®

Normandy JUG

Adobe Flash® Courte démo

Mais comment ça marche ?!?

Exemple Flash CS5 Extended

Normandy JUG

Démo

Normandy JUG

Adobe Flash® Flash CS4 Extended

• Flash CS5 Extended, un IDE inadapté pour un développement standardisé d’applications :– IDE orienté designer– Auto complétion limitée– Pas de refactoring– Pas fait pour quoi…

Normandy JUG

Adobe Flex®

Normandy JUG

Adobe Flex®

Qu'est-ce que Flex ?!?

Normandy JUG

Adobe Flex® Un langage déclaratif (tags)

MXML ("Magic" or "Macromedia" "eXtensible Markup Language")

• Langage basé sur XML (Macromedia en 2004)– Façonner l’interface client– Déclarer les aspects non visuels de l’application (Data services…)

• Ecriture "proche" de HTML– Tags pour chaque élément– Capacité de créer ses propres tags pour des composants personnalisés

Normandy JUG

Flex SDK 4 (21/03/2010)

• Compiler, Framework, Debugger• Les nouveautés:

– Composants SPARK (Montés sur les composants HALO )• Meilleur méchanisme pour les développeurs et désigners (Séparation Vue – Métier)• Intégration dans Flash Catalyst

– Format FXG• Echange direct de réalisations provenant de

Illustrator, After Effects, InDesign et Fireworks

– ASDoc pour les composants MXML– Open Source Media Framework (OSMF)

Adobe Flex® Un Framework Open Source gratuit

Normandy JUG

Adobe Flex® Une librairie

• Une multitude de composants natifs incluant :

– Data binding– Drag ‘n drop– Display layout, look & feel– Séparation du visuel du fonctionnel (Flex 4)

Normandy JUG

Adobe Flex® Quelques aperçus …

Source : FlexSpaces

Normandy JUG

Adobe Flex® Quelques aperçus …

Source : FlexActive

Normandy JUG

Adobe Flex® Tour de Flex

" But wait there’s more! Check this out… "

Normandy JUG

Adobe Flex® AIR® (Adobe Integrated Runtime)

• Cross – operating system runtime– Permet de créer des "Desktop Applications" à partir de

langages web• AJAX• FLASH

– Code identique à celui de l’application web– S’installe via un exécutable (.air)– Nécessite d’avoir sur la machine l’environnement AIR– Version actuelle 1.5.3 (prochainement 2.0)

Normandy JUG

MVCTransfer Object Assembler

IoCEvent Driven Development

ObserverModel Driven Development

Unit TestingProfiling

deepLinking…………….

Spring ActionscriptCairngormBlazeDSGuasaxVaraPureMVCMateFlexUnitFlexPMDLiveCycle Data ServicesSwizGraniteDSStratus……………..

Adobe Flex® Highly scalable

Normandy JUG

Adobe Flex® Highly scalable

Normandy JUG

Adobe Flex® Highly scalable

Les Protocoles• AMF 3 (Action Message Format)

– Format binaire compact utilisé pour sérialiser / dé sérialiser les objets ActionScript durant les échanges client / serveur

– Date de 2007 (AMF0 => 2001)

• RTMP (Real Time Message Protocol)– Protocole TCP/IP hautement performant destiné à la transmission de sons,

vidéos et messages.– 5 configurations: RTMP, RTMPT, RTMPS, RTMPE, RTMPTE (données

cryptées, SSL…)

Normandy JUG

Adobe Flex® Highly scalable

BenchmarkConditions : tests effectués le 14/04/2010 via le site themidnightcoders.com

Valeur primitive (String)500 appels

Type complexe (objet)500 appels

Array de types complexes

500 itérations – 10 appels

WebServices 23 212 24 177 16 012

HTTP 22 801 23 336 15 350

AMF / Remoting 7 130 7 790 4 657

*Valeurs exprimées en ms, la plus faible étant la plus rapide.

Normandy JUG

Adobe Flex® Highly scalable

Flash Builder (basé sur Eclipse 3.5.1RC35 Galileo)• Editeur pour MXML, ActionScript, CSS (couleurs pour la syntaxe, auto complétion,

génération de code, debug pas à pas interactif…).• WYSIWYG (Editeur visuel) pour les composants MXML et import des UI Flash Catalyst.• Data-centric development : Introspection de services Java, PHP, Cold Fusion, REST et

SOAP pour afficher les méthodes et propriétés + Drag ‘n Drop directement dans les UI.

• Code refactoring• Monitoring de la consommation en ressources (Mémoires, cycles de CPU)• Intégration de FlexUnit pour les tests unitaires• ASDoc en MXML• Command line build• Data Services avancés (BlazeDS, modules real-time

data push/sub messaging via LiveCycle Data Services)• Maven builds

Normandy JUG

Présentation des démos

Normandy JUG

Adobe Flex®

Flash Catalyst• Création rapide d’interfaces riches

• Import et reconnaissance des calques d’artworks provenant de– Photoshop (.psd)– Illustrator (.ia)– Fichier FXG

• Manipulation des états et des transitions en WYSIWYG

• Export au format FXP & SWF

Normandy JUG

Démo

Normandy JUG

Démo Frameworks

Mate (version 0.8.9)

• Event – driven Flex framework basé sur des tags mxml

• Centré sur l’organisation d’un ou plusieurs EventMap– Réception des évènements – Appels des classes gérant les actions par injection

• LocalizationMap : gestion des locales et de leurs injections

Normandy JUG

Event Map

Démo Frameworks

Event Bus

View

EventHandlersServiceInvoker

ModelManager

Event Map

1

2

3

4

5

Event Driven Development

Normandy JUG

Démo Frameworks

Locale fr_FR

Locale us_EN

Resource proxy

componentResource proxy

Resource proxy

Resource proxy

Resource proxy

Resource proxy

Resource proxy

Localization MapLocale files Classes

component

component

Injection dans les composants

Normandy JUG

Démo

Normandy JUG

Démo Frameworks

Away3D• Moteur 3D pour Flash basé sur Papervision3D

(Dernière version: Away3D Lite)– Gestion des primitives (cube, sphere, plane…)– Gestion des lumières (point3D, ambiantLight…)– Gestion des matériaux (Bitmap, Phong, Movie, Dot3…)– Import Maya .obj, 3DS Max .3ds, Collada .dae ….– Z-Depth, Normal Maps, Animation, Occlusion Culling…..

Normandy JUG

Démo Frameworks

Camera

light

Viewport3D

3D object Scene3D

Normandy JUG

Démo

Normandy JUG

Démo Frameworks

Spring Actionscript (version 1.0RC1)• Ramification du framework Java écrit en AS3

– Inversion de contrôle (IoC)– Modèle – Vue – Contrôleur – Services (MVCS)– Extension pour Cairngorm et PureMVC

• But: Externaliser la logique d’intéraction entre les classes.– Découplage– Injection

• Configuration via un ou plusieurs fichiers XML

Normandy JUG

Démo Frameworks

Principe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"

CLASSE A

CLASSE A

CLASSE B

CLASSE B

CLASSE B

CLASSE B

Dépendance

Dépendance

Injection

Injection

IoC

Normandy JUG

Démo

Normandy JUG

Conclusion

Normandy JUG

Conclusion

La concurrence• JavaFX• Silverlight• HTML5• GWT• AJAX• OpenLaszlo

Normandy JUG

Conclusion

Quelques liens….• Adobe : http://www.adobe.com• Mate : http://mate.asfusion.com• Spring ActionScript : http://www.springactionscript.org• Away3D : http://away3d.com

• Total Training : http://www.totaltraining.com• lynda.com : http://www.lynda.com

• Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex

Normandy JUG

Questions ?

Conclusion