Animations

Tutoriaux, Web Design, Animations, Bibliothèques


              1.Bibliothéques.
    De la même façon que nous pouvons stocker dans un fichier extérieur à la page, des styles Css, nous pouvons stocker dans un fichier à l'extension js de la programmation javascript.  Il existe un certain nombre de bibliothèques, j'en utilise une de façon basique et j'ai développé quelques fonctions supplémentaires.

Ces bibliothèques s'appellent d'une façon similaire au fichier css, exemple :
    <script langage="JavaScript" src="../ressources/dynlayer.js"></script>
    Les ../ressources/ indiquant que la bibliothèque se trouve dans un répertoire nommé ressources situé en parallèle, (au-dessus et à coté), du répertoire de la page. Ici la bibliothèque se nomme dynlayer.js

              2.Inter-Navigateurs.
    Un des premiers problèmes à résoudre est d'écrire une bibliothèque qui soit exécutable sur Netscape et Internet Explorer car ces navigateurs ont des syntaxes différentes pour exprimer les commandes Css. Comme ces bibliothèques sont développées pour le Dhtml, par définition elles ne fonctionnent que pour les navigateurs de version 4 ou supérieures.

              3.Utilisation.
    Il faut généralement décrire dans des tags <div> les éléments que l'on veut rendre dynamique. Exemple l'animation d'une image,
    <div id="AnimImage" style="positionnement, dimensions et visibilité du calque">
    <img name="demoImage" src="chemin" heigth width>
    </div>
    Pour pouvoir agir sur ces calques, il faut obligatoirement leur donner un nom, (id), généralement il faut aussi donner un nom à l'image pour pouvoir la manipuler, (name). Ces noms sont à la discrétion de l'auteur, ils doivent être unique dans la page, ils doivent obligatoirement commencer par une lettre et éviter les signes cabalistiques, (parenthèses, lettre accentuée, ainsi de suite...).

              4.Exemples Bases.
    J'utilise comme base un élément d'une bibliothèque dut à Dan Steinman disponible à http://www.dansteinman.com/dynduo/ nommé dynlayer.js
    Appel de la bibliothèque , après le tag <Title> :
        <script langage="JavaScript" src="../ressources/dynlayer.js"></script>
    Ecriture d'un calque sur lequel agir,
<Div Id="Photo" style="position : absolute ; left : 40 ; top : 10 ; width : 200 ; height : 200 ; z-index : 12 ; visibility : visible">
     <img name="Bateau" src="images/bateau.jpg" border="0" width="200" height="200">
</div>
    Création de l'objet javascript :

<script langage="JavaScript1.2">
function Init() {
    CalqueBateau = new DynLayer("Photo")
}
</script>
</head>
<body background="images/lighttex.jpg" onload="Init()">

    Points important :
        Le nom du calque contenu dans l'instruction new DynLayer("Bateau") doit correspondre exactement au nom du calque cible, ici Java script est sensible au majuscule/minuscule "Photo".
        Dans le tag body doit figurer l'instruction  onload="Init()" qui initialise le processus.
        Le nom de l'objet, CalqueBateau, est neutre mais sera employé par la suite pour programmer le calque, il symbolise le calque pour javascript. Pour l'instant nous ne faisons aucune action sur le calque "Photo".


              5.Visibilité.
        Ce que nous allons faire : Le calque est invisible au chargement et devient visible quand la page est entièrement chargée.
    Rendons le calque invisible :
    Modifions le tag div comme suit ,
<Div Id="Photo" style="position : absolute ; left : 40 ; top : 10 ; width : 200 ; height : 200 ; z-index : 12 ; visibility : hidden">
    Le calque est caché et ne sera pas affiché, (Visualisation).
    Ecrivons l'action javascript qui rendra le calque visible après chargement de la page.
    Réécrivons la fonction Init.
function Init() {
    CalqueBateau = new DynLayer("Photo")
    CalqueBateau.show()
}
    Pour effectuer une action sur le calque photo, nous nous servons de sa désignation dans javascript, (Respectez bien les majuscules/minuscules et la présence du point CalqueBateau), suivit d'un point et d'une des instructions de la bibliothèque Ici nous employons l'instruction show(), qui passe le calque à visible, si le calque était déjà visible, cette commande n'a pas d'effet.
Visualisation

Sommaire
Previous Next