18
Cours Détailler Flash 5.0 Définition Accurence : Qu'est-ce qu'une occurrence ? Un symbole s'appelle "symbole" tant qu'il se trouve dans la bibliothèque. Dès lors qu'il est placé sur la scène, sa représentation (sur la scène) s'appelle une "occurrence". Un symbole peut donc être placé plusieurs fois sur la scène, il n'est pas nécessaire de dupliquer un symbole pour obtenir plusieurs représentations de ce dernier. Un symbole peut donc avoir plusieurs occurrences (représentations) sur la scène. Elles seront toutes indépendantes les unes des autres mais toutes dépendent du symbole. Cas N° 1 : Un symbole qui représente un triangle noir : Placez le 3 fois sur la scène. Si vous éditez le symbole (par un double-clic sur le symbole dans la bibliothèque) en le transformant en un rectangle avec deux côtés bien droits mais le troisième arrondi, les trois occurrences seront transformées. > Editer un symbole modifie toutes les occurrences qui dépendent de ce dernier Cas N° 2 : Un symbole qui représente un triangle noir : Placez le 3 fois sur la scène. Si vous modifiez une des trois occurrences de la scène, les deux autres resteront identiques et le symbole ne sera pas modifié. >>> Editer une occurrence ne modifie pas le symbole dont elle dépend <<< Attention : Un bouton peut avoir plusieurs occurrences et chacune d'entre elles peut recevoir différents scripts. Les Graphes : Qu'est ce que c'est ? C'est un "objet" qui sert généralement de décor sur la scène. Il peut être aussi utilisé dans une interpolation, c'est à dire une animation sur la scène. Comment le créer ? Méthode 1 : Transformer un dessin réalisé sur la scène en symbole.(Vous pouvez aussi transformer un symbole en un Graphique : ex : Utiliser un ou plusieurs symboles de type graphique pour en créer un autre plus complexe). 1. Sélectionner un dessin ou un symbole sur la scène 2. Taper F8 3. Nommer le symbole que vous vous apprêtez à créer 4. Sélectionner le type de symbole Graphique. 5. Valider par OK Méthode 2 : Créer un symbole directement dans une fenêtre séparée de la scène sans rien sélectionner au préalable sur la scène. 1. Taper Pomme-F8 (CTRL-F8 sur PC) Nommer le symbole que vous vous apprêtez à créer Valider par OK 2. Tracer un dessin sur la zone de travail, autour de la croix qui apparaît au centre de votre page. Vous pouvez également utiliser les symboles d'une bibliothèque en les faisant glisser sur la croix centrale de la page. 3. Pomme-E ou CTRL-E pour revenir sur la scène. Vous pouvez aussi cliquer sur le bouton Scène situé en haut à gauche de la timeline. Les Boutons : Qu'est-ce qu'un Bouton ? Le bouton est un symbole capable de recevoir des actions. C'est donc par un clic ou un survol de celui-ci qu'une action peut se déclencher.

369Cour Flash

  • Upload
    red-all

  • View
    222

  • Download
    1

Embed Size (px)

DESCRIPTION

369Cour Flash 5648

Citation preview

Dfinition Accurence :

Cours Dtailler Flash 5.0

Dfinition Accurence :

Qu'est-ce qu'une occurrence ?

Un symbole s'appelle "symbole" tant qu'il se trouve dans la bibliothque. Ds lors qu'il est plac sur la scne, sa reprsentation (sur la scne) s'appelle une "occurrence".

Un symbole peut donc tre plac plusieurs fois sur la scne, il n'est pas ncessaire de dupliquer un symbole pour obtenir plusieurs reprsentations de ce dernier.

Un symbole peut donc avoir plusieurs occurrences (reprsentations) sur la scne. Elles seront toutes indpendantes les unes des autres mais toutes dpendent du symbole.

Cas N 1 : Un symbole qui reprsente un triangle noir :

Placez le 3 fois sur la scne. Si vous ditez le symbole (par un double-clic sur le symbole dans la bibliothque) en le transformant en un rectangle avec deux cts bien droits mais le troisime arrondi, les trois occurrences seront transformes.

> Editer un symbole modifie toutes les occurrences qui dpendent de ce dernier Cas N 2 : Un symbole qui reprsente un triangle noir :

