Adaptation

Tutoriaux, Web Design, Animations, Bibliothèques

              1.Exemple.
           Ouvrez un éditeur de texte, à partir du répertoire ou vous avez installé ce tutorial, cherchez le répertoire DhtmlTutor, éditer le fichier Salle1.htm.
    Dans ce fichier nous allons changer l'image de fond et celle d'animation.
   L'image de fond devient,
    src="images/salle41.jpg" width="501" height="269"
    L'image d'animation devient,
    src="images/PorteAni.JPG" width="280" height="152"

    Vous pouvez remarquer que les noms d'objet javascript, de calque et d'image sont construit autour du nom du calque.
    Nom du calque Cognac
    CognacCalqueAnim, CognacImg
    Pour remplacer le calque Cognac par un calque nommé Porte, vous faites un Remplace Cognac par Porte.
    Il vous reste à actualiser le nombre d'images de trois à 4 dans :
    PorteCalqueAnim = new StripAnim("Porte","PorteImg",4, 600 )
    en exécutant la page sur un navigateur vous devez voir la porte s'ouvrir à répétition.
    Positionnement de la porte par rapport à l'image de fond.
    La plupart des  softs de dessin, permettent de mesurer l'emplacement d'une image dans une autre, il suffit de visualiser sur un de ces softs l'image de fond et ensuite de coller l'image à cadrer dessus, en déplacant cette dernière on place son coin haut gauche sur le coin haut gauche de la porte de l'image de fond. C'est le cas de Adobe Photoshop, (par les règles), Corel Photopaint, (directement dans le menu outil), Micrograf Picture Publisher, (sur la barre d'état en bas à gauche), Paint Shop Pro, (par les règles), et d'autres certainement. Tous ces softs vous donnent des positions relatives dans l'image, vous devez rajouter les décalages de l'image de fond pour avoir les coordonnées absolues dans la page.
    Si vous ne disposez pas de ces softs, voici les positions left: 328; top: 108;
    Une foi faite cette modification vous devez voir la porte s'ouvrir de façon répétitive au bon endroit. Corrigé

    Il serait intéressant pour cette animation de repartir en sens inverse au lieu de revenir à la premiére image.
    Il suffit de positionner la propriétées alternate a true comme ceci:
    PorteCalqueAnim.alternate = true
    Insérée directement après la création de PorteCalqueAnim  dans la fonction Init. Corrigé
    Vous pouvez faire varier le délai, ici fixée à 600 mS, entre 300 et 1200.

              2.Fabrication Locale.
    Que vous faut-il pour insérer vos propre animation ;
        Une image en bande
        Changer le nom du fichier image
        Changer la désignation du calque et des noms d'objets, d'images.
        Positionner vos images.

              3.Animations multiples.
    Celà revient à définir plusieurs objets javascript à partir de plusieurs calques. Nous le verrons dans les exemples suivant.

	Sommaire
Previous		Next