Voilà quelques temps que nous nous activions sans donner de nouvelles…, il est temps de corriger tout ça.
Aussi, pour démarrer cette nouvelle année du bon pied, La Fabrick vous propose une petite application de génération de code AS3 à partir d’un schéma XSD.

Ce petit outil nous a été utile pour pas mal de projets développés pour nos premiers clients, alors pourquoi ne pas vous en faire profiter ? Peut-être deviendrez-vous aussi MdaME-addict ?

Retrouvez toutes les infos sur http://mdame.lafabrick.comAutres articles sur le même sujet

• API de dessin en AS3
• Crée ton navigateur perso avec 5 lignes de code !
• Flex Builder 3 et le PHP ( PDT ) : installation
• Skiner un composant Flex 3 avec Fireworks CS3 [Tutoriel Vidéo]

Explication…

Layouts

Sans faire un article complet sur les layout (ce qui serait tout à fait possible et intéressant), on peut tout de même rappeler que le Flex 4 se distingue de Flex 3 via Spark par une volonté de mieux séparer le fond de la forme, il amène donc une notion de layout pour, comme son nom le suggère, organiser les composants d’un conteneur (par exemple un <s:Group>).
Exit donc la VBox ou la HBox (même si le VGroup ou le HGroup permettent de faire une transition en douceur), et bienvenue au Group avec layout :

<mx:VBox>
</mx:VBox>

devient donc

<s:Group>
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:Group>

Au premier abord on dit : c’est plus verbeux ! Oui mais… le layout a cette particularité, en tant que propriété du composant, d’être modifiable à la volée, contrairement à un composant imposant sa mise en forme. Concrètement, là où la VBox présentera toujours ses enfants verticalement (c’est son nom !), le Group pourra changer à volonté de layout, donc très facilement passer de HorizontalLayout à VerticalLayout par exemple… On comprend encore mieux l’intérêt quand on se met à écrire son propre layout pour faire des choses un peu plus poussées visuellement !

Créer son layout

Pour créer un layout, il faut étendre la classe LayoutBase et surcharger a minima la méthode updateDisplayList() et certainement la méthode measure(). Ces méthodes gardent le même rôle qu’en Flex 3, mais avec l’adaptation contextuelle au Layout :

• updateDisplayList : dispose les enfants du conteneur et définit leur taille
• measure : donne la taille globale du conteneur

Vous pouvez accéder à la propriété « target » du layout qui correspond au conteneur auquel est appliqué le layout et travailler sur les enfant via les méthodes getElementAt() ou getVirtualElementAt(). La seconde méthode sert dans le cas où le layout est dit « virtualisé ».

Apparté : virtualisation de layout

Flex 4 permet, pour des raison de performance, d’utiliser un layout en mode « virtualisé », c’est-à-dire ne calculant la disposition des seuls enfants à afficher et non l’ensemble des enfants. Ce mode de fonctionnement s’applique particulièrement bien aux composants comprenant une liste de beaucoup d’enfants, mais ne calculant l’affichage d’une poignée à la fois, le reste attendant un scroll ou une action similaire pour être éventuellement affiché.

Application : création d’un ViewStackLayout

Avec les layouts en tête, il est inutile de demander pourquoi le composant ViewStack n’existe pas dans Spark : il devrait en pratique être un layout applicable à n’importe quel conteneur ! Même si le très bon article sur la virtualisation mentionne un prometteur je cite « (Planned) StackLayout », rien ne nous empêche d’en faire un simple, adapté à l’architecture Spark, plutôt que d’attendre (oui on est impatients à la fabrick).

Voici un exemple simple :

	import mx.core.IVisualElement;
	import spark.layouts.supportClasses.LayoutBase;

	public class ViewStackLayout extends LayoutBase {
		public function ViewStackLayout() {
			super();
		}

		protected var _index:uint;

		public function get index():Number {
			return _index;
		}

		public function set index(value:Number):void {
			if (_index != value && target != null && value >= 0 && value < target.numElements) {
				_index = value;
				target.invalidateSize();
				target.invalidateDisplayList();
			}
		}

		override public function updateDisplayList(width:Number, height:Number):void {
			var element:IVisualElement = useVirtualLayout ? target.getVirtualElementAt(index) : target.getElementAt(index);

			if (element) {
				element.setLayoutBoundsSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
				target.setActualSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
				target.setContentSize(element.getPreferredBoundsWidth(), element.getPreferredBoundsHeight());
			}
		}

		override public function measure():void {
			var count:int = target.numElements;

			for (var i:uint = 0; i < count; i++) {
				var element:IVisualElement = useVirtualLayout ? target.getVirtualElementAt(i) : target.getElementAt(i);

				if (i == index) {
					element.visible = true;
					element.includeInLayout = true;
					target.measuredWidth = element.getPreferredBoundsWidth();
					target.measuredHeight = element.getPreferredBoundsHeight();
				} else {
					element.visible = false;
					element.includeInLayout = false;
				}
			}
		}
	}

