des bases du drag'n drop aux fonctions plus compliquées.
intro
ce tutoriel s'adresse aussi bien au débutants qu'aux programmeurs
plus confirmés. si certains passages sont très simple, passez
aux suivants.
flash contient une méthode de drag'n drop (startDrag) qui suffira
a bien des cas. pour une programmation plus avancée, elle s'avèrera
pourtant assez incomplète. nous allons voir comment créer
nous même nos fonctions drag'n drop, aux possibilités plus
étendues que celles proposées par flash5.
ce tutoriel servira de base à de nombreux autres.
prérequis
on commence au tout début. pas de connaissance en particulier requise.
I techniques de drag
dessinez un cercle, selectionnez le, et appuyez sur F8 (convertir en symbole)
choisissez 'clip' et appelez le 'point'.
mieux vaut lui donner un nom d'instance (ctrl + I), même si dans ce
cas précis c'est inutile.
'point' toujours selectionné, bouton droit > actions.
en mode normal, choisissez dans 'actions' startDrag, dans cible, écrivez
'this' (sans les guillemets), cochez 'expression' et 'vérouiller
la souris au centre'.
voici le code que vous devez obtenir (s'il y a des erreurs dans votre script,
corrigez les):
onClipEvent (load) {
startDrag (this, true);
}
c'est tout.
pour arreter de dragger un objet, vous avez la fonction stopDrag.
avec startDrag, vous ne pouvez déplacer qu'un objet à la fois.
voici le résultat (passez la souris dessus) :
c'est bien mais c'est pas du tout ce qu'on voudrait. il faudrait que le
point se déplace uniquement lorsqu'on clique dessus.
il faut donc un bouton qui commande le drag'n drop :
II le drag'n drop de base
on arrive à une grande notions de flash: les clips dans les clips,
les boutons dans les clips etc.
un clip seul ne suffit pas à effectuer un drag'n drop, un bouton
non plus, puisqu'on ne peut pas dragger un bouton.
nous devonssez bouton & appelez le 'drag'.
bouton droit > actionss donc créer un bouton à l'intérieur
du clip. lorsqu'on clique dessus, il déplace le clip 'point', et
par consequent, lui avec.
sur la scène dans flash, selectionnez 'point', bouton droit >
actions, et effacez tout le code précedent.
maintenant double-cliquez sur 'point' pour editez le clip.
selectionnez le tracé du cercle et appuyez sur F8 (convertir en symbole),
cette fois choisissez bouton et appelez le 'drag'.
encore une fois, en mode normal, double cliquez sur 'startDrag' dans cible
écrivez 'this' et cochez 'expression' et 'vérouiller la souris
au centre', selectionnez la premiere ligne du code, dechochez 'relacher'
et cochez 'appuyer'.
maintenant, selctionnez la derniere ligne du code (juste une '}') et double
cliquez sur stopDrag (dans la liste), et ajoutez dans la liste 'relacher
à l'exterieur'
voici au final, le code que vous devez avoir :
on (press) {
startDrag (this, true);
}
on (release, releaseOutside) {
stopDrag ();
}
et voici le résultat :
vous connaissez maintenant le drag'n drop de base et le principe du bouton
dans un clip.
cette méthode est toutefois assez limitée.
on passe au niveau au dessus, si vous avez assimilé ces principes,
vous n'aurez pas de difficultés.
III créer un nouvelle méthode de drag'n drop
le principe est simple, on crée un variable booléenne, c'est
à dire qu'elle ne peut prendre que deux valeur : vrai ou faux. si
elle est fausse, on ne touche à rien, si elle est vraie, on donne
a 'point' les mêmes coordonnées que celles du pointeur de la
souris.
// rappel
position x du pointeur :
_root._xmouse
position y du pointeur :
_root._ymouse
position x du clip 'point' :
this._x
position y du clip 'point' :
this.y
l'expression 'this' correspond au clip
d'où est executé le script.
continuez toujours avec le même fichier flash. retournez dans les
actions du bouton comme précédement.
passez en mode expert, selectionnez la ligne : startDrag (this, true);
et remplacez la par : deplacement = true;
de même, remplacez stopDrag ();
par deplacement = false;
revenez sur la scène principale, selectionnez 'point' et éditez
ses actions (bouton droit > actions)
on teste la variable déplacement, si elle est vraie, on déplace
l'objet, sinon rien.
en mode expert, toujours, il ne reste plus qu'à insérer le
code suivant.
// avec onClipEvent(enterFrame), le code s'execute
presque
// en continu, c'est à dire en boucle.
onClipEvent(enterFrame)
{
// test de la variable deplacement
// if (deplacement) equivaut à if (deplacement == true)
// donc si deplacement est vraie, alors :
if (deplacement)
{
this._x = _root._xmouse;
this._y = _root._ymouse;
}
}
voilà : le même résultat que précédement,
mais cette fois vous pouvez contrôler les coordonnées du clip
'point', regardez pour exemple le tutoriel pour un drag'n drop en arc de
cercle.
les possibilités offertes par cette méthode sont multiples
à conditions d'avoir quelques bases de programmation, et les notions
abordées dans ce tutoriel vous serviront souvent avec la programmation
flash.
de plus le fait d'avoir créé vous-même votre méthode
pour permet de connaitre exactement son utilisation et ses limites.
