EKAMELEON - DevBlog ActionScript & ECMAScript

Description

La classe Background est une classe simple mais très efficace que j'utilise dans pratiquement tous mes projets AS3. Cette classe hérite de la classe flash.display.Sprite et permet de générer des zones graphiques rectangulaires. Ces zones peuvent aussi bien remplir l'intégralité de la zone visible du FlashPlayer ou plus simplement servir de fond pour divers éléments graphiques d'une application (menus, listes, lecteur vidéo, etc.)

Cette classe utilise les API dynamiques de dessins pour générer très simplement un rectangle coloré (uni ou dégradé) ou texturé en utilisant les outils de dessins disponibles dans PEGAS.

Note : Je ne vais pas rentrer trop dans le détail ici sur le moteur de dessin de PEGAS car cette implémentation nécessite une série de tutoriels précis et complets. Je ne vais donc pas trop parler dans les exemples qui suivent des classes spécifiques de PEGAS mais n'hésitez pas en cas de problème à me poser des questions sur le sujet en attendant que je trouve le temps d'écrire les articles manquants sur le sujet.

Les bases

Pour commencer voyons tout simplement comment créer via quelques lignes de codes une zone rectangulaire avec la classe Background :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
area.x = 25 ;
area.y = 25 ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.w    = 400 ;
area.h    = 300 ;
 
addChild( area ) ;

Le code ci-dessus permet de générer une zone rectangulaire de 400 pixels de large (w) par 300 pixels de hauteur (h) avec une couleur de remplissage 0xD97BD0 et une transparence de 80% (alpha).

Dans la classe Background nous utilisons les propriétés virtuelles "w" et "h" pour définir la largeur et la hauteur absolues que nous voulons attribuer à notre zone rectangulaire. Je parle ici de taille "absolue" car finalement même si nous attribuons les valeurs 400 et 300, le rectangle n'aura peut être pas au final cette taille si l'on regarde les propriétés classiques "width" et "height" du display, surtout si nous appliquons à notre zone rectangulaire un contour.

Je reprends l'exemple précédent en ajoutant un contour avec la propriété "line" de la classe Background :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
import pegas.draw.LineStyle ;
 
var area:Background = new Background() ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.line = new LineStyle( 2, 0xD97BD0, 0.6 ) ;
area.w    = 400 ;
area.h    = 300 ;
 
addChild( area ) ;

Dans l'exemple ci-dessus j'applique sur la zone rectangulaire un contour avec une épaisseur de 2 pixels avec la propriété "line" qui prend pour valeur un objet de type LineStyle. Avec un petit test très simple nous pouvons isoler la différence entre les propriétés w/h et width/height :

Très bonne année 2009 et surtout bonne santé !!

Je commence donc cette année avec l'avant dernier article du chapitre D sur les ressources externes des fichiers de configuration d'une fabrique IoC

J'aurai pu faire un simple petit article classique mais je préfère faire d'une pierre deux coups

J'espère que cette année 2009 me laissera le temps de continuer mon travail sur la version 2 de VEGAS avec la fusion dans Maashaack de la plupart des packages system.events, system.process et system.ioc !

Sinon la bonne résolution pour 2009 c'est de débuter le projet de GUI AIR pour créer des RIA facilement basé sur eden et IoC + un petit projet qui me tiens à coeur avec Zwetan ... un projet de flibustier et qui sent bon le bateau en pleine mer ou dans l'espace ??... enfin je me comprends lol

Je tiens à remercier tous ceux qui m'ont aidés pendant 2008 et qui ont encore le courage de le faire cette nouvelle année pour faire avancer le projet

PS : Pour ma part j'attends en 2009 des news importantes sur le futur de l'ActionScript avec AS4 !

Je peux maintenant vous laisser le temps pour lire ce nouvel article sur les ressources de type "config". Bonne lecture à tous

Voici la seconde partie du chapitre D qui traite des chargements de ressources externes pendant l'initialisation d'une fabrique IoC basée sur AndromedAS. Nous allons voir tout particulièrement les ressources de type "assembly".

3 - Les ressources de type "assembly"

Les ressources de type "assembly" servent principalement à charger des swf externes ou des images dans l'application principale de la fabrique IoC.

Le plus souvent il sera pratique d'utiliser des ressources au format swf qui serviront de bibliothèques externes partagées contenant des classes non définies dans l'animation principale mais aussi des éléments graphiques, sonores, vidéos, etc.

Ces ressources peuvent donc charger des fichiers de type : swf, jpg, png et gif

