target et currenTarget (AS3)

Bonjour à tous, voici un petit tutoriel sur les propriétés target et currentTarget. Ces propriétés sont indispensables pour le ciblage de vos projets. Ce tutoriel à pour but de démontrer comment il est possible de ciblé des évènements bien distinct dans un ensemble de clips pour pouvoir les différencier et leur appliquer une fonction selon l'événement d'un ou de plusieurs clips. À la base ce tutoriel fut créé pour une personne d'un autre forum, mais bien évidemment je me devais de le partager avec vous. Je sais que nous sommes une petite minorité à coder en as3 sur ce forum, mais qui sait, peut-être que ceci servira aux membres qui souhaitent mieux comprendre les généralités de l'as3.

Voici un petit exemple de l'utilité de ces deux paramètres, je vous conseille de voir le tutoriel avant, pour mieux comprendre le fonctionnement de cet exemple:


Le tutoriel:

j'ai essayé donc, ce tutorial. Il fonctionne bien cependant j'aurai
aimé le modifié et faire comme le tien c'est à dire ajouter des btns,
rollOver et rollOut dessus et puis changer donc aussi 'target' et
'currenttarget'.

Pourrais tu m'aiguiller?

Je te montre ce que j'ai déjà fait.

Code:

ensemble_mc.addEventListener(MouseEvent.MOUSE_DOWN,deplacer);
ensemble_mc.addEventListener(MouseEvent.MOUSE_UP,arreter);

//---------------------Creation des btn-----//
var btnMovieclipTarget:MovieClip = new MovieClip();
var btnMovieclipCurrent:MovieClip = new MovieClip();
addChild(btnMovieclipTarget);
addChild(btnMovieclipCurrent);
btnMovieclipTarget.graphics.beginFill(0x000000);
btnMovieclipCurrent.graphics.beginFill(0x000000);
btnMovieclipTarget.graphics.drawRect(0,0,100,20);
btnMovieclipCurrent.graphics.drawRect(0,0,100,20);
btnMovieclipTarget.x = 0;
btnMovieclipTarget.y = 180;
btnMovieclipCurrent.x = 105;
btnMovieclipCurrent.y = 180;
    //RollOver des btn-----//
btnMovieclipTarget.addEventListener(MouseEvent.MOUSE_OVER,rollOverSouris);
btnMovieclipTarget.addEventListener(MouseEvent.MOUSE_OUT,rollOutSouris);
btnMovieclipCurrent.addEventListener(MouseEvent.MOUSE_OVER,rollOverSouris);
btnMovieclipCurrent.addEventListener(MouseEvent.MOUSE_OUT,rollOutSouris);
function rollOverSouris(pEvt:MouseEvent){
    pEvt.graphics.beginFill(0x00FF00);
}
function rollOutSouris(pEvt:MouseEvent){
    pEvt.graphics.beginFill(0x000000);
}

//---------Creation des champs de texte-----//
var champtarget:TextField = new TextField();
var champcurrenttarget:TextField = new TextField();
addChild(champtarget);
addChild(champcurrenttarget);
champtarget.width = 100;
champtarget.textColor = 0xCCCCCC;
champtarget.x = 32;
champtarget.y = 182;
champtarget.text = "target";
champcurrenttarget.width = 100;
champcurrenttarget.textColor = 0xCCCCCC;
champcurrenttarget.x = 122;
champcurrenttarget.y = 182;
champcurrenttarget.text = "currenttarget";

//-------------Creation des 2 fonctions-----//
function deplacer(pEvt:MouseEvent){
    pEvt.target.startDrag();
}

function arreter(pEvt:MouseEvent){
    stopDrag();
}

En fait tu veux faire quoi exactement, créer une multitude de boutons et leurs attribuer différents états (over et out), c'est bien ça?

