Rafarel design

Avez vous déjà navigué sur le site du pôle emploi, payé vos impôts sur internet ou déclaré votre chiffre d’affaire sur le site de l’auto-entrepreneur ?

Mais bon sang, qui donc s’occupe de la réalisation de ce ces sites ?! A chaque fois, le site se comporte de manière anormale, la navigation y est incompréhensible, et c’est tellement moche qu’on a l’impression d’être sur un fake ou une page de pishing pour certains… (fausse page qui vous demande vos codes d’accès pour vous les voler).

Ce matin, je suis allé déclarer mon chiffre d’auto entrepreneur sur le site net-entreprise.fr qui gère plusieurs type de déclarations sociales en ligne… Quelle galère, mais quelle galère !

En premier lieu, il faut créer son compte avec son numéro de SIRET, nom, prénom, mail,  mot de passe et question secrète. Classique, si on oublie le fait que la page est tellement minable qu’on a l’impression d’être sur une arnaque (screen shot), bon, passons.

Une fois le compte créé, je tente de m’y connecter pour faire cette foutue déclaration. Je m’y suis repris à 10 fois, oui, 10 fois. Et je suis habitué au web dans le sens ou il représente 8/10h par jour de surf, de création et programmation web… Mais comment fait le type qui n’est pas à l’aise avec l’outils ?

Mais pourquoi il a tant galéré à s’identifier ?

Lors de l’identification, on vous demande les même infos qu’à l’inscription (SIRET nom prénom passe). Déjà ça c’est très con, où est passé le bon vieux couple identifiant / passe ? Non il faut tout ressaisir…
Moi, je m’appelle Raphaël avec un tréma sur le E. Le seul moyen pour moi de m’identifier, ça à été de rentrer mon nom prénom en CAPITALES d’où les 10 essais ! Ce, après m’être inscris à Raphaël bien entendu…

Le débutant doit se barrer en courant !

Le site ne dispose pas de certificat SSL signé, alors  votre navigateur vous dit « Attention, vous courrez un risque sur ce site voulez vous vraiment y aller ? » (en gros). Obligé donc de signaler une exception de sécurité pour firefox (la le pélo moyen est déjà parti depuis longtemps et cherche à joindre la hotline qui ne doit pas exister).
Enfin, l’adresse est fabuleuse : https://test2.net-entreprises.fr/auth00/pass/authentification.htm
Non mais, TEST2 comme sous-domaine !

Vous l’aurez compris, ces sites sont certainement fait par le copain d’un politique qui ne connais pas son travail, qui lui a prit  un stagiaire, qui lui même sors d’une grande école où il n’y a rien appris.
Fumistes !

Étude de cas, de cours, de code

Ces temps-ci, je travaille beaucoup à préparer des cours / travaux pratiques en AS3 pour l’université. J’étudie aussi à titre personnel tout ce qui touche au « game-design », notamment la création de  jeux à interface minimaliste tels que ceux destinés aux téléphones portables…

Du coup, lorsque je bosse sur mes cours, je base pas mal de mes exemples sur des applications aux vocations ludiques et interactives.
Cet article n’est pas un tutoriel, il s’agit plus de la démarche de création d’un mini-jeu et de son code.

Objectifs

Pour ce cours je cherche à introduire plusieurs techniques AS3 :

- La gestion des touches du clavier avec les KeyboardEvent
- Le contrôle de la tête de lecture d’un MovieClip (gotoAndStop…)
- Les tableaux (Array)
- La gestion des collisions avec la méthode hitTestObject
- Les animations via la classe Tween
- Le chargement et la lecture de sons, la classe Sound
- Le temps et le Timer

Les assets (clips/sons) qui constituent notre jeu sont issus de l’univers de « Zelda – a link to the past » (épisode snes) pour ce qui est du visuel, et de « Zelda – Twilight Princess » pour les sons. Pour le coup, le « game-design » sera très basique, adapté aux objectifs, un « game-design » plus poussé aurait sûrement demandé plus de code et de connaissances.