Placez le 3 fois sur la scne. Si vous modifiez une des trois occurrences de la scne, les deux autres resteront identiques et le symbole ne sera pas modifi.>>> Editer une occurrence ne modifie pas le symbole dont elle dpend Peut tre compris comme un "Ensemble d'actions" > Ensemble d'instructions

Actions (Les) > Peut tre compris comme l'ensemble des actions disponibles dans Flash > L'ensemble des commandes, proprits, mots cls, etc disponibles dans Flash

Actions (Des) > Peut tre compris comme des lignes d'instructions

Script (Un ou le) > Peut tre compris comme l'ensemble des instructions places sur une image ou un bouton.

A prsent, pour programmer dans Flash, deux modes sont possibles. En effet, selon votre niveau en programmation, vous pouvez utiliser une mthode relativement intuitive ou bien taper le code vous mme (il faut comprendre par "code" le mot "scripts"). Les deux mthodes vous sont prsentes aux chapitres ci-dessous :

- Le mode Expert- Le mode Normal

CONSEIL : MEME SI VOUS ETES DEBUTANT EN PROGRAMMATION, IL EST FORTEMENT CONSEILLE DE PROGRAMMER EN MODE EXPERT ET NON EN MODE NORMAL AFIN DE PRENDRE DE BONNES HABITUDES.

O placer les actions ?

Nous devrions commencer par nous poser la question suivante : Que veux-je faire ?

En effet, en fonction du mode de dclenchement de l'action que vous souhaitez raliser, l'emplacement diffre. On fait la diffrence entre le mode manuel (l'utilisateur doit cliquer ou appuyer sur une touche du clavier) et le mode automatique (l'utilisateur n'a rien faire. Seul le dplacement de la tte de lecture dclenche l'action).

Sur une image : La timeline que vous voyez est celle d'une animation et non celle d'un symbole. Il serait nanmoins possible de placer cette action sur l'image d'un movie clip. Dans l'exemple ci-dessous, une variable intitule "tempo" est initialise 1 et une occurrence de type movie clip intitule "coche" est masque.

Sur un bouton : Le bouton suivant dplacera la tte de lecture sur l'image 15 de la timeline de l'animation ds que l'utilisateur cliquera dessus.

Sur un movie clip : Ds que l'utilisateur cliquera sur ce movie clip, la tte de lecture se dplacera l'image 15 DU MOVIE CLIP.

Il faut reconnatre qu'il existe une certaine ambigut relative au movie clip par rapport au bouton. Vous pourrez constater que dans certains cas, cela revient presque au mme de placer une action sur un bouton ou un movie clip. Seule la programmation change. En effet, vous pourriez vous dire "mais quelle diffrence entre les deux exemple ci-dessus ?" Permettez-nous de vous le rappeler. Il y a plusieurs timeline dans une animation. Celle de l'animation elle-mme et celle des movie clips. Donc, dans le cas du bouton, l'action "gotoAndStop (15);" aura pour effet de dplacer la tte de lecture l'image 15 de la timeline de l'animation. Dans le cas du movie clip, mme si le movie clip est plac sur la scne, mme si ce script est plac sur l'occurrence, l'instruction "gotoAndStop (15);" aura pour effet de d'afficher l'image 15 de la timeline du movie clip sans que la tte de lecture de l'animation ne bouge.

En clair, si vous dmarrez avec Flash, il est fortement dconseill d'utiliser "on clipevent". Utilisez plutt l'action "tell target". Elle est plus limite mais plus facile comprendre.

Lorsque le code est plac sur un bouton ou un movie clip, les actions peuvent se dclencher diffrents moments. Ces moments s'ont appels des vnements. Il faut donc une syntaxe qui permet de grer ces vnements avant d'excuter les instructions. On appelle alors cela des "Gestionnaires d'vnements".

Syntaxe Pointe :

Comment programmer ?

