繪圖及顏色的ActionScript編寫

來源:互聯網
上載者:User
  一、繪圖命令講解
  在使用flash的過程中,難免會進行繪圖的操作。除了用工具面板上的工具繪製圖形之外,我們也可以使用ActionScript來繪製圖形。
  如何繪製線段及命令解釋
  lineStyle(粗細,顏色,透明度) //設定繪製圖形的線條寬度、顏色和透明度
  Moveto(X座標,Y座標) //設定繪圖線條的起點座標
  lineto(X座標,Y座標) //設定線條的結束座標
  現在就用剛才的三個命令在舞台上繪製出來一個300*100大小的矩形。
  步驟:
  1、建立立一個flash文檔。
  2、既然要繪製一個300*100大小的矩形,我們就要先確定矩形4個頂點的座標,然後就可以使用lineto命令進行編寫了。頂點座標如下圖:

 3、選中時間軸的第一楨,開啟動作面板。現在已經確定了矩形的4個頂點,那麼我們就可以來編寫指令碼命令了,請輸入以下指令碼:
_root.lineStyle(1, 0x000000, 100);//設定線條的粗細,顏色和透明度
_root.moveTo(50, 50);//設定開始點的座標。
_root.lineTo(350, 50);
_root.lineTo(350, 150);
_root.lineTo(50, 150);
_root.lineTo(50, 50); //設定結束點座標,整個矩形繪製完畢
  相信大家通過上面的命令就很容易的用AS繪製出所需要的形狀,充分發揮你的想象力,可以通過lineto命令來設定多個點,從而創造出各種各樣的形狀。(下載源檔案)
  熟悉了繪製線條的命令之後我們來用一個例子加深印象。
  操作步驟:
  1、建立立一個flash文檔,在舞台上繪製一個圓,選中它並按F8轉換成影片剪輯,起名為:圓。
  2、按F11開啟庫面板,請將影片剪輯“圓”在舞台上再拖放一個執行個體,使舞台上存在兩個圓的執行個體。如圖:

  3、現在為舞台上兩個執行個體分別起名字為a和b 如下圖:

  4、選中時間軸第一楨,開啟動作面板,輸入以下指令碼:
function draw() { //自己定義一個函數,這個函數起名為draw(可自定),函數的功能是要實現以a執行個體的座標為起點,向b執行個體繪製線條。
_root.clear();//清除舞台上繪製的線條。
_root.lineStyle(1, 0x000000, 90);//設定線條的粗細,顏色和透明度。
_root.moveTo(a._x, a._y);//以a執行個體的座標為起點開始繪製線條。
_root.lineTo(b._x, b._y);//以b執行個體的座標為繪製線條的結束點。
}
draw();//執行函數draw,它將會在a與b之間繪製出一條黑色的線條。
  完成後的時間軸第一楨指令碼如下圖:

  解釋:為了減輕編寫AS的工作量和程式的重複率,可以將某些功能定義為一個函數,例如上面的draw(),在使用的時候,直接執行定義過的函數,就可以完成函數的功能。
  5、現在建立拖動效果,選中舞台上的b執行個體,開啟動作面板,輸入以下指令碼:
on (press) {
//點擊此執行個體,開始拖動
this.startDrag(true);
}
on (release) {
//釋放滑鼠,停止拖動
this.stopDrag();
}
onClipEvent (mouseMove) { //當滑鼠移動,也就是這個b執行個體移動的時候,就執行裡面的程式。
_root.draw();//執行舞台上定義過的draw()函數,開始在a與b之間繪製線條。
updateAfterEvent();//強制更新畫面,是整個動畫更加流暢。
}
  完整指令碼如下圖:

  6、按Ctrl+斷行符號測試動畫效果。(點擊這裡下載該源檔案)


  二、顏色命令講解
  setRGB()  用來設定執行個體的顏色值,注意,這個值用16進位表示,例如 0x000000(黑色)
  getRBG()  擷取執行個體的顏色值
  下面用一個相對簡單的例子來說明顏色命令的使用以及如何填充顏色
  要想使用顏色命令,我們必須先構建一個Color對象。方法就是  自訂名字 = new Color("要改變顏色的對象"),構建完color對象之後,我們就能使用setRGB或getRGB來設定或擷取顏色了。
  步驟:
  1、建立立一flash文檔,設定影片大小為550*400
  2、選中時間軸第一楨,開啟動作面板,我們現在要用AS來協助我們建立一個影片剪輯的執行個體。所用到的命令為:
createEmptyMovieClip("執行個體名稱",深度)。建立一個影片剪輯執行個體,並起名為cl。輸入下面指令碼。
_root.createEmptyMovieClip("cl", 1);
//使用建立命令在舞台上建立一個名字叫cl的影片剪輯執行個體,深度為1
  接下來我們要對這個cl執行個體進行繪製圖形和填充圖形!現在我們用AS繪製一個300*100大小的矩形,並且把這個矩形填充為黑色,指令碼如下:
with (cl) {
//使用with命令設定cl的各個屬性
beginFill(0x000000, 85);
//開始填充這個cl執行個體,顏色為黑色,透明度為85
lineStyle(1, 0x999999, 100);
//設定這個執行個體的邊框粗細為1,顏色為灰色,透明度為100
moveTo(50, 50);
//設定繪製線條的起點座標
lineTo(350, 50);
lineTo(350, 150);
lineTo(50, 150);
lineTo(50, 50);
//結束繪製,將在舞台上繪製出一個300*100大小的矩形。
endFill();
//結束填充,與beginFill()命令對應。
}
  OK,現在我們就已經建立了一個黑色的矩形。現在我們要繼續實現變色的功能,也就是當滑鼠移動的時候,這個矩形會隨機變換顏色!就需要用到我們的構建Color對象的命令了。指令碼如下:
_root.onMouseMove = function() {//當滑鼠移動的時候就執行下面的指令碼命令。
cl_color = new Color("cl");//構建一個名字叫cl_color的Color對象。
yanse = "0x"+random(100)+random(100)+random(100);//用一個變數yanse來擷取一個數值,這個數值就是顏色值
cl_color.setRGB(yanse);//設定矩形的顏色。
};
  OK,這個例子是完全由指令碼編寫而成,所有指令碼都在時間軸的第一楨,完整指令碼如下圖:

  3、按Ctrl+斷行符號來測試你的影片吧~會看到矩形會隨著滑鼠的移動而不斷進行顏色變化。(點擊這裡下載該源檔案)



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。