Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

20fév/125

Réunion Tontons Flexeurs Mardi 21 Février avec Deepa Subramaniam et Adam Lehman

Pour ceux qui ne suivent pas le compte Twitter de Michael Chaize et qui sont peut-être passés à côté de l'annonce, il reste encore des places pour la rencontre Tontons Flexeurs de ce mardi 21 février, où vous pourrez notamment découvrir les nouveautés de Flex/FB 4.6 mais surtout de discuter de l'avenir de (Apache) Flex avec Michael, Yann Chevalier mais aussi Deepa Subramaniam et Adam Lehman, respectivement ex product manager du SDK et de Flash Builder.

Pour ceux qui ne peuvent pas s'y rendre, Yann Chevalier a indiqué que la réunion serait diffusée en streaming et qu'il donnerait l'URL sur son compte Twitter avant celle-ci.

Vous pouvez aussi indiquer en commentaire de ce post les questions que vous auriez aimé éventuellement poser, et on essaiera d'obtenir les réponses pour vous lors de la réunion.

Enfin, j'espère avoir le temps de poster rapidement sur le site un point sur Flex, Apache, Spoon et Adobe, qui comprendra évidemment un récapitulatif de ce qui se sera dit mardi.

@dimitri_k

PS: honoré d'être le premier post de la nouvelle ère libre contribution de flex-tutorial et qui vous encourage à profiter vous aussi de cette tribune pour faire vivre la communauté #FlexFr

Remplis sous: Non classé 5 Commentaires
1fév/1215

Flex-tutorial.fr passe en libre contribution et naissance de html5-tutorial.fr

D'habitude, en début d'année, je faisais un petit billet de bonne année sur flex-tutorial. Vous avez donc eu droit depuis Janvier 2008 à:

Bonne année 2009 et quelques statistiques ^^

Bonne année 2010 ^^

Bonne année 2011 :)

Au delà du fait que j'aime mettre des smileys une fois par an dans mes titres d'articles, je partageais aussi quelques statistiques de fréquentation, un bilan et quelques espérances pour l'année à venir. Voici les statistiques de flex-tutorial.fr pour cette année:

Avec un joli bug de Google Analytics qui m'annonce qu'un visiteur a visité le site, sans être un nouveau visiteur, ni un habitué ^^. Au total, près de 1 350 000 visites depuis le début dont 550 000 visiteurs uniques, un chiffre excellent (merci à vous).

Bilan de l'année flex-tutorial.fr

Cette année encore, pas mal de tutoriaux, on a même passé le cap des 1000 tutoriaux (en 4 ans, vous faîtes le compte pour la cadence). J'avais annoncé l'an dernier que j'allais essayer de "faire un tutorial complet sur une application mobile dont le code sera ouvert". Prédiction qui s'est réalisée avec le tutorial Pokémon qui a connu un franc succès:

http://www.flex-tutorial.fr/creer-une-application-ios-android-avec-air-de-a-a-z/

De même pour le tutorial Starling en fil rouge qui semble avoir bien plu:

http://www.flex-tutorial.fr/starling/

J'avais aussi prévu un changement de thème WordPress, qui a été réalisé cette année pour apporter une meilleure clarté, surtout pour les écrans larges.

L'an dernier, j'inaugurai aussi mon compte Twitter:

https://twitter.com/#!/fnicollet

Pas convaincu du tout avant de m'inscrire, j'ai maintenant du mal à m'en passer. Le contenu est un peu différent par rapport à celui de flex-tutorial mais le média est très intéressant.

Au niveau des objectifs que je m'étais fixé sur l'année:

  • Poster des tutoriaux avec exemples de code sur AIR pour mobiles -> Clairement atteint
  • Devenir ACP -> Atteint
  • Organiser plusieurs évènements avec les Flexeurs lyonnais -> Atteint (5 Flex User Group lyonnais)
  • Avoir plusieurs applications publiées sur le BlackBerry AppWorld et l'Android Store -> Plus ou moins. J'ai toujours une application sur le BlackBerry AppWorld (FMyLife) et j'ai du retirer mon application Pokemon Infos de l'Android Market pour des raisons de copyrights
  • Maîtriser complétement Flex 4 (5?) -> Plus ou moins. Flex Mobile 4.5 en tout cas oui.

