- · Niveau : INTERMÉDIAIRE
- · Compatibilité : Flash 5
- · Fichier à télécharger
Pour déplacer un élément dans flash, il faut 2 choses :
1- Un script qui appelle et défini les commandes (Start et Stop Drag)
2- Un MovieClip qui sera l’élément "Draggable".
Drag Simple ou non-contraint:
Méthode avec bouton
a) Mettre le script suivant dans un bouton:
on (press) {
startDrag (this);
}
on (release) {
stopDrag ();
}
b) Transformer ce bouton en MovieClip:
Sélectionner le bouton > Insert > Convert
to symbol > MovieClip
c) Ça-y-est vous avez un élément "Draggable" !
Drag Contraint:
a) Mèttre le script suivant dans un bouton:
on (press) {
startDrag (this, false, (0) , (0) , (100) , (100);
}
on (release) {
stopDrag ();
}
b) Transformer ce bouton en MovieClip:
Sélectionner le bouton > Insert > Convert
to symbol > MovieClip
c) Ce script va contraindre le déplacement possible de l’élément dans un carré de 100px par 100px dont l’origine est située à (0, 0) (soit le coin supérieur gauche de votre flash)
NB: (this) Est une expression qui signifie que le script est en référence au MovieClip lui-même.
Notre exemple (Drag Dynamique):
Cet exemple utilise les 2 type de Drag dont nous venons de discutter. Le petit élément "carré" est contraint dans son déplacement par les dimensions de l’élément "carré" plus gros. Celui-ci n’est pas contraint et peut être déplacé librement (à l’intérieur du flash...;-)
La particularité de notre exemple est que les consignes de contraintes sont dynamiques. i.e. Elles sont rattachées au gros "carré" peut importe où il se trouve dans le flash. Le petit "carré" est donc contraint à des références x, y ( gauche, droit, haut, bas) définies par la position du gros "carré". Deplus pour assurer la précision graphique de ces contraintes, il faut tenir compte des dimensions du petit "carré" lui-même (this._height) et (this._width).
Quoi de mieux que de tenter l’expérience par vous-même !
Voici le script à mettre dans le bouton du petit "carré":
on (press) {
startDrag (this, false, (_root.espace1._x) , (_root.espace1._y) ,
Number(_root.espace1._x) + Number(_root.espace1._width) - this._width, Number(_root.espace1._y)
+ Number(_root.espace1._height) - this._height);
}
on (release) {
stopDrag ();
}
N.B. ( _root.espace1) est le nom d’instance du movieClip qui défini l’élément: GROS "carré"
Variations:
Notter qu’il est aussi possible de "Dragger" un élément (MovieClip)en mettant
le script directement dans le movie clip comme ceci:
onClipEvent (mouseDown)
{
this.startDrag();
}
onClipEvent (mouseUp) {
this.stopDrag();
}