Une version jouable du jeu est visible en fin d’article (dépourvue de sons), les sources sont également téléchargeables (flash CS4).

Les sources sont celles de mon projet, qui couvre un peu plus que les objectifs, donc plus complètes, mais j’ai mis beaucoup de commentaires.

N’oubliez pas de vous munir de la bonne vieille documentation ActionScript 3 !

But du jeu

Déplacer le héros afin qu’il amasse son butin de rubis le plus vite possible.

Le héros

Dans ce jeu, nous allons déplacer notre héros (le personnage de Link) avec notre clavier, nous allons donc devoir écouter les événements émis par ce dernier (KeyboardEvent).
Quand le joueur pressera l’une des flèches de son clavier (KeyboardEvent.KEY_DOWN), le héros devra se déplacer dans la direction correspondante.
Quand il relâchera la flèche (KeyboardEvent.KEY_UP), le héros devra arrêter d’avancer dans cette direction.
Pour savoir quelle touche l’utilisateur presse, nous analyserons la propriété keyCode du KeyboardEvent reçue par la fonction écouteur.
En fonction de la touche pressée, j’affecte une vitesse sur les propriétés speedX et speedY créées dynamiquement sur notre variable hero (syntaxe anglaise au sein du code).

Link va maintenant devoir se déplacer, pour cela nous allons incrémenter ses positions sur x et y de ses vitesses respectives speedX et speedY à intervalles rapides et réguliers. L’événement Event.ENTER_FRAME sera parfait pour effectuer ce déplacement de manière  aussi fréquente, puisque nous pourrons exécuter une fonction (animeHero dans mon cas) aussi souvent qu’il y a d’images par seconde (24ips par défaut).

Avancer, c’est bien, regarder devant soi, c’est pas plus mal !
En effet, le MovieClip Link (celui du héros) possède sa propre TimeLine sur laquelle j’ai disposé d’autres clips représentant Link dans ses différentes postures / cycles de marche. Jetez un œil au clip Link de ma bibliothèque et à ses images clés, je leur ai toutes donné un nom correspondant à la posture.

En analysant avec des conditions les valeurs de vitesses speedX et speedY de notre héros, on peut aisément savoir dans quel sens doit regarder Link.  Si par exemple sa vitesse sur l’axe x est supérieure à zéro, je sais qu’il se déplace vers la droite. De ce fait, je positionne la tête de lecture du clip hero sur l’image clé appropriée grâce à la méthode gotoAndStop de la classe MovieClip.
ex : hero.gotoAndStop(« nomImageCle »); ou hero.gotoAndStop(« est_marche »); dans notre cas.

Notre personnage bouge, et en plus il regarde là où il va. Donnons-lui un but à présent !

Les rubis

Le but de notre jeu va être de collecter un nombre donné de rubis en un temps record.
Tous les rubis créés pour la partie seront référencés dans le tableau rubisArray (variable de type Array)

Placer beaucoup de rubis est une tâche répétitive, je vais donc coder les instructions dans une boucle for qui les répétera autant de fois que que nous désirerons ajouter un rubis à la partie. Elle effectuera les actions suivantes :

• Créer un nouveau rubis, et le référence dans le tableau rubisArray
• Ajout dynamique de propriétés speedX et speedY sur le rubis (nous les ferons se déplacer dans un second temps)
• Le faire apparaitre avec un positionnement aléatoire sur notre terrain de jeu.

Dans mon code, toutes ces actions sont placées dans une fonction que j’ai nommé initRubis.

Tout comme notre héros, les rubis sont un des éléments qui constituent notre « gameplay », et comme pour beaucoup d’entre eux, des actions et des contrôles sont à effectuer de manière fréquente. Re-voilà notre bon vieux Event.ENTER_FRAME prêt à effectuer de nouvelles tâches 24 fois par seconde dont voici un aperçu :

Tous les rubis doivent subir le même traitement, j’utilise donc de nouveau une boucle for, cette fois-ci pour parcourir le tableau qui lui contient une référence de chacun de nos rubis. Au sein de ma boucle, j’aurai accès à la référence de mon rubis via la syntaxe rubisArray[i] ou i est un compteur qui s’incrémente à chaque passage de boucle, qui elle aura la démarche suivante :

• Je déplace le rubis en incrémentant ses propriétés x et y des vitesses speedX et speedY.
• Je m’assure que le rubis n’est pas sorti du jeu, auquel cas j’inverse sa vitesse en la multipliant par -1 (hop, rebond).
• Je vérifie si le rubis n’est pas en collision avec le héros avec la méthode hitTestObject de la classe MovieClip.
• Si collision il y a : détruire le rubis, l’enlever de l’affichage (removeChild) et du tableau rubisArray avec la méthode splice de Array, sans oublier de jouer le petit son qui va bien avec Sound
  
• Si le dernier rubis vient d’être ramassé par le joueur, termine la partie. (je lance la fonction winGame dans mon cas).

La victoire

Voilà votre joueur au bout de son périple, son héros brandissant le dernier rubis, il est temps de lui faire comprendre qu’il a gagné.
Dans mon cas, toutes les instructions concernant la victoire sont regroupées dans une fonction que j’ai nommé winGame.

Voici une description des actions dont elle a la charge :

• Jouer le son de la victoire.
• Positionner la tête de lecture du héros sur l’image clé de sa position de victoire.
• Stopper le chrono (Timer), si chrono il y a.
• Animation du héros via la classe Tween qui le fait effectuer une rotation et un changement d’échelle avec scaleX et scaleY.
• Retrait des écouteurs du clavier KeyboardEvent.KEY_DOWN et KeyboardEvent.KEY_UP
• Retrait de l’écouteur Event.ENTER_FRAME, plus rien ne bouge à l’écran, la partie est terminée.

Le score

Pour donner une échelle de sa performance au joueur, je vais poser un bon vieux chrono, il pourra ainsi essayer d’affronter d’autres joueurs ou alors de battre son propre record.

Afin de gérer le temps de jeu, je créer une variable timer à laquelle j’associe une instance de la classe Timer, qui elle emmétra un TimerEvent.TIMER toutes les 100ms. C’est en écoutant ce dernier que je peux exécuter une fonction toutes les 100ms afin de mettre à jour le contenu du champ de texte. Avec la propriété currentCount du timer, je sais combien de fois se sont écoulés d’intervalles de 100ms. Quelques calculs plus loin, je peux afficher minutes, secondes et dixièmes. (fonction écouteur ticTac dans mon code)

Aller plus loin

A ce stade du projet, pas mal de possibilités s’offrent à nous en terme d’évolution.

On pourrait par exemple :

• Ajouter des ennemis et un nombre de vies limités, ce qui rendrait la tâche plus ardue.
• Faire apparaître aléatoirement des objets bonus qui auraient toutes sortes d’effets, désirables ou non : accélération/décélération des rubis ou du héros, invincibilité, vies supplémentaires et j’en passe.
• Baser le concept du score sur tout autre chose, du genre attraper un maximum de rubis en un temps limité…
• Différents types de rubis, avec un autre comportement que celui du rebond, rapportant différents nombres de points.
• Leaderboard, avec classement des meilleurs scores, apporte une composante »sociale » intéressante au jeu.
• Les possibilités sont infinies, bienvenue dans ce que l’on appelle le « game-design ».

Dans la version que vous pouvez voir ci dessous, j’ai rajouté quelques agréments visuels tels que des arbres autour du terrain, ou un système de bouton qui permet au joueur de relancer une partie. Les sons et musique sont par contre eux absents de la version de démo.

Attrapez-les tous !?

Les sources

