Techniques > créer un puzzle "Pousse-pousse">

Le principe :

Cliquez sur une des pièces voisines de l'emplacement libre... Le but étant uniquement de rétablir l'ordre de la disposition des pièces. L'ordre est celui que vous voulez. Télécharger le fichier fla - Mac - PC

Comment le créer ?

Il existe deux méthodes de création.

Vous pourriez réaliser ce puzzle style "Pousse-pousse" à base de lignes de code que vous pourriez copier-coller en modifiant les paramètres et en dupliquant un symbole "modèle" afin d'obtenir autant de symboles que de pièces.

Vous pouvez aussi utiliser les nouvelles fonctionnalités de Flash 5 telles que les smartclips et les listes. Le code devient alors vraiment très complexe mais vous limitez ainsi le nombre de symbole et la multiplication du code dû au nombre de symboles différents.

Voici en quelques points la procédure qui vous permettra de réaliser cette application :

1. Créer un movie clip qui contient 9 images avec une lettre différente sur chacune. L'image 5 est vide
2. Placer le code ci-dessous sur la première image du movie clip


stop ();
gotoAndStop (_parent.posi);

3. Placer ce movieclip et un bouton (le pion) dans un autre movie clip
4. Placer le code ci-dessous sur le bouton

on (press) {
ok = 1;
qlpiece = eval("_root." add _name).posi;
// piece 1
if (qlpiece == 1) {
// Test case 2
if (_root.cle[1] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[1];
eval("_parent." add _name)._y = _root.posiv[1];
OK = 0;
eval("_root." add _name).posi = 2;
_root.cle[1] = 1;
_root.cle[0] = 0;
}
// Test case 4
if (_root.cle[3] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[3];
eval("_parent." add _name)._y = _root.posiv[3];
OK = 0;
eval("_root." add _name).posi = 4;
_root.cle[3] = 1;
_root.cle[0] = 0;
}
}
// piece 2
if (qlpiece == 2) {
// Test case 1
if (_root.cle[0] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[0];
eval("_parent." add _name)._y = _root.posiv[0];
OK = 0;
eval("_root." add _name).posi = 1;
_root.cle[0] = 1;
_root.cle[1] = 0;
}
// Test case 5
if (_root.cle[4] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[4];
eval("_parent." add _name)._y = _root.posiv[4];
OK = 0;
eval("_root." add _name).posi = 5;
_root.cle[4] = 1;
_root.cle[1] = 0;
}
// Test case 3
if (_root.cle[2] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[2];
eval("_parent." add _name)._y = _root.posiv[2];
OK = 0;
eval("_root." add _name).posi = 3;
_root.cle[2] = 1;
_root.cle[1] = 0;
}
}
// piece 3
if (qlpiece == 3) {
// Test case 2
if (_root.cle[1] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[1];
eval("_parent." add _name)._y = _root.posiv[1];
OK = 0;
eval("_root." add _name).posi = 2;
_root.cle[1] = 1;
_root.cle[2] = 0;
}
// Test case 6
if (_root.cle[5] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[5];
eval("_parent." add _name)._y = _root.posiv[5];
OK = 0;
eval("_root." add _name).posi = 6;
_root.cle[5] = 1;
_root.cle[2] = 0;
}
}
// piece 4
if (qlpiece == 4) {
// Test case 1
if (_root.cle[0] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[0];
eval("_parent." add _name)._y = _root.posiv[0];
OK = 0;
eval("_root." add _name).posi = 1;
_root.cle[0] = 1;
_root.cle[3] = 0;
}
// Test case 5
if (_root.cle[4] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[4];
eval("_parent." add _name)._y = _root.posiv[4];
OK = 0;
eval("_root." add _name).posi = 5;
_root.cle[4] = 1;
_root.cle[3] = 0;
}
// Test case 7
if (_root.cle[6] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[6];
eval("_parent." add _name)._y = _root.posiv[6];
OK = 0;
eval("_root." add _name).posi = 7;
_root.cle[6] = 1;
_root.cle[3] = 0;
}
}
// piece 5
if (qlpiece == 5) {
// Test case 2
if (_root.cle[1] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[1];
eval("_parent." add _name)._y = _root.posiv[1];
OK = 0;
eval("_root." add _name).posi = 2;
_root.cle[1] = 1;
_root.cle[4] = 0;
}
// Test case 4
if (_root.cle[3] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[3];
eval("_parent." add _name)._y = _root.posiv[3];
OK = 0;
eval("_root." add _name).posi = 4;
_root.cle[3] = 1;
_root.cle[4] = 0;
}
// Test case 6
if (_root.cle[5] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[5];
eval("_parent." add _name)._y = _root.posiv[5];
OK = 0;
eval("_root." add _name).posi = 6;
_root.cle[5] = 1;
_root.cle[4] = 0;
}
// Test case 8
if (_root.cle[7] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[7];
eval("_parent." add _name)._y = _root.posiv[7];
OK = 0;
eval("_root." add _name).posi = 8;
_root.cle[7] = 1;
_root.cle[4] = 0;
}
}
// piece 6
if (qlpiece == 6) {
// Test case 3
if (_root.cle[2] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[2];
eval("_parent." add _name)._y = _root.posiv[2];
OK = 0;
eval("_root." add _name).posi = 3;
_root.cle[2] = 1;
_root.cle[5] = 0;
}
// Test case 5
if (_root.cle[4] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[4];
eval("_parent." add _name)._y = _root.posiv[4];
OK = 0;
eval("_root." add _name).posi = 5;
_root.cle[4] = 1;
_root.cle[5] = 0;
}
// Test case 9
if (_root.cle[8] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[8];
eval("_parent." add _name)._y = _root.posiv[8];
OK = 0;
eval("_root." add _name).posi = 9;
_root.cle[8] = 1;
_root.cle[5] = 0;
}
}
//
//
//
// piece 7
if (qlpiece == 7) {
// Test case 4
if (_root.cle[3] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[3];
eval("_parent." add _name)._y = _root.posiv[3];
OK = 0;
eval("_root." add _name).posi = 4;
_root.cle[3] = 1;
_root.cle[6] = 0;
}
// Test case 8
if (_root.cle[7] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[7];
eval("_parent." add _name)._y = _root.posiv[7];
OK = 0;
eval("_root." add _name).posi = 8;
_root.cle[7] = 1;
_root.cle[6] = 0;
}
}
// piece 8
if (qlpiece == 8) {
// Test case 7
if (_root.cle[6] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[6];
eval("_parent." add _name)._y = _root.posiv[6];
OK = 0;
eval("_root." add _name).posi = 7;
_root.cle[6] = 1;
_root.cle[7] = 0;
}
// Test case 5
if (_root.cle[4] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[4];
eval("_parent." add _name)._y = _root.posiv[4];
OK = 0;
eval("_root." add _name).posi = 5;
_root.cle[4] = 1;
_root.cle[7] = 0;
}
// Test case 9
if (_root.cle[8] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[8];
eval("_parent." add _name)._y = _root.posiv[8];
OK = 0;
eval("_root." add _name).posi = 9;
_root.cle[8] = 1;
_root.cle[7] = 0;
}
}
// piece 9
if (qlpiece == 9) {
// Test case 6
if (_root.cle[5] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[5];
eval("_parent." add _name)._y = _root.posiv[5];
OK = 0;
eval("_root." add _name).posi = 6;
_root.cle[5] = 1;
_root.cle[8] = 0;
}
// Test case 8
if (_root.cle[7] == 0 && OK == 1) {
eval("_parent." add _name)._x = _root.posih[7];
eval("_parent." add _name)._y = _root.posiv[7];
OK = 0;
eval("_root." add _name).posi = 8;
_root.cle[7] = 1;
_root.cle[8] = 0;
}
}
}

5. Transformer ce movie clip en Smartclip et créez la variable "posi"
6. Placer ce smartclip 8 fois sur la scène en donnant un nom à chaque occurrence
   
   a b c
   d . e
   f g h
   
   
7. Placer le code ci-dessous sur la première image de l'animation

 

cle=[1,1,1,1,0,1,1,1,1]
posih=[65,165,265,65,165,265,65,165,265]
posiv=[65,65,65,165,165,165,265,265,265]

Ces trois listes correspondent :
- A l'emplacement de la piece vide
- La position horizontale des pièces a,b,c,d,e,f,g,h
- La position verticale des pièces a,b,c,d,e,f,g,h

Voici la solution un peu longue mais pour une meilleure compréhension, aidez vous de ce "mode d'emploi" et de l'animation elle-même et décortiquez la.

< Sommaire