Rajouter à cela, une invitation au Flex Summit à San Francisco (merci Adobe!), une apparition à Back From MAX Paris, 2 relectures techniques de livres (un en français et un en anglais) et quelques pages dans la revue "PROgrammez!" à paraître prochainement, l'année à été plutôt chargée!

Et pour 2012?

Je ne passe pas mes journées à mettre à jour mon blog, plutôt mes soirées. Pendant qu'il fait encore jour, je travaille toujours pour Business Geografic comme développeur sur des applications cartographiques en Flex. Une très belle année aussi sur le plan professionnel. Notre suite de logiciels se vend très bien et nous avons sorti cette année une application à destination des mobiles / tablettes pour professionnels dont je suis particulièrement fier.

Mais au delà de l'évolution de notre entreprise, on a eu droit à bien d'autres évolutions sur lesquelles nous n'avons aucune incidence. Comme cela l'avait été anticipé un an plus tôt, on a un émergence de nouvelles plateformes (iPad & co), de nouveaux OS ou de mises à jour (iOS 5, Android X, Windows Phone / Nokia et Windows 8 qui pointe le bout de son nez). Beaucoup de "petites guerres", de "trolls" cette année que je ne vais pas récapituler, vous en avez assez lu.

Pour nos futurs développements, nous allons chez Business Geografic prendre la voie HTML5. Quand je parle de "futur", cela signifie une deadline dans 1 an et un produit maintenu pendant au moins 3 à 5 ans. On parle ici de moyen à long terme. Pas mal de raisons pour ce choix qui va donc m'amener à faire beaucoup moins de développement Flex et beaucoup plus de développement "web" alias HTML5.

Malgré une veille technologique active sur Twitter et dans les JUGs, j'ai quelques longueurs de retard sur tout ce qui est développement HTML5. Simple question de timing, quand on rentre chez soi à 20h, on ne peut pas tout faire :) .

Naissance d'un nouveau blog : html5-tutorial.fr

Durant les 4 dernières années, j'ai *beaucoup* appris en assurant la rédaction de flex-tutorial.fr. Même si l'écriture d'articles est laborieuse et chronophage, cela apporte une certaine fierté lorsque l'on reçoit un commentaire ou un mail qui me félicite pour le travail effectué. Mais il est impossible de gérer à la fois flex-tutorial et l'apprentissage du dev HTML, simplement pour une question de timing. Ce blog à lui tout seul me prend 1 à 2h tous les soirs, vous faîtes le calcul :) .

Après les annonces maladroites d'Adobe, on a vu une "petite panique" chez les développeurs Flex, qui se demandaient si ce qu'ils faisaient avait de l'avenir alors qu'Adobe annonçait fièrement que le futur résidait dans HTML5. Réaction complètement logique, car de nombreux développeurs Flex sont justement arrivés à faire du Flex pour ne plus faire de développement HTML, à cause des trop nombreuses contraintes qu'HTML impose.

"Machine arrière" donc puisqu'on demande à ce que les applications fonctionnent dans le navigateur sur iPad. Un mouvement pas facile à effectuer car nous étions bien confortables derrière notre Flash Player, à ne plus se soucier des problèmes d'il y a 10 ans. Mais vous êtes peut-être maintenant dans la même situation que moi, vos clients ou vos responsables (ou les 2) vous demandent de faire du HTML et vous avez un train de retard.

C'est dans cet esprit que va être créé et rédigé html5-tutorial.fr:

http://html5-tutorial.fr/

Il ne sera pas "dédié" aux développeurs Flex spécifiquement mais plutôt aux développeurs qui cherchent à réaliser des applications "RIA" sans Flex. Vous avez entendu parler de CSS3, de "node.js", de "Backbone", de "templating JS" ou de "WebGL", vu des démonstrations plus ou moins convaincantes mais jamais mis en pratique. Et on sait bien que souvent, sur le papier, c'est magnifique mais que dans la vraie vie, c'est pas aussi simple.

Prenez le "templating" en JS, pratique pour faire des "fragments" ou des composants applicatifs. Très bon concept et pourtant quand vous verrez les démonstrations, vous aurez sûrement une application "To-do list" avec de pauvres "<li>" dans un "<ul>". Ça fait peur ou ça fait rire, à vous de voir :P .