Et bien, je voulais simplement faire exactement comme toi dans ton exemple tout en haut (pas la vidéo).
Donc créer des btns (que j'ai crée en clip directement en AS3), quand tu cliques sur celui de gauche, tu utilises target et quand tu cliques sur celui de droite, tu utiles currenttarget. Seulement je veux tout faire en AS3.
De plus, je rajoute en AS3 des fonctions RollOver et RollOut sur ces btns afin de changer la couleur de mes 2 clips "btnMovieclipTarget" et "btnMovieclipCurrent"

A savoir aussi que je n'ai pas encore créer de champ texte où l'on voit marquer quelle fonction on utilise, à vrai dire j'aurai aimer trouver l'autre solution qui serait de faire afficher une fleche au dessus du btn de gauche si on utilise target et qui se mettrai au dessus de celui de droite si on utilise currenttarget.

Est ce que j'ai réussi à me faire comprendre lol ? J'ai un peu de mal parfois, dsl

Non, c'est trés clair, si tu veux je peux me pencher là dessus, une fois ceci fait, je te mettrais sur la voie, ok?

je veux bien, merci

dans le code que j'ai mis plus haut
juste au dessus de

Code:

//---------Creation des champs de texte-----//

j'ai voulu créer 2 fonctions. Seulement, c'est évidement incomplé car je suis un peu bloqué pour le moment.

Je ne sais pas si c'est ce que tu souhaite faire, mais voici une application, qui ne contient aucun élément qui ne soit pas codé en as3, pour le rollOver et rollOut, j'ai appliqué des filtre (glow et drapShow), le texte les bouton, le background sont créé dynamiquement, voici ce que sa donne:


Et voici le code:

Code:


import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;

//-----------------------------------------------------------Initialisation
var _result:TextField = new TextField();
var bg:Shape  = new Shape();
var btn1:Shape = new Shape();
var btn2:Shape = new Shape();
var bt1:MovieClip = new MovieClip();
var bt2:MovieClip = new MovieClip();
var Ar:Array = new Array();
var cont:MovieClip = new MovieClip();

//------------------------------------------------------------Création
//---○○○--Background--○○○\\
bg.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x000000, 0x484848], [1, 1, 1], [0, 100, 255]);// Le rectangle sera rempli avec un dégradé
bg.graphics.drawRect(0, 0, 300, 300);// dessin du rectangle avec la méthode drawRect(x, y, width, height)

//---○○○--btn1--○○○\\
btn1.graphics.lineStyle(0, 0, 0);
btn1.graphics.beginFill(0x000000, 1);
btn1.graphics.drawRect(0, 0, 100, 30);
btn1.graphics.endFill();

//---○○○--btn2--○○○\\
btn2.graphics.lineStyle(0, 0, 0);
btn2.graphics.beginFill(0x000000, 1);
btn2.graphics.drawRect(0, 0, 100, 30);
btn2.graphics.endFill();

//---------------------------------------------------------------DropShadow
var ombrePortee:DropShadowFilter = new DropShadowFilter();
ombrePortee.quality = BitmapFilterQuality.HIGH;
ombrePortee.strength = 1;
ombrePortee.blurX = 3;
ombrePortee.blurY = 3;
ombrePortee.distance = 4;
ombrePortee.angle = 40;
ombrePortee.alpha=0.7;
var serieDeFiltres:Array = new Array();
serieDeFiltres.push(ombrePortee);

//---------------------------------------------------------------Glow
var glow:GlowFilter = new GlowFilter();
glow.color = 0xFFFFFF;
glow.alpha = 0.3;
glow.blurX = 10;
glow.blurY = 10;
glow.quality = BitmapFilterQuality.HIGH;
glow.inner = true;

//---------------------------------------------------------Affichage,init
addChild(bg);
addChild (cont);
addChild ( _result );
cont.addChild ( bt1 );
cont.addChild ( bt2 );
bt1.addChild (btn1);
bt2.addChild (btn2);
bt1.name = "bt1";
bt2.name = "bt2";
bt1.x = 50;
bt2.x = 151;
bt1.y = (stage.stageHeight -bt1.height)/2;
bt2.y = (stage.stageHeight -bt2.height)/2;

//---------------------------------------------------------Texte resultat
//---○○○--format--○○○\\
var _format:TextFormat = new TextFormat();
_format.font = "Eras Bold ITC";
_format.size = 13;
_format.color = 0x2B6DA4;
_format.align = TextFormatAlign.CENTER;

//---○○○--paramètrage--○○○\\
_result.x =(stage.stageWidth -bt2.width)/2;
_result.y = 250;
_result.width = 100;
_result.selectable =false;
_result.defaultTextFormat = _format;

