[Astro] มาเล่น Flash Player 10 กันเถอะ - ตอนที่ 1

[กากก่อเกรียนนู้บ]

จาก Tutorial ในเว็บ gotoandlearn นะครับ เท่าที่ดูตัวแรก (Getting Started) แล้วน่าสนใจมากครับ

- มี Vector class ใช้แทน Array ที่ต้องการกำหนดชนิดของค่าที่จะเก็บด้านใน วิธีใช้คล้ายๆ Array และ Vector ใน C#
(ในวีดีโอจะพูดว่า Type Array)
- Dynamic Text จะ Anti-Alias ให้อัตโนมัติ เมื่อ addChild แถมไม่ต้อง Embeded Font ด้วย (ถ้าเป็น System Fonts)

อ้อ ในวีดีโอเค้าใช้ Mac OS X นะ ส่วนผมจะเอาของ Windows มาให้เล่นกัน

-------------------------------------
เตรียมตัว:
1. โหลด Flash Player 10 Beta จาก http://labs.adobe.com/technologies/flashplayer10/
***สำคัญมาก***
อย่าลืม Uninstall Flash Player ตัวเก่าออกก่อน Install FP 10 Beta ด้วยครับ

2. โหลด Flex 3 Nighly Build จาก http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3
เอา Nightly Build ตัวบนสุด ขนาด 78MB

3. Unzip ไปไว้ที่ไหนก็ได้ แต่ต้องเตรียมตัวเผื่อเข้าหาทาง Command Prompt จะได้ไม่ต้องพิมพ์ยาวๆ

4. ใช้ Text Editor หรือ ActionScript IDE ดีๆ มาใช้ครับ ในวีดีโอใช้ TextMate ผมใช้ Notepad (ฮ่าๆๆ)

--------------------------------------
ความรู้เบื้องต้น
- ActionScript 3.0
- Command Prompt (Start > Run > cmd)
- คำสั่งพื้นฐานใน DOS

*หมายเหตุ: ผมจะใช้วิธีการ Compile ผ่าน cmd เท่านั้นครับ ไม่ใช้ผ่าน Flex Builder

--------------------------------------
Step 0 # ตั้งค่า Flex 3 SDK สำหรับการรันครั้งแรก

*สำหรับ Flex 3 SDK ที่กะเอามาลอง Flash Player 10 Beta อย่างเดียว*
==ไปที่โฟลเดอร์ที่ลง Flex 3 SDK ไว้
=แก้ไฟล์ frameworks/flex-config.xml

1. ที่แท็ก target-player ให้เปลี่ยน 9.0.115

<target-player>9.0.115</target-player>

เป็น 10.0.0

<target-player>10.0.0</target-player>

2. ใน <external-library-path> แก้ Path ของ playerglobal.swc โดยเปลี่ยน 9 เป็น 10

<external-library-path>
    <path-element>libs/player/10/playerglobal.swc</path-element>
</external-library-path>

3. ที่ <library-path> เหมือนกัน

<library-path>
   <path-element>libs</path-element>
   <path-element>libs/player/10</path-element>
   <path-element>locale/{locale}</path-element>
</library-path>

4. เซฟ แล้วปิดไฟล์

*สำหรับใช้สร้างงาน Flex 3 ที่ FP 9 ด้วย*
1. ที่ <external-library-path> เปลี่ยน 9 เป็นคำว่า {targetPlayerMajorVersion}:

<external-library-path>
    <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
</external-library-path>

2. แก้ที่ <library-path> ด้วย

<library-path>
    <path-element>libs</path-element>
    <path-element>libs/player/{targetPlayerMajorVersion}</path-element>
    <path-element>locale/{locale}</path-element>
</library-path>

----------------------------------------
Step 1 # Flash ActionScript
*เราจะมาลอง Vector class ตัวใหม่ กันครับ แล้วก็ให้แสดงคำว่า Hello World ที่หน้าจอ*

1. สร้างไฟล์ TestFlashPlayer10.as ไว้ซักที่นึง เอาแบบเข้าถึงผ่าน Command Prompt ง่ายๆ (เช่น D:\TestFlashPlayer10.as)
2. สร้าง Document Class ขึ้นมาครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

package {
import flash.display.*;

public class TestFlashPlayer10 extends Sprite{ //ต้อง Extends Sprite นะครับ เพราะ Flex/Flash 10 ไม่ใช้ Timeline

public function TestFlashPlayer10():void{


}

}
}

3. import flash.text.* ไว้บน class ด้วยครับ

