用AS繪圖
AS2.0這我們提供了一些繪圖方法，利用這些方法，我們可以繪制一些圖形。下面來(lái)認(rèn)識(shí)一下這些方法。首先是畫(huà)直線，要畫(huà)線應(yīng)先確定線的類型等，AS提供的是：
lineStyle() 方法：該方法確定線條的類型。
常用格式：MC.lineStyle(粗細(xì)，顏色，透明度)。該方法還有其它一些參數(shù)，本文就不介紹了。
比如：my_mc. lineStyle(1,0xff0000,100)
這就指明了線條粗細(xì)為1，顏色是紅色，透明度為100%。
有了線條樣式后就可以畫(huà)直線了，首先將畫(huà)筆移到要開(kāi)始畫(huà)直線的起始點(diǎn)上，AS提供了：
moveTo（）方法：該方法將畫(huà)筆移到起畫(huà)點(diǎn)上。
用法：MC.moveTo(x,y);
起畫(huà)點(diǎn)有了，就可以畫(huà)線了，AS提供了：
lineTo()方法： 該方法將從起畫(huà)點(diǎn)到終點(diǎn)畫(huà)一條直線，并將起畫(huà)點(diǎn)移到終點(diǎn)。
用法：MC.lineTo(x,y)
有了上面的三個(gè)方法就可以畫(huà)直線了，下面就畫(huà)一條： this.lineStyle(1,0xff0000,100);
this.moveTo(0,0);
this.lineTo(200,200);
復(fù)制代碼
測(cè)試影片，上面的代碼畫(huà)了一條從（0，0）到（200，200）的紅色直線。
下面擴(kuò)展一下，畫(huà)個(gè)三角形： this.lineStyle(1,0xff0000,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
復(fù)制代碼
我想我們繪畫(huà)，肯定不會(huì)甘心只畫(huà)一些線條，還想畫(huà)一些形狀，下面的方法對(duì)我們這種愿望提供了可能。
beginFill()方法：該方法從字面上就能理解，開(kāi)始填充。
用法：MC.beginFill(顏色，透明度)
endFill()方法：用beginFill()中的顏色填充圖形。
比如將上面的三角形填上藍(lán)色： this.lineStyle(1,0xff0000,100);
this.beginFill(0x0000ff,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
ebdFill();
復(fù)制代碼
測(cè)試影片，會(huì)看到一個(gè)紅色筆觸藍(lán)色填充的三角形。
如果想要無(wú)筆觸的三角形，那么上面第一句不要就行了。
看起來(lái)到目前為止，我們已經(jīng)自認(rèn)為已學(xué)會(huì)了用AS繪圖了，很想躍躍欲試畫(huà)點(diǎn)什么玩眼，好吧，就滿足你吧，看看下面的五星，我們來(lái)畫(huà)它吧。
用矩形工具畫(huà)一個(gè)與舞始一樣大的黑色矩形。為什么要畫(huà)這個(gè)？很簡(jiǎn)單，黑色背景下紅五星要好看些。為什么不直接將文檔的背景色設(shè)為黑色？因?yàn)楹芏嗑W(wǎng)站插入的swf文件默認(rèn)是透明的，比如我們論壇。當(dāng)然你完全可以連這個(gè)黑色矩形都用AS來(lái)完成。
將下列代碼輸入到幀動(dòng)作面板中。 this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x = Stage.width/2;
wx_mc._y = Stage.height/2;
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1 = eval("wx1"+i);
wx1._rotation = i*72;
}
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x = Stage.width/2;
xg_mc._y= Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc = eval("xg"+j);
xg1_mc._rotation = j*10;
}
復(fù)制代碼
測(cè)試影片，效果出來(lái)了。
代碼分析：
首先創(chuàng)建一個(gè)空的MC“wx_mc”用來(lái)繪制五星。并將wx_mc放到舞中央。
this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x = Stage.width/2;
wx_mc._y = Stage.height/2;
接下來(lái)畫(huà)一個(gè)紅色三角形，從下面的代碼中可以看到，三角形的右下角在wx_mc的注冊(cè)點(diǎn)上，即舞臺(tái)中央，這一點(diǎn)很重要，因?yàn)槲覀兒竺嬉D(zhuǎn)這個(gè)三角形。
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
接下來(lái)，繼續(xù)畫(huà)圖又畫(huà)了一個(gè)三角形，這個(gè)三角形與第一個(gè)三角形剛好水平相反，這樣就組成了五星的一只角，而這個(gè)三角形的顏色比第一個(gè)三角形略深，這樣就形成了立體感。
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
有了一只角了，要形成五星就簡(jiǎn)單了，復(fù)制5份，然后每份旋轉(zhuǎn)360/5x份數(shù)，五星就繪成了。
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1 = eval("wx1"+i);
wx1._rotation = i*72;
}
五星畫(huà)好了，還想加些光輝，那又新建一個(gè)MC，用來(lái)畫(huà)光輝，就在五星外圍畫(huà)一條直線，然后復(fù)制直線36份，每10度放一份就行了。用同樣的方法畫(huà)第二層光輝。
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x = Stage.width/2;
xg_mc._y= Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc = eval("xg"+j);
xg1_mc._rotation = j*10;
}
上面畫(huà)的圖形全部是直線的，這時(shí)我們又想畫(huà)點(diǎn)花兒什么的，需要用到曲線，有畫(huà)曲線的方法嗎？有，下面這個(gè)就是：
curveTo() 方法：該方法畫(huà)一條由起畫(huà)點(diǎn)經(jīng)控制點(diǎn)到終點(diǎn)的一條曲線。
用法：MC. curveTo(控制點(diǎn)x,控制點(diǎn)y,終點(diǎn)x,終點(diǎn)y);
有了畫(huà)曲線的方法那就畫(huà)個(gè)花兒吧。
代碼： this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x = Stage.width /2;
mh_mc._y = Stage.height/2;
mh_mc.beginFill(0xff0000,100);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc = eval("mh"+i);
mh1_mc._rotation= i*72;
}
復(fù)制代碼
實(shí)際上這個(gè)花的畫(huà)法跟五星差不多，只是這個(gè)是曲線的而已。
現(xiàn)在問(wèn)題又來(lái)了，這花的顏色不理想，是純色的，在flash創(chuàng)作工具中還有個(gè)叫什么漸變填充的家伙，可以搞出些更好的效果。 在AS中同樣有這家伙：
beginGradientFill（）方法：該方法可實(shí)現(xiàn)漸變填充。
參數(shù)：fillType: ― 線性漸變用"linear"，放射漸變用"radial"。
colors:― 用于漸變色的 RGB 十六進(jìn)制顏色值的數(shù)組；例如，紅色為 0xFF0000，藍(lán)色為 0x0000FF。可以至多指定 15 種顏色。對(duì)于每種顏色，請(qǐng)確保在 alphas 和 ratios 參數(shù)中指定對(duì)應(yīng)值。
alphas: ― colors 數(shù)組中對(duì)應(yīng)顏色的 Alpha 值數(shù)組；有效值為 0 到 100。如果值小于 0，則 Flash 使用 0。如果值大于 100，則 Flash 使用 100。
ratios: ― 顏色分布比例數(shù)組；有效值為 0 到 255。即漸變中每種顏色的比例值，可以理解為顏色面板中，漸變色的滑塊的位置。比如在colors參數(shù)為：[0xFF0000,0x0000FF],本參數(shù)為：[250,255]，那么就相當(dāng)于在混色器中的這種情況：
matrix:― 一個(gè)轉(zhuǎn)換矩陣：
flash.geom.Matrix 類包括 createGradientBox() 方法，通過(guò)該方法可以方便地設(shè)置矩陣，以便用于 MovieClip 類的 beginGradientFill() 方法。
用法：首先需要導(dǎo)入flash.geom.Matrix類
import flash.geom.*
然后，創(chuàng)建一個(gè)flash.geom.Matrix類的實(shí)例，再調(diào)用createGradientBox方法：
matrix = new Matrix();
matrix.createGradientBox（漸變范圍的寬，漸變范圍的高，旋轉(zhuǎn)， x軸方向的偏移量，y軸方向的偏移量）;
x軸方向的偏移量：一般為要填充的形狀的x減去漸變范圍的寬。
y軸方向的偏移量：一般為要填充的形狀的y減去漸變范圍的高。
根據(jù)形狀可調(diào)。
這里邊的4個(gè)參數(shù)想一下漸變填充工具就清楚了。
focalPointRatio: [可選] ― 在 Flash Player 8 中添加。一個(gè)數(shù)字，控制漸變焦點(diǎn)的位置。值 0 表示焦點(diǎn)位于中心。值 1 表示焦點(diǎn)位于漸變圓的一條邊界上。值 -1 表示焦點(diǎn)位于漸變圓的另一條邊界上。小于 -1 或大于 1 的值將被舍入為 -1 或 1。
有了這個(gè)方法我們就想把那朵花搞成桃花了，使用由紅色到粉紅色的放射填充。
效果:
代碼： import flash.geom.*;
this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x = Stage.width /2;
mh_mc._y = Stage.height/2;
var color:Array = [0xFF0000,0xfee7f8];
var alph:Array= [100,100];
var rotio:Array = [0,255];
var matrix = new Matrix();
matrix.createGradientBox(40,100,Math.PI,-20,-40);//這里要填充的形狀注冊(cè)點(diǎn)是（0，0）這樣就算出了-20，和-40（調(diào)整后的）
mh_mc.beginGradientFill("radial",color,alph,rotio,matrix);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc = eval("mh"+i);
mh1_mc._rotation= i*72;
}
this.createEmptyMovieClip("hz_mc",0);
hz_mc._x =Stage.width/2;
hz_mc._y = Stage.height/2;
hz_mc.lineStyle(6,663333,100);
hz_mc.moveTo(0,0);
hz_mc.curveTo(-5,110,0,160);
this.createEmptyMovieClip("hy_mc",this.getNextHighestDepth());
hy_mc._x =Stage.width/2;
hy_mc._y = Stage.height/2;
color = [0x0e730d,0x06db2b];
matrix.createGradientBox(60,20,Math.PI,10,50);
hy_mc.beginGradientFill("radial",color,alph,rotio,matrix);
hy_mc.moveTo(0,70);
hy_mc.curveTo(35,40,70,50);
hy_mc.curveTo(35,90,0,70);
hy_mc.endFill();
hy_mc.duplicateMovieClip("hy1_mc",this.getNextHighestDepth());
hy1_mc._xscale = -100;
hy1_mc._x =hy_mc._x -6;
hy1_mc._y =hy_mc._y +10;
復(fù)制代碼
差不多了，再做兩個(gè)練習(xí)，一個(gè)是涂鴉板的制作，一個(gè)是動(dòng)態(tài)引導(dǎo)線的效果。
涂雅板的制作:
效果如下:在左邊選擇顏色和粗細(xì)后,可在右邊繪圖.
按下圖畫(huà)好圖形,并將每個(gè)圖形轉(zhuǎn)換為MC.
實(shí)例名稱:
黑色-hs_mc;
紅色-hongs_mc;
橙色-cs_mc;
黃色-huans_mc;
綠色-lus_mc;
藍(lán)色_nans_mc;
紫色-zs_mc;
大園-m6_mc;
二園-m4_mc;
三園_m3_mc;
幺園-m1_mc;
新插入一層,打開(kāi)幀動(dòng)作面板,輸入:
var color = 0x000000;
var dx =1;
var h:Boolean = true;
hs_mc.onRelease = function (){
color = 0x000000;
}
hongs_mc.onRelease = function (){
color = 0xFF0000;
}
cs_mc.onRelease = function (){
color = 0xFF9900;
}
huans_mc.onRelease = function (){
color = 0xFFFF00;
}
lus_mc.onRelease = function (){
color = 0x00FF00;
}
nans_mc.onRelease = function (){
color = 0x0000FF;
}
zs_mc.onRelease = function (){
color = 0xFF00FF;
}
m1_mc.onRelease = function(){
dx = 1;
}
m3_mc.onRelease = function(){
dx = 3;
}
m4_mc.onRelease = function(){
dx = 4;
}
m6_mc.onRelease = function(){
dx = 6;
}
onMouseDown = function(){
if(_xmouse >170){
h=true;
}
lineStyle(dx,color,100);
moveTo(_xmouse,_ymouse);
}
onMouseMove = function(){
if(_xmouse <170){
h=false;
}
if(h){
lineTo(_xmouse,_ymouse);
}
}
onMouseUp= function(){
h=false;;
}
鼠繪引導(dǎo)線:
效果如下:用鼠標(biāo)畫(huà)一條引導(dǎo)線,小球?qū)匆龑?dǎo)線運(yùn)動(dòng).
畫(huà)一個(gè)球,或者你喜歡的任何玩眼.轉(zhuǎn)換為MC,實(shí)例名稱為:ball_mc.
然后在幀動(dòng)作面板中輸入:
var a:Array;
this.onMouseDown = function() {
this.lineStyle(1, 0x0000ff, 100);
a = new Array();
a.push(_xmouse, _ymouse);
this.moveTo(_xmouse, _ymouse);
this.onMouseMove = function() {
a.push(_xmouse, _ymouse);
this.lineTo(_xmouse, _ymouse);
};
};
this.onMouseUp = function() {
delete this.onMouseMove;
var z:Number = new Number();
this.onEnterFrame = function() {
ball_mc._x = a[z++];
ball_mc._y = a[z++];
if(z>a.length){
delete onEnterFrame;
this.clear();
};
}
};
