Le modèle objet
d'un document Flash Classes intégrées à ActionScript * Dans ActionScript, des classes sont fournies par défaut * Classes fondamentales empruntées à ECMAScript * Constituent une couche de base * Aucun rapport direct avec Flash * Classes spécifiques à Flash * Contrôle d'un document Flash * Accès aux différents composants * Toutes ces classes sont rangées * Certaines sont disponibles directement * D'autres se trouvent dans des "packages" * Attention à la manière d'accéder aux membres d'une classe * Certains nécessitent un objet ==> membres d'instance * D'autres peuvent être utilisés directement ==> membres de classe Classes et packages * Un package est un ensemble de classes * Une classe = un fichier ActionScript (extension ".as") * Rectangle.as, Cercle.as... * Un package = un répertoire * Répertoire "forme" contenant "Rectangle.as" et "Cercle.as" * Utilisation d'une classe d'un package ==> importation * Importation d'une classe: import forme.Rectangle; * Importation de toutes les classes d'un package: import forme.*; * Convention de nommage: nom du package en minuscules * Certaines classes ActionScript sans package * Array, String, Math... * Les packages fournis dans ActionScript * flash.display: manipulation des clips * flash.events: gestion des événements * flash.external: communication avec le conteneur (page HTML) * flash.net: accès aux fichiers (client ou serveur) * ... Membres de classe (1/2) * Normalement, pour appeler une méthode, il faut un objet * Exemple: la classe "Pingouin" * Pingouin.danser() ==> aucun sens * Quel pingouin doit danser ? * var p : Pingouin = new Pingouin("Mumble"); * p.danser() ==> Mumble doit danser * La méthode "danser" est appelée "méthode d'instance" * Une instance (objet) est nécessaire pour l'exécuter * Il existe des méthodes où l'on n'a pas besoin d'une instance * Exemple: la méthode "random" de la classe "Math" * Cette méthode est appelée "méthode de classe" * On l'utilise de la manière suivante: Math.random() * Au passage: elle retourne un nombre au hasard entre 0 et 1 * Même chose pour les attributs * Accès au nom d'un pingouin: p.nom * Accès à la valeur de ?: Math.PI Membres de classe (2/2) * Pour déclarer un membre de classe: le mot-clé "static" * Exemple: compter les pingouins créés * public class Pingouin { protected static var compteur : int = 0; ==> attribut de classe protected var nom : String; ==> attribut d'instance public function Pingouin(n:String) { this.nom = n; compteur++; } public static function getCompteur() : int ==> méthode de classe { return compteur; } public function getNom() : String ==> méthode d'instance { return this.nom; } } * var p1 : Pingouin = new Pingouin("Mumble"); var p2 : Pingouin = new Pingouin("Gloria"); trace("Deux pingouins ont été créés: "); trace(p1.getNom() + " et " + p2.getNom()); trace("Nombre de pingouins: " + Pingouin.getCompteur()); Classes empruntées à ECMAScript * Les mêmes classes qu'en JavaScript * Array: représente un tableau * Boolean: représente une valeur booléenne * Date: représente une date * Number: représente un nombre * String: représente une chaîne de caractères * Math: contient des constantes et fonctions mathématiques * La classe "Object" représente tout objet ActionScript * Toutes les classes héritent de "Object" Classes spécifiques à Flash (1/2) * Des classes pour la création d'applications interactives * Button: représente un bouton sur une scène * ContextMenu: représente un menu contextuel sur un clip * Keyboard: permet des contrôles sur le clavier * Mouse: permet des contrôles sur la souris * MovieClip: représente un clip sur une scène * SharedObject: stockage de données entre deux visites * TextField: représente une zone de texte dynamique Classes spécifiques à Flash (2/2) * Des classes pour le multimédia * Camera: diffusion et enregistrement des images d'une caméra * Microphone: diffusion et enregistrement des sons d'un micro * NetConnection et NetStream: lecture d'un fichier vidéo * Sound: représente un son * Video: représente une vidéo * Des classes pour la communication client / serveur * URLVariables: échange de données avec un serveur * XML et XMLNode: lecture d'un fichier XML * XMLSocket: ouverture de "sockets" au format XML Exemple: menu contextuel (1/6) * Construction d'un menu contextuel * Création d'un menu * var monmenu : ContextMenu = new ContextMenu(); * Création d'un choix de menu * var item : ContextMenuItem = new ContextMenuItem("Mail"); * Ajout du choix dans le menu * monmenu.customItems.push(item); * Association du menu à un clip * monclip.contextMenu = monmenu; * Associer la sélection d'un choix du menu à une méthode * Notion d'"événement" * Association événement / méthode * item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, envoyer_mail); * La méthode associée reçoit l'événement * function envoyer_mail(e:ContextMenuEvent) { trace("Envoi !"); } Exemple: affichage d'une image (2/6) * Création d'un objet chargé de récupérer le fichier image * var loader : Loader = new Loader(); * Construction de l'URL du fichier * var url : URLRequest = new URLRequest("pingouin.jpg"); * Chargement du fichier * loader.load(url); * Insertion de l'image dans un clip * monclip.addChild(loader); Exemple: utilisation d'un cookie (3/6) * Un "cookie" permet de mémoriser des variables entre deux visites * Représenté par la classe "SharedObject" * Exemple: mémoriser le nom du visiteur dans la variable "visiteur" * Récupérer / créer un cookie * var cookie : SharedObject = SharedObject.getLocal("mon_cookie"); * Récupérer le contenu d'une variable si elle existe * if (cookie.data.visiteur) { trace("Bienvenue " + cookie.data.visiteur); } * Sinon renseigner cette variable * else { trace("Quel est votre nom ?"); ... cookie.data.visiteur = ...; } * Pour détruire un cookie * cookie.clear(); Exemple: zone de texte formatée (4/6) * Création d'une zone de texte * var texte : TextField = new TextField(); * Insertion du texte dans un clip * monclip.addChild(texte); * Possibilité d'afficher du HTML * texte.htmlText = "<B>mon texte en gras</B>"; * Accéder au code HTML * trace("HTML = " + texte.htmlText); * Résultat: HTML = <P ALIGN="LEFT"><FONT FACE="Times New Roman" SIZE="12" COLOR="#000000" KERNING="0"><B>mon texte en gras</B></FONT></P> * Accéder au texte seul * trace("texte = " + texte.text); * Résultat: texte = mon texte en gras * Pour modifier le style d'un texte: classe "TextFormat" Exemple: jouer un son (5/6) * Construction de l'URL du fichier son * var url : URLRequest = new URLRequest("papa_pingouin.mp3"); * Création d'un objet son et chargement du fichier * var musique : Sound = new Sound(url); * Pour jouer le son * musique.play(); * Pour arrêter le son * Récupérer le canal du son au lancement * var canal : SoundChannel = musique.play(); * Utiliser le canal pour arrêter le son * canal.stop(); Exemple: jouer une vidéo (6/6) * Création d'un objet vidéo et insertion dans un clip * var mavideo : Video = new Video(); * monclip.addChild(mavideo); * Etablir une connexion réseau sur laquelle passera le flux * var connexion : NetConnection = new NetConnection(); * connexion.connect(null); * Création d'un flux qui permet le contrôle de la vidéo * var flux : NetStream = new NetStream(connexion); * flux.client = new Object(); * Associer le flux à l'objet vidéo * mavideo.attachNetStream(flux); * Pour jouer la vidéo * flux.play("happy_feet.flv"); Occurrences et symboles (1/2) * Possibilité de créer des modèles (ou "symboles") * Clip: graphique animé * Bouton: graphique jouant le rôle de bouton * Graphique: graphique statique * A partir des symboles, création d'occurrences * Placement de copies sur la scène * Un nom peut être associé à chaque occurrence * L'occurrence devient l'attribut de la scène * scène.nom_occurrence * Un symbole peut être associé à une classe * Cette classe hérite de la classe du symbole associé * Clip = MovieClip * Bouton = Button * ... Occurrences et symboles (2/2) * Création d'un symbole * En partant de rien * Bibliothèque ? Nouveau symbole * A partir d'un graphique * Bouton droit ? Convertir en symbole * Lui donner un nom * 1ère lettre en majuscule (comme une classe): Carre * "Instanciations" du symbole * Création d'occurrences à partir du modèle * Glisser le symbole sur la scène * Leur donner un nom * 1ère lettre en minuscule (comme une variable): carre1 et carre2 * Possibilité de les contrôler par ActionScript * Dans la scène principale par exemple * this.carre1.x = 400; this.carre2.y = 100; Hiérarchie des clips * Document Flash = clip = objet "MovieClip" * Importation nécessaire pour utiliser la classe * import flash.display.*; * Contient aussi des clips * Organisation hiérarchique des clips * Accès aux enfants d'un clip par leur nom * clip.nom_enfant * Accès au parent d'un clip * clip.parent * Connaître le nom d'un clip * clip.name Classe "MovieClip": aspect * x et y: coordonnées du point de référence du clip * width et height: largeur et hauteur du clip * scaleX et scaleY: coefficient de zoom du clip en largeur et hauteur * alpha: coefficient d'opacité du clip * rotation: angle de rotation (en degrés) du clip * visible: indique si le clip est visible * getRect(null): retourne les dimensions du clip * Retourne un objet décrivant le rectangle englobant le clip * Attributs x et y: coordonnée supérieure gauche * Attributs width et height: largeur et hauteur * Informations données par rapport au point de référence du clip Classe "MovieClip": animation (1/2) * Un "MovieClip" est une animation * Possède une scène: zone où tracer l'animation * Possède un scénario: enchaînement d'images ("frames") * Chaque clip est placé sur un plan différent de la scène * Les clips sont numérotés * Dans l'ordre d'ajout dans la scène, à partir de 0 * Plus le numéro est important, plus le clip est au devant de la scène * Connaître le plan d'un clip * var plan : int = scène.getChildIndex(clip); * Connaître le clip présent sur un plan * var clip : MovieClip = scène.getChildAt(plan); * Modifier le plan d'un clip * scène.setChildIndex(clip,plan); * Les éléments peuvent être placés sur des calques différents * Facilite la manipulation des éléments dans Flash * Utiles pour contrôler leur déplacement / déformation avec Flash * Sur un même calque, les éléments ont aussi un plan différent * Les calques ne sont pas perçus en ActionScript Classe "MovieClip": animation (2/2) * Comportement par défaut d'un scénario * Au chargement, démarrage de la lecture * Après la dernière image, retour à la première image * play(): démarre la lecture sur l'image courante * stop(): arrête la lecture sur l'image courante * gotoAndPlay(x): démarre la lecture à l'image numéro x * gotoAndStop(x): se place et s'arrête sur l'image numéro x * nextFrame() / prevFrame(): se place sur l'image suivante / précédente * currentFrame: numéro de l'image actuellement lue * totalFrames: nombre total d'images dans le scénario Classe "MovieClip": dessin (1/2) * Principe pour tracer un dessin dans un clip * Récupérer le "pinceau" (appelé "contexte graphique") * var p : Graphics = clip.graphics; * Positionner le pinceau * p.moveTo(x,y); * Tracer un trait entre l'ancienne position du pinceau et la nouvelle * p.lineTo(x,y); * Exemple d'un rectangle p.moveTo(x,y); p.lineTo(x+largeur,y); p.lineTo(x+largeur,y+hauteur); p.lineTo(x,y+hauteur); p.lineTo(x,y); * Pour définir une forme pleine, englober le code du tracé * p.beginFill(couleur,alpha); // Code du tracé de la forme p.endFill(); Classe "MovieClip": dessin (2/2) * Définir le style du tracé * p.lineStyle(épaisseur,couleur,alpha); * Remplissage en dégradé * p.beginGradientFill(...); * Tracé de ligne en dégradé * p.lineGradientStyle(...); * Effacer le contenu d'un clip * p.clear(); * Tracer une courbe: curveTo * Premier point = point de contrôle * Second point = destination de la courbe * p.moveTo(50,50); p.curveTo(150,75,250,50); p.curveTo(225,150,250,250); p.curveTo(150,225,50,250); p.curveTo(75,150,50,50);
|
||||||||||||||||