Les sources de ce projet sont téléchargeables ici, et exploitables à partir de Flash CS4, n’oubliez pas décompresser l’archive avant d’éditer/d’étudier le code.
Mon code est relativement bien organisé et fourni en commentaires, sûrement trop pour un codeur expérimenté, mais nécessaire pour débuter.
Je n’ai pas codé de manière très stricte, les variables et fonctions ne sont pas typées, ni même vraiment orientées objet.
N’hésitez pas à modifier / améliorer mon code, pour le plaisir,  pour étudier.
Faites-moi suivre vos déclinaisons !

Jouer avec la webcam

Voici un billet pour présenter mes dernières expérimentations en matière de développement AS3, je fais quelques test de classes de « Motion Tracking ».

Le « Motion Tracking », c’est le fait de suivre un élément en mouvement, et donc d’en récupérer sa position. Vous l’aurez compris, pour pratiquer, il faut une webcam (la plupart des portables en intègre une aujourd’hui).

J’ai donc décidé, après quelques expériences, de mêler la fonctionnalité de « Motion Tracking » à un Gameplay/design, pour en faire un jeu vidéo.

« La manette, c’est vous »

La manette, c’est vous; comme comme dirait l’autre ! (Kinect MS)
Me voilà donc parti sur « Track-Man », le PacMan en Motion Tracking (désolé pour le jeu de mot). Le développement est très primaire, et le gameplay très basique pour le moment. Il vous suffira de bouger devant votre webcam pour déplacer le personnage qui lui raffole des cerises … Pas d’ennemis ou d’items spéciaux pour le moment, je suis en train de réfléchir à tout ça, et je suis preneur d’idées !

A vous de jouer bouger

Il faut être équipé d’une webcam. Après avoir cliqué sur « start », FlashPlayer vous demandera une autorisation d’utiliser la webcam, c’est normal. Restez statique de manière générale, le perso se déplacera sur les zones qui bougent. Bougez par exemple juste une main, pour être plus précis, non pas tout le corps.

Essayez de vous même :

Pour ce test, j’utilise des classes AS3 partagées par d’autres développeurs :

• ColorMatrix par Grant Skinner
• MotionTracker par Soulwire

Merci à eux ! Enjoy !

Avis aux codeurs PHP en herbe, voici un petit tutoriel qui explique les bases de l’architecture d’un site web et d’une navigation utilisant PHP.

Dans l’idée, c’est le fichier index.php qui fera office de chef d’orchestre et se chargera de mettre en place les éléments et les pages grâce à la fonction include() de PHP.

Vous avez certainement déjà vu des URLs ressemblant à : www.monsite.com/index.php?page=contact
C’est le type d’URL que nous allons utiliser car nous spécifions par l’URL quelle page devra être incluse dans l’index…

Un premier index

Voici à quoi va ressembler (très basiquement) la structure html qui va accueillir notre code PHP, composée de deux balises <div></div>, une pour la navigation et une pour l’include du contenu de la page. Bien entendu cette structure dépendra de votre webdesign, mais ce n’est pas l’objet de ce tuto, je ne m’attarderai donc pas sur ce point, uniquement sur la fonctionnalité et la sécurité.

index.php :

<html>
    <head>
        <title>Mon site internet</title>
    </head>

    <body>

        <div id="menu">
            <!-- div pour le menu de navigation -->
        </div>
        <div id="page">
            <!-- div pour la page / le contenu -->
        </div>

    </body>
</html>

L’ include du menu de navigation

Nous allons utiliser PHP pour intégrer le menu à notre index, ce qui permettra de travailler indépendamment l’index de la navigation, ce qui est pratique pour la mise à jour et le travail d’équipe.
Nous allons donc créer un fichier menu.php avec trois liens pour l’exemple (accueil,  blog et contact)

menu.php :

<a href="index.php?page=accueil">accueil</a>
<a href="index.php?page=blog">blog</a>
<a href="index.php?page=contact">contact me</a>

