The front page All those lovely tutorials Other sites of interest More info about Stickman
Stickman

Dessiner une ligne entre deux points

Traduction: Philippe Allouche


Déplacez les cercles pour redessiner la ligne

 INFOS 

Version Flash 4
Niveau Intermediate
Créé 27 Avril 2000

 TRADUCTIONS 

English

 FICHIERS 

ZIP

FLA

En réponse à un échange sur le forum Were Here, où quelqu'un a demandé comment dessiner une ligne entre deux points. J'ai suggéré qu'on n'avait pas besoin de faire appel à des maths compliquées pour y parvenir, et j'ai créé ce fichier (que vous pouvez télécharger au format zip) pour le démontrer-- c'est une autre façon de se servir de l'effet 'distance', qui se trouve ici.

Cela semble familier...

Ce n'est pas une nouvelle technique : en fait je l'ai expérimentée pour la technique Ligne qui Suit la Souris, que j'avais vue à l'origine sur Infinovation. Je ne sais pas si c'est de leur crû ou s'il l'ont trouvé quelque part...

Quel est le truc ?

C'est vraiment très simple en fait. On commence avec une ligne en diagonale qui fait 100 pixels de haut sur 100 pixels de large (/line) -- comme on la voit quand on regarde le .swf au départ. Il y a un clip d'animation control qui contrôle constamment, et qui nous donne les quatres point clé variables (/:RedCircleX, /:RedCircleY, /:BlueCircleX, /:BlueCircleY) selon la position de /RedCircle et /BlueCircle (qui bien sûr sont déplacés avec Set Drag).

Le clip control ajuste alors la propriété en X et la propriété en Y de /line qui sont égales à /:RedCircleX et /:RedCircleY ce qui positionne un point extrême au centre du cercle rouge.

Ensuite on soustrait /:BlueCircleX de /:RedCircleX ce qui nous donne la variable xscale, puis /:BlueCircleY de /:RedCircleY pour donner la variable yscale. On obtient la distance horinzontale et verticale entre les deux cercles. En ajustant la propriété _xscale de /line à la valeur xscale et la propriété _yscale à la valeur yscale, on déforme la ligne de façon à ce que l'autre extrémité se trouve à présent au centre du cercle bleu.

Pourquoi l'action Duplicate Movie ?

Flash a quelques défauts qu'on peut éviter en dupliquant la ligne à chaque image.

D'abord si on redimensionne un clip à une valeur proche du zéro, il reste 'bloqué' et on ne pourra plus l'aggrandir (c'est un bug). Deuxièmement si on redimensionne un clip à une valeur négative, puis à nouveau à une valeur négative, les deux négatifs s'annulent et la valeur devient une valeur positive -- et la ligne commence à passer de négative à positive toutes les deux images (je ne sais pas si c'est un bug, ou si c'est intentionnel).

En utilisant Duplicate Movie à chaque image on remplace l'occurrence déformée de /line avec une version plus 'fraîche' de 100 x100 pixels.

C'est tout !

J'espère que j'ai été clair. N'hésitez pas à m'envoyer un mail à l'adresse ci-dessous si vous avez besoin d'aide.

Stickman

All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.