ActionScript Dessiner
Créer et dessiner un clip dynamiquement
Dessiner un traitLa 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
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)
Dessiner une courbeLa 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);
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);
Dessiner une ligne dégradéeLa 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
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
Remplir une formeAS3 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);
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);
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);
La classe AS3 SpriteLa 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);
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