//----------------------------------------------------------------Ecouteurs
bt1.addEventListener("mouseOver",over1);
bt2.addEventListener("mouseOver",over2);
bt1.addEventListener("mouseOut",out1);
bt2.addEventListener("mouseOut",out2);
cont.addEventListener("mouseDown",clic);
cont.addEventListener("mouseUp",declic);

//----------------------------------------------------------------Functions
function over1(pEvt:MouseEvent){
   bt1.buttonMode = true;
   btn1.filters=serieDeFiltres

   trace (pEvt.target.name);
}
function over2(pEvt:MouseEvent){
   bt2.buttonMode = true;
   btn2.filters=serieDeFiltres

   trace (pEvt.target.name);
}
function out1 (pEvt:MouseEvent){
   btn1.filters=[glow];
}
function out2(pEvt:MouseEvent){
   btn2.filters=[glow];
}
function clic (pEvt:MouseEvent){
   if (pEvt.target.name == "bt1"){
      _result.text = "currentTarget";
      pEvt.currentTarget.startDrag();
      }
      else if (pEvt.target.name == "bt2"){
         _result.text = "target";
         pEvt.target.startDrag();
   }
}
function declic (pEvt:MouseEvent){
   if (pEvt.target.name == "bt1"){
      pEvt.currentTarget.stopDrag();
   }
      else if (pEvt.target.name == "bt2"){
         pEvt.target.stopDrag();
   }
}


ok, jte remercie, jvais travailler un peu là dessus et voir si j'arrive à refaire tout çà, seul ! Tu m'as apporté qq idées supplémentaires avec le dropshadowfilter et le glowFilter. J'avais déjà essayé en AS2, mais tant qu'à faire, autant essayer d'utiliser çà aussi, ca me fera un truc de plus! Enfin, le plus important c'est quand même le reste.


EDIT:
je suis en train de regarder ton code et je me pose qq questions le concernant.

1) Quand est ce que tu utilises le "endFill();" car dans les codes précédents, quand tu crées une forme, tu n'as pas mis de "endFill();" et là tu en mets, je ne comprends pas pk?

Code:

btn1.graphics.lineStyle(0, 0, 0);
btn1.graphics.beginFill(0x000000, 1);
btn1.graphics.drawRect(0, 0, 100, 30);
btn1.graphics.endFill();

2) Concernant ta déclaration de variables, pk tu déclares celle-ci? Je ne la vois pas réutilisée dans ton code.

Code:

var Ar:Array = new Array();

3) Dans la création de "dropShadow"; tu écris ceci

Code:

var serieDeFiltres:Array = new Array();
serieDeFiltres.push(ombrePortee);

Peux tu m'expliquer rapidement ce que fais le ".push(ombrePortee)"
Je me suis permis de ne pas cherché sur le net car je pense que tu expliques différement et surtout mieux les choses.


voilà voilà, pour le moment, pas d'autres questions dsl de te faire bosser.

c'est ce que je viens de voir dans le long pâté que je lis pour l'apprentissage de l'AS3, très précieux ce currentTarget

Parcontre je m'interroge sur quelque chose, étant newbie en AS 3
comme je le répète je lis le 'pratique de l'ActionScript 3' pavé de 1100 pages
et il me semble qu'il parle d'utiliser la fonction currentTarget et Target par rapport à des phases de 'propagation événementielle' en l'ocurrence la phase de capture et la phase cible, avec la propriétés "Usecapture" qui est par défaut en false me semble-t-il.
Il semblerait d'après ton tuto vidéo que tu ne procèdes pas de la même manière, j'en viens à ma question^^
ya-t-il un quelconque inconvénient de procéder comme tu l'as fait à travers ton tuto vidéo (c'est-à-dire sans utiliser les divers 'phases de propagations') ?
Merci de m'aviser

P.S : Funny le msn pendant le tuto :p

Alors dans mon tutoriel j'utilise la phase cible, si j'avais utilisé la phase de capture, je n'aurais pu mettre en place la petite application proposé en exemple. Il faut aussi savoir que la plus part du temps la phase de capture est mise de côté et n'est utilisé que dans de très rare cas. Donc non il n'y a aucun inconvénient à utiliser la technique de mon tutoriel.

Sinon, pour le msn, il va vraiment falloir que je pense à le couper avant le début de mes formations !!!!

D'accord
Merci de ta précision
P.S : SInon LOOOOOOOOOL :p