L'application Puzzle Game, qui faisait initialement partie des exemples fournis avec Flash Professional 8 sous la fonctionnalité de données bitmap, a été mise à niveau à partir d'ActionScript 2.0 pour utiliser les dernières fonctionnalités d'ActionScript 3.0. Cet article décrit en détail le code utilisé dans les deux versions afin que vous puissiez comprendre comment l'application a migré d'ActionScript 2.0 vers ActionScript 3.0.

Puzzle Game commence avec huit pièces de puzzle positionnées de façon aléatoire (voir la Figure 1). Votre but est d'essayer de résoudre le puzzle en assemblant ces huit pièces de manière à ce qu'elles forment une image. Une fois que vous avez compléter le puzzle, le jeu vous en propose un autre.

Figure 1. Exemple d'application Puzzle Game

Afficher l'exemple d'application

La classe BitmapData est la principale fonctionnalité utilisée. Une fois l'image chargée, un objet BitmapData la scinde en huit parties égales : les pièces du puzzle.

Les principales différences entre les deux versions sont les suivantes :

L'objet Loader, une nouveauté d'ActionScript 3.0, sert à charger les images.
Des gestionnaires d'événements sont utilisés pour les mouvements des images et de la souris à la place des objets écouteurs d'ActionScript 2.0.
Ce jeu illustre l'utilisation de la classe graphics pour dessiner le tableau du puzzle.
La fonction setInterval a été remplacée par le nouvel objet Timer dans ActionScript 3.0.

Chargement de l'image originale

Examinez comment les images du puzzle sont chargées dans l'exemple d'application. Le code ActionScript 2.0 utilise un objet MovieClipLoader pour charger un fichier JPEG choisi de façon aléatoire. Un objet écouteur est créé pour qu'une fonction puisse être appelée une fois l'image chargée.

Le même résultat est obtenu dans ActionScript 3.0 avec deux nouveaux objets. Un objet Loader est créé et utilisé pour charger les images. Un objet URLRequest est associé à cet objet Loader. L'objet URLRequest représente l'URL de l'image que vous souhaitez charger. L'objet Loader offre l'avantage d'être déjà un écouteur d'événement auquel vous pouvez vous abonner. Ainsi, dans cet exemple, vous vous abonnez à l'événement COMPLETE, qui est déclenché lorsque Loader a chargé l'image avec succès.

Code ActionScript 2.0 :

        // Voici notre objet MovieClipLoader var imageLoader:MovieClipLoader = new MovieClipLoader();
