แกะกล่อง Adobe Flash Catalyst beta

[Bellbells]

ผมว่าตัวโปรแกรมตอนนี้มันดูหน่วงๆ นะ
ลองเล่นนู่นเล่นนี่ดู สนุกดี เจ๋งตรงที่ import file pdf ai ได้นี่แหละ

[ณัฏฐ์]

แปะก่อน +

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

ความจริง import AI ได้ไม่แปลกนะ แต่ PDF นี่สิ เจ๋งเลย

ขออธิบาย Framework ก่อนนะครับ ว่ามันดียังไง
คือปกติเนี่ย การที่เราจะต้องทำงานอะไรซักชิ้นหนึ่ง มันก็จะมีขั้นตอนหลายขั้นตอน ทีนี้ทำไปหลายๆ ครั้งมันก็ลำบาก
Framework เลยลงมาช่วยด้านนี้ครับ เราสามารถทำงานได้เหมือนเดิม แต่ง่ายและเป็นระบบขึ้น

Flex Framework ล่ะ? มันก็คือสิ่งที่ไป(เหมือนกับ)ครอบ Flex ไว้ ทำให้เราใช้งาน Flex ได้ง่ายขึ้น

แล้ว Flash Catalyst ก็จะนำเอา Flex Framework น่ะมาเป็นแกนหลัก แล้วพัฒนาส่วนอื่นต่อให้เราออกแบบหน้าจอได้ง่ายขึ้น สะดวกขึ้น
ดูจากแผนภูมิก็ตามนั้นเลยครับ ครอบทับกันไปมา



ส่วน AVM2 ล่ะ? AVM2 สร้างขึ้นมา เพื่อให้รันงานที่สร้างด้วย AS3.0 ได้ครับ มันคือแกนหลักของตัว Flash นั่นเอง
ไม่ว่าจะสร้างด้วย Flex, AIR หรือแม้กระทั่งจาก Flash เอง ทุกครั้งที่เราคอมไพล์ มันจะทำการแปลงโค้ดเป็นในรูป ActionScript 3.0
จากนั้นก็ทำงานบน AVM2 ตัวนี้

คล้ายๆ กับเวลาไปว่ายน้ำ ก่อนลงสระ ทุกคนก็ต้องเปลี่ยนชุดเป็นชุดว่ายน้ำ ล้างตัว แล้วก็ลงสระเดียวกัน
คนที่อยู่ในสระเดียวกัน ก็สามารถติดต่อกันได้สะดวก
(สมมติมี 1 สระใหญ่ๆ นะครับ และทุกคนพูดภาษาเดียวกัน)

แล้วนี่ก็เป็นสาเหตุที่เราไม่สามารถทำงาน AS2 ร่วมกับ AS3 ได้ เพราะมันอยู่คนละ AVM กัน

จินตนาการว่า สระว่ายน้ำมี 2 สระ คนที่มาว่ายน้ำมี 2 กลุ่มใหญ่ๆ และพูดคนละภาษา
คนกลุ่มแรกลงสระหนึ่ง และกลุ่ม 2 ก็ลงอีกสระหนึ่ง
ทั้งสองกลุ่มนี้ ก็จะติดต่อกันได้ภายในสระเดียวกัน คุยกับอีกสระหนึ่งไม่ได้
(สมมติว่าแต่ละสระมันมีกำแพงใสหนาๆ กั้นอยู่ มองเห็น แต่คุยกันไม่ได้)

พอมองโครงสร้างหลักๆ คร่าวๆ แล้วนะครับว่า Flash Catalyst มันทำงานร่วมกับคนอื่นได้ยังไง

เดี๋ยวผมขอเบิ้ลโพสต์ แล้วแปะตอนตกแต่ง Component ต่อนะครับ

[JΛNΣ]

ความรู้เน้นๆ

[X11]

% (modulo)

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

เบิ้ลล
โอว ปั่นกันกระจุย มีคนตัดหน้าคุณตั้ง 2 คนแน่ะ




ทดสอบโปรแกรม ตอน 1: ใช้งานคอมโพเนนท์
รูปเยอะหน่อยนะครับ

อย่างที่ผมว่าไว้แต่แรกเลยว่า Flash Catalyst มันสร้างขึ้นจาก Flex
ดังนั้นมันก็ต้องมี Component (หรือคอมโพเนนท์) มาให้ใช้งานกันแน่ๆ
แต่ว่า.. คอมโพเนนท์ที่มีให้เลือก มีน้อยกว่าใน Flex Builder นะครับ

เรามาเริ่มกันที่ Button หรือปุ่มดีว่า..

