Page de Jean-Paul Molina

Effet de tracé de segment

 

On se propose de créer un tracé progressif de segments avec l'effet Transform.
Je suppose connu les fonctions de création sur lesquelles je n'insisterai pas.

⇒ animation ⇐

Création des Objets

1 - Définissez les dimensions générales 160x120 ainsi que la couleur du fond #000066.
Prenez un Frame Rate égal à 35.

2 - Vous allez créer maintenant un ensemble de traits horizontaux et verticaux de couleur #FF9900, espacés de 2 pixels.
Comme il y a répétition de la création, les paramêtres définis dans l'onglet Transform seront donnés sous forme de tableau.

Anchor point	X	Y	W	H
Center Left	55	35	50	0
Top Center	105	35	0	50
Center Right	105	85	50	0
Bottom Center	55	85	0	48

Anchor point	X	Y	W	H
Center Left	55	37	48	0
Top Center	103	37	0	46
Center Right	103	83	46	0
Bottom Center	57	83	0	44

Anchor point	X	Y	W	H
Center Left	57	39	44	0
Top Center	101	39	0	42
Center Right	101	81	42	0
Bottom Center	59	81	0	40

Anchor point	X	Y	W	H
Center Left	59	41	40	0
Top Center	99	41	0	38
Center Right	99	79	38	0
Bottom Center	61	79	0	36

Anchor point	X	Y	W	H
Center Left	61	43	36	0
Top Center	97	43	0	34
Center Right	97	77	34	0
Bottom Center	63	77	0	32

Anchor point	X	Y	W	H
Center Left	63	45	32	0
Top Center	95	45	0	30
Center Right	95	75	30	0
Bottom Center	65	75	0	28

Anchor point	X	Y	W	H
Center Left	65	47	28	0
Top Center	93	47	0	26
Center Right	93	73	26	0
Bottom Center	67	73	0	24

Anchor point	X	Y	W	H
Center Left	67	49	24	0
Top Center	91	49	0	22
Center Right	91	71	22	0
Bottom Center	69	71	0	20

Anchor point	X	Y	W	H
Center Left	69	51	20	0
Top Center	89	51	0	18
Center Right	89	69	18	0
Bottom Center	71	69	0	16

Anchor point	X	Y	W	H
Center Left	71	53	16	0
Top Center	87	53	0	14
Center Right	87	67	14	0
Bottom Center	73	67	0	12

Anchor point	X	Y	W	H
Center Left	73	55	12	0
Top Center	85	55	0	10
Center Right	85	65	10	0
Bottom Center	75	65	0	8

Anchor point	X	Y	W	H
Center Left	75	57	8	0
Top Center	83	57	0	6
Center Right	83	63	6	0
Bottom Center	77	63	0	4

Anchor point	X	Y	W	H
Center Left	77	59	4	0
Top Center	81	59	0	2
Center Right	81	61	2	0

Création des Effets

Il s'agit maintenant de faire apparaître progressivement chaque segment comme si on le traçait à la main.
Dans Timeline, pour chaque segment, vous allez placer un effet Transform sur 10 frames.

Ouvrez la boite des propriétés de Transform. Dans tous les onglets Cascade, mettez ce qui suit

Dans chaque onglet Transforms, il vous faudra adapter.
Voici l'exemple pour le premier trait horizontal que l'on va faire apparaître progressivement de gauche à droite.

Par défaut, le point X=0, Y=0 est le point milieu du segment.
Cela n'a rien à voir avec le point d'ancrage.
Ce segment a une largeur de 50 et compte-tenu du fait que les X croissants vont de la gauche vers la droite, il faut donc indiquer le point de départ comme étant l'extrémité gauche du segment pour que la variation se fasse dans le sens voulu du tracé.
Au départ, l'échelle en X est 0, celle en Y est 100. Au final, tout est à 100.

En résumé :
- Pour donner un effet de tracé horizontal de la gauche vers la droite, indiquez un point de départ négatif en X ( demi-largeur ) et une échelle nulle en X.
- Pour donner un effet de tracé horizontal de la droite vers la gauche, indiquez un point de départ positif en X ( demi-largeur ) et une échelle nulle en X.
- Pour donner un effet de tracé vertical du haut vers le bas, indiquez un point de départ négatif en Y ( demi-hauteur ) et une échelle nulle en Y.
- Pour donner un effet de tracé vertical du bas vers le haut, indiquez un point de départ positif en Y ( demi-hauteur ) et une échelle nulle en Y.

Il vous reste maintenant à terminer cet exemple compte-tenu de ces indications.
Néanmoins, il serait plus avantageux de réaliser cet exemple uniquement par script.

Remarque : Voici un exemple de trait incliné avec l'effet Transform.
La scéne a pour dimensions 320x240.
L'effet Transform est tel que Start : X = -160 Y = 120 Scale 0% X=Y
Anchor Point : Bottom Left

⇒ animation ⇐