Vous remarquerez que tous pointent sur index.php, et que dans le lien, nous avons ce fameux point d’interrogation suivi d’une variable (ex : ?page=blog). Nous verrons plus tard comment récupérer et exploiter ces informations transmises par les URLs. Notre menu de navigation, aussi simpliste soit-il peut désormais être inclus dans notre index.php. Voici la ligne de code PHP que vous devez placer dans la <div></div> dédiée à la navigation :

<?php include('menu.php'); ?>

L’include de la page de contenu

Maintenant que nous avons une architecture d’index avec son menu de navigation, il est temps d’inclure les pages de contenu dans la deuxième <div></div>. Pour cela, nous allons devoir ajouter du code PHP dans notre index.php qui sera chargé de différentes tâches, en voici une brève description en Français :

1. Lister dans un tableau PHP les pages autorisées à l’affichage (la sécurité !)
2. Définir une page par défaut à inclure (accueil)
3. Récupérer l’information dans l’URL concernant la page à inclure
4. Si la variable passée par URL est dans la liste des pages autorisées, alors je remplace la valeur par défaut par celle de l’URL

Ce code PHP, nous allons l’ajouter à notre index.php avant même la balise <html>, soit en début de fichier.

Voici ce que donne la transcription du Français au PHP :

<?php
//Tableau des pages autorisées à l'include
$pagesOK['accueil'] = 'accueil.php';
$pagesOK['blog'] = 'blog.php';
$pagesOK['contact'] = 'contact.php';

//Page par defaut
$page = 'accueil';
//Si le $_GET['page'] est dans les keys du tableau $pagesOK
if(!empty($_GET['page'])
&& array_key_exists($_GET['page'], $pagesOK))
{
    //Remplace la valeur par defaut par celle de l'URL
    $page = $_GET['page'];
}
?>

Le tableau $pagesOK référence les fichiers *.php, indexés par un nom qui leur est associé et qui sera passé/récupéré dans l’URL (ex : ?page=contact). Nous retrouvons donc les trois pages qui étaient présentes dans notre menu de navigation. Il faudra évidemment adapter ce tableau des pages autorisées en fonction de vos besoins et à chaque fois que vous modifierez votre menu.php ou le nom des pages pour que ça colle.

La variable $page stockera le nom définitif de la page à charger, nous l’initialisons donc avec la valeur ‘accueil’.

Passons maintenant au traitement de la variable de page passée par l’URL. Nous y avons accès grâce à la syntaxe $_GET['page']. Pour la vérifiée, j’utilise deux fonctions PHP :

• La négation de empty() pour m’assurer que la variable est bien présente et n’est pas vide
• La fonction array_key_exists() pour m’assurer que la valeur passée dans l’URL est bien l’une des clés du tableau $pagesOK

Une fois la variable vérifiée, on l’affecte à $page qui avait comme valeur par défaut, le nom de l’accueil.

Si vous suivez ce tuto à la lettre, je vous recommande de créer les trois fichiers accueil.php, blog.php et contact.php puis d’y écrire une simple ligne de texte pour que vous puissiez procéder aux tests, et vérifier que ce sont les bons fichiers qui sont inclus à l’index.

La dernière ligne de code, celle qui permet d’include le fichier de la page demandée, qui vous l’aurez deviné se rajoutera dans la <div></div> prévue à cet effet :

<?php include($pagesOK[$page]); ?>

On récupère donc le nom du fichier à inclure en se servant du tableau $pagesOK et en accédant à un de ses index par $page.

Vous pouvez téléchargez les fichiers sources ici : TUTO_navigation_include_pages
Voila, ce tuto s’achève ici. Ce type d’architecture web / navigation en PHP est très courant et est très efficace selon moi pour la plupart des sites.
N’hésitez pas à commenter pour ceux qui veulent partager leur vision de la chose où qui ont besoin de soutien !

Enjoy

URGENT : Plus que 2 jours !

Des jeux vidéo indépendants au prix que vous voulez ? Oui, c’est le bon plan de cette fin d’année et ça s’appelle : The Humble Indie Bundle #2.

