Animation Bases

Tutoriaux, Web Design, Animations, Bibliothèques

              1.Bibliothéque d'animation.
    J'ai développé pour les animations une bibliothèque nommé imagestripanim6.js comme son nom l'indique elle permet l'animation d'images présentées sous forme de bande. Comme celle-ci :



    Cette image est destiné à être découpé en un certains nombre d'images, ici 4, affichées l'une après l'autre pour donner l'impression d'une porte qui s'ouvre. Les images dans la bande doivent toutes avoir les mêmes dimensions, exemple 4 images 50 x 100 pixels où 50 est la largeur, seront regroupées en une bande de 200 pixels.
    Cette bibliothèque hérite, (inherit), de la bibliothèque dynlayer.js et possède donc toutes ses fonctions, on doit donc inclure dans les pages les deux bibliothèques, comme ceci :
<SCRIPT LANGAGE="JavaScript1.2" SRC=../ressources/dynlayer.js></SCRIPT>
<SCRIPT LANGAGE="JavaScript" SRC="../ressources/imagestripanim3.js"></SCRIPT>
    Je vous rappelle que ces bibliothèques outre qu'elles sont assez légères, 10k et 5 k ne sont appelées Ensuite le navigateur utilise la copie qui est dans le cachequ'une fois pendant une consultation.

              2.Animation.
    Pour ne pas faire mentir une tradition bien française, je vous invite à boire un cognac, sur cet exemple.
    Affichage de la bande image CognacVerre.gif , c'est un gif transparent :


    Ecriture des calques :

<div style="position: absolute; left: 200; top: 20">
<img border="0" src="images/salle40.jpg" width="501" height="265">
</div>
<div id="Cognac" style="position: absolute; left: 361; top: 178; visibility: hidden">
<img name="CognacImg" border="0" src="images/CognacVerre.gif" width="206" height="60">
</div>
<div id="Retour" style="position: absolute; left: 300; top: 350; visibility: visible">
<font size="+2"><a href="javascript:AffichePage()">Retour au tutorial</a></font>
</div>

    Le premier calque affiche une image en toile de fond
    Le deuxième calque affiche la bande image d'animation, on a positionné left et rigth pour que cette image apparaisse au-dessus de la petite table.
    Le troisième calque contient le lien de retour à cette page, c'est une fonction qui retourne à la page qui a appelée la page en cours.

<SCRIPT LANGUAGE="JavaScript1.2" SRC=../ressources/dynlayer.js></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="../ressources/imagestripanim3.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
function AffichePage() {
opener.focus()
}
function Init() {
CognacCalqueAnim = new StripAnim("Cognac","CognacImg",3, 600 )
CognacCalqueAnim.play(true)
CognacCalqueAnim.show()
}
</SCRIPT>
</head>
<body background="images/lighttex.jpg" onload="Init()">

    Programmation :
    Les deux premières lignes appellent les bibliothèques.
    Les instructions Javascript doivent être enclosent entre les tags <Script>
    La première fonction,  AffichePage(), est utilisée pour la gestion de ce tutorial.
    Dans la fonction Init() nous trouvons la création de l'objet StripAnim qui va nous permettre d'agir sur la bande image. Les noms de calque, d'images doivent être enclose entre des apostrophes doubles " ou simple '.

CognacCalqueAnim = new StripAnim("Cognac","CognacImg",3, 600 )

    Cet objet  StripAnim  comporte 4 paramètres :
        Le premier "Cognac" est le nom du calque renfermant la bande image d'animation, donné par id="Cognac".

        Le deuxième "CognacImg" est le nom de l'image de la bande image d'animation, donné par name="CognacImg"  dans le calque, ne pas confondre avec le nom du fichier  ici . images/CognacVerre.gif.

    Le troisième est le nombre d'images dans la bande, ici 3.

    Le dernier est le délai entre les images, en milli secondes, ici 600 soit 0,6 seconde, 1000 équivaudrai à 1 seconde..

    Une fois créé cette référence dans javascript nous lui donnons l'ordre de démarrer l'animation en écrivant :
    CognacCalqueAnim.play(true)

    Le calque est affichée en mode invisible, (hidden), sinon l'on verrait les trois images à la suite au moment du chargement. Quand tout les éléments html sont chargés, la fonction Init est exécutée et l'objet CognacCalqueAnim créé. Dès la création de cet objet, la bande image est clippée sur la première image qui donc seul devrait apparaître. Le calque étant toujours en hidden nous devons le faire apparaître en écrivant :
    CognacCalqueAnim.show()
   
      Page suivante, écrivez votre propre animation.

Sommaire
Previous Next