Flash 5 aura t un tournant dans l'histoire du logiciel. En effet, les langages de programmation les plus avancs utilisent une syntaxe qualifie de pointe. Elle compose "ses phrases" appeles des "instructions" partir d'objets, de movie clips, de mthodes, de proprits et de variables. Les variables peuvent se trouver au mme emplacement que les mthodes et proprits. Ce sont des mots spars par des points, d'o le nom de syntaxe pointe. Il est vident que si vous lisez ces termes pour la premire fois, cela ne vous avancera pas. Lorsque vous aurez compris le mcanisme et aurez fait la diffrence entre ces termes l, vous comprendrez ce que vous venez de lire. En attendant, simplifions les explications et commenons par quelques exemples :

objet.mthodelamain.setRGB(0xCCFF66);

Dans cet exemple, "lamain" est un objet couleur. Une occurrence de type movie clip sur la scne, est contrle par cet objet. "setRGB..." est une mthode de l'objet "lamain". Cette mthode consiste notamment dans ce cas changer la couleur de l'occurrence contrle par l'objet "lamain".

movieclip.mthodediapo.gotoAndStop(2);

Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "gotoAndStop" est une mthode du movie clip "diapo" qui consiste a lui ordonner de placer sa tte de lecture sur l'image 2 (sur la timeline interne du movie clip).

movieclip.propritdiapo._x=15

Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "_x" est une proprit du movie clip "diapo". Cette proprit lit et change la position horizontale (par rapport au bord gauche de la scne) du movie clip "diapo". Dans l'exemple ci-dessus, l'occurrence de type movie clip intitul "diapo" via la palette des occurrences, est place 15 pixels du bord gauche de la scne.

Lorsque vous placez des actions dans vos animations, sur vos boutons et movie clips, vous avez p constater qu'il existe deux modes de programmation. Le mode "Normal" et le mode "Expert". Dans ce dernier cas, vous pouvez taper votre code de deux faons. Voyons l'exemple suivant :

on (press) {tellTarget ("ici") {gotoAndStop (2);}}

Et :

on (press) {ici.gotoAndStop (2);}

Nous ne nous tendrons pas sur la premire syntaxe qui utilise "tell target". Reportez vous ce chapitre pour de plus amples informations. Retenez tout de mme que cette syntaxe est obsolte mme si elle fonctionne.

Penchons-nous donc plutt sur la syntaxe pointe :

Le premier mot "ici" est le nom d'une occurrence de type movie clip qui est concern par "gotoAndStop (2). Le point spare les diffrentes "parties" (animation, objets, movie clips, mthodes, proprits et variables) qui composent la ligne d'instruction. "gotoAndStop est appele "mthode" de l'objet "ici".

Une instructionest, comme nous l'avons vu ci-dessus, compose de plusieurs parties spares par des points.

xxxxxx.yyyyyy

xxxxxx : Vous pouvez saisir le nom d'un objet ou d'un movie clip.

yyyyyy : Vous pouvez placer le nom d'une mthode ou d'une proprit.

Dans certains cas, yyyyyy pourrait aussi tre une variable rattache un movie clip.

xxxxxx.yyyyyy.zzzzzz

Dans le cas ci-dessus, cela signifie qu'une imbrication a t effectue. xxxxxx est un movie clip et yyyyyy un autre qui est contenu dans le premier. Dans ce cas, zzzzzz est une mthode, une proprit ou une variable rattache yyyyyy.

Exemples :

corps.tete.oeil._x=12

"corps" est un movie clip qui contient un autre movie clip "tete" qui en contient lui mme un autre, "oeil". C'est ce dernier dont la proprit "_x" (position horizontale d'un objet sur la scne) est rgle 12 (pixels).

corps.tete=12

Nous aurions pu aussi avoir un movie clip "corps" qui contient une variable intitule "tete" qui a pour valeur 12.

Cette mthode de rdaction du code est une mthode universelle utilise dans de nombreux langages que nous vous invitons donc utiliser au dtriment d'une syntaxe plus longue et qui devrait tre obsolte sur Flash 6 ou 7.

Navigation :

Pour dmarrer en programmation, il est assez facile de faire ses premiers pas avec des exercices de navigation.

NAVIGATION

Leon N1 : Dplacer la tte de lecture vers une autre image.Leon N2 : Arrter et relancer la tte de lecture.Leon N3 : Faire un lien vers une adresse Internet.

Dplacer la tte de al lecture vers une autre page :

