Cours 1

Flash : Action Script 2.0 Cours 1 : Les bases de l’Action Script

DUT Services et réseaux de  communication

Cours de CARTEAU Nicolas

Sommaire 1. 2. 3. 4. 5. 6. 7. 8. 9.

Les variables Les opérateurs mathématiques La fonction « trace » Les clips Les opérateurs tests Les conditions Les boucles Les fonctions Les évènements

Les variables

Les variables L’action Script 2.0 repose sur la gestion des variables (numériques, textuelles,  graphiques, …) En AS 2.0, il est fortement conseillé de déclarer les variables

Voilà comment on déclare une variable :  var ma_var : type = résultat ;

Aux majuscules, minuscules, points virgules.

Les variables Les types de Variables :  Number : pour les nombres var mon_nombre:Number = 1; String : pour les chaines de caractère var ma_chaine:String = « Coucou »; Array : pour les tableaux var mon_tableau:Array = new Array("a", "b", "c"); Booléen : pour les choix à 2 possibilités var mon_bool:Boolean = true;

Les variables Variables de type « Number » : Exemple 1 :  var mon_nombre:Number = 10;        // On déclare mon_nombre avec la valeur 10 mon_nombre = mon_nombre + 5;    // On rajoute 5 à la variable => 15 mon_nombre=10; // On remet la variable à 10  mon_nombre = mon_nombre ‐ 5; // On enlève 5 à la variable => 5 mon_nombre = mon_nombre * 10 ; // On multiplie par 10 => 50  mon_nombre = mon_nombre / 5 ;    //On divise par 5 => 10

Les espaces entre les variables, le égal et le nombre ne sont pas importante 

Les variables Variables de type « String » : Exemple 1 :  var ma_chaine:String = « Salut »; ma_chaine = « Salut » + « les SRC »; // Ce qui donne "Salut les SRC" Exemple 2 :  var ma_chaine:String = « Salut les /"SRC/"»; // Ce qui donne "Salut les « SRC »"

Afin de rajouter des guillemets dans les chaines de caractère, il faut utiliser le « / »

Les variables Variables de type « Array » : Exemple 1 :  var mon_tableau:Array = new Array("a", "b", "c");  var ma_chaine:String = mon_tableau[1]; // Ce qui donne : ma_chaine = b Exemple 2 :  var mon_tableau:Array = new Array("a", "b", "c");  var mon_nombre:Number = mon_tableau.length; // Ce qui donne : mon_nombre =  3

Les variables Variables de type « Booléen » : En Booléen, il n’existe que 2 choix : ‐ true => qui est égale à 1 ‐ false => qui est égale à 0 Exemple 1 :  var mon_bool:Boolean = true;               // renvoie la valeur true ou 1 mon_bool = false;                                    // renvoie la valeur false ou 0   Exemple 2 : var mon_bool:Boolean = true;                                         // renvoie la valeur true ou 1 var mon_bool2:Boolean = true;                                       // renvoie la valeur true ou 1 var total:Number = mon_bool + mon_bool2 ;               // renvoie 2 Il est interdit de marquer « mon_bool = 1 » ou 0

Les opérateurs mathématiques Récapitulatif des opérateurs les plus utilisés: 

La fonction « trace » La fonction trace() : Cette fonction est surement une des plus importantes de Flash. Elle permet de vérifier  et de débuguer les scripts.  Exemple :  var resultat:Number = 5 + 5;  trace("Le résultat est : "+resultat);            //Affiche 10 

Cette fonction affiche le résultat dans l’onglet « sortie »

Les clips

Les clips

Nommer les clips qui vont être affecter par du code Action  Script en cliquant dessus et en remplaçant le texte  dans les propriétés du clip

Les clips Le ciblage des clips :  _global => fait référence à un clip n’importe ou dans l’architecture _level => fait référence à un clip en rapport avec la hauteur de son level _parent => fait référence au clip « parent »   _root => fait référence à la scène this => fait référence au clip sélectionné + la fonction « target »

Les clips Le ciblage des clips : _parent Ce type de ciblage revoie au clip parent. (très utilisé) 

Exemple :  _parent.gotoAndPlay(1); Attention, il n’existe pas de niveau en dessous de _root (la scène).

Les clips Le ciblage des clips : _root Ce type de ciblage revoie à la racine du fichier swf. Il est déconseillé de l’utiliser  puisque cela revient à spécifier un chemin absolu. Exemple :  _root.stop();  // arrête l’animation

Les clips Le ciblage des clips : this Ce type de ciblage permet de préciser au compilateur que nous travaillons sur l'objet  qui contient le script. Exemple :  this.createTextField("counter_txt", this.getNextHighestDepth(), 0, 0, 100, 22);

