Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline.

Présentation au sujet: "Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline."— Transcription de la présentation:

1 Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline

2 Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque : 'F11' contient tous les éléments (clip, bouton et graphique) du projet en cour. La bibliothèque commune contient des boutons, interactions et sons publics. Composants : 'Ctrl-F7' objet integrant toute une serie de fonctionnalités utilisables dans n'importe quelle animation. Ils sont réutilisable et paramétrage facilement. Panneau actions : 'F9' panneau contenant les actions-script de l'animation.

3 Action-script Tutorial Flash 2 Par Vincent ² SI28 – P06 - Language utilisé par Flash pour la création d'applications avancées _Permet de créer des films interactifs _Des jeux video complets _Gerer les actions des visiteurs - Deux formes : _mode normal _mode expert

4 Action-script Tutorial Flash 2 Par Vincent ² SI28 – P06 Mode normal : Primitives du language Compléter les arguments Code généré

5 Action-script Tutorial Flash 2 Par Vincent ² SI28 – P06 Mode expert Permet de passer au mode normal Vérifie la syntaxe

6 Séquences Tutorial Flash 2 Par Vincent ² SI28 – P06 Panneau de contrôle des séquences Fenêtres > Séquence Maj+F2 Action Script associé nextScene(); prevScene();

7 Texte Tutorial Flash 2 Par Vincent ² SI28 – P06 Sous flash, il y a 3 sortes de textes : - statique - dynamique - de saisie

8 Texte statique Tutorial Flash 2 Par Vincent ² SI28 – P06 Un texte statique est une zone de texte affichée a l'écran L'url permet de transformer ce texte en hyperlien Augmenter l'espace entre les caractéres.

9 Texte dynamique ou de saisie Tutorial Flash 2 Par Vincent ² SI28 – P06 Une zone de texte dynamique sera remplie dynamiquement ou par l'utilisateur. Possede un nom d'occurence Multiligne permet l'affichage complet du texte. Autrement, seul la première ligne sera visible Nombre maximal de caractères saisie par l'utilisateur dans la cas d'un texte de saisie Affiche le contenue de la variable passée en argument

10 Texte scrollable Tutorial Flash 2 Par Vincent ² SI28 – P06 Un texte scrollable est un texte qui défile a l'écran

11 Texte scrollable Tutorial Flash 2 Par Vincent ² SI28 – P06 Créer une zone de texte dynamique :

12 Texte scrollable Tutorial Flash 2 Par Vincent ² SI28 – P06 Insérer une barre de défilement : Drag and drop de la Scrolbar a droite de la zone de texte

13 Symboles Clip (petit rappel) Tutorial Flash 2 Par Vincent ² SI28 – P06 Convertir en symbole Insertion > Convertir… Sélection d’un élément + F8 Modifier le symbole (modifie toutes les occurrences) Double-clic sur un symbole Clic droit sur le symbole > Modifier … Duppliquer un symbole -Dédié à l’animation -Permet des contrôles Action Script

14 Symboles -> boutons Tutorial Flash 2 Par Vincent ² SI28 – P06 Insertion > créer un nouveau symbole > bouton 4 états : - haut - dessus - abaisser - cliquable

15 Symboles -> boutons Tutorial Flash 2 Par Vincent ² SI28 – P06 - Chaque etat peuvent être constitué d'un clip.

16 Chemins absolus Tutorial Flash 2 Par Vincent ² SI28 – P06 Flash Clip3 Button1Clip2clip1  _root  _root.button1.clip3 _root : désigne la scène. Les chemins absolus peuvent être utilisés n’importe où dans le flash

17 Chemins relatifs Tutorial Flash 2 Par Vincent ² SI28 – P06 Flash Clip2clip1  _ parent  this this : objet en cours, celui dans lequel le code est en train d’être exécuté.

18 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² - par le clavier _ texte de saisie _ déplacement d'un clip - par la souris _ drag and drop _ clik _ roll over Plusieurs possibilité d'interagir avec une animation

19 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Mouvement d'un clip au clavier Action-script sur le clip : onClipEvent(enterFrame){ if (Key.isDown(Key.UP)){ _y = _y-2; } else if (Key.isDown(Key.DOWN)){ _y = _y+2; } else if (Key.isDown(Key.RIGHT)){ _x = _x+2; } else if (Key.isDown(Key.LEFT)){ _x = _x-2; }

20 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Mouvement d'un clip au clavier OnClipEvent (enterFrame) {-} : éxécute le code en {} en fonction de l'argument ().Ici, enterFrame permet d'éxécuter le code à chaque entrée dans l'image. Si il n'y a qu'une image, le code est éxécuté en boucle. Key.isDown : écoute les touches du clavier lorsqu'elles sont appuyées. IsDown est une méthode (fonction pré-programmée). Key.UP : touche 'flèche haut' du clavier. UP est une constante comme DOWN ou LEFT. _y ou _x : variable interne a chaque clip. Possède les coordonnées du clip.

21 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Mouvement d'un clip à la souris Action-script sur le clip : on(press){ startDrag(this); } on(release){ stopDrag(); }

