Ressources Mediabox

tutoriaux

Pierre GIRARD — Sat, 12 May 2012 19:22:03 +0200

Tutoriels et ressources Adobe Flash, Flex, AIR, Flash Catalyst, programmation Actionscript et MXML.

Tutoriels portants sur le développement d'applications pour iPhone, iPad et Mac: Programmation en Objective-C, utilisation de l'API Cocoa, outils de production (XCode).

Adobe Director

Director, grâce à son interface, son langage de programmation Lingo (orienté objet ou non) et JavaScript permet de créer des applications multimédias enrichies et des jeux, aussi bien pour DVD/CD-ROM que pour le web.

PHP

PHP est un langage de script qui est principalement utilisé pour être exécuté sur un serveur Web, mais il peut fonctionner comme n'importe quel langage interprété en utilisant les scripts et son interpréteur sur un ordinateur.

.NET

.NET correspond à un ensemble Microsoft qui comporte un framework, des langages de développement, des spécifications techniques et des systèmes (Systèmes d'exploitation, Logiciels serveurs…).

Java

Le langage de programmation informatique orienté objet de Sun Microsystems.

Microsoft Silverlight

L'alternative à Flash de Microsoft pour la réalisation d'applications web riches intégrant graphismes, animations, sons et vidéos.

Javascript

Le langage de programmation Javascript et son utilisation pour le web notamment.

Réaliser des pages pour le web : HTML, XHTML et CSS

Création de pages web HTML, XHTML et CSS

Sites web - Généralités

Articles généraux sur la conception et la gestion de sites web

Adobe Dreamweaver

Tutoriels et ressources Adobe Dreamweaver

Microsoft Expression

La suite de Microsoft pour la création d'application riches pour le web ou le bureau.

PAO

Tutoriels généraux et ressources de Publication Assistée par Ordinateur

Adobe Photoshop

Tutoriels et ressources Adobe Photoshop

Adobe Illustrator

Tutoriels et ressources Adobe Illustrator

Adobe InDesign

Tutoriels et ressources Adobe InDesign

Adobe After Effects

Tutoriels et ressources Adobe After Effects

Flash Catalyst

Tutoriels et ressources Adobe Flash CATALYST CS5

Les mystères du feuilleteur (Pageflip) - ancienne révision restaurée

Nataly — Mon, 23 Apr 2012 14:09:06 +0200

Chantier suffisamment avancé pour recueillir vos points de vue
Page non encore sécurisée.
Port du casque recommandé.

Les mystères du feuilleteur (Pageflip)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Bonjour toutes et tous, qui vous dites depuis un moment :
“Mais bon Sang, comment ça marche c'te chose ?! Certainement faut-il être très fort en maths et encore plus en AS pour avoir une chance d'y comprendre quoi que ce soit…”.

Et bien non Et je suis formelle !
Une fois l'illusion démontée, je me fais forte de débrouiller l'embrouille à destination du plus grand nombre.

Aussi vais-je m'y prendre en deux parties :

• Ici décortiquer le principe de base, puis en faire une fonction qui permet de corner et tourner une seule feuille depuis un coin quelconque, comme illustré ci-dessus.
• Là-bas un exemple de mise en œuvre de la dite fonction au sein d'un feuilleteur complet.

Il sera donc, dans cette partie de tuto, question principalement de géométrie.
Ne fuyez pas, je promets que ça ne fait appel à rien qui dépasse l'entendement commun. Si vous savez reconnaître un angle droit, vous êtes sauvés. D'ailleurs je vais me permettre, à la demande générale du ronchon de service, un préambule aussi court que possible pour synthétiser et résumer les quelques points de vocabulaire indispensables et les deux trois formules que vous avez peut-être oubliés.

D'un point de vue AS3, je considère que vous en avez une pratique courante, on utilisera par exemple la classe Timer sans explications spécifiques. C'est d'ailleurs la seule chose à connaitre en dehors des traditionnels addChild, new Shape() et autres structures de contrôle.
Pour vous rafraichir les idées, si besoin était, vous trouverez un chapitre qui résume les choses à l'occasion de ce tuto.

Remerciements appuyés à :
Dldler et Lilive¹⁾, sans le secours desquels je ne suis pas bien certaine que ce tuto aurait abouti

Dans la vraie vie

Attaquons sans plus attendre, et une fois n'est pas coutume, ce n'est pas en créant nouveau document qu'on va commencer. Je vous propose de faire un détour par la vraie vie pour comprendre de quoi il retourne (oui : jeu de mots ).
Munissez vous de deux feuillets suffisamment rigides, papier cartonné, canson un peu lourd, bristol, ce que vous avez sous la main. Moi ce sera du bristol.

[video Mettre en évidence superposition et distances identiques : isocèle]

pour les aventureux impatients qui ne peuvent attendre l’inauguration, vidéo indispensable à visionner elle illustre les deux ruses fondatrices de tout le reste
Ce qu'on vient de faire avec nos petits doigts agiles - je ne doute pas que vous vous y soyez essayés aussi pour bien vous convaincre du principe - transformé en clips et en animation, ça donne ça (depuis le coin bas droit) :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Pour terminer l'illusion, il s'agira de se débrouiller pour qu'on ne voit qu'un morceau de Verso (le triangle du coin) et pour dissimuler ce qui “déborde” sur Recto, comme illustré au dessus avec majuscule enfoncée.
Il va donc être essentiellement question de triangles.

Afin d'avoir l'esprit libre pour jouer les Sherlock Holmes et débusquer les infos (angles et coordonnées) qui nous intéressent, je propose à ceux qui n'ont gardé que de très lointains souvenirs des années collège, un détour récapitulatif des connaissances que nous mettrons à contribution.

Le minimum à savoir pour suivre ce qui va suivre

Donnez moi un angle droit et je soulèverai le monde, c'est ma version toute personnelle de la célèbre saillie de Monsieur Archimède.
En effet, pour peu qu'on repère un angle droit quelque part on a toutes les chances de pouvoir calculer ce qu'on veut.

J'ai pris le parti de raisonnements géométriques. Il en est d'autres, sans doute plus élégants, peut-être même plus courts en terme de lignes de code, qui font appel à des connaissance mathématiques plus avancées.
Pour être accessible au plus grand nombre (et ne pas déborder de mes champs de compétence ), j'ai choisi l'option géométrie/trigo, en utilisant les quelques outils de première nécessité, soit trois fois rien.
Il s'entend que d'autres calculs permettraient d'obtenir le même résultat, et que les “formules” ici proposées ne sont pas, et de loin, les seules possibles. D'ailleurs en fin de tuto, je vous proposerai trois façons d'aborder et de résoudre la même problématique, charge à vous plus tard de choisir les outils mathématiques que vous privilégierez pour parvenir à vos fins.

Ce chapitre résume et synthétise les quelques points de géométrie sur les quels nous appuierons nos raisonnements. N'hésitez pas à sauter à la suite, on n'y verra rien qui concerne spécifiquement le développement du feuilleteur.

Triangle rectangle

Qui dit angle droit dit triangle rectangle, un peu de vocabulaire pour être sûr d'être bien d'accord :

Le coté face à l'angle droit se nomme hypoténuse (les grecs pensaient dessous)
Pour chacun des deux autres angles, on nomme opposé le côté face à l'angle considéré, et adjacent le dernier côté.

• Depuis Pythagore on sait que le carré de l'hypoténuse vaut la somme des carrés des deux autres côtés, écrit autrement :

H²= F²+G²

En gros, pour peu qu'on ait la mesure de deux côtés on trouve le troisième

• Il est à noter aussi qu'un rectangle découpé par sa diagonale donne deux triangles rectangles identiques (mêmes angles, mêmes cotés).

Sinus cosinus et tangente

Soit un angle quelconque au sommet d'un triangle rectangle (oui, encore), on en obtient le sinus en calculant le rapport du côté opposé à l'hypoténuse ; le cosinus c'est côté adjacent sur hypoténuse, et tangente c'est opposé sur adjacent.

• Si on a un triangle rectangle, un côté et un angle… On obtient les deux autres côtés. Enfin, pour peu qu'on connaisse le sinus, le cosinus ou la tangente de l'angle en question.
Avec AS3 ce sont les fonction Math.sin, Math.cos et Math.tan qui s'en chargent.

• Si on a un triangle rectangle, deux côtés… On obtient les deux autres angles. Cette fois à l'aide des fonctions Math.asin, Math.acos ou Math.atan²⁾.

Voilà, j'ai tout dit de ce qui nous occupera, ça vous rassure ? Parfait, alors une dernière précision pour être tout à fait au point :

Triangle isocèle

C'est ainsi qu'on appelle les triangles dont deux côtés sont égaux (même taille). Je les aime bien parce qu'on peut toujours les couper en deux de façon à obtenir deux triangles rectangle (ah ah).

Notez qu'on peut tracer une ligne qui part du milieu de la base (segment rouge) et rejoint le sommet. Chacun des points qui la constituent se trouve à égale distance des extrémités du segment rouge, on dit que c'est sa médiatrice³⁾.
Elle a pour autre particularité de former un angle droit avec le segment concerné et dans un triangle isocèle elle définit un axe de symétrie. Du coup les angles de la base sont égaux.

http://debart.pagesperso-orange.fr/college/triangle_college_classique.html#ch1

Cette fois c'est bon, on sait où on va (calculer des coordonnées ou des angles), avec quoi (des triangles dont on sait tout) et d'où on part (le point qui suit les coordonnées de la souris). Défouraillez donc un nouveau document flash, c'est parti !

Depuis le coin en bas à droite

On va commencer par expérimenter depuis un seul coin puis on déclinera sur les trois autres. Je choisis arbitrairement le coin bas/droit (puisqu'il faut que je fasse tout).

Préparer le terrain

Quand il s'agira d'un feuilleteur tout entier (plusieurs pages réunies en “livre”) ces pages seront probablement des fichiers (.jpg, .png, .swf…) mais peut-être aussi des clips présents dans la bibliothèque d'un .fla.
Pour nous entrainer (et ne pas nous compliquer avec le chargement d'images) considérons deux clips de bibliothèque : un symbole P1(pour le recto) et un autre P2 (pour le verso).

Le clip Recto (P1)

Rien de compliqué : un malheureux rectangle, un champ texte (même pas obligé, mais ça permet d'y voir clair), le point d'origine en bas à gauche (parce qu'il faut bien convenir de quelque chose).

Le clip Verso (P2)

Pas beaucoup plus dur : un rectangle aux mêmes dimensions que celui du symbole Recto (obligé : on considère que toutes les pages sont de hauteur/largeur identiques), et un champ texte.
Le point d'origine en bas à gauche aussi - et là ce n'est plus indifférent du tout.

Ici j'ai un problème : soit je n'anticipe rien du tout et j'attends qu'on se prenne le mur, soit je m'égare en de longues justifications, peut-être prématurées… (pas facile ma vie, je vous le dis !)
Je coupe la poire en deux :

Ceux qui veulent tenter l'aventure sans filet peuvent passer à la suite.

• Les autres… Ayez confiansssssss…

On va regrouper les éléments du visuel du symbole P2 en un clip. Le plus simple c'est de tout sélectionner, de convertir en symbole (Clip tant qu'à faire) à l'aide de la touche F8 en prenant soin de fixer le point d'origine en bas à gauche :

Vérifiez au passage que les coordonnées de l'occurrence sont bien en 0/0.

Ajouter les pages à la scène

Une dernière formalité : ajouter une instance de P1 et de P2 sur la scène. Ou plutôt, pour faire facile/malin tout de suite, ajoutons ces instances dans un clip contenant, qu'on pourra disposer où bon nous semble.
En route :

Sur les sources jointes j'ai profité d'avoir un .fla à ma disposition pour répartir le code sur plusieurs calques (ça facilite pour s'y retrouver). J'ai donc un calque nommé “Declare init” et un un autre nommé “code”. Faites bien comme vous le sentez, mais prenez soin - si vous optez pour les calques différents - à ce que declare init soit au dessus des autres.

• Calque Declare init :

\\
// un contenant
var contenant:MovieClip= new MovieClip();\\
// les instances
var _recto:P1= new P1();\\
var _verso:P2=new P2();\\
\\
contenant.addChild(_recto);\\
contenant.addChild(_verso);// doit être au dessus de recto\\
// contenant où on veut comme ça nous arrange
contenant.x= 250;\\
contenant.y= 350;\\
addChild(contenant);\\
\\
var _haut:Number=_recto.height;// Récupérer la hauteur d'une page
var _larg:Number=_recto.width;// Récupérer la largeur
\\
_verso.x=_larg;// à droite de recto
_verso.rotation =120;// incliné arbitraire en attendant
\\

Suivre le pointeur

Ayé, on peut commencer, vraiment.
D'abord ce qu'on veut c'est que _verso suive le pointeur.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour se mettre en jambes, ce n'est pas le plus difficile. Convenons d'une fonction placePage qui sera invoquée de façon récurrente (via un Timer) quand on maintient le bouton de la souris enfoncé.

• Calque Declare init :

\\
contenant.addEventListener(MouseEvent.MOUSE_DOWN,demarre);\\
stage.addEventListener(MouseEvent.MOUSE_UP,arrete);\\
\\
var _tm:Timer=new Timer(50);\\
_tm.addEventListener(TimerEvent.TIMER,placePage);\\
\\
function demarre(me:MouseEvent):void {\\
	_tm.start();\\
}\\
function arrete(me:MouseEvent) {\\
	_tm.stop();\\
}\\

• Calque code :

\\
function placePage(e:Event=null):void {
	var x_c:Number=contenant.mouseX;
	var y_c:Number=contenant.mouseY;
	_verso.x=x_c;//  suit point courant
	_verso.y=y_c;
}\\

On se doute bien qu'on va avoir besoin par la suite des coordonnées du pointeur, autant les sortir tout de suite sous forme de variables x_c et y_c⁴⁾.

Dessiner le point

Pour s'y retrouver plus tard ajoutons un point rouge (un vrai, un objet Shape) qui suivra le pointeur.

• Calque Declare init :

var scoin_c:Shape= new Shape();// coin courant (suit souris)
scoin_c.graphics.beginFill(0xFF0000);
scoin_c.graphics.drawCircle(0,0,5);
contenant.addChild(scoin_c);
\\
\\
function placePage(e:Event=null):void {
[…]
	// dessin - - - - - - - - - - - - - - - - - -
	scoin_c.x= x_c;// suit point courant
	scoin_c.y= y_c;
}

Ça c'est fait

Déterminer l'angle de rotation du verso

L'énigme de l'angle vert

Maintenant réfléchissons : voici ce qu'on veut obtenir (hors lignes de construction)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Et voici les données de l'énigme

Je vais les reprendre et avancer dans un des raisonnements possibles à coup de croquis. Je vais faire plus que détaillé et étape par étape dans l'idée certes d'être aussi claire que possible, mais aussi de donner, en quelque sorte, des indices successifs à ceux qui voudraient jouer et trouver “tous seuls”

Reprenons donc sur un croquis :
Ce qu'on cherche : l'angle marqué en vert.
Ce qu'on connaît : les coordonnées des deux points rouges (pointeur et coin bas droit).
Ce qu'on sait : les deux lignes continues bleues sont de même taille.

Depuis les points rouges, on peut tracer un rectangle dont on connaît hauteur et largeur (du moins pourra-t-on les calculer).

Du coup en coupant ce rectangle selon la diagonale on obtient deux triangles rectangle, et ça c'est pratique : puisqu'on connaît hauteur et largeur, on saurait en calculer les angles, si besoin était.

Considérons donc qu'on connait une “portion” de l'angle cherché : l'angle du haut, noté ang

Reste à trouver l'angle marqué en noir : l'angle vert (qu'on cherche) vaudra angle rouge (ang) plus angle noir.

Et c'est là qu'on se souvient que les deux lignes marquées en bleu sont de même taille et que par conséquent on a un triangle isocèle

Et que c'est rudement bien les triangles isocèle parce que les angles à la base sont égaux.

Ayé vous voyez la ruse ?
Je vous rappelle que…

… les angles opposés sont égaux…

… et qu'on connait ang

Et oui… les angles rouges et noirs sont les mêmes
Vu qu'on sait que :
angle vert = angle rouge + angle noir
On en conclu, ébahis, que :
angle cherché = 2 * ang

Pour obtenir l'inclinaison du clip _verso, il suffit donc de “trouver” ang, qui appartient à un triangle rectangle dont on connaît deux côtés… Trop facile !

Le code

Traduire en code, puisque la classe Math nous fournit tout le petit matériel nécessaire, ça va être un jeu d'enfants.

Tout d'abord on a besoin des coordonnées du coin de départ dans contenant, on va les stocker dans une variable globale (plus tard quand on s'occupera des autres coins forcément ça changera).
Déclarons donc une variable _pCoinDep, de type Point (pour stocker les coordonnées d'un point, on n'a pas trouvé mieux )

\\
var _pCoinDep:Point=new Point(_larg,0);\\

Puis dans la fonction il reste à calculer l'angle qui nous intéresse (noté ang en rouge sur le croquis) :

\\
function placePage(e:Event=null):void {\\
[…]\\
	// Angle de base -------------------------\\
// le côté adjacent, la largeur sur le croquis\\
	var adj:Number=_pCoinDep.x-x_c;\\
// le côté opposé, la hauteur sur le croquis\\
	var opp:Number=_pCoinDep.y-y_c;\\
// on sait que tangente = opposé sur adjacent\\
	var tang:Number=opp/adj;\\
// Math.atan nous renvoie - en radian - la mesure d'un angle dont on connaît la tangente\\
	var angR:Number=Math.atan(tang);// radian\\
// penser à convertir en degré pour la prorité rotation ;)\\
	var angD:Number=angR*180/Math.PI;// degres\\
\\
	_verso.x=x_c;//  suit point courant\\
	_verso.y=y_c;\\
// --> ici on applique la rotation\\
	_verso.rotation=angD*2;//  inclinaison de la page\\
\\
[…]\\

Pas plus, et le clip verso s'incline selon la position de la souris

Là je ferais bien une pause, mais Ronchon est trop enthousiaste, on ne le tient plus, il veut placer les masques pour achever l'illusion. Il se souvient que le masque s'appuie sur la médiatrice de notre fameux triangle isocèle ⁵⁾ et affirme qu'on a tout ce qu'il faut pour finir, que c'est l'affaire de 5 minutes…

Placer les masques

Il va donc s'agir déplacer un rectangle (un vrai, un objet Shape) sur la ligne grise, celle que j'ai nommée ligne de pliure en début de chapitre.

Voici ce que vous attendez, j'ai ajouté les lignes de construction et une bascule pour masquer ou non le verso, ne vous en préoccupez pas.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ci-dessus c'est juste pour voir ce qu'il se passe : les dimensions du masque sont arbitraires (et ne conviennent pas), ne vous compliquez pas maintenant, faites pareil.

Fabriquer les masques

Puisqu'il nous faudra deux formes rectangulaires (une pour le verso, une autre pour le recto, dans l'élan et tant qu'à faire), je vous laisse vous employer à les fabriquer, sur le calque Déclare-Init.

- Et vu que vous n'avez besoin de personne je file me chercher un café, zutalafin. Que les plus impatients ne se privent pas de s'essayer à aller jusqu'au bout : orientation et déplacement du masque, vous disposez de tous les indices nécessaires -

\\
var taillopif:Number=200;\\
var taillopif2:Number=100;\\
var _mVerso:Shape= fabRectHM(taillopif, taillopif2);\\
var _mRecto:Shape= fabRectHM(taillopif, taillopif2);\\
\\
contenant.addChild(_mVerso);\\
// ligne en commentaire le temps de voir ce qui se passe\\
//_verso.mask=_mVerso;\\
\\
\\
function fabRectHM(l:Number,h:Number):Shape {\\
	var s:Shape=new Shape;\\
	s.graphics.beginFill(0x333333);\\
	s.graphics.drawRect(-l/2,0,l,h);\\
	return s;\\
}\\

Les dimensions du rectangle sont donc choisies au pifomètre, et vous avez pris soin de disposer le point d'origine (0/0) en haut au milieu.

Calculer l'angle de rotation

Pour ce qui est de l'angle appliqué au masque, c'est dans la fonction placePage que ça se passe (puisque c'est recalculé sans cesse selon la position de la souris)

La ligne de pliure c'est tout bonnement la médiatrice du triangle isocèle qu'on a isolé un peu plus haut (représentée en noir sur le croquis ci-dessous).

Souvenez vous : la fin de la vidéo d'intro démontre, par pliage, que la ligne de pliure détermine un axe de symétrie sur ce fameux triangle isocèle (segments S et S' et base rouge). Dans un triangle isocèle, la ligne qui passe par son sommet et le milieu de sa base, c'est la médiatrice. Elle a pour autre caractéristique d'être perpendiculaire à la base.

Calculer l'angle de cette médiatrice, c'est tout bête puisqu'on sait qu'elle est perpendiculaire à la ligne rouge dont on connaît l'angle (on vient de le calculer)

\\
	var angMedD:Number=angD+90;// elle est perpendiculaire\\
	////                                        c'est la ligne de masque\\

Voici donc pour la propriété rotation du masque _mVerso.

Les coordonnées

Reste à trouver ses coordonnées.
Je propose de s'appuyer sur un point facilement calculable : l'intersection entre la médiatrice et la base (rouge) du triangle, puisqu'on sait que le propre de la médiatrice c'est de passer par le milieu de la base.

\\
	var pM:Point= new Point(); // le point du milieu\\
\\
	pM.x = (x_c + _pCoinDep.x) / 2;\\
	pM.y = (y_c + _pCoinDep.y) / 2;\\
// coorconnées\\
	_mVerso.x=pM.x;\\
	_mVerso.y=pM.y;\\
// rotation\\
	_mVerso.rotation=angMedD;\\

Jusque là, ça va…

Reste à faire la même chose avec _mRecto et à faire propre : ne pas voir les masques à l'initialisation, et se débrouiller pour qu'ils ne remplissent leur office que quand ça nous intéresse. Quant aux dimensions des masques, je suis restée à l'étape 'taille au pif' et constaté très empiriquement que les valeurs ci-dessous convenaient tout à fait…

\\
var taillopif:Number=_haut*2.5;\\
var taillopif2:Number=_haut*1.5;\\

Le code complet

• Calque déclare init

\\
var _pCoinDep:Point=new Point(_larg,0);\\
\\
var contenant:MovieClip= new MovieClip();\\
var _recto:P1= new P1();\\
var _verso:P2=new P2();\\
\\
contenant.addChild(_recto);\\
contenant.addChild(_verso);// doit être au dessus de recto\\
contenant.x= 150;\\
contenant.y= 350;\\
addChild(contenant);\\
\\
var _haut:Number=_recto.height;\\
var _larg:Number=_recto.width;\\
\\
_verso.x=_larg;// à droite de recto\\
_verso.visible=false;\\
\\
var taillopif:Number=_haut*2.5;\\
var taillopif2:Number=_haut*1.5;\\
\\
var _mVerso:Shape= fabRectHM(taillopif, taillopif2);\\
var _mRecto:Shape= fabRectHM(taillopif, taillopif2);\\
\\
contenant.addChild(_mVerso);\\
_mVerso.visible=false;\\
contenant.addChild(_mRecto);\\
_mRecto.visible=false;\\

• La fonction

function fabRectHM(l:Number,h:Number):Shape {
	var s:Shape=new Shape;
	s.graphics.beginFill(0x333333);
	s.graphics.drawRect(-l/2,0,l,h);
	return s;
}

• Calque code

contenant.addEventListener(MouseEvent.MOUSE_DOWN,demarre);
stage.addEventListener(MouseEvent.MOUSE_UP,arrete);
 
var _tm:Timer=new Timer(50);
_tm.addEventListener(TimerEvent.TIMER,placePage);
 
function demarre(me:MouseEvent):void {
	_tm.start();
}
 
function arrete(me:MouseEvent) {
	_verso.visible=false;
	_recto.mask=null;
	_tm.stop();
}
 
 
function placePage(e:Event=null):void {
	_recto.mask=_mRecto;
	_verso.mask=_mVerso;
	_verso.visible=true;
 
	var pM:Point= new Point();// point au milieu ligne coinDep-pointeur
 
	var x_c:Number=contenant.mouseX;
	var y_c:Number=contenant.mouseY;
 
	// Angle de base -------------------------\\
	var adj:Number=_pCoinDep.x-x_c;
	var opp:Number=_pCoinDep.y-y_c;
	var tang:Number=opp/adj;\\
	var angR:Number=Math.atan(tang);// radian
	var angD:Number=angR*180/Math.PI;// degres
	\\
	////// place point milieu --------------------------------------------------\\
	pM.x = (x_c + _pCoinDep.x) / 2;
	pM.y = (y_c + _pCoinDep.y) / 2;
	var angMedD:Number=angD+90;// elle est perpendiculaire\\
\\
	////// Bouge visuels -------------------------------------------------------\\
\\
	////// les masques\\
	_mVerso.x=pM.x;
	_mVerso.y=pM.y;
	_mVerso.rotation=angMedD;
\\
	_mRecto.x=pM.x;
	_mRecto.y=pM.y;
	_mRecto.rotation=angMedD;
\\
	////// la page\\
	_verso.x=x_c;//  suit point courant\\
	_verso.y=y_c;
	_verso.rotation=angD*2;//  inclinaison de la page\\
	}

Ajouter les lignes de construction pour la suite

Pour le plaisir de bien voir ce qui se passe, et parce que ça va nous aider pour la suite, je vous propose d'ajouter les lignes de construction et une pastille pour figurer le point d'intersection entre médiatrice et base de l'isocèle (aux coordonnées de pM donc).

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
La bascule pour afficher ou non les lignes de construction 'est du bonus pour le tuto, les sources ne s'en encombrent pas

On pourrait dessiner les lignes dynamiquement, et ne vous en privez pas si vous préférez, moi je me contenterai d'un clip avec une ligne

• Calque Declare init :

\\
// = = = = = = Dessin = = = = = = = = = = = = = \\
// si vous êtes daltoniens\\
var cDiagBase:Number=0xff0000;// diagonale de base (coinDep/souris)\\
var cMed:Number=0x707070;// point milieu et médiatrice\\
var cPage:Number=0x0000ff;// orientation de la page\\
\\
var scoin_c:Shape= new Shape();// coin courant (suit souris)\\
scoin_c.graphics.beginFill(cDiagBase);\\
scoin_c.graphics.drawCircle(0,0,5);\\
contenant.addChild(scoin_c);\\
\\
var sM:Shape= new Shape();// milieu de "diagonale de base"\\
sM.graphics.beginFill(cMed);\\
sM.graphics.drawCircle(0,0,5);\\
contenant.addChild(sM);\\
\\
// les lignes de construction\\
var ligneCoinSouris:Mv_Ligne=new Mv_Ligne();\\
var coulDiag:ColorTransform= new ColorTransform();\\
coulDiag.color=cDiagBase;\\
ligneCoinSouris.transform.colorTransform=coulDiag;\\
\\
contenant.addChild(ligneCoinSouris);\\
\\
var ligneMed:Mv_Ligne=new Mv_Ligne();//Mediatrice\\
var coulMed:ColorTransform= new ColorTransform();\\
coulMed.color=cMed;\\
ligneMed.transform.colorTransform=coulMed;\\
\\
contenant.addChild(ligneMed);\\
\\
var lignePage:Mv_Ligne=new Mv_Ligne();// inclinaison page\\
var coulPage:ColorTransform= new ColorTransform();\\
coulPage.color=cPage;\\
lignePage.transform.colorTransform=coulPage;\\
\\
contenant.addChild(lignePage);\\

Calque code, fonction placePage

\\
function placePage(e:Event=null):void {\\
[…]\\
	// dessin - - - - - - - - - - - - - - - - - -\\
	scoin_c.x=x_c;// suit point courant\\
	scoin_c.y=y_c;\\
	\\
	ligneCoinSouris.x=x_c;// suit point courant\\
	ligneCoinSouris.y=y_c;\\
	ligneCoinSouris.rotation=angD;\\
	\\
	lignePage.x=x_c;// suit point courant\\
	lignePage.y=y_c;\\
	lignePage.rotation=_verso.rotation;\\
	\\
	\\
	sM.x=pM.x ;// suit point milieu\\
	sM.y=pM.y;\\
	\\
	ligneMed.x=pM.x ;// suit point milieu\\
	ligneMed.y=pM.y;\\
	ligneMed.rotation=angMedD;// inclinaison médiatrice\\
\\
}\\

Nous voilà mûrs pur la suite, jusque là ça marche pour le coin en bas à droite, s'agirait que ça fonctionne aussi pour les trois autres.

Les quatre coins

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le coin de départ

On veut donc que la fonction placePage remplisse son office quelque soit le coin de départ de référence. Dit autrement, il s'agit que ça marche aussi quand _coinDep vaut 0/0 (bas/gauche) ou 0/-_haut (haut/gauche), ou _larg/-_haut (haut/droit).

Première chose à faire : valoriser _coinDep avant de lancer placePage. Je propose de le faire dans la fonction demarre
Ici on se contentera de “couper la page en quatre”, et de valoriser _coinDep selon la position du pointeur (quart bas/droit, haut/droit, etc.).
Ce qui nous donne :

function demarre(me:MouseEvent):void {
 
	if (me.localY < -_haut/2 && me.localX>_larg/2 ) {
		trace("haut droit");
		_pCoinDep.x=_larg;
		_pCoinDep.y=-_haut;
 
	} else if (me.localY < -_haut/2 && me.localX<=_larg/2) {
		trace("haut gauche");
		_pCoinDep.x=0;
		_pCoinDep.y=-_haut;
 
	} else if (me.localY >= -_haut/2 && me.localX<=_larg/2) {
		trace("bas gauche");
		_pCoinDep.x=0;
		_pCoinDep.y=0;
 
	} else {
		trace("bas droite");
		_pCoinDep.x=_larg;
		_pCoinDep.y=0;
	}
	//
	_tm.start();
}

Tel que, ça fonctionne toujours si on clique en bas à droite (ouf !), déjà moins bien si on clique en haut à droite, et carrément plus du tout pour les deux autres coins.

On s'en doutait un peu, il faut bien le dire

La position du visuel

Regardons ce qui fonctionne presque : le coin haut droit…
En fait c'est quasi ça, si ce n'est que ce n'est pas le bon coin de _verso qui suit le pointeur.

Hé oui : rappelons nous, les coordonnées du clip visuel dans P2 (symbole de bibliothèque) sont à 0/0. Quand P2 suit le pointeur, c'est aussi le coin bas gauche du clip inclus (a) qui suit le mouvement. Or, quand on change le coin saisi au départ sur le recto (celui qu'on saisit dans la vraie vie) on change forcément aussi le coin saisi au verso
Pour ceux qui sont ausi handicapés que je le suis des facultés de visualisation dans l'espace, j'ai illustré les correspondances :

Si ce n'est que ça !
Aussitôt vu, aussitôt fait : yaka déplacer le clip contenu dans _verso afin que le coin situé en 0/0 de P2 soit celui qui lui est “associé” sur le recto :

Et c'est là que les intrépides qui ont choisi de ne pas faire du visuel de P2 un clip inclus en mesurent les conséquences, et n'ont plus qu'à s'y mettre ⁶⁾

function demarre(me:MouseEvent):void {
        // récupérer le clip inclus
	var visuel:DisplayObject=_verso.getChildAt(0);
	if (me.localY < -_haut/2 && me.localX>_larg/2 ) {
		trace("haut droit ");
		visuel.x=0;
		visuel.y=_haut;
		_pCoinDep.x=_larg;
		_pCoinDep.y=-_haut;
	} else if (me.localY < -_haut/2 && me.localX<=_larg/2) {
		trace("haut gauche");
		visuel.x=-_larg;
		visuel.y=_haut;
		_pCoinDep.x=0;
		_pCoinDep.y=-_haut;
	} else if (me.localY >= -_haut/2 && me.localX<=_larg/2) {
		trace("bas gauche");
		visuel.x=-_larg;
		visuel.y=0;
		_pCoinDep.x=0;
		_pCoinDep.y=0;
 
	} else {
		trace("bas droite 1");
		visuel.x=0;
		visuel.y=0;
		_pCoinDep.x=_larg;
		_pCoinDep.y=0;
	}
	//
	_tm.start();
}

Ça y est ça fonctionne pour les deux coins de droite.
A gauche… C'est pas loin…

Les masques en "symétrie"

Si, si Ronchon, ne désespère pas on y est presque, regarde bien, affiche un masque temporairement pour y voir plus clair… Ça y est tu repères le hic ? Vous aussi, vous avez vu ?
C'est le masque qui n'est pas du bon côté de la ligne de pliure !

Il faut qu'il pivote de 180° pour se retrouver du bon côté (un demi tour quoi).

Convenons donc d'une variable globale _sym (comme symétrie, même si c'est un abus de langage) qui vaudra 0 quand on saisit à droite et 180 quand on saisit à gauche. On la valorise dans demarre (dans chacune des quatre branches) ; Dans placePage on l'ajoute à la rotation des masques… Et le tour est joué

 
function demarre(me:MouseEvent):void {
 
	var visuel:DisplayObject=_verso.getChildAt(0);
	if (me.localY < -_haut/2 && me.localX>_larg/2 ) {
		trace("haut droit");
		visuel.x=0;
		visuel.y=_haut;
		_pCoinDep.x=_larg;
		_pCoinDep.y=-_haut;
// ICI ----> à droite rien à changer, la "symetrie" vaut 0
		_sym=0;
	} else if (me.localY < -_haut/2 && me.localX<=_larg/2) {
		trace("haut gauche");
		visuel.x=-_larg;
		visuel.y=_haut;
		_pCoinDep.x=0;
		_pCoinDep.y=-_haut;
// ICI ----> à gauche il faudra pivoter les masques, la "symetrie" vaut 180
		_sym=180;
 
[…]

function placePage(e:Event=null):void {
	[…]
	////// les masques
	_mVerso.x=pM.x;
	_mVerso.y=pM.y;
	_mVerso.rotation=angMedD+_sym;
 
	_mRecto.x=pM.x;
	_mRecto.y=pM.y;
	_mRecto.rotation=angMedD+_sym;
	//

Pour que ce soit tout propre quand on relâche la souris, un coup de plumeau dans arrete :

function arrete(me:MouseEvent) {
	_verso.visible=false;
	_recto.mask=null;
	_tm.stop();
}

A ce stade le principe est isolé et la fonction de base, on la tient.
Reste à identifier les points de déchirure afin que le mouvement de la feuille soit limité (au besoin) par la ligne de reliure (verticale opposée au coin de saisie)

Identifier les points de déchirure

Quand on tourne des pages reliées entre elles, le mouvement est limité par la reliure, justement.

Observez ce qui se produit en l'état en vous concentrant sur la ligne de pliure (la médiatrice grise). Le point de déchirure est atteint quand l'intersection entre cette ligne et le bord haut - ou bas - de la page est au-delà de la reliure (ou en deçà, selon le coin de départ choisi). Observons ce qui se passe quand on corne depuis le coin en bas à droite (pour ne pas changer des habitudes).

Deux cas de figure se présentent, je les commente sur l'animation ci-dessous :
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Maintenant que le principe est compris, reste à traduire… un jeu d'enfant
Convenons d'une fonction dechire qui renverra vrai si un des points de déchirure est dépassé.
Elle aura besoin du point pM - auquel on se réfère sans cesse -
L'autre donnée qu'on considère acquise dans la démo ci-dessus c'est angMed.
La fonction placePage le calcule et l'exprime en degrés, il faudra penser à le convertir.

function dechire(pM:Point,a:Number):Boolean {
	//---- l'angle
	var angMed:Number=(a/180*Math.PI);
 
	// ---- opposé
	// haut ou bas ?
	var bord:Number = _pCoinDep.y;
	// voir animation tuto
	var opp:Number =pM.y<bord?pM.y:_haut+pM.y;
 
	// --- adjacent via tangente
	var adj:Number=opp/Math.tan(angMed);
 
	//trace("opp "+opp);
	//trace("adj "+adj);
	// positon x
	var posX:Number=pM.x-adj;
 
	// renvoie vrai si à l'extérieur des marges
	var bDéchire:Boolean;
	bDéchire=posX>_larg || posX<0;
	return bDéchire;
}

Pour vérifier, on peut tester dans placePage :

function placePage(e:Event=null):void {
	_recto.mask=_mRecto;
	_verso.mask=_mVerso;
	_verso.visible=true;
 
	var pM:Point= new Point();
 
	var x_c:Number=contenant.mouseX;
	var y_c:Number=contenant.mouseY;
	// Angle de base -------------------------
	var adj:Number=_pCoinDep.x-x_c;
	var opp:Number=_pCoinDep.y-y_c;
	var tang:Number=opp/adj;
	var angR:Number=Math.atan(tang);// radian
	var angD:Number=angR*180/Math.PI;// degres
 
	// place point milieu --------------------------------------------------
	pM.x = (x_c + _pCoinDep.x) / 2;
	pM.y = (y_c + _pCoinDep.y) / 2;
	var angMedD:Number=angD+90;// elle est perpendiculaire
	////                                        c'est la ligne de masque
 
// -- > ICI 	
	if (dechire(pM,angMedD)) {
		return;
	}
 
	////// Bouge visuels ----------------------------------------------------------------------
	[.]
}

pas encore rédigé illustré… ça va viendre

Plus fluide

blabla

Un effet d'inertie sur le point courant

• Calque Declare Init

var x_c:Number;
var y_c:Number;

• Calque code,

Fonction demarre

	x_c =_pCoinDep.x;// suit pointeur, donc départ coin concerné
	y_c =_pCoinDep.y;

Fonction placePage

x_c += (contenant.mouseX - x_c) / 10;
y_c += (contenant.mouseY - y_c) / 10;

Conserver le mouvement quand on dépasse les points de déchirure

méthode A

	var pFace:Point= new Point(coinFaceX,_pCoinDep.y);
	var pPointeur:Point=new Point(x_c,y_c);
	var C:Point= pPointeur.subtract(pFace);
 
	if ( C.length>_larg) {
		C.normalize(_larg);
		pPointeur = C.add(pFace);
		x_c=pPointeur.x;
		y_c=pPointeur.y;
	}

méthode B

        var adj:Number=x_c-coinFaceX;
	var opp:Number=y_c-_pCoinDep.y;
	var hyp:Number=Math.sqrt(opp*opp+adj*adj);
 
	if (hyp>_larg) {		
		var angOppR:Number=Math.atan2(y_c-_pCoinDep.y,x_c-coinFaceX);
		var distX:Number=Math.cos(angOppR)*_larg;
		var distY:Number=Math.sin(angOppR)*_larg;
 
		x_c=coinFaceX+distX;
		y_c=_pCoinDep.y+distY;				
	}

function placePage(e:Event=null):void {
	_recto.mask=_mRecto;
	_verso.mask=_mVerso;
	_verso.visible=true;
	var pM:Point= new Point();
	//
	x_c += (contenant.mouseX - x_c) / 10;
	y_c += (contenant.mouseY - y_c) / 10;
 
// = = =>> ICI
	// distance pointeur coin de reliure sup à largeur 
        // --> disposer x et y courant sur cercle de rayon _larg
 
        // le centre du cercle c'est le coin face à pCoinDep
	var coinFaceX:Number=_pCoinDep.x==0?_larg:0;
        // calcul de la taille de l'hypothénuse : distance pointeur coin de reliure
	var adj:Number=x_c-coinFaceX;
	var opp:Number=y_c-_pCoinDep.y;
	var hyp:Number=Math.sqrt(opp*opp+adj*adj);
 
	if (hyp>_larg) {
		// angle du segment 'pointeur / coin de déchirure'
		var angOppR:Number=Math.atan2(y_c-_pCoinDep.y,x_c-coinFaceX);
		var angOpp:Number=angOppR*180/Math.PI;
		var distX:Number=Math.cos(angOppR)*_larg;
		var distY:Number=Math.sin(angOppR)*_larg;
                // placer le point courant à la circonférence du cercle
		x_c=coinFaceX+distX;
		y_c=_pCoinDep.y+distY;		
 
		// pour voir ce qu'il se passe
		ligneMed.rotation=angOpp;// inclinaison médiatrice\\
		ligneMed.x=coinFaceX;
		ligneMed.y=_pCoinDep.y;
 
	}
	// pour voir ce qu'il se passe
	scoin_c.x=x_c;// suit point courant\\
	scoin_c.y=y_c;
 
 
// ensuite rien ne change, on reprend les calculs depuis le point courant éventuellement recalculé
 
	adj=_pCoinDep.x-x_c;
	opp=_pCoinDep.y-y_c;
 
	var tang:Number=opp/adj;
	var angR:Number=Math.atan(tang);// radian
	var angD:Number=angR*180/Math.PI;// degres
 
	////// place point milieu --------------------------------------------------
	pM.x = (x_c + _pCoinDep.x) / 2;
	pM.y = (y_c + _pCoinDep.y) / 2;
 
	// vérifie déchirure pour l'autre cas
	if (dechire(pM,angR)) {
		return;
	}
	var angMedD:Number=angD+90;// elle est perpendiculaire
	////                                        c'est la ligne de masque
 
	////// Bouge visuels ----------------------------------------------------------------------
	////// les masques
	_mVerso.x=pM.x;
	_mVerso.y=pM.y;
	_mVerso.rotation=angMedD+_sym;
 
	//_mVerso.rotation=angMedD+_sym;
	_mRecto.x=pM.x;
	_mRecto.y=pM.y;
	_mRecto.rotation=angMedD+_sym;
	////
	//
	////// la page
	_verso.x=x_c;//  suit point courant
	_verso.y=y_c;
	_verso.rotation=angD*2;//  inclinaison de la page
	//}
}

Sources démo intro CS3 :

http://www.flp-sp.com.br/php/communautaire/spip.php?rubrique41&lang=fr

¹⁾ par ordre alpha : je me refuse à établir une quelconque hiérarchie dans l'aide apportée

²⁾ a : pour angle

³⁾ la médiatrice d'un segment est l'ensemble des points équidistants des extrémités du segment

⁴⁾ une habitude d'écriture très perso veut que _c signifie “courant”

⁵⁾ la ligne de pliure dans la vidéo, à ce moment là je parle de cacher ce qui déborde aussi bien de recto que de verso (je mets quand même pas la référence à la minute ? dis Lilive ?

⁶⁾ Afin de ne pas polluer la progression du tuto je ne développerai pas le sujet ici, si certains d'entre vous ont des questions j'y répondrai avec plaisir dans la discussion associée

Héritage et surcharge (#1)

Nataly — Mon, 23 Apr 2012 13:08:51 +0200

Introduction
Classe de base (#1)
Classe de base (#2)
Héritage et surcharge (#1)
Héritage et surcharge (#2)
Diffuser des événements
Classe liée
Classe de document
Classe externe : une visionneuse (#1)
Classe externe : une visionneuse (#2)
Classe externe : méthodes statiques

Héritage et surcharge (#1)

Pour illustrer les points qui vont suivre, je vous propose d'écrire quelques classes destinées à gérer des boites de dialogue modales.
On dit d'une boite de dialogue (et d'une fenêtre en général) qu'elle est modale quand sa fermeture est obligatoire pour pouvoir donner le focus à une autre fenêtre. En gros quand on ne peut pas accéder à d'autres éléments d'interface aussi longtemps qu'elle est affichée (ça empêche l'utilisateur de cliquer partout )
Typiquement il s'agit des boites d'alerte et autres boites de type Oui/Non.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Merci Lilive pour l'illustration bien ~~moins laide~~ plus jolie que celle dont je m'étais contentée.

Conception

Comme vous le voyez au dessus, la ruse consiste à créer un écran translucide entre la boite de dialogue et les autres éléments de l'animation.
Le principe de l'écran est commun à toutes les boites, qu'elles soient de type Alerte (un bouton), Question (Oui-Non) ou encore Boite de saisie.

Principe commun, quand on pense classe ça revient à dire héritage. Toutes les boites, si elles sont modales, devront hériter des même caractéristiques, donc d'une même classe qui se chargera d'afficher un écran translucide entre la boite et l'animation.
Appelons cette classe BoiteModale, elle héritera de MovieClip et chacune des classes (BoiteAlerte, BoiteOuiNon…) héritera de BoiteModale.

Dans un premier temps je vous propose de construire une boite d'alerte modale, ensuite ce sera jeu d'enfant de décliner le principe pour d'autres types de boites.

On est d'accord sur le fait qu'il va nous falloir, outre un fla de mise en œuvre, une classe BoiteAlerte et une classe BoiteModale.
Si on anticipe le fait que plus tard viendront s'ajouter des classes BoiteSaisie, BoiteOuiNon, et d'autres, on ne peut plus se satisfaire de tout ranger dans le même répertoire (le fla et les classes auxquelles il fait appel). D'autant moins que ces classes vont nous être utiles chaque fois que, dans un projet ou un autre, nous auront recours à une boite de type modal.

Organisation du disque et chemin de classe

Le .fla de test

Le .fla de test c'est pure formalité :
Dans sa bibliothèque il faut un clip qui sera une boite d'alerte. Faire aussi moche que sur la demo ne devrait pas vous prendre trop de temps, pour l'instant même un simple rectangle (pour y voir quelque chose) suffirait.

Et on l'enregistre là où ça nous arrange…

Organiser les classes

En revanche pour ce qui est des classes, cette fois on ne va pas les laisser dans le même répertoire que le fla.
Il est de tradition d'avoir dans un coin de disque un répertoire Outils, ou Utils, voire Utilitaires dans lequel on range ses classes perso.
Afin de ne pas risquer de confusions avec des répertoires pré-existants, ce dossier je vais le nommer Mezoutils.
Dedans, un sous-répertoire Interface et dedans encore un autre répertoire BoitesModales, comme ça ce sera bien propre.

A terme donc nous aurons quelque chose qui ressemblera à ça :

On est d'accord que ce clip (Mv_BoiteAlerte, par exemple) est destiné à être associé à la future classe BoiteAlerte qui étendra la future classe BoiteModale. Ces deux classes seront rangées - empaquetées - dans le répertoire Interface/BoiteModale. C'est cette hiérarchie de dossier qui détermine le nom du paquetage, ici : Interface.BoitesModales.
On sait tout, yapuka…

Créons les classes avec seulement un trace dans le constructeur :

package Interface.BoitesModales {
      import flash.display.MovieClip;
 
      public class BoitesModales extends MovieClip {
            public function BoiteModale ():void {
               trace("passage constructeur BoiteModale ");
            }
      }
}

package Interface.BoitesModales {
 
      public class BoiteAlerte extends BoitesModales {
            public function BoiteAlerte():void {
               trace("passage constructeur BoiteAlerte");
            }
      }
}

La seule chose nouvelle c'est le nom du paquetage : pour “atteindre” la classe BoiteAlerte on utilisera donc la syntaxe Interface.BoiteModale.BoiteAlerte, au même titre qu'on utilise par expemple flash.display.MovieClip quand il s'agit de la classe MovieClip.

Il ne reste plus qu'à associer Interface.BoiteModale.BoiteAlerte et le symbole Mv_BoiteAlerte via le champ Classe de base.

Si ce n'est que, par défaut, le compilateur va chercher la classe ou le paquetage dans le même répertoire que le .fla, où il ne le trouve pas, et pour cause on l'a rangé dans le répertoire Mezoutils…

Il faut donc préciser dans les préférences de publication (menu Fichier) le chemin vers ce répertoire Mezoutils :

Et voilà :

Vérifier

Cette fois c'est bon, on va pouvoir avancer.
Pour être certains que le compilateur retrouve ses petits, testons l'histoire d'une simple ligne dans le fla :

var bteAlerte:Mv_BoiteAlerte=new Mv_BoiteAlerte();

passage constructeur BoiteModale 
passage constructeur BoiteAlerte

Je suis bien d'accord, vérifier que ça fonctionne juste en s'extasiant sur quelques lignes dans le panneau de sortie ce n'est toujours pas plus satisfaisant. Temporairement, pour voir ce qu'on fait, on va donc ajouter l'instance de bteAlerte à la liste d'affichage avec un addChild dans le .fla.

Puisque l'objectif est de fabriquer une boite modale qui en s'affichant proscrira l'accès aux autres éléments de l'animation, profitons en pour ajouter sur la scène quelques boutons et un champ de saisie.

var bteAlerte:Mv_BoiteAlerte=new Mv_BoiteAlerte();
addChild(bteAlerte);

Pour l'instant ça ne proscrit rien du tout, c'est le contraire qui aurait été étonnant on n'a rien fait pour

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La classe mère

Il s'agit, pour toutes les boites modales, de fabriquer - quoiqu'il arrive - un écran (une forme) aux dimensions de la scène et de l'ajouter. Ça concerne donc la classe BoiteModale dont dériveront (hériteront) toutes les autres, et ça se passe dans le constructeur.
Avant même de se lancer dans les grandes manœuvres, une chose est sûre : pour dessiner un truc aux dimensions de la scène, il faut les avoir, les dimensions. Trop facile ! C'est stage.stageWidth, et stage.stageHeight, clame Ronchon dans un élan de bonne humeur retrouvée.
Bonne humeur qui ne dure pas car justement, si on teste stage.width dans le constructeur on est désappointé : l'éternelle erreur 1009 (Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul) est renvoyée.

propriétés stage, root, et parent d'une instance

Regardons ça de plus près, c'est qui le nul ?

public function BoiteModale():void {
	trace("passage constructeur BoiteModale "+this);
	trace("scène "+stage)
}

passage constructeur BoiteModale [object Mv_BoiteAlerte]
scène null
passage constructeur BoiteAlerte

Et bien c'est la scène semble-t-il… Comment ça ??
En fait c'est logique, souvenons nous : le constructeur est invoqué à la création de l'instance, avant donc que la-dite instance soit ajoutée. D'ailleurs, le premier test on l'a fait sans même invoquer un addChild. var monObjet:MaClasse = new MaClasse() hop ! ça invoque le constructeur, et à ce moment là l'objet n'étant pas dans liste d'affichage les propriétés, parent, root, et stage renvoient tout naturellement null…
Zutalors, comment faire ?
Tout bêtement en attendant que l'instance soit ajoutée pour utiliser ses propriétés parent, root ou stage. Dès qu'une instance est ajoutée, l'événement ADDED_TO_STAGE est diffusé (l'instance crie “Ayé ! Je suis dans la liste d'affichage”). Pour nous il suffit donc d'écouter cet événement (importez le package flash.events.Event)

	import flash.events.Event;

public function BoiteModale():void {
	trace("passage constructeur BoiteModale "+this);
	this.addEventListener(Event.ADDED_TO_STAGE,QdAjouté);
}
 
private function QdAjouté(e:Event) {
	trace("qd ajouté ");
	trace(stage.stageWidth);
}

passage constructeur BoiteModale [object Mv_BoiteAlerte]
passage constructeur BoiteAlerte
qd ajouté 
500

Notez bien qui est this

Dessiner dans une forme

Pour dessiner dans une forme il faut d'abord créer une forme :

var uneForme:Shape=new Shape  ;

… puis utiliser sa propriété graphics qui permet d'avoir recours à un ensemble de méthodes pour dessiner des formes vectorielles. Par exemple pour dessiner un rectangle rouge et opaque (alpha=1) de 300 sur 100 (largeur/hauteur) on écrirait :

// remplissage rouge opaque
uneForme.graphics.beginFill(0xFF0000,1);
// dessiner un rectangle en 0/0 300 large, 100 haut
uneForme.graphics.drawRect(0,0,300,100);

Appliqué à ce qui nous préoccupe ça donne :

• Créer (et ajouter) une forme dans le constructeur, une bonne fois pour toutes.
• Dessiner dans la forme une fois l'instance ajoutée à la liste d'affichage pour avoir accès aux dimensions de scène.

Puisque la forme destinée à faire écran sera crée dans une fonction et utilisée (pour y dessiner) dans une autre, il nous faut ne variable globale privée, nommons la _ecran.

	public class BoiteModale extends MovieClip {
		private var _ecran:Shape;
 
         [...]

		public function BoiteModale():void {
                        // a l'initialisation, créer la forme
			_ecran=new Shape();
                        // ajouter _ecran à liste d'affichage (tout en bas)
			addChildAt(_ecran,0);
                        // attendre que this soit ajouté sur la scène 
                        // pour avoir accès à ses dimensions  
			this.addEventListener(Event.ADDED_TO_STAGE,qdAjouté);
		}

On a bien pris soin d'utiliser addChildAt avec une profondeur 0, un addChild (tout court) aurait placé la forme au dessus de tout le reste, et proscrit aussi l'accès aux boutons de la boite…

private function QdAjouté(e:Event) {
	trace("qd ajouté ");
	trace(stage.stageWidth);
        // gris en alpha 0.1
	ecran.graphics.beginFill(0x333333,0.1);
	ecran.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);			
}

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Initialiser et modifier les caractéristiques de l'écran

Au point où on en est, autant permettre à l'utilisateur de définir la couleur et l'opacité (l'alpha) de l'écran. Il suffit de sortir deux variables.

Soit on les déclare publiques et globales, et hop le tour est joué ; soit on décide d'utiliser des accesseurs…

C'est le cas de conscience typique.
Définir des accesseurs qui ne feront rien d'autres que modifier la valeur d'une variable globale (certes privée)…
Mouais…
Arguer que oui mais ça permettrait de modifier la couleur de l'écran après l'affichage…
Je réponds à nouveau d'un borborygme pas convaincu. Ça n'a pas grand sens, ce sont des boites destinées à être affichées pour prévenir de toute autre action utilisateur que celle qu'on attend… Quand va-t-on avoir besoin de modifier la couleur ou l'alpha, ou ce qu'on voudra, après l'affichage de la dite boite, pendant que l'utilisateur n'a d'autre recours que cliquer sur le bouton OK ?
En plus, pour ceux qui s'y essaieront quand même (si, si, c'est de bonne guerre), il y aura des surprises, pas incontournables, mais des surprises. Alors écrire une usine pour offrir une fonctionnalité inutile, sur ce coup là, c'est sans moi

Donc deux globales publiques !

	public class BoiteModale extends MovieClip {
 
		public var coulEcran:uint=0x333333;
		public var alphaEcran:Number=0.1;
 
		private var _ecran:Shape;
 
                [...]

		private function qdAjouté(e:Event) {
			_ecran.graphics.beginFill(coulEcran,alphaEcran);
			_ecran.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
		}

Appel depuis le fla :

var bteAlerte:Mv_BoiteAlerte=new Mv_BoiteAlerte();
bteAlerte.coulEcran=0xFF0000;
bteAlerte.alphaEcran=0.5
addChild(bteAlerte);

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Déterminer les coordonnées de la boite

Cette fois ça suffit, notre boite de dialogue toute coincée là haut, ça ne peut plus durer.
Il faut pouvoir disposer la boite de dialogue là où on veut sur la scène à l'aide des propriétés x et y :

bteAlerte.y=50;

Si ce n'est qu'en l'état ça descend tout en 50. La boite et l'écran.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Normal.
L'écran est ajouté à l'instance - via la classe mère - il est déplacé avec elle

reprenons le processus :
1) on crée une instance (new Mv_Alerte())
2) on invoque affiche –> passage dans qdAjouté –> dessin d'un rectangle dans de _ecran en 0/0 :

_ecran.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);

Dans le cas qui nous occupe il faudrait qu'il soit créé en 0/-50, pour compenser le décalage vertical. - 50, c'est -y… Pour x c'est même combat… Modifions donc :

		private function qdAjouté(e:Event) {
			_ecran.graphics.clear();
			_ecran.graphics.beginFill(coulEcran,alphaEcran);
                        // répercuter le décalage x/y
			_ecran.graphics.drawRect(-x,-y,stage.stageWidth,stage.stageHeight);
		}

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

C'est un bon début. Maintenant on va faire en sorte que la boite s'auto-affiche : on veut pouvoir l'utiliser comme suit :

var bteAlerte:Mv_BoiteAlerte=new Mv_BoiteAlerte();
bteAlerte.affiche();

… ou presque… Bon d'accord on va rencontrer deux trois subtilités… Et, je sais pas vous, mais moi je ferais bien une pause, alors on se retrouve là tout de suite après ?

Mode7

papwal — Tue, 03 Apr 2012 22:29:39 +0200

EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.
Merci de votre patience.

Discussion:

( désolé mais il manque l'option discussion dans le wiki alors en attendant je la crée ici )

J'ai relevé deux erreurs dans cet article:

1/ Une erreur de vocabulaire: confusion entre mode 7 et z-mapping. (pourtant c'est bien expliqué dans wikipedia)

Ce qu'on appelait le “mode7” sur la console snes c'était l'équivalent de la classe Matrix() dans flash, c'est à dire qu'un des calques de tuiles - contrairement à ses petits camarades qui n'étaient rendus que selon un vecteur de scrolling x/y - pouvait être rendu avec une matrice à 6 chiffres qui permet de faire des zoom, des rotations, et des inclinaisons

Pourquoi donc on appelait ça “mode7” et pas “mode6” alors qu'il y'a 6 chiffres dans la matrice ? Parce qu'on passait à la carte vidéo une 7ème variable qui servait à renseigner un index d'effet spécial (miroir, etc).

Bref cette appelation “mode7” était propre à la supernes et ne concerne pas les jeux micro.

Ensuite il y'avait un deuxième effet spécial propre à ces machines c'était le rendu par scanline, c'est ce qui permettait de faire onduler les fonds aquatiques par exemple, pour chaque scanline on pouvait choisir la valeur de scrolling x/y. Et pour rendre le z-mapping de mariokart, on utilisait le calque de tuiles mode 7 et pour chaque scanline on modifiait la matrice 2d à 6 chiffres.

Voilà… puisse cet éclaircissement vous aider à trouver les bons calculs.

2/ une erreur de méthode: lire un bitmap plutôt qu'un tableau pour la collisionmap

Ca ne change rien en fait, un bitmap étant déjà un tableau.

Cependant, si l'on recherche la rapidité maximale d'exécution du code, il faut lire un Vector<int> à une dimension qui code une grille 2d avec la formule suivante: pixel = [ x + ( y « indexdepuissance2correspondantalalargeur ) ];

Pour lire les collisions ça ne va pas changer grand chose au niveau des perfs, mais si l'on souhaite rendre la zmap pixel par pixel ça va faire une grosse différence de vitesse d'exécution.

Voilà… bon code.

Mode7

Menu général

Préface

Vous avez sans doute déjà entendu parler de Mode7 quelque part, et si ce n’est pas le cas vous en avez forcément au moins déjà vu.

Il s’agit d’une technique qui a pris naissance à la fin des années 80 et qui permet d'obtenir une vue en perspective à partir d’une surface en deux dimensions.

Si aujourd’hui des noms comme F-Zéro n’évoquent plus rien à la jeune génération, il faudrait avoir vécu dans une grotte sur la lune ces 20 dernières années pour ne pas avoir entendu parler de Mario Kart.

Le Mode 7 est une toute première approche de la 3D qui aborde des notions de projection, de caméra, de plan et de transformations dans l’espace à trois dimensions. C’est un moyen rapide de prendre en main des processus communs aux applications 3D et de monter des jeux ou des effets efficaces.

Il y deux grandes notions qu’il est impératif de retenir lorsque l’on veut aborder le Mode 7, les opérations géométriques appliquées sur une surface à deux dimensions (communément appelée un plan) et le principe de la projection.

Mais commençons par nous rafraîchir la mémoire.

Définition

Voyons ce que dit Wikipedia (http://fr.wikipedia.org/wiki/Mode_7)

Le Mode 7, apparu initialement sur la console de jeu Super Nintendo, est un mode graphique d'application de texture qui permet à un arrière-plan d'être pivoté et redimensionné par des procédés de rotation et de zoom. En modifiant à chaque ligne horizontale (Scanline) l'échelle et l'angle de ce plan, un effet de perspective peut être créé, transformant ainsi le plan en un sol incliné et texturé.

L'effet de Mode 7 est généralement utilisé sur des systèmes avec de fortes capacités 2D mais pas de gestion de la 3D car il permet en fait de simuler une impression de profondeur en utilisant uniquement des fonctions 2D. Parmi les jeux de la Super NES utilisant le Mode 7, on trouve F-Zero et Super Mario Kart, tout deux ayant été par la suite adaptés sur Game Boy Advance, tout en gardant cet effet, rendu possible par le circuit 2D de la console.

De nombreux jeux PC, notamment Wacky Wheels, ont un effet de Mode 7 généré entièrement de manière logicielle, les cartes VGA de l'époque ne comprenant pas de tel circuit d'affichage 2D avancé permettant la rotation et le zoom.

Dans la suite de ce dossier nous allons essayer de détailler un peu ce procédé, d'abord théoriquement, puis par une petite mise en application, mais tout commence toujours par une histoire.

Un peu d’histoire

En 1990 naît la Super Nintendo, console 16 bits digne successeur de la Nintendo Entertainment System. Outre les améliorations habituelles qui sont inhérentes aux nouvelles technologies, la SNES a été la première console à posséder du hardware dédié aux graphismes permettant des transformations linéaires (comme la rotation et le changement d’échelle) sur des fonds et des sprites.

« F-Zero »

On a coutume de dire que c’est Super Mario Kart qui est l’initiateur du Mode 7, mais en fait ce jeu est simplement plus connu que le véritable papa du Mode 7 qu’est F-Zero. Pour la première fois le circuit n’est plus vu de haut mais à l’horizontale, les jeux de circuit prennent alors leur envol.

« super Mario Kart »

C’est le jeu qui reste dans toutes les mémoires, il a marqué à tel point les esprits qu’on lui attribue souvent, à tort, la paternité du Mode 7.

« Pilotwings »

Dans PilotWings le joueur est aux commandes d’un simulateur de vol et de saut en parachute. Les mouvements dans les 3 dimensions sont permis, ce jeu est souvent considéré comme une démo technique des possibilités du Mode 7.

« Super Castlevania IV »

Cette fois on se sert du Mode 7 pour afficher des fonds animés, par exemple dans l’image d’illustration un tunnel. C’est une autre manière d’utiliser une projection d’un plan sur lequel on ajoute à présent des déformations.

Page suivante > « 02-Définir le monde »

Fabriquer un coloriage : couleur et ColorPicker

Nataly — Thu, 15 Mar 2012 15:18:44 +0200

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Fabriquer un coloriage : couleur et ColorPicker

Une carte à colorier c'est une vingtaine de lignes de code, pas plus, et pourtant ça en arrête plus d'un. Probablement parce que ça met en œuvre des classes d'utilité ponctuelle et une vague ruse quant à l'écoute d'événement…
Je dis ruse pour vous allécher, mais il s'agit d'une technique tout à fait conventionnelle

Ce tuto se propose donc avec l'alibi d'une carte à colorier de

• mettre en œuvre la classe ColorTransform
• faire connaissance avec le composant ColorPicker
• illustrer l'intérêt de la phase de capture dans l'écoute d'événements
• accessoirement apporter réponse à une question souvent croisée sur le forum : comment fabriquer un coloriage…

Puisqu'il s'agit ici de couleur, autant que RVB vous dise quelque chose et que vous sachiez reconnaitre et assigner une couleur via l'environnement de création Flash.
Pour le reste une pratique courante de AS3 suffira : syntaxe, événements, variables… rien que de très basique

POU¹⁾ :
Affin d'alléger le discours j'aurai recours à l'abus de langage qui consiste à parler de clip en lieu et place d'instance de symbole, mais vous n'êtes pas dupes : dans la bibliothèque, des symboles ; sur l'animation, des instances (ou occurrences). Ce sont ces instances qu'on manipule et que j'appelle clip quand il s'agit d'une occurrence de symbole de type Clip.
Conventions d'écriture :
Je précise entre crochets les raccourcis clavier. Utilisateurs de PC remplacez cmd par ctrl.

La classe ColorTransform, rappels

Utiliser la classe ColorTransform c'est, vous le savez, l'équivalent codé de ce qu'on obtient en manipulant la liste couleur du panneau propriétés.

Et dans l'exemple qui nous préoccupe, c'est l'option Teinte que nous aurions manipulée, puisque il s'agit d'appliquer une couleur unie à chacun des clips composant l'image.

Pour changer la couleur d'un pétale - par exemple - depuis l'environnement création de Flash, on sélectionnerait le clip et via le panneau propriétés on appliquerait une teinte à 100%.

Appliquer une teinte

Appliquer une teinte, en code, c'est :
• fabriquer une teinte avec la classe ColorTransform et sa propriété color
• puis l'appliquer en passant par les propriétés transform et colorTransform.

Par exemple, en imaginant un clip nommé fleur, pour lui appliquer une teinte unie verte on écrirait :

// un Objet ColorTransform
var coulVert:ColorTransform= new ColorTransform();
coulVert.color=0x00FF00; // on précise une couleur 
// on applique la couleur
fleur.transform.colorTransform=coulVert;

Restituer la teinte d'origine

Retrouver la teinte d'origine - rien donc - c'est appliquer, toujours via transform.colorTransform, une “non-teinte” :

// un Objet colorTransform "vierge"
var coulSans:ColorTransform= new ColorTransform();
// on applique la non couleur
fleur.transform.colorTransform=coulSans;

Pas plus, pas moins. Ce n'est pas plus compliqué que ça

Le composant ColorPicker

Nous approchons de l'objectif à grands pas. S'il s'agissait d'appliquer la toujours même couleur aux différents clips composant le coloriage, on y serait déjà.
Reste à proposer une palette de couleurs.

Flash, dans sa grande générosité nous fournit le composant dédié : ColorPicker.

• Affichez le panneau Composants (Menu Fenêtres ou [cmd-F7])
• Glissez le ColorPicker sur la scène, le symbole correspondant sera automatiquement ajouté à la bibliothèque.
• Nommez l'instance comme il vous convient (pour moi ce sera cp comme colorPicker ).

Nous voilà prêts à faire connaissance avec cette petite merveille de composant !

Propriété selectedColor

La première des choses qu'on attend d'une palette c'est connaitre le choix de l'utilisateur…
En français on parlerait de la couleur sélectionnée, on trouve donc sans surprise une propriété selectedColor en lecture écriture. On va pouvoir aussi bien lire la couleur sélectionnée par l'utilisateur que forcer le composant à afficher une couleur de notre choix, ce qui est utile à l'initialisation si on souhaite que soit affiché autre-chose que le noir par défaut.

Vous pouvez régler cette couleur de départ, directement via l'interface en utilisant l'inspecteur de composants.
Sous CS3 vous devez passer par le menu Fenêtre. Sous CS4 et suivants un bouton vous y donne accès directement depuis le panneau propriétés :

Initialiser le composant en code nous donnerait donc (pour rouge) :

cp.selectedColor=0xFF0000;

Ce qui est d'utilité plus courante, c'est lire la couleur sélectionnée.

Pour appliquer à un clip une teinte unie telle que choisie via un un composant ColorPicker, il suffit donc de valoriser la propriété color d'un objet ColorTransform avec ce que renvoie la propriété selectedColor du composant :

// un Objet ColorTransform
var coul_c:ColorTransform= new ColorTransform();
//lire la couleur sélectionnée
coul_c.color=cp.selectedColor;
// appliquer la couleur
fleur.transform.colorTransform=coulVert;

L'événement CHANGE

Le plus souvent on utilise la couleur choisie aussitôt la sélection effectuée. Il s'agit donc d'écouter l'événement idoine. C'est l'événement CHANGE de la classe ColorPickerEvent.

// importation requise
import fl.events.ColorPickerEvent;
 
cp.addEventListener(ColorPickerEvent.CHANGE, appliqueModif);
function appliqueModif(e:ColorPickerEvent) {
 
	trace("Valeur hexa : "+e.target.hexValue);
	trace("Valeur  (uint) "+ e.color);
 
   var coul_c:ColorTransform= new ColorTransform();
   coul_c.color=e.target.selectedColor;
   fleur.transform.colorTransform=coul_c;
}

Notez au passage la propriété hexValue qui vous donne la valeur hexadécimale de la couleur sélectionnée du composant.

Ne confondez pas la propriété hexValue du composant et la propriété color de l'événement, qui elle, renvoie la couleur en uint

Autres méthodes et propriétés parfois utiles

Histoire de finir de faire le tour du propriétaire, sachez que vous pouvez modifier les dimensions du composant via la méthode setSize (héritée de UIComposant) qui admet deux paramètres : largeur, hauteur. A votre disposition aussi les width et height qui nous sont familiers

cp.setSize(cp.width+=10,cp.height+=10);

Vous pouvez afficher ou non le champ texte du composant qui donne la valeur hexadécimale de la couleur sélectionnée. C'est une propriété booléenne : showTextField.

// Le champ texte n'est pas affiché
cp.showTextField = false;

Enfin, sachez que vous pouvez afficher ou masquer la palette des couleur à l'aide des méthodes open et close.

// le composant est affiché ouvert avec une largeur de 100 et une hauteur de 50
cp.setSize(100,50);
cp.selectedColor=0xFF0000;
cp.open();

Une palette aux couleurs personnalisée

Par défaut ColorPicker propose 216 couleurs mais on peut faire ce qui nous chante (dans la limite de 1024 couleurs).
C'est la propriété colors qui permet de définir un choix de couleurs personnalisée.

Attention colors avec un s !
Ne confondez pas avec color - sans s - propriété de l'objet ColorTransform

colors renvoie et définit un tableau des couleurs affichées par le composant. Pour proposer seulement rouge vert et bleu on écrirait par exemple :

cp.colors=[0xFF0000,0x00FF00,0x0000FF];

Pour afficher cette palette ouverte :

var lesCouleurs:Array=[0xFF0000,0x00FF00,0x0000FF]
cp.colors=lesCouleurs;
cp.showTextField=false;
cp.setSize(20,50);
cp.open();

Pour ajouter une ou plusieurs couleurs à la palette existante utilisez tout bonnement la méthode push.

cp.colors.push(0xCCCCCC);

cp.colors=cp.colors.push(0xAAAAAA,0xCCCCCC,0xEEEEEE);

De toutes façons puisque colors renvoie un tableau, si vous savez manipuler un tableau, vous en ferez ce que vous voudrez

Monsieur Plus

Si vous preniez goût à l'utilisation de ce composant, sachez qu'on peut intervenir sur sur son aspect (dimensions des cases de couleur et autre nombre de colonnes de la palette) via la méthode setStyle.
Vous en trouverez la liste à l'entrée Style.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
 
// un dictionnaire pour stocker les correspondances valeur/nom
var corres:Dictionary= new Dictionary();
corres[0xE67E30] = "Abricot";
corres[0xAD390E] = "Aquilain";
corres[0xAE642D] = "Baillet";
 
 
var cp:ColorPicker = new ColorPicker  ;
cp.x = cp.y = 10;
 
cp.setSize(30,50); // dimensions du bouton
cp.colors = [0xE67E30,0xAD390E,0xAE642D];// trois couleurs
cp.selectedColor = 0xE67E30;             // couleur de départ
cp.setStyle("swatchWidth", 30);          // largeur des nuanciers
cp.setStyle("swatchHeight", 50);         // hauteur des nuanciers      
 
 
cp.addEventListener(Event.OPEN, init);   // écrire la couleur d'init ds le chp texte
cp.addEventListener(ColorPickerEvent.ITEM_ROLL_OVER,majChamp); // afficher le nom de la couleur
 
addChild(cp);
 
// - - - - - Rappels - - - - - - - - - - - -
function majChamp(ce:ColorPickerEvent) {
	ce.target.textField.text = corres[ce.color];
}
 
function init(e:Event) {
// une fois seulement
	ColorPicker(e.target).textField.text = "Abricot";
// suprimer l'écouteur
	ColorPicker(e.target).removeEventListener(Event.OPEN, init);
}

A titre de démo et sans plus de détail…

Coloriage, c'est parti !

Cette fois on y est, vous avez tout ce qu'il faut pour réaliser le coloriage proposé.

Construction graphique

Le “dessin” lui même est un bête clip composé de plusieurs occurrences de symboles que j'utilise comme les gommettes de mon enfance. Vous pouvez être plus courageux et vous déchirer d'un vrai beau dessin, la seule chose qui importe c'est que chaque élément coloriable soit un clip (dans l'idée de lui “appliquer une teinte” via colorTransform).

Vous l'avez constaté : le propre de la “teinte” - propriété color d'un objet ColorTransform - c'est de tout barbouiller d'une couche unie, plus de nuances ni de contours. Le moyen de contourner le problème pour, dans l'exemple qui nous occupe, conserver un liseré noir autour des pétales des fleurs c'est tout bonnement de tricher d'un ou plusieurs calque(s) dédié(s) qui ne porteront que des bordures et qui sont “par dessus” les objets colorisés.

Ne vous compliquez pas trop pour obtenir ce résultat :
• sélectionner l'ensemble des clips dont on veut conserver le contour,
• copier [cmd-C],
• coller en place sur le calque dédié [cmd-maj-V],
• tout sélectionner [cmd-A],
• séparer [cmd-B],
• sélectionner et virer les remplissages (pff… pas de raccourcis /),

Code

Le code, on est d'accord que c'est tout benêt dans le principe :
On écoute le clic (MouseEvent.CLICK) sur chaque clip à colorier et on lui applique la couleur choisie dans la palette.

EnooOOoorme soupir dans l'assistance : “bon sang de bon d'là ! Il faut donc nommer chacun des clips et leur ajouter un écouteur ? Mais c'est du Stakhanovisme !”

Non ! Ne dressez pas un piquet de grève tout de suite Il y a bien plus malin.
Vous vous souvenez de la différence entre ''target'' et ''currentTarget'' ?

Ici, l'idée c'est d'écouter sur le clip contenant (je l'ai nommé tableau ds le code reproduit) et de traiter non pas currentTarget (le “tableau” lui même) mais target (chacun des symboles le composant).

tableau.addEventListener(MouseEvent.CLICK, qdClic);
 
function qdClic(me:MouseEvent):void {
	trace(me.currentTarget.name);
	trace(me.target.name);
	// ici ce n'est pas le clip tableau dont on modifie la couleur
	// mais les clips dont il est constitué
	// on écoute donc target et non currentTarget
	var coul:ColorTransform= new ColorTransform();
	coul.color = cp.selectedColor;
	me.target.transform.colorTransform = coul;
}

Tout irait bien si d'aucuns ne s'avisaient d'ajouter un joli cadre au symbole lui même - comme sur la démo d'intro quoi…
Et là, catastrophe… Quand on clique sur ce cadre, c'est tout le tableau qui est barbouillé de la couleur sélectionnée, on se retrouve avec un splendide rectangle uni O.o

Normal, aussi longtemps que le symbole n'était composé que d'autres symboles (le fond lui même est un symbole), target était immanquablement un enfant du “tableau”. Maintenant qu'il y a un dessin qui déborde du fond, quand on clique, target c'est le clip tableau, et du coup… Ça ne fait plus ce qu'on veut…

Nous voici poussés dans nos dernier retranchement c'est le moment de dégoupiller la phase de capture, et de profiter de l'exemple pour se mettre les idées aux clair.

tableau.addEventListener(MouseEvent.CLICK, qdClic,true);

Ouf ! On s'en est bien sortis, sur ce coup là. Ne reste plus qu'à régler le sort du bouton Effacer.

Effacer

Un bout de code vaudra mieux qu'un long discours :

btEfface.addEventListener(MouseEvent.CLICK,efface);
function efface(me:MouseEvent):void {
	//var sansCoul:ColorTransform= new ColorTransform();
	var max:int = tableau.numChildren;
	for (var i:int=0; i<max; i++) {
 
		//tableau.getChildAt(i).transform.colorTransform = sansCoul;
		// sur ce coup là, on peut faire l'économie d'une variable, le code est tout aussi lisible
		tableau.getChildAt(i).transform.colorTransform = new ColorTransform();
 
	}
}

ColorPicker pour Flex

Et voilà, c'en est fini du coloriage.
Si vous utilisez Flex vous y retrouverez ce (quasi) même composant, et Tannoy a traduit la doc pour nous _o_

Il ne reste plus qu'à vous dire à bientôt pour d'autres aventures

Les sources

CS3
CS4

¹⁾ Précautions Oratoires d'Usage

Communautés PAO

Pierre GIRARD — Fri, 09 Mar 2012 16:47:10 +0200

Communautés PAO

Francophones

Forums Mediabox : Vous pouvez accèder à nos forums en cliquant sur ce lien.
cfsl : Café Salé
1dcafe: 1DCafé
colorimetrie : Forum sur la Colorimétrie
lalogotheque : Forum LaLogothèque

Anglophones

24-7media : 24-7 Media Forum

Ajouter et supprimer des clips dynamiquement

Nataly — Tue, 21 Feb 2012 18:08:28 +0200

• Variables, fonctions, syntaxe
• Objets, méthodes, propriétés…
• Clics et événements souris sur les boutons et les clips
• Champs texte et objet String
• Structures de contrôle alternatives : if
• Manipuler un movieClip
• Structures de contrôle alternatives : switch
• Structures de contrôle répétitives : for - while
• Liste d'affichage, imbrication et profondeur des objets
• Liste d'affichage, gestion dynamique des objets (ici)
• Les tableaux

EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.

Ajouter et supprimer des clips dynamiquement

Parfait ! On sait maintenant manipuler les enfants d'un clip (et de n'importe quel objet de type DisplayConteneur \o/) reste à pouvoir les supprimer ou en ajouter et on va commencer à pouvoir jouer, vraiment…

Ajouter une instance de symbole à un clip en cours d'exécution du code - dynamiquement donc, selon la terminologie en vigueur - c'est l'équivalent codé de glisser un symbole, “à la main”, depuis la bibliothèque jusqu'au clip ouvert dans le panneau scène.

J'ai dit “glisser un symbole” pour aller vite, mais on est d'accord que les symboles de bibliothèque ne sont que des moules - en quelque sorte - à partir desquels on fabrique autant de clips semblables qu'il nous chante.
Dans le panneau Propriétés, ces clips sont appelés de façon générique occurrence, c'est absolument synonyme de instance.

Ajouter un enfant : addChild

Avant d'ajouter un enfant à un clip, encore faut-il que cet enfant existe… Ben oui, pardon d'énoncer des évidences [pas taper].

Pour ajouter une instance de symbole on va donc commencer par la créer puis, quand ça nous dira, on l'ajoutera.
J'insiste dès tout de suite sur ce non-détail, parce qu'il est important d'avoir en tête qu'un objet existant n'est pas forcément affiché ¹⁾. Inversement un objet sorti de la liste d'affichage n'est pas pour autant supprimé… Eh oui On y reviendra…

Exporter pour ActionScript

Pour créer, dynamiquement, une instance de symbole il faut avoir préparé le terrain via le panneau propriété du symbole en question, en cochant la case 'Exporter pour ActionScript'

Voilà, mieux que Jourdain, on vient de fabriquer une classe qui hérite de MovieClip. Rappelez-vous l'arbre d'héritage des objets d'affichage.
Quand on coche la fameuse case, Flash tout seul comme un grand et sans rien nous en dire de plus, fabrique en arrière boutique une classe portant le nom saisi dans le champ Classe qui hérite de la classe MovieClip (qui elle même appartient à la grande famille des objets d'affichage de flash : flash.displayObject).

Créer l'instance : new

Créer une instance de n'importe quelle classe ça se fait toujours pareil (c'est ce qui est reposant avec le code, quand on a compris un principe on le décline pour tout ) :

• 1) Déclarer et typer la variable qui va représenter l'objet :

var nomDeLinstance:NomDeLaClasse;

• 2) Valoriser la variable d'un nouvel objet.
C'est le mot clef new qui permet de générer un nouvel objet, suivit du nom de la classe dont l'objet est issu :

nomDeLinstance = new NomDeLaClasse();

Souvent on écrit tout sur la même ligne, c'est ce qu'on va faire avec notre cercle :

var leCercle:Mv_Cercle= new Mv_Cercle();

A ce stade, si on teste le fichier, apparemment rien ne se passe. Ne vous y laissez pas prendre : l'instance a bien été créée, seulement elle n'est pas encore affichée.
Le clip représenté par la variable leCercle existe pour flash, il “vit” dans les limbes mais on ne le voit pas parce qu'il n'a pas encore été ajouté à la liste d'affichage.

Pour les St Thomas

Et si le dire, le répéter, l'affirmer ne suffit pas à vous convaincre (ce que je comprends bien ), alors tentez l'expérience suivante : fabriquez un autre symbole qui joue un son. Ne vous compliquez pas : une forme répétée sur quelques images (histoire d'y voir quelque chose le cas échéant) et un son très court joué sur une image quelconque, ça par exemple ('pô pu m'empêcher de jouer avec l'outil déco).

Si vous en posez une instance sur la scène (et que vous testez) ça fait du bruit au rythme de la boucle.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Très bien, supprimons cette instance, c'était juste pour être sûrs - et créons une instance en code, comme de normal ²⁾ :

var c:Mv_Feu= new Mv_Feu();

Quand on teste, on ne voit pas la boule de feu mais… on l'entend ! Preuve est faite

Ajouter l'instance : addChild, addChildAt

Pour ajouter une instance à la liste d'affichage d'un conteneur (DisplayObjectContener), on utilise sa méthode addChild :

unDisplayObjectContener.addChild(unObjetDaffichage);

Appliqué au symbole Mv_Cercle, ça donnera donc pour en ajouter une instance sur le scénario principal : (code complet)

var leCercle:Mv_Cercle= new Mv_Cercle();
leCercle.x=100;// tant qu'à faire, autant le disposer où on veut tout de suite
leCercle.y= 50;
this.addChild(leCercle);

Ici, je valorise les propriétés x et y avant d'ajouter la nouvelle instance, on aurait pu le faire après sans que ça change quoi que ce soit, mais profitez en pour vous convaincre du fait que, affiché ou non, un objet d'affichage expose toutes ses propriétés³⁾.

Vous l'avez noté, la méthode addChild ajoute un enfant au plus haut niveau disponible du conteneur ce qui revient à dire au premier plan. Vous pouvez choisir d'ajouter un enfant dans un conteneur au niveau de profondeur de votre choix, il faut alors avoir recours à la méthode addChildAt, en lui passant un objet d'affichage et une profondeur :

unDisplayObjectContener.addChild(unObjetDaffichage, niveauProfondeur);

Par exemple le code ci-dessous ajoute une instance du symbole Mv_Arbre en arrière plan d'un clip nommé foret :

var unArbre:Mv_Arbre= new Mv_Arbre()
unArbre.x=… // coordonnée x
unArbre.y=… // coordonnée y
foret.addChildAt(unArbre, 0);

Pour vous dégourdir les doigts

Dans la série qui ne sert à rien, facile :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Indices :
N'allez pas chercher des choses qu'on n'aurait pas vues encore⁴⁾, il suffit ici d'écouter, sur la scène, les événements souris. On a vu ensemble les célèbres CLICK et autres ROLL_OVER, mais n'hésitez pas à vous reporter à la doc (ou au panneau action de l'environnement auteur) pour voir si il n'y en aurait pas d'autres tout aussi intéressants⁵⁾.

Au nombre des propriétés bien utiles des DisplayObjects (donc du scénario principal, donc de 'this') il y a mouseX et mouseY qui donnent les coordonnées du pointeur sur l'objet considéré.

Dans la même série (presque) aussi facile :

Si vous savez ajouter un cercle à l'endroit où se trouve la souris, vous savez ajouter un cercle qui change de couleur… Sans se compliquer, avec ce qu'on sait…
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Indices :
Un clip peut comporter plusieurs images (c'est même l'intérêt ) et on sait envoyer la tête de lecture où on veut.
Une variable compteur (int) pourrait très bien stocker un numéro d'image courante…

Créer un clip vide

Non, ce n'est pas absurde de créer un clip vide, c'est même souvent bien utile pour gérer l'ajout et la suppression dynamique d'instances. En effet, il est bien plus simple de supprimer un conteneur et tous ses enfants que supprimer, une par une, une armée d'instances.
Vous voulez distribuer des cartes sur un plateau (des pions, des personnages, des éléments de décors…) et les supprimer à chaque nouvelle partie ? Plutôt qu'identifier une par une les instances concernées et leur appliquer la méthode qui va bien (on y arrive, juste après) il est franchement plus simple d'avoir pris le temps de fabriquer un conteneur dédié et de le supprimer avec tous ses enfants au moment opportun.
Créer un conteneur dédié, c'est fabriquer une instance de clip vide et l'ajouter (où bon nous semblera).

Un clip vide, c'est un clip “tout court”, donc une instance de l'objet (classe) MovieClip, et vous savez déjà vous y prendre : déclarer la variable, la typer, la valoriser d'un nouvel objet à l'aide du mot clé new, puis l'ajouter :

var plateau:MovieClip= new MovieClip(); // une instance de MovieClip (forcément vide ;))
addChild(plateau); // équivalent à this.addChild(plateau)

Supprimer un enfant : removeChild

Pas utile de ménager plus longtemps un suspens insoutenable : pour supprimer (retirer) une instance de l'affichage on utilise la méthode removeChild appliquée à son conteneur⁶⁾ :

leConteneur.removeChild(unEnfant);

Attention :
removeChild ne supprime pas une instance, au sens où l'objet n'est pas détruit, il se contente de l'ôter de l'affichage.

Si vous voulez vous en convaincre, ressortez la boule-de-feu-qui-fait-du-bruit et vérifiez que même une fois un removeChild appliqué à son contenant, on l'entend toujours exploser (même si on ne la voit plus)

Oui, mais alors… Comment supprimer vraiment une instance ?
On ne peut pas.
Voilà, c'est comme ça. Il faut laisser flash s'en charger, quand ça lui chantera O.O
C'est le ramasse-miettes⁷⁾, un processus interne sur lequel on n'a pas la main qui s'en charge quand les ressources viennent à manquer.

La seule chose qu'on puisse faire, c'est sortir les poubelles comprendre donner toutes les chances à l'objet en question d'être supprimé, et pour ça il faut qu'il ne soit plus attaché à rien et que plus rien n'y soit attaché. Je dis attaché, ça n'a pas de sens informatique, le parler juste voudrait que je conjugue les verbes référencer et souscrire.
Allez je le fais (parler juste ) :

Un objet est éligible au ramasse miettes quand plus aucune variable ne le référence et quand plus aucun écouteur n'y est souscrit.

Une variable c'est une laisse

Les variables c'est la première chose qu'on a vue, il y a bien longtemps déjà, et - forcément - je n'ai pas tout dit à leur sujet. C'est le principe de la mayonnaise : ne pas verser toute l'huile d'un coup, sans quoi ça s'effondre en une pitoyable soupe. Pareil pour les connaissances, il faut y aller molo sans quoi, la soupe c'est dans la tête qu'on la fait

Je vous ai donc raconté qu'une variable représente quelque chose et qu'elle peut être utilisée en lieu et place de ce quelque chose - ce qui est toujours vrai… ouf !

Une autre analogie que j'emploie souvent c'est celle de la laisse : une variable c'est une ficelle accrochée à une donnée (objet, valeur), je tire la ficelle, je chope la donnée ou l'objet.
Bien sûr je peux y accrocher successivement différentes choses - pourvu que ce soit toujours du même type - et je peux aussi ne rien avoir du tout au bout de la laisse.
Quand on écrit :

var unClip:MovieClip;

On a une “laisse à clips”, avec rien au bout. D'ailleurs ça nous le dit si on “trace” :

trace(unClip);

null

Pour revenir à ce qui nous intéresse : quand vous avez retiré de l'affichage une instance (removeChild), pour qu'elle soit éligible au ramasse-miettes encore faut-il la détacher de sa “laisse”. Ça se fait en affectant à la variable considérée la valeur null.

var unClip:Mv_Truc= new Mv_truc();
conteneur.addChild(unClip);
 
// traitements
// un peu plus loin :
 
conteneur.removeChild(unClip); // plus affiché mais toujours existant
unClip=null; // toujours existant, mais pourra être nettoyé quand le ramasse-miettes passera ds le coin

A vous de jouer

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

C'est quoi le principe ?
J'ai déjà éventé la ruse : vous vous doutez bien que pour effacer on ne va pas parcourir toute la liste d'affichage pour en supprimer les instances colorées. Le plus simple c'est encore de les ajouter, non pas au scénario principal comme on l'avait précédemment fait, mais à un clip dédié (vide à l'origine). Le bouton effacer se contente de supprimer le clip en question et d'en créer un autre, tout prêt à se voir ajouter à son tour des pastilles colorées…

Extraits :

var conteneur:MovieClip= new MovieClip();// un clip vide pour "y dessiner"
this.addChild(conteneur);// on l'ajoute tout de suite

function ajoutePiece():void {
	var c:Mv_Cercle= new Mv_Cercle();
	cpt = cpt%200+1;
	c.gotoAndStop(cpt);
	c.x = mouseX;
	c.y = mouseY;
	conteneur.addChild(c);// la suele différence avec la version précédente c'est qu'on ajoute au conteneur dédié
}

Le bouton Effacer :

• La première ligne supprime de la liste d'affichage le clip référencé par la variable conteneur.
• La deuxième ligne associe un nouveau clip vide à la même variable, l'ancien est donc déréférencé (attention, le clip et tous ses enfants existe toujours, on l'a juste “lâché dans les limbes”), et comme il n'est plus “accroché à sa laisse” il sera supprimé par le ramasse-miettes.
• La troisième ligne ajoute ce clip vide au scénario principal. Puisqu'il est référencé par la variable conteneur, le la fonction ajoutePiece continue de “fonctionner”.

btEfface.addEventListener(MouseEvent.CLICK,qdEfface);
function qdEfface(me:MouseEvent):void {
	this.removeChild(conteneur);// supprimer de l'affichage le clip référencé par la variable
	conteneur= new MovieClip(); // associer un nouveau clip (un autre, le précédent existe toujours)
	this.addChild(conteneur);
}

Oui, mais non !, s'énerve Ronchon, ça ne marche pas !

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Hé oui… Il y a un piège
Que se passe-t-il ? Le survol du bouton est bien reconnu (il change de couleur), c'est le clic qui n'est pas pris, d'ailleurs ça se voit aussi : le bouton ne devient jamais noir (couleur de l'état enfoncé). C'est bien normal : au moment où on clique c'est d'abord un événement mouseDown qui est diffusé par le bouton. La scène - sur laquelle on a monté un écouteur - “l'entend”, la fonction enfonce est invoquée et c'est une pastille qui vient se mettre sous le pointeur empêchant le bouton de diffuser un événement click.

Il faut donc invalider la fonction enfonce quand l'événement mouseDown est diffusé par le bouton, dit autrement : savoir sur qui on a cliqué et empêcher enfonce de faire son boulot si c'est le bouton qui a reçu le clic…
La propriété eventPhase… ça vous dit quelque chose ?

Dans notre cas on a accroché un écouteur à Stage.
Le croquis illustre l'imbrication des objets d'affichage de l'animation.
Cliquez sur la scène ou sur le bouton pour voir la propagation de l'événement.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

• Quand on clique n'importe où sur la scène, d'abord l'événement descend (phase 1) et n'est pas écouté (argument capture vaut faux par défaut), il arrive à la scène qui a diffusé l'événement (on est en phase 2), il est entendu (l'écouteur est sur Stage) : eventPhase vaut 2.

• Quand on clique sur le bouton, d'abord l'événement descend (phase 1) et n'est pas écouté (argument capture vaut faux par défaut), il arrive sur le bouton qui l'a diffusé (phase 2) “rebondit” et remonte (phase 3) en arrivant à la scène il est entendu : eventPhase vaut 3.

function enfonce(me:MouseEvent):void {
	trace(me.eventPhase)
	if (me.eventPhase==3) {
	// phase de remontée (bubble) ce n'est donc pas la scène qui diffuse l'événement mais un enfant (le bouton donc)
	return;
	}
	stage.addEventListener(MouseEvent.MOUSE_MOVE,bouge);
	ajoutePiece();
}

Attention aux ressources

Si maintenant je vous propose ça :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

voire ça :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Woho ! Trop facile
C'est exactement la même chose que le cercle un peu plus haut, s'exclame un enthousiaste, si ce n'est qu'au lieu de contenir un bête cercle sur une image, le clip cette fois porte une étoile interpolée. La belle affaire !

Et zou c'est parti, on duplique/modifie le fichier et …

Voilà que pour certains, ça ne fait pas tout à fait ce qu'on attendait :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
En soi c'est rigolo, mais c'est pas ce qu'on attendait…

Il faut, bien sûr penser à mettre un stop() après la dernière image de l'interpolation afin que la lecture du clip ne boucle pas indéfiniment.

Mais ça ne suffit pas, loin de là. Tous ces clips, qu'on ne voit plus et qui s'accumulent, c'est pas propre du tout, ça va finir par tenir de la place, pour rien. Le mieux c'est de les supprimer, puisqu'on n'en veut plus.
Quand je dis les supprimer, j'entends utiliser un removeChild, et bien entendu que vous n'allez pas écrire, après la dernière image de l'interpolation : conteneur.removeChild(this); ce serait bien trop “rigide” : ça implique qu'on les ajoute obligatoirement à un clip nommé conteneur…
Somme toute, le clip conteneur, c'est surtout - et systématiquement par la force même des choses - le parent du clip considéré… On écrira donc :

parent.removeChild(this);

Non, non. On ne remplace pas le stop() par la ligne en question. Il faut les deux, mon capitaine.
Rappelez vous la boule de feu qu'on entendait exploser même si elle n'était pas affichée… “pas encore affiché” ou “plus affiché”, c'est pareil
Un objet, qu'il soit dans la liste d'affichage ou non, mène sa vie dès lors qu'il a été créé, et du coup consomme des ressources aussi longtemps que le ramasse miettes n'est pas passé. C'est pourquoi il convient de ne pas laisser “tourner” inutilement des processus, pas plus la lecture du scenario que d'éventuels appels récurrents à coup d'enterFrame par exemple, dont vous avez peut-être déjà entendu parler.

Quand vous supprimez un objet d'affichage via removeChild, arrêtez systématiquement la lecture (stop) et supprimez les écouteurs qui y sont associés (removeEventListener).

Un objet classe depuis une chaîne de caractères

Une autre chose qui peut être bien utile, c'est créer une instance de classe depuis le nom de la classe considérée, une chaîne donc.

On utilisera la fonction getDefinitionByName :

var classCercle:Class = getDefinitionByName("Mv_Cercle") as Class;
var cercle= new classCercle();
addChild(cercle);

Pour aller vite illustrons de l'exemple basique d'un damier. On veut distribuer des clips en lignes/colonnes pour faire un damier. Dit du point de vue qui nous intéresse, il faut ajouter une fois une instance d'un symbole Mv_Case0, la fois suivante une instance de Mv_Case1, et recommencer…
S'il s'agissait toujours du même symbole, disons Mv_Case0, vous sauriez faire :

var nbCol:int=5;
var nbLig:int=3;
var nbTot:int=nbLig*nbCol;
 
for (var i:int=0; i<nbTot; i++) {
	var laCase:Mv_Case0=new Mv_Case0();
	laCase.y=int(i/nbCol)*laCase.height;
	laCase.x=i%nbCol*laCase.width;
	addChild(laCase);
}

Bien sûr, avec cette consigne minimaliste vous pourriez être tentés d'utiliser un if et de valoriser dans chacune de ses branches la variable laCase, genre :

	if (i%2==0) {
		 laCase=new Mv_Case0()  ;
	} else {
		 laCase=new Mv_Case1()  ;
	}

… mais ce n'est pas le but , je vous laisse faire utiliser notre nouvel outil : getDefinitionByName

var nbCol:int=5;
var nbLig:int=3;
var nbTot:int=nbLig*nbCol;
 
for (var i:int=0; i<nbTot; i++) {
	var classRef:Class=getDefinitionByName("Mv_Case"+i%2) as Class;
	var laCase= new classRef();
	//var laCase:Mv_Case0=new Mv_Case0();
	laCase.y=int(i/nbCol)*laCase.height;
	laCase.x=i%nbCol*laCase.width;
	addChild(laCase);
}

Retrouver le nom de classe d'une instance

Quelle est la classe dont est issue une instance ? C'est une question dont la réponse peut nous être utile quand on souhaite dupliquer une instance.
Imaginez que vous souhaitiez dupliquer une instance en cliquant dessus, par exemple.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
En fin de compte il s'agit ni plus ni moins que de créer une nouvelle instance depuis la même classe que celle du clip considéré, il suffit donc de la connaître, cette classe.
La classe dont est issu un objet, on l'obtient avec la fonction getQualifiedClassName à qui on passe le clip considéré. Elle renvoie une chaine et comme maintenant on est outillés de la fonction getDefinitionByName pour récupérer la classe elle même⁸⁾.

Vous avez tout ce qu'il faut pour vous essayer
Indice :
Soyez économes de votre énergie (et des ressources), n'allez pas ajouter un écouteur par instance…

Remarquez que sur la démo j'ai appliqué quelques propriétés de base aux instances, la coccinelle est rétrécie, une bestiole est inclinée, l'autre encore est un peu transparente… et les duplicatas sont aussi affectés des mêmes modifications.

Si on ne fait rien de particulier (en code) le duplicata ne reflète pas l'état du clip modèle, il a ses dimensions d'origine par exemple, et c'est bien normal, les dimensions et autre inclinaison, en langage AS ce sont des propriétés : scaleX, scaleY, rotation, alpha….
Quand je parle de dupliquer, c'est pour aller vite, mais ce qu'on fait c'est seulement créer une nouvelle instance, on ne recopie pas la première, on lit tout bêtement son nom de classe pour l'utiliser… Pensez donc à appliquer à la nouvelle instance toutes les propriétés de son “modèle” que vous souhaitez reproduire.

stage.addEventListener(MouseEvent.MOUSE_DOWN,enfonce,true);// on écoute la phase de capture sur la scène, donc ses enfants
stage.addEventListener(MouseEvent.MOUSE_UP,lache);
var clip_c:MovieClip;// le clip courant (le duplicata)
 
function enfonce(me:MouseEvent):void {
	var leClip:MovieClip=MovieClip(me.target);// le modèle
	var nomClasse:String=getQualifiedClassName(leClip);// le nom de la classe en chaine
	var classRef:Class=getDefinitionByName(nomClasse) as Class;// l'objet Classe
	clip_c= new classRef();
	clip_c.x=mouseX; // sous la souris
	clip_c.y=mouseY;
	clip_c.scaleX=leClip.scaleX; // dimensions
	clip_c.scaleY=leClip.scaleY;
	clip_c.rotation=leClip.rotation;// inclinaison
	clip_c.alpha=leClip.alpha;// transparence
 
	addChild(clip_c);
	stage.addEventListener(MouseEvent.MOUSE_MOVE,bouge);
 
}
function lache(me:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,bouge);
}
function bouge(me:MouseEvent):void {
// suit la souris
	clip_c.x=mouseX;
	clip_c.y=mouseY;
}

addChild, d'autres cordes à son arc

Déplacer d'un conteneur à un autre

Déplacer au premier plan ou à l'arrière plan

• distribuer damier
• prédominance des propriétés du conteneur
• barre d'inventaire (panier)

• les soluces ? où ?

A retenir

On manipule les clips depuis leur parent

¹⁾ on peut le stocker avec des copains dans un tableau par exemple et ne l'utiliser - afficher, ajouter - que plus tard

²⁾ sans oublier de cocher la case exporter pour Action script

³⁾ comprendre on y a “accès”

⁴⁾ genre Timer ou EnterFrame

⁵⁾ genre MouseDown, MouseMove, MouseUp…

⁶⁾ et on parle bien du conteneur direct, donc du parent

⁷⁾ garbage collector

⁸⁾ l'objet, pas le nom sus forme de chaine de caractères

Manipuler un MovieClip

Nataly — Tue, 21 Feb 2012 15:49:10 +0200

• Variables, fonctions, syntaxe
• Objets, méthodes, propriétés…
• Clics et événements souris sur les boutons et les clips
• Champs texte et objet String
• Structures de contrôle alternatives : if
• MovieClip : manipuler (ici)
• Structures de contrôle alternatives : switch
• Structures de contrôle répétitives : for - while
• Liste d'affichage, gestion dynamique des objets
• Les tableaux

Manipuler un MovieClip

L'objet phare, la vedette de Flash, c'est le clip, c'est donc par là que nous allons attaquer les choses vraiment sérieuses (ou rigolotes c'est selon l'état d'esprit).

Un clip, quand on parle vite, c'est une instance d'un symbole de bibliothèque de type Clip.

Dans un premier temps on va manipuler des instances (occurrences) de symbole déjà présentes sur la scène, on verra plus tard comment les ajouter en cours d'exécution (à la volée) - on dit dynamiquement.

Fabriquons donc un symbole de type Clip, animé - puisque c'est LA caractéristique principale de ces objets.

Tiens on va faire un ballon qui vole (ou une soucoupe volante pour les garçons ) :
Une instance de graphique Gr_Ballon animée sur un guide mouvement (pour CS3 et comme vous voulez après).

On en glisse une occurrences sur la scène et nous voilà prêts à tester les principales méthodes et propriétés¹⁾ des objets de type MovieClip.

Et puisque je vient de lâcher le mot, ne confondez pas le type MovieClip, qui est le nom de la classe que nous allons de fait manipuler avec le “type” Clip que vous choisissez dans l'environnement auteur. Le “type” Clip qui apparait dans le panneau Propriétés ou dans la bibliothèque, n'existe pas pour AS3, pas plus que le type Bouton ou Graphique²⁾

Manipuler la tête de lecture

Les méthodes caractéristiques de la classe MovieClip vous les connaissez certainement - au moins de réputation - ce sont celles qui permettent de manipuler la tête de lecture, et quand je disais tout à l'heure un peu vite que la caractéristique principale des MovieClip c'est d'être animés, en parler correct c'est : d'avoir plusieurs images³⁾ et une tête de lecture… qu'on peut piloter, donc.

stop, play, gotoAndStop et gotoAndPlay

Ça, on a déjà vu et même pris de l'avance avec l'exercice du skieur.

Je résume tout de même : stop arrête la tête de lecture du clip considéré là ou elle se trouve ; play démarre la lecture depuis l'image courante (actuellement affichée).

Par exemple pour arrêter la course du ballon en cliquant dessus…

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Deux possibilités :

• Soit vous nommez l'instance (disons leBallon pour faire original) et, sur le calque dédié au code du scénario principal⁴⁾, vous lui associez un écouteur :

leBallon.addEventListener(MouseEvent.MOUSE_DOWN,qdClicBallon);
 
function qdClicBallon(me:MouseEvent):void {
	me.currentTarget.stop();
}

• Soit vous décidez d'écrire ce bout de code dans le clip lui même image 1 d'un calque dédié.

this.addEventListener(MouseEvent.MOUSE_DOWN,explose);
 
function explose(me:MouseEvent):void {
	this.stop();
}

Ici, avec un seul clip, c'est la première option la meilleure : on a tout le code sous les yeux en ouvrant le .fla, mais vous verrez que quelquefois l'option 'code dans le clip' se révèle bien utile

gotoAndStop envoie la tête de lecture à une image considérée, sans lire les autres, la tête de lecture “saute” jusqu'à l'image et y reste ; gotoAndPlay lit depuis l'image en question.

On précise le numéro d'image entre parenthèses comme illustré là bas, mais on peut aussi préciser une étiquette d'image en passant une chaîne.

Les étiquettes d'image

Pour poser une étiquette d'image il suffit de sélectionner une image clé⁵⁾ dans le scénario du clip considéré et de saisir un nom dans le champ Nom du panneau Propriétés.

Il vous suffira par la suite de “passer” ce nom, entre guillemets, à un gotoAnd… pour y envoyer la tête de lecture :

leClip.gotoAnStop("uneEtiquette");
//ou
//leClip.gotoAnPlay("uneEtiquette");

Par exemple, sauriez vous faire un ballon qui explose quand on clique dessus ?

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce n'est qu'une ruse de construction et du code qu'on connait, n'allez pas chercher midi à quatorze heure…
Jusqu'alors on avait un clip (Mv_BallonVole) qui animait un graphique nommé ballon (instance de Gr_Ballon) sur une guide mouvement. Il vous suffit de remplacer cette instance (bouton Permuter du panneau Propriétés) par un clip présentant image 1 le visuel du ballon et, plus loin, une animation figurant l'explosion à partir d'une image quelconque que vous aurez pris soin de repérer à l'aide d'une étiquette d'image (“paf”, par exemple).
Un clic sur l'instance de Mv_BallonVole, en arrête la tête de lecture et envoie celle du clip contenu lire depuis l'étiquette “explose” (gotoAndPlay).

Prenez soin, si vous avez procédé par permutation, de régler le type sur “Clip” dans le panneau Propriétés.
Toujours les deux mêmes possibilités :

Sur la première image de Mv_BallonVole :

this.addEventListener(MouseEvent.MOUSE_DOWN,explose);
 
function explose(me:MouseEvent):void {
	this.stop();
	this.removeEventListener(MouseEvent.MOUSE_DOWN,explose);// plus besoin de l'écouteur on le supprime
	this.ballon.gotoAndPlay("paf");
}

Sur la première image du scénario principal :

leBallon.addEventListener(MouseEvent.MOUSE_DOWN,explose);
 
function explose(me:MouseEvent):void {
	me.currentTarget.stop();
	me.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN,explose);// plus besoin de l'écouteur on le supprime
	me.currentTarget.ballon.gotoAndPlay("paf");
}

nextFrame et prevFrame

Comme leur nom l'indique, nextFrame et prevFrame, permettent d'envoyer la tête de lecture, respectivement, image suivante ou image précédente. On pourrait par exemple fabriquer cette toute petite chose (aussi, ça nous permettra de tester d'autres propriétés par la suite).
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Il s'agit d'un bête clip avec une poignée d'images clés, sur chacune d'elle une illustration différente. Quand on clique, l'image suivante est affichée (la tête de lecture se déplace vers l'avant), si on clique avec la touche majuscule enfoncée c'est l'image précédente qui est affichée (tête de lecture recule d'une image).

C'est une bonne occasion de réviser les propriétés du paramètre de la fonction de rappel ainsi que l'emploi de la structure if

Notez qu'aucune erreur ne se produit si on invoque nextFrame sur la dernière image, ou prevFrame sur la première… Rien ne se passe, c'est tout.

Et pour ceux qui se demandent comment faire changer le pointeur en main, tant pis si ce n'est pas le chapitre je le dis quand même : c'est la propriété buttonMode valorisée à true qui produit ça.

demo.buttonMode=true;

Je vous laisse trouver, et si vous séchez vous trouverez le code à l'occasion du chapitre suivant.

Les propriétés bien utiles de MovieClip

Puisqu'on peut déplacer la tête lecture sur des images de son choix selon leur numéro ou leur nom d'étiquette, voici une poignée de propriétés auxquelles vous aurez souvent recours dès qu'il s'agira de “se” déplacer sur un scénario.

currentFrame et totalFrame

Ces deux propriétés renvoient un int qui vaut pour
currentFrame le numéro de l'image en cours de lecture, celle sur laquelle se trouve la tête de lecture à l'instant considéré,
totalFrame le nombre d'images du clip en question.

Vous pouvez tester en ajoutant deux traces au code que vous venez d'écrire à l'occasion de l'exercice du dessus :

demo.stop();
 
demo.addEventListener(MouseEvent.CLICK,qdClic);
demo.buttonMode = true; // pointeur en forme de main au survol
 
function qdClic(me:MouseEvent) {
	if (me.shiftKey) { // touche majuscule du clavier enfoncée
		me.currentTarget.prevFrame();// reculer d'une image
	} else {
		me.currentTarget.nextFrame();// avancer d'une image
	}
	trace("image courante : "+me.currentTarget.currentFrame);
	trace("nombre d'images du clip : "+me.currentTarget.totalFrames);
}

Exercices

Défiler et boucler

Histoire d'illustrer l'utilisation de ces deux propriétés, je vous propose la consigne suivante avec le toujours même clip aux bestioles (ou une autre instance, si ça vous arrange) : quand on clique, on passe à l'image suivante et on revient à la première après la dernière. En gros, ça boucle.
Bien sûr le code doit fonctionner quelque soit le nombre d'images du clip sans qu'on ait à le modifier, et pour corser la chose - sans quoi c'est trop facile - j'ajoute la contrainte de ne pas utiliser de if.

En fait il s'agit d'une seule ligne un peu rusée, mais vous avez déjà rencontré tout ce qu'il faut pour faire

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Indices :
• Il y a peut-être un piège… Ce n'est pas parce qu'on vient de voir nextFrame et prevFrame qu'il faut forcément vous jeter dessus ^^
• Parmi les opérateurs mathématiques il y en a un qu'on a tort de négliger.

sources CS4

Tout petit jeu

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Ici ce swf illustre la consigne toute entière : vous savez faire en sorte que la partie démarre ou reprenne via majuscule-clic.

Euhhh… nan, il ne se passe rien quand on a gagné… C'est prématuré pour compter les points

C'est une cas de figure où on peut trouver préférable d'écrire le code “dans” le symbole, plutôt qu'associer un écouteur à chaque instance.

this.addEventListener(MouseEvent.MOUSE_DOWN,explose);
 
function explose(me:MouseEvent):void {
	this.stop();
	this.removeEventListener(MouseEvent.MOUSE_DOWN,explose);
	ballon.gotoAndPlay("paf");
}

les sources CS3

currentFrameLabel et currentLabel

En ce qui concerne ces deux propriétés, je ne peux que vous renvoyer à la doc et attirer votre attention sur le fait qu'elles ne sont disponibles que pour lecteurs 10 et supérieurs.

Si l'explication vous reste confuse faites le test suivant :
image 1 : stop()
image 2 : une étiquette : “etiquette image 2”
image 5 : une étiquette : “etiquette image 5”

un bouton sur la scène et ce code associé :

bt.addEventListener(MouseEvent.CLICK,qdClic);
 
function qdClic(me:MouseEvent) {
	nextFrame();
	trace("currentFrame :           "+this.currentFrame);
	trace("currentFrameLabel :      "+this.currentFrameLabel);
	trace("currentFrame :           "+this.currentLabel);
	trace("---");
}

currentFrame :           2
currentFrameLabel :      etiquette image 2
currentFrame :           etiquette image 2
---
currentFrame :           3
currentFrameLabel :      null
currentFrame :           etiquette image 2
---
currentFrame :           4
currentFrameLabel :      null
currentFrame :           etiquette image 2
---
currentFrame :           5
currentFrameLabel :      etiquette image 5
currentFrame :           etiquette image 5
---
currentFrame :           6
currentFrameLabel :      null
currentFrame :           etiquette image 5
---

Notez qu'elles sont en lecture seule, ce qui implique que vous ne pouvez pas définir des étiquettes d'image dynamiquement (à la volée)

Retrouver une instance par son nom : getChildByName

Vous le savez, quand on veut (s') adresser (à) un clip posé sur l'animation, on utilise le nom de l'instance tout bonnement (leClip.play(); par exemple).
La question qui se pose maintenant c'est comment faire quand on dispose d'une chaine de caractère, pour, par exemple, piloter ballon1 ou ballon2 en reconstituant le nom depuis une variable qui vaudrait le suffixe (le chiffre).

Il ne vous viendrait pas à l'esprit d'écrire :

var suffixe:int=1
var leBallon:String="ballon"+suffixe
leBallon.play(); // Aïe !! depuis quand la classe String expose-t-elle une méthode play ? O.O

C'est la méthode getChildByName qui renvoie l'objet d'affichage (DisplayObject) correspondant à une chaîne.

var suffixe:int=1
trace(getChildByName("ballon"+suffixe))
trace(getChildByName("ballon"+suffixe).name)

[object Mv_BallonVole]
ballon1

Notez que s'il n'existe pas d'instance du nom considéré getChildByName renvoie null

Erreurs 1118 et 1061

Je viens d'illustrer la méthode getChildByName dans un trace et en utilisant la propriété name, si de votre côté vous vous y êtes essayé avec un play ou un stop vous voilà confronté à l'erreur 1118 ou 1061, très célèbres sur le forum

C'est le moment de tirer l'embrouille au clair.

Voilà ce qu'on obtient si on a une instance nommée leBallon et qu'on a le front d'écrire :

getChildByName("leBallon").play();

1061: Appel à la méthode play peut-être non définie, via la référence de type static flash.display:DisplayObject

Si vous essayez de passer par une variable, c'est pas mieux :

var b:MovieClip= getChildByName("leBallon");

1118: Contrainte implicite d'une valeur du type statique flash.display:DisplayObject vers un type peut-être sans rapport flash.display:MovieClip

Chaque fois il est question de DisplayObject… De fait si vous consultez la doc, vous constatez que getChildByName renvoie du DisplayObject.

“Euhh… oui et alors”, grommèle le Ronchon de service.

Eh bien, c'est là qu'il devient nécessaire de comprendre l'arbre d'héritage des classes d'affichage.

Reprenons :

Quand on code en AS3 on utilise des objets - puisque tout est Objet - et il existe des objets de genre différent : clips, boutons, images bitmap, sons…
On sait que tous les objets d'un même genre s'utilisent pareil. Je veux dire, on leur applique les mêmes méthodes ou propriétés et - partageant les mêmes caractéristiques et compétences⁶⁾ - on les classe dans la même catégorie.

Eh bien voilà, le mot est lâché, les objets qui ont le même “mode d'emploi”, sont classés dans la même catégorie qu'on appelle classe.

Attention, une classe c'est plus qu'une catégorie, qu'une étiquette pour identifier un objet, c'est aussi ce qui permet de fabriquer les objets en question. Une classe c'est à la fois un “genre” (on dit type vous vous souvenez) et une usine, une fabrique, un moule…

Les objets de même type sont issus de la même classe (au sens où ils sont fabriqués par la même classe).

La classe d'un objet c'est à la fois la catégorie dans laquelle le “ranger” et le moule qui permet de le fabriquer.

Ce qui est pratique, c'est que les classes héritent les unes des autres et voilà comment ça peut se comprendre vite fait pour ce qui nous intéresse (la POO c'est l'objet d'un autre tuto) :

Ça fonctionne un peu comme dans la vraie vie : il y a des parents et des enfants ; en fait des mères et des filles - puisqu'on parle de classes - et les filles héritent de leur mère, génétiquement pour les humains, “codesquement” pour les classes.
Comme dans la vie biologique les filles héritent de leur mère certaines caractéristiques et compétences et y ajoutent des facultés propres. Ma fille, par exemple, a hérité de mon caractère et de la couleur de mes yeux, mais en plus elle est sportive (caractéristique qui me fait parfaitement défaut ). En AS3 c'est pareil si ce n'est qu'il est question de propriétés et de méthodes.

L'arbre d'héritage des classes d'affichage

Les classes qui nous intéressent ici, ce sont les classes des objets affichables⁷⁾.

D'un point de vue AS3 voilà comment se présente l'arbre ~~généalogique~~ d'héritage des classes d'affichage :

Attention métonymie
Souvent pour aller vite on opère un glissement sémantique qui nous fait parler de l'objet issu d'une classe en utilisant le nom de la classe elle même. Comme lorsqu'on dit boire un verre ou manger un cornet de frites. Ce n'est pas le verre qu'on boit (mâche ?) mais bien son contenu, de même que vous n'avalez pas le carton du cornet de frites mais les frites elles mêmes. C'est ce que je fais ici pour les besoins de la métaphore, quand je dis qu'un objet hérite certaines de ses propriétés de son parent, c'est pour aller vite, c'est bien la classe dont il est issu qui hérite de sa classe mère.

• L'aïeule c'est DisplayObject, qui est la classe dont héritent tous les objets affichables, qu'il s'agisse d'une image (Bitmap), d'un objet de dessin (Shape), d'instances de symboles (Sprite, SimpleButton, MovieClip), ou même de chargeurs d'images externes (Loader), de vidéos (Video) ou encore de champs texte (TextField).
Si vous consultez la doc vous trouverez toutes les méthodes et propriétés qui s'appliquent aux objets d'affichage quels qu'ils soient. name, par exemple, ou encore x et y⁸⁾

• Ensuite il y a les enfants de DisplayObject, au nombre des quels les objets interactifs (InteractiveObject), qui non contents d'être affichables, d'avoir des coordonnées et tout ce qu'on sait, permettent l'interaction. Dit autrement, ils diffusent les célèbres “événements souris” : MouseEvent

• Les enfants des objets interactifs sont les boutons, les champ texte, et les objets d'affichage pouvant en contenir d'autres (DisplayObjectContainer).

• Héritant de DisplayObjectContainer, vous trouvez la classe Loader (pour charger des fichiers image), la classe Sprite (une seule image donc pas de scénario) et la classe Stage (la scène, qui pour le coup est un conteneur).

• Enfin, tout en bas de l'arbre d'héritage, l'objet le plus aboutis de l'évolution : le (fameux) MovieClip qui est donc : un objet d'affichage avec toutes ses méthodes et propriétés, interactif, pouvant en contenir d'autres, et équipé d'un scénario.

Pour reprendre ma métaphore familiale, ça dit de qui l'enfant en question “tient” ses caractéristiques (il a le don de la musique de sa grand mère, la main verte de sa bisaïeule mais ses talents de cuisiniers il ne les doit qu'à lui).

cliquer pour grossir

Certaines classes (type d'objets) ne sont pas instanciables, comprendre elles ne peuvent pas générer un objet (via le mot clé new, on y arrive très bientôt), je ne vais pas pouvoir fabriquer un objet de type DisplayObjet “tout court”. Ces classes n'existent que pour transmettre à leur descendance les méthodes et propriétés qui leurs seront communes.

Cet arbre d'héritage explique les parenthèses qu'on trouve dans le volet latéral du panneau action à côté de certaines méthodes ou propriétés. Elles précisent pour chacune, la classe “dont elle proviennent”.

Ici j'ai développé MovieClip, depuis flash/DisplayObject :

Oui, bon, ronchonne le toujours même, et quel rapport avec l'erreur ?

J'y viens :

Une dernière chose à savoir en ce qui concerne l'héritage, c'est que puisque les enfants savent faire tout comme leurs parent et mieux, partout où on attend la mère on peut envoyer la fille⁹⁾ (puisqu'elle sait assurément faire la même chose que sa mère).

Quand on dit de la méthode getChildByName qu'elle renvoie un objet de type DisplayObject, il faut comprendre “au minimum”.
Dans notre exemple, on reçoit un clip, c'est bien un DisplayObject (par ascendance), mais on tente d'utiliser la méthode play, qui n'est pas une méthode de la classe en question, le compilateur lui, n'en sait rien si c'est un clip ou un loader ou un TextField ou n'importe quel autre objet d'affichage, et il râle que la méthode play n'existe pas (peut-être non définie), via la la classe DisplayObject, normal.

Oui mais voilà, nous, dans ce contexte, parce que c'est nous humains qui programmons, on le sait que “leBallon” c'est un clip. On en est sûr, là, voilà !
On va donc “rassurer Flash”, lui dire “écoute gars, je suis sûre de mon coup, cet objet que je reçois est un MovieClip”.
En langage Objet on dit qu'on transtype (par delà le type) et on s'y prend comme suit :

MovieClip(getChildByName("leBallon")).play();
// Ou :
var ballon:MovieClip=MovieClip(getChildByName("leBallon"));
ballon.play();

Et du coup vous comprenez pourquoi l'exemple que j'avais pris avec la propriété name fonctionnait, lui. Eh oui, name est une propriété de la classe DisplayObject¹⁰⁾.

Exercice

Maintenant que vous savez piloter la tête de lecture d'une instance dont vous connaissez le nom, vous pouvez sans doute, armés de vos récentes connaissances sur les champs texte, lâcher le ballon de votre choix…

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Remarquez qu'on peut saisir la couleur du ballon en majuscule, minuscule, voire avec l'initiale seulement en majuscule, ou un peu comme on veut (rOuGe, ça marche aussi).

Les sources CS3

Conclusion (provisoire)

Vous l'avez constaté : il existe encore nombre de méthodes et propriétés, dont certaines absolument primordiales. On va les voir, mais pas tout de suite.
Ce n'est pas que je tienne à ménager un suspens insoutenable c'est que pour en comprendre au mieux l'intérêt et la mise en œuvre on va avoir besoin de quelques billes supplémentaires, à commencer par les structures de contrôle répétitives (les boucles).

Et c'est par là [lien à venir] que ça se passe… A tout de suite, donc !

¹⁾ tout ce qu'on peut en faire (méthodes) et tout ce qu'on peut en savoir (propriétés)

²⁾ Graphics oui, mais c'est autre chose

³⁾ potentiellement

⁴⁾ image qui contient le clip, bien sûr…

⁵⁾ F6 au besoin

⁶⁾ propriétés, méthodes

⁷⁾ qu'on peut afficher, donc voir

⁸⁾ effectivement, si un truc peut être affiché, il faut bien qu'on puisse en préciser coordonnées…

⁹⁾ celle-là je l'ai volée à T.Imbert

¹⁰⁾ hé hé c'est que je m'étais appliquée de l'exemple

Structures de contrôle : If

Nataly — Tue, 21 Feb 2012 15:10:10 +0200

Structures de contrôle : If

• Variables, fonctions, syntaxe
• Objets, méthodes, propriétés…
• Clics et événements souris sur les boutons et les clips
• Champs texte et objet String
• Structures de contrôle alternatives : if (ici)
• MovieClip : manipuler
• Structures de contrôle alternatives : switch
• Structures de contrôle répétitives : for - while
• Liste d'affichage, gestion dynamique des objets
• Les tableaux

Structures de contrôle, qu'est-ce que c'est ?

Comme leur nom l'indique elles sont destinées à contrôler l'exécution du code.

En AS elles sont de deux types : répétitives ou alternatives.
A peine si je développe, la terminologie est très parlante : les premières permettent d'exécuter la ou les mêmes lignes plusieurs fois, couramment on parle de boucles ; les secondes permettent d'exécuter un bloc de code ou un autre selon les circonstances, ce sont par exemple les fameux if, et c'est par là que nous allons attaquer.

La syntaxe

A la fin du mois, s'il me reste des sous je m'offrirai de jolis escarpins (messieurs, remplacez par console de jeu ou accessoire moto )
Ce type de situation, on en gère à longueur de vie et on s'en sort très bien (quoique). La fin de mois arrivée, on regarde le solde de son compte, selon qu'il est positif (supérieur à zéro) ou non, on défouraille ou pas la carte bleue. Quelque fois on a prévu une alternative : ce week-end s'il fait beau j'irai à la piscine sinon j'irai au cinéma. Pareil ça nous prend deux secondes de consulter la météo et de foncer à un endroit ou l'autre selon les prévisions.

En code c'est le même principe, on pose une condition et on prévoit ce qui sera fait selon qu'elle sera vérifiée ou pas.

Le plus souvent on présente la syntaxe comme suit :

if(condition){
     // instruction si condition vérifiée
} else{
    // instruction si condition pas vérifiée
}

Pour peu qu'on soit suffisamment anglophone pour savoir que if signifie si et else sinon, ça se lit quasi couramment.
Juste pour le plaisir de traduire en code mon exemple à la noix d'introduction, imaginons une variable soldeDeMonCompte, et posons comme consigne :
Si soldeDeMonCompte supérieur à 0 on trace “je me fais un cadeau” sinon on trace “dommage”. 'Supérieur à' s'écrit > en AS (et dans tous les langages que je connaisse), ça nous donne donc.

var soldeDeMonCompte:Number=1000 //oui bon, on peut rêver… :D
 
if(soldeDeMonCompte > 0){
    trace("je me fais un cadeau")
} else {
   trace ("dommage")
}

Changez la valeur de soldeDeMonCompte pour une valeur négative et constatez que dans la fenêtre de sortie c'est dommage qui s'écrit.

La séquence de frappe magique :
Si vous tapez successivement la touche esc (échappe) puis i puis f vous aurez le bonheur de voir toute la structure if s'écrire, parenthèses et accolades, vous n'avez plus qu'à “remplir”
Et… Tada ! chaque fois plus fort : si vous posez le curseur juste avant l'accolade fermante puis tapez [esc e l] eh bien c'est la branche else qui vient prendre place

Jusque là ça va j'imagine, débarrassons nous donc de la liste des opérateurs de comparaison et on aura tout ce qu'il faut pour avancer bien tranquillement :

En français	AS
Inférieur (au sens strict)	<
Inférieur ou égal	< =
Supérieur (au sens strict)	>
Supérieur ou égal	>=
Egal	==	Piège
Différent	!=	! se lit not (en anglais) soit 'non' ou 'pas' (pas égal)

Rien de compliqué mais attention un piège quand même : l'opérateur d'égalité.

Ne confondez pas = et ==

En effet l'opérateur = (égal tout court) est un opérateur d'affectation, il permet d'affecter (attribuer) une valeur à une variable. Il ne compare rien du tout.

Pour comparer deux variables (ou données) on utilise == (égal égal).

Par exemple pour vérifier qu'une variable (String) vaut précisément une chaine de caractères (mettons 'bonjour' pour faire original), on écrira :

var uneChaine:String="bonjour";
 
if(uneChaine=="bonjour"){
    trace("la variable vaut 'bonjour'");
}else{
    trace("la variable vaut autre chose : "+uneChaine);
}

Vous constatez qu'il suffit que vous écriviez :

var uneChaine:String="Bonjour";

… pour que l'égalité ne soit pas reconnue.

la variable vaut autre chose : Bonjour

Ça ne vous surprend pas, vous savez depuis longtemps que lettre majuscule ou minuscule ce n'est pas du tout la même chose pour AS (lien à venir).

Oui mais alors pourquoi ça marche quelque fois ? récrimine-t-on dans le fond.
D'abord, ça ne marche jamais. Au pire ça laisse croire, si on a la malchance de multiplier des tests sournois…
Bon d'accord, je vous expliquerai, mais tout à l'heure, il vaut mieux ne pas perdre le fil et retenir le principal : l'opérateur de comparaison d'égalité c'est ==.

Et c'est le moment d'utiliser nos toutes fraîches connaissances sur les champs texte (lien à venir) pour jouer à en vérifier le contenu.

Prenons l'alibi de vérifier un mot de passe.
• Posons sur la scène un champ texte (outil texte, caractéristique “texte de saisie” dans le panneau de propriétés) et nommons le txtSaisie.
• Posons un autre champ texte, dynamique cette fois, pour causer à l'utilisateur (txtSortie).
• Installons un bouton (btTest, par exemple)
On décide arbitrairement d'un mot de passe (sésame), et je vous laisse écrire les quelques lignes qui traceront dans la fenêtre de sortie “OK pour la suite” quand le mot de passe saisi est correct, et “Mot de passe incorrect” dans txtSortie dans le cas contraire (au clic sur le bouton, bien sûr).

Une possibilité :

btTest.addEventListener(MouseEvent.CLICK, test);
 
function test(me:MouseEvent):void {
	if (txtSaisie.text!="sésame") {
		txtSortie.text="Mot de passe incorrect";
	} else {
		trace("OK pour la suite");
		// suite du traitement potentiellement long
	}
}

une autre :

btTest.addEventListener(MouseEvent.CLICK, test);
 
function test(me:MouseEvent):void {
	if (txtSaisie.text=="sésame") {
		trace("OK pour la suite");
		// suite du traitement potentiellement long
	} else {
		txtSortie.text="Mot de passe incorrect";
	}
}

Else facultatif

Et c'est là qu'il devient urgent de se débarrasser du else, pour le moins de se mettre bien d'accord que la branche else est facultative.

Si le mot de passe est mauvais on ne fait rien (si ce n'est prévenir l'utilisateur), s'il est bon on se lance dans les grandes manœuvres, a-t-on dit. On risque donc de se retrouver avec de nombreuses lignes dans une des branches de la structure de contrôle.
Ce n'est pas mal en soi, mais fort peu lisible, et d'autant moins qu'on risque d'avoir recours à de nouveaux tests, et à imbriquer des if dans des else…

Sachez qu'on peut éviter ça, la branche else est facultative. On peut se contenter de penser : si le mot de passe n'est pas bon je préviens l'utilisateur et j'arrête tout.
Vous vous en souvenez peut-être (lien à venir) c'est le mot return qui permet d'interrompre l'exécution d'un bloc de code.

function test(me:MouseEvent):void {
	if (txtSaisie.text!="sésame") {
		txtSortie.text="Mot de passe incorrect";
                return; // on sort de la fonction le reste du code n'est pas exécuté
	} 
	// un traitement potentiellement long	
}

Et puis pour ceux qui exigent encore plus de lisibilité, vous pouvez tout écrire sur la même ligne :

function test(me:MouseEvent):void {
	if (txtSaisie.text!="sésame") txtSortie.text="Mot de passe incorrect"; return;
 
	// un traitement potentiellement long	
}

Notez que dans ce cas on peut se passer des accolades et qu'il est indispensable de séparer les instruction par un point-virule.

Moi je n'aime pas du tout, ne serait-ce que parce que ça proscrit l'utilisation de la mise en forme automatique (depuis Flash), mais vous risquez de le rencontrer, n'en soyez pas surpris¹⁾.

Si ça vous perturbe, oubliez : je resterai sur la bonne vieille syntaxe standard (et auto-formatable²⁾)

Bien sûr l'histoire du mot de passe, c'est un alibi à s'entrainer. Dans la réalité il est vraiment rare que le mot de passe soit stocké en dur, et le serait-il que pour des questions de sécurité on complique un peu les choses
Notez malgré tout que c'est le même principe qui est utilisé pour vérifier qu'un champ texte n'est pas vide avant d'en traiter le contenu, ce qui n'est plus du tout de l'ordre de l'alibi.

identifier les champs vides

Un champ texte vide contient une chaine vide.
Une chaine, on l'exprime en entre guillemets.
Vide c'est rien, et rien entre guillemets ça donne ”” (guillemets guillemets)
Vous pouvez donc écrire :

function test(me:MouseEvent):void {
	if (txtSaisie.text=="") {
		txtSortie.text="Saisissez quelque chose";
                return; // on sort de la fonction le reste du code n'est pas exécuté
	} 
	// suite du traitement
        trace("tout va bien on continue");	
}

…voire :

function test(me:MouseEvent):void {
	if (txtSaisie.text=="") txtSortie.text="Saisissez quelque chose"; return;
 
	// suite du traitement
        trace("tout va bien on continue");	
}

Et même si j'ai dit que je n'aime pas bien la syntaxe sur une ligne, force est de reconnaitre que pour vérifier que tous les champs requis d'un formulaire sont remplis ce n'est pas si mal (souvent femme varie, il faut vous y faire ). Imaginez par exemple une poignée de champs : nom, prénom, pseudo, mot de passe…

function enregistrement(me:MouseEvent):void {
	if (txtNom.text=="")     txtSortie.text="Le champ nom ne peut être vide"; return;
	if (txtPrénom.text=="")  txtSortie.text="Le champ prénom ne peut être vide"; return;
	if (txtPseudo.text=="")  txtSortie.text="Le champ pseudonyme ne peut être vide"; return;
	if (txtMdP1.text=="")     txtSortie.text="Le champ mot de passe ne peut être vide"; return; 
 
        if (txtMdP1.text != txtMdP2.text ) {
              txtSortie.text="Attention à vérification du mot de passe";
              txtMdP1.text=""; // vider les champs mot de passe pour forcer une nouvelle saisie
              txtMdP2.text=""; 
              return;
        }
	// suite du traitement
        trace("tout va bien on continue");	
}

Ici j'ai imaginé deux champs de saisie pour le mot de passe, le deuxième étant destiné à éviter les fautes de frappe.

else if

Voilà une branche encore plus facultative que le “else tout court”. Je veux dire que quand on en arrive à une structure empilant les else if on peut souvent changer son fusil d'épaule. Mais bon, puisqu'il faut en parler, faisons le (dure, ma vie).

Else if en anglais, sinon si en français. Vous pourrez ajouter successivement autant de conditions à vérifier que vous le souhaitez, en ajoutant simplement les unes sous les autres des branches qui respectent cette construction.

else if (condition){
    //instruction(s)
}

if (test){
   //instruction(s) si test vérifié
} else if (test1){
   //instruction(s) si test1 vérifié
}else if (test2){
   //instruction(s) si test2 vérifié
}else if (test3){
   //instruction(s) si test3 vérifié
}else if (test4){
   //instruction(s) si test4 vérifié
}else if (test5){
   //instruction(s) si test5 vérifié
}else if (test6){
   //instruction(s) si test6 vérifié
}else if (test7){
   //instruction(s) si test7 vérifié
}else {
   //instruction(s) dans tous les autres cas
   // cette branche est bien sûr facultative
}

Aussitôt qu'une condition est vérifiée les instructions de la branche considérée sont exécutées les branches suivantes sont ignorées.

var laValeur:int = 100;
if (laValeur < 40) {
	trace("inf à 40");
} else if (laValeur<=100) {
	trace("inf ou égal 100");
} else if (laValeur==100) {
	trace("égal 100");
} else {
	trace("dans else");
}

inf ou égal 100

Et vous pouvez aussi tester des choses très différentes :

var laValeur:int = 100;
var uneChaine:String = "bonjour";
if (laValeur < 40) {
	trace("inf à 40");
} else if (uneChaine=="bonjour") {
	trace("la chaine vaut bonjour");
} else if (laValeur==100) {
	trace("égal 100");
} else {
	trace("dans else");
}

la chaine vaut bonjour

Vraiment, je ne m'étends pas sur le thème, très vite on va rencontrer la structure switch qui remplace avantageusement l'empilement de else if dans l'immense majorité des cas.

Une meilleure formulation

Pour présenter la structure if, il est de coutume de parler de condition et de présenter la condition en question sous forme de comparaison - entre les parenthèses suivant le mot if. C'est d'ailleurs ce que j'ai fait

Malgré tout il s'agit d'un abus de langage et maintenant qu'on est bien en forme, je vais pratiquer le parler juste. Le vrai du vrai de la réalité programmatique c'est que ce qu'on passe entre parenthèses c'est quelque chose que l'on peut évaluer comme true ou false.

Quand on écrit directement une comparaison entre les parenthèses du if, le programme calcule le résultat et c'est ce résultat qui est traité.
Vérifions :

var soldeDeMonCompte:Number=1000 ;
var soldePositif:Boolean=soldeDeMonCompte > 0 ;
trace( "le solde du compte est-il positif ? "+ soldePositif);
if(soldePositif){
    trace("je me fais un cadeau !")
} else {
   trace ("dommage")
}

le solde du compte est-il positif ? true
je me fais un cadeau !

Ou encore plus indiscutable :

var verif:Boolean=true ;
if(verif){
    trace("la variable vérif vaut vrai")
} else {
   trace ( trace("la variable vérif vaut faux"))
}

la variable vérif vaut vrai

On est donc bien d'accord : la syntaxe du if c'est :

if(une_chose_que_l_on_peut_évaluer_comme_true_ou_false){
   // instruction(s) quand valeurBooléenne vaut true
} else {
   // instruction(s) quand valeurBooléenne vaut false
}

On parle bien d'une expression booléenne et pas d'une condition.
Je sais, je me répète, mais ça vous évitera peut-être d'écrire des choses comme celle ci :

if(unClip.visible==true){
    //traitement
}

l'expression unClip.visible vaut true ou false , inutile de comparer une fois de plus ³⁾

Utiliser une fonction comme paramètre de if

Et du coup, puisqu'on vient de comprendre que if évalue l'expression qu'on passe entre parenthèse, ça doit bien marcher avec les fonctions pensent les petits rusés dans leur coin…
Et bien oui ! Si une fonction renvoie un booléen alors on peut l'évaluer directement “dans” le if, et par conséquent l'exécuter…

J'en vois qui me jettent un regard pas convaincu, le mieux c'est un exemple :

Validation d'un formulaire

Reprenons notre idée de formulaire d'inscription à valider.
On pourrait charger une fonction des opérations de validation. Si cette fonction a le bon goût de retourner faux quand les conditions de validation ne sont pas remplies, et vrai dans le cas contraire, il ne nous reste plus qu'à l'invoquer pour vérifier le formulaire, et se servir de ce qu'elle renvoie pour continuer ou non le traitement.

btOK.addEventListener(MouseEvent.CLICK, enregistre);
 
function enregistre(me:MouseEvent):void {
	if (!valideFormulaire()) { // pour évaluer le résultat il faut bien exécuter la fonction
		return;		   
	} 
// suite du traitement 
// si on passe là c'est que la validation a renvoyé vrai
}

function valideFormulaire():Boolean {
	if (txtNom.text=="")     txtSortie.text="Le champ nom ne peut être vide"; return(false);
	if (txtPrénom.text=="")  txtSortie.text="Le champ prénom ne peut être vide"; return (false);
	if (txtPseudo.text=="")  txtSortie.text="Le champ pseudonyme ne peut être vide"; return(false);
	if (txtMdP1.text=="")     txtSortie.text="Le champ mot de passe ne peut être vide"; return(false); 
 
        if (txtMdP1.text != txtMdP2.text ) {
              txtSortie.text="Attention à vérification du mot de passe";
              txtMdP1.text=""; // vider les champs mot de passe pour forcer une nouvelle saisie
              txtMdP2.text=""; 
              return(false);
        }
	// tour va bien renvoie vrai
        return(true);	
}

Si vous voulez vous convaincre du principe, posez un point d'arrêt sur la ligne if (!valideFormulaire()), et suivez l'exécution du programme au pas à pas à l'aide du débug.

N'hésitez pas à faire un détour du côté de ce tuto commis par frangois pour notre plus grand bonheur _o_

Maintenant qu'on est au clair sur le fait que le paramètre qu'on passe à if est évalué, je peux répondre à la question des suspicieux qui se demandaient pourquoi quand on confond l'opérateur d'affection = avec l'opérateur de comparaison == il semble quelque fois que ça marche quand même.
Ça va nous permettre d'aborder la dernière subtilité à connaître : la conversion implicite du paramètre.

Attention conversion implicite

Il faut le savoir : si nécessaire, on peut convertir une donnée d'un type sur un autre.
Il faut le savoir aussi, à l'exécution, il arrive que le lecteur se charge tout seul comme un grand d'effectuer des conversions, on parle alors de conversions implicites.

Les conversions implicites (ou coercition) sont parfois effectuées par Flash Player ou Adobe AIR lors de l'exécution.

Dixit la doc

C'est plutôt pratique, et pour peu qu'on sache bien ce qu'on fait (du moins ce que le lecteur⁴⁾ fera) ça ne pause aucun problème, voire on peut s'appuyer sur ce comportement.

conversion explicite

Sans nous égarer trop, faisons donc un petit détour par les conversions vers un type booléen.

Pour associer un objet à un autre type de données, vous mettez le nom de l'objet entre parenthèses et le faites précéder du nom du nouveau type.

Dixit la doc

Ce qui rapporté à nos préoccupations donne ceci.

var testB:Boolean
var toto:int=0
testB=Boolean(toto)
trace(testB)

false

Si vous testez avec toto:int=1 vous obtiendrez true dans la fenêtre de sortie…
Vous trouverez les tableaux de conversion sur la toujours même page de la doc

conversion implicite

Ceci implique que si on passe à un if une valeur non pas booléenne, mais un int par exemple, le lecteur va tout bonnement (et implicitement) effectuer la conversion afin d'évaluer la variable de type int comme si il s'agissait d'un Booléen.

var toto:int=0
if (toto){
   trace( "compris comme true")
}else{
   trace( "compris comme false")
}

compris comme false

Attention qu'on se comprenne bien : la variable considérée (ici toto) n'est pas convertie au sens transformée, elle vaut toujours ce qu'elle vaut, mais le if l'évalue comme le résultat d'une conversion vers un booléen.

Preuve :

var toto:int=1
if (toto){
   trace( "compris comme true")
}else{
   trace( "compris comme false")
}
trace("mais toto vaut toujours " + toto)

compris comme true
mais toto vaut toujours 1

Par ailleurs, on sait que si on passe à un if autre chose qu'une valeur booléenne (ou convertible), if évalue l'expression. Dit autrement : fait un calcul ou exécute une fonction et utilise le résultat (en le convertissant au besoin).

Si je rappelle que le lecteur lit de droite à gauche…
…je pense que les choses commencent à vous devenir plus claires

Comment ça non ?

Voici le genre de test qui peut vous faire croire que ça marche quand même si on confond comparaison et affectation :

var toto:int=8;
if(toto=0){ // ATTENTION erreur !!! c'est une affectation !
  trace("vrai");
}else{
  trace("faux");
}

faux

Ayez la curiosité de tracer toto en sortie de code :

var toto:int=8;
if(toto=0){
  trace("vrai");
}else{
  trace("faux");
}
trace("toto vaut "+toto)

faux
toto vaut 0

Je vous laisse vous livrer à différent tests avec des valeurs différentes pour toto, et je finis de raconter ce qu'il se passe pour ceux qui voudraient confirmation de leur intuition :

Le lecteur arrive sur cette ligne :

if(toto=0){

D'abord, il rencontre zéro.
Très bien, il “s'en souvient, le garde en tête”.
Puis il rencontre l'opérateur d'affectation = (égal).
Ah ah ! Il va donc s'agir pour lui de valoriser ce qui est tout de suite à gauche de cet opérateur avec ce qu'il “a en tête”, à savoir zéro.
Il le fait. toto vaut maintenant zéro et c'est ce toto qui doit être “traité” par le if.
C'est un int, qu'à cela ne tienne, hop conversion implicite, et nous voici avec l'équivalent de cette ligne :

if(false){ ...

Non seulement ça ne “marche” pas, mais en plus ça change la valeur de toto, ce qui risque de coller un fameux bronks dans le reste du code

Pause exo : un quizz de grammaire

Revenons à nos moutons après cette indispensable digression. C'est le moment de vérifier qu'on a tout bien compris et de se faire la main, sur un exemple un peu concret.

On dirait que …

Bénévoles pour association d'aide aux devoirs, nous avons décidé de faire un petit truc destiné à réviser la conjugaison de l'impératif.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Regardez bien ce qu'il se passe selon qu'on écrit : chante, chantes, prends, prend, va ou vas…
Constatez que la casse de caractère importe peu.
Et dites vous que vous savez le faire

Bien sûr il y a de multiples moyens de s'y prendre, mais d'une façon comme d'une autre il va falloir avoir recours aux if, avec ou sans else, sur une ligne ou entre accolades, chacun son goût.

J'ai choisi de ne pas me compliquer pour le corrigé que je vous propose :
• un bouton (btOK),
• trois clips construits pareil⁵⁾ : un champ de saisie nommé txtSaisie et le texte statique idoine autours,
• enfin un champ dynamique nommé txtSortie pour afficher les commentaires.
… et un peu de code

Essayez à votre sauce et reportez vous aux sources en cas de souci :)

Pour retrouver les propriétés qui rendent les textes non sélectionnables après que la bonne réponse a été validée et virent la bordure, je vous renvoie à la doc

Les opérateurs logiques

Dernière ligne droite !

Ne nous reste plus qu'à voir comment “combiner” plusieurs valeurs booléennes, s'assurer par exemple que plusieurs conditions sont vérifiées à la fois.

On va avoir recours aux opérateurs logiques ET et OU qu'on utilise avec deux opérandes (valeurs) booléens et qui renvoient vrai ou faux selon les valeurs considérées.

&& (ET)

Il se note && et s'utilise comme suit :

var resultat:Boolean= varBool1 && varBool2 ;

Dit à ma façon : pour qu'il renvoie vrai il faut que les deux opérandes vaillent vrai.

La doc l'exprime différemment et dresse le tableau qui va bien, je fais l'économie de le reproduire, allez le consulter

Si vous voulez tester :

var nomAnimal:String="lapin";
var nomPoisson:String="carpe"
 
if(nomAnimal=="lapin" && nomPoisson=="carpe"){
    trace("passe dans vrai");
}else {
    trace("passe dans faux");
}

passe dans vrai

var nomAnimal:String="lapin";
var nomPoisson:String="carpe"
 
if(nomAnimal=="lion" && nomPoisson=="carpe"){
    trace("passe dans vrai");
}else {
    trace("passe dans faux");
}

passe dans faux

C'est le membre de gauche qui est évalué d'abord

… me souffle-t-on à l'oreillette…

Opération capilotomie :

On est d'accord : il faut que les deux opérandes vaillent vrai pour que l'opérateur logique ET renvoie lui aussi vrai. Il suffit donc que l'un des deux vaille faux pour que de façon certaine on obtienne faux, quelque soit la valeur du second. Il n'est par conséquent pas utile d'évaluer le deuxième opérande dès lors que le premier vaux faux. Reste à savoir qui est évalué en premier, et bien c'est le membre de gauche.

Vérifions :
On sait (lien à venir) que la valeur par défaut des objets de type complexe c'est null. Par conséquent toute opération sur une variable de type TextField (au hasard) va générer une erreur :

var t:TextField; // seulement déclarée, vaut null
trace(t.visible); // l'éternelle erreur 1009

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.

Et maintenant :

var t:TextField;// seulement déclarée, vaut null
var toto:int=10;
 
if (toto>89 && t.visible ) {// toto>89 évalué d'abord, renvoie faux, l'autre membre n'est pas évalué
	trace("O_O");// pour écrire un truc on n'y passera pas, ce n'est pas ce qu'on teste 
}
trace("suite du traitement");

var t:TextField;// seulement déclarée, vaut null
var toto:int=10;
 
if (t.visible && toto>89 ) {// t.visible évalué d'abord, ça crie :D
	trace("O_O");
}
trace("suite du traitement");

Oui, bon, certes, et alors ? Râlerons les plus alertes de ceux qui ont survécu à ce (trop ?) long exposé …
Eh bien d'abord il est bon de le savoir, ça fait de la culture Et puis aussi, dans les cas où on chasse les performances, si l'un des deux membres est une fonction qui effectue de lourds calculs, on peut toujours choisir qu'elle ne soit invoquée que si ça vaut le coup, à savoir si l'autre opérande vaut vrai…

Privilégiez :

if(toto==10 && laFonctionAuxDixMilliardsDeCalculs())

if( laFonctionAuxDixMilliardsDeCalculs() && toto==10)

|| (OU)

Il se note || et s'utilise comme suit :

var resultat:Boolean= varBool1 || varBool2 ;

Pour obtenir le caractère | c'est alt-maj-L depuis un mac et (à compléter par le premier pécéïste passant dans le coin).
L'opérateur OU renvoie vrai si l'un des deux opérandes vaut vrai.

Je vous renvoie aussi au beau tableau de la doc.
Si vous voulez tester :

var nomAnimal:String="lapin";
var nomPoisson:String="carpe"
 
if(nomAnimal=="lapin" || nomPoisson=="carpe"){
    trace("passe dans vrai");
}else {
    trace("passe dans faux");
}

passe dans vrai

var nomAnimal:String="lapin";
var nomPoisson:String="carpe"
 
if(nomAnimal=="lion" || nomPoisson=="carpe"){
    trace("passe dans vrai");
}else {
    trace("passe dans faux");
}

passe dans vrai

! (NOT)

C'est un opérateur logique unaire (comprendre qui admet un seul opérande), il a pour conséquence d'inverser la valeur Booléenne d’une variable ou d’une expression. Ça, c'est la doc qui le dit, ne vous laissez pas abuser, il renvoie la valeur inverse, mais ne modifie en aucun cas l'opérande considéré

var b:Boolean=true;
 
trace(!b);
trace(b);// b vaut toujours true

false
true

Imaginons une variable magasinOuvert, booléenne, qui vaut vrai quand le magasin est ouvert et faux dans le cas contraire.
Imaginons qu'on vous donne la consigne suivante : si le magasin est ouvert on le ferme, sinon (il est fermé) on l'ouvre (je parle bien entendu de mettre la variable à jour)

Attention piège… Ce n'est pas parce qu'on emploie assez spontanément un si, qu'il faut vous précipiter sur le if. Ceci, est une mauvaise idée :

if(magasinOuvert){
   magasinOuvert=false;
else{
   magasinOuvert=true;
}

Vous voyez comment vous y prendre plus simplement (donc plus rapidement pour vous et pour le programme) ?

Allez, je le formule différemment, en fait il s'agit d'inverser la valeur de la booléenne… Dit encore autrement je vais affecter à la variable le contraire de ce qu'elle vaut :

magasinOuvert=!magasinOuvert;

Je rappelle que “le processeur lit les lignes d'instruction depuis la droite”. Ce qui se passe, c'est donc la chose suivante : d'abord l'expression !magasinOuvert est évaluée, puis c'est cette valeur qui est attribuée à la variable.

L'opérateur ternaire ?:

Attention, ce n'est pas une structure de contrôle !
Mais puisqu'il rend quelque fois le même service qu'un if, autant en parler.

On l'utilise quand on veut valoriser une variable différemment selon qu'une condition est vérifiée ou pas. Et puisque ce n'est jamais qu'une alternative à la structure si, je vous la présente, non pas en français mais en AS3… ça changera

var age:int=28;
var commentaire:String;
if(age<18){
   commentaire="pas majeur";
} else {
   commentaire="majeur";
}

Ici, la variable commentaire vaut pas majeur ou majeur selon que âge est inférieur à 18 ou pas. C'est la même variable qu'on valorise dans un cas ou l'autre.

A l'aide de l'opérateur ternaire on écrira :

 commentaire=(age<18)?"pas majeur":"majeur";

En français : commentaire vaut …ummf j'en sais rien, ça dépend… age est-il inférieur à 18 ? si oui “pas majeur” sinon “majeur”.

bien sûr, libre à vous de l'écrire dans l'autre sens :

 commentaire=(age>=18)?"majeur":"pas majeur";

Quant aux parenthèses elles sont superflues, je les ai mises pour faciliter la lecture.

commentaire=age>=18?"majeur":"pas majeur";

Une fois de plus pour m'exprimer rapidement j'ai parlé de condition, vous n'êtes pas dupe : il s'agit bel et bien d'une valeur booléenne

Conclusion

Et bien voilà, c'en est fini pour ce qui concerne la structure if. Je ne surcharge pas ce tuto d'exercices, on va, à partir de maintenant, y avoir suffisamment recours pour que vous ayez très largement l'occasion de vous faire la main

¹⁾ vous rencontrerez souvent suivi d'une seule instruction

²⁾ cmd-Maj-F

³⁾ C'est comme si vous demandiez : “Est-ce que vrai est égal à vrai ?” (quand unClip.visible vaut true)
Ou : “Est-ce que faux est égal à vrai ?”(quand unClip.visible vaut false)

⁴⁾ Flash Player

⁵⁾ on duplique les deux derniers, du coup