สอนทำ ProgressBar และ ปุ่ม Play สำหรับ Flash CS4 (AS2.0)

ขอทำความดีบ้างล่ะกันครับ…(โพสลงเป็นเว็บที่ 3 แระ)
จะมาสอนทำ  ProgressBar และ ปุ่ม Play สำหรับ Flash กันนะครับ สำหรับคนที่ยังทำไม่เป็น
แต่ถ้าจะลองทำ แอนิเมชั่น ยาวๆ ก็ควรจะทำไว้นะครับ..**

เวอร์ชั่นที่ผมจะมาสอนนี้เป็น Flash CS4 นะครับ แต่สามารถทำได้กับแฟลช ตั้งแต่เวอร์ชั่น 2004 ขึ้นมา ใครใช้ เวอร์ชั่นเก่าก็ไม่ต้องห่วงครับ แต่อาจต้องงมนิดหนึง

ว่าแล้วก็มาเริ่มกันเลยครับ…

1. เริ่มแรกก็เปิดงานที่เรา อาจทำเสร็จเรียบร้อยแล้วขึ้นมาแก้ไข // หรือถ้าจะเริ่มงานใหม่ก็ได้เช่นกัน …จริงๆการทำ ProgressBar และ ปุ่ม Play ก็ควรจะทำตั้งแต่ก่อนสร้างงานอยู่แล้วล่ะครับ

2. ดูตามภาพบนนะครับ จะเป็นงานตัวอย่างที่ทำทำไว้ก่อนแล้ว โดยตัวงานหลักๆ จะมี 2 เลเยอร์ด้วยกัน คือ บอล และ พื้น ส่วนเลเยอร์บนสุด ให้เราสร้างขึ้นมาเพิ่มครับ สำหรับใส่ Code AS2.0 นั่นเอง ลองสังเกตภาพนี้นะครับ ที่เฟรมแรก ของเลเยอร์บอล  จะไว้สำหรับทำปุ่ม Play นะครับ ส่วนของเลเยอร์พื้น ก็ไม่มีอะไรครับ
แค่พื้นหลังธรรมดา

3. มาดูรูปที่ 2 กันครับ ภาพนี้ผมขยายทามไลน์ ให้ใหญ่ขึ้นจะได้ดูชัดๆ…โดยจะมีตัวเลขบอกเอาไง้ด้วย สำหรับ เฟรมที่เราจะเขียน Code กัน
มือใหม่ อาจจะยังงงกันอยู่…แต่ก็ต้องพยายามมั่วเอาล่ะครับ เดี๋ยวจะสรุปให้ตอนท้ายอีกทีครับ
-ขอให้เข้าใจตามนี้นะครับ จากรูปด้านบนนี้ เฟรมที่ 3 – 22 คืองานที่ทำเสร็จแล้วครับ แล้วเราต้องการจะเพิ่ม ProgressBar และ ปุ่ม Play ทีหลัง
– โดย เราจะต้องทำการดึง งานของเรา ออกไปอีก เพื่อเว้นว่างไว้ 2 เฟรม คือ เฟรม 1 สำหรับทำ ProgressBar และ เฟรม 2 สำหรับทำ ปุ่ม Play

4.ในหมายเลข 1 ให้เราใส่ Code ตามภาพครับ //วีธีการก็คือคลิกที่เฟรม แรกของเลเยอร์ AS2.0 แล้วกดปุ่ม F9 จะมีหน้าต่างสำหรับเขียน Code โผล่ขึ้นมาครับ
เมื่อเขียนเสร็จก็กดปิดได้เลย

5. ต่อไป ก็ให้เรา เขียน Code เช่นเดียวกัน ตามภาพนี้ ในหมายเลข 2 และ 3 ครับ ซึ่งก็คือ เฟรมที่ 2 และ 22 ครับ
6. มาดูเลยเยอร์ บอล กันบ้างครับ หมายเลข 4 เราจะใส่ ตัว ProgressBar ลงไปครับ มาดูขั้นตอนกัน