// Tableau d'images possibles à partir duquel une image est sélectionnée de façon aléatoire. 
var imagesArr:Array = new Array("http://www.helpexamples.com/flash/images/image1.jpg", ... ; 
var listener:Object = new Object(); 
// La méthode onLoadInit() est appelée lorsque l'image se charge. 
listener.onLoadInit = function(imageClip:MovieClip):Void { 
// Ici : le code appelé une fois l'image chargée } 
imageLoader.addListener(listener);
    

Code ActionScript 3.0 :

        imageLoader = new Loader(); 
requestURL = new URLRequest(imagesArr[index]); 
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImg); 
imageLoader.load(requestURL); 
function onLoadImg(evt:Event):void{ 
// Ici : le code appelé une fois l'image chargée
}
    

Création des pièces du puzzle

Une fois l'image chargée, vous devez la convertir en objet BitmapData. Vous pourrez ainsi scinder cette image bitmap en huit parties égales et les dessiner individuellement. Ce sont vos pièces de puzzle. J'attire ici votre attention sur la manière dont vous affichez ces pièces de puzzle sur la scène.

Dans ActionScript 2.0, vous devez créer des clips vides auxquels vous pouvez joindre le bitmap créé, puis répéter cette opération huit fois (une fois pour chaque pièce du puzzle). Le code est similaire à celui d'ActionScript 3.0, à ceci près que vous utilisez la méthode addChild, qui ajoute le clip spécifié sur la scène. Le clip porteur est le clip vide qui contient toutes les pièces du puzzle. La méthode addChild place déjà le clip spécifié à la plus grande profondeur.

Code ActionScript 2.0 :

        var puzzlePieceClip:MovieClip =
    puzzlePiecesClip.createEmptyMovieClip("puzzlePiece" + index,
    puzzlePiecesClip.getNextHighestDepth());
puzzlePieceClip.attachBitmap(puzzlePieceBmp, 1);
    

Code ActionScript 3.0 :

        var puzzlePieceClip:Bitmap = new Bitmap(puzzlePiece);
holder.addChild(puzzlePieceClip);
    

Création du tableau du puzzle

Une fois que vous avez créé et mélangé les pièces du puzzle, vous devez créer le tableau du puzzle, ainsi que les gestionnaires de souris permettant le déplacement des pièces. Le tableau du puzzle est dessiné à l'aide des méthodes beginFill et lineTo dans ActionScript 2.0 et ActionScript 3.0. La seule différence est que ces méthodes résident maintenant dans la nouvelle classe graphics d'ActionScript 3.0.

Code ActionScript 2.0 :

        puzzleBoardSpaceClip = puzzleBoardClip.createEmptyMovieClip("puzzleBoardSpace"
    + i, i);
puzzleBoardSpaceClip.lineStyle(0);
puzzleBoardSpaceClip.beginFill(0xFFFFFF, 100);
puzzleBoardSpaceClip.lineTo(widthPuzzlePiece, 0);
...
    

Code ActionScript 3.0 :

        puzzleBoardSpaceClip = new MovieClip();
puzzleBoardSpaceClip.graphics.lineStyle(0);
puzzleBoardSpaceClip.graphics.beginFill(0xFFFFFF,100);
puzzleBoardSpaceClip.graphics.lineTo(widthPuzzlePiece,0);
    

Déplacement des pièces du puzzle

Pour appliquer la fonctionnalité glisser-déposer de la souris à cette application de jeu, créez une fonction onPress pour chacun des clips des pièces du puzzle et une fonction onRelase lorsque le bouton de la souris est relâché.

Dans ActionScript 3.0, vous utilisez les événements de souris du clip pour détecter les clics de souris sur cette pièce de puzzle spécifique. Associez d'abord un gestionnaire d'événements mouseDown et mouseUp au conteneur principal des clips de pièces de puzzle (un clip qui contient les pièces de puzzle), puis utilisez la propriété event.target pour déplacer la pièce de puzzle appropriée.

Code ActionScript 2.0 :

        puzzlePieceClip.onPress = function():Void {
    this.startDrag();
    puzzlePieceClip.swapDepths(topDepth);
  };
  puzzlePieceClip.onRelease = function():Void {
...
}
    

Code ActionScript 3.0 :

        holder.addEventListener("mouseDown", pieceMove);
holder.addEventListener("mouseUp", pieceMove);
function pieceMove(evt:Event):void{
   if(evt.type == "mouseDown"){
      evt.target.startDrag();
   } else if(evt.type == "mouseUp"){
      evt.target.stopDrag();
...
}
    

Résolution du puzzle

Lorsque toutes les pièces du puzzle sont à leur place, un temporisateur démarre. Au bout de 50 millisecondes, l'image se dissout lentement pour révéler le tableau en dessous du puzzle et le jeu redémarre. La fonctionnalité de temporisateur est obtenue à l'aide de la fonction setInterval dans ActionScript 2.0. La fonction setInterval prend un nom de fonction et un intervalle comme paramètres. Lorsque vous avez terminé, vous pouvez appeler la fonction clearInterval pour supprimer le temporisateur.

Dans ActionScript 3.0, une classe Timer permet désormais de créer un temporisateur. Un objet timer est créé, auquel vous pouvez associer un gestionnaire d'événements qui déclenche une fonction à chaque impulsion du temporisateur. Vous pouvez spécifier l'intervalle, comme dans ActionScript 2.0, et la fonction à appeler. Lorsque vous avez terminé, vous pouvez appeler la méthode stop() pour arrêter le temporisateur.

Code ActionScript 2.0 :

        intervalID = setInterval(puzzleThreshold, 100);
}
function puzzleThreshold():Void {
...}
    

Code ActionScript 3.0 :

        var timer:Timer = new Timer(50);
   timer.start();
   timer.addEventListener("timer", puzTrash);
}
function puzTrash(evt:Event):void{
...
}
    