4. ใส่ SWF Metadata เข้าไปครับ ตัว Compile จะได้เข้าใจว่า swf ที่จะสร้างจะมีคุณสมบัติอะไรบ้าง

โค้ด เลือกทั้งหมด ขยายเนื้อหา


//SWF Metadata
[SWF(width="550", height="400", backgroundColor="#FFFFFF", framerate="30")]


5. ประกาศตัวแปรแบบ private 2 ตัว ตัวหนึ่งเป็น TextField และอีกตัวเป็น Vector ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

private var tf:TextField;
private var vector:Vector.<String>;

**สังเกตว่า ที่ท้าย Vector เราจะต่อด้วย "ชนิดของค่า" ที่จะเก็บไว้ใน Vector ครับ
โดยปกติแล้ว Array จะไม่ได้จำกัดไว้ว่า ค่าที่ใส่ในแต่ละตำแหน่ง จะต้องเป็นชนิดเดียวกัน
แต่ Vector จะจำกัดไว้ครับ ว่าสมาชิกทุกตัวใน Vector จะต้องเป็นชนิดเดียวกัน
โดยในตัวอย่างนี้ ผมให้มันเป็นชนิด String ครับ**

6. ใน Constructor ให้ประกาศวัตถุไว้ดังนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

tf = new TextField();
vector = new Vector.<String>();

7. ต่อด้วย ทดลองกำหนดค่าให้ Vector.. โอ้ เหมือน Array เลย

โค้ด เลือกทั้งหมด ขยายเนื้อหา

vector[0] = "Hello World!";
vector[1] = 5; //Run-time Error

โค้ดด้านบนเกิด Run-time Error แน่นอนครับ เพราะ 5 เป็นตัวเลข ไม่ใช่ String

โค้ด เลือกทั้งหมด ขยายเนื้อหา

vector[0] = "Hello World!";
vector[1] = "5";

ส่วนก้อนนี้ไม่เกิดแน่นอนครับ

8. จัดการกำหนดค่าให้ TextField แล้ว addChild เลย

โค้ด เลือกทั้งหมด ขยายเนื้อหา

tf.text = vector[0];
addChild(tf);

9. โค้ดทั้งหมดจะได้ตามนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

package {
import flash.display.*;
import flash.text.*;

//SWF Metadata
[SWF(width="550", height="400", backgroundColor="#FFFFFF", framerate="30")]

public class TestFlashPlayer10 extends Sprite{

private var tf:TextField;
private var vector:Vector.<String>;

public function TestFlashPlayer10():void{
tf = new TextField();
vector = new Vector.<String>();

vector[0] = "Hello World!";
vector[1] = "5";

tf.text = vector[0];
addChild(tf);
}

}
}

ต่อ Step 2 เลยครับ

-----------------------------------
Step 2 # Compile
*ตอนนี้เรากำลังจะสร้าง swf ขึ้นมาครับ*
1. เปิด Command Prompt (Start > Run > พิมพ์ cmd > OK)
2. ไปที่ Directory ที่ลง Flex 3 SDK ไว้ (ของผมเป็น G:\flex3sdk)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

> g:
> cd flex3sdk
flex3sdk>


3. เข้าไปที่โฟลเดอร์ bin

โค้ด เลือกทั้งหมด ขยายเนื้อหา

flex3sdk> cd bin
flex3sdk\bin>

4. เรียกใช้ mxmlc.exe <ที่อยู่ไฟล์ TestFlashPlayer10.as> (ของผมเก็บไว้ที่ G:\flex3sdk\src\TestFlashPlayer10.as)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

flex3sdk\bin> mxmlc.exe ../src/TestFlashPlayer10.as

5. รอสักครู่ครับ มันจะขึ้นคล้ายๆ แบบนี้

โค้ด เลือกทั้งหมด ขยายเนื้อหา

Loading configuration file G:\flex3sdk\frameworks\flex-config.xml
G:\flex3sdk\src\TestFlashPlayer10.swf (798 bytes)

ถ้าไม่มี Error ก็โอเคแล้วครับ

-----------------------------------
Step 3 # Display

ถ้าลง Flash Player 10 Beta ไว้แล้ว ให้เปิดไฟล์ swf ผ่านทาง Browser ครับ

ผลลัพธ์

-----------------------------------

ไฟล์ที่แนบไว้:
- TestFlashPlayer10.zip

[poloh]

เจ๋งดีครับ

แต่ as3 ยังเขียนไม่เป็นเลย 

[iannnnn]

โอ้ว บวกก่อนอ่าน ตาหวานก่อนตอบ