Vous noterez ici l’usage du getVirtualElementAt, en prévision de la gestion de la virtualisation.
Vous pouvez donc utiliser ce layout dans un DataGroup « piloté » par une tabbar par exemple comme ceci :

<s:TabBar id="tabEditors" />
<s:DataGroup id="editors">
<s:layout>
<mylayouts:ViewStackLayout index="{tabEditors.selectedIndex}" />
</s:layout>
<!-- Enfants... -->
</s:DataGroup>

De cette façon, le jour où vous voudrez présenter ces éléments sous forme de CoverFlow, en mode TimeMachine… vous n’aurez pas à modifier le code de votre composant, mais uniquement votre skin.

Alors, on n’est pas mieux habillé en Spark ?Autres articles sur le même sujet

• Reflex #1: une micro-architecture pour Flex… simple !
• Flex4 : composant personnalisé et skinning
• UIGFX practice : a CircularSlider component
• Proches de l’Ohio??? Les états esthètes de Flex4

Autres articles sur le même sujet

• API de dessin en AS3
• Petit cours sur l’API de dessin
• la claque en 3D
• Lively : la vie virtuelle de Google

Box2DFlashAS3 est un portage AS3 d’un __moteur physique__ développé en C++ par Erin Catto’s Box2D ).

Les exemples sont impressionnants !!!

Autres articles sur le même sujet

• Les frameworks AS3 qui vont bien !
• APE : mise en pratique
• Alternativa3D : un petit nouveau dans le monde de la 3D Flash
• MdaME, ma résolution 2011 de génération de code AS3

Cela fait longtemps qu’un petit test d’APE, le moteur physique AS3, traîne sur mon ordi : c’est le moment d’en faire un petit tuto. Depuis le temps que Erick me le demande !

Récupération du framework et création du projet

• Dans un premier temps, récupérez le framework APE. A cette adresse vous pouvez le télécharger en version archive.

Attention : le code source donné via le repository, et la doc associée ne correspondent pas. Le SVN sert uniquement de dépôt pour les futures versions. A récupérer via le SVN si vous êtes vraiment un foufou des frameworks !

• Créez un nouveau projet ActionScript, nommé APE.
• Clic droit sur le projet, et dans les propriétés, allez dans « ActionScript Build Path », et ajoutez le chemin vers APE (pointez sur le répertoire « source »). APE est maintenant disponible.

Un peu de code !

• Import des classes

Nous allons donc commencer par importer les classes nécessaires. Nous aurons besoin de APE dans son ensemble, ainsi que la classe Event et KeyboardEvent :

package
{
     import org.cove.ape.*;
     import flash.display.Sprite;
     import flash.events.Event;
     import flash.events.KeyboardEvent;

     [SWF(width="1000", height="1000")]
     public class APE extends Sprite
     {
          public function APE()
         {
         }
     }
}

• Implémentation du moteur

Placez vous dans le constructeur et déclarez le moteur comme suit (tout est dans le commentaire !) :

public function APE()
{
     // On boust un brin le framerate de l'appli
     stage.frameRate = 60;
     // le paramètre donne la vitesse d'execution du moteur.
     //    La classe APEngine préconise 1/3 ou 1/4...
     //    fesons ce qu'on nous dis !
     APEngine.init(1/4);
     // Définition du conteneur du moteur : ici this
     APEngine.container = this;
     // Ajout du vecteur de gravité global au moteur.
     //    ici : force de 3 vers le bas.
     //    Vous pouvez aussi essayer d'autre valeur de vecteur
     APEngine.addMasslessForce(new Vector(0,3));
}

• Création du monde

Maintenant nous allons créer un « monde physique ». Toujours dans le constructeur, nous allons créer 3 objets avec des composantes d’élasticité, et 5 objets standards (toujours dans le constructeur) :

// Création du groupe référencant les particules et contrraintes
//    le paramètre true indique que ce groupe contient des particules et contraintes
//    dépendantes les une des autres
//    (en gros que les plaques seront le sol de la bébête)
var g:Group = new Group(true); 

