J’ai donc démarré le développement d’une librairie de composants, avec un ensemble de classes pour la gestion de mes vues, que j’utilise directement dans le simulateur. 3 composants principaux pour l’instant, dérivés de TitleWindow :

• DraggableWindow et ResizableWindow : un TitleWindow draggable et resizable (on s’en serait douté !), inspiré de plusieurs travaux sur des composants Flex glané sur le web. La notion de Skin à une place importante, et, je l’espère, moins limitative que certain exemple que l’on peux trouver… et d’autres petites « features » que je vous laisse découvrir !
• ExpandedWindow est le concentré des 2 autres, avec une gestion d’évenements « minimize » et « maximize », à la manière de l’évenement « close » du TitleWindow.

Je vous propose de découvrir cette petite librairie, via le googleCode « lafabrick » (pour changer !)

• lafabrick.swc
• documentation

UPDATE
Un petit exemple, avec les sources.

N’hésitez pas à me faire part de vos réactions, remarques et idées qui me permettront d’améliorer et d’étoffer cette librairie.Autres articles sur le même sujet

• Pimp my Flex
• PixFormat, le prochain compagnon de votre backOffice !
• Le design déclaratif à un nom : Degrafa
• librairie lafabrick : mise à jour

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

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