การนำ Flash File เข้ามาใช้ใน Flex ด้วย Flex Component Kit

[Tanakorn Numrubporn]

เคยมั๊ยครับที่เราอยากจะออกแบบ Interface โดยใช้ Flash CS3 แต่ต้องการ Feature บางอย่างที่มีใน Flex

ทาง Adobe ได้เตรียม Flex Component Kit ไว้ให้เพื่อการนี้ วิธีการทำก็แสนจะง่ายดาย

ดังนั้น เรามาเข้าเรื่องกันเลยดีกว่า

การติดตั้ง
1. ก่อนอื่นคุณต้องมีโปรแกรม Flash CS3 Professional และ Flex Builder 3 อยู่ภายในเครื่องอยู่แล้ว
2. ให้ดาวน์โหลด ADOBE Extension Manager ซึ่งเป็นโปรแกรมที่ใช้ในการติดตั้งโปรแกรม Add On ของโปรแกรมภายในชุดของ CS3 สามตัว (Dreamweaver CS3, Flash Professional CS3, Fireworks CS3) ซึ่งไฟล์ที่ดาวน์โหลดได้มาก็เป็นไฟล์ .exe (ในกรณีของ Mac จะเป็นไฟล์ .dmg) แล้วก็ทำการติดตั้งให้เรียบร้อย
3. ให้ดาวน์โหลด FlexComponentKit_en.zip ไฟล์ที่ได้มาจะเป็นไฟล์ .mxp (ซึ่งจะใช้งานได้ก็ต่อเมื่อเราได้ติดตั้ง ADOBE Extension Manager จากข้อ 2 ไปเป็นที่เรียบร้อยแล้ว) จากนั้นก็ดับเบิ้ลคลิกไฟล์ดังกล่าวเพื่อทำการติดตั้งให้เรียบร้อย

สร้างไฟล์ใน Flash
1. ให้เปิดโปรแกรม Flash CS3 ขึ้นมา แล้วเลือกสร้าง Flash File (ActionScript 3.0) ไฟล์ใหม่ขึ้นมา จากนั้นให้ไปเซต Frame Rate ของไฟล์ให้เป็น 24 fps (Flex Component Kit บังคับให้ Frame Rate ต้องเป็น 24 fps เท่านั้น) หลายๆ คนคงจะรู้วิธีการแก้อยู่แล้ว แต่ถ้าใครไม่รู้ก็ไปแก้ต้องจุดที่ผมได้วงไว้ข้างล่างก็ได้ครับ

2. ทำการ Insert MovieClip เข้าไป แล้วให้เซตชื่อของไฟล์เป็น flashLogin จากนั้นก็คลิกปุ่ม Advance เพื่อปรับตรงส่วนของ Linkage โดยให้ทำการเช็คเครื่องหมายถูกหน้า Export for ActionScript ดังรูป

จากนั้นก็คลิก OK ในจังหวะที่คลิก OK นั้น จะมีข้อความเตือนขึ้นมาว่า ไม่สามารถหาไฟล์ flashLogin.as ได้ ซึ่งเราไม่ต้องสนใจ เพราะใน tutorial นี้เราจะยังไม่ได้ใช้ ActionScript Code ครับ

ไว้ถ้าจะเขียน Series ที่ 2 แล้วจะมาขยายความในถึงประโยชน์ของการเขียน Code แยกต่างหากจากไฟล์ .fla ซึ่งเป็นสิ่งที่ Flash CS3 ได้ทำการปฏิวัติวิธีการเขียน Script ภายใน Flash File ให้มีความเป็นระเบียบขึ้น เพราะแทนที่จะฝัง code ไปใน timeline หรือใน component แล้วปล่อยให้มันกระจัดกระจายไปทั่วโปรแกรม แต่ Flash CS3 สามารถที่จะรวบ script ทั้งหมดไปเก็บไว้ใน ไฟล์เดียวได้ ทำให้เวลา maintenance นั้นง่ายและสะดวกขึ้น แล้วที่สำคัญ Code นั้นก็ยังสามารถ แชร์ออกไปให้ระบบภายในเรียกใช้ได้ด้วย

เช่น ถ้าเรากำหนดตัวแปร ภายใน actionscript นี้ เราสามารถเรียกใช้ตัวแปรดังกล่าวใน Flex ได้ด้วย ซึ่งจะทำให้การทำงานระหว่าง Flash กับ Flex นั้นไร้ขีดจำกัดมากขึ้นไปอีก (ผมพบว่าการทำได้ขนาดนี้นั้น เราไม่จำเป็นต้องรอ Flash Catalyst แล้ว)

