Concepts fondamentaux de la programmation de l'affichage



Introduction à la programmation de l'affichage

Chaque application créée par le biais d'ActionScript 3.0 possède une hiérarchie d'objets d'affichage appelée liste d'affichage, comme l'indique l'illustration ci-dessous. La liste d'affichage contient tous les éléments visibles de l'application.

<Hiérarchie de la liste d'affichage>

Comme le montre cette illustration, les éléments d'affichage se rangent dans un ou plusieurs groupes suivants :

  • Scène

    La scène constitue le conteneur de base des objets d'affichage. Chaque application comporte un objet Stage, qui contient tous les objets d'affichage à l'écran. La scène correspond au conteneur de plus haut niveau et domine la hiérarchie de la liste d'affichage :

    Chaque fichier SWF est associé à une classe ActionScript, appelée classe principale du fichier SWF. Lorsqu'un fichier SWF s'ouvre dans Flash Player ou Adobe AIR, Flash Player ou AIR appelle la fonction constructeur correspondant à la classe et l'occurrence créée (systématiquement un type d'objet d'affichage) est ajoutée en tant qu'enfant de l'objet Stage. La classe principale d'un fichier SWF étend systématiquement la classe Sprite (pour plus d'informations, consultez la section Avantages de l'utilisation de la liste d'affichage).

    Vous pouvez accéder à la scène via la propriété stage de toute occurrence de DisplayObject. Pour plus d'informations, consultez la section Définition des propriétés de la scène.

  • Objets d'affichage

    Dans ActionScript 3.0, tous les éléments qui apparaissent à l'écran dans une application sont des types d'objets d'affichage. Le package flash.display comprend une classe DisplayObject, qui correspond à une classe de base étendue par diverses autres classes. Ces autres classes représentent divers types d'objets d'affichage, tels que les formes vectorielles, les clips et les champs de texte, pour n'en citer que quelques-uns. Pour une présentation de ces classes, consultez la section Avantages de l'utilisation de la liste d'affichage.

  • Conteneurs d'objets d'affichage

    Les conteneurs d'objets d'affichage sont des types spéciaux d'objets d'affichage qui, outre leur propre représentation visuelle, peuvent également comporter des objets enfant qui sont aussi des objets d'affichage.

    La classe DisplayObjectContainer est une sous-classe de la classe DisplayObject. Un objet DisplayObjectContainer peut contenir plusieurs objets d'affichage dans la liste d'enfants correspondante. Par exemple, l'illustration suivante contient un type d'objet DisplayObjectContainer appelé Sprite qui comporte divers objets d'affichage :

    <Sprite contenant des objets d'affichage>

    A.
    Objet SimpleButton. Ce type d'objet d'affichage possède des états « up », « down » et « over ».

    B.
    Objet Bitmap. Dans ce cas de figure, l'objet Bitmap a été chargé à partir d'un JPEG externe via un objet Loader.

    C.
    Objet Shape. Le « cadre d'image » contient un rectangle arrondi dessiné dans ActionScript. Un filtre Ombre portée est appliqué à cet objet Shape.

    D.
    Objet TextField.

    Dans le contexte des objets d'affichage, les objets DisplayObjectContainer portent également le nom de conteneurs d'objets d'affichage voire, tout simplement, de conteneurs. Comme indiqué précédemment, la scène est un conteneur d'objets d'affichage.

    Bien que tous les objets d'affichage visibles héritent leurs caractéristiques de la classe DisplayObject, le type de chacun d'eux correspond à une sous-classe déterminée de la classe DisplayObject. Il existe, par exemple, une fonction constructeur associée à la classe Shape ou à la classe Video, mais aucune fonction constructeur pour la classe DisplayObject.

Tâches courantes de programmation de l'affichage

Puisque la majeure partie de la programmation ActionScript implique de créer et manipuler des éléments visuels, un grand nombre de tâches se rapportent à la programmation de l'affichage. Ce chapitre décrit les tâches communes relatives à tous les objets d'affichage, notamment :

  • Utilisation de la liste d'affichage et des conteneurs d'objets d'affichage

    • Ajout d'objets d'affichage à la liste d'affichage

    • Suppression d'objets de la liste d'affichage

    • Transfert d'objets entre les conteneurs d'objets d'affichage

    • Déplacement d'objets devant ou derrière d'autres objets

  • Utilisation de la scène

    • Définition de la cadence

    • Contrôle de la mise à l'échelle de la scène

    • Utilisation du mode plein écran

  • Manipulation des événements associés aux objets d'affichage

  • Positionnement des objets d'affichage, notamment la création d'une interaction glisser-déposer

  • Redimensionnement, mise à l'échelle et rotation d'un objet d'affichage

  • Application de modes de fondu, de transformations de couleur et de transparence aux objets d'affichage

  • Masquage des objets d'affichage

  • Animation des objets d'affichage

  • Chargement d'un contenu d'affichage externe (tel que des fichiers SWF ou des images)

Dans la suite de ce manuel, divers chapitres décrivent d'autres tâches de manipulation des objets d'affichage. Ces dernières concernent à la fois les tâches associées à tout objet d'affichage et les tâches réservées à des types déterminés d'objets d'affichage :

Concepts importants et terminologie

La liste de référence suivante énumère les termes importants que vous rencontrerez dans ce chapitre :

  • Alpha : valeur colorimétrique représentant le montant de transparence (ou, plus précisément, le montant d'opacité) d'une couleur. Ainsi, une couleur dotée d'une valeur de canal alpha de 60 % n'affiche que 60 % de son intensité totale et est transparente à 40 %.

  • Graphique bitmap : graphique défini en termes informatiques sous forme de grille (lignes et colonnes) de pixels de couleur. Les exemples courants de graphiques bitmap incluent les photos numériques et images similaires.

  • Mode de mélange : indique l'interaction requise du contenu de deux images qui se chevauchent. En règle générale, une image opaque superposée à une autre image se contente de bloquer l'image placée sous elle, qui est donc totalement invisible. Toutefois, divers modes de mélange entraînent le mélange des couleurs de diverses façons de sorte que le résultat corresponde à une combinaison des deux images.

  • Liste d'affichage : hiérarchie des objets d'affichage rendus sous forme de contenu visible à l'écran par Flash Player et AIR. La scène correspond à la racine de la liste d'affichage et tous les objets d'affichage associés à la scène ou à l'un de ses enfants composent la liste d'affichage (même si l'objet n'est pas à proprement parler rendu, parce qu'il réside en dehors de la scène, par exemple).

  • Objet d'affichage : objet représentant un type de contenu visuel dans Flash Player ou AIR. La liste d'affichage ne contient que des objets d'affichage et toutes les classes d'objets d'affichage sont des sous-classes de la classe DisplayObject.

  • Conteneur d'objet d'affichage : type spécial d'objet d'affichage qui, outre (généralement) sa propre représentation visuelle, peut comporter des objets d'affichage enfant.

  • Classe principale du fichier SWF : classe qui définit le comportement de l'objet d'affichage de plus haut niveau d'un fichier SWF, soit, fondamentalement, la classe associée au fichier SWF en tant que tel. Ainsi, un fichier SWF créé dans l'outil de programmation Flash possède un « scénario principal » qui intègre tous les autres scénarios. La classe principale du fichier SWF correspond à la classe dont le scénario principal est une occurrence.

  • Masquage : technique consistant à ne pas afficher certaines parties d'une image (ou, à l'inverse, à n'afficher que certaines parties d'une image). Les sections de l'image masque deviennent transparentes, afin d'assurer la visibilité du contenu sous-jacent. Ce terme se réfère à la bande utilisée par un peintre en bâtiment pour empêcher la peinture d'être appliquée à certaines sections.

  • Scène : conteneur visuel correspondant à la base ou à l'arrière-plan de tout contenu visuel dans un fichier SWF.

  • Transformation : modification des caractéristiques visuelles d'un graphique (rotation de l'objet, modification de son échelle, désalignement, déformation ou altération de sa couleur).

  • Graphique vectoriel : graphique défini en termes informatiques par des lignes et des formes dessinées en fonction de caractéristiques déterminées (épaisseur, longueur, taille, angle et position, par exemple).

Utilisation des exemples fournis dans ce chapitre

Au fur et à mesure que vous avancez dans ce chapitre, vous pouvez tester ses exemples de code. Ce chapitre étant consacré à la création et à la manipulation de contenu visuel, pratiquement tous les exemples de code qu'il contient créent des objets visuels et les affichent à l'écran. A l'encontre des chapitres précédents, tester un exemple de code implique de visualiser le résultat dans Flash Player ou AIR plutôt que d'afficher des valeurs de variable. Pour tester les codes de ce chapitre :

  1. Créez un document vide à l'aide de l'outil de programmation Flash.

  2. Sélectionnez une image-clé dans le scénario.

  3. Ouvrez le panneau Actions et copiez le code dans le panneau Script.

  4. Exécutez le programme en sélectionnant Contrôle > Tester l'animation.

    Le résultat du code s'affiche à l'écran et tout appel de la fonction trace() apparaît dans le panneau Sortie.

Ces techniques de test d'exemples de code sont décrites de manière plus détaillée dans Test des exemples de code contenus dans un chapitre.