BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2.

Présentation au sujet: "BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2."— Transcription de la présentation:

1 BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2

2 Sommaire Introduction. Eléments du langage. La navigation au sein d'une animation. Contrôler une occurrence. Mouvement d'une occurrence. Gestion du son.

3 Ajouter de l'interactivité aux animations Flash  Contrôler la tête de lecture d’une animation  Contrôler le comportement d’une occurence  Lire des sons et des vidéos  Utiliser le clavier  … A quoi sert l'ActionScript ?

4 Où mettre le code ActionScript ?  sur l'occurrence d'un bouton,  ou sur l'occurence d'un clip,  sur une image clé,  dans un fichier texte externe. Attention : Pour pouvoir placer du code sur l' occurence d'un bouton ou d'un clip il faut que ce dernière soit nommé. Introduction

5 Arbre des occurrences Environnement de developpement Notion de gestionnaire d’évènements Introduction (2) Boite à outils ActionsNavigateur de scriptFenêtre de script

6 Elements du langage : les opérateurs +: Addition -: Soustraction *: Multiplication /: Division %: Reste de la division entière ++: Incrémentation --: Décrémentation =: Affectation && ou &: ET logique ou bit à bit || ou |: OU logique ou bit à bit ==: Egalité !=: Inégalité < ou <=: « inférieur à » ou « inférieur ou égale à » > ou >=: « supérieur à » ou « supérieur ou égale à »

7 Eléments du langage : les structures conditionnelles Structure If ( ) else Exemple If (toto == 1) afficher (toto); else afficher (titi); If... else

8 Eléments du langage : les structures conditionnelles Structure switch ( ) { case : ; break; default : ; break; } Exemple switch (toto) { case 1 : afficher (1); break; case 2 : afficher (2); break; case 3 : afficher (3); break; default : afficher (titi); break; } Switch

9 Eléments du langage : les structures itératives Structure for ( ; ; ) { ; } Exemple for (toto = 0; toto < 10; toto++) { afficher (toto); } For

10 Eléments du langage : les structures itératives Structure while ( ) { ; } Exemple toto = 0; while (toto < 10) { afficher (toto); toto++; } While

11 Telecharger le fichier exemple_bateau.fla sur wwwetu.utc.fr/~bmaricot. Créer un calque “commandes” pour acceuillir le code. Créer une image clé dans le calque “commandes”. Exemple 1 : l'animation du bateau

12 Contrôler la tête de lecture d'une animation  stop () - Arrêter la tête de lecture btArret.onPress = function(){ stop(); }  play () - Lancer la tête de lecture btLecture.onPress = function(){ play(); }  gotoAndStop() - Déplacement vers une image btSommaire.onPress = function(){ gotoAndStop(5); } Navigation au sein d'une animation

13  nextFrame() et prevFrame() - Déplacement vers l'image suivante btNavAvancer.onPress = function(){ nextFrame(); } btNavReculer.onPress = function(){ gotoAndStop(_currentframe-1); }  Contrôler la tête de lecture de la timeline d'une occurrence btNavCarte.onPress = function(){ laCarte.gotoAndStop(5); } Navigation au sein d'une animation (2)

14 Ajouter un bouton pour lancer l'animation et un autre pour la mettre en pause. Le code ActionScript est le suivant : Application Stop (); play.onPress = function () { play (); } pause.onPress = function () { stop (); }

15 Les propriétés d’un clip MovieClip._alpha : Transparence d'une occurrence de clip. MovieClip._height : La hauteur d'une occurrence de clip, en pixels. MovieClip._rotation : Le degré de rotation d'une occurrence de clip. MovieClip._visible : Une valeur booléenne déterminant si l'occurrence d'un clip est masquée ou visible. MovieClip._width : L a largeur d'une occurrence de clip, en pixels. MovieClip._x : La coordonnée x d'une occurrence de clip. MovieClip._xmouse : La coordonnée x du pointeur de la souris dans une occurrence de clip. MovieClip._xscale :L a valeur spécifiant le pourcentage de redimensionnement horizontal d'un clip.

16 Ajouter la possibilité de modifier la taille de la baleine. Code ActionScript : Application BoutonTaille.onPress = function () { baleine._xscale = parseInt (taille.text); baleine._yscale = parseInt (taille.text); }

17 Les yeux du soleil suivent la souris. Code ActionScript : Application (2) oeil1.onEnterFrame = function () { Xmouse = this._parent._xmouse; Ymouse = this._parent._ymouse; Xoeil = this._x; Yoeil = this._y; XmouseLocal = Xmouse - Xoeil; YmouseLocal = Ymouse - Yoeil; rayon = Math.sqrt ((XmouseLocal * XmouseLocal) + (YmouseLocal * YmouseLocal)); angle = Math.asin (YmouseLocal / rayon); if (Xmouse < Xoeil) this._rotation = 180 - (angle / 0.0175); else this._rotation = angle / 0.0175; }

18 Var = New Color ( ) : Créé un objet associé à la couleur de l'occurrence. Var.setRGB ( ) : Permet de modifier la couleur de l'objet Var. Couleur = Var.getRGB () : Permet d'obtenir la couleur de l'objet Var. Couleur d'une occurrence

