Flash : deuxième séance Yannick Bresson Alessandro Camozzato Tien-Quang Tong 22/10/07

Flash permet de créer facilement des animations interactives applicables pour la création de pages Web mais également des jeux Il nous donne ainsi l’occasion d’apporter de l’interactivité. Visualisation des images à charger en mode continu : l'application est lancée sans avoir effectué le complet download Les avantage de Flash

ActionScript  Qu’est-ce que l’ActionScript ? ActionScript est le langage de programmation d'Adobe Flash Player il joue un rôle essentiel pour la dynamique de l’animation mais aussi Il rend possibles l'interactivité, la gestion des données et beaucoup d'autres opérations relatives au contenu et aux applications Flash.  A quoi sert l’ActionScript ? Gérer des actions ( la position, le mouvement, la répétitivité de mouvements etc... ), des animations des objets (clips) et de la scène Contrôler la tête de lecture (timeline) Lire des sons ou des vidéos Gérer les événements souris et clavier.

Où placer le code ActionScript ?

 Sur l’occurrence d’un clip : onClipEvent (onEnterFrame) { ligne(s) d'instruction(s); }  Sur l’occurrence d’un bouton : on(press) (on(release)) { ligne(s) d'instruction(s); }  Sur une image clé : Une méthode fréquemment utilisée consiste à placer le code sur un calque prévu à cet effet. Il faut alors nommer les occurrences afin de pouvoir les appeler dans ce script.

Attention : Nommez vos occurrences ! On peut, après cela, appeler nos occurrences dans un script que l’on placera dans un calque à part : gauche.onPress=function(){ ligne(s) d’instruction(s); };

Navigation: Les principales Commandes  stop(); Avec cette commande, il est possible d’effectuer l’ arrêt d'un mouvement à une certaine étape de la timeline pour indiquer la fin de la scène, d’une action.  play(); Cette commande nous permet de décider de faire partir l'action désirée.  Se déplacer dans la timeline:

 gotoAndStop (x) Cette commande est différente du simple ’stop’ parce qu‘elle nous permet d'arrêter l'action dans la timeline à une valeur choisie.  gotoAndPlay (x) Cette commande permet d’aller à l’image x et de jouer l’action à partir de celle-ci. Navigation: Les principales Commandes

 gotoAndPlay(s,x); Cette instruction est utile lorsque l’on travaille avec plusieurs séquences, en effet elle permet dans une séquence "s" de faire un gotoAndPlay à partir de l’image "x".  Se déplacer entre les séquences : Navigation: Les principales Commandes

 getURL (" " _blank"); Permet de créer une liaison avec une page internet  this.loadMovie(“nomfile.swf"); Possibilité de liaison à une autre animation Navigation: Les principales Commandes  Se déplacer hors de l’animation :

Gestionnaire d’événements  Sur l’occurrence d’un clip : onClipEvent (onLoad) { Actions réalisées au simple chargement du clip; } onClipEvent (onEnterFrame) { Actions réalisées à chaque image du clip; }  Sur l’occurrence d’un bouton : on (press){ Actions réalisées si le bouton est cliqué; } on (release){ Actions réalisées si le bouton est relâché; } on (rollOver){ Actions réalisées si le pointeur passe sur le bouton; }

Exercice 1 : Navigation, mise en oeuvre Présentation des commandes de base à travers de simples exemples  Créer un symbole et lui faire suivre un parcours pré- établi (rappel séance 1).  Créer des boutons play, stop, pause, et un de départ de séquence imposé sur l’animation à partir des instructions de navigation précédemment citées (stop, play…) Possibilité de liaison à page internet  Insérer une touche additionnelle, aussi de librairie, pour donner à ceci je commande getURL (" "_ blank"); pour la liaison à une page internet

Possibilité de liaison à d’autres séquence s  Créer une nouvelle séquence ;  Aller sur la première séquence créée : on passe à la deuxième séquence grâce à la commande gotoAndPlay (“s”, x) ;  Ajouter un bouton auquel donner le commande this.loadMovie(“nomfile.swf"); pour se relier à l'animation flash voulue. Exercice 1 : Navigation, mise en oeuvre

Rappel : 3 types de texte !  Texte statique  Texte de saisie exemple : champ pour un formulaire  Texte dynamique il peut prendre plusieurs valeurs Il peut être déplacé comme un générique par exemple  Définir l’occurrence et la variable !

Programmer avec ActionScript: Déclaration des variables  Variables locales : Déclarées dans une fonction par exemple var age=21;  Variables globales : Déclarées pour toute l’application _global.age=21;

Programmer avec ActionScript: Structure conditionnelle  if (condition à tester) { ligne(s) d’instruction(s); } else {ligne(s) d’instruction(s); }  switch (variable) { case "valeur1delacondition " : // instructions; break; case "valeur2delacondition" : // instructions; break; case "valeur3delacondition" : // instructions; break; default : // instructions; break; }

Programmer avec ActionScript: Structure itérative (les boucles)  for(i=0; i<x; i++){ ligne(s) d’instruction(s); } Effectue x fois les instructions while (i<x){ ligne(s) d’instruction(s); } Effectue les instructions tant que la condition est vraie.

Programmer avec ActionScript: Principaux opérateurs a ++ Incrémentation a -- Décrémentation a && bAND logique a || bOR logique 2 * 4Multiplication 6 / 2Division 2 < 3Inférieur à 3 <= 3Inférieur ou égal à a = 4 Affectation (pour une variable ou dans une instruction) a == 4Égalité ( teste l’égalité. On l’utilise pour if par exemple) 3 != AInégalité

Exercice 2 : Jeu de fléchettes  Créer les symboles de cible, de fléchette et le cadre de jeu.  Créer un drag&drop sur la fléchette flechette.onPress = function() { this.startDrag(true);} flechette.onRelease = function() { this.stopDrag(); checkTarget(this);}  Gérer la zone et les options du drag&drop

Exercice 2 : Jeu de fléchettes  Rendre la cible mouvante, gérer le contact entre des symboles ( nom1.hitTest(nom2) )  Déclarer et gérer un son var son:Sound = new Sound(); son.attachSound("ressort.wav"); son.start();

Hiérarchie des objets  On peut désigner les objets selon leur chemin relatif ou absolu : _root.clip1._x désignera l’abscisse du clip1, peu importe où se trouve le code. Il s’agit d’un chemin absolu. this._x désignera l’abscisse de l’objet dans lequel le code est écrit. C’est donc un chemin relatif. _parent._x désignera l’abscisse de l’objet parent à l’objet dans lequel le code est écrit. C’est donc un chemin relatif. Exemple : dans le schéma suivant, _parent._x écrit dans le code du clip31 désignera l’abscisse du clip3 !

Hiérarchie des objets _root clip1clip3clip2 clip21clip31 >scène principale >clips imbriqués dans la scène >clips imbriqués dans d’autres clips

Exercice 3 : Texte scrollable   Créer un nouveau fichier Flash  Créer deux boutons haut et bas (mode: button)  Créer une zone de texte (outil texte A )et son contenu (texte statique)  Créer un clip Controller

Exercice 3 : Texte scrollable  Créer les 6 calques suivants:  Bouton haut  Components  Bouton bas  Actions  Masque  Texte  Ajouter ActionScript pour les boutons  Félicitations ;-)

Pour aller plus loin  Tutoriel drag &drop : _drop_in_Flash/  Tutoriel texte scrollable :  Pleins d’information sur Flash : En particulier sur les opérateurs: