Animer avec Javascript comme l'ActionScript

kabbabi Messages postés 222 Statut Membre -
dariumis Messages postés 583 Statut Membre - 1 juil. 2010 à 15:42

Bonjour,

En ActionScript, on peut faire bouger un objet grâce au défilement des frames :

onEnterFrame = function(){

objet._x+=1;

}

Dans ce code, un objet se déplace de gauche à droite progressivement.

Existe-il en JavaScript des codes permettant de faire la même chose ?

Merci

Afficher la suite

2 réponses

Réponse 1 / 2
dariumis Messages postés 583 Statut Membre 63
Salut, j'avais fais ce code pour une amie, tu peux voir le résultat ici:
http://dariumis.webhop.biz/test/LDP/diapo.php
```
<script> 
    var i=-50; 
    var bool=true; 
    function incremente(id){ 
        if(bool==true){ 
            i=i+1; 
            document.getElementById(id).style.display='block'; 
            document.getElementById(id).style.left=i+'%'; 
            if(i<25){ 
                setTimeout("incremente()",0); 
            }else{ 
                bool=false; 
            } 
        } 
    } 
</script> 
```
0
1. kabbabi Messages postés 222 Statut Membre 6
  
  Merci, c'est exactement ça que je veux : Jouer avec les éléments d'une page.
  Mais aurais-tu un tutoriel COMPLEt s'il te plaît qui est spécialisé comme ça ?
  (Fondus, vitesse de déplacement, éclaircissement progressif d'un objet ...)
  
  0
2. dariumis Messages postés 583 Statut Membre 63
  
  ha non désolé, je n'ai pas connaissance d'un tel tuto, mais ça doit exister. J'y connais rien et je dis peut etre une bétise, mais peut etre chercher du côté de "jquery" j'ai entendu dire que ça faisait des trucs comme ça, mais comme j'ai dis je connais pas jquery.
  Apres je pense que sur la base du code plus haut doit y avoir moyen de l'adapter pour d'autres choses.
  
  0
3. kabbabi Messages postés 222 Statut Membre 6
  
  OK mais tu pourrais pas m'expliquer ton code et je me débrouille après ?
  
  0

dariumis Messages postés 583 Statut Membre 63

ok.
Le javascript:

<script>   
    /*initialisation de "i" qui représente  
    la position de départ de l'objet ici -50%*/  
    var i=-50;   
    /*initialisation d'un boolean pour dire quant l'objet  
    est arrivé a sa position final sinon en recliquant sur le  
    lien il continurait a avancer*/  
    var bool=true;   
    /*la fonction icremente qui s'appel elle même (récursivité).  
    Elle prend l'id de l'objet a déplacer en parametre*/  
    function incremente(id){   
        //si le boolean est vrai  
        if(bool==true){   
            /*on incrémente la position, si tu met "i=i+2" les pas  
            seront deux fois plus grand*/  
            i=i+1;   
            /*au depart l'objet a un css "display:none"  
            on le met visible*/  
            document.getElementById(id).style.display='block';   
            //on applique la nouvelle position  
            document.getElementById(id).style.left=i+'%';   
            //si la position est inferieur a 25%  
            if(i<25){   
                /*on éxecute de nouveau la fonction dans un timer,  
                tu peux modifier la vitesse avec le deuxieme parametre  
                de la fonction "setTimeout" voir la  
                doc pour en savoir plus*/  
         setTimeout("incremente(id)",0);  
                /*sinon il est arrivé a sa position final on initialise  
                le boolean a false*/  
            }else{   
             bool=false;   
            }   
        }   
    }   
</script>

l'html:

<!-- a partir du body -->  
<body>  
    <!-- si le javascript du client est désactivé -->  
    <noscript>Vous devez activer votre javascript</noscript>  
    <div id="global">  
        <!-- élément a cliquer pour lancer le javascript sur "onclik()"  
        il prend l'id de l'objet a déplacer  
        -->  
        <div title="lancer le code javascript" style="cursor:pointer;" onclick="incremente('diap3')" id="menu">  
         menu1  
        </div>  
    </div>  
    <!-- l'objet animé ici un div -->  
    <div id="diap3">  
        diaporama 1  
    </div>  
</body>

le css:

/*css appliqué au depart sur l'objet qui se déplace*/  
#diap3{  
/*en position absolute pour etre indépendant des autres éléments*/  
position:absolute;  
/*pour le style*/  
border:ridge;  
/*longueur, c'est pour ça que la codition du javascript ce termine a 25%  
pour que l'objet soit bien centré*/  
width:50%;  
/*au départ on ne l'affiche pas, on l'affiche que lors du clique sur menu1*/  
display:none;  
}

EDIT: Rectification de l'erreur cité ci-dessous.

kabbabi Messages postés 222 Statut Membre 6

Ça a pas marché :S
0
dariumis Messages postés 583 Statut Membre 63
j'ai fait une erreur sur cette ligne désolé:
```
setTimeout("incremente('diap3')",0);
```
faut faire rentrer l'id en parametre dans javascript.
0
dariumis Messages postés 583 Statut Membre 63
ou plutot comme ça:
```
setTimeout("incremente(id)",0);
```
0

Animer avec Javascript comme l'ActionScript

2 réponses

Discussions similaires

Newsletters