Exemple d’utilisation de l’API de dessin : générateur algorithmique d’effets visuels

Flash Player 9 et les versions ultérieures, Adobe AIR 1.0 et les versions ultérieures

L’exemple de générateur algorithmique d’effets visuels trace de manière dynamique plusieurs « satellites », des cercles qui se déplacent suivant une orbite circulaire. Les fonctionnalités présentées sont les suivantes :

  • Utilisation de l’API de dessin pour tracer une forme simple avec un aspect dynamique

  • Utilisation de l’interaction de l’utilisateur pour modifier les propriétés utilisées pour le dessin

  • Effet d’animation par effacement du contenu et retraçage à chaque nouvelle image.

L’exemple de la section précédente animait un satellite isolé à l’aide de l’événement Event.ENTER_FRAME. Cet exemple le reprend en y ajoutant un panneau de contrôle avec divers curseurs qui actualisent immédiatement l’affichage de plusieurs satellites. Dans cet exemple, le code est formalisé dans des classes externes et le code de création du satellite est imbriqué dans une boucle, en conservant une référence à chaque satellite dans le tableau satellites.

Pour obtenir les fichiers d’application de cet exemple, voir www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers de l’application se trouvent dans le dossier Samples/AlgorithmicVisualGenerator. Celui-ci contient les fichiers suivants :

Fichier

Description

AlgorithmicVisualGenerator.fla

Fichier d’application principal de Flash Professional (FLA)

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

Classe comportant les principales fonctionnalités de l’application : dessin des satellites sur la scène et actualisation des variables utilisées pour ces dessins en réponse aux événements du panneau de contrôle.

com/example/programmingas3/algorithmic/ControlPanel.as

Cette classe gère les interactions de l’utilisateur avec les curseurs et distribue les événements appropriés.

com/example/programmingas3/algorithmic/Satellite.as

Cette classe représente l’objet d’affichage qui tourne sur son orbite autour d’un point central et contient des propriétés relatives à son état de dessin actuel.

Définition des écouteurs

L’application commence par créer trois écouteurs. Le premier attend qu’un événement soit distribué par le panneau de contrôle pour signaler qu’une reconstruction des satellites est nécessaire. Le second attend des changements de taille de la scène du fichier SWF. Le troisième attend le passage de chaque image du fichier SWF et son retraçage à l’aide de la fonction doEveryFrame().

Création des satellites

Après la définition de ces écouteurs, la fonction build() est appelée. Cette fonction appelle d’abord la fonction clear(), qui efface le contenu du tableau satellites et supprime les éventuelles formes déjà présentes sur la scène. Cette précaution est nécessaire car la fonction build() peut être appelée à nouveau à la suite d’un événement diffusé par le panneau de contrôle, par exemple en cas de modification des couleurs. Dans ce cas, les satellites doivent être supprimés et recréés.

La fonction crée ensuite les satellites, en définissant les propriétés initiales nécessaires à cette création, dont la variable position qui définit une position aléatoire sur l’orbite et la variable color, qui dans cet exemple ne change pas une fois que le satellite a été créé.

Lors de la création de chaque satellite, une référence est ajoutée dans le tableau satellites. Lorsque la fonction doEveryFrame() est appelée, elle actualise tous les satellites du tableau.

Actualisation de la position des satellites

La fonction doEveryFrame() est au cœur du processus d’animation de l’application. Elle est appelée à chaque image, donc à une fréquence identique à la cadence du fichier SWF. Les variables du dessin changent légèrement, ce qui permet d’obtenir un effet d’animation.

La fonction efface d’abord tous les éventuels dessins antérieurs et retrace l’arrière-plan. Elle effectue ensuite une boucle dans le conteneur de chaque satellite et incrémente la propriété position de chaque satellite, puis actualise les propriétés radius et orbitRadius qui peuvent avoir été modifiées par suite d’une action de l’utilisateur dans le panneau de contrôle. Enfin, la nouvelle position de chaque satellite est affichée en appelant la méthode draw() de la classe Satellite.

Notez que la variable de compteur i n’est incrémentée que jusqu’à la valeur de la variable visibleSatellites. En effet, si l’utilisateur a limité à l’aide du panneau de contrôle le nombre de satellites affichés, les autres satellites de la boucle ne doivent pas être redessinés, mais masqués. La boucle chargée de cette action suit immédiatement celle qui est responsable du dessin.

Lorsque la fonction doEveryFrame() se termine, le nombre de satellites visibles (visibleSatellites) est redessiné aux nouvelles positions.

Réponse aux interactions de l’utilisateur

L’interactivité est assurée par le panneau de contrôle, qui est géré par la classe ControlPanel. Cette classe définit pour chaque curseur un écouteur et des valeurs individuelles minimum, maximum et par défaut. Lorsque l’utilisateur déplace ces curseurs, la fonction changeSetting() est appelée. Elle actualise les propriétés du panneau de contrôle. Si la modification nécessite un nouvel affichage, un événement est distribué et pris en charge dans le fichier principal de l’application. En fonction de la modification signalée par le panneau de contrôle, la fonction doEveryFrame() redessine chaque satellite sur la base des nouvelles variables.

Améliorations possibles

Cet exemple est simplement destiné à illustrer la création d’effets visuels avec l’API de dessin. Il utilise relativement peu de lignes de code pour créer une animation interactive qui semble très complexe. Même ainsi, cet exemple pourrait être amélioré moyennant quelques modifications mineures. Voici quelques idées :

  • La fonction doEveryFrame() pourrait incrémenter la valeur colorimétrique du satellite.

  • La fonction doEveryFrame() pourrait réduire ou augmenter progressivement le rayon de l’orbite du satellite.

  • Il n’est pas nécessaire que l’orbite du satellite soit circulaire, la classe Math permet de le déplacer selon une sinusoïdale, par exemple.

  • Les satellites pourraient utiliser une détection de collision entre eux.

L’API de dessin peut être considérée comme autre solution pour la création d’effets visuels dans l’environnement de création Flash, en dessinant des formes de base lors de l’exécution. Mais elle permet aussi de créer des effets visuels qu’il serait impossible de créer manuellement. L’API de dessin et quelques notions de mathématiques permettent au développeur en ActionScript de donner vie à de nombreuses créations inattendues.