En effet cette opération spéciale se produit pour la seconde fois et est limitée dans le temps !

Le concept du Humble Indie Bundle

• Un pack de 5 jeux conçu par des équipes indépendantes est en vente sur une courte période, et ce, au prix que vous souhaitez !
• Que vous y mettiez, 1$, 10$ ou plus, ils seront tous à vous ! Sachez que si vous deviez acheter ces jeux séparément, il vous en coûterait environ 85$.
• Ces jeux sont cross-platform, c’est à dire qu’ils sont compatibles Windows, Linux et Mac avec la possibilité de les ajouter à votre compte Steam !
• En achetant ces jeux, une partie de votre prix est reversé à des associations caritatives, comme par exemple Child’s Play Charity, qui permet de financer des jouets, jeux et livres pour les enfants hospitalisés.

Quels sont les jeux du Bundle ?

Cette année, la tête d’affiche du Bundle est Braid, le célèbre jeu de réflexion / plateforme que j’ai tellement aimé jouer sur Xbox Live Arcade. Se suivent ensuite les titres Machinarium, Cortex Command, Osmos puis Revenge of the Titans qui lui sort en même temps que le Bundle !
Je n’ai pas encore testé ceux-ci, cependant ils ont reçu de très bonnes critiques de la part de la presse spécialisée, j’ai hâte de tester tout ça !

Ha oui, j’allais oublier ! Si votre offre s’élève à 7,62$ vous recevrez en prime le droit de télécharger tous les jeux du précédent Humble Indie Bundle qui eux aussi étaient déjà très bons (World of Goo, Aquaria, Gish, Lugaru HD, Penumbra Overture, Samorost 2)

Voila, la news n’est pas toute fraîche mais il vous reste 2 jours pour faire votre achat ou attendre le prochain Humble Indie Bundle…
Dépêchez-vous, c’est par ici que ça se passe : The Humble Indie Bundle #2

Merci à Homik de m’avoir communiqué la news !

Fini les installations ?

Utiliser une application sans avoir à l’installer, je ne pense pas pouvoir mieux décrire le service que propose la société Spoon. Cela permet pas mal de choses, notamment le test de certains logiciels sans même les télécharger. Demandez un logiciel et vous voilà servi, une sorte de « Software on demand ».

Quels logiciels, comment ça marche ?

Le site www.spoon.net met à votre disposition tout un catalogue d’applications très variées.
Cela va du navigateur web au traitement d’image en passant par le jeu vidéo, il vous suffit d’installer un plugin pour firefox (dans mon cas), de choisir une application à lancer parmi celles dispos chez Spoon, et, en moins de 10 secondes vous venez de lancer la bêta du dernier Firefox/ Internet Explorer ou une partie de Splinter Cell sans installation préalable. Top classe !

Spoon et le webdesign

Certains d’entre vous ne verront absolument pas l’utilité de pouvoir exécuter une vieille version de IE6 ou FF2 alors qu’ils sont entrain de surfer sur une version top moumoute, vous vous dites que cela relève du masochisme ou du geek nostalgique…
Eh bien non ! C’est un outil merveilleux que propose Spoon aux (bons) webdesigners, car pour faire des tests d’affichage de son site sur différentes versions de browsers, c’est assez galère, car il n’est pas possible (à ma connaissance) d’installer IE6 et IE7 sur une même machine. Oui, aujourd’hui cela est simple comme bonjour grâce à ce service. Webmasters /webdesigners foncez !

Et le jeu dans tout ça ?

Je n’ai pas trop pris le temps de tester les jeux sur de longues parties, mais j’ai l’impression que ce sont des démos pour la plupart, sans trop de possibilités de jouer en plein écran mais en fenêtré.
Je sais que le site www.onlive.com, lui est spécialisé dans le jeu vidéo, et propose des titres complets et récents à la location sur le même principe sans avoir besoins d’une grosse config, puisque le jeu est exécuté chez eux, ils vous envoient juste l’image. Ce serait selon certains l’avenir du jeu vidéo, la dématérialisation des supports et la disparition des grosses configs à domicile, juste besoin d’un terminal. Je lui dédierai un article plus tard…
Allez, m’en vais tester On Live, le webdesign c’est bien beau, le jeu ça l’est aussi !

