Adobe flex®
Upcoming SlideShare
Loading in...5
×
 

Adobe flex®

on

  • 3,501 views

Présentation de Flex au NormandyJUG par Sébastien PANNIER.

Présentation de Flex au NormandyJUG par Sébastien PANNIER.

Statistics

Views

Total Views
3,501
Views on SlideShare
3,397
Embed Views
104

Actions

Likes
1
Downloads
43
Comments
0

2 Embeds 104

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Adobe flex® Adobe flex® Presentation Transcript

  • 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
  • Adobe Flash® Qu’est-ce que Flash ?
    Une plate-forme …
    Cross-browser
    CrossOS
    Cross-device
  • Adobe Flash® Qu’est-ce que Flash ?
    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
  • Démo
  • 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
    …………….
  • Adobe Flex® Highlyscalable
  • Adobe Flex® Highlyscalable
    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…)
  • Adobe Flex® Highlyscalable
    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.
  • Adobe Flex® Highlyscalable
    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
  • 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
  • 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
  • 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 !"
  • Démo
  • 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 ?