เอาละ ผมเริ่มโดยการลาก Button ออกมาจากหน้าต่าง Component ขยายนิดนึงให้เห็นชัดๆ
หน้าต่าง HUD (สีดำ) ก็จะแสดงให้เราเห็นว่า เราสามารถ
- ปรับแต่งหน้าตา (Edit Button Appearance)
- ปรับรูปแบบการโต้ตอบในงาน (Application Interactions) <= มันคือการใส่ Event หรือเหตุการณ์ของ Application (เช่น รอ App โหลดเสร็จก่อน)
- ปรับแบบการโต้ตอบแบบตามใจชอบ (Custom Interactions) <= ปรับแต่งเหตุการณ์ที่ใส่เข้าไปว่าให้ทำอะไร (เช่น ตอนคลิก ตอน rollOver)



เริ่มที่ ปรับแต่งหน้าตาดีกว่าครับ
จะเห็นว่า เราสามารถปรับแต่งได้ 4 สถานะ คือ
- Up  =>  สถานะตอนอยู่เฉยๆ
- Over  =>  สถานะตอนเอาเมาส์ไปชี้ (วางบนปุ่ม)
- Down  =>  สถานะเมื่อเอาเมาส์ไปคลิก (กดปุ่มเมาส์ลง แต่ยังไม่ปล่อย)
- Disabled  =>  สถานะเมื่อมีการสั่งให้ปุ่มใช้งานไม่ได้

ลองกดที่สถานะไหนก็ได้ครับ แล้วมันก็จะเข้ามาข้างในปุ่มเลย
จะเห็นด้านบนว่า มันจะคล้ายๆ กับ Flash เลยครับ คือมีเป็น Page ให้เลือกกดว่าเราจะแก้ที่สถานะใด

ผมลองที่ Up ดู



ด้านในจะมีกล่องสีเหลี่ยม กับ TextField อันนึงครับ อะผมลองแก้แบบดู
ปรับสารพัดได้ตรงหน้าต่าง Properties ครับ (รูปด้านล่างคือ Properties ของกล่องสี่เหลี่ยมครับ)



จากนั้นก็ลองแก้ไปหลายๆ Page (ซึ่งต้องมีการก๊อป แปะ ไปหลายๆ ครั้ง )
เสร็จแล้วกับสู่ Stage โดยการคลิกตรงชื่อ Project ครับ (ผมตั้งว่า test)



เมื่อเรากลับเข้า Stage แล้วจะพบว่า..
เราขยายขนาดปุ่มไม่ได้แล้ว
อะไรกันเนี่ย!! แปลว่าถ้าจะขยายขนาด ต้องกลับเข้าไปขยายข้างในทีละ Page ใช่มั้ย
โอ้แม่จ้าว  



อ้อ เราสามารถเปลี่ยน Label ของปุ่มได้ที่หน้าต่าง Properties เช่นกันครับ
(แต่ผมขอละไว้ เพราะความขี้เกียจส่วนตัว)

ทดสอบปุ่ม โดยการกด Ctrl + Enter ครับ
หน้าต่างแสดง Progress การ Compile ก็จะเด้งขึ้นมา
(ซึ่งหน้าตามันเหมือนของ Flex Builder เป๊ะๆ)




หลังจากคอมไพล์เสร็จแล้ว มันจะเปิดเบราเซอร์ขึ้นมา พร้อมกับหน้า Main.html ครับ
เราจะเห็นปุ่มที่วางแปะไว้บน Stage แล้ว ให้ลองลูบๆ คลำๆ กดๆ อิคึๆ อิไต๊ย์ๆ ดู



อ้าห์ หมดแล้ว ง่ายจริงๆ



ข้อควรระวัง
การปรับแต่งปุ่ม ถ้าเผลอลบ TextField ทิ้งแล้วแปะอันใหม่ลงไป จะทำให้เวลารันแล้ว
Label ปุ่มไม่ขึ้นครับ มันจะเป็น (Label) หรือคำอื่นๆ

ให้ทำการคลิกที่ TextField แล้วไปที่ HUD เลือก Convert Artwork to Button Part
แล้วคลิกที่ Label ครับ




แล้วเดี๋ยวคราวหน้ามาต่ออีกครับ แหะๆ

[Bellbells]

เมพขิงๆ  +

[iSharp]

ไม่เป็นไรเดี๋ยวจ้างก่อทำ 

[Ah!]

+++

[ej_sing]

  xxxx







ไม่ได้ใช้แน่ๆเลย    แต่ +

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

ผมว่าน้าแอ๊ดต้องเหมาะกับ Flash Builder 4 แน่ๆ เลย

[iSharp]

มีงานตัวอย่างสักตัวมั้ยครับ

[ej_sing]

ผมว่าน้าแอ๊ดต้องเหมาะกับ Flash Builder 4 แน่ๆ เลย

จริงรึ ในแง่ใดบ้าง ?

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

แบบโค้ดท่วมหัวไรงี้อะครับ

มีงานตัวอย่างสักตัวมั้ยครับ

เอ็งก็ลองโหลดละไปเล่นดูดิ ไม่ต้องเขียนโค้ดซักแอะ

[iSharp]

งัฟน์ว์ฮ์ต์