Frises
Téléchargement Fichier Zip # 46 Koctets
Vous avez besoin
de trois choses pour définir des frises :
. Le fichier bandes.js, bibliothèque javascript
. Un sprite de frises 40 x 40 pixels, j'ai joint quelques exemplaires au
fichier .zip.
. Une fonction Init contenant entre autres la définition des frises.
Insertion de
la bibliothèque
<title>Bandes / Strips
3</title>
<SCRIPT LANGUAGE="JavaScript1.2"
SRC=bandes.js></SCRIPT>
Après
le titre.
Définition
des frises
Exemple de fichier Init :
function Init() {
xorig = -20
yorig = 0
imgPath = "images/split0.jpg"
LELayer= new DessineLayer(imgPath)
LELayer.prog[0] =
new Array(12, 1, 0, null, null)
LELayer.prog[1] =
new Array(6, 0, 1, null, null)
LELayer.prog[2] =
new Array(15, 1, 0, null, null)
LELayer.prog[3] =
new Array(6, 0, -1, null, null)
LELayer.prog[4] =
new Array(12, 1, 0, null, null)
LELayer.ProgLayer()
}
Ce qui donne
:
Exemple 1
Vous devez définir, l'image
graphique de la frise et créer l'objet qui va dessiner les frises
:
imgPath = "images/split0.jpg"
LELayer= new DessineLayer(imgPath)
Dans cet exemple
l'origine de la première frise est définie par :
xorig = -20
yorig = 0
les frises
ici se suivent, la suivante commençant où finit la précédente,
(ce n'est pas obligatoire).
Chaque élément
de la frise, ici il y en a 4, est définit par une array comme :
LELayer.prog[0] =
new Array(12, 1, 0, null, null)
LELayer.prog[0]
le nom (LELayer) doit correspondre à l'objet créé
précédemment. prog[0]
le numéro de l'élément de l'array fixe l'ordre dans
lequel les frises seront dessinées.
Définition
des segments de frises :
new Array(12, 1, 0, null,
null)
new Array(Nombre d'images,
direction horizontale, direction verticale, origine X, origine Y)
Nombre d'images
: nombre d'images dans ce segment de la frise, ici 12. Les éléments
font 40 par 40 pixels mais ce recouvrent de 50 %, la longueur de ce segment
sera donc de 20 x 12 = 240 pixels.
Direction horizontale
: elle peut prendre des valeurs comprisent entre 1 et -1
1 la frise est dessinée de la gauche vers la droite.
0 la frise n'est pas dessinée dans le sens horizontal
-1 la frise est dessinée de la droite vers la gauche.
Direction verticale
: elle peut prendre des valeurs comprisent entre 1 et -1
1 la frise est dessinée du haut en bas.
0 la frise n'est pas dessinée dans le sens vertical
-1 la frise est dessinée de bas en haut.
Si les deux
directions sont à zéro, cet élément de la frise
n'est pas dessiné. Les valeurs peuvent être fractionnaire,
(exemple 2).
Origine X et
Origine Y, permettent de changer l'origine du segment, si ces valeurs sont
a null le segment commence où le précédent finissait.
On peut ne définir qu'une de deux valeurs en laissant l'autre à
null, dan ce cas la valeur laissée à null gardera la valeur
de la fin du segment précédent, (voir exemple
3).
Pente
des frises :
LELayer.prog[0]
= new Array(12, 1, 0.5, -20, 0)
LELayer.prog[1] =
new Array(6, 1, 0.5, 100, 0)
LELayer.prog[2] =
new Array(6, 1, -0.5, 520, 60)
LELayer.prog[3] =
new Array(12, 1, -0.5, 520, 120)
Ce qui donne :
Exemple 2
Dans cet exemple
la direction verticale est fractionnaire, (0.5), pour tous les segments.
Pour les arrays
2 et 3, on voit que la direction verticale est négative, le segment
remonte.
Modification
de l'origine des segments.
LELayer.prog[0] =
new Array(12, 1, 0, -20, 60)
LELayer.prog[1] =
new Array(6, 0, 1, null, 0)
LELayer.prog[2] =
new Array(6, 0, 1, 520, 0)
LELayer.prog[3] =
new Array(12, 1, 0, null, 60)
Ce qui donne :
Exemple 3
Le deuxième
segment, (indice 1), démarre à la fin du premier segment
pour la direction horizontale, (null), mais à la valeur 0 pour la
direction verticale.
Le troisième
segment, (indice 2), nécessite la définition des deux origines.
Lancement du
dessin
Par la commande de l'objet DessineLayer(),
LELayer.ProgLayer()
Lancement de
la fonction Init()
Par la commande onload
<body background="images/fond.jpg"
onload="Init()">
Contenu de la
page.
Après le tag body, insérer le contenu de la page comme ceci,
(à l'intérieur de la frise de l'exemple 1 par exemple) :
<div id="Bonjour" class="clsBonjour"
style="position: absolute; left: 300; top: 40; width: 440; height: 44;
visibility:visible; z-index:14;">
Bonjour
</div>
et pour le reste de la page, en Dhtml ou en Html normal, enclos dans un
layer tel que :
<div id="Nav" style="position:
absolute; left: 0; top: 300; width: 800; height: 800; visibility:visible;
z-index:14;">
....... Contenu .......
</div>
Vous pouvez me joindre à :
Jean-Pierre
Le Pichon
Téléchargement Fichier Zip # 46 Koctets
 |
Sommaire | |
| Previous | |