VEF Blog

Bon voici la partie 3 de ce tuto...j'ai du revoir le code pour l'ameliorer et le rendre plus clair. Vous pouvez faire ce tuto a partir de ce fichier (resultat de la partie precedente) : ICI

Ce tuto va apporter une limite aux deplacements du smiley car comme vous l'avez sans doute deja remarqué, vous pouviez sortir de la zone visible...
Mais la methode suivante n'est pas la seule possible, c'est d'ailleurs rarement le cas quand on code quelque chose....mais le code suivant, c'est ce qui m'est en premier venue a l'esprit.

Commencez par tracer le contour de l'animation d'un trait noir afin que l'utilisateur puisse visualiser les limites. Pour cela, selectionnez l'outil rectangle et mettez le remplissage transparent...ou apres le tracé, supprimez le remplissage interieur....à vous de choisir..

Cliquez sur le calque "actions" premiere image pour completer le code da la partie precedente (nous avions declarez une variable du pas de deplacement). Nous allons declarer quatres nouvelles variables donnant la limite du deplacement. Ecrivez le code suivant :

/*Calcul des limites :
(repere : origine = coin superieur gauche, direction positive : bas,droite)
MAXX : limite droite
MAXY : limite bas
MINX : limite gauche
MINY : limite haut
*/

MAXX=_root._width-(smiley._width)/2-5; //largeur de l'anim - moitie de la largeur du smiley - 5
MAXY=_root._height-smiley._height/2-5; //hauteur de l'anim - moitie de la hauteur du smiley - 5
MINX=smiley._width/2+5; //moitie de la largeur du smiley + 5
MINY=smiley._height/2+5; //moitié de la hauteur du smiley + 5
pas=10; //pas de deplacement

Explication :

    width : largeur et height : hauteur

    le _root signale que ce sont les dimension de l'animation principale que l'on veut....si en court de route vous changer la taille de l'animation, le code ne sera pas a changé.

    La position du smiley que l'on recuperera plus tard (le code n'est pas ici), c'est la position du point central du smiley. (dans le cas de mon anim car il est possible de modifier ce point et le mettre par exemple en haut a gauche du clip). De ce fait, c'est pour cela que nous ajoute ou retirons la moitié de la largeur ou hauteur du clip smiley. Cela evite un depassement graphique.

    Le "+/- 5" donne une petite marge de 5 pixel, le bout du nez du smiley ne cogne donc pas sur la limite.

Etape 3

---

Le code suivant est a mettre sur le clip smiley. Cliquez  une fois sur le smiley pour le selectionner puis entrer le code dans le champ action. (remplacer l'ancien).....ce code ajoute quelques lignes a l'ancien....
Voici le code :

onClipEvent(keyDown) //action effectuée si une touche est pressé
{
    switch(Key.getCode()) //recuperation du code de la touche pressé
    {
        case Key.RIGHT: //si touche fleche droite
                if(this._x+_root.pas<_root.MAXX) //on verifie que la future position ne depasse pas la limite horizontale maximale
                {   
                    this._x+=_root.pas; //si c'est vrai : la limite n'est pas dépassé, on ajoute le pas a la position horizontale
                }else{
                    this._x=_root.MAXX; //sinon la position est la valeur maximale horizontale
                }
                this.gotoAndStop(2); //affichage du smiley vers la droite
                break; //on sort du switch
        case Key.LEFT: //si touche fleche gauche
                if(this._x-_root.pas>_root.MINX) //on verifie que la future position ne depasse pas la limite horizontale minimale
                {
                    this._x-=_root.pas; //si c'est vrai : la limite n'est pas dépassé, on retire le pas a la position horizontale
                }else{
                    this._x=_root.MINX; //sinon la position est la valeur minimale horizontale
                }
                this.gotoAndStop(3); //affichage du smiley vers la gauche
                break; //on sort du switch
        case Key.UP: //si touche fleche haut
               
                if(this._y-_root.pas>_root.MINY) //on verifie que la future position ne depasse pas la limite verticale minimale
                {
                    this._y-=_root.pas; //si c'est vrai : la limite n'est pas dépassé, on retire le pas a la position verticale
                }else{
                    this._y=_root.MINY; //sinon la position est la valeur minimale verticale
                }
                this.gotoAndStop(4); //affichage du smiley vers le haut
                break; //on sort du switch
        case Key.DOWN: //si touche fleche bas
                if(this._y+_root.pas<_root.MAXY) //on verifie que la future position ne depasse pas la limite verticale maximale
                {
                    this._y+=_root.pas; //si c'est vrai : la limite n'est pas dépassé, on ajoute le pas a la position verticale
                }else{
                    this._y=_root.MAXY; //sinon la position est la valeur maximale verticale
                }
                this.gotoAndStop(1); //affichage du smiley vers le bas
                break; //on sort du switch
        default: //si ce n'est pas une de ces touches
        //on fait rien
    }
}

    Lors de la pression sur touche (une fleche), on verifie si la futur position que le smiley aura depasse ou non la limite concerné. Si le smiley depasse, alors sa position est celle de la limite, sinon, le smiley peut avancer. Ensuite on affiche l'image du smiley a affiché.

    Pour la fleche droite par exemple, il faut verifier que le smiley ne depasse pas la limite a droite (MAXX). Pour la fleche de gauche, la limite est a gauche (MINX) et ainsi de suite.