[as3] 筆記:flash中用as繪製基本圖形

其實這種東西是基本中的最基本吧

應該是難度1的作業吧,跟hello world一樣的東西

不過我還是今天才會 |||

如果你要畫一個圓形

在flash中直接打

var ball:Shape = new Shape();

//創造一個圓形物件,名叫ball

ball.graphics.beginFill(0xff0000);

//他的填色(十六進位,r-g-b,所以這是紅色)

ball.graphics.drawEllipse(0,0,100,100);

ball.graphics.drawCircle(0,0,100);

//他的屬性吧:x,y,半徑

ball.graphics.endFill();

//結束繪製

//

//加到場景上

addChild(ball);

ball.x = 50;

ball.y = 50;

或許你會問,為什麼他的graphics屬性有x,y,外面還要再設定x,y?

因為外面的ball.x ball.y指的是ball這個DisplayObject的屬性,而在()內部的則是graph的屬性

通常我們直接控制外部的就好,內部的應該很少去改所以設成0吧。

.

DisplayObject常用的屬性有

x, y:距離此場景原點的向量

width, height:長寬,以pixel為單位

scaleX, scaleY:長寬比例,1表示縮放100%不變

rotation:旋轉,順時針,單位為度數

alpha:透明度,值在0~1之間,0表示完全透明。註:as2中是0~100

visible:顯示/不顯示,true/false。

較特殊的

mouseX, mouseY:目前滑鼠和此物件的註冊點的距離,是唯獨

name:指向此物件的名稱

parent:指向富容器的名稱;root:指向根物件。如果此物件不再顯示列表中,則指向null

.

DisplayObject幾乎是flash中最重要的一個類別,因為所有看得到的東西都是繼承他

更多資訊請閱讀adobe官網的說明文件

.

另外附上一點,as2中的屬性喜歡加_,例如ball._x

但as3為改掉了,比較貼近習慣,因為某些物件導向語言_x有私有屬性的意思。

.

如果你想畫橢圓形

drawCircle改成

ball.graphics.drawEllipse(0,0,100,100);

//x, y, x寬, y高

應該還滿好理解的,ellipse就是橢圓嘛

.

如果想在as編輯器中直接使用,如flex或flash developer,不想透過flash的話

需要加一行匯入shape的類型

package
{
import flash.display.Sprite;
import flash.display.Shape;

public class test1 extends Sprite
{
public function test1():void
{

var ball:Shape = new Shape();
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0,0,100);
ball.graphics.endFill();
addChild(ball);

}
}
}

應該滿好理解的吧?

啥? 你問我什麼是類型(class)? 這就要牽扯到物件導向阿,其實我也是小菜鳥,問我會誤導阿。

2 thoughts on “[as3] 筆記:flash中用as繪製基本圖形

  1. 畫圓 square.graphics.drawCircle(300,100,50); //300,100是坐標,50是半徑
    畫橢圓 square.graphics.drawEllipse(180,150,50,80)//180,150是坐標,50,80是上半和下半
    畫矩形 square.graphics.drawRect(50,50,300,200);前面2個仍然是坐標,300是長200是寬如果相等就是正方形
    帶圓角的矩形 square.graphics.drawRoundRect(50,50,300,200,30,30)前面參數跟矩形一樣,後2位30,30控制圓角
    drawRoundRectComplex()是畫出復合矩形
    .
    參考http://www.ajaxcn.net/archives/216

  2. 畫線:lineStyle()
    lineStyle參數(寬度,顏色,透明度)
    詳細設定可參考http://help.adobe.com/zh_TW/as2/reference/flashlite/WS5b3ccc516d4fbf351e63e3d118ccf9c47f-7d22.html

迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s