// -OBJET ELASTIQUE ------------------------------------------
// Création de la plaque Elastique 1
//     les paramètres donnent la position x et y,
//     la taille width et height,
//     la rotation de l'élément,
//     et si l'objet est fixe ou non
var plElastic1:RectangleParticle = new RectangleParticle(720, 400, 50, 5, 0,true);
// Elasticité de la plaque
plElastic1.elasticity = 2;
// Style de la plaque
plElastic1.setStyle(0, 0x6699aa, 1, 0x996633);
// Ajout de la plaque dans le groupe
g.addParticle(plElastic1); 

// idem pour la plaque 2
var plElastic2:RectangleParticle = new RectangleParticle(745, 300, 5, 200, 0,true);
plElastic2.elasticity = 1;
plElastic2.setStyle(0, 0x6699aa, 1, 0x996633);
g.addParticle(plElastic2); 

// idem pour la plaque 3
var plElastic3:RectangleParticle = new RectangleParticle(80, 360, 100, 5, 45,true);
plElastic3.elasticity = 2;
plElastic3.setStyle(0, 0x6699aa, 1, 0x996633);
g.addParticle(plElastic3); 

// -OBJET STANDARD ------------------------------------------
// idem que précédent sans propriété particulière
var plStd1:RectangleParticle = new RectangleParticle(400, 400, 600, 5, 0,true);
g.addParticle(plStd1); 

var plStd2:RectangleParticle = new RectangleParticle(55, 220, 5, 200, 0,true);
g.addParticle(plStd2); 

var plStd3:RectangleParticle = new RectangleParticle(350, 200, 300, 5, 0,true);
g.addParticle(plStd3); 

var plStd4:RectangleParticle = new RectangleParticle(450, 300, 350, 5, 0,true);
g.addParticle(plStd4); 

var plStd5:RectangleParticle = new RectangleParticle(550, 100, 350, 5, 0,true);
g.addParticle(plStd5);

Vous pouvez jouer avec plein d’autres propriétés pour ces objets : mass, friction, … A vous de tester tout ça !

• Création de la bébête

Bon le plus marrant ! La bébête à roulette. Alors là on peut se lâcher complet ! … bon pas trop quand même pour le tuto, je vous laisse le soin de vous amuser. On va créer une bestiole à 4 roues.

Dans un premier temps, on va déclarer les « roues » au niveau de la classe : elle devront être accessibles à l’ensemble des méthodes pour la suite du tuto :