Code de l'exemple d'application Puzzle Game

Vous trouverez ci-dessous le code complet de chaque version de Puzzle Game.

Code ActionScript 2.0 :

        //**************************************************************************** 
//Copyright (C) 2005 Macromedia, Inc. Tous droits réservés. 
//L'exemple de code ci-après est soumis à toutes les restrictions applicables à 
//ce type de code, conformément au contrat de licence de l'utilisateur final qui accompagne 
//ce produit. 
//**************************************************************************** 
/*    Pour éviter les restrictions de sécurité, testez ce document en
appuyant sur les touches Ctrl+Entrée ou téléchargez le fichier SWF sur
un serveur.
Si vous le testez dans une fenêtre de navigation locale (F12),
assurez-vous que ce fichier FLA se trouve *déjà* dans un répertoire fiable ou 
définissez le fichier sur « Accès aux fichiers locaux uniquement » dans les 
Paramètres de publication. Vous ouvrirez ainsi le Gestionnaire des paramètres
globaux de sécurité, où vous pourrez spécifier que le répertoire dans lequel
se trouve ce fichier FLA est fiable. */

System.security.allowDomain("http://www.helpexamples.com");
import flash.display.BitmapData; 
import flash.geom.Matrix; 
import flash.geom.Rectangle; 
import flash.geom.Point; 
// Le tableau puzzlePiecesArr stocke les références à chacun des clips des pièces du puzzle. 
var puzzlePiecesArr:Array; 
// Stockez la plus grande profondeur de chacune des pièces du puzzle. 
var topDepth:Number; 
// Le puzzle comprend 8 pièces. 
var totalPuzzlePieces:Number = 8; 
// Utilisez une variable pour déterminer combien de pièces de puzzle sont à leur place. 
var correctPuzzlePieces:Number; 
// Un objet BitmapData stocke les données d'image utilisées par le puzzle. 
var puzzleBmp:BitmapData; var intervalID:Number; 
var threshold:Number; 
// Utilisez un tableau d'images possibles à partir duquel une image est sélectionnée de façon aléatoire. 
var imagesArr:Array = new Array("http://www.helpexamples.com/flash/images/image1.jpg",
 "http://www.helpexamples.com/flash/images/image2.jpg",
 "http://www.helpexamples.com/flash/images/image3.jpg");
 var listener:Object = new Object(); 