Merci à Homik pour ses sources

Après un apprentissage plus ou moins laborieux du montage vidéo et de ses codecs / formats / trucs & astuces, je suis heureux de pouvoir mettre en ligne le trailer de Claytus Hood Tower Defense.

Claytus Hood TD, un jeu illustré et mit en musique par des amis, développé par mes soins. Ces même amis ont animé et bruité les séquences du trailer que vous pouvez visionner plus bas !

Claytus a besoins de vos votes !
J’ai soumis ce trailer (bande annonce) à un concours de création numérique sur le site de ganuta, voila pourquoi Claytus a besoins de vos votes.
Pour ceux d’entre vous qui voudraient nous offrir quelques secondes de leur temps pour voter, voici la marche à suivre :

1 – Se rendre sur le site www.ganuta.com dans la rubrique galerie.
2 – Dans le menu déroulant, sélectionnez la catégorie « Jeux vidéo / Application interactive ».
3 – Repérez notre trailer, il y a écris au dessous « Auteur: Raphaël ROUX | 001969″.
4 – Cliquez sur « Votez », le reste vous sera expliquer.
5 – Un mail de confirmation vous sera envoyé,  avec un lien pour valider le vote. Poux ceux qui ont un mail chez MSN ou Hotmail, il y a de forte chance pour que le mail arrive dans votre boîte de courrier indésirable au cas ou vous le cherchiez !
6 – Un grand merci à vous !

Cette semaine, pas trop de temps devant moi pour écrire un bel article sur mon blog…

Voilà donc un billet rapide pour présenter une publicité qui fait la promotion de la chaîne de télévision Cartoon Network.

Parce que c’est tellement rare de voir des spots publicitaires bien foutu, je me suis que celui là j’allais le mettre sur mon blog, et puis quand j’étais môme, Cartoon Network, ben j’aimais bien ça =D

Regardez moi ça ! C’est pas bon ?

Un joueur accro au célèbre MMORPG World of Warcraft (WoW) a mis un terme à sa vie virtuelle, la seule vie qu’il avait depuis 5 ans. Il aurait passé 24 000 heures derrière son écran, ce qui équivaut à environ 3 années non stop de jeu. Il décida donc de faire une vidéo où on le voit supprimer absolument tout ce qu’il a accompli depuis 5 ans, témoignage d’une libération de sa WoW addiction, d’où l’intro « Breaking the addiction ».

Je sais à quel point ce jeu est addictif et très nuisible à sa vie sociale car j’y ai joué les 6 premiers mois de sa sortie, je comprends ce que peut ressentir un WoW addict…

J’ai aussi malheureusement quasiment perdu contact avec des personnes de mon entourage qui se sont totalement investies dans l’aventure WoW, et qui n’ont pas eu le recul nécessaire pour se dire que ce jeu est « dangereux »  lorsque l’on en abuse, qu’il nous « bouffe » littéralement la vie, telle une drogue… Beaucoup ont laissé leur couple et leurs amis tomber pour cette douce sensation de perpétuelle évolution et cette illusion de réussite que procure l’expérience WoW.

J’encourage donc l’acte de cette personne, et lui-même vous encourage à le faire. Il termine sa vidéo par :
« I hope this inpires you to quit as well. Remember, the « cooler » your character looks in World of Warcraft, the sadder your real life is », ce qui pourrait se traduire par « J’espère que cela vous incitera à arrêter comme moi. Rappelez-vous de ça : plus votre personnage de WoW est cool, plus votre vraie vie est triste ».

Cette vidéo, aussi geek soit elle, m’a beaucoup ému. Je lui souhaite un agréable retour parmi nous. Welcome to the real wold !

