CS3|AS3 : Manipuler les Containers : Class Rectangle | Point
Manipulation des Containers avec la classe Rectangle | Point
Je vous avait parler au dernier post que la classe Rectangle, issus du package flash.geom, est une classe de données. En effet car c'est une de ces nombreuses particularités, que de stoker des valeurs un peu à la manière des variables. Mais aussi un peu à la manière des fonctions et des méthodes, nous pouvons considérer les données de la classe Rectangle comme étant en attente d'utilisation. Ces données peuvent être utilisé à n'importe quel moment du développement de votre projet et, par le fait même, ces données peuvent être utilisées par n'importe quel autre programme. Il en est ainsi avec la classe Point issus du même package. La différence réside dans le fait que la classe Rectangle exige quatre paramètres qui représentent la position ' x ' et ' y ', de même que ' width ' et ' height '. Tandis que la classe Point n'exige que deux paramètres signifiant ' x ' et ' y '.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
La manière de déclarer un objet de la classe Rectangle reste suffisamment simple. À vrai dire lors de l'instanciation d'un objet nous devons fournir les paramêtres à l'objet, directement dans le constructeur. Voici un exemple :
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 600, 300);
::
Pour ce qui est de la classe Point, le principe de base reste tout aussi simple. Voici un exemple :
::
:: import flash.geom.Point;
:: var p:Point = new Point(10, 10);
::
-----------------------------------------------------------------------------------------------------------------------------------------------------------
:: Parlons de la classe Rectangle, nous reviendrons plus tard à la classe Point.
Plusieurs méthodes et propriétés peuvent êtres utilisées avec l'objet instancié. Dans le post qui suit je ne vous parlerai que d'une seule de ses méthodes. Plus tard, peut être pourrions nous faire l'expérience des autres méthodes. Mais vaut mieux s'attarder sur une seule de ces méthodes. La raison en est fort simple, car l'objet instancié joint à l'une de ces méthodes, rend la classe Rectangle fort intéressante et de plus, fort subtile. Mais lorsque vous aurez fait l'expérience d'une seule méthode de la classe Rectangle et que vous en aurez la maîtrise, vous saurez bien vous lancer dans des expériences plus avancé et davantage merveilleux. Voici l'une de ces méthodes : union( );
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 200, 300);
:: var rect2:Rectangle = new Rectangle(0, 0, 400, 600);
:: var rect3:Rectangle = rect1.union(rect2);
::
Comme son nom l'indique, la méthode prédéfini union() a pour fonction de joindre la totalité en largeur et en hauteur, la rencontre de deux rectangles distincts et, par le fait même, lorsque nous changons la valeur de ' x ' et de ' y ', nous changons automatiquement la largeur et la hauteur du visuel s'appropriant les données. C'est ce qu'il nous faut retenir, en particulier, conscernant les effets à l'exécution d'un source utilisant les données issus de l'objet rectangle et de la méthode union(). Voici un autre exemple :
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 200, 300);
:: var rect2:Rectangle = new Rectangle(60, 60, 400, 600);
:: var rect3:Rectangle = rect1.union(rect2);
::
Si vous interroger ' rect3 ' via l'action trace(), vous verrez les nouvelles données, d'un nouveau rectangle. Dans l'exemple ci-haut mentionner vous obtiendrez les résultats suivant :
:: trace(rect3);
:: Output :: { x=0, y=0, w=460, h=660 }
En animation Flash nous pourrions dire que :
:: l'objet ' rect1 ' porte les valeurs d'origines. <= Çà peut être aussi les valeurs d'arrivées.
:: l'objet ' rect2 ' porte les valeurs d'arrivées. <= Çà peut être aussi les valeurs d'origines.
:: et que l'objet ' rect3 ' porte les valeurs résultats. <= C'est toujours les valeurs résultats.
:: Vous pouvez fort bien attacher un objet visuel ayant pour position et dimension les valeurs de l'objet ' rect1 '.
:: voici un exemple :
:: var v:MovieClip = new Movieclip();
:: v.graphics.beginFill(0xD4D0C8, 1);
:: v.graphics.drawRect(rect1.x, rect1.y, rect1.width, rect1.height); // -- Valeurs d'origines 1.
:: addChild(v);
-----------------------------------------------------------------------------------------------------------------------------------------------------------
:: À propos de la subtilité de la classe Rectangle et de ses méthodes.
Partons sur le principe que nous utilisons, avec l'objet instancié, la méthode union() de la classe Rectangle. Vous allez devoir vous familiarisé avec l'inattendu. En effet car un objet instancié de la classe Rectangle, utilisant la méthode union(), fait de ' x ' et ' y ', l'équivalent de ' width ' et ' height ', dans les résultats à l'écran. C'est que ' r3 ', qui contiens les données des deux premiers objets ' r1 ' et ' r2 ', fournit les données à l'objet visuel. Il peut donc vous paraître étrange de changer les valeurs de ' x ' et ' y ', et de voir à l'écran les résultats en ' largeur ' et 'hauteur '. Même si celà vous paraît étrange, vous allez vous en rendre compte lorsque vous aurez à changer les valeurs des objets instanciés de la classe Rectangle. N'hésitez pas à manipuler les valeurs ' x ' et ' y ', ' width ' et ' height ' des objets instanciés, et vous verrez bien. Prenez aussi conscience que le premier objet ' r1 ' et le deuxième ' r2 ', modifiable, auront des répercussions sur les résultats stocker dans le troisième objet ' r3 '. Donc sur tous les objets visuels attacher aux données résultats de ' r3 '.
Avec deux exemples fichiers.zip et téléchargable en bas de page.
Je vous avait parler au dernier post que la classe Rectangle, issus du package flash.geom, est une classe de données. En effet car c'est une de ces nombreuses particularités, que de stoker des valeurs un peu à la manière des variables. Mais aussi un peu à la manière des fonctions et des méthodes, nous pouvons considérer les données de la classe Rectangle comme étant en attente d'utilisation. Ces données peuvent être utilisé à n'importe quel moment du développement de votre projet et, par le fait même, ces données peuvent être utilisées par n'importe quel autre programme. Il en est ainsi avec la classe Point issus du même package. La différence réside dans le fait que la classe Rectangle exige quatre paramètres qui représentent la position ' x ' et ' y ', de même que ' width ' et ' height '. Tandis que la classe Point n'exige que deux paramètres signifiant ' x ' et ' y '.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
La manière de déclarer un objet de la classe Rectangle reste suffisamment simple. À vrai dire lors de l'instanciation d'un objet nous devons fournir les paramêtres à l'objet, directement dans le constructeur. Voici un exemple :
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 600, 300);
::
Pour ce qui est de la classe Point, le principe de base reste tout aussi simple. Voici un exemple :
::
:: import flash.geom.Point;
:: var p:Point = new Point(10, 10);
::
-----------------------------------------------------------------------------------------------------------------------------------------------------------
:: Parlons de la classe Rectangle, nous reviendrons plus tard à la classe Point.
Plusieurs méthodes et propriétés peuvent êtres utilisées avec l'objet instancié. Dans le post qui suit je ne vous parlerai que d'une seule de ses méthodes. Plus tard, peut être pourrions nous faire l'expérience des autres méthodes. Mais vaut mieux s'attarder sur une seule de ces méthodes. La raison en est fort simple, car l'objet instancié joint à l'une de ces méthodes, rend la classe Rectangle fort intéressante et de plus, fort subtile. Mais lorsque vous aurez fait l'expérience d'une seule méthode de la classe Rectangle et que vous en aurez la maîtrise, vous saurez bien vous lancer dans des expériences plus avancé et davantage merveilleux. Voici l'une de ces méthodes : union( );
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 200, 300);
:: var rect2:Rectangle = new Rectangle(0, 0, 400, 600);
:: var rect3:Rectangle = rect1.union(rect2);
::
Comme son nom l'indique, la méthode prédéfini union() a pour fonction de joindre la totalité en largeur et en hauteur, la rencontre de deux rectangles distincts et, par le fait même, lorsque nous changons la valeur de ' x ' et de ' y ', nous changons automatiquement la largeur et la hauteur du visuel s'appropriant les données. C'est ce qu'il nous faut retenir, en particulier, conscernant les effets à l'exécution d'un source utilisant les données issus de l'objet rectangle et de la méthode union(). Voici un autre exemple :
::
:: import flash.geom.Rectangle;
:: var rect1:Rectangle = new Rectangle(0, 0, 200, 300);
:: var rect2:Rectangle = new Rectangle(60, 60, 400, 600);
:: var rect3:Rectangle = rect1.union(rect2);
::
Si vous interroger ' rect3 ' via l'action trace(), vous verrez les nouvelles données, d'un nouveau rectangle. Dans l'exemple ci-haut mentionner vous obtiendrez les résultats suivant :
:: trace(rect3);
:: Output :: { x=0, y=0, w=460, h=660 }
En animation Flash nous pourrions dire que :
:: l'objet ' rect1 ' porte les valeurs d'origines. <= Çà peut être aussi les valeurs d'arrivées.
:: l'objet ' rect2 ' porte les valeurs d'arrivées. <= Çà peut être aussi les valeurs d'origines.
:: et que l'objet ' rect3 ' porte les valeurs résultats. <= C'est toujours les valeurs résultats.
:: Vous pouvez fort bien attacher un objet visuel ayant pour position et dimension les valeurs de l'objet ' rect1 '.
:: voici un exemple :
:: var v:MovieClip = new Movieclip();
:: v.graphics.beginFill(0xD4D0C8, 1);
:: v.graphics.drawRect(rect1.x, rect1.y, rect1.width, rect1.height); // -- Valeurs d'origines 1.
:: addChild(v);
-----------------------------------------------------------------------------------------------------------------------------------------------------------
:: À propos de la subtilité de la classe Rectangle et de ses méthodes.
Partons sur le principe que nous utilisons, avec l'objet instancié, la méthode union() de la classe Rectangle. Vous allez devoir vous familiarisé avec l'inattendu. En effet car un objet instancié de la classe Rectangle, utilisant la méthode union(), fait de ' x ' et ' y ', l'équivalent de ' width ' et ' height ', dans les résultats à l'écran. C'est que ' r3 ', qui contiens les données des deux premiers objets ' r1 ' et ' r2 ', fournit les données à l'objet visuel. Il peut donc vous paraître étrange de changer les valeurs de ' x ' et ' y ', et de voir à l'écran les résultats en ' largeur ' et 'hauteur '. Même si celà vous paraît étrange, vous allez vous en rendre compte lorsque vous aurez à changer les valeurs des objets instanciés de la classe Rectangle. N'hésitez pas à manipuler les valeurs ' x ' et ' y ', ' width ' et ' height ' des objets instanciés, et vous verrez bien. Prenez aussi conscience que le premier objet ' r1 ' et le deuxième ' r2 ', modifiable, auront des répercussions sur les résultats stocker dans le troisième objet ' r3 '. Donc sur tous les objets visuels attacher aux données résultats de ' r3 '.
Manipuler les conteneurs avec la classe Rectangle
Prenez conscience que ce post fait suite aux trois premiers tutos écrit sur l'importance des Containers. En effet car le source que je vous fournis concernent encore un fois les Containers. Par contre avec ce tuto, nous commencerons à manipuler ces conteneurs avec les objets instanciés issus du package flash.geom et de la classe Rectangle, joint à la méthode union(). Mais il est important ici de reconnaitre la suite des trois premiers tutos sur le sujet des Containers. Le premier source de ce tuto est fort détaillé. Par le fait même, vous pourrez le copier/coller et/ou l'écrire tout simplement.
:: voici donc quelques consignent de base concernant la dimension et la couleur du stage
:: Dimension du stage : Largeur : 625px :: Hauteur :810px. <= Important
:: Couleur du stage : Black :: Pour une optimisation des effets de filtres. <= Important.
:: Placer le source sur le premier keyframe du root. <= Important.
:: Prenez l'habitude de ne pas enlever les lignes de commentaires :: Car c'est la seule façon de nous communiquer correctement
:: des numéros de lignes et de retracer rapidement la partie du source.
:: Voici le source ::
Prenez conscience que ce post fait suite aux trois premiers tutos écrit sur l'importance des Containers. En effet car le source que je vous fournis concernent encore un fois les Containers. Par contre avec ce tuto, nous commencerons à manipuler ces conteneurs avec les objets instanciés issus du package flash.geom et de la classe Rectangle, joint à la méthode union(). Mais il est important ici de reconnaitre la suite des trois premiers tutos sur le sujet des Containers. Le premier source de ce tuto est fort détaillé. Par le fait même, vous pourrez le copier/coller et/ou l'écrire tout simplement.
:: voici donc quelques consignent de base concernant la dimension et la couleur du stage
:: Dimension du stage : Largeur : 625px :: Hauteur :810px. <= Important
:: Couleur du stage : Black :: Pour une optimisation des effets de filtres. <= Important.
:: Placer le source sur le premier keyframe du root. <= Important.
:: Prenez l'habitude de ne pas enlever les lignes de commentaires :: Car c'est la seule façon de nous communiquer correctement
:: des numéros de lignes et de retracer rapidement la partie du source.
:: Voici le source ::
:: Quoique le source soit très large en écriture, celui-ci est fort détaillé et très aéré, ce qui augmente le nombres de lignes.
:: Mais conservez le comme tel. Sait-on jamais, peut-être aurons nous à communiquer via ce tuto, pour quelques exercices utiles.
:: La ligne 10, 11 et 15 sont important :: C'est à ces lignes que nous instancions les objets de la classe Rectangle.
:: À plus forte raison à la ligne 15 :: Car c'est à cette ligne qu'un nouvel objet utilise la méthode union().
- Code: Tout sélectionner
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
// --
// -- Construisons 3 objets Rectangle -- 'r1' et 'r2' et 'r3' --
// --
var r1:Rectangle = new Rectangle(0, 0, 300, 200);
var r2:Rectangle = new Rectangle(0, 0, 600, 400);
// --
// -- 'r3' contiens l'union des 2 premiers objets 'r1' et 'r2' --
// --
var r3:Rectangle = r1.union(r2);
// --
// -- Construisons nos fonctions de traçage d'information --
// --
function traceInfosRectangles ():void
{
// -- traçons nos objets d'origines de la classe Rectangle --
trace ("Premier objet Rectangle :: r1 = " + r1);
trace ("Deuxième objet Rectangle :: r2 = " + r2);
trace ("Troisième objet Rectangle :: r3 = " + r3);
}
function traceInfosVisuels ():void
{
trace ("N'oubliez pas que 'v' est à x=0 et y=0 de son conteneur parent : 'conteneur1'");
trace ("Les données d'origine de 'v'\n" + v.x + " " + v.y + " " + v.width + " " + v.height);
trace ("La forme 'v2' :\n" + v2.x + " " + v2.y + " " + v2.width + " " + v2.height);
}
function traceInfosConteneurs ():void
{
trace (baseConteneur.name + "\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
trace ("N'oubliez pas que conteneur1 est à x=0 et y=0 de son conteneur parent : 'baseConteneur'");
trace (conteneur1.name + "\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
}
function traceInfosGlobal():void
{
trace ("----------------------------------------------------------------------");
trace ("C'est le 'conteneur1' qui est cibler par le programme ici".toUpperCase());
trace ("C'est cet objet qui se nourrit des données de 'r3' créé avec la classe Rectangle");
trace ("----------------------------------------------------------------------");
trace ("Les nouvelles données après l'action utilisateur");
trace ("N'oubliez pas que 'conteneur1' est à x=0 et y=0 de son conteneur parent : 'baseConteneur'");
trace ("Les données d'arrivé de 'conteneur1' = les données d'origine de 'r3'");
trace ("Tandis que 'r3' est l'union des données d'origine de 'r1' et 'r2'");
trace ("La forme 'v' changera de dimension. Cependant celle-ci ne transmet pas ses nouvelles dimensions :\n" + v.x + " " + v.y + " " + v.width + " " + v.height);
trace ("La forme 'v2' changera de dimension. Cependant celle-ci ne transmet pas ses nouvelles dimensions :\n" + v2.x + " " + v2.y + " " + v2.width + " " + v2.height);
trace (baseConteneur.name + " : transmet ses nouvelles dimensions.\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
trace (conteneur1.name + " : transmet ses nouvelles dimensions.\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
}
// --
// -- Déclaration des variables utiles et initialisé --
// --
var baseConteneur:Sprite = new Sprite();
var conteneur1:Sprite = new Sprite();
baseConteneur.name = 'Conteneur de base';
conteneur1.name = 'Conteneur 1';
// --
// -- Placons les dans un DisplayObjectContainers --
// --
addChild (baseConteneur);
baseConteneur.addChild (conteneur1);
// --
// -- Faisons des variables pour un visuel --
// --
var ligneGrosseur:Number = 1.0;
var ligneCouleur:uint = 0xFFFFFF;
var fillCouleur:uint = 0x660000;
var trans:Number = 1;
var posx:Number = 0;
var posy:Number = 0;
var largeur:Number = r1.width;
var hauteur:Number = r1.height;
// --
// -- Construisons le visuel en question --
// --
var v:MovieClip = new MovieClip();
v.graphics.lineStyle (ligneGrosseur, ligneCouleur, trans);
v.graphics.beginFill (fillCouleur, trans);
v.graphics.drawRect (posx, posy, largeur, hauteur);
// --
// -- Création d'un autre objet visuel placer aussi dans 'conteneur1' --
// --
var v2:MovieClip = new MovieClip();
v2.graphics.lineStyle (1, 0xFF0000, 1);
v2.graphics.beginFill (0x333333, 1);
v2.graphics.drawRect (posx + 10, posy + 10, largeur - 20, hauteur - 20);
conteneur1.addChild (v2);
// --
// -- Appelle des fonctions --
// --
traceInfosRectangles ();
traceInfosVisuels ();
// --
// -- Placons notre visuel 'v' et 'v2' dans conteneur1 --
// --
conteneur1.addChild (v);
conteneur1.addChild (v2);
// --
// -- Construisons le filtre --
// --
var flou:BlurFilter = new BlurFilter();
var matrice:Array = [];
flou.blurX = 24;
flou.blurY = 0;
// --
// -- Placons l'objet filtre dans la matrice --
// --
matrice = [flou];
// --
// -- Activation du filtre à l'objet visuel 'v' --
// --
v.filters = matrice;
// --
// -- Deuxième objet filter -- ajouter à 'v2' --
// --
var ombrage:DropShadowFilter = new DropShadowFilter();
var matrice2:Array = [];
ombrage.angle = 45;
ombrage.distance = 5;
ombrage.blurX = 8;
ombrage.blurY = 8;
ombrage.color = 0x000000;
ombrage.alpha = 0.6;
matrice2 = [ombrage];
v2.filters = matrice2;
// --
// -- Positionnons en 'x' et en 'y' le conteneur de base --
// --
baseConteneur.x = 13;
baseConteneur.y = 10;
// --
// -- Appelle de la fonction traceInfosConteneurs() --
// --
traceInfosConteneurs();
// --
// -- La classe Rectangle du package flash.geom --
// -- Cette classe servira lors d'une action utilisateur --
// --
trace ("Nous attacherons les données de 'r3' au 'conteneur1' selon une action utilisateur");
trace ("Cette action utilisateur 'cliquable' utilisera une méthode de la classe 'Rectangle' nommé : union();");
// --
// -- Construisons un écouteur souris sur le visuel (v) --
// -- Nous pouvons positionner l'écouteur sur n'importe lequel des objets --
// -- Ici le choix porte sur 'conteneur1' --
// --
conteneur1.addEventListener (MouseEvent.CLICK, actionClick);
conteneur1.buttonMode = true;
// --
// -- Écrivons la fonction nommé : 'actionClick' --
// --
function actionClick (event:MouseEvent):void
{
conteneur1.x = r3.x;
conteneur1.y = r3.y;
conteneur1.width = r3.width;
conteneur1.height = r3.height;
conteneur1.buttonMode = false;
conteneur1.removeEventListener (MouseEvent.CLICK, actionClick);
// --
// -- Appelle de la fonction traceInfosGeneral() --
// --
traceInfosGlobal();
}
:: Date de mise en site : 10 Mars 2008::
:: Dernière modification : 10 Mars 2008 ::
Prenez le temps de vous familiarisé au source
Un peu plus haut, si vous avez pris le temps de lire l'article, je vous parlais de la subtilité de la classe Rectangle joint à la méthode union(). De plus je vous disais que ' x ' est l'équivalent de ' width ', et que ' y ' est l'équivalent de ' height '. Pour mieux comprendre ce principe, je vous largue ici même un exercice que vous pourrez faire dans l'immédiat. Cet exercice, fort simple, nous déroute un peu lorsque c'est la première fois que nous manipulons des Containers via la classe Rectangle et sa méthode union(). En effet puisque nous sommes confrontés, à la subtilité de l'objet et de son comportement.
C'est au travers un écouteur nommé ' actionClick ' que nous déclenchons le transfert entre les données d'origines et les données d'arrivés. Les objets Rectangle n'ont en principe de réels intérêts que lors du transfert de l'objet visuel de son format d'origine au format d'arrivé. C'est là et là seulement que nous trouverons l'importance des données stocker dans les objets ' r1 ', ' r2 ', et ' r3' en particulier.
Si donc vous désirez manipuler de nouvelles valeurs aux objets de la classe Rectangle, vous le ferez comme ces quelques consignent que voici. Je vous le suggère fortement. Manipuler une par une toutes les données des objets et laissé actif l'action trace(). Surtout, observez les résultats visuels
Sachez d'abord et avant tout que la forme visuelle, une fois cliquer, prend la largeur du Flash Player. Par le fait même vous comprenez qu'il deviens inutile de jouer avec les valeurs ' x ' des objets ' r1 ' et ' r2 ' situer aux lignes 10 et 11 du source. À moins de changer la dimension de la scène. N'oubliez pas que ' x ' est l'équivalent de ' width '. Par contre il en est différemment des valeurs ' y ' des objets ' r1 ' et ' r2 ', puisque le Player a un hauteur suffisante pour manipuler cette valeur.
:: Exemple ::
:: Ligne 11 :: var r2:Rectangle = new Rectangle(0, 0, 600, 400); // -- param1: x, param2: y, param3: largeur, param4: hauteur
:: Changer le param2 : ' y ' , de l'objet ' r2 ' Ã la ligne 11.
:: Exemple ::
:: Ligne 11 :: var r2:Rectangle = new Rectangle(0, 100, 600, 400); // -- Changement de la valeur de param2: y
Comme vous pouvez le constater, en changant la valeur de ' y ', donc la position de l'objet, vous avez eu comme résultat un agrandissement en hauteur, donc en ' height ', de l'objet visuel. Dans la vérité du programme, vous avez tout simplement changé la position ' y ' de ' r2 '. Mais le transfert des données d'origine de l'objet visuel, vers les données d'arrivées de ce même objet, ne concerne que le troisième objet nommé ' r3 '. C'est cet objet de la classe Rectangle qui utilise la méthode union(). Il a pour objectif de joindre en une seule forme rectangulaire l'objet ' r1 ' et l'objet ' r2 '. L'objet ' r3 ' porte les nouvelles valeurs des données d'arrivées. Évidemment plus loin dans le programme, l'objet ' conteneur1 ', utilisera ces nouvelles données en s'appropriant l'objet ' r3 ', de la ligne 156 à 159. Ces lignes font partie de la fonction qui définit le transfert des données d'origines vers les nouvelles données déjà stocker dans l'objet ' r3 '. L'action utilisateur, en un clique dans la zone du conteneur, déclenche le tranfert des données en attente.
Un peu plus haut, si vous avez pris le temps de lire l'article, je vous parlais de la subtilité de la classe Rectangle joint à la méthode union(). De plus je vous disais que ' x ' est l'équivalent de ' width ', et que ' y ' est l'équivalent de ' height '. Pour mieux comprendre ce principe, je vous largue ici même un exercice que vous pourrez faire dans l'immédiat. Cet exercice, fort simple, nous déroute un peu lorsque c'est la première fois que nous manipulons des Containers via la classe Rectangle et sa méthode union(). En effet puisque nous sommes confrontés, à la subtilité de l'objet et de son comportement.
C'est au travers un écouteur nommé ' actionClick ' que nous déclenchons le transfert entre les données d'origines et les données d'arrivés. Les objets Rectangle n'ont en principe de réels intérêts que lors du transfert de l'objet visuel de son format d'origine au format d'arrivé. C'est là et là seulement que nous trouverons l'importance des données stocker dans les objets ' r1 ', ' r2 ', et ' r3' en particulier.
Si donc vous désirez manipuler de nouvelles valeurs aux objets de la classe Rectangle, vous le ferez comme ces quelques consignent que voici. Je vous le suggère fortement. Manipuler une par une toutes les données des objets et laissé actif l'action trace(). Surtout, observez les résultats visuels
Sachez d'abord et avant tout que la forme visuelle, une fois cliquer, prend la largeur du Flash Player. Par le fait même vous comprenez qu'il deviens inutile de jouer avec les valeurs ' x ' des objets ' r1 ' et ' r2 ' situer aux lignes 10 et 11 du source. À moins de changer la dimension de la scène. N'oubliez pas que ' x ' est l'équivalent de ' width '. Par contre il en est différemment des valeurs ' y ' des objets ' r1 ' et ' r2 ', puisque le Player a un hauteur suffisante pour manipuler cette valeur.
:: Exemple ::
:: Ligne 11 :: var r2:Rectangle = new Rectangle(0, 0, 600, 400); // -- param1: x, param2: y, param3: largeur, param4: hauteur
:: Changer le param2 : ' y ' , de l'objet ' r2 ' Ã la ligne 11.
:: Exemple ::
:: Ligne 11 :: var r2:Rectangle = new Rectangle(0, 100, 600, 400); // -- Changement de la valeur de param2: y
Comme vous pouvez le constater, en changant la valeur de ' y ', donc la position de l'objet, vous avez eu comme résultat un agrandissement en hauteur, donc en ' height ', de l'objet visuel. Dans la vérité du programme, vous avez tout simplement changé la position ' y ' de ' r2 '. Mais le transfert des données d'origine de l'objet visuel, vers les données d'arrivées de ce même objet, ne concerne que le troisième objet nommé ' r3 '. C'est cet objet de la classe Rectangle qui utilise la méthode union(). Il a pour objectif de joindre en une seule forme rectangulaire l'objet ' r1 ' et l'objet ' r2 '. L'objet ' r3 ' porte les nouvelles valeurs des données d'arrivées. Évidemment plus loin dans le programme, l'objet ' conteneur1 ', utilisera ces nouvelles données en s'appropriant l'objet ' r3 ', de la ligne 156 à 159. Ces lignes font partie de la fonction qui définit le transfert des données d'origines vers les nouvelles données déjà stocker dans l'objet ' r3 '. L'action utilisateur, en un clique dans la zone du conteneur, déclenche le tranfert des données en attente.
Le point faible des Containers imbriqués
Ne partez pas sur le principe que tous les conteneurs se doivent d'être imbriquer les uns dans les autres. L'imbrication des conteneurs est très certainement utile. Sachez simplement que de ne pas imbriquer des conteneurs est tout aussi utile et sur bien des plans. Jusqu'à maintenant, nous avons toujours imbriquer nos conteneurs les uns dans les autres. Par le fait même, et parce que je tiens à m'adresser aux débutants(es) en programmation Flash CS3 | AS3, nous sommes demeuré basic au niveau du source. Il n'y a pas plus basic que les sources fournis depuis le début de ma participation sur MSG. Nous allons donc vérifier un point faible, et de loin le plus important, dû aux conteneurs imbriqués.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Prenons exemple du source ci-haut mentionné. Tous les conteneurs sont imbriqués. Observez la forme centrale nommé ' v2 '. Lorsque nous transférons les données de l'objet ' r3 ' au ' conteneur1 ', la forme visuel ' v2 ' s'agrandit aussi. C'est normal qu'il en soit ainsi car la forme ' v2 ' appartiens au ' conteneur1 '. Même si la forme ' v2 ' avait son propre conteneur imbriqué dans ' conteneur1 ', l'effet serais identique. C'est ce qui provoque la déformation de l'objet ' v2 '. Vous pouvez le remarquer en scrutant le contour rouge de la forme ' v2 ', son épaisseur a changer, la ligne est plus large. La raison principale est simple à comprendre, c'est la notion de parent/enfant déjà parler dans les tutos précédents. Par contre si vous vous interresser aux résultats du Output Panel, vous voyez que la forme ' v ' et ' v2 ' ne transmettent pas leurs nouvelles dimensions. Ce qui peut paraître étrange dans ce source c'est que le ' conteneur1 ' est cibler par le programme. Par contre les objet visuels ' v ' et ' v2 ' en subiront aussi les effets d'agrandissement. Voire même de déformation majeur. Seulement il faut comprendre que leurs nouvelles données ne sont pas transmis. Que le programme, après l'action utilisateur, transmet les mêmes données de ' v ' et ' v2 ', avant l'action utilisateur. Il en est différemment si vous cibler par programme l'objet visuel ' v '. La manipulation des Containers est une affaire de pratique fréquente, d'intelligence dans l'organisation, et de créativité. Mais surtout la pratique, pour mieux cerner la différence entre les objets/données et les objets/visuels, chacun agissant sur l'autre à des niveaux différents.
Ne partez pas sur le principe que tous les conteneurs se doivent d'être imbriquer les uns dans les autres. L'imbrication des conteneurs est très certainement utile. Sachez simplement que de ne pas imbriquer des conteneurs est tout aussi utile et sur bien des plans. Jusqu'à maintenant, nous avons toujours imbriquer nos conteneurs les uns dans les autres. Par le fait même, et parce que je tiens à m'adresser aux débutants(es) en programmation Flash CS3 | AS3, nous sommes demeuré basic au niveau du source. Il n'y a pas plus basic que les sources fournis depuis le début de ma participation sur MSG. Nous allons donc vérifier un point faible, et de loin le plus important, dû aux conteneurs imbriqués.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Prenons exemple du source ci-haut mentionné. Tous les conteneurs sont imbriqués. Observez la forme centrale nommé ' v2 '. Lorsque nous transférons les données de l'objet ' r3 ' au ' conteneur1 ', la forme visuel ' v2 ' s'agrandit aussi. C'est normal qu'il en soit ainsi car la forme ' v2 ' appartiens au ' conteneur1 '. Même si la forme ' v2 ' avait son propre conteneur imbriqué dans ' conteneur1 ', l'effet serais identique. C'est ce qui provoque la déformation de l'objet ' v2 '. Vous pouvez le remarquer en scrutant le contour rouge de la forme ' v2 ', son épaisseur a changer, la ligne est plus large. La raison principale est simple à comprendre, c'est la notion de parent/enfant déjà parler dans les tutos précédents. Par contre si vous vous interresser aux résultats du Output Panel, vous voyez que la forme ' v ' et ' v2 ' ne transmettent pas leurs nouvelles dimensions. Ce qui peut paraître étrange dans ce source c'est que le ' conteneur1 ' est cibler par le programme. Par contre les objet visuels ' v ' et ' v2 ' en subiront aussi les effets d'agrandissement. Voire même de déformation majeur. Seulement il faut comprendre que leurs nouvelles données ne sont pas transmis. Que le programme, après l'action utilisateur, transmet les mêmes données de ' v ' et ' v2 ', avant l'action utilisateur. Il en est différemment si vous cibler par programme l'objet visuel ' v '. La manipulation des Containers est une affaire de pratique fréquente, d'intelligence dans l'organisation, et de créativité. Mais surtout la pratique, pour mieux cerner la différence entre les objets/données et les objets/visuels, chacun agissant sur l'autre à des niveaux différents.
:: Voici le même code que celui du haut avec cette différence que c'est L'objet ' v ' qui est cibler par le programme.
:: Vous verrez des différences d'informations au Output Panel.
:: De plus, observez bien l'objet visuel ' v2 '.
:: Conserver les mêmes consignent conscernant le stage
:: Dimension du stage : Largeur : 625px :: Hauteur : 810px.
:: Stage Color :: black
:: Placer le source au premier keyframe du root.
:: ctrl + enter.
- Code: Tout sélectionner
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
// --
// -- Construisons 3 objets Rectangle -- 'r1' et 'r2' et 'r3' --
// --
var r1:Rectangle = new Rectangle(0, 0, 300, 200); // -- Valeur de ' y ' maximale 590px
var r2:Rectangle = new Rectangle(0, 0, 300, 600); // -- Valeur de ' y ' maximale 390px
// --
// -- 'r3' contiens l'union des 2 premiers objets 'r1' et 'r2' --
// --
var r3:Rectangle = r1.union(r2);
// --
// -- Construisons nos fonctions de traçage d'information --
// --
function traceInfosRectangles ():void
{
// -- traçons nos objets d'origines de la classe Rectangle --
trace ("Premier objet Rectangle :: r1 = " + r1);
trace ("Deuxième objet Rectangle :: r2 = " + r2);
trace ("Troisième objet Rectangle :: r3 = " + r3);
}
function traceInfosVisuels ():void
{
trace ("N'oubliez pas que 'v' est à x=0 et y=0 de son conteneur parent : 'conteneur1'");
trace ("Les données d'origine de 'v'\n" + v.x + " " + v.y + " " + v.width + " " + v.height);
trace ("La forme 'v2' :\n" + v2.x + " " + v2.y + " " + v2.width + " " + v2.height);
}
function traceInfosConteneurs ():void
{
trace (baseConteneur.name + "\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
trace ("N'oubliez pas que conteneur1 est à x=0 et y=0 de son conteneur parent : 'baseConteneur'");
trace (conteneur1.name + "\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
}
function traceInfosGlobal():void
{
trace ("----------------------------------------------------------------------");
trace ("C'est le 'conteneur1' qui est cibler par le programme ici".toUpperCase());
trace ("C'est cet objet qui se nourrit des données de 'r3' créé avec la classe Rectangle");
trace ("----------------------------------------------------------------------");
trace ("Les nouvelles données après l'action utilisateur");
trace ("N'oubliez pas que 'conteneur1' est à x=0 et y=0 de son conteneur parent : 'baseConteneur'");
trace ("Les données d'arrivé de 'conteneur1' = les données d'origine de 'r3'");
trace ("Tandis que 'r3' est l'union des données d'origine de 'r1' et 'r2'");
trace ("La forme 'v' changera de dimension. Et transmet ses nouvelles dimensions :\n" + v.x + " " + v.y + " " + v.width + " " + v.height);
trace ("La forme 'v2' Ne changera pas de dimension :\n" + v2.x + " " + v2.y + " " + v2.width + " " + v2.height);
trace (baseConteneur.name + " : transmet ses nouvelles dimensions.\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
trace (conteneur1.name + " : transmet ses nouvelles dimensions.\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
}
// --
// -- Déclaration des variables utiles et initialisé --
// --
var baseConteneur:Sprite = new Sprite();
var conteneur1:Sprite = new Sprite();
baseConteneur.name = 'Conteneur de base';
conteneur1.name = 'Conteneur 1';
// --
// -- Placons les dans un DisplayObjectContainers --
// --
addChild (baseConteneur);
baseConteneur.addChild (conteneur1);
// --
// -- Faisons des variables pour un visuel --
// --
var ligneGrosseur:Number = 1.0;
var ligneCouleur:uint = 0xFFFFFF;
var fillCouleur:uint = 0x999999;
var trans:Number = 1;
var posx:Number = 0;
var posy:Number = 0;
var largeur:Number = 300;
var hauteur:Number = 200;
// --
// -- Costruisons le visuel en question --
// --
var v:MovieClip = new MovieClip();
v.graphics.lineStyle (ligneGrosseur, ligneCouleur, trans);
v.graphics.beginFill (fillCouleur, trans);
v.graphics.drawRect (posx, posy, largeur, hauteur);
// --
// -- Création d'un autre objet visuel placer aussi dans 'conteneur1' --
// --
var v2:MovieClip = new MovieClip();
v2.graphics.lineStyle (1, 0xFF0000, 1);
v2.graphics.beginFill (0x666666, 1);
v2.graphics.drawRect (posx + 12, posy + 10, largeur - 25, hauteur - 45);
conteneur1.addChild (v2);
// --
// -- Appelle des fonctions --
// --
traceInfosRectangles ();
traceInfosVisuels ();
// --
// -- Placons notre visuel 'v' et 'v2' dans conteneur1 --
// --
conteneur1.addChild (v);
conteneur1.addChild (v2);
// --
// -- Construisons le filtre --
// --
var flou:BlurFilter = new BlurFilter();
var matrice:Array = [];
flou.blurX = 24;
flou.blurY = 0;
// --
// -- Placons l'objet filtre dans la matrice --
// --
matrice = [flou];
// --
// -- Activation du filtre à l'objet visuel 'v' --
// --
v.filters = matrice;
// --
// -- Deuxième objet filter -- ajouter à 'v2' --
// --
var ombrage:DropShadowFilter = new DropShadowFilter();
var matrice2:Array = [];
ombrage.angle = 45;
ombrage.distance = 5;
ombrage.blurX = 8;
ombrage.blurY = 8;
ombrage.color = 0x000000;
ombrage.alpha = 0.6;
matrice2 = [ombrage];
v2.filters = matrice2;
// --
// -- Positionnons en 'x' et en 'y' le conteneur de base --
// --
baseConteneur.x = 100;
baseConteneur.y = 10;
// --
// -- Appelle de la fonction traceInfosConteneurs() --
// --
traceInfosConteneurs();
// --
// -- La classe Rectangle du package flash.geom --
// -- Cette classe servira lors d'une action utilisateur --
// --
trace ("Nous attacherons les données de 'r3' au 'conteneur1' selon une action utilisateur");
trace ("Cette action utilisateur 'cliquable' utilisera une méthode de la classe 'Rectangle' nommé : union();");
// --
// -- Construisons un écouteur souris sur le visuel (v) --
// -- Nous pouvons positionner l'écouteur sur n'importe lequel des objets --
// -- Ici le choix porte sur 'conteneur1' --
// --
v.addEventListener (MouseEvent.CLICK, actionClick);
v.buttonMode = true;
// --
// -- Écrivons la fonction nommé : 'actionClick' --
// --
function actionClick (event:MouseEvent):void
{
v.x = r3.x;
v.y = r3.y;
v.width = r3.width;
v.height = r3.height;
v.buttonMode = false;
v.removeEventListener (MouseEvent.CLICK, actionClick);
// --
// -- Appelle de la fonction traceInfosGeneral() --
// --
traceInfosGlobal();
}
:: Mise en site le : 10 Mars 2008.
:: Dernière modification le : 10 mars 2008.
Fichiers (*.zip) . . . Prenez les . . . C'est pour vous
:: Pour dire vrai ce dossier téléchargable est un simple projet basé sur les containers et la classe Point.
:: La classe Point appartient au même package que la classe Rectangle : flash.geom.Point.
:: Vous n'avez qu'à vous créé un répertoire nommé ici en exemple => MSG
:: Déposé à l'intérieur de ce répertoire l'ensemble des fichiers << dézipper >>.
:: Contenu des fichiers.zip :: Package icom.design :: Classe Design.
:: Un répertoire icom.
:: À l'intérieur duquel un autre répertoire design : Qui contient en fait la classe Design :: Design.as.
:: Un répertoire images : Qui contiens 2 images identique mais avec des formats différents.
:: Un fichier .fla + un fichier .swf.
Ce projet se veut simple et viens complété un peu la manipulation des containers. Quoique je m'adresse aux débutants(es) en programmation Flash, je me suis permis de vous rendre un aperçu qui en fait est la somme des tutos sur les Containers.
Le .fla se nourrit de la classe Design, dans le package icom.design. En fait, un package ne seras toujours qu'un url permettant de cibler plusieurs classes incluses dans le package, ou une seule de ces classes. En effet, un package est un ensemble de répertoires. Donc aucun trouble à vous faire dans vos projets, des packages. Exemple : icom.design
Chargement de la classe en .fla ? .
:: import icom.design.*; <= vous cibler toutes les classes.
:: ou encore ::
:: import icom.design.Design; <= vous cibler une classe en particulier.
:: Exemple .as ? ::
:: package icom.design { . . . }
:: design.zip :: Son utilisation ::
Un simple déplacement d'un conteneurs :: La barre de couleur rouge est un bouton pour ouvrir ou fermer un conteneur en particulier. Opéré par une logique conditionnelle. Lorsque l'animation est en mode ouverture, une image est charger dans un autre conteneur. Et lorsque l'animation est en mode de fermeture, l'image est décharger. Il s'agit aussi de l'importance de ne pas toujours imbriquer vos conteneurs. Soyez toujours sensible au fait que vous devez imbriquer, ou ne pas imbriquer vos conteneurs, et ce, de façon intelligent et créatif. À vrai dire la manipulation des conteneurs peut devenir très complexe. Allez-y lentement et tracer vos résultats au Output Panel. Je vous suggère même un storyboard pour nomenclaturé vos conteneurs et vos objets design et/ou de chargements des données externes. Je vous jure par expérience que les conteneurs demandent un suivi planifié et une organisation intelligente.
:: slider.zip :: Son utilisation ::
L'intérêt de ce source c'est que le déplacement du curseur est entièrement orienté à partir de la classe Rectangle. C'est cette classe qui détermine la zone draguable du curseur :: btnSlider.startDrag(false, zoneSlider);. Pour la deuxième fois, les conteneurs ne sont pas tous imbriqués les uns dans les autres. Surtout en ce qui conscerne les chargements externes, les images en particulier, soit du disque dur ou d'un url en ligne, il nous faut toujours faire attention à l'imbriquation des conteneurs. Ce sera au développeur de déterminer le meilleur pour son projet. Si un conteneur de base se doit d'être draguable, il est évident que tout son lot d'objets devra suivre aussi. Donc imbriqué. Mais si l'élément est toujours fixe, on peut dès lors imbriqué ou ne pas imbriqué les conteneurs. Comme je vous l'ai déjà dit, les containers sont sans cesse sujet à réflexion et que seule l'expérience nous permettra de mieux en saisir la logique.
:: Pour dire vrai ce dossier téléchargable est un simple projet basé sur les containers et la classe Point.
:: La classe Point appartient au même package que la classe Rectangle : flash.geom.Point.
:: Vous n'avez qu'à vous créé un répertoire nommé ici en exemple => MSG
:: Déposé à l'intérieur de ce répertoire l'ensemble des fichiers << dézipper >>.
:: Contenu des fichiers.zip :: Package icom.design :: Classe Design.
:: Un répertoire icom.
:: À l'intérieur duquel un autre répertoire design : Qui contient en fait la classe Design :: Design.as.
:: Un répertoire images : Qui contiens 2 images identique mais avec des formats différents.
:: Un fichier .fla + un fichier .swf.
Ce projet se veut simple et viens complété un peu la manipulation des containers. Quoique je m'adresse aux débutants(es) en programmation Flash, je me suis permis de vous rendre un aperçu qui en fait est la somme des tutos sur les Containers.
Le .fla se nourrit de la classe Design, dans le package icom.design. En fait, un package ne seras toujours qu'un url permettant de cibler plusieurs classes incluses dans le package, ou une seule de ces classes. En effet, un package est un ensemble de répertoires. Donc aucun trouble à vous faire dans vos projets, des packages. Exemple : icom.design
Chargement de la classe en .fla ? .
:: import icom.design.*; <= vous cibler toutes les classes.
:: ou encore ::
:: import icom.design.Design; <= vous cibler une classe en particulier.
:: Exemple .as ? ::
:: package icom.design { . . . }
:: design.zip :: Son utilisation ::
Un simple déplacement d'un conteneurs :: La barre de couleur rouge est un bouton pour ouvrir ou fermer un conteneur en particulier. Opéré par une logique conditionnelle. Lorsque l'animation est en mode ouverture, une image est charger dans un autre conteneur. Et lorsque l'animation est en mode de fermeture, l'image est décharger. Il s'agit aussi de l'importance de ne pas toujours imbriquer vos conteneurs. Soyez toujours sensible au fait que vous devez imbriquer, ou ne pas imbriquer vos conteneurs, et ce, de façon intelligent et créatif. À vrai dire la manipulation des conteneurs peut devenir très complexe. Allez-y lentement et tracer vos résultats au Output Panel. Je vous suggère même un storyboard pour nomenclaturé vos conteneurs et vos objets design et/ou de chargements des données externes. Je vous jure par expérience que les conteneurs demandent un suivi planifié et une organisation intelligente.
:: slider.zip :: Son utilisation ::
L'intérêt de ce source c'est que le déplacement du curseur est entièrement orienté à partir de la classe Rectangle. C'est cette classe qui détermine la zone draguable du curseur :: btnSlider.startDrag(false, zoneSlider);. Pour la deuxième fois, les conteneurs ne sont pas tous imbriqués les uns dans les autres. Surtout en ce qui conscerne les chargements externes, les images en particulier, soit du disque dur ou d'un url en ligne, il nous faut toujours faire attention à l'imbriquation des conteneurs. Ce sera au développeur de déterminer le meilleur pour son projet. Si un conteneur de base se doit d'être draguable, il est évident que tout son lot d'objets devra suivre aussi. Donc imbriqué. Mais si l'élément est toujours fixe, on peut dès lors imbriqué ou ne pas imbriqué les conteneurs. Comme je vous l'ai déjà dit, les containers sont sans cesse sujet à réflexion et que seule l'expérience nous permettra de mieux en saisir la logique.
Manipulation dynamique des Containers :: Classe Dictionary.
La classe Rectangle et les containers partagent un point en commun. Ce sont des données exploitable par tous les autres objets/programmes. Cependant les containers en flash n'est pas une révolution mais essentiellement une nécessité. Il en est de même de tous les autres langages de programmation gérant des possibilités d'interfaces.
Nous reviendrons donc sur la manipulation des containers. Seulement il me paraissait essentielle de faire mention ici du rôle jouer par la classe Rectangle et de la classe Point. Car ces classes seront essentielles dans la manipulation d'objets.
Il reste la possibilité d'un dernier tuto concernant l'importance des Containers et de leurs manipulations. La classe Dictionary entrera comme un principe très important, faisant de la manipulation des Containers, une action entièrement dynamique. C'est avec cette classe que nous pourrons organisé nos conteneurs en groupes distincts. À proprement parler, la classe Dictionary en flash CS3 | AS3, joint aux classes Rectangle et Point, feront de ces groupes de Containers des objets complets dans leurs utilisations. Il n'en tiendra qu'à vous, par la suite, d'utiliser à bon escient toute l'importance des Containers, leurs organisations et leurs manipulations dynamiques.
Le prochain post sur les Containers . . . L'utilisation dynamique.
La classe Rectangle et les containers partagent un point en commun. Ce sont des données exploitable par tous les autres objets/programmes. Cependant les containers en flash n'est pas une révolution mais essentiellement une nécessité. Il en est de même de tous les autres langages de programmation gérant des possibilités d'interfaces.
Nous reviendrons donc sur la manipulation des containers. Seulement il me paraissait essentielle de faire mention ici du rôle jouer par la classe Rectangle et de la classe Point. Car ces classes seront essentielles dans la manipulation d'objets.
Il reste la possibilité d'un dernier tuto concernant l'importance des Containers et de leurs manipulations. La classe Dictionary entrera comme un principe très important, faisant de la manipulation des Containers, une action entièrement dynamique. C'est avec cette classe que nous pourrons organisé nos conteneurs en groupes distincts. À proprement parler, la classe Dictionary en flash CS3 | AS3, joint aux classes Rectangle et Point, feront de ces groupes de Containers des objets complets dans leurs utilisations. Il n'en tiendra qu'à vous, par la suite, d'utiliser à bon escient toute l'importance des Containers, leurs organisations et leurs manipulations dynamiques.
