Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours 2 : Action Script avancée Licence CCIN : Communication, Création et Intég

Cours 2 : Action Script avancée Licence CCIN : Communication, Création et Intégration Numérique Cours de CARTEAU Nicolas Flash : Action Script 2.0 Sommaire 1. Envoi de variable par l’HTML 2. Les clips et leurs profondeurs 3. Couleurs des clips en AS 4. Dessiner sur des clips 5. Les évènements du clavier 6. Les collisions Envoi de variable par l’HMTL Envoi de variable par l’HMTL Envoi de variable : Créer une nouvelle animation flash contenant un clip nommé « mon_clip » à l’intérieur. Publier votre animation. Ceci créera une page HTML Coder de préférence la page HTML en UTF‐8 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" /> <title>page 1</title> </head> <body> <object type="application/x‐shockwave‐flash" data="test1.swf " width="550" height="400"> <param name="movie" value="test1.swf" /> </object> </body> </html> Envoi de variable par l’HMTL Envoi de variable : Pour transmettre une variable d’un fichier HTML dans un fichier SWF, il suffit de rajouter : Si on a plusieurs variables à envoyer, il faut utiliser le séparateur & entre les variables. <object type="application/x‐shockwave‐flash" data="test1.swf?variable=valeur_variable " width="550" height="400"> <param name="movie" value="test1.swf?variable=valeur_variable " /> </object> <object type="application/x‐shockwave‐flash" data="test1.swf ?variable=valeur_variable&variable2=valeur_variable2 " width="550" height="400"> <param name="movie" value="test1.swf?variable=valeur_variable&variable2=valeur_variable2 " /> </object> Envoi de variable par l’HMTL Réception de variables : Chaque variable envoyée par un fichier HTML est réceptionnée sur la scène (_root) de votre animation Flash. Exemple 1 : Dans Flash : Créer un champ texte dans votre fichier Flash et nommer le « variable_html » Sauvegarder et testé l’animation Ouvrir votre fichier HTML <object type="application/x‐shockwave‐flash" data="test1.swf?ma_variable=src " width="550" height="400"> <param name="movie" value="test1.swf?ma_variable=src" /> </object> variable_html.text = _root.ma_variable; Envoi de variable par l’HMTL Réception de variables : Exercice : ‐ Créer une nouvelle animation Flash et publier la ‐ Créer 2 variables dans la page HTML (« rot » et « trans ») ‐ Récupérer ces valeurs ‐ Affecter ces valeurs à un clip dans la scène Envoi de variable par l’HMTL Réception de variables : Réponse : Attention aux caractères spéciaux. Exemple : & => %20%26%20 é => %C3%A9 l’espace => %20 C’est pourquoi il est conseillé de travailler en UTF‐8 <object type="application/x‐shockwave‐flash" data="test1.swf?rot=30&trans=50 " width="550" height="400"> <param name="movie" value="test1.swf?rot=30&trans=50" /> </object> variable_html.text = " Rotation = "+_root.rot+" Transparence = "+_root.trans; //créer un clip avec l’occurrence « monclip » monclip._rotation = _root.rot; monclip._alpha = _root.trans; Les clips et les profondeurs Les clips et les profondeurs A savoir : Pour commencer, Il faut savoir qu'il existe deux types de Clips : ‐ les clips statiques, créés dans Flash avant la compilation ‐ les clips dynamiques, créés pendant l'exécution par Action Script. Chaque clip comprend : ‐ 1 nom : occurrence du clip ‐ 1 profondeur : comprise entre ‐16 383 et 1 048 575 2 clips ne peuvent pas avoir la même profondeur. Les clips statiques ont une profondeur négative par défaut par contre c’est vous qui attribué la profondeur des clips dynamiques Les clips et les profondeurs Les profondeurs : Pour renvoyer la profondeur d’un clip il faut utiliser la méthode getDepth() Pour assigner une profondeur à un clip il faut utiliser la méthode swapDepths() Exemple 1 : Créer 2 clips nommés : « mon_clip_1 » et « mon_clip_2 » sur la scène Exemple 2 : trace("profondeur de mon_clip_1 ="+mon_clip_1.getDepth()); // renvoie : profondeur de monclip1 = ‐16383 trace("profondeur de mon_clip_1 :"+mon_clip_1.getDepth()); trace("profondeur de mon_clip_2 :"+mon_clip_2.getDepth()); mon_clip_1.swapDepths(mon_clip_2); trace("ECHANGE DE PROFONDEUR"); t race("profondeur de mon_clip_1 :"+mon_clip_1.getDepth()); trace("profondeur de mon_clip_2 :"+mon_clip_2.getDepth()); Les clips et les profondeurs Les profondeurs : Les profondeurs des clips agissent comme les calques dans Photoshop. Le clip ayant la profondeur la plus élevée passe devant les autres Exemple 3 : mon_clip_1.onRelease = function() { this.swapDepths(mon_clip_2); }; mon_clip_2.onRelease = function() { this.swapDepths(mon_clip_1); }; Les clips et les profondeurs Créer un clip dynamique (vide) : Afin de créer un clip dynamique, il faut utiliser la méthode : createEmptyMovieClip(name:String, depth:Number); name : il s’agit de donner un nom au clip afin de pouvoir l’appeler ultérieurement. depth : il s’agit de donner un nombre afin de préciser la profondeur. Si l’on attribue à un clip la même profondeur qu’à un autre clip, le clip qui se trouvait précédemment sur cette profondeur sera détruit. Afin d’éviter ce problème, on peut utiliser la méthode : getNextHighestDepth() Cette méthode permet de deplacer le clip juste au dessus des autres. Les clips et les profondeurs Créer un clip dynamique (vide) : Exemple 1 : Exemple 2 : _root.createEmptyMovieClip(« mon_clip_1 »,1); this.createEmptyMovieClip(« mon_clip_2 », this.getNextHighestDepth()); this.createEmptyMovieClip("mon_clip_2", this.getNextHighestDepth()); mon_clip_2._x=0; mon_clip_2._y=0; mon_clip_2.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); Les clips et les profondeurs Dupliquer un clip: Afin de dupliquer un clip dynamique, il faut utiliser la méthode : duplicateMovieClip(target:String, newname:String, depth:Number); target : le nom du clip à dupliquer newname : le nouveau nom du clip depth : profondeur du clip Exemple 1 : this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); duplicateMovieClip(img_mc, "newImg_mc", this.getNextHighestDepth()); newImg_mc._y = 200; newImg_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); Les clips et les profondeurs Dupliquer un clip: Exercice : Créez un clip vide Insérez lui une image Dupliquez le clip Faite le suivre le nouveau clip au mouvement de la souris Les clips et les profondeurs Dupliquer un clip: Réponse : this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); duplicateMovieClip(img_mc, "newImg_mc", this.getNextHighestDepth()); newImg_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); _root.onEnterFrame = function() { newImg_mc._x = _root._xmouse; newImg_mc._y = _root._ymouse; } Les clips et les profondeurs Dupliquer un clip: Exemple 2 : Duplique un clip 5 fois avec 120 pixels d’ espacement sur l’axe vertical this.createEmptyMovieClip("img_mc", this.getNextHighestDepth()); img_mc.loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); for (i=0;i<5;i++) { duplicateMovieClip(img_mc, "newImg_mc"+i, this.getNextHighestDepth()); this["newImg_mc"+i].loadMovie("http://www.google.fr/intl/fr_fr/images/logo.gif"); this["newImg_mc"+i]._y = i*120; } Les clips et les profondeurs Attacher un clip: Cette fonction va dupliquer un clip contenu dans la bibliothèque. Le clip qui va être attaché à partir de la bibliothèque doit impérativement posséder un identifiant (il ne s’agit pas du nom) Pour cela, faites un clic droit sur le clip souhaité dans la bibliothèque et cliquez sur liaison. Les clips et les profondeurs Attacher un clip: La méthode à utiliser pour attacher le clip sur la scène est la suivante : attachMovie( id:String, name:String, depth:Number); id : le nom avec lequel vous l’avez identifié dans la bibliothèque name : le nom que vous allez donner au clip depth : la profondeur du clip Exemple 1 : _root.attachMovie(‘clip_attache','nouveau_clip',1); nouveau_clip._x = 100; nouveau_clip._y = 100; Les clips et les profondeurs Attacher un clip: Exemple 2 : Duplique un clip à l’infini var i:Number=0; _root.onEnterFrame = function() { i++; // incrémente de 1 // attache le clip mon_clip et le nomme : nouveau_clip1; 2; 3; avec une profondeur égale a 1; 2… _root.attachMovie('mon_clip','nouveau_clip'+i,i); this["nouveau_clip"+i]._x = 0; // positionne chacque nouveau clip a x=0 this["nouveau_clip"+i]._y = 0 // positionne chacque nouveau clip a y=0 } Les clips et les profondeurs Attacher un clip: Exemple 3 : Rajoute une fonction Math.random Math.floor : Renvoi la valeur entière du nombre Math.random : Renvoi une valeur aléatoire entre 0 et 1 //créer un fonction aléatoire function aleatoire(min:Number, max:Number):Number { var aleatoireNum:Number = Math.floor(Math.random() * (max ‐ min + 1)) + min; return aleatoireNum; } Les clips et les profondeurs Supprimer un clip : La méthode pour supprimer un clip est simple, il suffit d’utiliser la méthode : removeMovieClip(target:Object) target : nom du clip Exemple 1 : removeMovieClip(nouveau_clip); nouveau_clip.removeMovieClip(); Les clips et les profondeurs Supprimer un clip : On peut également utiliser la méthode : getInstanceAtDepth(profondeur) Exemple 2 : _root.attachMovie("mon_clip","nouveau_clip2",100); btn.onRelease = function (){ _root.getInstanceAtDepth(100).removeMovieClip(); } Les clips et les profondeurs Exercice: ‐ Créer un clip dans votre bibliothèque et donné lui un nom de liaison. ‐ Dupliquer ce clip à l’infini ‐ Créer une fonction aléatoire () qui retourne un nombre entre 0 et 500 ‐ Déplacer le clip de 5px sur l’axe y à l’infini ‐ Supprimer le clip s’il sort de la scène ‐‐‐‐‐‐‐‐=> Simuler une chute de pluie Les clips et les profondeurs var i:Number=0; _root.onEnterFrame = function() { i++; var n:Number = aleatoire(0, 500); // créé un nombre aléatoire entre 0 et 500 _root.attachMovie('mon_clip','nouveau_clip'+i,i); this["nouveau_clip"+i]._x = n; this["nouveau_clip"+i]._y = 0 this["nouveau_clip"+i].onEnterFrame = function() { this._y+=5; // déplace le clip de 5px vers le bas if (this._y >=400) { this.removeMovieClip(); // supprime les clip s’ils dépacent les 400 px } } } function aleatoire(min:Number, max:Number):Number { var aleatoireNum:Number = Math.floor(Math.random() * (max ‐ min + 1)) + min; return aleatoireNum; } Couleurs des clips en AS Couleurs des clips en AS Colorer un clip : Pour colorer un clip, il faut utiliser certaines classes incorporées à Flash. En ce qui concerne les couleurs, il s’agit des classes colortransform et transform. L'une permet de créer la transformation de la couleur, et l'autre de l'appliquer au clip. Afin utiliser les classes colortransform et transform incrustées dans le logiciel Flash, il faut se servir de « l’import » : L’écriture des couleurs en Action Script se fait en hexadécimale (comme en HTML). La seule différence en Flash, c’est que le caractère qui précède les chiffres hexadécimaux est 0x au lieu de # en HTML import flash.geom.ColorTransform; import flash.geom.Transform; Couleurs des clips en AS Colorer un clip : L’écriture d’une couleur en flash se fait donc de la manière suivante : Maintenant voila le code pour enregistrer une couleur dans une variable 0x Rouge Vert Bleu Rouge : 0x uploads/s3/ cours-2.pdf