Les clips Le ciblage des clips : _level Ce type de ciblage est utilisé pour les importations de fichier ou clip sur la scène. Il  permet d’accéder directement au clip souhaité grâce à sa hauteur (level). Exemple :  loadMovieNum(“test.swf", 9);  _level9.stop(); 

Les clips Le ciblage des clips : _global Ce type de ciblage est utilisé pour des variables qui serviront de nombreuses fois à  n’importe quels niveaux (_level) du fichier swf. Ce type de ciblage permet d’accéder  rapidement à une variable sans la rechercher ou à écrire plusieurs (_parent). Exemple :  _global.ma_Var = "global_Variable";  trace(_global.ma_Var);                                       // affiche : global_Variable trace(ma_Var);                                                     // affiche : global_Variable ma_Var = "local_Variable";  trace(_global.ma_Var);                                       // affiche : global_Variable trace(ma_Var);                                                     // affiche : local_Variable

Les clips Le ciblage des clips : _target La fonction _target s’utilise souvent dans la fonction trace. Elle renvoie le chemin ciblé  d’un clip choisi.  Exemple :  trace(my_btn._target);                                    // Affiche :  /my_btn Exemple 2 :  Admettons que le bouton ce situe dans un clip nommé « menu » trace(my_btn._target);                                    // Affiche :  /menu/my_btn

Les clips Les propriétés des clips : En Action Script, chaque clip nommé possède de très nombreuses propriétés.  Exemple de propriété : ‐ positionnement (x et y) ‐ taille (height et width) ‐ étirement (xscale et yscale) ‐ rotation (rotation) ‐ transparence (alpha) ‐ visibilité (true et false)

Les clips Le positionnement des clips : En Action Script le positionnement se fait à partir du coin (haut gauche) de l’écran. La  propriété « x » correspond à l’axe horizontal et « y » à l’axe vertical. Exemple : On créer un clip nommé « mon_clip » que l’on place sur la scène  mon_clip._x=50;  // déplace le clip de 50 pixels vers la droite mon_clip._y=100;  // déplace le clip de 100 pixels vers le bas Attention, ne pas oublier le « _ » sinon, on définit une coordonnée sans déplacer  l’objet.  mon_clip.k=50;  // définie la coordonée k à 50

Les clips Le positionnement des clips : Exemple 2 :  On crée un clip à l’intérieur d’un autre clip nommé « mon_clip_2 » mon_clip._x=50;                            // déplace les clips de 50 pixels vers la droite mon_clip._y=100;                         // déplace les clips de 100 pixels vers le bas mon_clip. mon_clip_2._x = 25;  // ajoute 25 px vers la droite au 2eme clip mon_clip. mon_clip_2._y = 50;  // ajoute 50 px vers la bas  au 2eme clip

Les clips La taille des clips : Les clips possèdent aussi les propriétés _width et _height. Ces propriétés permettent  d'indiquer la hauteur et la largeur des clips en pixels.  Exemple  : mon_clip._width = 300; mon_clip._height = 100;

// Largeur de mon_clip : 300px  // Hauteur de mon_clip : 100px

Les clips La rotation des clips : Les clips ont également une propriété de rotation. En Action Script, les rotations  s’expriment en degré, et vont de ‐180° à +180°.  La rotation s’effectue autour du point  d’ancrage du clip. Exemple  : mon_clip._rotation = 180 ;         // Retourne complétement mon_clip mon_clip._rotation = 90 ; // Tourne mon_clip vers la droite mon_clip._rotation = ‐90 ; // Tourne mon_clip vers la gauche mon_clip._rotation = 45 ; // Tourne mon_clip en biais vers la droite

Les clips La rotation des clips : Exemple  : Dans ce 2eme exemple, on va faire une rotation du clip par rapport à un autre clip  nommé cible. clip1._rotation = Math.atan2 (clip2._y‐clip1._y, clip2._x‐clip1._x) / (Math.PI/180);

• clip2._y‐clip1._y              =>     distance vertical entre les 2 clips • clip2._x‐clip1._x              =>     distance horizontal entre les 2 clips • Math.atan2 =>     fonction permettant de renvoyer l’angle en radian • Math.PI/180 =>      astuce permettant de renvoyer l’angle en degré

Les clips La transparence des clips : Le logiciel Flash est très souvent utilisé pour ses effets visuels dynamiques. La  transparence (_alpha) est l’un des plus pratique. Exemple :  mon_clip._alpha = 100;  // le clip est visible mon_clip._alpha = 50;    // le clip est à moitié transparent mon_clip._alpha = 0;      // le clip est invisible

mon_clip._alpla = 0; ne signifie pas que le clip est supprimé

Les clips La visibilité des clips : La propriété _visible permet d’activer ou de désactiver un clip.  On peut lui assigner que 2 valeurs : true (visible) ou false (invisible). Exemple :   mon_clip._visible = false; mon_clip._visible = true;

//Le clip sera invisible //Le clip sera visible

Les opérateurs tests Les opérateurs les plus courants: ‐ Est égal à ……………………….. ==  ‐ N’est pas égal à ……………… != ‐ Plus petit que ………………… < ‐ Plus grand que ………………. > ‐ Plus petit ou égal à ……….. <= ‐ Plus grand ou égal à ………. >= ‐ Strictement égal ……………. === ‐ Strictement inégal………….. !==      

L’opérateur Opposé ……………….. ! L’opérateur ET…………………………. && L’opérateur OU……………………….. ||

Les conditions

Les conditions Les conditions utilisées en Flash: ‐ IF  ‐ IF ELSE ‐ IF ELSE IF ‐ SWITCH

Les conditions La condition IF : La fonction if (si) s’effectue de la manière suivante :  if (condition) { // Action  effectuer si la condition est remplie } Exemple 1 : if (50<100) { trace("en effet, 50 plus petit que 100");  }

Les conditions La condition IF ELSE : La fonction if else (si sinon) s’effectue de la manière suivante : if (condition) {  // Action  effectuée si la condition est remplie } else { // Action effectuée si la condition n’est pas remplie }  Exemple 1 : if (50>100) { trace(« la condition était vraie »);  } else {  trace (« la condition était fausse »);  }

Les conditions La condition IF ELSE IF : La fonction if else if (si sinon si) s’effectue toujours de la manière. Exemple 1 : var mon_nombre:Number = 2;  if (mon_nombre==0) {  trace("mon_nombre vaut 0");  } else if (mon_nombre==1) { trace("mon_nombre vaut 1");  } else if (mon_nombre==2) { trace("mon_nombre vaut 2");  } else {  trace("je sais pas ce que vaut mon_nombre");  }

Les conditions La condition SWITCH : La fonction switch (bascule) simplifie la répétition de if else if. Exemple 1 : var mon_nombre:Number = 6; switch (mon_nombre) {  case 0 : trace(“mon_nombre vaut 0”);           // s’affiche si le mon_nombre vaut 0 break; case 1 : trace(“mon_nombre vaut 1”);           // s’affiche si le mon_nombre vaut 1 break; case 2 : trace(“mon_nombre vaut 2”);           // s’affiche si le mon_nombre vaut 2 break; default : trace(“je sais pas ce que vaut mon_nombre”);  //Valeur par défaut } 

Les conditions La condition SWITCH : Exemple 2 : var les_mois:Number = new Date().getMonth();  switch (les_mois) {  case 0 : trace(“Janvier");  break; case 1 : trace(“Fevrier"); break; case 5 : case 6 : case 7 : trace(“les mois d’été"); break;  case 8 : trace(“Septembre");  break;  default : trace(“les autres mois");  } 

Les boucles Les boucles utilisées en Flash : Les boucles servent à répéter une partie du code Voici les 2 boucles utilisées dans Flash :  ‐ WHILE ‐ FOR

Les boucles La boucle While (Tant que) : La boucle while s’effectue de la manière suivante :  while (condition) { // instruction  à effectuer  } Tant que la condition est remplie, Flash ré‐exécutera le code à l'intérieur de la boucle.  Exemple 1 :  while(mon_nombre > 0) { // Tant que mon_nombre est strictement plus grand que 0           mon_nombre‐‐; // On décrémente la variable (on soustrait 1 )  * trace(mon_nombre); // On affiche la valeur de nom_nombre } Attention à ne pas faire de boucle infinie ex : while(true){….. }

Les boucles La boucle For (Pour) : La boucle For s’effectue de la manière suivante :  for (initialisation ; conditions ; transition) { // instruction à effectuer  } Idem :  Tant que la condition est remplie, Flash ré‐exécutera le code à l'intérieur de la  boucle.  Exemple 1 :  for (var mon_nombre:Number = 1; mon_nombre<=10; mon_nombre++) { trace(mon_nombre);            // affiche 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 } Idem : Attention à ne pas faire de boucle infinie

Les fonctions

Les fonctions Comment déclarer une fonction: Le but d'une fonction est de pouvoir exécuter une certaine tâche à chaque fois qu'on  l'appelle. Il existe 2 manière d’écrire une fonction :  function ma_fonction() { trace(“………….”); } ma_fonction = function () { trace(“…………”); }

Les fonctions Comment déclarer une fonction: Afin d’exécuter le code d’une fonction, il faut l’appeler  : ma_fonction() ;

Exemple de fonction :  function mafonction() { for (i=0; i<500; i++) { trace(‘salut'); } }  mafonction();

Les fonctions L’utilisation des fonctions avec des arguments : Pour optimiser une fonction, il est intéressant de pouvoir lui passer des arguments ,  c'est‐à‐dire des variables qui vont influencer sur son fonctionnement. Exemple 1 :  function bonjour(qui:String) { trace('Bonjour '+qui);  }  bonjour('toi'); Exemple 2 :  function bonjour(prenom:String,nom:String) { trace('Bonjour '+prenom+' '+nom);  }  bonjour('Gérard',‘Durand');

Les fonctions L’utilisation des fonctions avec des retours : Et enfin, on peut retourner certaines valeurs à l’intérieur des fonctions  Exemple 1 :  function au_carre(nombre) { return nombre*nombre;  }  trace(au_carre(5));               // Affiche 25 Exemple 2 :  function pourcentage(valeur:Number,total:Number) { var pourcent = (valeur/total)*100; return pourcent+' %'; } trace(pourcentage(2500,50000));  // affiche 5%

Les évènements

Les évènements Les évènements  sur les boutons: Les événements sont des actions, tel un clic de souris de l'utilisateur ou la pression  d'une touche du clavier, qui se produisent dans votre animation. Quand l'utilisateur fera telle ou telle action, l'événement correspondant sera appelé  et le code associé sera exécuté. Voici la manière la plus simple d’appeler un événement :  monclip.mon_evenement = function () { trace ("événement appelé");  }

Les évènements Les types d’évènements :

Les évènements L’évènement « onPress » : Cet évènement se déclenche lors du clic gauche de la souris sur le clip.  (L’action se  déclenche au moment ou le bouton de la souris s’abaisse) Exemple 1 : mon_clip.onPress = function () { trace ("évènement appelé");  }

Les évènements L’évènement « onRelease » : Cet évènement se déclenche lorsque l’on relâche le bouton de la souris sur le clip. Il  est préférable de l'utiliser, puisqu’il laisse la possibilité d'annuler son choix, tout  simplement en gardant le bouton appuyé et en relâchant ailleurs. Exemple 1 : mon_clip.onRelease = function () { this._xscale=125;  }

Les évènements L’ évènement « onRelease Outside» : Cet évènement se déclenche lorsque le bouton de la souris est enfoncé sur le clip et  relâché en dehors du clip.  Exemple 1 : mon_clip.onReleaseOutside = function () { this._yscale=125;  }

Les évènements L’ évènement « onRollOver» : Cet évènement se déclenche lorsque la souris passe sur le clip. Il peut permettre par  exemple de changer l’aspect du clip Exemple 1 : mon_clip.onRollOver = function () { this._alpha=50; }

Les évènements L’ évènement « onRollOut» : Cet évènement se déclenche lorsque la souris sort du clip.  Exemple 1 :

mon_clip.onRollOver = function () { this._alpha=50; } mon_clip.onRollOut = function () { this._alpha=100; }

Les évènements mon_clip.onRollOver = function () { this._alpha=50; } mon_clip.onRollOut = function () { this._alpha=100; } mon_clip.onPress = function () { this._xscale=125;  this._yscale=125;  this._rotation = 10;  } mon_clip.onRelease = function () { this._xscale=100;  this._yscale=100;  this._rotation = 0;  } mon_clip.onReleaseOutside = function () { this._xscale=100;  this._yscale=100;  this._rotation = 0;  }

Les évènements Les évènements  de la souris : Ces évènements ne s’appliquent pas aux clips mais sur toute la scène.  Il en existe 3 :  ‐ onMouseDown ‐ onMouseUp ‐ onMouseMove

Les évènements L’évènement « onMouseDown» : Cet évènement se déclenche lorsque vous cliquez sur la souris n’importe ou sur la  scène.  Exemple 1 : mon_clip.onMouseDown = function () { trace ("Bouton de la souris enfoncé");  }

Les évènements L’évènement « onMouseUp» : Cet évènement se déclenche lorsque le bouton de la souris est relâché. Exemple 1 : mon_clip.onMouseUp = function () { trace ("Bouton de la souris relaché");  }

Les évènements L’évènement « onMouseMove» : Cet évènement se déclenche lorsque la souris se déplace (même si elle se déplace de  1px) Exemple 1 : mon_clip.onMouseMove = function (){ this._rotation = Math.atan2(_ymouse‐monclip._y, _xmouse‐ monclip._x)/(Math.PI/180); }

Les évènements L’évènement  « onEnterFrame »  : Cet évènement se déclenche de façon continue et constante selon la rapidité  d’exécution de votre animation (nombre d’images par seconde) . Exemple 1 : monclip.onEnterFrame = function() { this._x = _root._xmouse; this._y = _root._ymouse;  } Exemple 2 : monclip.onEnterFrame = function() { this._rotation ++;  }