7. ให้กดปุ่ม Ctrl+F7 เราก็จะพบหน้าต่างตามภาพครับ ให้คลิกลาก ProgressBar ออกมา จัดไว้ในหมายเลข 4 นะครับ (อย่าใส่ผิดเลยอร์ผิดเฟรมล่ะ)

8. เราจะได้ตามภาพนี้ล่ะครับ ให้เราคลิกเลือก ProgressBar สังเกตว่ามันจะขึ้นกรอบสีน้ำเงิน

9. ให้ดูที่ หน้าต่าง Properties นะครับ แล้วใส่ลงไปตามภาพ ถ้าเป็น Flash CS3-CS4 จะเหมือนในภาพครับ ถ้าเป็น Flash จะอยู่ ตรงบริเวณทามไลน์ ด้านล่าง

10. ก็ถือว่าเสร็จขึ้นตอนการทำ ProgressBar ครับ //ลองทดสอบดูด้วการ กด Ctrl+Enter 2 ครั้ง ต่อเนื่องกันนะครับ แล้วต้องตั้งความเร็วเน็ตในการทดสอบเป้น 56K ดูจะได้เห้นผลชัดๆ ถ้ายังงง เดี๋ยวจะมาอธิบายให้ทีหลังนะครับ แต่ที่แน่ๆ ทำให้เสร็จแล้วอัพขึ้นเว็บเลยครับ จะได้เห็นชัดๆ
ต่อไปก็มาทำ ปุ่ม Play กันครับ

11.ที่หมายเลข 5 นะครับ (เลเยอร์ บอล เฟรมที่ 2) ผมทำการวาดรูปดาว และพิมพ์ข้อความ ว่า Play ลงไป ดูตามภาพนะครับ

12. เมื่อพิมพ์เสร็จแล้วให้คลิกที่ข้อความ แล้วกด F8 ครับ จะพบหน้าต่างตามภาพ ให้ตั้งค่าตามนั้น แล้วกด OK ข้อความของเราก็จะเปลี่ยนเป็นซิมโบนชนิดกราฟิก

13. ทำเหมือนเดิมครับ คลิกเลือก ที่ข้อความ Play ให้ขึ้นกรอบสีน้ำเงิน และ กด F8 ตังค่าเป็นแบบปุ่มกด เราก็จะได้ซิมโบนปุ่ม Play แล้วล่ะครับ

– ลองสังเกตดูที่ไลบราลี่ เราจะได้ตามภาพนะครับ

14. ต่อมาก็ ใส่ Code ครับ คลิกเลือกที่ ปุ่ม Play แล้วกด F9 (อยากให้กดแล้วไปเริ่มเล่น ที่เฟรมไหนก็แก้ได้เลยครับ) *ในการทำปุ่ม Replay ก็ทำเช่นเดียวกันครับ

15.ทีนี้ให้ดับเบิลคลิกเข้าไปในปุ่ม Play ครับ ให้เราสร้างเลเยอร์ขึ้นมาอีก 1 ครับ ในเลเยอร์บนให้ กด F6 ขึ้นมาเป้น 3 คีย์เฟรม //จะได้เหมือนภาพ

16.คลิกเลือกเลเยอร์บน เฟรมที่ 2 แล้วคลิกที่ข้อความ Play ของเรา ..ซึ่งตรงนี้ให้เราลองเปลี่ยนสี ดูนะครับ เปลี่ยนที่ Properties ได้เลย(ต้องมีคน งง)

17. ที่เลเยอร์ ล่าง ให้เราทำการวาดรูปสี่เหลี่ยมแบบไร้ขอบขึ้นมานะครับ ให้ล้อม ข้อความ Play ของเราเอาไว้

18. ทำให้ภาพสี่เหลี่ยม ที่เราวาดขึ้นมาโปร่งใสซะ //โดยการคลิกเลือกรูปสี่เหลี่ยมแล้วไป ตรง Properties ตามภาพ เปลี่ยน จาก 100% เป็น 0 ซะ

แต่นี้ก็น่าจะเสร็จหมดแล้วครับ

ลองๆดูละกันครับ…เดี๋ยวมามาเพิ่มเติมให้อีกทีหลัง..

http://www.thebggaro.co.cc