Source David Doull 
http://www.artifactinteractive.com

À télécharger: Sol.wmf  etoile.wmf

Cette seconde fiche ajoute un arrière-plan défilant au  jeu afin de créer un effet de mouvement. Les notions touchées sont les mêmes que dans la fiche précédente, soit les variables, les propriétés et les instructions conditionnelles.

1. Ouvrez d’abord, s'il ne l'est pas déjà, le fichier Arcade_A.fla qui représente le point de départ de cette nouvelle fiche.
2. Créez un nouveau calque et nommez-le SOL. Glissez-le sous le calque VAISSEAU. Importez l'image Sol.wmf que vous avez précédemment téléchargée. Enfoncez les touches CTRL+G pour grouper toutes les sections du sol. Établissez sa largeur à 600 pixels à l'aide du panneau INFO (L). À l'aide du panneau ALIGNER, placez le sol sur le bas de la scène et centrez-le horizontalement comme dans l'exemple ci-dessous.

Exemple créé par Évans Bernier

3. Sélectionnez le sol et convertissez-le en symbole de type CLIP. Nommez-le SOL. Nommez aussi l’occurrence de ce clip SOL.

Il faut deux copies du clip l’une à la suite de l’autre pour créer un défilement régulier. La seconde copie assure que le sol couvre toujours la scène. Quand la première copie du clip s’est complètement déplacée vers la gauche, les deux copies sont replacées à leur position de départ. Pour ce faire, on va créer un nouveau clip contenant ces deux copies: il sera plus facile de déplacer un clip que deux.

4. Sélectionnez le clip SOL et créez un nouveau symbole de type CLIP que vous nommez SOL_PRINCIPAL (menu Insertion, Convertir en symbole). Nommez aussi l’occurrence de ce symbole SOL_PRINCIPAL. Assurez-vous qu’il a bien un comportement de CLIP.
5. Ajoutez le script suivant dans la boîte Actions du clip SOL_PRINCIPAL.

onClipEvent (load) {
         sol.duplicateMovieClip("sol2", 1000);
         sol2._x = sol._x+sol._width;
         solDépartx = this._x;
         ViteSol=10;
}

Puisque se script est contenu dans une instruction OnClipEvent(load), il s’effectue lors du premier chargement du clip. La seconde ligne crée une copie du sol, la nomme Sol2 et la décale de 1000 pixels. La ligne suivante règle la valeur x de Sol2 à la valeur x de Sol plus la largeur du sol en question. Cela place Sol2 exactement à droite de Sol.  La quatrième ligne crée une nouvelle variable qui prend la valeur x du clip SOL_PRINCIPAL afin de conserver en mémoire la position de départ de ce clip. La dernière ligne initialise une autre variable représentant la vitesse de déplacement du sol.

6. Ajoutez le script suivant sous le précédent dans SOL_PRINCIPAL.

onClipEvent (enterFrame) {
         this._x-=viteSol
         if (this._x<= (solDépartx-sol._width)){
                  this._x=solDépartx-viteSol;
         }
}

La seconde ligne de code diminue la valeur de x de la valeur de ViteSol. Comme cette variable a été initialisée à 10, cela déplace le sol vers la gauche de 10 pixels. La ligne suivante vérifie si le clip SOL_PRINCIPAL a été déplacé assez loin vers la gauche pour que le clip SOL soit complètement hors de la scène. Si c’est le cas, la ligne suivante le replace à sa position de départ.

Cependant, ce serait mieux si le défilement s’effectuait en fonction du déplacement du vaisseau. La plus grande partie du code servant à cette association sera placé dans le clip VAISSEAU.

7. Sélectionnez le clip VAISSEAU et ouvrez la fenêtre Actions.  Ajoutez les lignes suivantes dans la section onClipEvent(load), directement sous la ligne CompteurLaser=1;.

Défilex=_root.sol_Principal.sol._width/3;
DéfileDépart=false;

Deux nouvelles variables sont introduites. Défilex représente la coordonnée x à laquelle le vaisseau cesse de bouger et où le sol commence à le faire. Elle est du tiers de la largeur du sol. La seconde variable, DéfileDépart, est initialisée à true si le sol défile, sinon à false.

