[flash] approche de l'as par le dessin (avec l'api de flash)

Dernière mise à jour le par pijaku .

[flash] approche de l'Action Script par le dessin (avec l'api de flash)

Introduction

Bonjour,

Ce tutoriel est inspiré du livre "Actionscript en action" de Joey Lott.
et d'un code de Blacknight91titi.

Il s'adresse à ceux qui (comme moi évidemment) ont téléchargé une bonne quarantaine de sources et n'ont toujours rien capté en Action Script.
C'est juste une piste.

Pour commencer ouvre un nouveau .fla. Dans fenêtre choisis le panneau Action et le panneau Info.

Le panneau Info peut te servir, entres autres, à te situer sur la scène avec les coordonnées x et y .

Le trait

Nous allons d'abord créer un nouveau MovieClip vide (pour y insrire notre trait).
Inscrit ce code dans la boîte de dialogue (panneau Action :-)

this.createEmptyMovieClip("montrait",1);
//this ->est utilisé pour cibler le MovieClip.
//montrait -> comme on aurait pu l'appeler moncafé ou monhuître.
//1 -> définit son niveau.

Ensuite on vas définir les propriétés du trait.
Code :

montrait.lineStyle(3.0,0x000000,100);
//3.0 -> l'épaisseur de montrait.
//0x000000 -> sa couleur (ici noir).
//100 -> le pourcentage de son alpha.

Pour donner un point de départ au trait, nous allons utiliser les coordonnées x et y.
Par défaut, les coordonnés partent du coin en haut à gauche de la scène :

montrait.moveTo(90,224);
//90 ->x
//224 -> y

Et on lui donne un point d'arrivée :

montrait.lineTo(275,224);

La courbe

this.createEmptyMovieClip("macourbe",1);
//on crée le clip.

macourbe.lineStyle(3,0x000000,100);
//on définit les propriétés.

macourbe.moveTo(97,224);
//1er point (x,y)

macourbe.curveTo(186,180,275,224);
//point de croisée des tangentes, second point.(x,y,x,y).

le carré

this.createEmptyMovieClip("moncarré", 1);
moncarré.lineStyle(3,0x000000,100);
moncarré.moveTo(97,229);
//(x,y) en bas à gauche.

moncarré.lineTo(97,98);
//(x,y) en haut à gauche.

moncarré.lineTo(280,98);
//(x,y) en haut à droite.

moncarré.lineTo(280,229);
//(x,y) en bas à droite.

moncarré.lineTo(97,229);
//on relie au 1er point.

Une forme avec droite et courbe

this.createEmptyMovieClip("maforme",1);
maforme.lineStyle(3,0x000000,100);
maforme.moveTo(97,229);
maforme.lineTo(97,98);
maforme.curveTo(185,50,280,98);
maforme.lineTo(280,229);
maforme.curveTo(185,277,97,229);

La même forme avec un remplissage

this.createEmptyMovieClip("maforme",1);
maforme.beginFill(0xD9D9DB,100);
//on commence le remplissage.
//0xD9D9DB,100 -> couleur (ici gris) et alpha.

maforme.lineStyle(3,0x000000,100);
maforme.moveTo(97,229);
maforme.lineTo(97,98);
maforme.curveTo(185,50,280,98);
maforme.lineTo(280,229);
maforme.curveTo(185,277,97,229);
maforme.endFill();
// on termine le remplissage

Le dégradé

Linéaire

this.createEmptyMovieClip("mondégradé",1);
        //on crée un nouveau clip
mondégradé.lineStyle(1.5,0x7C7C7C,100);
with (this.mondégradé){
        remplissage="linear";
        //remplissage de type linéaire
        couleurs=[0x0000FF,0x00FF00,0x0000FF];
        //couleurs (ici haut, millieu, bas)
        alphas=[100,100,100];
        ratios= [0,127,255];
        //s'exprime en % de 0 à 255 %
matrix={matrixType:"box",x:25,y:0,w:100,h:100,r:Math.PI/2};
        //matrice : ici tu change les paramètres x,y du dégradé
        //hauteur,largeur et direction
beginGradientFill(remplissage,couleurs,alphas,ratios,matrix);
        moveTo(25,0);
        lineTo(125,0);
        lineTo(125,100);
        lineTo(25,100);
        lineTo(25,0);
endFill;
        //on ferme le remplissage
}

Radial

this.createEmptyMovieClip("mondégradé",1);
mondégradé.lineStyle(1.5,0x7C7C7C,100);
with (this.mondégradé){
        remplissage="radial";
        //remplissage de type radial
        couleurs=[0xFFFFFF,0x000000];
        //couleurs (ici blanc au centre noir au bord)
        alphas=[100,100];
        ratios= [0,255];   
matrix={matrixType:"box",x:180,y:100,w:200,h:200,r:Math.PI/2};
beginGradientFill(remplissage,couleurs,alphas,ratios,matrix);
        moveTo(92,68);
        lineTo(470,68);
        lineTo(470,327);
        lineTo(92,327);
        lineTo(92,68);
endFill;
}

Le cercle

Pour le cercle c'est un peu plus compliqué. Car si tu utilises quatre courbes pour ce faire, ça va te donner un cercle pas rond.

this.createEmptyMovieClip("moncercle",1);
moncercle.lineStyle(3,0x000000,100);
moncercle.moveTo(106,160);
moncercle.curveTo(106,80,186,80);
moncercle.curveTo(266,80,266,160);
moncercle.curveTo(266,240,186,240);
moncercle.curveTo(106,240,106,160);