19 Modifier la couleur du ciel grâce à deux boutons. Code ActionScript des boutons : Application bBleu.onPress = function () { paletteBleu = new Color(cCiel); paletteBleu.setRGB(0x0DB0FF); delete paletteBleu; } bOrange.onPress = function () { paletteOrange = new Color(cCiel); paletteOrange.setRGB(0xFF865E); delete paletteOrange; }

20 Il est possible d'animer un clip grâce à un de ces gestionnaires :.onEnterFrame. Ce gestionnaire est déclanché au chargement de l'animation flash et est rappelé cycliquement à la même vitesse que celle de l'animation. Animation d'un clip

21 .hitTest ( ) : Méthode qui permet de déterminer si l'occurence 1 est en collision avec l'occurrence 2. Détection des collisions entre deux occurences

22 Mettre en mouvement la baleine. Ajouter une détection de collision entre la baleine et le bateau. Application

23 Application (2) go.onPress = function () { baleine.onEnterFrame = function () { baleine._x -= 10; if (baleine.hitTest (bateau)) { son.start(); baleine._rotation = 90; delete baleine.onEnterFrame; baleine.onEnterFrame = function () { if (baleine._y == 550) delete baleine.onEnterFrame; baleine._y += 10; }

24 Pour charger un son il y a deux méthodes. Si le son est dans la bibliothèque : Gestion du son son = new Sound(); son.attachSound( ); Si le son est un fichier externe : Attention : Le deuxième paramètre de la fonction de chargement d'un fichier externe permet de spécifier quand la lecture du fichier sera lancée (streaming ou non). son = new Sound(); son.loadSound("nom du fichier externe",1);

25 Ajout d'un son lors de la collision entre le bateau et la baleine. Code ActionScript : Application son = new Sound(); son.attachSound("bing"); son.start();

26 Drag & Drop Permet de déplacer un clip on (press) { this.startDrag(false); } on (release) { this.stopDrag(); } Limitation du déplacement this.startDrag(false, 65, 80, 105, 140);

27 Telecharger le fichier animateur.fla sur wwwetu.utc.fr/~bmaricot. Transformer les images en occurrence de clip. Placer les occurences de clip Ajouter le drag & drop dans le gestionnaire d’évènement du ? Limiter le déplacement au dessus du clip photo Mettre la photo transparente quand la souris de bouge pas et que le ? n’est pas sélectionné Ex 2 : Animateur Phantome

28 Application (version 1) this.pic._alpha=0; this.interrogation.onPress = function() { _root.onMouseMove = function () { if(this.pic._alpha == 100) this.pic._alpha ++; } this.interrogation.onRelease = function() { _root.onEnterFrame = function() { this.pic._alpha-=5; if (this.pic._alpha == 0) delete _root.onEnterFrame; }

29 Application (version 2) this.pic._alpha=0; var souris = 0; this.interrogation.onPress = function() { souris = 1; _root.onMouseMove = function () { if((this.pic._alpha < 100)&&(souris == 1)) this.pic._alpha ++; } this.interrogation.onRelease = function() { souris = 0; _root.onEnterFrame = function() { this.pic._alpha-=5; if (this.pic._alpha < 0) delete _root.onEnterFrame; }

30 Placer un symbole sur la scène attachMovie(« nom_liaison","new_nom",1); Dupliquer une occurrence sur la scène mon_clip.duplicateMovieClip("new_nom",1); Supprimer une occurrence de la scène mon_clip.removeMovieClip(); Charger une image sur la scène mon_clip.loadMovie("photo1.jpg"); loadMovieNum("fond.jpg",1); Création dynamique d’interface

31 Telecharger le fichier barredefil.fla sur wwwetu.utc.fr/~bmaricot. Création d’une occurrence point Création d’une occurrence forme Editer le symbole point Placer l’occurrence forme Création d’une image clé Dupliquer l’occurrence forme Ex 2 : barre navigante

32 Application (version 1) this.minia._x = 0 this.minia._x = 65 for (i=100; i<1000; i+=100) { this.minia.duplicateMovieClip("miniature"+i, i); eval("miniature"+i)._x = i; eval("miniature"+i)._y = 65; }

33 Ajouter une zone réactive (zoom) sur les formes Ajouter un oscillement sur les formes Intercaller le positionnement des formes barre navigante (2)

34 Application (version 2) : Zone réactive this.minia.onRollOver = function () { this._xscale = 120 this._yscale = 120 } this.minia.onRollOut = function () { this._xscale = 100 this._yscale = 100 }

35 Application (version 2) : Oscillation _global.oscillation = 0; _global.amplitude = 5; this.onEnterFrame = function() { _global.oscillation += 0.3; this.minia._y = 65 + (Math.sin(oscillation)*amplitude); }

36 Application (version 2) : Intercallage if ((i/100)%2) { eval("miniature"+i).onEnterFrame = function() { this._y = 95 + (Math.cos(oscillation)*amplitude); } else { eval("miniature"+i).onEnterFrame = function() { this._y = 65 + (Math.sin(oscillation)*amplitude); }

37 Déplacer la barre suivant le positionnement de la souris barre navigante (3)

38 Application (version 3) _root.onEnterFrame = function() { decal = 225-_root._xmouse; pan = marque._x; if (pan -1000) { marque._x += (decal/20); } if (pan>1000) marque._x=-500 if (pan<-1000) marque._x=500 };

39 Application (version 3) eval("miniature"+100).onPress = function() { this.loadMovie("jay.jpg",eval("miniature"+100)); }