4. LE MODELE OBJET
D'UN DOCUMENT FLASH
 
 
Précédent Suivant
 
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);
 
 
Copyright (c) 1999-2016 - Bruno Bachelet - bruno@nawouak.net - http://www.nawouak.net
La permission est accordée de copier, distribuer et/ou modifier ce document sous les termes de la licence GNU Free Documentation License, Version 1.1 ou toute version ultérieure publiée par la fondation Free Software Foundation. Voir cette licence pour plus de détails (http://www.gnu.org).