Car il s'agit là de courbes de Bézier quadratiques (3 points d'ancrage).
Nous utiliserons donc huit curveTo() afin de se rapprocher au mieux de quatre courbes de Bézier cubiques (4 points d'ancrage).

Voici une technique :

MovieClip.prototype.drawCircle=function(rayon,x,y) {
//on crée la méthode

var monangle=Math.PI/4;
//il s'agit de calculer l'angle des huit segments, 360°/8= 45°= ?/4radians

var ctrlDist=rayon/Math.cos(monangle/2);
//faut prendre une équerre, un compas...
//on calcule la distance entre les points

var angle=0;
//on initialise l'angle

var rx,ry,ax,ay;
//on définit les variables locales

this.moveTo(x+rayon,y);
//premier point

for (var i=0;i<8;i++) {
//on répète huit fois l'opération = huit segments

angle+=monangle;
//on incrémente l'angle de monangle pour créer le cercle

rx=x+Math.cos(angle-(monangle/2))*(ctrlDist);
ry=y+Math.sin(angle-(monangle/2))*(ctrlDist);
//points de contrôle

ax=x+Math.cos(angle)*rayon;
ay=y+Math.sin(angle)*rayon;
//points terminaux de la courbe

this.curveTo(rx,ry,ax,ay);
//on dessine le segment

    }
};

var moncercle=this.createEmptyMovieClip("moncercle",1);
//on crée le clip

moncercle.lineStyle(3,0x000000,100);
//on définit ses propriétés

moncercle.drawCircle(80,186,160);
//rayon,x,y

le polygone régulier

MovieClip.prototype.dPR=function(cotes,longueur,rotation,x,y){
//on invoque la méthode (dessine Polygone Régulier)

rotation=Math.PI*rotation/180;
//on convertit rotation de degrés en radians

var angle=(2*Math.PI)/cotes;
//2?/radians l'angle de ces segments = 2? / nb. de segments

var rayon=(longueur/2)/Math.sin(angle/2);
//longueur du rayon du cercle qui circonscrit le polygone

var px=(Math.cos(rotation)*rayon)+x;
var py=(Math.sin(rotation)*rayon)+y;
//trigonométrie: rayon est l'hypoténuse et rotation l'angle.

this.moveTo(px,py);
//se déplace au points de départ sans tracer de ligne

for (var i=1;i<=cotes;i++){
px=(Math.cos((angle*i)+rotation)*rayon)+x;
py=(Math.sin((angle*i)+rotation)*rayon)+y;
this.lineTo(px,py);
//on dessine chaque cotés. on calcule les coordonnées du sommet à l'aide
//des formules trigonométriques utilisées pour calculer px et py
    }
};
this.createEmptyMovieClip("monpolygone",1);
monpolygone.lineStyle(2,0x000000,100);
monpolygone.dPR(7,100,0,200,200);

Une forme complexe

Lorsque les coordonnées sont trop nombreuses (dans le cas d'une carte géographique par ex.), on peut utiliser une technique pour charger les informations stockées dans un fichier externe.
On utilisera pour ça une boucle for() et un tableau à deux dimensions,
Voici une technique avec un fichier .txt, fichier que l'on créera à l'aide du bloc-notes (TextEdit pour Mac).

Dans le bloc notes

On mettra par exemple :

point =166,201;151,200;134,189;120,175;111,156;108,133;114,120;140,106;168,95;199,94;212,101;229,113;243,118;
260,111;270,110;276,115,282,127;283,141;282,153;287,168;302,179;309,189;309,203;302,213;297,221;288,234;
282,246;276,257;271,271;261,283;252,298;249,313;242,322;232,321;224,313;215,298;206,286;201,269;202,240;203,245;
201,223;197,213;177,203;166,201

(c'est l'afrique... bon vite fait quoi !)

Dans Flash

ok = false;
//on coupe le onEnterFrame

Loader = new LoadVars();
//on crée un nouveau LoadVars()

Loader.load("file://Rafael/Desktop/Afrique/coordonnés.txt");
//on charge le fichier

Loader.onLoad = function(Success) {
//on définis la méthode onLoad

if (Success) {
//si c'est chargé

map = Loader.point.split(";");
//on sépare les ";" des coordonnées

for (j=0; j
map[j] = map[j].split(",");
//on sépare les ","

       }
_root.createEmptyMovieClip("clip", 1);
//on crée un clip

clip.lineStyle(2, 0x000000, 100);
//on lui donne des propriétés

clip.moveTo(map[0][0], map[0][1]);
//on donne le premier point en référence au tableau (map)

ok = true;
//on ouvre le onEnterFrame

   }
};
onEnterFrame = function () {
//on crée la fonction onEnterFrame

if (ok) {
//on exécute la condition if

if (i
i++;
clip.lineTo(map[i][0], map[i][1]);
//on dessine le tracé du premier au dernier point

} else {
//si autre condition

delete (onEnterFrame);
//on vide le clip
  
        }
    }
};

Voilà, je vous conseille vivement d'utiliser l'éditeur de dessin de Blacknight91titi que vous trouverez ici :
http://codes-sources.commentcamarche.net/source/32515-editeur-de-dessin-enregistrement

Vous pouvez changer la vitesse ips soit dans le panneau propriétés soit en utilisant la fonction setInterval().

Si vous avez des questions n'hésitez pas si je peux j'y répondrais.
Et si y'a des erreurs ou mauvaises explications n'hésitez pas non plus.
A+.

(//)

Ce document intitulé « [flash] approche de l'as par le dessin (avec l'api de flash) » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Pour démarer avec flash
Les bases de l'as 1.0 [mx 6 et ulterieur]
Rejoignez-nous