Source inconnue

À télécharger: FichierDepart.fla

La fiche 10 consiste à créer un puzzle. Voici les éléments dont vous aurez besoin.

• Connaître le principe du drag

• Créer un bouton transparent ou caché

• Avoir un modèle de base et le séparer (CTRL-B)

1. Ouvrez le fichier source que vous avez téléchargé pour cet exercice (FichierDepart.fla): le modèle dont vous avez besoin s’y trouve. Enregistrez-le sous le nom FicheSup8.fla.

2. Ce symbole est de type Graphique. Cliquez avec le bouton droit de la souris sur le symbole dans la bibliothèque et sélectionnez PROPRIÉTÉS. Convertissez-le en CLIP et nommez-le BONHOMME

3. Revenez à la scène. Le clip se trouve sur la scène dans le cadre #1. Nommez le calque CASSE-TÊTE. Cliquez sur le cadre #8 et enfoncez la touche F5 pour étaler le modèle sur les 8 images.

4. Rendez ce calque invisible en cliquant sur le premier point blanc à la droite du nom. Créez un second calque, sous le précédent, et nommez-le PUZZLE.

5. Créez sur ce calque un nouveau symbole de type Clip. Nommez-le PIÈCES. Glissez-y, à partir de la bibliothèque, le clip BONHOMME. Réglez ses coordonnées X et Y à 0 dans le panneau INFO.

6. Assurez-vous que l'image du BONHOMME est sélectionnée: vous devez voir l'arborescence ci-dessous en haut de la ligne du temps.  

7. Au menu MODIFICATION, choisissez SÉPARER. Vous savez que l’opération a réussi quand le modèle est couvert d’une multitude de petits points blancs. Enlevez les lignes noires qui entourent l'image.

8. Avec l’outil LASSO, créez un premier modèle de pièce. Vous pouvez utiliser le mode POLYGONE de cet outil pour un premier travail: ce sera plus facile. Vous pouvez dépasser dans la partie blanche autour de l’image. Ne le déplacez pas.

7. Une fois le «morceau de puzzle» tracé, convertissez-le en symbole de type CLIP et nommez-le 1 (pour pièce #1). Notez soigneusement sa position (valeurs de X et Y dans le panneau INFO).

8. Appuyez ur la touche Suppr du clavier pour effacer le morceau de la scène. Répétez les mêmes opérations jusqu’à ce que vous obteniez 8 pièces différentes nommées de 1 à 8 et contenant toute l'image.

9. Assurez-vous qu’il ne reste plus rien dans le clip (PIECES). Glissez la pièce 1 sur la scène (dans le clip PIECES). Réglez les paramètres X et Y de la pièce à 0. Passez ensuite au cadre #2, enfoncez F7 et glissez la pièce 2. Réglez ses paramètres X et Y à 0. Procédez de la même façon pour les 6 autres pièces. Même si les pièces se trouvent dans des cadres différents, elles doivent toutes être superposées.

10. Ajoutez un second calque au clip PIECES et nommez-le BOUTON. Créez un rectangle un peu plus grand que les pièces, sans contours. Convertissez-le en symbole de type BOUTON que vous nommez BT_CACHE. Ce bouton ne doit rien contenir sur les états haut, dessus et abaissé. Seulement le rectangle dans l’état Cliqué (pressez F6 dans la zone Cliqué, puis supprimez le contenu des trois autres états). Assurez-vous que le bouton est présent pour les 8 images du puzzle.

11. Revenez à la Scène 1. Cliquez avec le bouton droit de la souris sur le clip PIÈCES dans la bibliothèque et sélectionnez DÉFINIR LES PARAMÈTRES DE CLIP. La fenêtre ci-dessous s'affiche.

7. Cliquez sur le +. Double-cliquez sur le champ NOM et inscrivez IMAGE. Cliquez une seconde fois sur + et inscrivez PosX comme nom. Enfin, une troisième fois sur le + et PosY comme nom. Cliquez sur OK.

Image, PosX et PosY sont des variables. Image va correspondre au numéro de l’image clé sur laquelle se trouve une pièce de puzzle. PoxX et PoxY vont correspondre à la position X et Y de cette pièce.

13. Ouvrez le clip PIECES en double cliquant dessus dans la bibliothèque. Ajoutez l’action ci-dessous dans le cadre #1 du calque 1 de ce clip.

GotoAndStop (image);

14. Insérez le code ci-dessous dans le bouton BT_CACHE.

on (press) {
This.swapDepths(1)
if (this._x<> posX & this._y <> posY) {
StartDrag (this);
}
}
on (release) {
stopDrag();
if (this._x > PosX - 15 & this._x < posX + 15 & this._y > posY - 15 & this._y < posY + 15) {
this._x = posX;
this._y = posY;
}
}

La section surlignée en jaune ne constitue qu'une seule ligne de code. 

Le code SwapDepths gère la superposition des clips. Il permet de passer le clip pièces au premier plan quand la souris est cliquée. Le code suivant vérifie si la position actuelle (This._x et This._y) de la pièce est différente de la position de départ (PosX et PosY) et, dans le cas contraire, il déplace celle-ci. Enfin, dans la section Release, on vérifie si la pièce se trouve à moins de 15 pixels de la position désirée et, si c’est le cas, la place au bon endroit.

15. Revenez à la scène 1 et glissez sur le calque PUZZLE 1 occurrence du clip PIÈCES. Cliquez dessus avec le bouton droit de la souris et sélectionnez le panneau PARAMÈTRES DU CLIP. Attribuez les valeurs suivantes aux variables : IMAGE = 1, PosX = valeur X de la première pièce (que vous avez notée), PosY = valeur Y de la première pièce (aussi notée). Refermez le panneau et insérez une deuxième occurrence du clip. Cette fois, IMAGE vaut 2 et PosX, PosY représentent les valeurs notées pour la seconde pièce. Continuez de la même façon pour 6 autres occurrences du clip

16. Sélectionnez le clip BONHOMME dans la bibliothèque. Tracez un rectangle vide rouge autour de l’image pour indiquer l’endroit où les pièces devront être placées. Effacez ensuite l’image du bonhomme pour ne conserver que le cadre rouge.

17. Revenez à la scène 1 et assurez-vous que les deux calques ne sont constitués que d’un seul cadre, celui contenant une image (le premier). Si ce n’est pas le cas, videz les autres cadres dans les deux calques.  

18. Enregistrez le tout et amusez-vous avec votre premier casse-tête