Nous avons vu que lorsque nous créons une définition d'objet dans un conteneur léger la propriété "type" de la définition correspond à un type de donnée ou une classe qui doit être présent en mémoire dans l'application au moment de la compilation ou après la compilation (runtime). Dans le cas contraire la fabrique IoC aura du mal à trouver en mémoire la classe (ou fonction constructeur) nécessaire pour créer l'objet correspondant.

Ces ressources permettront également dans un cadre plus étendu de définir dynamiquement une définition d'objet qui sera injectée dans la fabrique une fois le swf ou l'image externe chargé. Cette définition d'objet servira de lien entre la fabrique IoC et l'asset externe chargé dans l'application principale.

Pour utiliser cette fonctionnalité avancée il faut absolument utiliser l'attribut "id" de la ressource définie dans le fichier de configuration externe du contexte IoC du conteneur. Si la ressource de type "assembly" est définie sans un identifiant "id" valide alors le fichier externe sera chargé et placé en mémoire mais la fabrique IoC n'aura aucun moyen de cibler un élément contenu dans le fichier externe chargé.

Nous allons aborder dans cet article la configuration des fabriques IoC.

Pour ceux qui découvrent dans cet article le design pattern d'Inversion de contrôle avec VEGAS et qui n'ont pas eu encore le temps de consulter les articles précédents, voici une liste rapide des derniers articles à lire avant d'entamer celui-ci :

• A - Design Pattern d'inversion de contrôle - Généralités
• B - Les définitions d'objets (Partie - 1/5)
• B - Les définitions d'objets (Partie - 2/5)
• B - Les définitions d'objets (Partie - 3/5)
• B - Les définitions d'objets (Partie - 4/5)
• B - Les définitions d'objets (Partie - 5/5)

Comme toujours je vous rappelle rapidement les liens importants pour installer VEGAS et poser des questions à propos des concepts définis dans mes articles :

Pour ceux qui débarquent dans l'aventure, et qui ne savent pas encore ce que représente VEGAS, comment l'installer etc.. Je vous propose d'aller faire un tour rapide sur le Google Code du projet :

• http://code.google.com/p/vegas/
• http://code.google.com/p/vegas/wiki/InstallVEGASwithSVN

Pour toutes vos questions sur VEGAS et ses extensions n'hésitez pas à vous inscrire sur le Google Groups du projet :

VEGASoS : http://groups.google.com/group/vegasos

Introduction

Les fabriques IoC dans AndromedAS sont configurables. Il est possible de définir les paramètres généraux de configuration d'une fabrique en alimentant le contenu de sa propriété "config".

La propriété "config" est un objet de type andromeda.ioc.factory.ObjectConfig. Voici la liste de ses attributs disponibles dans cet objet de configuration :

config

Défini un objet servant de configuration globale dans la fabrique ou l'application utilisant cette fabrique.

defaultInitMethod

Défini le nom de la méthode par défaut à utiliser dans toutes définitions d'objet au moment de l'initialisation d'un objet généré avec l'une d'elles.

defaultDestroyMethod

Défini le nom de la méthode par défaut à utiliser dans toutes définitions d'objet au moment de supprimer un objet singleton généré avec l'une d'elles.

identify

Défini globalement la politique d'identification automatique des objet qui implémentent l'interface Identifiable générés dans la fabrique IoC.

locale

Défini un objet localisé servant de base pour alimenter les définitions d'objet de la fabrique selon les besoins avec des valeurs localisées.

lock

Défini globalement la politique du mode de sécurité implémenté par tous les objets ILockable générés via la fabrique IoC.

root

Défini la référence de la scène principale de l'application liée à la fabrique IoC, cette valeur permet d'utiliser dans les attributs "ref" des définitions d'objet l'expression "#root"

throwError

Défini ou désactive la diffusion des erreurs pendant l'initialisation de la fabrique. Par défaut cet attribut est true.

typeAlias

Défini les alias utilisés au moment de filtrer les types dans les définitions d'objet (si la propriété typePolicy a pour valeur "alias" ou "all").

typeExpression

Défini les expressions de formatage utilisées pour filtrer les types dans les définitions d'objet (si la propriété typePolicy a pour valeur "expression" ou "all").

typePolicy

Défini la politique de filtrage du type défini dans les définitions d'objet du conteneur léger au moment d'instancier un nouvel objet pour un identifiant donné.

useLogger

Défini le mode de diffusion des messages d'information, warning, erreurs, etc. de la fabrique entre un simple trace() ou le modèle de log défini dans VEGAS.

Introduction

