Flash CS4 - Symboles et clips

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage

• Approfondir la notion de symbole Flash CS3/CS4
• Créer des symboles clip (Angl. movie clip), c.a.d. des animations dans des animations

Prérequis

• Univers Flash CS4
• Flash CS3 - Créer et modifier les calques et les images
• Flash CS4 - Créer des dessins avec les outils de dessin‎‎
• Flash CS4 - Transformer des dessins (une partie)
• Flash CS4 - Arranger des dessins

Matériel (fichiers *.fla à manipuler)

• [1] (répertoire)

Qualité et niveau

Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme des fiches pratiques dans un atelier.

Prochaines étapes

• Plus de dessin (c.f. les prérequis)
• Flash CS4 - Interpolation de mouvement

Autres versions

• aucune

Les symboles Flash

Un symbole est un graphique, un bouton ou un clip créé dans l'environnement Flash et qui est réutilisable dans le même document ou dans d'autres. Chaque symbole que vous créez ou utiliséz est insérez dans la bibliothèque (library).

Le symbole n'est jamais utilisé directement, il faut créer une instance, appelé aussi occurence. Pour un programmeur, un symbole représente une sort de classe (c.a.d. un objet générique)

Vous pouvez partager les symboles entre les documents en tant que ressources de bibliothèque partagées pendant la programmation voir l'exécution.

Chaque symbole possède par principe son propre scénario, scène et calques. Vous pouvez y ajouter des images, des images-clés et des calques ou encore d'autres symboles, exactement comme dans le scénario principal.

Les trois types de symboles Flash

1. Les graphic symbols (symboles graphiques) représentent des images statiques et sont réutilisables. Les symboles graphiques contribuent moins à la taille du fichier FLA que les boutons et les clips car ils n'ont pas de scénario. Autrement dit, il s'agit de sortes de briques graphiques ayant une puissance limitée.

1. Utilisez des button symbols (symboles de bouton) pour créer des boutons interactifs qui réagissent aux clics, au "toucher" ou à d'autres actions de la souris. Un symbole de bouton contient tjrs une animation image par image (voir Flash CS4 - Boutons.

1. Les movie clip symbols (symboles de clip) sont faits pour créer des éléments d'animation réutilisables. Ils possèdent leur propre scénario et ils peuvent donc contenir des contrôles interactifs, des sons, voire des occurrences d'autres clips. En outre, les clips sont programmables à l'aide du code ActionScript.

Symboles prédéfinis:

• Les bouton que vous retrouvez dans la library - button.fla
• Les composants intégrés (voir: Flash CS4 - Composants intégrés)

Note sur la traduction: En Anglais un symbol ayant son propre scenario s'appelle move clip, en français juste clip. Le clip vidéo (traduction de movie clip veut dire autre chose, c.a.d. une vidéo importée ....)

Créer des symboles

Vous savez probablement déjà créer des symboles, mais on répèter quand-même la procédure:

Conversion dess éléments sélectionnés en symboles

1. Sélectionnez un ou plusieurs éléments sur la scène, Effectuez l'une des opérations suivantes :
   • Cliquez du bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis sélectionnez Convert to symbol
   • Menu Modify > Convert to symbol
   • Faites glisser la sélection dans le panneau library (bibliothèque)
2. Dans la boîte de dialogue Convert to symbol, entrez le nom du symbole, puis sélectionnez son comportement, c'est à dire choisir entre graphic symbol, button symbol et movie clip symbol. Vous pouvez transformer un symbol plus tard, enfin si vous transformez un clip ou un bouton vous allez perdre son contenu interactif.
3. Cliquez dans la grille d'alignement afin de positionner le point d'alignement du symbole et définit les coordonnés de l'objet. Par défaut (selon les conventions infographique) il se trouve en haut à gauche. Nous préférons le centre pour les movie clip, et en haut à gauche pour les boutons et les graphiques.
4. Cliquez sur OK.

Flash ajoute le symbole à la library. La sélection sur la scène devient une occurrence du symbole.

Edition de symboles

Je suggère d'ajouter la barre d'édition: Window-> Tool bars -> Edit bar. Elle va vous montrer exactement à quel niveau vous éditez, par exemple au niveau scène ou dans le symbol. Comme vous pouvez le voir sur l'image ci-dessous, vous pouvez voir la cascade des niveaux d'édition. Actuellement, nous sommes en train d'éditer le graphisme d'un button appelé "button back" !

Mode d'édition de symbole - Edition du graphisme d'un bouton

Vous pouvez le modifier un symbole en mode symbol edit (modification de symbole) de plusieurs façons

• Double clic dessus (Windows) ou clic-droit->Edit dans la bibliothèque.
• Double clic sur une instance avec le selection tool. Dans ce cas vous verrez également les autres objets de la scènes, mais sont "grisés", donc pas éditables. Clic droit sur une instance, puis Edit in Place fait la même chose
• Selectionner, puis menu Edit -> Modify symbols

Pour changer le point d'enregistrement:

• Edit l'objet dans la librairie (!). Puis le bouger. La crois au centre représente le point d'enregistrement.
• Note: Le point d'enregistrement (le centre de ses propres coordonnées) n'est pas la même chose que son point de rotation que vous pouvez déplacer avec le "Free Transform tool".

Pour créer un symbol vide, faites une des opérations suivantes :

• Sélectionnez menu Insert -> New symbol
• Cliquez sur le bouton New symbol, en bas à gauche du panneau library
• Finalement, New symbol dans le menu d'options du panneau library (en haut à droite)

Attention

A tout moment veuillez bien faire attention à quel niveau vous éditez ! Editer un objet (par exemple ajouter des dessins) alors que vous croyez travailler sur la timeline (scénario) principale est assez désastreux ...

Pour revenir à un niveau supérieur, vous pouvez

• Cliquer sur le nom de la scène (séquence) dans la barre Modification.
• Cliquer sur la flêche "précédent"
• Menu Edit -> Modify document