22 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Mouvement d'un clip à la souris on(press) {-} : fonction qui teste si le clip a été pressé. Peut être utilisé sous la forme lancer.onPress = function() {-} dans la timeline où lancer est le nom de l'occurrence sur laquelle on doit cliquer. startDrag(this) : déclenche le 'drag' du clip. C'est à dire que le clip suit la souris. This est le clip dans lequel est placé ce code ou peut être remplacé par son nom d'occurrence. StopDrag() : arréte de le 'drag' de clip. Ne prend pas d'argument.

23 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Test de collision La collision peut être détectée entre deux occurrences clip sur la même scène. HitTest : renvoie VRAI si deux occurrences sont en contact. ex : if(_root.rond.hitTest(_root.carre)){ action a réaliser si la condition est vérifiée.

24 Liaison d'animation aux actions Tutorial Flash 2 Par Vincent ² Exemple de collision - Créer deux clips sur une même scéne : clip1 et clip2. - Insérer le code suivant dans clip1 : on(press){ startDrag(this); // permet de modifier la position du clip if(_root.clip2.hitTest(this)) { //action à réaliser } on(release){ stopDrag(); // ne pas oublier d'arreter le drag lors de l'arret du clic. }

25 Action Script : généralités Tutorial Flash 2 Par Vincent ² SI28 – P06 On peut insérer du code Action Script - Dans un fichier texte externe - Sur une image clé - Sur l'occurrence d'un bouton - Sur l'occurrence d'un clip Action Script : langage de programmation - Fonctions - Variables - Structures de contrôle

26 Action Script : Code Tutorial Flash 2 Par Vincent ² SI28 – P06 Code //commentaire sur une ligne /* Comentaire Sur plusieurs ligne */ Code_terminé_par_un_point_virgule; Fonctions Nomdelafonction(arg1,arg2,…){ … } trace(«debug»);

27 Action Script : Variables Tutorial Flash 2 Par Vincent ² SI28 – P06 - Variables de type variant. - Variables globales _global.variable = « variable »; _root.variable=123; - Variables locales limité à l’espace d’une focntion, clip, …

28 Action Script : Arithmétique Tutorial Flash 2 Par Vincent ² SI28 – P06 Comparaisons 1==1 1 < 2 1<=1 2 > 1 1>=1 1!=2 Opérations a = 1 + 1 a = 1 – 1 a = 1 * 1 a = 1 / 1 a = 3 % 2 a++ a-- a+=1 a-=1 a*=2 a/=2

29 Action Script : Structures de contrôles Tutorial Flash 2 Par Vincent ² SI28 – P06 Structures conditionnelles if (test) { … } switch (variables){ case 1: … break; case 2: … break; … default: … }

30 Action Script : Structures de contrôles Tutorial Flash 2 Par Vincent ² SI28 – P06 Boucles for(var=0;var<10;var++){ … } while (test){ … }

31 Action Script : propriétés et méthodes Tutorial Flash 2 Par Vincent ² SI28 – P06 Clip clip1._x = 0; clip1._y = 0; clip1._visible = true; clip1.enabled = true; Zone de texte txt_area.text = « texte »; …

32 Action Script : évènements Tutorial Flash 2 Par Vincent ² SI28 – P06 Dans les clips : on(evenement){ //Code … } Dans la scène ou sur une image nom_occurence.onPress = function(){ trace("ok"); } Evenements : press, release, enterframe…

33 Timeline Tutorial Flash 2 Par Vincent ² Déplacement dans la timeline On peut se déplacer dans la timeline par action-script : stop(); permet d'arreter la lecture. Celle-ci reste figée sur une l'image qui posséde un stop(). Ne prend pas d'arguments. Play(); reprend la lecture de l'animation. Ne prend pas d'arguments. NextFrame() / prevFrame(); passe à l'image suivante ou precedente. Ne prend pas d'arguments. GotoAndPlay( nb_frame); saute à l'image dont le numéro est passée en argument et continue la lecture normalement. GotoAndStop(nb_frame); saute à l'image dont le numéro est passée en argument et stop la lecture. GototAndPlay & GotoAndStop doivent apparaître dans un gestionnaire on. (ex : on(press){})

34 Timeline Tutorial Flash 2 Par Vincent ² Déplacement dans les séquences On peut se déplacer dans la timeline par action-script : nextScene (); passe à la scéne suivante prevScene (); passe à la scéne precedente Ces instructions doivent apparaître dans un gestionnaire 'on'. (ex : on(press)){})

35 Externe Tutorial Flash 2 Par Vincent ² Charger une animation externe L'animation externe doit obligatoirement être sous forme.swf loadMovie(chemin.swf, cible, méthode); charge le fichier swf à partir du même répertoire et remplace le clip intitulé 'cible' qui existe déjà sur la scéne.

36 Le son Tutorial Flash 2 Par Vincent ² SI28 – P06 son = new Sound(); Associer notre symbole à un son attachSound() pour un son dans la bibliothèque loadSound() pour un fichier externe (mp3…) Démarrer la lecture son.start(X,Y) X : seconde ou l’on veut démarrer la lecture Y : nombre de fois que l’on veut lire le son Stopper la lecture son.stop()

37 Le son : volume Tutorial Flash 2 Par Vincent ² SI28 – P06 Gérer le volume: son.setVolume(x) 0<=x<=100 son.getVolume() Gérer la balance son.setPan(x) x<0 vers la gauche x>0 vers la droite -100 <= x <= 100