การเซตค่า Linkage นั้นเป็นการประกาศให้ MovieClip ที่เรากำลังจะสร้างนี้สามารถใช้งานโดยเขียนไฟล์ ActionScript Class แบบแยกต่างหากได้ และทำให้ Flex นั้นมองเห็นรายละเอียดของ Object ภายใน MovieClip ได้ด้วย

3. ภายใน flashLogin ให้ใส่ rectangle ความกว้าง 550 X ความสูง 400 โดยกำหนดให้ x =0 และ y =0 เป็นภาคบังคับของการสร้างไฟล์ Flash สำหรับ Flex Component Kit เลยครับ ที่จะต้องสร้าง movieClip ที่มี Registration Point ให้ x และ y (หรือที่เรียกกันอีกชื่อหนึ่งว่า Registration Point) มีค่าเป็น 0, 0 มิฉะนั้น การนำ MovieClip ดังกล่าวไปวางใน Flex จะส่งผลให้ตำแหน่งของ MovidClip ดังกล่าว ไม่สามารถควบคุมได้ เนื่องจากจะทำให้เกิด Scroll bar ทั้งในแนว Horizontal และ Vertical ได้ โดยจะกำหนด background ให้เป็นสีอะไรก็ได้

4. จากนั้นก็จัดหน้าจอตามแบบที่คุณต้องการ หรือจะเลียนแบบของผมก็ได้ โดยใส่ static text ไปสามตัว และ input text ไปสองตัว ตามรูปที่ด้านล่าง

5. ทำการ Insert KeyFrame ที่ timeline ตำแหน่งที่ 20 และ Insert Frame ที่ตำแหน่ง Timeline ที่ 40 โดยให้เซตชื่อ frame ตรง timeline ตำแหน่งที่ 1 เป็น "loginState" ส่วนตำแหน่งที่ 2 เป็น "successState" ดังรูป

ุ6. ตรงตำแหน่ง Key Frame ที่ชื่อว่า "successState" ให้ทำการลบ input text ทั้งสองพร้อมกับ static text ที่ใช้กำกับ User Name กับ Password แล้วเลื่อน Static Text ที่เป็น title มาตรงกลางจอ จากนั้นก็เปลี่ยน text ให้เป็น อะไรก็ได้ที่แสดงให้เห็นถึงว่าได้ทำการ login สำเร็จแล้ว หรือจะเอาตามผมก็ได้ดังรูป

7. ทำการ Save ให้เป็นไฟล์ชื่อ myLogin.fla

8. จากนั้นก็ให้ไปที่ menu Commands -> Convert Symbol to Flex Component ดังรูป

เมื่อทำการ convert เสร็จแล้ว ถ้าเข้าไปดูตรง library จะเห็นมี component ตัวใหม่โชว์ขึ้นมาหนึ่งตัวชื่อว่า FlexComponentBase ส่วนตรงหน้าต่าง output ด้านล่าง จะมีข้อความปรากฏออกมาแจ้งว่า การใช้ commands นี้จะมีผลอย่างไรบ้าง

9. ไปที่ File -> Publish Settings... หรือกด Crtl+Shift+F12 จากนั้นในหน้าต่าง Publish Settings ตรง tab Formats ให้คลิกตรง HTML (.html) ออก (เนื่องจากเราไม่ต้องการไฟล์ output เป็น HTML File) แต่ให้เช็คเครื่องที่ Flash (.swf) ไว้

จากนั้นคลิกไปที่ tab Flash แล้วตรวจดูว่า ตรงหน้า Export SWC นั้น มีเครื่องหมายติ๊กถูกอยู่หรือไม่ ถ้ายังให้ติ๊กถูกให้เรียบร้อย เพราะไฟล์ SWC นี้จะเป็นไฟล์ที่เราจะนำไปใช้ใน Flex (ไม่ใช้ไฟล์ swf) จากนั้นก็คลิก OK ออกมา

10. เมื่อทุกอย่างเรียบร้อยแล้วก็ให้ทำการกด Crtl+F12 เพื่อทำการ Publish ไฟล์ myLogin.swf และไฟล์ myLogin.swc ออกมา เท่านี้ก็เป็นอันเสร็จสิ้นในส่วนของการสร้างไฟล์ .fla

สร้าง Flex Project

