API de dessin Flash CS3, ActionScript 3, classe Shape

• Avril 30, 2024

L'une des choses que je préfère faire dans Flash est de dessiner sur la scène. Mais je ne parle pas de dessin avec les outils de dessin Flash tels que l'outil Rectangle ou Ovale. Dans ce didacticiel, nous apprendrons les bases du dessin avec ActionScript 3 et l'API de dessin.

J'hésite à trop parler de la programmation et des cours de POO dans les tutoriels de mon débutant car cela rend les choses plus compliquées. Mais ce tutoriel est une exception. Il est parfait pour introduire le concept de base des classes OOP. Une classe OOP dans ActionScript n'est qu'un ensemble d'informations prédéfinies, appelées propriétés et méthodes. Ces informations prédéfinies permettent au programmeur de gagner beaucoup de temps lors du codage d'ActionScript car il n'est pas nécessaire de réécrire ces informations dans chaque programme qui nécessite l'utilisation d'une classe spécifique.

Dans ce didacticiel, nous utiliserons la classe Shape, sa propriété Graphics prédéfinie et plusieurs de ses méthodes pour dessiner un cercle simple sur la scène.

Propriété Graphics
Méthode lineStyle
Méthode beginFill
Méthode drawCircle
méthode endFill ()

Notre première étape consiste à créer un calque Actions sur la timeline, cliquez sur l'image 1 et ouvrez le panneau Actions (Fenêtre - Actions). Notre première ligne de code créera une nouvelle variable qui contiendra le cercle.

var myCircle: Shape = new Shape ();

Dans le code ci-dessus, nous créons une nouvelle variable et la nommons "myCircle". Nous définissons le type de données pour cette nouvelle variable sur Forme. De l'autre côté, nous utilisons le Nouveau pour créer une nouvelle instance de la classe Shape.

Si vous avez utilisé les outils de dessin Flash, vous savez qu'une forme a à la fois un trait et un remplissage. Lorsque vous utilisez la classe Shape pour dessiner, vous disposez également d'un trait et d'un remplissage. Dans les prochaines lignes de code, nous définirons le Stroke and Fill pour notre myCircle.

myCircle.graphics.lineStyle (2, 0x000000);

Dans le code ci-dessus, nous définissons les valeurs Stroke avec la méthode lineStyle de la propriété Graphics. Nous allons définir la valeur de la largeur du trait en pixels et la couleur du trait avec une valeur hexadécimale. Ci-dessus, nous avons défini le trait de notre cercle sur une largeur de 2 pixels et une couleur noire.

Ensuite, nous remplirons le cercle. Encore une fois, nous utiliserons la propriété Graphics et sa méthode beginFill. Les deux valeurs que nous pouvons contrôler pour le remplissage du cercle sont la couleur et l'alpha. Il est nécessaire que vous définissiez une valeur pour la couleur et si vous ne le faites pas, Flash sera très contrarié. Mais, la définition de la valeur alpha est facultative. Définissons le remplissage de notre cercle sur rouge. Encore une fois, nous utilisons l'hexadécimal.

myCircle.graphics.beginFill (0xff0000);

OK, maintenant nous devons dire à Flash où dessiner le cercle sur la scène. Comme vous vous en doutez, vous devez définir une valeur pour les axes X et Y et le rayon du cercle. Nous le ferons avec la méthode drawCircle qui fait partie de la propriété Graphics.

myCircle.graphics.drawCircle (100, 200, 50);

Dans cette ligne de code, nous demandons à Flash de dessiner notre cercle à 100 pixels du coin supérieur gauche de la scène le long de l'axe X et 200 pixels le long de l'axe Y. Notre cercle aura un rayon de 50. Lorsque vous définissez ces valeurs, prenez soin de l'ordre dans lequel vous les indiquez dans le code. Votre première valeur sera pour l'axe X et la deuxième valeur sera pour l'axe Y. Le troisième est pour le rayon. Si vous donnez à Flash ces valeurs dans le désordre, vous obtiendrez des résultats inattendus.

Enfin, nous devons ajouter notre cercle en tant qu'objet d'affichage enfant à la liste d'affichage.

addChild (myCircle);

Oh, j'ai laissé notre seule ligne de code! Bien que notre code fonctionne tel quel, nous avons omis la méthode endFill () qui "fermera" le processus de dessin. Ce n'est pas vraiment nécessaire car endFill () est appelé automatiquement. Mais il est recommandé de l'ajouter à votre code juste avant addChild ().

myCircle.graphics.endFill ();

Voici le code complet.

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une [des] marque (s) d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: Formation ActionScript 3 Flash AS3 Facile Gratuite (Avril 2024).