Lorsque j'ai commencé flex-tutorial, à l'époque de Flex 2.0.1, je n'y connaissais rien (c'était mon premier stage chez Business Geografic). Avec pas mal d'entraînement, de lecture et de pratique, je peux vous faire à peu près ce que vous voulez en Flex en 2 minutes. J'ai envie d'être aussi à l'aise avec le développement HTML par la suite.

Le maître mot de ce blog sera donc *productivité*.

Pour l'instant, le blog est bien vide mais je vais commencer à l'alimenter rapidement. Celui-ci sera en français, car c'est ce qui a fait le succès de flex-tutorial à la base.

Flex-tutorial.fr passe en libre contribution

Comme je l'ai dit plus haut, je n'aurai pas le temps de m'occuper de flex-tutorial et de ce nouveau blog. J'estime qu'il y a aujourd'hui suffisamment de  ressources sur Flex pour pouvoir apprendre à développer avec cette technologie. Je vais donc me concentrer sur ce nouveau blog. Cela ne signifie pas que flex-tutorial.fr va fermer, j'arrête simplement de rédiger des articles pour celui-ci.

Mais vous pouvez toujours contribuer et devenir auteur sur flex-tutorial.fr, en écrivant des articles. En fait, c'est comme cela depuis longtemps mais j'ai eu très peu de contributions. Peut-être parce que vous jugiez que le rythme de sortie était déjà suffisant :) .

Voilà, je fais donc "faire une Adobe" et passe le blog en "Open source". Pour publier un article, il suffit de me l'envoyer à l'adresse fnicollet+tutoFlex@gmail.com. Je m'occupe de l'intégration et de la mise en page.

Pour ceux qui meurent d'envie de laisser un commentaire type "Flex est mort!" dans les commentaires, vous êtes priés de vous abstenir. Flex est bien vivant, maintenant dans les mains de l'Apache Software Fundation. Il y a eu beaucoup de mouvement, de motivation et d'idées sur la mailing-list Apache et je n'ai aucun doute sur la viabilité de Flex. Ce dernier a toujours de nombreux points forts, notamment pour le développement rapide et robuste d'application "entreprise" dans lequel il excelle.

Conclusion

Une année chargée et un nouveau challenge en perspective : un nouveau blog sur HTML5. Il y a quelques temps, notre evangelist Adobe préféré Michael Chaize nous disait que les "développeurs RIA HTML5 de demain sont les développeurs Flex d'aujourd'hui". Ce blog permettra de lui donner raison :) .

Encore une fois, merci à tous les lecteurs fidèles de flex-tutorial pendant toutes ces années !

28jan/120

Apache Flex se dote d'un nouveau logo

Flex a été accepté au sein de la fondation Apache il y a quelques semaines et pour l'instant, tout se passe pour le mieux. Des milliers de mails échangés sur la mailing-list, et une masse de développeurs prêts à contribuer au développement du futur framework.

http://incubator.apache.org/flex/

Pour capitaliser sur cet engouement, un concours a été organisé pour décider d'un nouveau logo pour Flex. L'ancien logo "Fx" était trop associé à la Creative Suite Adobe, il fallait du neuf.

Voici le travail des 54 participants:

http://incubator.apache.org/flex/logo-contest.html

Après vote des membres d'Apache Flex, deux puis un logo a été retenu, celui de Tomasz Maciag:

http://www.fusecollective.com/apache-flex/apache-flex-fusecollective_v2.jpg

Bravo à lui et bravo à @Kap_IT qui est arrivé 2ème !

13jan/120

Starling API – 19 – Création des niveaux à partir de l'objet Level

Dans le dernier tutorial, on a vu comment parser les fichiers de description des niveaux de notre jeu:

Starling API – 18 – Parse du fichier JSON de description des niveaux

Maintenant, il nous faut la "glue" qui va se charger de créer le monde, en instanciant le bon blocs. Et devinez comment on va appeler cette classe… LevelFactory!

En fait, LevelFactory va déléguer le travail à chaque Factory que l'on a fait jusque là. Vous le verrez, cela consiste en une simple série de if/else.

Commençons par ajouter un appel à la méthode initWorld() dans la méthode init(), pour ne pas tout mettre dedans. Mettons notre parse dans cette méthode:

    [Embed(source = "/assets/levels/Level1-2.json", mimeType = "application/octet-stream")]
    public static const LevelDescriptor:Class;

    // level
    private var _level:Level = null;