gotoAndPlay

A quoi a sert :

Lorsque vous souhaitez dplacer la tte de lecture vers une autre image de la timeline ou celle d'une autre scne, vous devez utiliser cette commande. Elle a galement la particularit, aprs avoir renvoy la tte de lecture vers une autre image, d'excuter la lecture en continue de l'animation jusqu' ce qu'une nouvelle instruction d'arrt de la tte de lecture soit demande.

Comment insrer cette commande :

Cette commande peut-tre place sur une image (intrt limit, car connexion sur une autre image automatiquement), sur un bouton ou sur un movie clip.

1. Slectionner un bouton

2. Insrer le gestionnaire d'vnements

3. Taper la commande en prcisant le numro de l'image et de la scne

Le code doit tre le suivant :

on (press) {gotoAndPlay (12);}

Si vous avez plac votre code sur un movie clip, le code doit ressembler au code ci-dessous.

on (mouseDown) {gotoAndPlay (12);}

gotoAndStop

Cette commande s'utilise de la mme faon que la commande "gotoAndPlay" mais elle diffre dans la mesure o la tte de lecture est renvoye vers une image mais elle s'arrte. Elle ne joue donc pas les images qui suivent l'image appele.

Arrter et relancer la tte de lecture :

Play

A quoi a sert :

Lorsque la tte de lecture a t arrte, cette commande permet de relancer la lecture de l'animation. La tte de lecture se remet donc en marche.

Comment insrer cette commande :

Cette commande peut-tre place sur un bouton ou sur un movie clip.

1. Slectionner un bouton

2. Insrer le gestionnaire d'vnements

3. Taper la commande "play"

Le code doit tre le suivant :

on (press) {play ( );}

Si vous avez plac votre code sur un movie clip, le code doit ressembler au code ci-dessous.

on (mouseDown) {play ( );}

Stop

Cette commande permet d'arrter le dfilement de la tte de lecture en la bloquant sur une image. Elle est gnralement positionne sur une image et rarement sur un bouton.

1. Slectionner une image cl sur la timeline

2. Taper la commande "stop"

Vous n'avez pas besoin de gestionnaire d'vnements.Faire un lien vers une adresse internet :

A quoi a sert :

- Faire un lien vers une page HTML,- Envoyer un mail ou faire rfrence l'adresse d'un script CGI,- Dialoguer avec la page HTML dans laquelle se trouve le SWF,- Dialoguer avec l'animation Director dans laquelle se trouve le SWF,

Faire un lien vers une page

Lorsque vous utiliserez Flash pour faire une barre de navigation, l'action "GetURL" vous permettra d'effectuer le lien vers des pages HTML.

Pour placer un lien sur un bouton ou sur une image :

1. Placer un bouton sur la scne (ou slectionner une image cl).

2. Via la fentre des actions, taper le gestionnaire d'vnements

3. Taper la commande "GetURL"

4. Prciser dans l'adresse du lien. (Ex. : http://www.yazo.net ou bien mme une page directement de votre site : partie1.htm)

Le code doit ressembler au lignes ci-dessous :

on (press) {getURL ("http://www.yazo.net");}

Envoyer un mail

Cette action permet de multiples oprations. En effet, vous pouvez envoyer un mail, raliser un formulaire, envoyer une instruction lingo partir d'un swf, ou demander l'excution d'une fonction javascript dans une page HTML.

Pour envoyer un mail :

1. Placer un bouton sur la scne (ou slectionner une image cl).

2. Via la fentre des actions, taper le gestionnaire d'vnements

3. Taper la commande "GetURL"

4. Prciser dans l'adresse du lien. (Ex. : mailto:[email protected])Il s'agit du mot "mailto" suivi de 2 points sans espaces avant ni aprs.

Crer un formulaire :

Contrle d'une accurence :

Pour aller un peu loin en programmation, il est assez facile de faire ses premiers pas avec des exercices de contrle d'occurrences de type movie clip.

Contrle d'occurrences

Leon N1 : Rgler les proprits d'une occurrence de type movie clip.Leon N2 : Contrle de la tte de lecture d'un movie clip.Rgler les proprits d'une occurrence de type movie clip.

A quoi a sert :

