Techniques > Créer une loupe >

Qu'est-ce que c'est ?

Lorsque vous avez besoin de déplacer une loupe sur une petite image et de voir la partie survolée à une plus grande échelle, vous pouvez utiliser la technique de la loupe. Dans cet exemple, nous avons utilisé un seul axe mais l'adaptation pour les deux axes n'est pas difficile. Déplacez le cadre noir (en bas à gauche de l'animation) de gauche à droite. Télécharger le fichier fla - Mac - PC

 

Quelques explications avant de commencer :

Afin de comprendre davantage le fonctionnement de cette loupe voyons ce qu'il se passe lorsque vous déplacez le cadre noir en bas à gauche de l'animation.

Imaginez que vous ayez une pièce d'appartement de 10 m de longueur. Imaginons que pour vous rendre au milieu de cette pièce, vous devez faire 3 pas.

Si vous avez une pièce d'appartement de 40 m de longueur, combien de pas devez vous faire pour arriver au milieu de la pièce ?

Oui, 4 fois plus. C'est à dire 4 fois 3 pas, donc 12 pas.

Le rapport est de 40/10 = 4. (On fait 4 fois plus de pas)

Imaginons maintenant une pièce de 320 mètres et une de 1533 mètres :

Le rapport est de 1533/320 = 4,7906. (On ferait 4,7906 fois plus de pas)

Maintenant voici les données suivantes :
- L'image des petites palettes en bas de l'animation fait 320 pixels
- Limage des grandes palettes que vous ne voyez que partiellement (palettes image et occurrence) en haut fait 1533 pixels.

Si vous déplacez le carré noir de 1 pixel vers la droite, comme limage sur laquelle vous vous déplacez ("petites palettes") est 4,8 fois moins grande que la grande image des "grandes palettes", vous devez déplacer cette dernière 4,8 fois plus.

Petit détail, il faut la déplacer dans le sens opposé. Et comme en maths, on obtient l'inverse d'un nombre en le multipliant par -1, il suffit de faire ça. Vous pouvez directement choisir un chiffre négatif (-4,8 dans notre exemple).

Voilà le raisonnement que vous devez suivre.

Attention, la grande et la petite images ont été calées. Lorsque vous éditez un symbole (double clic sur son icône dans la bibliothèque ou sur l'une de ses occurrences sur la scène) vous devez placer le côté gauche de limage en alignement sur la croix du centre de votre symbole.

Maintenant voyons comment réaliser cette animation.

Déplacer un movie clip puis positionner un autre par rapport à celui que vous venez de déplacer.

1. Voir comment déplacer un objet sur la scène
   (cf. Occurrence mobile)
   
2. Placer un movie clip sur la scène qui représene la grande image que vous verrez partiellement (grossie), car vous poserez un cache par dessus ou la grande image dépassera de la scène.
3. Placer un graphique représentant la petite image sur laquelle vous allez faire un zoom
4. Placez un bouton imbriqué dans un movie clip qui représente le cadre.
5. Pour pouvoir déplacer un cadre sur la scène, l'étape 1 de cette technique vous a montré comment rendre une occurrence mobile sur la scène.
6. Sélectionner le movie clip qui représente la grande image et placez le code suivant :
   
   

onClipEvent (enterFrame) {
this._x = (_root.viseur._x)*-4.7906;
}

Je sais, c'est pas facile, mais en téléchargeant le .fla, et en relisant ces X étapes une dizaine de fois, vous devriez y arriver.

< Sommaire