En cherchant un peu, j'ai trouvé les fichiers de coloration pour Flex (comprenant bien évidement AS3 et MXML) ici.

Seul souci, lors du passage à Flex 4, le code compris dans les balises < fx:Script > apparait surligné en rouge :

Pas très joli me direz-vous.

Pour modifier ce petit désagrément, il suffit de rajouter le code suivant :

Configuration des outils de développement

Tout d'abord il nous faut récupérer le SDK AIR 2.5. Pour cela, il faut au préalable s'inscrire sur le site pour pouvoir participer à cette pre-release (gratuitement) à l'adresse suivant : 
http://www.adobe.com/go/airbetasignup.

Deux cas s'offre à vous :

private function validateField(field:UIComponent, isValid:Boolean=false):void {
    if(!isValid){
        var cssObj:CSSStyleDeclaration;
        cssObj = StyleManager.getStyleDeclaration(".errorTip");
        cssObj.setStyle("borderColor", "red");
        field.setStyle("errorColor", "red");
        field.errorString = "This field is required";
    } else {
        field.errorString = "";
    }
}

Cet éditeur permet d'exporter simplement au format XML ou PNG les niveaux créés directement via l'interface. Plusieurs tutoriels sont disponible (en anglais) sur le site.

Grâce à cette application, le gain de temps lors du développement de jeux est considérable, car plus besoin de devoir créer d'éditeur spécifique à votre jeux. La syntaxe XML est suffisement claire, et les options suffisement nombreuses pour vous permettre d'intégrer tout ça à votre nouveau bébé.

Toutes fois, j'avais implémenté la création du niveau, des monstres, et leurs déplacements.

Ce code peut toujours vous servir de point de départ.

Voici les sources (commentées), mais si toutes fois, vous avez besoin de compléments d'infos, laissez un commentaire.

Main.hx

class Main {
	public static function main():Void {
		new TowerDefense(flash.Lib.current);
	}
}

Il y a deux façon d'utiliser Zend_Amf, soit en standalone, soit en utilisant l'intégralité du framework. C'est ce dernier cas que nous allons aborder. De ce fait, nous pourrons utiliser les classes nécessaire pour la connexion à la base de données, et utiliser les contrôleurs. Le faite de passer par le Framework nous permettra également d'utiliser le bootstrap (fichier de configuration de Zend).

Installation

Première chose à faire, bien évidement, il faut récupérer l'archive de la dernière version sur le site.

Nous allons voir ensemble les principaux points pour la configuration du Framework, détaillé dans le quickstart.

Voici l'arborescence de Zend :

Sans rentrer dans le détail, pour que votre application fonctionne, soit votre site est à la racine et il vous faut définir le DocumentRoot dans /public/ soit définir un VirtualHost (cf quickstart).

