www.Art-Flashie.com ::
 
   
 
   
 
Tutoriels - Flash - Programmation fichier source



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



_root.onEnterFrame = function() {

createEmptyMovieClip("ligne", 1);
ligne.lineStyle(1, 0x000000, 100);
ligne.moveTo(point1._x, point1._y);
ligne.lineTo(point2._x, point2._y);

};


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.



Tous droits réservés 2003 Jérémie Cook