INITIATION AU VML | LES PRINCIPAUX ELEMENTS VML | INTERACTIVTÉ ET ANIMATION

EDITION DE DESSIN


CRÉATION D'UNE FORME LIBRE | MODIFICATION D'UNE FORME | VISUALISATION DU CODE "v:shape"
NOTION DE GROUPE | CRÉATION D'UN DEUXIÈME OBJET | DISPOSITION DES OBJETS EN PROFONDEUR | GROUPEMENT DES OBJETS | VISUALISATION DU CODE "v:group"

Avant toute chose il faut savoir que si de simples écritures fabriquent vos images, il n'est pas moins important de réduire au maximum ces écritures.
Ceci dans le but constant d'alléger toujours d'avantage les fichiers qui porteront vos créations.
Même sous le règne de l'adsl, la fraction de seconde qui améliore la rapidité d'un chargement n'est jamais négligeable.

CRÉATION D'UNE FORME LIBRE :

>>> Pour commencer, habituez-vous à travailler en zoom 500%. Vos dessins se situerons dans les unités d'espace proches de l'origine 0,0 (x,y).
Moins vous aurez de chiffres dans vos nombres, plus vos écritures seront aérées.
Si votre dessin est petit, il vous suffira de l'agrandir par la suite en jouant sur sa largeur et sa hauteur (width;height), ou sur le format du groupe.
En règle générale, plus vos graphismes demanderont de la précision, plus vous devrez agrandir votre format et vous rapprocher de l'affichage 100%.

Reprenez une nouvelle page Word:
Dirigez-vous vers votre barre d'outils dessin, cliquez sur "formes automatiques" > "Lignes" > "Courbe".

Lorsque le pointeur indique une croix, cliquez pour exemple cinq fois et à cinq endroits différents de manière à créer un pourtour fermé en joignant le premier et le dernier point. Votre ligne elastique se ferme pour constituer une forme.
Celle-ci s'entoure de huit petits ronds ou carrés blancs qui indiquent que votre objet est sélectionné et prêt à être redimensionner.
Sélectionnez une couleur de contour rouge et une épaisseur de trait la plus fine.

Vous obtiendrez par exemple ceci:

MODIFICATION D'UNE FORME :

Pour changer le contour d'une forme, nous allons modifier les points qui marquent son tracé vectoriel.
Votre forme étant sélectionnée, allez à l'extrême gauche de votre barre d'outils dessin et cliquez sur "Dessin" > "Modifier les points".
(Vous pouvez aussi cliquer à droite sur votre forme pour accéder à la même fonction).

Vous allez voir apparaitre quatre points d'ancrage du tracé (Points nodaux).

Cliquez à droite sur un des points.
Quatre possibilités sont offertes:

- Point automatique ou intuitif.
- Point lisse.
- Point symétrique.
- Point d'angle.
Le "point automatique" est la sélection par défaut. Il est très utile pour retracer au dessus d'un bitmap et calquer celui-ci en image vectorielle.
Essayez-vous aux trois autres possibilités, vous verrez les "leviers" qui permettent de changer les lignes situées entre chaque point.

>>>Pour obtenir une forme bien déterminée, dessinez toujours une forme libre avec un minimum de points, et en jouant sur les leviers.
Plus les points sont nombreux, plus le chemin vectoriel du contour (voir ci-dessous: path) sera long en écriture, et plus votre page Web sera lourde.

VISUALISATION DU CODE "v:shape":

Cliquez sur "Outils" > "Macro" > "Microsoft Script Editor" pour afficher le code:

Vous découvrez désormais une balise <v:shape "shape" signifiant "forme" en anglais.
Nous en étudirons les attributs plus loin, mais nous pouvons déjà observer avec intérêt la ligne path="....
Il s'agit des points du chemin vectoriel du contour de votre forme.

NOTION DE GROUPE :

Chaque fois que vous dessinez un rectangle, une forme etc..., vous créez un objet dans votre espace vectoriel.
Ces objets peuvent être groupés en un seul ou plusieurs ensembles.
>>> Un groupe d'objets génère une écriture de code plus simple pour chaque élément.
C'est pourquoi nous allons immédiatement créer un groupe.

CRÉATION D'UN DEUXIÈME OBJET :

Votre forme étant dessinée, coloriez-la en cliquant sur le pot de peinture de votre barre d'outil dessin (couleur jaune par défaut).

Gardez-la en place et choisissez maintenant l'outil indiqué pour dessiner un rectangle.
Tracez-le de manière à couvrir totalement votre forme précédente.
Coloriez-le par exemple en vert.

Votre rectangle s'est simplement placé devant la forme toujours présente.

DISPOSITION DES OBJETS EN PROFONDEUR :

Pour changer la disposition de ces deux objets, allez à l'extrême gauche de votre barre d'outils dessin. Cliquez sur "Dessin" > "Ordre" > "Reculer" ou "Mettre en arrière plan".

Votre rectangle va se placer derrière la forme.

GROUPEMENT DES OBJETS :

Pour grouper les objets d'un dessin il vous faut d'abord tous les sélectionner.
1ere solution: Cliquer successivement sur chaque objet en restant appuyé sur la touche clavier "TAB".
Attention: cliquer une deuxième fois sur un objet le désélectionne..
2eme solution: Balayez toute la surface occupée par les objets avec le pointeur.

Lorsque chaque objet est sélectionné, il s'entoure de huit petits ronds ou carrés blancs de redimensionnement.

Cliquez maintenant sur "Dessin" > "Grouper" dans votre barre d'outils.

Vos deux objets vont s'assembler en un seul groupe.
Huit petits ronds ou carrés blancs encadrent désormais le groupe.

VISUALISATION DU CODE "v:group":

Cliquez sur "Outils" > "Macro" > "Microsoft Script Editor" pour afficher le code:

On constate maintenant une balise <v:group avec ses attributs de positionnement et de dimenssionnement.
Du haut en bas:
Notre rectangle <v:rect est le premier objet du groupe.
Notre forme <v:shape est le deuxième objet du groupe.
Notre groupe se cloture avec la balise </v:group>.

NOTE: Dans le cas d'objets multiples, le premier indiqué après la balise <v:group..... > est toujours celui situé au dernier plan.
Les objets inscrits du haut en bas de votre code se rapprochent de vous dans votre espace dessin.
Celui situé en bas de la liste est donc l'objet du premier plan
.

Nous allons désormais vous laisser vous familiariser avec les outils Word. Explorez-les au maximum.
S'ils n'assument pas toutes les possibilités du VML, ils permettent d'en explorer les principes.
Il vous suffira de vous rendre compte des changements survenus dans le code chaque fois que vous modifiez votre graphisme.
Attention: À chaque modification et à chaque passage entre Word et Microsoft Script Editor, vous devez actualiser votre document en cliquant sur la petite fenêtre qui se présente pour l'occasion.

Etape 2 >>>

Haut de page
Accueil