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 ⇐