BeginGradientFill (linear)

 

On se propose de montrer l'effet gradient uniquement par script. Pour cela, on insérera une image qui, par défaut est au niveau 0. Puis on construira par script un cadre constitué de 4 morceaux.

⇒ animation ⇐

Téléchargez l'image.  

Création des Objets

1 - Définissez les dimensions générales 640x480 (couleur du fond #996600). Prenez un Frame Rate quelconque.

2 - Insérez l'image au centre de la scène. ( Menu Insert / Image )

Script

Méthodologie :
- Au début, définition de constantes hexadécimales pour les couleurs.
- Pour chaque objet gradient :
- création d'un clip vide, placé dans un niveau différent : CreateEmptyMovieClip
- définition de 3 matrices qui doivent toutes avoir le même
nombre d'éléments : couleurs, alphas, ratios.
- définition des limites du gradient par une matrice.
- remplissage : beginGradientFill
- tracé du contour.
- fin du remplissage.

Dans Outline, sélectionnez Scene_1. Entrez le script suivant :

onLoad () {
rouge = 0xFF0000;
vert = 0x00FF00;
bleu = 0x0000FF;
jaune = 0xFFFF00;
cyan = 0x00FFFF; // aqua
magenta = 0xFF00FF; // fuschia

aliceblue = 0xF0F8FF;
antiquesaddlebrown = 0xFAEBD7;
aquamarine = 0x7FFFD4;
azur = 0xF0FFFF;
beige = 0xF5F5DC;
bisque = 0xFFE4C4;
blanchedalmond= 0xFFEBCD;
blueviolet = 0x8A2BE2;
brown = 0xA52A2A;
burlywood = 0xDEB888;
cadetblue= 0x5F9EA0;
chartreuse= 0x70FF00;
chocolate= 0xD2691E;
coral = 0xFF7F50;
cornflowerblue= 0x6495ED;
cornsilk = 0xFFF8DC;
crimson = 0xE1643C;
darkblue = 0x00008B;
darkcyan = 0x008B8B;
darkgoldenrod= 0xB8860B;
darkgray = 0xA9A9A9;
darkgreen= 0x006400;
darkkhaki= 0xBDB76B;
darkmagenta= 0x8B008B;
darkolivegreen= 0x556B2F;
darkorange= 0xFF8C00;
darkorchid= 0x9932CC;
darkred = 0x8B0000;
darksalmon= 0xE9967A;
darkseagreen= 0x8FBC8F;
darkslateblue= 0x483D8B;
darkslategray= 0x2F4F4F;
darkturquoise= 0x00CED1;
darkviolet = 0x9400D3;
deeppink = 0xFF16493;
deepskyblue= 0x00BFBF;
dimgray = 0x696969;
dodgerblue= 0xE90FF;
firebrick = 0xB22222;
floralsaddlebrown= 0xFFFAF0;
forestgreen= 0x228B22;
gainsboro= 0xDCDCDC;
ghostsaddlebrown= 0xF8F8FF;
gold = 0xFFD700;
goldenrod= 0xDAA520;
gray = 0x808080;
greenyellow= 0xADFF2F;
honeydew= 0xF0FFF0;
hotpink = 0xFF69B4;
indianred= 0xCD5C5C;
indigo = 0x4B0082;
ivory = 0xFFFFF0;
khaky = 0xF0F68C;
lavender = 0xE6E6FA;
lavenderblush= 0xFFF0F5;
lawngreen= 0x7FFC00;
lemonchiffon= 0xFFFACD;
lightblue = 0xADD8E6;
lightcoral = 0xF08080;
lightcyan = 0xEFFFF;
lightgoldenrodyellow= 0xFAFAD2;
lightgreen= 0x90EE90;
lightgray = 0xD3D3D3;
lightpink = 0xFFB6C1;
lightsalmon= 0xFFA07A;
lightseagreen= 0x20B2AA;
lightskyblue= 0x87CEFA;
lightslategrey= 0x778899;
lightsteelblue= 0xB0C4DE;
lightyellow= 0xFFFFE0;
limegreen= 0x32CD32;
linen = 0xFAF0E6;
maroon = 0x800000;
mediumaquamarine= 0x66CDAA;
mediumblue= 0x0000CD;
mediumorchid= 0xBA55D3;
mediumpurple= 0x9370DB;
mediumseagreen= 0x3CB371;
mediumslateblue= 0x7B68EE;
midnightblue= 0x16916970;
mintcream= 0xF5FFFA;
mistyrose= 0xFFE4E1;
mocassin= 0xFFE4B5;
navajosaddlebrown= 0xFFDEAD;
navy = 0x000080;
oldlace = 0xFDF5E6;
olive = 0x808000;
olivedrab = 0x6B8E23;
orange = 0xFFA500;
orangered= 0xFF4500;
orchid = 0xDA70D6;
palegoldenrod= 0xEEE8AA;
palegreen= 0x98FB98;
paleturquoise= 0xAFEEEE;
palevioletred= 0xDB7093;
papayawhip= 0xFFEFD5;
peachpuff= 0xFFDAB9;
peru = 0xCD853F;
pink = 0xFFC0CB;
plum = 0xDDA0DD;
powderblue= 0xBE0E6;
rosybrown= 0xBC8F8F;
royalblue = 0x4169E1;
saddlebrown= 0x8B45163;
salmon = 0xFA8072;
sandybrown= 0xF4A460;
seagreen = 0x2E8B57;
seashell = 0xFFF5EE;
sienna = 0xAD522D;
silver = 0xC0C0C0;
skyblue = 0x87CEBB;
slateblue = 0x6A5ACD;
slategray = 0x708090 ;
snow = 0xFFFAFA;
springgreen= 0x00FF7F;
steelblue = 0x4682B4;
cuir = 0xD2B48C; // = tan
teal = 0x008080;
thistle = 0xD8BFD8;
tomato = 0xFF6347;
turquoise = 0x40E0D0;
violet = 0xEE82EE;
wheat = 0xF5DEB3;
saddlebrownsmoke= 0xF5F5F5;
yellowgreen= 0x9ACD32;
// l'image insérée est dans le niveau 0
niveau = 1; // niveau de départ

largeur_cadre = 32;
W_scene = 640;
H_scene = 480;
/*///// bord gauche //////////*/
// crée un clip vide au niveau indiqué
// Anchor point = coin haut gauche
_root.createEmptyMovieClip("cadreG", niveau);
// Attention : même nombre d'éléments dans chaque array
// Définition des couleurs utilisées pour le gradient

colors = [maroon , goldenrod, burlywood, saddlebrownsmoke ];
// Niveau d'opacité de chaque couleur : 0 transparent 100 opaque
alphas = [100, 100, 100, 100];
// rapport des couleurs : 0 à 255 ( 00<-->FF)
ratios = [0, 150, 200, 50];
/*+++++++++++++++++++++++++++++++++++++++++++++++
matrixType, x, y, w, h, r
matrixType : "box" obligatoirement
x , y : coord x,y relatives au point d'ancrage (anchor point)
pour le coin haut gauche du gradient
w : largeur du gradient.
h : hauteur du gradient
r : angle de rotation en radians du gradient
+++++++++++++++++++++++++++++++++++++++++++++++*/

matrix = {matrixType:"box", x:0, y:0, w:largeur_cadre, h:H_scene, r:0};
_root.cadreG.beginGradientFill("linear", colors, alphas, ratios, matrix);
// style de ligne : epaisseur , couleur hexa , alpha
_root.cadreG.lineStyle(1, maroon, 75 );
// bord gauche du cadre
_root.cadreG.moveTo(0,0);
_root.cadreG.lineTo(0.7*largeur_cadre, 0.7*largeur_cadre);
_root.cadreG.lineTo(0.7*largeur_cadre, H_scene-0.7*largeur_cadre);
_root.cadreG.lineTo(0, H_scene);
_root.cadreG.lineTo(0,0);
_root.cadreG.endFill();
/*//// bord droit ////////*/
niveau++;
_root.createEmptyMovieClip("cadreD", niveau);
matrix = {matrixType:"box", x:W_scene-largeur_cadre, y:0, w:largeur_cadre, h:H_scene, r:0};
colors = [saddlebrownsmoke, burlywood, goldenrod, maroon ];
ratios = [20, 50, 100, 250];
_root.cadreD.beginGradientFill("linear", colors, alphas, ratios, matrix);
// bord droit du cadre
_root.cadreD.lineStyle(1, maroon, 75 );
_root.cadreD.moveTo(W_scene,0);
_root.cadreD.lineTo(W_scene, H_scene);
_root.cadreD.lineTo(W_scene-0.7*largeur_cadre, H_scene-0.7*largeur_cadre);
_root.cadreD.lineTo(W_scene-0.7*largeur_cadre, 0.7*largeur_cadre);
_root.cadreD.lineTo(W_scene,0);
_root.cadreD.endFill();
/*///// bord supérieur ///////*/
/*------------------------------------
astuce : mettez r:0 d'abord, testez pour voir les proportions
puis mettre la bonne valeur pour r
-------------------------------------*/

niveau++;
_root.createEmptyMovieClip("cadreH", niveau);
matrix = {matrixType:"box", x:0, y:0, w: W_scene, h: largeur_cadre, r: Math.radians(90) };
colors = [maroon , goldenrod, burlywood, saddlebrownsmoke ];
alphas = [100, 100, 100, 100];
ratios = [0, 150, 200, 50];
_root.cadreH.beginGradientFill("linear", colors, alphas, ratios, matrix);
// bord supérieur du cadre _root.cadreH.lineStyle(1, maroon, 75 );
_root.cadreH.moveTo(0,0);
_root.cadreH.lineTo(W_scene, 0);
_root.cadreH.lineTo(W_scene-0.7*largeur_cadre, 0.7*largeur_cadre);
_root.cadreH.lineTo(0.7*largeur_cadre, 0.7*largeur_cadre);
_root.cadreH.lineTo(0,0);
_root.cadreH.endFill();
/*//////// bord inférieur //////////*/
niveau++;
_root.createEmptyMovieClip("cadreB", niveau);
matrix = {matrixType:"box", x:0, y:H_scene-largeur_cadre, w: 640, h: largeur_cadre, r: Math.radians(90) };
colors = [saddlebrownsmoke, burlywood, goldenrod, maroon ];
alphas = [100, 100, 100, 100];
ratios = [20, 50, 100, 250];
_root.cadreB.beginGradientFill("linear", colors, alphas, ratios, matrix);
// bord inférieur du cadre
_root.cadreB.lineStyle(1, maroon, 75 );
_root.cadreB.moveTo(0,H_scene);
_root.cadreB.lineTo(W_scene, H_scene);
_root.cadreB.lineTo(W_scene-0.7*largeur_cadre, H_scene-0.7*largeur_cadre);
_root.cadreB.lineTo(0.7*largeur_cadre, H_scene-0.7*largeur_cadre);
_root.cadreB.lineTo(0,H_scene);
_root.cadreB.endFill();
}

Remarque : Pour un gradient radial, mettez "radial" au lieu de "linear".

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

vers Google