1. หลังจากเปิดโปรแกรม Flex Builder แล้ว ให้สร้าง Flex Project โดยการเลือก File -> New -> Flex Project แล้วตั้งชื่อ Project เป็น FlashLogin ใน Project Location ก็ให้เลือก Use Default Location ตรง Application Type ให้เลือกเป็น Web Application ส่วน Server Technology ให้เลือกเป็น None ดังรูป

จากนั้นให้กดปุ่ม Next แล้วยอมรับค่า Default ทั้งหมด จนถึง finish

2. ทำการ import ไฟล์ swc เข้ามาใน FlashLogin Project ซึ่งจะทำได้สองวิธี คือ วิธีเลือกไฟล์ .swc จาก Build Path ของ Application กับอีกวิธีหนึ่งคือการ copy ไฟล์ swc เข้าไปไว้ในโฟลเดอร์ libs ของ Application โดยตรง ซึ่งผมจะเลือกวิธีที่สองเพราะเป็นวิธีที่เรียบง่ายดี

ก็ให้ทำการ copy ทั้ง myLogin.fla, myLogin.swf และ myLogin.swc ไปไว้ในโฟลเดอร์ libs ที่อยู่ภายใน FlashLogin Project ดังรูป

3. จากนั้นให้เปิดไฟล์ FlashLogin.mxml ให้เราพิมพ์คำว่า <fla เข้าไป แล้วเดี๋ยวเจ้า code assistant จะเข้ามาช่วยเรา โดยการ list component ที่อยู่ภายใน build path ของ application ของเรา ซึ่งในที่นี้ก็คือ movieClip ที่ชื่อ flashLogin ที่เราสร้างไว้ในไฟล์ myLogin.swc นั่นเอง ดังรูป

โดย tag <local: นั้นจะเป็น tag ที่ทาง Flex ทำการสร้างให้แบบอัตโนมัติ (จะเห็นได้ว่า Flex นั้นไม่ได้สนใจเลยว่าชื่อไฟล์ของ swc นั้นชื่อว่าอะไรแต่ Flex จะสนใจ Movie Clip ภายในไฟล์นั้นๆ มากกว่า จะเห็นได้จากการที่ผมตั้งใจตั้งชื่อไฟล์ให้ต่างจากชื่อของ Movie Clip เพื่อจะแสดงให้เห็นว่า Flex จะเห็นแต่ชื่อของ flashLogin เท่านั้น มิใช่ myLogin แต่อย่างใด)

จากนั้นก็ปรับแต่งตำแหน่งของการวางตัว component ตัวนี้ซักเล็กน้อยครับ และกำหนด id ให้มันซักหน่อย โดยพิมพ์ลงไปดังนี้

<local:flashLogin id="flComp" horizontalCenter="0" verticalCenter="0"/>

จากนั้นก็ลองรันโปรแกรมดูครับ จะเห็นโปรแกรมที่มี ตัว component ของ movieClip ปรากฏอยู่บนหน้าจอ ดังรูป

ง่ายดีมั๊ยครับ แทบไม่ต้องทำอะไรเลย

4. จากนั้นให้ไปกำหนด ฟังก์ชันให้กับ CreateComplete event ของ Application เป็น Function ที่ชื่อ init(); โดยมีจะมีเนื้อหาดังนี้

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
layout="absolute" creationComplete="init()">

<mx:Script>
<![CDATA[
private function init():void
{
flComp.currentState = "loginState";
flComp.stop();
}
]]>
</mx:Script>
<local:flashLogin id="flComp" horizontalCenter="0" verticalCenter="0"/>
</mx:Application>

จะเห็นว่าเราจัดการกับ Key Frame ภายใน Movie Clip ของ Flash เหมือนกับการจัดการ State ของ Flex เลย โดยเราสามารถเปลี่ยน State ของ component ได้โดยการกำหนด property ที่ชื่อว่า currentState ให้เป็นค่าของชื่อ state (ในที่นี้คือชื่อ Key Frame) นั้น แต่เนื่องจากใน Flash นั้นเป็นธรรมดาที่ต้องสั่งให้ time line นั้นหยุดหัวอ่านลงบน frame ที่เราต้องการเสียก่อนด้วย function ที่ชื่อ stop() มิฉะนั้น ตัว Movie Clip จะทำการ play แบบวนลูปไปเรื่อยๆ ไม่ยอมหยุดอยู่ที่ frame ใด frame หนึ่ง ดังนั้นเราจึงต้องใส่คำสั่ง stop() เข้าไปที่ component ของเราด้วย

