Pour ce projet, très peu de contraintes nous étaient imposées, ce qui a rendu la définition des buts à atteindre nettement plus compliquée que d'habitude...
Afin de mettre en oeuvre les notions d'Action Script vues lors de ce semestre, j'ai dû choisir entre réaliser un dispositif interactif moi-même (donc très, très simple) ou reprendre un script existant et lui apporter un maximum de modifications. Vous avez deviné, j'imagine, quelle solution j'ai choisie.
Après de laborieuses recherches sur un célèbre moteur de recherche, j'arrivais sur le site d'un non moins célèbre éditeur de logiciels où un article présente et commente le code d'un puzzle réalisé en Action Script3.
Je décidais donc d'utiliser cet exemple et de le modifier.
Principalement, j'entrepris de changer le nombre de pièces du puzzle ainsi que leur disposition sur la "scène" et d'ajouter un bouton remplaçant la méthode de transition d'un puzzle à l'autre; cette dernière méthode obligeant l'utilisateur à terminer le puzzle pour accéder au suivant, alors que mon bouton permet d'en changer à volonté (dans la limite des images disponibles). Accessoirement, j'ai aussi changé les images et augmenté leur nombre.
Ma première difficulté fut de comprendre la manière de disposer les pièces des puzzles à l'emplacement désiré grâce à l'utilisation d'un array incrémenté avec la largeur d'une pièce: var locationsArr:Array = new Array();
locationsArr.push({x: 10, y: 10});
locationsArr.push({x: 10 + widthPuzzlePiece + 5, y: 10})
... etc.;
Mais la difficulté principale à laquelle j'ai été confronté, fut pour implémenter un bouton répondant au click de l'utilisateur par l'apparition d'un nouveau puzzle et la disparition du précédent. Ce dernier point n'aurait pas pu être résolu sans la précieuse aide de l'enseignant et consistait à demander un genre de débugage à l'aide d'une fonction (function traceDisplayList)
afin de connaître dans quel ordre les différentes variables (représentant l'image entière, les morceaux du puzzle, etc.) apparaissent, puis de supprimer celles qui doivent l'être
(removeChildAt(1);Ensuite, il m'a fallut jouer sur les paramètres de la variable
removeChildAt(1);) holder,2 (ligne 78), jusqu'à ce que les pièces du puzzle passe bien dessus et pas sous la grille du puzzle (en faisant un peu de voudou, je le reconnais).
Bien sûr, les fonctionnalités principales de cette petite application n'ont pas été conçues par moi et j'ai (trop?) souvent eu recours à cette manière de faire du "recyclage". Ceci étant dit, la valeur pédagogique de cette méthode me semble non négligeable et, pour cet exercice, cela m'a permis d'entrevoir et de manipuler certaines possibilités d'Action Script3, telles que d'assigner aléatoirement une position dans un tableau (array) à différents objets (ici, des images): /* Create the URL Request */)
var index:Number = Math.floor(Math.random()
requestURL = new URLRequest(imagesArr[index]);
, pour les charger ( load) dans un ordre aléatoire, ou de transformer une image (jpg
) en un objet MovieClip afin de pouvoir agir sur lui de toutes les façons possibles.
Je dirais donc que mes objectifs sont atteints, mais qu'ils auraient pu être plus élevés.
| fichier SWF |
|---|
| fichier FLA |
| fichier HTML |
| fichier JavaScript |