Easy-Micro


ESPACEMEMBRE ActionScript
Dessiner

Créer et dessiner un clip dynamiquement

ActionScript Dessiner un trait
La classe de base du dessin vectoriel est la classe Graphics. On lui associe des objets d'affichage qui prennent en charge le dessin comme l'objet de type Shape.

Pour tracer les traits, on utilise les méthodes lineStyle(), moveTo() et lineTo() de la classe Graphics. Pour le remplissage, on utilise les méthodes beginFill() et endFill().

Tracer un trait (AS3)
Rien sur la scène, rien dans la bibliothèque, code à coller dans la première image clé du scénario

var madroite:Shape = new Shape(); // création d'une instance de l'objet d'affichage
madroite.graphics.lineStyle(1,0x00ff88,100); // style du trait (épaisseur, couleur, opacité)
madroite.graphics.moveTo(0,0); // coordonnées initiales (point de départ)
madroite.graphics.lineTo(200,0); // coordonnées finales (point d'arrivée)
madroite.x = madroite.y = 20; // positionnement de la droite
addChild(madroite); // affichage

Comme tous les objets d'affichage (ici l'objet Shape), il faut positionner la droite avec les propriétées x et y et l'afficher avec la méthode addChild().

Exemple de paramètres (le 6ième) de la méthode lineStyle() :
CapsStyle.None : style des extrémités (None, ROUND, SQUARE)