After almost 5 miserable years of playing the highly addictive game World of Warcraft, I have quit for good. Here is the proof…

Je n’y croyais pas jusqu’à ce que je reçoive mon numéro de série aujourd’hui !
Adobe distribue donc des licences pour son dernier-né Flash Builder 4, Flex Builder pour les intimes (son ancien nom) d’où le logo Fx.

A quelles conditions est soumise cette offre ?

Il faut être étudiant, enseignant, chômeur ou posséder un « event code » qu’ils donnent lors des événements organisés par Adobe. Il faut également accepter les termes qui stipulent que vous ne ferez pas de projets commerciaux avec votre copie, que vous ne donnerez pas votre Serial à votre futur employeur… Cette copie est donc clairement destinée à vous former à cette superbe technologie qu’est Flash, Flex, le MXML et l’AS3 !

Où se procurer cette copie ?

Pour cela, il suffit de se rendre sur le site de Adobe Developer Connection et de remplir un formulaire. Quelques jours plus tard, vous recevrez un numéro de série par mail qui vous permettra d’activer votre version d’évaluation téléchargée au préalable sur la page de téléchargement d’Adobe Flash Builder 4.

Mais, c’est quoi Flash Builder 4 ?

Flash Builder est un logiciel de développement permettant de déployer rapidement des RIAs (Rich Internet Application) dont la plus connue serait à mon avis Deezer pour vous donner un exemple d’application Flex. En utilisant des composants Flex, mis en pages grâce à un langage de balises MXML très proche du HTML on arrive vite à des résultats très satisfaisants ! La logique et algorithmes seront eux codés en AS3. Petite cerise sur le gâteau, vous pouvez styliser vos composants en utilisant les CSS, voici un logiciel Flex d’édition de feuille de style : Flex Style Explorer.

Il est possible de déployer ses applications Flex en RDA (Rich Desktop Application) grâce à AIR (Adobe Integrated Runtime). AIR c’est une machine virtuelle multi-plateformes tout comme Flash Player, sauf qu’elle s’exécute sur le système d’exploitation et non pas à l’intérieur dun navigateur comme le fait Flash Player. C’est-à-dire que vous pouvez créer un logiciel qui s’installe sur votre ordinateur, sauf qu’il est fait en Flex, codé en MXML et AS3 ! Il me semble d’ailleurs que l’interface de League Of Legends (LOL) tourne sur AIR, utilisé donc dans le jeu vidéo PC.
Un exemple d’application Flex déployée en AIR est : Tour de Flex, une application de démo, qui liste les composants Flex avec des exemples concrets, très pratique pour apprendre, et très bon outils de référence.

Flash builder 4 permet aussi le développement en pur Action Script 3, ce qui vous changera la vie si vous codez aujourd’hui sur le logiciel Flash. Flash Builder 4 est lui un véritable outil de développement, il vous fera gagner un temps considérable si vous savez vous en servir ! Je code en ce moment même le jeu Claytus Hood Tower Defense sur Flex Builder 3, l’ancienne version.

Comment apprendre ?

J’ai appris les bases de Flex Builder 3 et du MXML avec le livre officiel d’Adobe  « Adobe Flex 3 – Training from the source », il existe bien entendu une version pour Flex 4, dispo chez Amazon (en anglais).
Il commence aussi à y avoir beaucoup de ressources sur le web, notamment l’excellent site Adobe Flex Tutorial, en français en plus ! Je vous propose d’ailleurs de lire leur article qui s’adresse aux débutants : Découvez Flex 4 et Flash Builder 4. Pour finir, ne vous séparez jamais de Tour de Flex, excellent outil de référence !

Voila, cet article s’adresse donc aux développeurs qui veulent se lancer dans le developpement d’applications Flex, ou à ceux qui codent encore via le logiciel Flash CSx qui lui est une catastrophe pour le développement, plus destiné aux graphistes.