CS3|AS3 : l'importance des Containers 1

[zardoz]

import flash.display.Sprite; Part 1;

Il est bien évident ici que je m'adresse d'abord et avant tout aux débutants(es) en programmation CS3|AS3.
Cette esquisse se veut simple et accessible à un plus grand nombre. Souvent, le sujet est quelque peu négliger sur la plupart des forums offrant des espaces d'enseigements. Et pourtant, l'importance des 'Containers' en Flash est sans contredit.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

import flash.display.Sprite; Part 2;

Un des grands intérêts en programmation est qu'au fur et à mesure du développement d'un projet, le développeur se doit d'interroger son propre programme et ce n'est qu'a ce niveau d'interrogation du programme que nous pourrons utilisé convenablement les données. Plusieurs packages comme plusieurs classes en Flash ne sont que des données pouvant être utilisé par n'importe lequel autre objets/programmes. Celà comprend évidemment tous les programmes dont l'orientation est visuelle. Je ne sais pas si vous êtes comme moi mais j'aime bien interroger mon programme au fur et à mesure de son développement.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Comme exemple je pourrais mentionner :
package : flash.geom
Classes : Rectangle | Point | Matrix
Ces packages/classes pouvent être interroger et, jouant des rôles précis, nous pourrons les utilisés avec d'autres packages/classes dont le but serais d'orientation visuelle.
Comme exemple de packages/classes dont l'orientation est visuelle :
package : flash.display
classes : Sprite | MovieClip | Shape | Graphics . . . et + encore.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

import flash.display.Sprite; Part 3;

Par le fait même les programmes de type visuelles, qu'il soit issus de la classe Sprite, de la classe MovieClip, de la classe Shape ou même de la classe Graphics, pourront se nourrir et interagir avec des classes de données. L'on peut par exemple définir une zone draguable en ' y ', seulement en utilisant le package flash.geom avec la classe Rectangle. Évidemment la classe Rectangle ne portera que des données interrogable par le Output Panel de Flash, et avec la méthode trace ( ), méthode d'interrogation du programme en cours de développement. Cependant nous ne verrons des résultats visuelles de ces données que si nous attachons un objet/programme visuelle du genre Sprite, MovieClip, Shape, Graphics, ou tout autre type de données visuelle charger depuis l'externe.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Les Containers se comportent comme des classes de données :

import flash.display.Sprite; Part 4;

Il me fallait vraiment m'arrêter sur la distinction entre classes d'orientation données, et classes d'orientation visuelle. L'important à retenir c'est que toutes ces classes sont appeler à interagir entre elles. L'une étant au service de l'autre. Il en est ainsi des Containers qui se comporterons comme les classes de données, vérifiable via le Output Panel seulement, et interrogable selon vos besoins. Par contre vous devrez y ajouter, le coupler, à un objet/programme visuelle. Ainsi vous pourrez constater ses données à l'écran. Vous seul le saurez car vous en êtes l'investigateur.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Zone d'essais :: Conteneur de l'information N° 1
À tous ceux et celles qui voudront mixé programmation aux éléments visuelles issus de la scène ou de la biblothèque Flash :
Ils vous seras quand même possible voire utile de favorisé les Containers dans vos projets perso. Seulement les Containers demandent obligatoirement un peu de programmation à la base. Je vous suggèrent donc de vous y intéresser le plus tôt possible et de ne pas croire que la programmation est réserver à une élite. Cependant j'opterai toujours pour un développement modulaire qui soit de l'ordre minimal de : 100% programmation.
Seulement, ce n'est pas une obligation. Après tout, la programmation n'est que la vitesse supérieur . . . enfin bref ! .

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Zone d'essais :: Conteneur des Astuces + Conteneur Code

Préparer d'abord vos containers et si possible vous faire un storyboard sur la façon dont vous devriez imbriquer vos containers. Je ne saurais trop abuser de ce conseil. Interroger les pros et vous verrez.

:: Création de deux conteneurs imbriquer l'un dans l'autre avec la classe Sprite

Code: Tout sélectionner

// -- Placer ce script sur le premier keyframe de votre animation principale
// -- Premier conteneur
// --
var baseConteneur:Sprite = new Sprite();
addChild(baseConteneur);
baseConteneur.name = 'baseConteneur';


Le storyboard n'est certe pas une obligation. Cependant nous ne saurions éliminer totalement le besoin d'organisation et de planification en matière de développement de modules interactifs, soyez dès les débuts comme des professionnelles. Intéressez vous davantage à leurs oeuvres comme à leurs techniques de développements modulaires de l'information.

