Adobe flex®

Adobe Flex®: Premiers pas
Présenté par
Sébastien PANNIER

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

Présentation

Présentation
Je me présente…
Ingénieur en Etudes et Développement
Team Partners Normandie
Ex Formateur Photoshop

Ce que j’aime…
Présentation
E-onVue Xtream®
AutodeskMaya®
Eyeon
Digital Fusion®

Présentation
Contact…
pannierseb@gmail.com
harok@live.fr
Harok_Seb
Harok [Seb]
spannier@tpg-normandie.com

Adobe Flash®

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)

Adobe Flash® Historique
Adobe CS5®
2010
FP 10.1 + Flash Builder®
2008
Flex 3.0®
Flash CS4 Pro + manipulation 3D basique
2006
Flash Player 9 + Flex 2®
Actionscript 3.0 + Flash CS3 Pro
2005
Flash Basic 8
Adobe System rachète Macromedia
2004
Flex 1.0®
Macromedia distribue le produit 15 000$ par CPU
Actionscript 2.0
2003
Flash Player 7
Actionscript 1.0 + support XML, HTML text…
2000
Flash Player 5
Macromedia rachète FutureSpash
Fin 1996
Flash
Vient concurrencer MacromediaShockwave®
1996
FutureSplashAnimator
1995
Application dessin vectoriel par Jonathan Gay
SmartSketch

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

Une plate-forme …
Cross-browser
CrossOS
Cross-device

Une plate-forme riche
Air
Livecycle Data Services
Scene7
Flash Catalyst
Flash Builder
Business Catalyst
Flash Media Server
Flash

Adobe Flash® Statistiques
89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!
Source : Millward Brown survey, Décembre 2009

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

Adobe Flash® Courte démo
Mais comment ça marche ?!?
Exemple Flash CS5 Extended

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…

Adobe Flex®

Adobe Flex®
Qu'est-ce que Flex ?!?

Adobe Flex® Un langage déclaratif (tags)
MXML ("Magic" or "Macromedia" "eXtensibleMarkupLanguage")
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

Adobe Flex® Un Framework Open Source gratuit
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, AfterEffects, InDesign et Fireworks
ASDoc pour les composants MXML
Open Source Media Framework (OSMF)

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)

Adobe Flex® Quelques aperçus …
Source : FlexSpaces

Adobe Flex® Quelques aperçus …
Source : FlexActive

Adobe Flex® Tour de Flex
" But waitthere’s more! Check this out… "

Adobe Flex® AIR® (Adobe IntegratedRuntime)
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)

Adobe Flex® Highlyscalable
SpringActionscript
Cairngorm
BlazeDS
Guasax
Vara
PureMVC
Mate
FlexUnit
FlexPMD
LiveCycle Data Services
Swiz
GraniteDS
Stratus
……………..
MVC
Transfer Object Assembler
IoC
Event DrivenDevelopment
Observer
Model DrivenDevelopment
Unit Testing
Profiling
deepLinking
…………….

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…)

Benchmark
Conditions : tests effectués le 14/04/2010 via le site themidnightcoders.com
*Valeurs exprimées en ms, la plus faible étant la plus rapide.

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-centricdevelopment : 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)
Mavenbuilds

Présentation des démos

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

Démo Frameworks
Mate (version 0.8.9)
Event – drivenFlexframework 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

Démo Frameworks
Event Bus
Event Map
Event Map
EventHandlers
1
2
3
5
ServiceInvoker
4
ModelManager
View
Event DrivenDevelopment

Démo Frameworks
LocalizationMap
Locale files
Classes
Resource proxy
component
Resource proxy
Locale fr_FR
Resource proxy
component
Resource proxy
Locale us_EN
Resource proxy
component
Resource proxy
Resource proxy
Injection dans les composants

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…..

Démo Frameworks
light
Camera
3D object
Scene3D
Viewport3D

Démo Frameworks
SpringActionscript(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

Démo Frameworks
Dépendance
CLASSE B
CLASSE A
Dépendance
CLASSE B
Injection
IoC
CLASSE B
CLASSE A
Injection
CLASSE B
Principe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"

Conclusion

Conclusion
La concurrence
JavaFX
Silverlight
HTML5
GWT
AJAX
OpenLaszlo

Conclusion
Quelques liens….
Adobe : http://www.adobe.com
Mate : http://mate.asfusion.com
SpringActionScript : 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

Conclusion
Questions ?

http://www.normandyjug.org	47
http://www.slideshare.net	19

Adobe flex®

by finalspy on Apr 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 66

Statistics

Adobe flex^® — Presentation Transcript

Adobe flex®

by finalspy on Apr 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 66

Statistics

Adobe flex® — Presentation Transcript

Adobe flex^® — Presentation Transcript