Easy-Micro [ ACTIONSCRIPT - Créer un clip ] - Formations informatiques pour entreprises

ActionScript
Créer un clip
Créer un clip dynamiquement

Créer un clip dynamiquement
Pour créer un clip, on utilise le constructeur new MovieClip().

Créer un clip (AS3)
//Rien sur la scène, rien dans la bibliothèque

var monclip:MovieClip = new MovieClip();
this.addChild(monclip); // Affichage du clip

Le clip est là mais il reste invisible car sans remplissage. Le positionnement du clip sur la scène est réalisé par la méthode addChild() de la classe DisplayObject.

Profondeur de clip
La profondeur est dynamique en AS3. La première instance ajoutée avec addChild sera à l'arrière plan, la dernière sera au premier plan.
La notion de profondeur pourra être gérée avec la méthode addChildAt(nom_d_instance, num_d_index) où l'index le plus élevé est au premier plan :

Exemple de création de clip avec une profondeur (AS3)
var monclip:MovieClip = new MovieClip();
this.addChildAt(monclip,1);

En AS3 on ne peut plus positionner un clip directement sur une profondeur spécifique. Afin d'agir sur un clip dont-on connais la profondeur, on pourra utiliser la méthode getChildAt() qui attend un numéro de profondeur.

Pour modifier l'ordre d'empilement des clips, on utilise la méthode setChildIndex :
setChildIndex(monclip, 1);. monclip passe devant un autre clip qui chute automatiquement au niveau 0.

Un echange de profondeur est possible via la méthode swapChildren (ou swapChildrenAt) :
swapChildren(monclip1, monclip2);. Contrairement à la méthode setChildIndex, cette méthode ne modifie pas l'index des autres objets graphiques. Si nous rajoutons un appel à la méthode swapChildren, nous obtenons l'affichage de départ.

Nom d'occurence de clip
On peut donner un nom d'occurence à un clip : monclip.name ="nomdoccurence";

Si vous utiliser le code trace (monclip.name);, un nom d'occurence est automatiquement affecté.
Il est important de noter que l'on ne peut pas modifier un nom d'occurence d'unn clip créé depuis l'environnement auteur.

Pour cibler notre clip, on peut utiliser la méthode getChildByName (quoique un peu lente) :
trace (getChildByName ("nomdoccurence"));

Mais il est préférable d'utiliser la métode getChildAt qui permet de cibler un clip via sa profondeur:
trace (getChildAt(0));

Suprimer un clip
Pour suprimer un clip, on utilise la méthode removeChild sur un conteneur :
Attention, un removeChild(monclip); ne fait que faire disparaitre le clip, mais ne le supprime pas. Il le garde en mémoire. un addChild(monclip); le ferrait réapparaitre. Pour libérer la mémoire, nous devons passer ses références à null: monclip = null;, ce qui supprimera le clip au bout de quelques secondes.

Exemple

// Exemple de suppression de clip

if(brique1!=null) {
     if(brique1.hitTestObject(balle)) {
     v = -v;
     removeChild(brique1);
     brique1=null;
}
}

Remplir un clip
Pour remplir notre clip, toujours invisible, on utilisera la classe Graphics:

Créer et remplir un clip (AS3)
var monclip:MovieClip = new MovieClip();

monclip.graphics.beginFill(0x000088); // remplissage
monclip.graphics.drawRect(0, 0, 100, 50); // forme carré (pos. horizontal, pos. vertical, largeur, hauteur)
monclip.x = monclip.y = 200; // position

this.addChild(monclip); // Affichage du clip

Voir cet exemple dans la création dynamique de forme (n°16).

Le clip s'arrete tous seul :

function ecoute(evt) {
if (monclip1.currentFrame == monclip1.totalFrames) { monclip1.stop(); }
}

addEventListener(Event.ENTER_FRAME, ecoute);

Créer un bouton dynamiquement

En AS3, il est désormais possible de créer un bouton par programmation en utilisant les méthodes et propriétés de la classe SimpleButton (voir aussi l'exemple de création dynamique de forme).

Exemple de création de bouton (AS3)
//Rien sur la scène, rien dans la bibliothèque

var monbouton:SimpleButton = new SimpleButton();
...

Les états visuels de l'interface de dessin Flash d'un bouton (haut, dessus, abaissé et cliqué) sont représentés en AS3 par les 4 propriétés:
• upState : apparence normale du bouton
• overState : apparence du bouton avec le pointeur dessus
• downState : apparence du bouton lors du clic
• hitTestState : définit la zone qui réagit au clic de souris (zone invisible)

...
// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();

// affectation d'un texte pour le bouton (un label)
// 1 ligne au lieu de 4 (voir ci-dessous)
normal.text = survol.text = clic.text = "Valider";

// changement d'états
survol.textColor = 0xff0000;
clic.textColor = 0x0000ff;

// Valorisation des différentes propriétés
monbouton.upState = normal;
monbouton.overState = survol;
monbouton.downState = clic;
monbouton.hitTestState = normal;

// les 4 lignes ci-dessus peuvent-être remplacées par une seule :
// var monbouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);

// Format (facultatif)
var mformat:TextFormat = new TextFormat();
mformat.color = 0x0000FF;
mformat.font = "Arial";
mformat.size = 14;

// Application du format aux 3 zones de texte
normal.setTextFormat(mformat);
survol.setTextFormat(mformat);
clic.setTextFormat(mformat);

// affichage du bouton
this.addChild(monbouton);

Voir le tutorial Easy-Micro, Le clic (n°7) pour affecter une action à votre bouton.

< >