一、繪圖命令講解
在使用flash的過程中,難免會(huì)進(jìn)行繪圖的操作。除了用工具面板上的工具繪制圖形之外,我們也可以使用ActionScript來繪制圖形。
如何繪制線段及命令解釋
lineStyle(粗細(xì),顏色,透明度) //設(shè)置繪制圖形的線條粗細(xì)、顏色和透明度
Moveto(X坐標(biāo),Y坐標(biāo)) //設(shè)置繪圖線條的起點(diǎn)坐標(biāo)
lineto(X坐標(biāo),Y坐標(biāo)) //設(shè)置線條的結(jié)束坐標(biāo)
現(xiàn)在就用剛才的三個(gè)命令在舞臺(tái)上繪制出來一個(gè)300*100大小的矩形。
步驟:
1、新建立一個(gè)flash文檔。
2、既然要繪制一個(gè)300*100大小的矩形,我們就要先確定矩形4個(gè)頂點(diǎn)的坐標(biāo),然后就可以使用lineto命令進(jìn)行編寫了。頂點(diǎn)坐標(biāo)如下圖:
3、選中時(shí)間軸的第一楨,打開動(dòng)作面板?,F(xiàn)在已經(jīng)確定了矩形的4個(gè)頂點(diǎn),那么我們就可以來編寫腳本命令了,請(qǐng)輸入以下腳本:
_root.lineStyle(1, 0x000000, 100);//設(shè)置線條的粗細(xì),顏色和透明度
_root.moveTo(50, 50);//設(shè)置開始點(diǎn)的坐標(biāo)。
_root.lineTo(350, 50);
_root.lineTo(350, 150);
_root.lineTo(50, 150);
_root.lineTo(50, 50); //設(shè)置結(jié)束點(diǎn)坐標(biāo),整個(gè)矩形繪制完畢
相信大家通過上面的命令就很容易的用AS繪制出所需要的形狀,充分發(fā)揮你的想象力,可以通過lineto命令來設(shè)置多個(gè)點(diǎn),從而創(chuàng)造出各種各樣的形狀。
熟悉了繪制線條的命令之后我們來用一個(gè)例子加深印象。
操作步驟:
?。?、新建立一個(gè)flash文檔,在舞臺(tái)上繪制一個(gè)圓,選中它并按F8轉(zhuǎn)換成影片剪輯,起名為:圓 。
?。病矗疲保贝蜷_庫面板,請(qǐng)將影片剪輯“圓”在舞臺(tái)上再拖放一個(gè)實(shí)例,使舞臺(tái)上存在兩個(gè)圓的實(shí)例。如圖:
?。场F(xiàn)在為舞臺(tái)上兩個(gè)實(shí)例分別起名字為a和b 如下圖:
?。础⑦x中時(shí)間軸第一楨,打開動(dòng)作面板,輸入以下腳本:
function draw() { //自己定義一個(gè)函數(shù),這個(gè)函數(shù)起名為draw(可自定),函數(shù)的功能是要實(shí)現(xiàn)以a實(shí)例的坐標(biāo)為起點(diǎn),向b實(shí)例繪制線條。
_root.clear();//清除舞臺(tái)上繪制的線條。
_root.lineStyle(1, 0x000000, 90);//設(shè)置線條的粗細(xì),顏色和透明度。
_root.moveTo(a._x, a._y);//以a實(shí)例的坐標(biāo)為起點(diǎn)開始繪制線條。
_root.lineTo(b._x, b._y);//以b實(shí)例的坐標(biāo)為繪制線條的結(jié)束點(diǎn)。
}
draw();//執(zhí)行函數(shù)draw,它將會(huì)在a與b之間繪制出一條黑色的線條。
完成后的時(shí)間軸第一楨腳本如下圖:
解釋:為了減輕編寫AS的工作量和程序的重復(fù)率,可以將某些功能定義為一個(gè)函數(shù),例如上面的draw(),在使用的時(shí)候,直接執(zhí)行定義過的函數(shù),就可以完成函數(shù)的功能。
?。怠F(xiàn)在創(chuàng)建拖動(dòng)效果,選中舞臺(tái)上的b實(shí)例,打開動(dòng)作面板,輸入以下腳本:
on (press) {
//點(diǎn)擊此實(shí)例,開始拖動(dòng)
this.startDrag(true);
}
on (release) {
//釋放鼠標(biāo),停止拖動(dòng)
this.stopDrag();
}
onClipEvent (mouseMove) { //當(dāng)鼠標(biāo)移動(dòng),也就是這個(gè)b實(shí)例移動(dòng)的時(shí)候,就執(zhí)行里面的程序。
_root.draw();//執(zhí)行舞臺(tái)上定義過的draw()函數(shù),開始在a與b之間繪制線條。
updateAfterEvent();//強(qiáng)制更新畫面,是整個(gè)動(dòng)畫更加流暢。
}
完整腳本如下圖:
?。?、按Ctrl+回車測試動(dòng)畫效果。
二、顏色命令講解
setRGB() 用來設(shè)置實(shí)例的顏色值,注意,這個(gè)值用16進(jìn)制表示,例如 0x000000(黑色)
getRBG() 獲取實(shí)例的顏色值
下面用一個(gè)相對(duì)簡單的例子來說明顏色命令的使用以及如何填充顏色
要想使用顏色命令,我們必須先構(gòu)建一個(gè)Color對(duì)象。方法就是 自定義名字 = new Color("要改變顏色的對(duì)象"),構(gòu)建完color對(duì)象之后,我們就能使用setRGB或getRGB來設(shè)置或獲取顏色了。
步驟:
?。?、新建立一flash文檔,設(shè)置影片大小為550*400
?。病⑦x中時(shí)間軸第一楨,打開動(dòng)作面板,我們現(xiàn)在要用AS來幫助我們創(chuàng)建一個(gè)影片剪輯的實(shí)例。所用到的命令為:
createEmptyMovieClip("實(shí)例名稱",深度)。創(chuàng)建一個(gè)影片剪輯實(shí)例,并起名為cl。輸入下面腳本。
_root.createEmptyMovieClip("cl", 1);
//使用創(chuàng)建命令在舞臺(tái)上創(chuàng)建一個(gè)名字叫cl的影片剪輯實(shí)例,深度為1
接下來我們要對(duì)這個(gè)cl實(shí)例進(jìn)行繪制圖形和填充圖形!現(xiàn)在我們用AS繪制一個(gè)300*100大小的矩形,并且把這個(gè)矩形填充為黑色,腳本如下:
with (cl) {
//使用with命令設(shè)置cl的各個(gè)屬性
beginFill(0x000000, 85);
//開始填充這個(gè)cl實(shí)例,顏色為黑色,透明度為85
lineStyle(1, 0x999999, 100);
//設(shè)置這個(gè)實(shí)例的邊框粗細(xì)為1,顏色為灰色,透明度為100
moveTo(50, 50);
//設(shè)置繪制線條的起點(diǎn)坐標(biāo)
lineTo(350, 50);
lineTo(350, 150);
lineTo(50, 150);
lineTo(50, 50);
//結(jié)束繪制,將在舞臺(tái)上繪制出一個(gè)300*100大小的矩形。
endFill();
//結(jié)束填充,與beginFill()命令對(duì)應(yīng)。
}
OK,現(xiàn)在我們就已經(jīng)創(chuàng)建了一個(gè)黑色的矩形?,F(xiàn)在我們要繼續(xù)實(shí)現(xiàn)變色的功能,也就是當(dāng)鼠標(biāo)移動(dòng)的時(shí)候,這個(gè)矩形會(huì)隨機(jī)變換顏色!就需要用到我們的構(gòu)建Color對(duì)象的命令了。腳本如下:
_root.onMouseMove = function() {//當(dāng)鼠標(biāo)移動(dòng)的時(shí)候就執(zhí)行下面的腳本命令。
cl_color = new Color("cl");//構(gòu)建一個(gè)名字叫cl_color的Color對(duì)象。
yanse = "0x"+random(100)+random(100)+random(100);//用一個(gè)變量yanse來獲取一個(gè)數(shù)值,這個(gè)數(shù)值就是顏色值
cl_color.setRGB(yanse);//設(shè)置矩形的顏色。
};
OK,這個(gè)例子是完全由腳本編寫而成,所有腳本都在時(shí)間軸的第一楨,完整腳本如下圖:
?。?、按Ctrl+回車來測試你的影片吧~會(huì)看到矩形會(huì)隨著鼠標(biāo)的移動(dòng)而不斷進(jìn)行顏色變化。