- Rgler la position, les dimensions, l'opacit, la rotation et l'tat de visibilit d'une occurrence de type movieclip.

- Il existe les proprits suivantes :

(Pour tester les exemples ci-dessous, placez un movie clip sur la scne et nommez le "visage". Placez un bouton sur la scne, tapez le code ci-dessous. Noubliez pas de placer le gestionnaire d'vnements : )

on (press) {visage.proprit=valeur}

_x (la position horizontale du bord gauche de la scne), la valeur doit tre exprime en pixels.

visage._x=200;

L'occurrence "visage" est place 200 pixels du bord gauche de la scne.

_y (la position verticale du bord suprieur de la scne), la valeur doit tre exprime en pixels.

visage._y=50;

L'occurrence "visage" est place 50 pixels du haut de la scne.

_xscale (largeur), la valeur doit tre exprime en % de 1 l'infini. 100 % tant la valeur initiale.

visage._xscale=200;

L'occurrence "visage" est tir de 2 fois sa largeur initiale.

_yscale (hauteur), la valeur doit tre exprime en % de 1 l'infini. 100 % tant la valeur initiale.

visage._yscale=50;

L'occurrence "visage" est rtrci 50% de sa largeur initiale.

_alpha (opacit, transparence), la valeur doit tre exprime en % de 0 100 %.

visage._alpha=50;

L'occurrence "visage" est rendue transparente 50% d'opacit.

_rotation (rotation), la valeur doit tre exprime en degrs (de 0 a 360).

visage._rotation=90;

L'occurrence "visage" est tourne de 90.

_width (largeur), la valeur doit tre exprime en pixels.

visage._width=250;

L'occurrence "visage" est regle 250 pixels de largeur.

_height (hauteur), la valeur doit tre exprime en pixels.

visage._height=300;

L'occurrence "visage" est regle 300 pixels de hauteur.

_visible (visibilit), la valeur doit tre 1 ou 0. (1, visible ou 0, invisible).

visage._visible=0;

L'occurrence "visage" est rendue invisible.Attention, VOUS NE DEVEZ JAMAIS PRECISER LES UNITES PRECISEES CI-DESSUS.

Comment l'utiliser ?

Vous devez tout d'abord placer un movie clip sur la scne puis le nommer. Il vous est ensuite trs simple de faire rfrence au nom de celui-ci dans une phrase puis le sparer d'un point et de sa proprit.

on (press) {nomdeloccurrence._propriete=200}

Une proprit doit toujours tre prcde du signe "_". Une occurrence et sa proprit doivent toujours tre spares par un point. Dans l'exemple ci-dessous, l'occurrence intitule "visage" sur la scne, subit une rotation de 45.

on (press) {visage._rotation=45}

Rappelons que dans certains cas, lorsqu'une occurrence laquelle on fait rfrence se trouve sur la scne, il faut faire rfrence au mot cl "_root" ou "this".

Contrle de la tte de la lecture d'un Movie Clip :

A quoi a sert :

- Cette commande permet de contrler la tte de lecture d'un movie clip.- Cette commande est obsolte, il est prfrable d'utiliser la syntaxe pointe.

Comment l'utiliser ?

Comme vous venez de le lire ci-dessus, cette utilisation du "Tell target" est obsolte dans Flash 5, mme si la commande fonctionne. Voici tout de mme le code :

on (press) {tellTarget ("ici") {gotoAndStop (2);}}

Analysons la structure :

Ligne 1 : TellTarget ("ici") la commande prvient Flash que les instructions qui vont suivre s'adressent au movie clip nomm "ici". Les guillemets sont indispensables. N'oubliez pas non plus l'ouverture de l'accolade.

Ligne 2 : Vous placez les commandes (sur plusieurs lignes si ncessaire pour plusieurs commandes).

Ligne 3 : Vous fermez l'accolade que vous avez ouverte sur la premire ligne.

Si nous devions utiliser la syntaxe pointe, voici le code ci-dessous :

on (press) {ici.gotoAndStop (2);}

Outre une syntaxe plus courte, elle est surtout plus simple mais vous pouvez comprendre son fonctionnement au chapitre sur la syntaxe pointe.

Tire Site : www.Yazo.Net