Bonjour,
Ce tutoriel est inspiré du livre “Actionscript en action“ de
Joey Lott.
et d’un code de
Blacknight91titi.
Il s’adresse à ceux qui (commen moi évidemment) ont télécharger une
bonne quarantaine de sources et n’ont toujours rien capter en AS.
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 entre autre à 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 utilisé 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é
(cette fois j'écris le code comme tu le trouveras dans un .fla)
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.
(voilà je reprend ma façon d'écrire ... plus facile..)
Pour le cercle c’est un peu plus compliqué. Car si tu utilise 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 intitialise 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 = huits 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 ploygone 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'hypothé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 complexeLorsque 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 un fichier externe.
On utilisera pour ça une boucle
for() et un tableau a deux dimensions,
Voici une techique avec un fichier .txt, fichier que l’on créeras à l’aide du bloc-notes (TextEdit pour Mac).
Dans le bloc notes on mettras par ex :
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 !)
Et 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://www.flashkod.com/code.aspx?ID=32515Vous 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+.
(//)