INITIATION AU VML | EDITION DE DESSIN | LES PRINCIPAUX ELEMENTS VML

INTERACTIVITÉ ET ANIMATION


Voir les animations en page d'accueil

Chaque élément VML peut être ciblé par une ou plusieurs fonctions Javascript.
Celles-ci sont définies par des actions dirigées vers un ou plusieurs attributs.
L'élément VML peut être lui-même le déclencheur de l'action.

Prenons par exemple un rectangle identifié "rct".
<v:rect id=rct
Faisons de ce rectangle le créateur d'un événement en le rendant sensible au "click" de la souris.
La notation "onclick" caractérise cette événement dont la valeur détermine l'action recherchée.
<v:rect id=rct onclick="ma fonction"
Une fonction simple affecte dans l'ordre l'identifiant . l'attribut = nouvelle valeur de l'attribut.
Créons une fonction qui va changer la largeur de notre rectangle:
<v:rect id=rct onclick="rct.style.width=465"
Lorsque la fonction cible un attribut de style, le mot style doit précéder l'attribut.

Code d'un premier exemple:

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:rect id=rct style='width:80;height:80' fillcolor=green
title="Cliquez à l'intérieur du rectangle"
onclick="rct.style.width=465" />

</body>
</html>

Application: Cliquez sur le rectangle.

Vous avez remarqué que le rectangle retrouve son format dès que le pointeur quitte sa surface.
Nous avons en réalité ajouté l' événement "onmouseout" pour revenir à la largeur d'origine.

Code complet:

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:rect id=rct style='width:80;height:80' fillcolor=green
title="Cliquez à l'intérieur du rectangle"
onclick="rct.style.width=465"
onmouseout="rct.style.width=80"
/>

</body>
</html>


Lorsqu'une fonction possède plusieurs actions, il est bon de les grouper entre les balises <script>...</script>
Dans l'exemple suivant nous allons utiliser l'attribut "href" de l'élément fill au lieu de "onclick".

Application:
Cliquez sur la voiture pour en changer la silhouette et la couleur.
Double-cliquez pour annuler.

Code complet:

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<script>
function chang()
{
caisse.fillcolor="#be0000"
caisse.path="m228,153c313,54,393,,607,v282,,353,164,476,228c1266,273,1528,325,1617,396v93,72,114,111,-63,165c1353,579,123,675,66,444,,187,143,252,228,153e"
roueAV.style.left=165
}
function retour()
{
caisse.fillcolor="#969696"
caisse.path="m267,243c352,144,246,,594,,876,,807,206,930,270v183,45,318,36,357,105c1364,459,1448,543,1248,576,1047,594,163,592,,537,12,270,168,282,267,243e"
roueAV.style.left=130
}
</script>
<v:group id=voiture style='width:1000;height:1000'>
<v:oval id=roueAR style='left:25;top:61;width:22;height:22' strokeweight=6 />
<v:shape id=caisse style='left:0;top:0;width:130;height:130' ondblclick="retour()"
path=m267,243c352,144,246,,594,,876,,807,206,930,270v183,45,318,36,357,105c1364,459,1448,543,1248,576,1047,594,163,592,,537,12,270,168,282,267,243e
fillcolor=#969696 stroked=f  href="javascript:chang()">
</v:shape>
<v:oval id=roueAV style='left:130;top:63;width:22;height:22' strokeweight=6 />
</v:group>

</body>
</html>


Il est possible d'associer les outils HTML pour commander des actions script sur les objets VML.
Application: Testez ci-dessous les 4 valeurs de l'attribut "method" de l'élément "fill".
4 méthodes focus:
Effet zoom:

Code complet:

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<script>
D=100
V=10
function zoomplus()
{
format.style.width =D+V
format.style.height=D+V
tour.weight=(D+V)/15
D=D+V
}

function zoomoins()
{
if(D>0)
{
format.style.width =D-V
format.style.height=D-V
tour.weight=(D-V)/15
D=D-V
}
}
</script>
</head>
<body>
<table style='font-size:12'>
<tr><td>4 dégradés:
<td>
<input type=button value=sigma style='width:50' onclick="etoile.method='sigma'">
<input type=button value=none style='width:50' onclick="etoile.method='none'">
<input type=button value=any style='width:50' onclick="etoile.method='any'">
<input type=button value=linear style='width:50' onclick="etoile.method='linear'">
<tr><td align=right>Effet zoom:
<td>
<input type=button value="zoom -" style='width:50' onclick="zoomoins()">
<input type=button value="zoom +" style='width:50' onclick="zoomplus()">
</table><br>
<v:group id=format style='width:100;height:100'>
<v:shape style='width:1600;height:1600'>
<v:path v=m702,r78,330l1173,66,1005,489r384,114l1041,750r120,342l870,939r-72,432l618,993,447,1230,414,951,96,999,345,738,,519,372,477,258,54,594,318xe />
<v:stroke id=tour color=fuchsia weight=6.7 dashstyle="1 1" endcap=round opacity=.5 />
<v:fill id=etoile color=purple color2=#ffabff focusposition=.5,.5 focus=0 type=gradientTitle />
</v:shape>
</v:group>

</body>
</html>


Une action temporelle peut modifier la valeur d'un attribut.
Application: Fondu alternatif de 2 couleurs par transparence.


Code complet:

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>
<script>
var a=0
function depart()
{
setInterval("permu()",1)
}
function permu()
{
if (a<100)            
{
a = a+1
op.opacity=a/100
sb.opacity=1-a/100
}
}
</script>
<table><tr><td>
<input type=button value=action onclick="depart()"
onmouseout="op.color='green'" onmouseover="op.opacity=0,sb.opacity=1,op.color='red'">
<td>
<v:group style='width:1000;height:1000'>
<v:rect id="rc" style='width:200;height:150' stroked=f>
<v:fill id=sb color=navy opacity=1 />
</v:rect>
<v:rect style='width:200;height:150' stroked=f>
<v:fill id=op color=red opacity=0 />
</v:rect>
</v:group>
</table>
</body>
</html>


Le travail de recherche personnelle est le meilleur des tutos... Bonne exploration !
Haut de page
Accueil