 |
|
|
|
|
|
|
|
|
|
|
Traduction: Philippe Allouche
|
||||
|
||||
|
||||
Une discussion enflammée sur Flashpad m'a orienté vers le site Infinovation, où j'ai vu cet effet intelligent. Cela m'a demandé un certain temps pour comprendre comment il avait été obtenu (jusqu'à que je comprenne l'utilisation de la commande Scale pour dessiner la ligne -- c'est évident quand vous l'avez compris !). Voilà le fichier .fla zippé.
Ma première version était un embrouillamini sans nom mais après avoir trifouiller l'action Duplicate Movie Clip sur un autre projet, j'ai réalisé qu'on pouvait faire beaucoup plus simple. De ce qui a été dit sur Flashpad, je pense que c'est cette technique qui a été utilisée pour l'obtention de l'original.
Ce n'est pas de la physique thermonucléaire mais on utilise ici quelques trucs intelligents qui ne sont peut être pas si évidents quand on les voit pour la première fois. Si je peux me permettre ...
Ok, d'abord vous devez comprendre ce qui se passe. Une fois par image on récupère la position de la souris et on dessine une ligne de l'endroit où elle se trouvait à l'image précédente jusqu'à l'endroit où elle se trouve à présent ( et on laisse une trace de 'vieilles lignes' qui s'effacent graduellement). Si vous ne le savez pas déjà, on peut obtenir les coordonnées de la souris en créant un clip d'animation vide (appelé tracker dans l'exemple), en le déposant sur la scène principale et en appliquant l'action suivante à la première image:
INFOS
TRADUCTIONS
English
FICHIERS
Start Drag ("/tracker", lockcenter)
Ensuite on utilise la commande GetProperty pour trouver les valeurs en x et en y de /tracker, on obtient ainsi les coordonnées de la souris.
Comme c'est souvent le cas, le plus dur du travail est fait dans un clip d'animation 'control'. Il est lu en boucle une fois par image et à chaque image il exécute un tas d'actions pour détecter la position de la souris et dessiner la ligne. Vous trouverez ces actions dans l'image un du clip d'animation appelé control.
En fait c'est (à mon opinion) la partie la plus intelligente de cette technique. On ne peut pas demander à Flash 4 de dessiner une ligne entre des points A et B, alors on va utiliser une bidouille avec la commande Scale. On crée une ligne à 45° (appelée Line) et dont la largeur et la longueur sont de 100 pixels exactement dans un clip d'animation, puis on place ce dernier dans la scène principale et on lui donne un nom d'occurrence. En récupérant les coordonnées de la souris (avec la technique décrite ci-dessus) on va placer une réplique de ce clip d'animation à l'ancienne position de la souris (qui est sauvegardée dans les variables /:OldX et /:OldY) et le redimensionner (commande Scale) dans la direction X et la direction Y par la différence entre les anciennes coordonnées et les nouvelles (NewX et NewY). Voilà à quoi ressemble l'action :
Set Variable: "Line" = "NewLine"&/:Counter
Duplicate Movie Clip ("/Line", Line, /:Counter)
Set Variable: "Line" = "/"&Line
Set Variable: "NewX" = GetProperty ("/tracker",_x)
Set Variable: "NewY" = GetProperty ("/tracker",_y)
Set Property (Line, X Position) = /:OldX
Set Property (Line, Y Position) = /:OldY
Set Property (Line, X Scale) = NewX-/:OldX
Set Property (Line, Y Scale) = NewY-/:OldY
La première ligne de code crée simplement une variable avec le nom de la ligne que nous allons créer --NewLine plus la valeur courante du compteur (Counter), qui s'incrémente de un à chaque boucle du clip d'animation. Ensuite nous utilisons la commande Duplicate Movie Clip pour créer une nouvelle copie de notre ligne, en se servant de Counter comme valeur de profondeur (chaque copie de notre ligne doit être à une profondeur de calque différente, comme les calques d'une animation). On ajoute ensuite un "/" au début du nom de notre nouvelle ligne, et on utilise la commande GetProperty pour trouver les nouvelles coordonnées de la souris. Les quatre dernières lignes positionnent notre nouveau clip de ligne et règlent son échelle (scale) aux valeurs NewX-/:OldX en X Scale et NewY-/:OldY en Y Scale.
Tête de linotte que je suis, je pensais à l'origine qu'il était nécessaire d'utiliser une bidouille de mise à l'échelle pour créer une ligne qui ne s'épaissit pas quand on la redimensionne. On m'a démontré depuis (Dan Wright--Merci Dan) qu'on peut obtenir le même résultat avec le trait le plus fin (Hairline, marqué par un H dans le menu d'épaisseurs des traits). Appelez moi Simplet...
Voilà. Il y a d'autres choses que vous devez faire pour faire fonctionner tout ça, mais vous devrez voir par vous-même dans le .fla-- il n'y a rien de très compliqué.
Bon courage !
All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.