Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Guirlande et clignotements - Utilisation de symboles de type "Graphique"

Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS4. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash Professionnel. Priorité aux techniques d'animation, de dessin et recours minimum à ActionScript.. Cliquer pour en savoir plus sur les compatibilités.Par Nataly, le 11 novembre 2010

Allez ! C'est la période des cartes de vœux, des petites animations à base de sapin qui clignote, et de neige qui virevolte voici donc le tuto de saison (il est frais mon tuto, il est fraaaaais !) :mrgreen:

Prérequis
C'est un tuto 100% animation donc pas une goutte code, pour le suivre il suffit que vous connaissiez les outils de dessin, même superficiellement, que les expressions Clips, Graphique, bibliothèque ainsi que les notions fondamentales d'animation ne vous soient pas étrangères (si c'est le cas un détour par ici devrait régler le problème).

En gros c'est un tuto pour tous (c'est pas tous les jours Noël non plus !) :)


Conventions de rédaction :
Entre crochets : les raccourcis clavier
cmd = ctrl sous PC
alt = option sous PC


Voici l'objet du tuto :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce qui nous intéresse ici, c'est le fait que les ampoules clignotent selon un rythme tel qu'elles semblent se “recouvrir” (les bleues) ou se déplacer (les autres).

A première vue, rien de bien compliqué là dedans - à deuxième non plus, d'ailleurs. Il se trouve seulement que des deux techniques possibles, on pourrait être tenté de se précipiter sur la moins bonne ;)

Comment ne pas s'y prendre

Prenons une consigne simple :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

C'est tout niais, pas d'interpolation, juste des images clés avec un contenu légèrement modifié.

Très bien : un clip, dedans 6 instances d'un graphique “boule cyan”, devant une boule bleue et une ocre. Le tout aligné et réparti voilà la guirlande image 1.
Quelques images plus loin, une image clé et réorganisation des visuels (en décalant les ampoules ocre et bleue d'un cran), et ainsi de suite (image clé et réorganisation des visuels) jusqu'à ce que le couple d'ampoules ait traversé la guirlande.

Aucun doute ça marche :)

Pourquoi ce n'est pas une bonne idée


Et c'est là que le client, le patron voire vous même, vous avisez que l'espacement n'est pas bon, qu'il faudrait modifier de presque rien : rapprocher ou écarter les ampoules…
Et hop ! Modification sur chacune des images clé (8 dans ce cas de figure, mais ça pourrait être bien pire), et attention ça rigole pas : il s'agit que ce soit exactement la même disposition d'image en image, sans quoi ça saute.
Et encore dans l'imaginaire je suis gentille, parce que si jamais vous avez eu l'ambition d'une guirlande qui fasse un 'S', une vague ou dont les ampoules soient plus ou moins inclinées, il y a intérêt à ne pas vous rater de la disposition des instances, et à ne pas avoir de remords, la moindre modification vire au cauchemar.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Une technique bien plus souple à l'usage

Une fois n'est pas coutume, aujourd'hui je vais privilégier le “je montre” au “j'explique”.
J'entends comme un grand soupir de soulagement : enfin elle va se taire :mrgreen:

Lecture synchronisée des Graphiques

A titre de démonstration, je vous propose donc de fabriquer un graphique [cmd-F8] Gr_Demo.
Image 1 un carré rouge
Image 2 insérer une image clé [F6], changer la couleur : vert
Image 3 [F6], changer la couleur : bleu
Image 4 [F6], changer la couleur : jaune
Image 5 [F6], changer la couleur : cyan
Image 6 [F6], changer la couleur : magenta

Fabriquez maintenant un clip (Mv_Demo) et glissez dedans une instance de Gr_Demo.
Ajoutez une quinzaine d'images (pas clé) [F5]

Que constate-t-on ?

Quand on déplace la tête de lecture dans Mv_Demo (pas la peine de tester, ça irait trop vite pour y voir quoi que ce soit), on constate que la lecture du graphique est synchronisée à celle du clip : image 1 du clip c'est l'image 1 du graphique qui est lue (affichée), image 2 du clip c'est l'image 2 du graphique, et ainsi de suite.
La belle affaire, ronchonne-t-on de derrière son écran, “ben oui, c'est comme pour les clips, c'est même carrément le principe de l'imbrication des symboles !”.

Oui et non.

• Quand on imbrique des clips, chacun d'eux est lu indépendamment des autres. Si par exemple dans notre exemple, Mv_Demo ne compte qu'une image, et que Gr_Demo se comporte comme un clip (changez le type ds le panneau propriétés), alors l'instance boucle sur les six couleurs (là il faut tester pour voir).