...

    private function initWorld():void{
      // parse du niveau courant
      var json:Object = JSON.parse(new LevelDescriptor);
      _level = new Level(json);
      // code
    }

Ensuite, on va créer notre LevelFactory:

package com.fnicollet {
  import starling.display.DisplayObject;

  public class LevelFactory {
    public function LevelFactory() {
    }

    public static function getPart(id:String):DisplayObject {
      var ret:DisplayObject = null;
      if (contains(id, "WOOD") || contains(id, "STONE") || contains(id, "ICE")) {
        ret = BlockFactory.get(id);
      } else if (contains(id, "MISC")) {
        // TODO
      } else if (contains(id, "TERRAIN")) {
        ret = TerrainFactory.get(id);
      } else if (contains(id, "PIG")) {
        ret = EnemyFactory.get(id);
      } else if (contains(id, "BIRD")) {
        // TODO
      }
      return ret;
    }

    public static function contains(source:String, str:String):Boolean {
      return source.indexOf(str) != -1;
    }
  }
}

Maintenant, il faut boucler sur les objets qui composent notre monde (les WorldObject de notre modèle Level) et demander à LevelFactory de nous créer les éléments. Certains ne sont pas encore implémentés, il faut donc bien faire attention. Ainsi, si "obj" est null, cela signifie que notre LevelFactory n'a pas su nous renvoyer cet élément. On passe donc à la suite.

Voici le nouveau code de la méthode initWorld:

 private function initWorld():void {
      // parse du niveau courant
      var json:Object = JSON.parse(new LevelDescriptor);
      _level = new Level(json);
      var worldObjects:Array = _level.worldObjects;
      for each (var wo:WorldObject in worldObjects) {
        var obj:DisplayObject = LevelFactory.getPart(wo.id);
        if (!obj) {
          continue;
        }
        var _screenToWorldFactor:Number = 36 / 2.77;
        var objectWidth:Number = obj.width;
        var objectHeight:Number = obj.height;
        var objectPositionX:Number = wo.x * _screenToWorldFactor;
        var objectPositionY:Number = wo.y * _screenToWorldFactor;
        var objectId:String = wo.objectId;
        // temporary
        objectPositionX -= 100;
        objectPositionY += 400;
        obj.rotation = starling.utils.deg2rad(wo.angle);
        obj.x = objectPositionX;
        obj.y = objectPositionY;
        _stageContainer.addChild(obj);
      }
    }

Et enfin, après toutes ces Factory, nous obtenons notre niveau :) :

Si vous avez lu le code, vous avez vu qu'il y a des paramètres magiques, notamment le "_screenToWorldFactor". Si vous connaissez Box2D, vous connaissez sûrement la signification de ce facteur. En fait, dans le fichier JSON des description du niveau, les positions sont exprimées en mètres. A l'affichage, on a besoin d'un nombre de pixels. On a donc un ratio mètre / pixel qui intervient, afin de faire la correspondance.

Allez, pour le fun, voici le niveau créé avec simplement un autre descripteur JSON:

Conclusion

Les derniers billets ont été laborieux mais on approche du but ! Dans les prochains tutoriaux, on va voir comment utiliser Box2D pour créer un monde à la physique réaliste (gravité, friction, …).

30déc/111

Flex accepté au sein de l'Apache Software Fundation (Incubator)

Dans mon précédent billet, j'expliquais le passage de Flex à la fondation Apache:

Flex confié à la fondation Apache – Bilan et opportunités

La proposition a donc été envoyée par Adobe et on attendait le vote des membres de la fondation Apache pour savoir si le projet serait accepté ou non au sein de l'ASF.

Pour rappel, les votants peuvent accorder un +1, un vote neutre (0) ou un -1. Sur un total de 23 votants, il y a eu 23 votes +1 et aucun vote neutre 0 ou -1:

[RESULT][VOTE] Flex to join the Apache Incubator

Parmi ces 23 votants, 10 voix sont particulièrement importantes, celles des PMC.

Flex est donc accepté au sein de la fondation Apache! Adobe Flex devient donc Apache Flex et sera désormais maintenu par la communauté.

Le reste du processus va se mettre en place dans les prochaines semaines, avec la création des mailing-list et du commit initial dans le gestionnaire de sources.

Remplis sous: Non classé 1 commentaire