คราวนี้ถ้าลองรันโปรแกรมดู จะเห็นว่ามันหยุดอยู่ที่หน้าจอ login ค้างไว้ ไม่เหมือนกับก่อนหน้าที่ตัว movie clip จะทำการ play ไปเรื่อยๆ แบบวนลูป

5. คราวนี้ให้เราลองเปลี่ยนคำสั่งภายใน function init ให้ใช้ คำสั่งแบบเดียวกับ Flash ดังนี้

private function init():void
{
flComp.gotoAndStop('loginState');
}

ซึ่งถ้าลองรันโปรแกรมดูจะเห็นผลการทำงานเหมือนกับการใช้ currentState เลยครับ ดังนั้น การใช้ Flex Component Kit นั้น เราสามารถเลือกทำงานได้จากสองมุมมอง คือจากมุมมองของ flex หรือ Flash ก็ได้

6. ภายใต้ component <local:flashLogin ให้ใส่ HBOX โดยภายใน ให้ใส่ปุ่มเข้าไปสองปุ่ม โดยให้มี label ว่า "login" กับ "cancel" ตามลำดับ แล้วทำการกำหนด function ให้กับ click event ของทั้งสองปุ่ม เพื่อให้ทั้งสองปุ่มทำการเปลี่ยน key frame กลับไป กลับมาได้ ดังนี้

<local:flashLogin id="flComp" horizontalCenter="0" verticalCenter="0"/>
<mx:HBox horizontalCenter="0" verticalCenter="100">
<mx:Button label="login" click="flComp.gotoAndStop('successState');"/>
<mx:Button label="cancel" click="flComp.gotoAndStop('loginState');"/>
</mx:HBox>

จากนั้นก็ลองรันโปรแกรมดู คราวนี้จะมีปุ่มสองปุ่มไปทับอยู่บน component ของเรา

ในหน้าแรกก็ให้กดปุ่ม login แล้ว key frame ก็จะเป็นไปเป็น 'successState' และเมื่ออยู่ใน state (หรือ key frame) ดังกว่าว ถ้ากดปุ่ม cancel แล้ว key frame ก็จะกลับมาอยู่ที่ 'loginState' ครับ

เป็นไงครับ ง่ายมั๊ย ขอบอกว่าง่ายมากๆ ทำงานกับ Flash ไฟล์ ได้แบบเป็นเนื้อเดียวกันกับ Flex เลยครับ

ถ้ามีเวลาเดี๋ยวจะมาในส่วนของการทำงานที่มีการเขียน code ใน ActionScript ไฟล์ของ Flash ครับ

[Tanakorn Numrubporn]

ผมยังไม่ได้สัมผัส flash cs4 นะครับ ใช้แต่ cs3

ใน CS3 ก็ทำ Export SWC File... ได้ครับ เพียงแต่ผมว่ามันไม่แน่ใจว่าจะได้ swc ที่มี Flex Component kit อยู่ในตัวด้วยหรือเปล่า

คือ ถ้าจะนำ component ที่ได้จาก flash มาใช้นั้นตัว as class ควรจะextends มาจาก mx.flash.UIMovieClip (แทนที่จะเป็น flash.display.MovieClip เหมือนกับ movieclip แบบธรรมดา) ซึ่ง class mx.flash.UIMovieClip นี้จะมีอยู่ใน Flex Component kit เท่านั้น

ซึ่งผมก็ไม่แน่ใจอีกว่าใน Flash CS4 นั้นมีคลาส mx.flash.UIMovieClip อยู่ภายใน native library ของตัว Flash เลยหรือไม่?

ถ้าเมื่อไหร่ผมมีโอกาสได้ใช้ Flash CS4 แล้วจะลองทดสอบดูครับ

[aodto]

บทความดีมากเลยครับ
แต่ผมจำไม่ได้แล้วว่า Flash CS3 มี Convert to SWC หรือเปล่า

เำพราะผมใช้แต่ Flash CS4
ดังนี้เวลาจะ Export Symbol ไปใช้กับ Flex

ก็ใช้วิธีคลิกขวาที่ Symbol ใน Library
แล้วเลือก Export SWC File...

แต่เดี๋ยวผมไปลองวิธีนี้ดูนะครับ

หรือว่ามันแตกต่างกันอย่างไร แนะนำด้วยครับ :)