 |
 |
 |
|||
 |
|
 |
|||
 |
 |
 |
Zoom interactif en Lingo (D6)
Seul moyen d'exploiter une image de grande dimension, carte ou tableau d'art sur la scène de Director, le zoom interactif est devenu un grand classique des Cédés sur la peinture. Le CrapoWeb vous propose de suivre la réalisation de cet exercice qui ne requiert qu'un peu de Lingo et aussi... un peu d'arithmétique. Pour explorer la carte, déplacez le petit rectangle jaune :
Afin de bien préparer les acteurs requis par cette animation, il convient de s'interroger sur son principe : Les déplacements du petit rectangle jaune sur la petite carte induisent des déplacements proportionnels de la grande carte. Si l'on nomme "ratio" le rapport des deux cartes, on peut aisément imaginer que la grande carte est à chaque déplacement, positionnée suivant la formule : nouvellePositionDeLaGrandeCarte = positionInitialeDeLaGrandeCarte + déplacement * ratio A l'usage néanmoins, on risque fort de s'apercevoir que l'unité de pixel utilisée pour mesurer les déplacements rend vaine toute tentative de conserver une quelconque précision décimale au rapport. S'il on veut donc obtenir une relative précision, IL FAUT DÈS LA CRÉATION DES ACTEURS veiller à ce que ce rapport (dimension de la grande carte/dimension de la petite) reste entier. C'est ce que nous avons fait, en conférant à la carte miniature des dimensions spécifiques 33 X 32...
...qui l'accordait à la grande carte. Ici un fichier vectoriel au format Flash 2 de 999 X 960.
Le rapport des deux largeurs 999/33 comme aussi des deux hauteurs 960/32 est un entier et cette condition était indispensable à la bonne marche de notre projet.
Construction du scénarioLes deux cartes sont importées dans la distribution et placées sur la scène de Director piste 1 et 3. On donne à la grande carte une position aisément identifiable; par exemple on aligne son coin supérieur droit sur le bord droit de la scène. Le rectangle jaune est un acteur forme au fond transparent que l'on dispose piste 5. Pour que ce rectangle ne sorte pas des limites de la carte, on utilise une nouvelle fois l'acteur forme (contour rouge sur notre dessin mais sans aucun contour et donc invisible en réalité) piste 4. Le coin supérieur gauche - point de référence - du rectangle jaune piste 5 sera contenu à l'intérieur du sprite 4 à l'aide de la propriété constraint.
On immobilise la tête de lecture sur un tableau quelconque et on contraint les déplacements du rectangle jaune. on exitFrame
Nous souhaitons maintenant déplacer la carte en même temps que l'utilisateur déplacera le rectangle jaune avec sa souris. On sélectionne le sprite correspondant sur le scénario (piste 5) et on clique sur l'icône losange pour appeler l'éditeur de comportement. Au rectangle jaune nous associons les lignes Lingo suivantes :
on mouseEnter me --- 11 et 12 étant les numéros de deux acteurs noir/blanc qui servent ici respectivement de curseur personnalisé et de masque de curseur. on mouseLeave --- Quand la souris s'éloigne, on restitue au curseur sa forme normale en lui affectant la valeur 0
Le script de mouseDownVoyons maintenant le script de mouseDown, c'est-à-dire le script qui sera exécuté lors du cliquer-glisser sur le rectangle : Nous devons obtenir : 1) le déplacement du rectangle jaune suivant les mouvements de la souris, 2) le déplacement proportionnel de la grande carte; et ce tout le temps que la souris est enfoncée. 1) Le premier problème est un classique : nous ne pouvons pas simplement aligner le point de référence du sprite à déplacer sur la position de la souris car l'utilisateur est susceptible de placer son pointeur diversement au dessus le rectangle. Le sprite doit être déplacé en même temps que la souris mais garder ses distances (initiales). On mesure donc en tout premier lieu l'écart entre le sprite et le pointeur (decalageH et decalageV) au début du cliquer-glisser. C'est seulement après, tenant compte de cet écart, que l'on déplace répétitivement le rectangle :
2) On doit désormais veiller à obtenir un déplacement proportionnel de la grande carte. Déplacer celle-ci exige que l'on ajoute ou que l'on soustraie des pixels à sa position initiale. Le nombre de pixels à retirer ou ajouter est bien-sûr fonction du déplacement subi par le rectangle jaune. L'importance de ce déplacement peut être connue à tout moment par la formule : DeplacementDuRectangleJaune = PositionInitialeDuRectangleJaune - PositionActuelleDuRectangleJaune. La grande carte doit être déplacée proportionnellement. Proportionnellement : c'est-à-dire que lorsque le rectangle jaune parcours la totalité de la largeur de la carte miniature, la grande carte doit connaître un déplacement exactement inverse qui lui fait parcourir la surface de visualisation de part en part. La formule qui détermine les déplacements de la grande carte (ajout ou retrait de pixels à sa position initiale) est bien comme nous l'avons écrit : DeplacementDeLaGrandeCarte = DeplacementDuRectangleJaune * RATIO ...où ratio représente le rapport des dimensions des deux cartes. Pour compléter notre script nous avons donc besoin de connaître plusieurs valeurs : les positions initiales de la grande carte, du petit rectangle jaune et le rapport des dimensions des deux cartes. Afin que ces valeurs constantes ne soient calculées qu'une fois et disponibles tout le temps nous créons un script d'animation qui les détermine au début de l'animation. On appelle la commande script du menu fenêtre de Director et l'on saisit le gestionnaire suivant :
Notre animation disposera désormais de variables globales
(visibilité permanente) contenant les infos nécessaires.
Pour accéder à la position horizontale de la carte,
on extraira de la variable liste positionInitialeDelaGrandeCarte
la première valeur :
Si c'est un bitmap de grande taille que l'on expose ainsi, un processeur puissant est requis. Les utilisateurs de Director 7 ou ultérieur étudieront avec profit le fonctionnement de la fonction map()
|
||