• Quand on imbrique un graphique sa lecture est subordonnée à celle de son parent. Changez à nouveau le type de Gr_Demo pour lui rendre son statut de Graphique et constatez que si le clip qui le contient ne compte qu'une image, alors seul le carré rouge de l'image 1 du graphique est affiché. Si le clip compte deux images, Gr_demo va boucler sur deux images, et ainsi de suite.

Première image

Sélectionnez maintenant le graphique, et dans le champ premier du panneau Propriétés saisissez 3 (au lieu de 1 par défaut).



On constate alors que la première image du clip affiche l'image 3 du graphique, la deuxième affiche l'image 4, la troisième l'image 5… et quand on arrive image 5 du clip, c'est l'image 1 du graphique qui est lue.

[,] et [;] pour déplacer la tête de lecture au clavier.

Si on règle la liste Options (panneau propriétés du graphique) sur Lire une seule fois, alors la lecture du graphique reste bloquée sur sa dernière image dès qu'on dépasse l'image 4 du clip qui le contient.

Application

Le graphique de base

Pour en revenir à notre guirlande, et à une technique de travail qui n'entrave pas la créativité en faisant tourner à l'aigre la moindre velléité de modification, je vous propose de créer un graphique et d'y dessiner une ampoule bleue images 1 à 4, une ocre images 5 à 8, une cyan images 9 à 32.






Le clip guirlande

Créez un clip.
Disposez 8 instances du graphique que vous venez de fabriquer et disposez les à votre gré.
Définissez la première image de chaque instance : la plus à droite reste à 1, la précédente c'est 5, encore avant 9, puis 13, 17 (+4 à chaque fois), jusqu'à 29.



Il ne reste plus qu'à étendre le nombre d'images du clip guirlande à 32 [F5], et c'est fini. Posez le clip sur la scène, testez, ça clignote en défilant :)

Que les puristes que ça dérange qu'à la toute première seconde de l'animation les deux ampoules de couleur soient à droite plutôt qu'à gauche, que les puristes donc, ne se privent pas de déplacer les dites ampoules.



D'autant que maintenant on est libre de la disposition, on peut tout balader comme on veut, pour peu qu'on conserve l'ordre de succession en fonction des 'premières images'.

Ici, les instances ont été dupliquées (pour ne pas avoir à ressaisir les premières images).

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


Selon le nombre d'images du graphique de base on obtient un résultat différent :
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour disposer des instances en couronne voir ici

Considérations diverses et en vrac

Nomenclature

Vous avez peut-être remarqué que je préfixe nombre de symboles graphiques des lettres Mv. C'est une habitude toute perso qui n'a rien d'une quelconque convention (si ce n'est de moi à moi).
La grande question quand on débute c'est “quand dois-je créer plutôt un clip qu'un graphique ?”.
La fausse règle c'est : une image –> graphique - plusieurs images –> clip.
Fausse règle parce qu'on vient justement d'en voir un contre-exemple.

Pour s'y retrouver dans la bibliothèque les symboles sont représentés d'un visuel différent selon qu'ils sont de type clip ou graphique. J'ajoute un préfixe : Mv pour plusieurs images (ou animation) et Gr pour une seule.
Quand je lis Mv devant le nom d'un symbole dont l'icône est graphique, je sais qu'il y a une ruse.

L'étoile au faîte du sapin

Dans les sources, il s'agit du clip Mv_Etoile. Vous constaterez qu'il est constitué d'une seule image et uniquement d'instances du symbole graphique Mv_BJaune.
Alors comment peut elle clignoter ?
J'ai tout bêtement modifié le “type” des instances : de graphique vers clip. Ainsi les instances, considérées comme des clips sont elles lues automatiquement, indépendamment du clip parent.

On peut opérer la modification en une seule fois sur une sélection multiple

Utiliser le changement de comportement de façon temporaire

C'est tout de même rudement pratique, quand on subordonne des clips les uns aux autres, de pouvoir juger de la synchro, depuis l'ide directement, en déplaçant le tête de lecture dans le scenario. Si ce n'est que justement on ne peut pas : c'est une “faculté” des instances de graphique. Oui mais rien n'empêche, provisoirement, le temps de s'y retrouver de la construction, de basculer via le panneau propriété le type de Clip vers Graphique.
Ce procédé est bien utile par exemple dans le tuto de Dldler sur les arabesques pour disposer les branchages sur le tronc…

Les sources


Ne me reste plus qu'à vous souhaiter joyeux Noël ;)