ActionScript Dessiner une courbe
La méthode curveTo() de la classe Graphics dessine une courbe de Bézier. Elle trace un arc entre deux points (appelés points d'ancrage) courbé en direction d'un troisième point (appelé point de contrôle).

Tracer une courbe (AS3)
Rien sur la scène, rien dans la bibliothèque, code à coller dans la première image clé du scénario

var macourbe:Shape = new Shape(); // création d'une instance de l'objet d'affichage
macourbe.graphics.lineStyle(20);
macourbe.graphics.moveTo(0,0); // départ
// curveTo(x de courbe, y de courbe, x d'arrivée, y d'arrivée)
macourbe.graphics.curveTo(0,200,100,0);
macourbe.x = macourbe.y = 20;
addChild(macourbe);

ActionScript Dessiner une ligne dégradée
La méthode lineGradientStyle() reçoit 4 paramètres obligatoires :
• type : spécifie le type de dégradé (GradientType.LINEAR ou GradientType.RADIAL).
• couleur : tableau de valeur colorimétrique à utiliser.
• alpha : valeur de transparence.
• ratio des couleurs : l'importance de chaque couleur dans le dégradé.

Exemple avec un
- dégradé linéaire : GradientType.LINEAR
- de 3 couleurs : vert au début (0x00ff00), blanc au milieu(0xffffff) et bleu marine à la fin (0x000088).
- Le vert et le bleu seront opaque et le blanc aura une couleur de transparence de 50% : [1,0.5,1].
- Les couleurs ne seront pas réparties de façon uniforme, le vert sera la couleur dominante. Il démarrera à guauche (0), le bleu sera à droite du dégradé (255) et le blanc sera au ¾ du dégradé (190) : [0,190,255]

Tracer un dégradé (AS3)
Rien sur la scène, rien dans la bibliothèque, code à coller dans la première image clé du scénario

var deg:Shape = new Shape(); // création d'une instance de l'objet d'affichage
deg.graphics.lineStyle(20); // style du trait
deg.graphics.lineGradientStyle(GradientType.LINEAR, [0x00ff00,0xffffff,0x000088], [1,0.5,1], [0,190,255])
deg.graphics.moveTo(0,0); // coordonnées initiales (point de départ)
deg.graphics.lineTo(200,0); // coordonnées finales (point d'arrivée)
deg.x = deg.y = 20; // positionnement de la droite
addChild(deg); // affichage

ActionScript Remplir une forme
AS3 offre des fonctionnalitées appelées API de dessin qui permettent de créer des dessins vectoriels (voir l'exemple de création dynamique de bouton). Cette API de dessin permet aussi de créer des formes prédéfinit comme un rectangle (avec la méthode drawRect).

Remplir une forme (ici un rectangle) - en AS3
Rien sur la scène, rien dans la bibliothèque, code à coller dans la première image clé du scénario

var monrectangle:Shape = new Shape(); // création d'une forme

monrectangle.graphics.beginFill(0x000088); // remplissage
monrectangle.graphics.lineStyle(2, 0xff0000); // contour du rectangle (facultatif)
monrectangle.graphics.drawRect(0, 0, 100, 50); // dessin du rectangle : drawRect(x, y, width, height)
monrectangle.x = monrectangle.y = 50; // positionnement et affichage du rectangle dans la séquence
addChild(monrectangle);

Note: Afin d'obtenir des coins arrondis, on peut utiliser la méthode drawRoundRect(x, y, width, height, largeur de l'arrondi, hauteur de l'arrondi) à la place de la méthode drawRect.

Pour le cercle, on utilise la méthode drawCircle(centre x, centre y, rayon) de la classe Graphic.

Remplir une forme (ici un cercle) - en AS3
var moncercle:Shape = new Shape();

moncercle.graphics.beginFill(0x000088, 0.5); // remplissage en bleu et transparence
moncercle.graphics.drawCircle(25,25,25); // dessin du cercle
moncercle.x = moncercle.y = 50; // positionnement et affichage dans la séquence
addChild(moncercle);

ActionScript La classe AS3 Sprite
La classe Sprite va nous permettre de réaliser la même chose que la classe Shape à la différence qu'un objet de type Sprite pourra contenir plusieurs dessins de type Shape. En effet, cette classe est similaire à la classe MovieClip mais elle ne possède pas de timeline (ne peut pas être exécutée dans le scénario Flash). D'autre part, contrairement à la classe Shape, la classe Sprite possède des événements utilisateurs (souris, clavier...)

// création de l'instance du rectangle bleu
var rectangleBleu:Shape = new Shape();
// Le rectangle sera rempli de bleu
rectangleBleu.graphics.beginFill(0x0000FF);
// dessin du rectangle avec la méthode drawRect(x, y, width, height)
rectangleBleu.graphics.drawRect(50, 30, 100, 30);

// création de l'instance du carré rouge
var carreRouge:Shape = new Shape();
// Le carre sera rempli de rouge
carreRouge.graphics.beginFill(0xFF0000);
// dessin du rectangle avec la méthode drawRect(x, y, width, height)
carreRouge.graphics.drawRect(120, 50, 50, 50);

/* Création d'un conteneur pour assembler les deux formes */
var logo:Sprite = new Sprite();

// Ajout des formes dans le logo
logo.addChild(rectangleBleu);
logo.addChild(carreRouge);

// Evénement click du logo
function clicLogo(evt:MouseEvent):void {
trace("Evénement de type : "+evt.type);
}

// Evénement survol du logo
function survolLogo(evt:MouseEvent):void {
trace("Evénement de type : "+evt.type);
}

// Evénement click du logo est défini
logo.addEventListener(MouseEvent.CLICK, clicLogo);

// Evénement survol du logo est défini
logo.addEventListener(MouseEvent.MOUSE_OVER, survolLogo);

// affichage du logo dans la séquence
this.addChild(logo);

Source: Bases-as3.fr


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 19 mars 2019 - Semaine 12 - Saint Joseph (Demain: Saint Herbert)
Aujourd'hui, c'est l'anniversaire de Bruce Willis (1955-64 ans), acteur américain et de Guesch Patti (1946), chanteuse française (tube "Etienne, Etienne"). Autre 19 mars: c'est la fête des pères en Espagne, en Italie et au Portugal (France: Troisième dimanche de juin).
Haut de page Easy-Micro