[SWF(width="1000", height="1000")]
public class APE extends Sprite
{
     private var wheelParticleA:WheelParticle;
     private var wheelParticleB:WheelParticle;
     private var wheelParticleC:WheelParticle;
     private var wheelParticleD:WheelParticle;
     public function APE()
     {
          // …

La création en elle-même :

// Création de la particule Roue A
//     les paramètres donnent la position x et y,
//     le rayon,
//     et si l'objet est fixe ou non,
//     et on peu lui ajouter des propriétés (ici une masse = 2)
wheelParticleA = new WheelParticle(140,10,14,false, 2);
g.addParticle(wheelParticleA); 

// idem pour la roue B
wheelParticleB = new WheelParticle(180,10,14,false, 2);
g.addParticle(wheelParticleB); 

// idem pour la roue C
wheelParticleC = new WheelParticle(180,50,14,false, 2);
g.addParticle(wheelParticleC); 

// idem pour la roue D
wheelParticleD = new WheelParticle(140,50,14,false, 2);
g.addParticle(wheelParticleD); 

// création des connecteurs entre les roues
//     les paramètres : les 2 objets à connecter,
//     le dureté de la connection,
//     et si l'objet est coller ou non,
//     la taille de la connection
var wheelConnector1:SpringConstraint = new SpringConstraint(wheelParticleA,
     wheelParticleB, 0.5, true, 8);
var wheelConnector2:SpringConstraint = new SpringConstraint(wheelParticleB,
     wheelParticleC, 0.5, true, 8);
var wheelConnector3:SpringConstraint = new SpringConstraint(wheelParticleC,
     wheelParticleD, 0.5, true, 8);
var wheelConnector4:SpringConstraint = new SpringConstraint(wheelParticleD,
     wheelParticleA, 0.5, true, 8); 

// Ajout des connecteurs au groupe
g.addConstraint(wheelConnector1);
g.addConstraint(wheelConnector2);
g.addConstraint(wheelConnector3);
g.addConstraint(wheelConnector4); 

// Ajout du groupe au moteur de rendu
APEngine.addGroup(g);

Voila pour la bébête !

• La routine RUN

Nous allons maintenant créer la routine EnterFrame qui va mettre à jour tout ça dans le temps :

private function run(evt:Event):void {
// on demande au moteur de faire son boulot ...
APEngine.step();
// ... et on affiche le résultat
APEngine.paint();
}

Il faut aussi ajouter dans le constructeur le lancement de l’évènement EnterFrame :

addEventListener(Event.ENTER_FRAME, run);

• Ajout de la couche d’interactivité

Plus qu’à faire bouger le biniou ! Pour cela, on ajoute 2 évènements Clavier KEY_DOWN et KEY_UP avec leurs méthodes associées :

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

Et les méthodes :

 // Quand l'utilisateur presse une touche ...
private function keyDownHandler(keyEvt:KeyboardEvent):void {
     var keySpeed:Number = 0.4;
     // Quand l'utilisateur presse la touche gauche : on change la vitesse angulaire des roues
     if (keyEvt.keyCode == 37) {
          wheelParticleA.angularVelocity = -keySpeed;
          wheelParticleB.angularVelocity = -keySpeed;
          wheelParticleC.angularVelocity = -keySpeed;
          wheelParticleD.angularVelocity = -keySpeed;
     }
     // idem pour la touche droite
     else if (keyEvt.keyCode == 39) {
          wheelParticleA.angularVelocity = keySpeed;
          wheelParticleB.angularVelocity = keySpeed;
          wheelParticleC.angularVelocity = keySpeed;
          wheelParticleD.angularVelocity = keySpeed;
     }
} 

// Quand l'utilisateur relâche une touche ...
private function keyUpHandler(keyEvt:KeyboardEvent):void {
     // On remet les vitesse angulaire des roue a 0
     wheelParticleA.angularVelocity = 0;
     wheelParticleB.angularVelocity = 0;
     wheelParticleC.angularVelocity = 0;
     wheelParticleD.angularVelocity = 0;
}

Et voilà !!!!

Code source final

Aperçu

Ressources

• Site web APE (à voir les démos et exemples)
• Documentation de l’API
• repository SVN pour les anciens !

Autres articles sur le même sujet

• API de dessin en AS3
• Les frameworks AS3 qui vont bien !
• Moteur physique : Box2DFlashAS3 , de la concurrence pour APE…
• Flex 4 et les layouts – Faire une ViewStack « pure » Spark

Manque plus qu’une goutte d’APE avec çà… Autres articles sur le même sujet

• API de dessin en AS3
• Petit cours sur l’API de dessin
• APE : mise en pratique
• Alternativa3D : un petit nouveau dans le monde de la 3D Flash

ImageProcessing

Ce framework de manipulation d’image est la mise en place version AS3 des équations graphiques. L’objectif de ce framework est en gros de vous permettre de réaliser pratiquement toute les manipulations de filtre sur une image, comme dans Photoshop, d’une manière très simple.

Ressources

• Lien web (exemples et téléchargement)
• Documentation

Actionscript Physic Engine (APE)

APE est un un moteur physique AS3. Il vous permet de gérer des object mobiles et imobiles, et de contrôler les valeurs physiques de chacun d’eux (elasticité, gravité du moteur, etc…).

Ressources

• Lien
• repository SVN
• Documentation

Framework 3D

Pour la 3D, 3 frameworks ce distingues, tout 3 étant une transposition de Java3D. A vous de trouver celui qui correspondra au mieux a vos projets, tout trois ayant leurs spécificité propre.

Sandy

Ce framework « Made in France » est l’oeuvre de Thomas Pfeiffer. Très simple d’utilisation, disponible en version AS2 et AS3, il a l’énorme avantage d’avoir une communauté francophone très réactive. Vous trouverez notement beaucoup d’information sur les forum de MediaBox. A noter la grande disponibilité et réactivité de Thomas !

Ressources

• Lien
• SVN (version AS3)
• Documentation (version AS3)

Documentation

Papervision3D et Away3D

Ces 2 frameworks sont aussi différents qu’il sont indissocialbe. Je m’explique : PaperVision3D est, comme Sandy, une écriture version AS3 de Java3D. Il s’axe avant tout sur la modélisation 3D d’object dans l’espace. Away3D est une réecriture de PaperVision et lui ajoute en plus la gestion de lumière. Il serait question d’une fusion des 2 framwork pour la version 2 de paperVision. Affaire a suivre donc. Papervision a l’avantage d’avoir un composant MXP disponible pour Flash9, permettant une intégration plus « visuel » de vos object 3D. A noté que la communauté PaperVision est beaucoup plus anglophone.

Ressources PaperVision3D

• Lien
• SVN
• Documentation

Ressources Away3D

• Lien
• Page de téléchargement
• Documentation

Autres articles sur le même sujet

• AS3 : optimiser les calculs
• Librairie lafabrick : parce que je le vaut bien
• APE : mise en pratique
• Alternativa3D : un petit nouveau dans le monde de la 3D Flash

Pour résumer :

• pour une division : la multiplication est plus rapide que la division ( ‘somme *.5‘ est executé plus rapidement que « somme / 2 » ). Mais c’est l’utilisation d’une ‘Bitwise shift operation‘ qui s’avère la plus efficace : « somme>> 1« 

• pour arrondir des nombres : var arrondi:uint = uint( decimal ); est ( beaucoup ) plus rapide que var arrondi:uint = Math.floor( decimal );

Lire l’article completAutres articles sur le même sujet

• Les frameworks AS3 qui vont bien !
• Des ressources Flash / Flex… en francais!
• Flex et les warnings inutiles…
• Flex 4 et les layouts – Faire une ViewStack « pure » Spark

• une introduction au framework PixLib ( depuis le temp que je cherchais çà )
• le blog de Kap IT , qui a publié une bonne introduction à Caingorm
• Itératif : les composants tooltip, les tabs…

Autres articles sur le même sujet

• Les frameworks AS3 qui vont bien !
• Régler les erreurs d’attaches dans Flex, ou comment "forcer" la mise à jour des "bindings"…
• Cairngorm pour les fainéants… Tour d’horizons des code generator
• Flex et les warnings inutiles…

Avant de démarrer…

…vous pouvez jeter un oeil sur le billet AS2 concernant l’api de dessin ! Il faut aussi savoir certaines petites choses concernant l’AS3 : « _x » devient « x », « _root » devient « root », etc…

La création de forme en AS3

la création dynamique de forme en AS3 nécessite 2 classes : Shape et Graphics, distribué dans le package flash.display. Contrairement à l’AS2, les méthodes de création de forme (lineStyle, moveTo, …) ne sont plus ratachées à l’objet MovieClip, mais à un objet Graphics. L’objet Shape est le « conteneur ». Il suffit, en AS3, d’invoquer la méthode addChild (:displayObject) pour afficher l’objet sur la scène.

Code source

// Importation des classes Shape et Graphics
//  pour la création de forme
import flash.display.Shape;
import flash.display.Graphics; 

// Création du conteneur de la forme dynamique
var form:Shape = new Shape(); 

// Déclaration du tableau
var tab:Array = new Array(); 

// Ajout des Object vecteur
tab = [
     {px:200, py:300, cx:200, cy:200},
     {px:300, py:400, cx:200, cy:400},
     {px:450, py:450},
     {px:400, py:300, cx:400, cy:400},
     {px:450, py:220},
     {px:300, py:200, cx:400, cy:200},
     {px:150, py:150, cx:250, cy:200}
];
// Non obligatoire : efface toutes formes préalablement
//  créer avec l’api de dessin
form.graphics.clear(); 

// Définition de la ligne (taille=1, couleur=#333333, alpha=100)
form.graphics.lineStyle(1, 0x333333, 100);
// Définition du fond (couleur=#F7F7F7, alpha=100)
form.graphics.beginFill(0xF7F7F7, 100); 

// Définition du point d’origine
form.graphics.moveTo(tab[tab.length-1].px, tab[tab.length-1].py); 

// Passage dans les lignes du tableau
for (var i=0; i<tab.length; i++)
{
     // Si le point de control cx n'est pas définit,
     //  on applique un lineTo, sinon un curveTo
     tab[i].cx == undefined ?
          form.graphics.lineTo(tab[i].px, tab[i].py) :
          form.graphics.curveTo(tab[i].cx, tab[i].cy, tab[i].px, tab[i].py);
} 

// Définit la fin de la forme
form.graphics.endFill(); 

// Affichage de l'object form
addChild(form);

Quelques liens pour aller plus loin :

• Migration AS2 vers AS3
• liveDocs flash.display.Graphics : la classe Graphics AS3

Autres articles sur le même sujet

• Petit cours sur l’API de dessin
• APE : mise en pratique
• Vas-y et apprends !!! ( et range ta chambre pendant que t’y es )
• Flex4 : skin et primitives