Voici la nouvelle version mise à jour de mon tutoriel sur le Design Pattern Visitor avec cette fois ci un exemple tout en AS3 optimisé et basé sur la toute dernière version de AndromedAS. Ce tutoriel est le premier d'une série de plusieurs autres qui vont illustrer tout doucement toutes les possibilités offertes par l'extension AndromedAS de VEGAS.

Pour ceux qui voudraient relire l'ancienne version de ce tutoriel je vous propose d'aller faire un tour : sur la page de la version AS2 du pattern Visitor

Ce tutoriel remonte à décembre 2006, le temps passe vite ! Depuis de l'eau a coulée sous les ponts et les implémentations du pattern Visitor ont changé de package et se trouvent maintenant dans le package andromeda.util.visitor et plus dans le package vegas.util.* .

A - Généralité

1 - Définition

Le Design Pattern Visitor permet simplement d'ajouter sur une classe ou instance des fonctionnalités non prévues au départ sans surcharger la structure de base de l'objet et en gardant si possible une certaine flexibilité et souplesse pour ajouter ou enlever rapidement d'autres fonctionnalités sans alourdir à nouveau l'implémentation définie au départ.

Je vous conseille de lire en complément de mon explication les articles à ce sujet sur Wikipedia qui vous apporteront peut être quelques explications supplémentaires sur le sujet.

Pour faire simple, le Design Pattern Visitor s'articule autour d'une classe qui pourra être "visitée" par d'autres classes via une méthode accept() (le nom de la fonction peut varier selon les implémentations du pattern). Cette méthode "accept" prend en paramètre un objet de type "visiteur" et va lancer automatiquement la méthode visit() du "visiteur". Ainsi l'objet visiteur pourra contrôler convenablement l'objet visité en récupérant simplement la référence de cet objet.

2 - Implémentation dans AndromedAS

Dans AndromedAS j'ai implémenté 2 interfaces très simples pour structurer ce Design Pattern. Il est bien entendu possible de juste s'inspirer de ces 2 interfaces pour réaliser d'autres conceptualisations selon des besoins précis. Mais dans mes travaux quotidiens ces 2 interfaces sont suffisantes.

Généralité

La classe AS2 asgard.display.DisplayObject est une classe très importante car elle permet de créer des objets qui permettent de contrôler les vues d'une application. Les vues d'une application en ActionScript 2 c'est avant tout des clips (MovieClip), des champs de texte (TextField) et des vidéos.

La classe DisplayObject permet d'étendre les possibilités des objets visuels dans vos applications en utilisant le principe de composition. La composition est un principe en programmation important qui permet de relier 2 objets ensembles et il est vrai que dans les concepts plus ou moins avancés de programmation orienté objet il existe plusieurs "écoles" entre ceux qui utilisent la composition ou ceux qui au contraire vont prévilégier l'utilisation d'une délégation entre les objets par héritage.

Voyons avant d'aller plus loin 2 petits exemples pour illustrer les 2 notions de composition et d'héritage pour créer une classe qui va étendre les possibilités de la classe MovieClip :

Héritage

class CustomDisplay extends MovieClip
{
 
      function CustomDisplay()
      {
 
 
      }
 
      // ....
 
}

Composition

class CustomDisplay
{
 
      function CustomDisplay( target:MovieClip )
      {
            view = target ;
      }
 
      public var view:MovieClip ;
 
      // ....
 
}

Dans le cas de la composition l'exemple ci-dessus met en avant la déclaration d'une propriété qui servira de référence vers l'objet visuel dont dépend la classe et qui étendra du coup ses possibilités. En AS1 et AS2 nous avions par exemple le classes Color et Sound qui utilisent cette technique.

Différence entre AS2 et AS3

En AS2 après de longues années à utiliser l'héritage j'ai décidé d'équilibrer un peu les choses en gérant les vues principales de mes applications en utilisant une classe très proche (polymorphisme) de la classe AS3 du même nom tout en gardant à l'esprit que en AS2 l'architecture et le moteur graphique n'est pas le même qu'en AS3.

En effet alors qu'en AS1 et AS2 les classes MovieClip, TextField et Video héritent directement de la classe Object (la classe de plus bas niveau dans les langages basés ECMAScript 262 édition 3), en AS3 la classe MovieClip possède un héritage beaucoup plus riche que je vous invite à observer sur le schéma qui se trouve dans la documentation AS3 de Flash CS3 : Classes d'affichage de base en AS3

