|
 |
 |
Arkipel - Projet de fin d'année d'étudiants. |
Personnage du projet ARKIPEL |
* Pierre-Antoine, Fred Bird, Lola, Rémi, Florian.
Exemple 1 : Dans le génerique ci-contre, le titre, la soucoupe et les nuages sont des symboles. Le fond (décor composé de la mer et du ciel) n'est pas obligatoirement un symbole s'il n'est pas réutilisé.
Exemple 2 : En regardant de très près, on constate que le personnage est composé de plusieurs symboles car les bras, le corps et la têtes sont animés indépendament les uns des autres. Le compteur sur le tableau de bord (le radar) est aussi un symbole ainsi que l'ile qui se rapproche.
Exemple 3 : Dans cet exemple, de nombreux symboles ont été utilisés. Le crabe orange, les 2 tortues vertes, la mer, le personnage et la jauge jaune sont autant de symboles indispensables pour le fonctionnement de l'animation. La jauge est contrôlée par Actions scripts ainsi que le crabe et le personnage.
Exemple 4 : Dans ce village, chaque individu est un symbole ainsi que le personnage principal. Le décor est réutilisé plusieurs fois, il est donc transformé en symbole.
Remarque : Il est conseillé de créer des symboles pour optimiser la gestion de la mémoire dans les animations Flash.
Nous allons aborder un peu plus bas dans cette page,
les procédures de création d'un symbole. Commençons
tout d'abord par préciser qu'il existe plusieurs types de symboles.
Un symbole est une entité qui possède des attributs (type,
des dimensions, un point d'alignement). Il en existe de 3 natures différentes.
Le symbole de type clip : Ce même symbole a plusieurs fonctions.
- On peut le comparer à un gif animé,
- Dan la mesure où un clip peut être nommé sur la scène, il est alors possible de le contrôler.
- Enfin, c'est un élément cliquable qui peut donc servir de "bouton"
Le symbole de type bouton : Ce symbole a pour fonction de reçevoir des clics de la souris, un bouton peut aussi être survolé.
Le symbole de type graphique : Nous ne nous atarderons pas sur ce dernier car il est peu utilisé. Il présente tout de même certains avantages pour les novices (configuration des occurrences d'un symbole de type graphique via la palette Propriétés).
Nous pourrions apporter plusieurs réponses à cette question et en expliquer les raison, mais nous dirons simplement que le fait de choisir Clip suffit à assurer toutes les fonctions nécessaires dans une animation.
Lorsque vous posez un symbole de la bibliothèque sur la scène, vous obtenez une occurrence. Une occurrence est donc une représentation graphique d'un symbole. L'image d'un acteur sur un écran de cinéma est à l'acteur ce qu'une occurrence est au symbole. Un symbole est unique dans la bibliothèque mais il peut posséder plusieurs occurrences sur la scène (sur la même image ou plusieurs). Vous pouvez glisser plusieurs fois un même symbole de la bibliotèque sur la scène ou copier-coller une occurrence.
Une occurrence possède ses propres propriétés telles que ses coordonnées en x et y par rapport au coin supérieur gauche de la scène, ses dimensions, son nom d'instance (nom d'occurrence), son degré de transparence, etc.
Dans la version US de Flash MX, on utilise le terme Instance pour traduire une Occurrence. Certains développeurs préfèrent utiliser ce terme car c'est un mot de vocabulaire employé en programmation orientée objet.
Dans les procédures ci-dessous, vous aurez besoin
de revenir sur la scène alors que vous êtes en train d'éditer
un symbole. Cliquez alors sur le bouton "Séquence 1".
Voir la copie d'écran ci-dessous.
> Méthodologie N°1 : Créer un bouton à partir d'une sélection.
Cette technique consiste à transformer une sélection en un symbole.
1. Sélectionnez ce que vous souhaitez transformer en symbole sur la scène (une image, un tracé, un texte…)
2. Tapez sur la touche de fonction F8
3. Donnez un nom au symbole
4. Sélectionnez le type "Bouton"
5. Sélectionnez la position du point d'alignement
6. ValidezRemarque N°1 : Le nom que vous donnez au symbole ne sert qu'à reconnaitre (différencier) les différents symboles dans la bibliothèque. Il n'a aucun rapport avec le nom que vous donnerez aux occurrences d'un symbole. Ce nom peut tout de même être le même (déconseillé pour les novices qui ne font pas encore la différence entre symbole et occurrence).
Remarque N°2 : Le choix du point d'alignement permet de définir la position du centre d'un symbole.
> Méthodologie N°2 : Créer un bouton directement dans la fenêtre d'édition sans présélection.
Cette technique consiste à créer un symbole vide (vierge) puis le "remplir".
1. Tapez sur le raccourci Commande-F8 (Mac) ou CTRL-F8 (PC)
2. Donnez un nom au symbole
3. Sélectionnez le type "Bouton"
4. Sélectionnez la position du point d'alignement
5. Validez (Votre timeline n'est alors plus la même (Img 1.2))
6. Créez l'apparence de votre bouton
7. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur le bouton "Séquence 1".
Img 1.1L'alignement sert à définir l'axe d'origine utilisé notament avec les propriétés _x et _y des ActionScripts.
Img 1.2L'édition d'un symbole change l'apparence de la timeline. Vous n'êtes en effet plus sur la timeline de la scène mais celle du bouton.
Voici un fichier d'exemples, il s'agit d'un swf qui contient plusieurs types de boutons, nous allons voir comment éditer le bouton que nous venons créer afin d'obtenir ceux ci-dessous.
Dans les exemples ci-dessus, vous pouvez constater qu'il existe plusieurs types de boutons, voici les explications qui vous permettront de personnaliser l'apparence de vos boutons :
- Bouton simple : Ne changez rien.
- Bouton réactif
1. Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
2. Sélectionnez l'image 2 ("Dessus") (Img 1.2)
3. Tapez F6
4. Créez l'apparence du bouton lorsqu'il est survolé
5. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.- Bouton animé
1. Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
2. Sélectionnez l'image 2 ("Dessus") (Img 1.2)
3. Tapez F6
4. Placez un clip sur cette image clé
5. Revenez sur la scène par le raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.- Bouton reactif + étape cliquée
1. Editer votre symbole de type bouton (double-cliquez sur le symbole dans la bibliothèque)
2. Sélectionnez l'image 2 ("Dessus") (Img 1.2)
3. Tapez F6
4. Créez l'apparence du bouton lorsqu'il est survolé
5. Sélectionnez l'image 3 ("Abaissé") (Img 1.2)
6. Tapez F6
7. Créez l'apparence du bouton lorsqu'il est cliqué
8. Revenez sur la scène par le raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.
- Bouton bascule : Précisons tout d'abord qu'un bouton bascule est un clip contenant 2 images clé avec un bouton sur chaque (avec des apprarences différentes). Le premier bouton envoie la tête de lecture sur l'image 2 et réciproquement.
> Méthodologie : Créer un bouton bascule > Un clip avec 2 images clé.
Etape 1 :
1. Créez 2 boutons que vous laissez dans la bibliothèque
2. Tapez sur le raccourci Commande-F8 (Mac) ou CTRL-F8 (PC)
2. Donnez un nom au symbole
3. Sélectionnez le type "Clip"
4. Sélectionnez la position du point d'alignement
5. Validez (Votre timeline n'est alors plus la même (Img 1.3)
6. Placez l'un des 2 boutons que vous avez crée sur la croix centrale de votre zone de travail
7. Sélectionnez l'image 2
8. Tapez F6
9. Placez le deuxième bouton sur la croix centrale de votre zone de travail. vous obtenez une timeline comprenant 2 images clé (Img 1.3.1)
10. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur le bouton "Séquence 1".
Img 1.3
La timeline ci-contre n'est pas celle de l'animation mais celle du clip. C'est sur celle-ci que vous devez créer 2 images clé afin d'y placer un bouton sur chaque.
Votre bouton bascule possède 2 images clé (Img 1.3.1).
Img 1.3.1
Etape 2 :
1. Double cliquez sur votre symbole et cliquez sur l'image clé 1 de la timeline
2. Placez la commande stop(); dans la fenêtre des Actions
3. Sélectionnez le bouton de l'image clé 1 et saisissez dans la fenêtre des Actions, le script ci-dessous
on (press) {
gotoAndStop(2);
}4. Sélectionnez le bouton de l'image clé 2 et saisissez dans la fenêtre des Actions, le script ci-dessous
on (press) {
gotoAndStop(1);
}Avant de fermer votre accolade, pensez à ajouter les instructions à exécuter. N'oubliez pas qu'il y a de fortes chances que vous ayez à utiliser la propriété _root.
Le principe du bouton invisible est simple. Lorsque vous avez besoin de cliquer ou survoler sur une zone de la scène sans que ce soit "apparement" un bouton, utilisez un bouton transparent. Il apparait en bleu ciel transparent sur la scène mais pas dans l'animation finale.
Etape 1 :
1. Créez un rectangle sur la scène (peu importe la couleur)
2. Sélectionnez le par un double clic avec la flèche noire
2. Tapez sur la touche de fonction F8
3. Donnez un nom au symbole
4. Sélectionnez le type "Bouton"
5. Sélectionnez la position du point d'alignement
6. ValidezEtape 2 :
1. Double-cliquez sur le symbole que vous venez de créer
2. Effectuez un simple clic sur l'image clé 1 (Haut)
3. Faites glisser l'image clé de l'image 1 (Haut) sur l'image 4 (Cliquable) (Img 1.4)
4. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC) ou par un clic sur le bouton "Séquence 1".
Img 1.4La timeline ci-contre n'est pas celle de l'animation mais celle du clip. C'est sur celle-ci que vous devez créer 2 images clé afin d'y placer un bouton sur chaque.
Remarque : Cette dernière étape "Cliquable" sert en temps normal à définir les zones cliquables d'un bouton. Dans ce cas, vous ne devez pas dépacer l'image clé mais sélectionner l'image 4 et taper F6 afin de créer une image clé. Tracez alors un rectangle sur cette image qui définira les zones cliquables. Très utile pour rendre un texte complètement cliquable (à l'intérieur et entre les caractères).
> Méthodologie N°1 : Créer un clip à partir d'une sélection.
Cette technique consiste à transformer une sélection en un symbole.
1. Sélectionnez ce que vous souhaitez transformer en symbole sur la scène (une image, un tracé, un texte…)
2. Tapez sur la touche de fonction F8
3. Donnez un nom au symbole
4. Sélectionnez le type "Clip"
5. Sélectionnez la position du point d'alignement
6. ValidezRemarque N°1 : Le nom que vous donnez au symbole ne sert qu'à reconnaître (différencier) les différents symboles dans la bibliothèque. Il n'a aucun rapport avec le nom que vous donnerez aux occurrences d'un symbole. Ce nom peut tout de même être le même (déconseillé pour les novices qui ne font pas encore la différence entre symbole et occurrence).
Remarque N°2 : Le choix du point d'alignement permet de définir la position du centre d'un symbole.
> Méthodologie N°2 : Créer un clip directement dans la fenêtre d'édition sans présélection.
Cette technique consiste à créer un symbole vide (vierge) puis le "remplir".
1. Tapez sur le raccourci Commande-F8 (Mac) ou CTRL-F8 (PC)
2. Donnez un nom au symbole
3. Sélectionnez le type "Clip"
4. Sélectionnez la position du point d'alignement
5. Validez
6. Créez l'apparence de votre clip
7. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.
Dans les deux méthodes présentées ci-dessus, il s'agit de clips ne contenant aucune animation. Vos pouvez donc utiliser l'une de ces deux méthodologies pour créer des clips que vous souhaitez commander (contrôler sur la scène). Si vous souhaitez à présent créer un clip animé (comparable à un gif animé), vous devez suivre la procédure suivante :
1. Editer votre symbole de type clip (double-cliquez sur le symbole dans la bibliothèque)
2. Réalisez votre animation sur la timeline du clip (vous nêtes plus sur la scène à ce moment là)
3. Revenez sur la scène par raccourci Commande-E (Mac) ou CTRL-E (PC). Vous pouvez aussi cliquer sur l'onglet "Séquence 1" situé en haut à gauche de la fenêtre dans laquelle se trouve la scène.
Nous avons volontairement placé ce point "Création d'une occurrence de texte" dans cette partie sur les symboles et occurrences pour vous faire comprendre qu'un texte placé sur la scène peut avoir un nom d'instance.
1. Créez un texte sur la scène
2. Sélectionnez le si vous l'avez déselectionné
3. Via la palette des propriétés, attribuez-lui un nom d'instance (Img 1.5)
|
Le texte auquel vous
souhaitez attribuer un nom d'instance doit être de type
dynamique ou texte de saisie. Il est impossible de donner un nom
d'instance à un texte statique. |
Vous pouvez créer dynamiquement des formes sur
la scène sans qu'elles soient pour autant sous la forme de symboles
dans la bibliothèque. Dynamiquement signifie que vous devez utiliser
les ActionsScripts.
Vous pouvez créer des droites, des courbes et ainsi créer
des formes vides ou pleines. Nous allons vous montrer un simple exemple,
reportez-vous à la partie consacrée aux tracés dynamiques
pour plus d'explications.
_root.createEmptyMovieClip("droite", 1);
droite.lineStyle(1, 0x3E7595, 100);
droite.moveTo(50, 100);
droite.lineTo(150, 100);