:: Si possible, je vous invitent à saisir le code plutot que de le copier/coller. il n'y a pas meilleur contact avec l'apprentissage si ce n'est que par l'écriture du source.

Code: Tout sélectionner

// -- Placer tous les autres scripts les unes à la suite des autres
// -- Deuxième conteneur
// --
var conteneur1:Sprite = new Sprite();
conteneur1.name = 'Conteneur1';
baseConteneur.addChild(conteneur1); // -- Ici nous imbriquons conteneur1 dans baseConteneur


À ce stade vous pouvez déjà interroger votre programme. Mais attention car à ce stade de développement, vous n'aurez que des données via la méthode trace(), via le Output Panel. Car aucun objet visuelle ne lui est attacher pour l'instant

Code: Tout sélectionner

trace (baseConteneur.name + "\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
// -- Output : baseConteneur :: x=0, y=0, w=0, h=0
trace (conteneur1.name + "\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
// -- Output : Conteneur1 :: x=0, y=0, w=0, h=0
// -- Faite ctrl + enter


Commenter largement votre source vous seras aussi d'une grande utilité. Vous pourrez le constater par vous même lorsqu'un jour vous reprendrez un vieux source, ou échangerez des sources avec d'autres développeurs de par le monde, de par le net.
Il en seras ainsi du respect de la convention d'écriture. Interressez vous à ces deux points essentielles.

:: Création d'un premier objet/programme d'orientation visuelle.

Code: Tout sélectionner

// -- Premier objet visuelle à placer dans le 'conteneur1'
// -- Vous aurez un visuel au PlayerFlash + Des données dans le Output Panel.
// --
var s:Shape = new Shape();
s.graphics.beginFill(0xFF0000, 1); // -- Param1 : couleur, Param2 : alpha.
// --
// -- Partant sur le principe que mon stage a 800px de large et 350px de haut
// --
s.graphics.drawRect(10, 10, 780, 30); // -- Param1 : x, Param2 : y, Param3 : largeur, Param4 : hauteur
s.graphics.endFill();
conteneur1.addChild(s); // -- Ajout comme enfant de l'objet visuelle 's' dans le conteneur1
// --
// -- Interroger ses conteneurs -- Remarquer que les conteneurs peuvent avoir de 1 à 2 px de plus
// --
trace (baseConteneur.name + "\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
// -- Output : baseConteneur :: x=0, y=0, w=780, h=30
trace (conteneur1.name + "\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
// -- Output : Conteneur1 :: x=0, y=0, w=780, h=30
// -- Faite ctrl + enter
// -- OK -- on continu
// -- On place un deuxième objet/programme visuel
var s2:Shape = new Shape();
//-- Le param2 : alpha, n'est pas obligatoire, car il est implémenté avec une valeur par défaut dans l'API.
s2.graphics.beginFill(0xFFFF00, 1);
s2.graphics.drawRect(10, 43, 780, 30); //-- Seul la position ' y ' aura changé ici. 
s2.graphics.endFill();
conteneur1.addChild(s2); // --> Je n'ai pas à me répéter ici, vous comprenez.
// -- Retracer encore une fois
trace (baseConteneur.name + "\n" + baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
// -- Output : baseConteneur :: x=0, y=0, w=780, h=63
trace (conteneur1.name + "\n" + conteneur1.x + " " + conteneur1.y + " " + conteneur1.width + " " + conteneur1.height);
// -- Output : Conteneur1 :: x=0, y=0, w=780, h=63
// -- Dernière mise à jour :: 8 Mars 2008.


Voici ce que vous pouvez faire par utilisation de différente propriété prédéfini de Flash
:: conteneur1.y = 200;
:: conteneur1.alpha = 0.5;
:: contneur1.visible = false;
Vous comprendrez que lorsque vous cibler un ou l'autre des conteneurs, c'est l'ensemble des objets/programmes contenu dans ces conteneurs qui en subiront aussi les conséquences. Par contre, vous pouvez cibler un seul de ces objets. Exemple ? Ok d'accord :
:: s.alpha = 0.3;
:: s2.alpha = 0.7;
Cepandant n'oublier pas de retracer pour mieux saisir les nouvelles données : Exemple ?
:: s2.y += 20;
:: trace(baseConteneur.name + "\n" + baseConteneur.height);
:: trace(conteneur1.name + "\n" + conteneur1.height);

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Animation :: Programmer l'interpolation et Interrogation des Containers
Prochainement je vous invite à programmer un interpolation de mouvement. Rien de bien sorcier je vous le jure. Toujours dans le cadre des Containers, cette interpolation apportera de nouvelles données dans le Output Panel, à la fin de la courte animation. Vous pourrez voir la flexibilité des Containers, et leur rôle d'importance dans tous les développements de modules interactifs.

Voici quelques exemples d'utilistions concernant les Containers
Gérer et administrer des zones completes, nommés et prédéfinis :: Mise en page et préparations des maquettes :: Mise à jour de certaine zone en temps désiré :: Chargement des données depuis l'externe vers des conteneurs précis :: Visibilité ou non :: Redimensionnement et changement de position à l'écran selon le choix utilisateur :: Drag And Drop d'un conteneur et de son lot d'objets visuels et/ou Dragguable only en ' X ' et/ou en ' Y ' :: Alphasé une zone complete pour faire place à une image et /ou une donnée quelquonque que l'utilisateur a choisi et veut agrandir. Ce n'est là que quelques exemples, le reste est une affaire de créativité. Le développeur devras donc en être conscient.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

D'ici là, voyez quelques adresses utiles où vous pourrez télécharger des PDF de pédagogie et d'enseignement
http://www.adobe.com/designcenter/ :: http://www.adobe.com/devnet/flash :: http://www.actionscript.org/
--------------------------------------------------------------------------------------------------------------------------------------------------------
PDF : actionScript 3 : 881 Pages :: PDF : Flex et actionScript 3 : 1881 Pages :: PDF : javaScript 5° édition : 1743 Pages.
Évidemment ce n'est là que quelques suggestions. Plusieurs autres vous seront donnés en temps utiles. Par le fait même, tout n'est pas cuit dans le bec ici. Vous devrez naviguer un peu, surtout si vous désirez obtenir les PDF's ou les zip's pour ne pas dire davantage encore. Une vrai mine d'or en matière de développement. Que de sources à étudier.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bonne Prog . . . de :: Zardoz

[Cclleemm]

Merci pour ces indications, à ce que je vois, tu t'y connais bien en Flash.
Alors je pense que tu es l'un des rares du forum. Pour moi Flash est encore mystérieux, et je ne suis vraiment pas doué dans ce domaine. Donc ce n'est pas moi qui pourrais te corriger
Merci de ta participation pour ce petit cour. Et à bientôt !

[jeromecold]

Je m'éttait esseillé au flash mais avec un logiciel qui veux rien comprendre, sa va pas bien!
Joli cours!

[zardoz]

Oui bon d'accord et merci à vous tous pour votre accueil.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Veuillez cependant considérer que les 2 ou 3 prochaines journées me permetterons de me familiariser avec Mon Site Gratuit et que tous les propos ci-haut mentionné sont sujet à changement. je tiens particulièrement à me familiarisé avant de me lancé. C'est normal, toute nouvelle interface, aussi simple soit-elle, exige une approche primaire. Je n'ai donc que félicitation pour l'équipe de Mon Site Gratuit, surtout en ce qui concerne l'espace des préparatifs des messages et/ou tutoriaux, scripts ect . . . L'espace est large à l'écran et totalement originale.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var espace:String = 'confort ' ;
var ambiance:String = 'funny';
if (espace == ' confort ' && ambiance == 'funny')
{
trafic++ ;
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
. . . Bon d'accord que vous opter pour la gratuité et en celà, j'en suis reconnaissant . . . j'ai besoin de vous.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bonne Prog . . .
Zardoz

[Florian]

SUPER TUTO MERCI zardoz !!

[zardoz]

Merci Florian.
Si toute chose vont bien j'aimerais reprendre les sujets
et les développer davantage sur un autre site. C'est ce que je vérifie à cette heure.

Ce fut mon premier tuto mais là j'ai 18 mois d'expérience dans la conception des tutos
donc j'aimerais pouvoir améliorer davantage.

++

[zardoz]

Excusez le double post : je voulais juste attirer l'attention de Florian.
En changeant la date au minimum pour ne pas dire au maximum [ :- ) ]=(

Je suis au courant Florian du trailer et ce depuis longtemps.
C'est d'ailleurs en souvenir de ce film que j'ai choisi « zardoz » comme pseudo.
Mais uniquement de mémoire. J'ai toujours retenu le titre du film, plus que le film lui-même.

Excuse mon retard » mais je n'avais pas conscientisé le lien vers « youTube » sur ton message.

++