En ce qui concerne les choix des technologies, nous allons utiliser PHP (car c'est le langage le plus couramment utilisé) pour l'interaction avec le serveur en se servant du Zend Framework, Flex 3 pour le côté client (interface), et MySQL pour la base de données.

Vous allez me dire, pourquoi utiliser Flex 3 et non pas Flex 4 (qui vient tout juste de sortir). Alors ma réponse est toute simple, Flex 4 vient tout juste de pointer le bout de son nez, les applications développées avec le sdk de Flex 3 sont nombreuses et les entreprises ne sont pas encore prête à tout changer, Flex 3 à encore quelques années devant lui. Bien entendu nous reviendrons sur le dernier sdk dans un prochain tuto.

Dans un premier temps, nous allons voir comment découper et organiser notre application coté Flex, utilisation du modèle MVC, pour ensuite voir comment déployer le Zend Framework pour qu'il puisse accueillir notre application Flash, et nous terminerons par les interactions entre les différentes parties.

Rappel sur le MVC

Avant d'aller plus loin, il est bon de se faire un petit rappel. Sans s'étaler sur le sujet (de nombreux articles sur le web en parlent), le MVC (ou modèle-vue-contrôleur) est une architecture permettant de développer plus facilement et plus proprement une application, tout en la rendant réutilisable.

< mx:Button label="Delete" icon="@Embed(source='assets/images/delete.png')"/>

Mais lorsque cet icone apparait plein de fois dans l'application, on ne va pas la réimporter à chaque fois, sinon le code va vide devenir lourd, et ça pour rien.
 
La meilleure solution, est de créer une classe qui va ne s'occuper que de ça. Nous allons l'appeler IconLibrary (original non ?)
 

package fr.revolugame.assets  
{
    /**
     * Les icones utilisées dans l'application
     */
    [Bindable]
    public final class IconLibrary
    {
        [Embed(source="assets/images/delete.png")]
        public static const DELETE:Class;
        
        // ...
    }
}

Et lorsque nous voulons l'utiliser dans un mxml :
 

< ![CDATA[
    import fr.revolugame.assets.IconLibrary;
]]>

< mx:Button label="Delete" icon="{IconLibrary.DELETE}"/>
 

Cela permettra d'avoir un code nettement plus propre et probablement moins lourd sur de grosses applications.
 
Si nous voulons encore plus optimiser la chose, il est recommandé de compiler cette librairie dans un swc et de l'importer ensuite dans notre application. Car de ce fait, nous n'aurons pas besoin de recompiler toutes les icones a chaque fois, et pourrons réutiliser cette librairie dans d'autre application.

Il existe deux types d'itemRenderer. 

Tout d'abord un type que nous pouvons qualifier d'inline.
Exemple : 

< mx:DataGrid>
	< mx:columns>
		< mx:DataGridColumn headerText="Nom" />
		< mx:DataGridColumn headerText="">
			< mx:itemRenderer>
				< mx:Component>
					< mx:Button toolTip="Supprimer" />
				< /mx:Component>
			< /mx:itemRenderer>
		< /mx:DataGridColumn>
	< /mx:columns>
< /mx:DataGrid>

C'est-à-dire que l'itemRenderer est intégré directement dans la balise colonne (dans notre cas colonne de la dataGrid) en utilisant la balise <mx :Component> qui permet de définir une nouvelle partie dans notre MXML. Cette nouvelle partie est vraiment à part. C'est-à-dire que les éléments définis entre les balises <mx :Component></mx :Component> sont isolé du reste du MXML.

Dans le cas ou nous avons besoin de communiquer avec le MXML conteneur, nous pouvons utiliser la méthode propre à un component, outerDocument. Cette méthode permet de sortir du component et donc de communiquer avec le code du parent. Voici un exemple :

[Embed(source = 'monImage.png')] private var MonImg:Class;
var pic : Bitmap = new MonImg();

var bmp1 : BitmapData = pic.bitmapData; // récuperation des données
var bmp2 : BitmapData = new BitmapData(18, 16, true); // création de données, avec la taille de l'image finale
var rect : Rectangle = new Rectangle(0, 0, 18, 16); // création de la zone de découpage
var pt : Point = new Point(0, 0); // création du point de fixation de la zone découpée sur la nouvelle image
bmp2.copyPixels(bmp1, rect, pt); // on copie les pixels dans la nouvelle zone
var bmp : Bitmap = new Bitmap(bmp2); // création de notre nouvelle image

Et voilà, nous pouvons maintenant utiliser notre image comme nous le souhaitons, en l'ajoutant à la liste d'affichage par exemple.

Récupération de l'API

Pour pouvoir utiliser l'API dans votre application, il est nécessaire de faire une requete pour recuperer le swc sur le serveur de YouTube. Pour ce faire :

_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));

Utilisation de l'API

Une fois que la librairie à été chargéé, nous pouvons la récuperer et ajouter les écouteurs sur les différentes actions :

private function onLoaderInit(event:Event):void {
    addChild(_loader);
    _loader.content.addEventListener("onReady", onPlayerReady);
    _loader.content.addEventListener("onError", onPlayerError);
    _loader.content.addEventListener("onStateChange", onPlayerStateChange);
    _loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}

Une fois que notre lecteur est prêt, nous pouvons charger et lancer la vidéo :

private function onPlayerReady(event:Event):void {
    // Récupération de l'API youtube.
    _player = _loader.content;
    // On lance notre vidéo à partir de son identifiant
    _player.loadVideoById(VIDEO_ID);
    // On définie la taille de la vidéo
    _player.setSize(480, 270);
}

Pré-requis

haxelib install TweenerHX

Structure du fichier XML

                       
    First photo                 
    slide2.jpg 
    Description
  
                       
    2 photo                 
    slide3.jpg 
    Description 2
  

Chargement des données

La classe Bitmap permet, quand à elle, de représenter des objets d'affichage. Elle va donc nous permettre de transformer nos textes en images. Voici comment faire :

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.text.TextField;