// La méthode onLoadInit() est appelée lorsque l'image se charge. 
listener.onLoadInit = function(imageClip:MovieClip):Void {   
// Définissez la largeur et la hauteur de chaque pièce du puzzle. Chaque puzzle comporte   
// quatre colonnes et deux lignes.   
var widthPuzzlePiece:Number = imageClip._width/4;   
var heightPuzzlePiece:Number = imageClip._height/2;   
// Dessinez l'image du clip dans un objet BitmapData.   
puzzleBmp = new BitmapData(imageClip._width, imageClip._height);   
puzzleBmp.draw(imageClip, new Matrix());   
var puzzlePieceBmp:BitmapData;   
var x:Number = 0;   
var y:Number = 0;   
// Bouclez 8 fois pour créer chaque pièce du puzzle.   
for(var i:Number = 0; i < 8; i++) {     
// Copiez une section de l'image du puzzle dans un nouvel objet BitmapData. Utilisez les variables x et y, qui     
// sont actualisées à chaque itération, pour définir la région rectangulaire à copier.     
puzzlePieceBmp = new BitmapData(widthPuzzlePiece, heightPuzzlePiece);     
puzzlePieceBmp.copyPixels(puzzleBmp, new Rectangle(x, y, widthPuzzlePiece, heightPuzzlePiece), new Point(0, 0));     
// Transférez l'objet BitmapData et l'index des pièces du puzzle à la fonction personnalisée makePuzzlePiece()     
// pour créer le clip.     
makePuzzlePiece(puzzlePieceBmp, i);     
// Actualisez les variables x et y pour que chaque itération dessine une nouvelle région du puzzle.     
x += widthPuzzlePiece;     
if(x >= puzzleBmp.width) {
       x = 0;
       y += heightPuzzlePiece;
     }
   }   
// Rendez l'instance imageClip invisible une fois les données bitmap copiées.   
imageClip._visible = false;   
// Dessinez le tableau du puzzle.   
makePuzzleBoard(puzzleBmp.width, puzzleBmp.height);   
// Agencez les pièces du puzzle de façon aléatoire.   
arrangePuzzlePieces();
 };
 var imageLoader:MovieClipLoader = new MovieClipLoader();
 imageLoader.addListener(listener);
 // Appelez initialement resetPuzzle(). resetPuzzle();
 function resetPuzzle():Void {   puzzlePiecesArr = new Array();
   // Si des instances de clip ont déjà été créées, supprimez-les.
   puzzlePiecesClip.removeMovieClip();
   imageClip.removeMovieClip();
   puzzleBoardClip.removeMovieClip();
   // Créez l'instance de clip devant contenir les pièces et le tableau du puzzle, et charger l'image.
   this.createEmptyMovieClip("puzzleBoardClip", this.getNextHighestDepth());
   this.createEmptyMovieClip("puzzlePiecesClip", this.getNextHighestDepth());
   this.createEmptyMovieClip("imageClip", this.getNextHighestDepth());
   // Initialisez correctPuzzlePieces sur 0, car aucune pièce de puzzle n'est encore en place.
   correctPuzzlePieces = 0;
   // Initialisez le seuil.
   threshold = 0xFFFF;
   // Sélectionnez un index aléatoire dans le tableau imagesArr et chargez cette image dans imageClip.
   var index:Number = Math.floor(Math.random() * imagesArr.length);
   imageLoader.loadClip(imagesArr[index], imageClip);
 } function makePuzzlePiece(puzzlePieceBmp:BitmapData, index:Number):Void {
   // Créez un nouveau clip de pièce de puzzle en utilisant l'index spécifié comme dernier caractère dans le   // nom d'instance. L'index dans le nom d'instance sert à vérifier si la pièce du puzzle est placée   // dans l'espace correct, car les espaces possèdent des noms d'instance avec des index correspondants.   var puzzlePieceClip:MovieClip = puzzlePiecesClip.createEmptyMovieClip("puzzlePiece" + index, puzzlePiecesClip.getNextHighestDepth());   // Affichez le bitmap dans la pièce du puzzle.   puzzlePieceClip.attachBitmap(puzzlePieceBmp, 1);   // Actualisez topDepth pour chaque pièce de puzzle. Lorsque la huitième pièce du puzzle sera créée, topDepth affichera   // la valeur de profondeur la plus importante dans puzzlePieceClip.   topDepth = puzzlePieceClip.getDepth();   // Quand la pièce du puzzle est sélectionnée, elle commence à glisser et utilise swapDepth() pour placer le   // clip au-dessus des autres.   puzzlePieceClip.onPress = function():Void {     this.startDrag();     puzzlePieceClip.swapDepths(topDepth);   };   puzzlePieceClip.onRelease = function():Void {     // Arrêtez le glissement du clip à sa libération.     this.stopDrag();     // Accédez à l'index des pièces du puzzle et à l'index de l'espace du puzzle au-dessus duquel la     // pièce du puzzle a été déposée (via la propriété _droptarget).     var puzzlePieceIndex:Number = this._name.substring(this._name.length - 1);     var puzzleBoardSpaceIndex:Number = this._droptarget.substring(this._droptarget.length - 1);     // Si les index sont égaux, cela signifie que la pièce du puzzle a été placée dans l'espace correct.     if(puzzlePieceIndex == puzzleBoardSpaceIndex) {       var puzzlePieceSpaceClip:MovieClip = eval(this._droptarget);       // Accédez aux coordonnées du clip de l'espace du puzzle et convertissez-les en       // coordonnées globales. Comme puzzlePiecesClip s'aligne avec l'espace des coordonnées globales (ses coordonnées       // (0,0) sont placées aux coordonnées (0,0) globales), il n'est pas nécessaire de convertir les coordonnées globales       // en coordonnées locales de puzzlePiecesClip, bien que cela soit techniquement possible. Une fois les       // coordonnées converties en coordonnées globales, placez la pièce du puzzle à       // ces coordonnées pour « l'insérer » dans cet espace.       var coordinate:Object = {x: puzzlePieceSpaceClip._x, y: puzzlePieceSpaceClip._y};       puzzleBoardClip.localToGlobal(coordinate);       this._x = coordinate.x;       this._y = coordinate.y;       // Incrémentez le nombre de pièces de puzzle correctement placées.       correctPuzzlePieces++;       // Si le nombre de pièces de puzzle correctement placées est égal au nombre total, le puzzle est résolu.       // Dans ce cas, appelez la fonction personnalisée puzzleSolved().       if(correctPuzzlePieces == totalPuzzlePieces) {         puzzleSolved();       }     }   };   puzzlePiecesArr.push(puzzlePieceClip); } function arrangePuzzlePieces():Void {   // Définissez les dimensions des pièces du puzzle.   var widthPuzzlePiece:Number = puzzlePiecesArr[0]._width;   var heightPuzzlePiece:Number = puzzlePiecesArr[0]._height;   // Définissez un tableau d'emplacements pour les pièces du puzzle de façon à ce qu'elles apparaissent dans une grille   // de 2 par 4 à gauche.   var locationsArr:Array = new Array();   locationsArr.push({x: 10, y: 10});   locationsArr.push({x: 10 + widthPuzzlePiece + 5, y: 10});   locationsArr.push({x: 10, y: 10 + heightPuzzlePiece + 5});   locationsArr.push({x: 10 + widthPuzzlePiece + 5, y: 10 + heightPuzzlePiece + 5});   locationsArr.push({x: 10, y: 10 + (heightPuzzlePiece + 5) * 2});   locationsArr.push({x: 10 + widthPuzzlePiece + 5, y: 10 + (heightPuzzlePiece + 5) * 2});   locationsArr.push({x: 10, y: 10 + (heightPuzzlePiece + 5) * 3});   locationsArr.push({x: 10 + widthPuzzlePiece + 5, y: 10 + (heightPuzzlePiece + 5) * 3});   var puzzlePieceClip:MovieClip;   var index:Number = 0;   var coordinates:Object;   // Parcourez en boucle chacun des éléments de locationsArr et puzzlePiecesArr. Attribuez à chaque   // élément de puzzlePiecesArr les coordonnées d'un des // éléments de locationsArr sélectionné de façon aléatoire.   while(locationsArr.length > 0) {     puzzlePieceClip = puzzlePiecesArr[index++];     // Utilisez la méthode splice() pour sélectionner et supprimer un élément de locationsArr. Ainsi,     // les mêmes coordonnées ne sont pas utilisées deux fois.     coordinates = locationsArr.splice(Math.floor(Math.random() * locationsArr.length), 1)[0];     puzzlePieceClip._x = coordinates.x;     puzzlePieceClip._y = coordinates.y;   } } function makePuzzleBoard(width:Number, height:Number):Void {   // Définissez les dimensions de chaque pièce du puzzle.   var widthPuzzlePiece:Number = width/4;   var heightPuzzlePiece:Number = height/2;   var puzzleBoardSpaceClip:MovieClip;   var x:Number = 0;   var y:Number = 0;   // Bouclez 8 fois : une fois pour chaque espace de pièce de puzzle. Pour chaque itération, créez un nouveau clip   // dans puzzleBoardClip et tracez un rectangle à l'intérieur. Notez que chaque clip  // d'espace du tableau du puzzle   // a un nom d'instance avec un index qui correspond à l'index de la pièce du puzzle   // qui peut être correctement placée dans cet espace.   for(var i:Number = 0; i < 8; i++) {     puzzleBoardSpaceClip = puzzleBoardClip.createEmptyMovieClip("puzzleBoardSpace" + i, i);     puzzleBoardSpaceClip.lineStyle(0);     puzzleBoardSpaceClip.beginFill(0xFFFFFF, 100);     puzzleBoardSpaceClip.lineTo(widthPuzzlePiece, 0);     puzzleBoardSpaceClip.lineTo(widthPuzzlePiece, heightPuzzlePiece);     puzzleBoardSpaceClip.lineTo(0, heightPuzzlePiece);     puzzleBoardSpaceClip.lineTo(0, 0);     puzzleBoardSpaceClip.endFill();     puzzleBoardSpaceClip._x = x;     puzzleBoardSpaceClip._y = y;     x += widthPuzzlePiece;     if(x >= width) {       x = 0;       y += heightPuzzlePiece;     }   }   // Déplacez le tableau du puzzle vers la droite de la scène.   puzzleBoardClip._x = 350;   puzzleBoardClip._y = 200 - puzzleBoardClip._height/2; } // Une fois le puzzle résolu, définissez l'objet puzzlePiecesClip comme invisible, associez le bitmap du puzzle // au tableau du puzzle et définissez un délai au terme duquel le seuil du bitmap est continuellement actualisé // pour créer un effet de fondu intéressant. function puzzleSolved():Void {   puzzlePiecesClip._visible = false;   puzzleBoardClip.attachBitmap(puzzleBmp, puzzleBoardClip.getNextHighestDepth());   intervalID = setInterval(puzzleThreshold, 100); } function puzzleThreshold():Void {   // Lorsque le seuil dépasse 0xFFFFFF, supprimez le délai et réinitialisez le puzzle.   if(threshold > 0xFFFFFF) {     threshold = 0xFFFFFF;     clearInterval(intervalID);     resetPuzzle();   }   // Utilisez la méthode threshold() pour créer un effet de fondu intéressant. À chaque appel de puzzleThreshold(),   // la variable de seuil est actualisée jusqu'à ce qu'elle atteigne 0xFFFFFF. L'effet créé est une dissolution de l'image   // vers un fond blanc. Notez que certaines opérations binaires sont utilisées pour combiner 0xFF000000 avec la   // variable de seuil. Cela est dû au fait que la méthode threshold() requiert une spécification de seuil de type 0xAARRGGBB. Toutefois,   // les images possédant 100 alpha, la portion AA est toujours 0xFF000000.   puzzleBmp.threshold(puzzleBmp, new Rectangle(0, 0, puzzleBmp.width, puzzleBmp.height), new Point(0, 0), "<=", 0xFF000000 | threshold);   threshold *= 1.2; }
    

Code ActionScript 3.0 :

        var puzzlePiecesArr:Array; 
var puzzlePiecesFound:Array; 
var topDepth:Number; 
var totalPuzzlePieces:Number; 
var correctPuzzlePieces:Number; 
var puzzleBmp:BitmapData; 
var intervalID:Number; 
var threshold:Number; 
var imagesArr:Array; 
var imageLoader:Loader; 
var requestURL:URLRequest;  
var puzzleBoardClip:MovieClip; 
var holder:MovieClip; 
init(); 
function init(){
    puzzleBoardClip = new MovieClip();
    addChild(puzzleBoardClip);
    totalPuzzlePieces = 8;
    imagesArr = new Array("http://www.helpexamples.com/flash/images/image1.jpg",
    "http://www.helpexamples.com/flash/images/image2.jpg",
    "http://www.helpexamples.com/flash/images/image3.jpg");
    //imagesArr = new Array("image1.jpg", "image2.jpg", "image3.jpg");
    puzzlePiecesArr = new Array();
    puzzlePiecesFound = new Array();
    correctPuzzlePieces = 0;
    threshold = 0xFFFF;
    /* Créez le chargeur d'images */
    imageLoader = new Loader();
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImg);
    /* Créez la requête d'URL */
    var index:Number = Math.floor(Math.random() * imagesArr.length);
    requestURL = new URLRequest(imagesArr[index]);
    // Chargez l'image
    imageLoader.load(requestURL);
    // Configurez un conteneur de type clip pour les pièces du puzzle
    holder = new MovieClip();
    addChild(holder);
 } function onLoadImg(evt:Event):void{
    // Définissez la largeur et la hauteur de chaque pièce du puzzle.
    // Chaque puzzle comprend 4 colonnes et 2 lignes.
    var widthPuzzlePiece:Number = imageLoader.width / 4;
    var heightPuzzlePiece:Number = imageLoader.height / 2;
    // Dessinez l'image du clip dans un objet BitmapData.
    puzzleBmp = new BitmapData(imageLoader.width, imageLoader.height);
    puzzleBmp.draw(imageLoader, new Matrix());
    var puzzlePieceBmp:BitmapData;
    var x:Number = 0;
    var y:Number = 0;
    // Bouclez 8 fois pour créer chaque pièce
    for (var i:Number = 0; i < 8; i++)
    {
       puzzlePieceBmp = new BitmapData(widthPuzzlePiece, heightPuzzlePiece);
       puzzlePieceBmp.copyPixels(puzzleBmp, new Rectangle(x,y,widthPuzzlePiece,heightPuzzlePiece), new Point(0,0));
       makePuzzlePiece(puzzlePieceBmp, i);
       x += widthPuzzlePiece;
       if(x >= puzzleBmp.width)
       {
          x = 0;
          y += heightPuzzlePiece;
       }
    }
    makePuzzleBoard(puzzleBmp.width, puzzleBmp.height);
    arrangePuzzlePieces();
 }
 function makePuzzlePiece(puzzlePiece:BitmapData, index:int){
    var puzzlePieceClip:Bitmap = new Bitmap(puzzlePiece);
    var tmp2:MovieClip = new MovieClip();
    tmp2.addChild(puzzlePieceClip);
    tmp2.name = String(index)
    // Ajouté pour le Mode précis
   holder.addChild(tmp2);
    holder.addEventListener("mouseDown", pieceMove);
    holder.addEventListener("mouseUp", pieceMove);
    puzzlePiecesArr.push(tmp2);
    // Cela sert à vérifier si la même pièce a été placée
    puzzlePiecesFound.push(tmp2.name);
 } function pieceMove(evt:Event):void{
    if(evt.type == "mouseDown"){
       evt.target.startDrag();
    } else if(evt.type == "mouseUp"){
       evt.target.stopDrag();
       var puzzlePieceIndex:Number = evt.target.name;
       // AJOUTÉ VV 4.3. Vérifiez que la pièce a été déposée dans la grille
       if(evt.target.dropTarget){
          var puzzleBoardSpaceIndex:Number = evt.target.dropTarget.name;
       }       if(puzzlePieceIndex == puzzleBoardSpaceIndex)
       {
          var coordinate:Point = new Point(evt.target.dropTarget.x, evt.target.dropTarget.y);
          var coordinateGlobal:Point = new Point();
          coordinateGlobal = puzzleBoardClip.localToGlobal(coordinate);
          evt.target.x = coordinateGlobal.x;
          evt.target.y = coordinateGlobal.y;
          if(puzzlePiecesFound.length != 0)
          {
             for(var i:int = 0;i < puzzlePiecesFound.length; i++)
             {
                if(puzzlePiecesFound[i] == puzzlePieceIndex)
                {
                   puzzlePiecesFound[i] = "Correct";
                   correctPuzzlePieces++;
                }
             }
          }
          if(correctPuzzlePieces == totalPuzzlePieces)
          {
             puzzleSolved();
          }
       }
    }
 }
 function arrangePuzzlePieces():void
 {
    var widthPuzzlePiece:Number = puzzlePiecesArr[0].width;
    var heightPuzzlePiece:Number = puzzlePiecesArr[0].height;
    var locationArr:Array = new Array();
    locationArr.push({x:10, y:10});
    locationArr.push({x:10 + widthPuzzlePiece + 5, y: 10});
    locationArr.push({x:10, y:10 + heightPuzzlePiece + 5});
    locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + heightPuzzlePiece + 5});
    locationArr.push({x:10, y:10 + (heightPuzzlePiece + 5) * 2});
    locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + (heightPuzzlePiece + 5) * 2});
    locationArr.push({x:10, y:10 + (heightPuzzlePiece + 5) * 3});
    locationArr.push({x:10 + widthPuzzlePiece + 5, y:10 + (heightPuzzlePiece + 5) * 3});
    var index:Number = 0;
    var coordinates:Object;
    while(locationArr.length > 0)
    {
       coordinates = locationArr.splice(Math.floor(Math.random() * locationArr.length), 1)[0];
       puzzlePiecesArr[index].x = coordinates.x;
       puzzlePiecesArr[index].y = coordinates.y;
       index++;
    }
 }
 function makePuzzleBoard(width:Number, height:Number):void{
    var widthPuzzlePiece:Number = width / 4;
    var heightPuzzlePiece:Number = height / 2;
    var puzzleBoardSpaceClip:MovieClip;
    var x:Number = 0;
    var y:Number = 0;
    for(var i:Number = 0; i < 8; i++)
    {
       puzzleBoardSpaceClip = new MovieClip();
       puzzleBoardSpaceClip.graphics.lineStyle(0);
       puzzleBoardSpaceClip.graphics.beginFill(0xFFFFFF,100);
       puzzleBoardSpaceClip.graphics.lineTo(widthPuzzlePiece,0);
       puzzleBoardSpaceClip.graphics.lineTo(widthPuzzlePiece,heightPuzzlePiece);
       puzzleBoardSpaceClip.graphics.lineTo(0,heightPuzzlePiece);
       puzzleBoardSpaceClip.graphics.lineTo(0,0);
       puzzleBoardSpaceClip.graphics.endFill();
       puzzleBoardSpaceClip.x = x;
       puzzleBoardSpaceClip.y = y;
       x += widthPuzzlePiece;
       if(x >= width)
       {
          x = 0;
          y += heightPuzzlePiece;
       }
       puzzleBoardSpaceClip.name = String(i);
   // Ajouté pour le Mode précis
       puzzleBoardClip.addChild(puzzleBoardSpaceClip);
    }
    puzzleBoardClip.x = 350;
    puzzleBoardClip.y = 200 - puzzleBoardClip.height/2;
 }
 function puzzleSolved():void{
    holder.visible = false;
    var tmp:Bitmap = new Bitmap(puzzleBmp);
    puzzleBoardClip.addChild(tmp);
    var timer:Timer = new Timer(50);
    timer.start();
    timer.addEventListener("timer", puzTrash);
 }
 function puzTrash(evt:Event):void{
    if(threshold > 0xFFFFFF)
    {
       threshold = 0xFFFFFF;
       evt.target.stop();
       init();
    }
    puzzleBmp.threshold(puzzleBmp, new Rectangle(0,0,
    puzzleBmp.width, puzzleBmp.height), new Point(0,0), "<=",
    0xFF000000 | threshold);
    threshold *= 1.2;
 }
    

Flash User Forum

04/23/2012	Auto-Save and Auto-Recovery
04/23/2012	Open hyperlinks in new window/tab/pop-up ?
04/21/2012	PNG transparencies glitched
04/01/2010	Workaround for JSFL shape selection bug?

Flash Cookbooks

02/13/2012	Randomize an array
02/11/2012	How to create a Facebook fan page with Flash
02/08/2012	Digital Clock
01/18/2012	Recording webcam video & audio in a flv file on local drive

Choix de Pub

Analyse de l'exemple d'application Puzzle Game

par Valerio Virgillito

Modifié

Partage

Configuration requise

Niveau de l'utilisateur

Produits requis

Fichiers exemples

Chargement de l'image originale

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Création des pièces du puzzle

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Création du tableau du puzzle

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Déplacement des pièces du puzzle

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Résolution du puzzle

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Code de l'exemple d'application Puzzle Game

Code ActionScript 2.0 :

Code ActionScript 3.0 :

Flash User Forum

Flash Cookbooks

Produits

Solutions

Secteurs d'activité

Aide

Formation

Options d'achat

Téléchargements

Société