On peut observer qu'en dessous de toutes les classes visuelles AS3 du package flash.display on trouve en premier niveau d'héritage la classe flash.events.EventDispatcher. Aussi VEGAS proposant un modèle évènementiel proche de celui disponible dans le framework AS3, j'ai décidé de reconstituer dans l'absolu un schéma d'héritage de mes classes visuelles dans VEGAS basé sur un modèle AS2 proche du modèle AS3 même si il est vrai que très rapidement les limites de l'AS2 ferment des portes et qu'il est préférable pour avoir quelquechose de complètement "clean" de passer à l'AS3 et de plus revenir en arrière ensuite

Maintenant vu le nombre de projets AS2 que j'ai encore à faire pour finir cette année 2007 et qui chevaucheront surement encore un peu les premiers mois de 2008... la classe asgard.display.DisplayObject reste d'actualité !

Description et utilisation de la classe DisplayObject

Généralité

PEGAS est une extension AS2/AS3 de VEGAS, je n'ai pas encore beaucoup parlé de cette extension mais il est temps de commencer des tutoriels concernant cette bibliothèque de code spécialisée.

PEGAS possède des fonctionnalités spécifiques définies par les packages suivants :

pegas.color

Manipulation et gestion avancée des couleurs.

pegas.draw

Ce package contient des outils de dessin avancés utilisant les API de dessin dynamique et permettant la création et l'affichage de dessins complexes via des structures de données ecmascript ou via un document au format SVG.

pegas.geom, pegas.maths et pegas.util

Ces 3 packages mettent à votre disposition des outils mathématiques et géométriques de bases permettant de gérer des transformations physiques ou 3D dans vos applications.

pegas.process

Moteur de process permattant de créer des actions et des séquenceurs d'actions dans vos applications. Une action est un objet qui s'éxécute via une méthode "run" (IRunnable) mais qui permet de notifier au moins 2 événements au début et à la fin du process.

pegas.transitions

Ce package contient des outils pour créer facilement des interpolations numériques simples ou complexes (Tween) dans vos applications. Il contient également un moteur de transitions utilisant toutes les fonctionnalités du package pegas.process.

pegas.ui

Ce package permet la gestion des double-click(AS2) et la gestion des fonctionnalités avancées liées aux touches du clavier (KeyValidator).

Les interpolations (tweens).

Une interpolation est un changement d'une valeur numérique dans le temps. Le plus simple exemple d'utilisation d'une interpolation réside dans une petite animation sur un clip sur la scène principale d'une animation flash qui permet de faire bouger le clip entre un point et un autre.

En général, la première chose que l'on apprend en utilisant Flash c'est la création des animations sur le scénario de Flash en utilisant sur les formes ou les symboles des interpolations. Malgré l'extrême simplicité d'utilisation de ces interpolations automatiques nous nous rendons rapidement compte qu'un peu de code permet d'aller beaucoup plus loin dans ce domaine.

C'est Robert Penner et sa célèbre classe Tween qui a révolutionné réellement la philosophie des flasheurs en leur proposant une solution élégante pour créer des animations en utilisant des équations de mouvement mathématiques permettant de créer des mouvements naturels et non linéaires. Adobe a vite intégré cette fonctionnalité dans Flash MX 2004 pour donner du mordant à ses composants et depuis la classe mx.transitions.Tween reste un grand classique.

Malgré tout l'implémentation de Adobe reste sympathique mais de nombreux développeurs se sont essayés dans l'implémentation d'autres solutions proposant au final le même résultat. J'ai donc moi même très rapidement crée ma propre implémentation de l'algorithme d'interpolation basé sur des équations de mouvements en gardant l'esprit d'origine de la classe de Robert Penner mais en changeant légèrement le moteur interne et l'étendu des possibilité de la classe originelle.

Dans PEGAS j'ai donc décidé dans le package pegas.transitions d'implémenter 2 classes TweenLite et Tween

A noter que tous les exemples de ce tutoriel peuvent être testés dans le repository de VEGAS dans le répertoire AS2/trunk/bin/test/pegas/transitions

La classe pegas.transitions.TweenLite

Cette classe possède pratiquement toutes les fonctionnalités de la classe mx.transitions.Tween de Adobe. Elle permet de controler sur un objet une propriété numérique et de la modifier dans un certain intervalle de temps donné.

Voici un exemple basique d'utilisation de cette classe.

import pegas.transitions.TweenLite ;
import pegas.transitions.easing.* ;
 
var tw:TweenLite = new TweenLite(mc, "_x", Bounce.easeOut, mc._x, 550, 1, true) ;
tw.run() ;