var monTexte : TextField = new TextField();
monTexte.text = "Hello World";
monTexte.autosize = flash.text.TextFieldAutoSize.LEFT;

var bmp : BitmapData = new BitmapData(monTexte.width, monTexte.height);
bmp.draw(monTexte);

var bitmap : Bitmap = new Bitmap(bmp);
addChild(bitmap);

Une petite optimisation qui peut vraiment être utile lors du développement de grosses applications utilisant beaucoup de zone de texte.

La partie graphique

Pour commencer, notre classe a besoin de plusieurs paramètres, tel
que son parent, sa couleur, ou encore son contenu.

Voici la signature de notre classe :

public function PopUp(_parent:Stage, _color:uint, content:MovieClip):void

Dans le constructeur, nous instancions les différentes parties de notre fenêtre, puis nous dessinons le cadre et l'entête.

• MouseCursor.AUTO : l'état par défaut
• MouseCursor.ARROW : le curseur représentant la flèche
• MouseCursor.BUTTON : le curseur en forme de main appuyant sur un bouton
• MouseCursor.HAND : le curseur en forme de main réalisant un glissement
• MouseCursor.IBEAM : le curseur en I de sélection de texte

import flash.ui.Mouse;
import flash.ui.MouseCursor;

Mouse.cursor = MouseCursor.HAND;

Aspect visuel : la classe graphics

private function draw():void {
    var bg : Shape = new Shape();
    bg.graphics.beginFill(_bgColor);
    bg.graphics.lineStyle(0x000000);
    bg.graphics.drawRect(0, 0, _largeur, _hauteur);
    bg.graphics.endFill();
    addChild(bg);
} 

private function drawScroller():void {
    // petite vérification, pour ne pas dessiner de scroller s'il n'y en a pas besoin               
    if (_scrollContent.height > _hauteur) {
        var coeff : Number = _scrollContent.height / _hauteur;
        var tmp_scroll_height : Number = _hauteur / coeff; // pour verif que le scroller n'est pas trop petit
        if (tmp_scroll_height < 20) tmp_scroll_height = 20;
               
        _scroller = new Sprite();
        _scroller.graphics.beginFill(0x000000);
        // on dessine notre rectangle avec un petit décalage
        _scroller.graphics.drawRect(2, 2, _largeur - 4, tmp_scroll_height);
        _scroller.graphics.endFill();
               
        _scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
        _scrollContent.parent.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
               
        addChild(_scroller);
        _scroller.buttonMode = true;
               
        // rectangle qui correspond à la trajectoire du scroller
        rect_scroller = new Rectangle(0, 0, 0, _hauteur - _scroller.height - 4);
    }
} 

Tout d'abord, il est nécessaire de toujours typer ses variables afin d'optimiser les performances et garantir une meilleure gestion des erreurs à la compilation et  à l'exécution. Par exemple, préférer

var i : int = 0; 

à

var i = 0;

Par contre, si une variable peut contenir n'importe quel type de données, nous pouvons utilisez le type *.

Lorsque vous utilisez une boucle, il est préférable de passer par une variable de référence, pour éviter que la machine virtuelle ne réévalue la longueur à chaque itération. Exemple :

var a : Array< Float > = new Array();

a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // rouge
a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // vert
a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // bleu
a = a.concat([0.0, 0.0, 0.0, 1.0, 0.0]); // alpha

var filtre : ColorMatrixFilter= new ColorMatrixFilter(a);
monClip.filters = [filtre];

Pré-requis :

• Le SDK de Flex (téléchargeable ici).
• Les librairies AS3 de Mochiads (téléchargeable ici).
• et bien évidemment haXe et SWFmill.

Intégrer les classes Mochiads à notre projet

Décompressez l'archive contenant les librairies de Mochiads, puis lancez la commande suivante :

compc -source-path . -output mochi.swc -include-classes mochi.as3.MochiAd mochi.as3.MochiDigits mochi.as3.MochiScores mochi.as3.MochiServices

Vous avez maintenant un fichier swc.

Un fichier swc est une archive contenant un fichier swf correspondant aux librairies, ainsi que d'autres ressources ne nous intéressant pas.

Récupérez le fichier library.swf (sous Windows, renommez le fichier en .zip).
Nous allons maintenant générer les entêtes des classes avec la commande :