8. Remplacez le code correspondant à la flèche vers la droite par le suivant.

if (Key.isDown(Key.RIGHT)) {
        if (this._x<défilex){
                  this._x+=ViteDeplace;
                  } else {
                            défileDépart=true;
                  }
         } else if (Key.isDown(Key.LEFT)) {
                  this._x-=ViteDeplace;
         }

Une nouvelle instruction est ajoutée: si la coordonnée x du vaisseau est plus petite que défilex, elle est augmentée. Dans le cas contraire, on règle la variable défileDépart à true sans rien changer à la coordonnée du vaisseau.

9. Ajoutez une autre section de code pour arrêter le défilement. Celle-ci va à la suite des scripts déjà présents dans les actions du clip VAISSEAU.

onClipEvent(KeyUp) {
         if (Key.getCode()==Key.RIGHT) {
         défileDépart=false;
         }
}

On vient d’introduire un nouvel événement clavier KeyUp Cet événement se produit lorsque l’utilisateur enlève son doigt d’une touche. On l’utilise ici parce qu’on veut que le sol cesse de défiler lorsque le joueur lâche le bouton.

La fonction Key.getCode() identifie la dernière touche relâchée. Dans le cas présent, on vérifie s’il s’agit de la flèche vers la droite et, dans l’affirmative, on initialise défileDépart à false. Il ne reste qu’à ajouter une instruction au clip SOL_PRINCIPAL pour que le défilement du sol ne se produise que si défileDépart vaut true.

10. Refermez la boîte Actions du clip VAISSEAU et sélectionnez celle du clip SOL_PRINCIPAL. Modifiez le code onClipEvent(enterFrame) de la façon suivante.

onClipEvent (enterFrame) {
     if (_root.vaisseau.défileDépart==true) {
     this._x-=viteSol;
     if (this._x<= (solDépartx-sol._width)){
         this._x=solDépartx-viteSol;
     }
}
}

11. Allez dans les propriétés de l’animation et réglez la vitesse de l’animation à 25 images/seconde. Enregistrez votre jeu sous le nom Arcade_B.fla et testez l’animation.

12. Il est possible d’utiliser deux arrière-plans qui défilent simultanément. Ce n’est pas très difficile, à condition der respecter les étapes à la lettre. Commencez par créer un nouveau calque et nommez-le CIEL. Glissez-le sous le calque SOL.
13. Importez l’image etoile.wmf que vous avez téléchargée précédemment. Groupez l’image (CTRL+G) et redimensionnez-la à 25 x 25 à l'aide du panneau INFO. Convertissez-la en un symbole de type Graphique que vous nommez ETOILE.
14. Glissez plusieurs copies du symbole graphique ETOILE, de dimensions diverses, sur la scène comme dans l’exemple ci-dessous. Vous pouvez utiliser le copier/coller.  

15. Sélectionnez toutes les étoiles (maintenez la touche MAJ enfoncée pendant que vous cliquez sur chacune) et groupez-les (CTRL+G). Convertissez ensuite le groupe en un symbole de type Clip et nommez-le CIEL. Nommez aussi l’occurrence du clip CIEL.
16. Sélectionnez le clip CIEL et créez un nouveau symbole de type clip (F8) que vous nommez CIEL_PRINCIPAL. Nommez aussi l’occurrence de ce symbole CIEL_PRINCIPAL. Assurez-vous qu’il a bien un comportement de Clip.
17. Ajoutez le script suivant dans la boîte Actions (menu contextuel) du clip CIEL_PRINCIPAL.

onClipEvent (load) {
ciel.duplicateMovieClip("ciel2", 1000);
ciel2._x = ciel._x+ciel._width;
cielDépartx = this._x;
viteCiel=4;
}

onClipEvent (enterFrame) {
     if (_root.vaisseau.défileDépart==true) {
     this._x-=viteCiel;
     if (this._x<= (cielDépartx-ciel._width)){
         this._x=cielDépartx-viteCiel;
     }
}
}

18. Sauvegardez le jeu (Arcade_B.fla) et vérifiez son fonctionnement.