เบิ้ลลโอว ปั่นกันกระจุย มีคนตัดหน้าคุณตั้ง 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 ครับ
แล้วเดี๋ยวคราวหน้ามาต่ออีกครับ แหะๆ