Séquence
Séquence
Tutoriaux, Web Design, Animations, Bibliothèques
1.Séquences d'animation.
A partir de la même bibliothèque, on peut enchainer
une séquence d'animation, comme par exemple une porte qui s'ouvre et ensuite un
link qui s'exécute pour charger une autre page. Reprenons l'exemple de
l'animation de porte, avec l'image suivante :
Nous avions réalisé dans le fichier Salle3.htm une
animation de cette porte :
function Init() {
PorteCalqueAnim =
new StripAnim("Porte","PorteImg",4, 600 )
PorteCalqueAnim.alternate
= true
PorteCalqueAnim.play(true)
PorteCalqueAnim.show()
}
</SCRIPT>
</head>
<body background="images/lighttex.jpg"
onload="Init()">
<div style="position: absolute; left: 200; top:
20">
<img
border="0" src="images/salle41.jpg" width="501"
height="269">
</div>
<div id="Porte" style="position: absolute;
left: 328; top: 108; visibility: hidden">
<img
name="PorteImg" border="0"
src="images/PorteAni.JPG" width="280"
height="152">
</div>
Script à réaliser :
A.Quand on passe au dessus de la
porte, celle-ci s'entrouve et se referme.
B.Quand on clicque sur la porte, elle
s'ouvre
C.Ensuite on charge une autre page,
(Porte.htm).
Il faut supprimer dans le code ci-dessus les deux lignes
suivantes, sinon l'animation s'exécuterait de façon continue.
PorteCalqueAnim.alternate = true
PorteCalqueAnim.play(true)
2.RollOver.
Il faut rajouter le paramêtre
"Bascule" dans la création de PorteCalqueAnim.
PorteCalqueAnim = new
StripAnim("Porte","PorteImg",4, 800, "Bascule")
Voir
3.Ouvrir la porte.
Pour que la porte s'ouvre il faut donner l'ordre :
PorteCalqueAnim.play(false)
avec le paramêtre false car nous ne voulons qu'une seule
exécution de l'animation. Pour que ceci soit exécuté sur un click de souris
il faut l'intégrer après l'ordre "Bascule" dans le new StripAnim.
Il est plus simple de le passer d'abord à une variable, comme clickPorte
:
clickPorte =
"PorteCalqueAnim.play(false)"
Ensuite on porte cette variable dans le new StripAnim.
PorteCalqueAnim = new
StripAnim("Porte","PorteImg",4, 800, "Bascule",
clickPorte)
Voir
Cliquez sur la porte pour qu'elle s'ouvre.
4.Charger une autre page.
Pour charger une autre page, il faut exécuter l'ordre :
window.location.href = 'porte.htm'
où porte.htm est l'adresse de la page à charger.
De la même façon que précedemment nous chargerons cet
ordre dans une variable, comme finPorte :
finPorte = "window.location.href =
'porte.htm' "
Attention : porte.htm est
enclos entre des simple guillements, ('), alors que window.location.href =
'porte.htm' est enclos entre des guillemets double, ("), ceci est
impératif.
Cette variable sera écrite dans le new StripAnim.
PorteCalqueAnim = new
StripAnim("Porte","PorteImg",4, 800, "Bascule",
clickPorte,finPorte)
Voir
Cliquez sur la porte pour qu'elle s'ouvre et effectue le
link.
5.Position des variables.
La premiére variable, clickPorte, est exécutée quanq on
clique sur le l'objet créé, la deuxième, finPorte, quand l'animation atteint
la dernière image. Le nom des variable n'a pas d'importance, par contre il faut
respecter leurs positions dans le new StripAnim.
6.Créer un link animé.
Créer une animation, comme dans Adaptation.
Déterminer la page destination.
A partir de Salle6.htm par exemple, changer le nom Porte en
celui de votre calque.
Changer dans la variable finPorte le nom porte.htm en celui
de votre page de destination.
Prochainement Interactions entre calques
 |
Sommaire | |
| Previous |  |