Relier deux points (méthode MX) (écrit par Jérémie )
comment relier deux objets en temps réel avec les
nouvelles possibilités de flash MX ?
intro
pour se familiariser un peu avec les outils de dessins de flash mx, voici
une nouvelle version d'un tutoriel existant déjà sur le site,
cette fois en utilisant la méthode mx.
attention, les notions évoquées dans le précécent
tutoriel restent tout de même interessante et utiles dans de nombreux
cas.
prérequis
comme pour d'autres tutoriels du site , il vaudrait mieux savoir utiliser
le drag'n drop. lisez attentivement le tutoriel sur ce sujet dans le site.
c'est tout ce dont vous aurez besoin pour comprendre ce tutoriel.
étape 1 - symboles
dessinez un rond, selectionnez-le et appuyez sur F8 (convertir en symbole).
choisissez "clip" et nommez le "point".
toujours selectionnez faite un copier coller pour avoir deux point identiques
sur la scène.
donnez au premier le nom d'occurence point1 et au dexième point2.
étape 2 - bouton
double cliquez sur l'un des points. créez un nouveau calque "actions",
éditez les actions et écrivez :
this.onPress = function () {
startDrag (this, true);
}
this.onRelease = this.onReleaseOutside = function () {
stopDrag ();
}
avec flash mx, plus besoin de créer des boutons, ces fonctions associées
au clip nous suffisent largement. (dans ce cas)
étape 3 - code
un gestionnaire d'évenement : il va falloir à chaque mouvement
effacer le trait précédent et en dessiner un nouveau. les
opérations les plus lentes avec flash sont celles liées à
des symboles graphiques (déplacement etc.) en programmation, le dessin
d'un trait et très rapide. pas de soucis donc pour l'abus de resources
systeme.
il suffit de placer l'ensemble des actions sur un seul des points.
sur la scène principale, créez un nouveau calque "actions",
sur la première frame, bouton droit > actions
lineStyle : 1 correspond à l'epaisseur, 0x000000 au code hexadécimal
de la couleur (0x remplace le # du html) et 100 la transparence.
moveTo : on se déplace jusqu'au point ...
lineTo : on trace une ligne jusqu'au point ...
un détail à régler, le trait apparait au dessus des
deux points.
on va donc écrire sous le code précédent
point1.swapDepths(2);
point2.swapDepths(3);
( tout en dessous, pas dans la fonction)
et voila.
étape 4- après propos
c'est terminé. pour ce tutoriel on n'a besoin que d'un trait. avec
plus de trait, et en coloriant les formes (toujours avec le dessin) on peut
obtenir des résultats bien plus complexes.