ทำปุ่มเคลื่อนไหวใส่เว็บด้วย Flash MX (ตอนที่ 3)

รูปที่ 1กลับไปที่ scene 1

ต่อมาให้คลิ้กที่ scene 1 ดังรูปที่ 1 เพื่อออกจากสถานะของปุ่ม

ขั้นต่อไปจะเป็นการเพิ่มข้อมูลใน time line โดยคลิ้กขวาที่ช่องที่ 10 แล้วเลือก Insert Keyframe
ดังรูปที่ 2


      รูปที่ 2 Insert Keyframe


       รูปที่ 3 Test Movie

เมื่อเสร็จแล้วเราจะมาทำการทดสอบปุ่ม โดยการ คลิ้กที่เมนู Control > Test Movie ดังรูปที่ 3

และจะได้ดังรูปที่ 4 ก็เมื่อคุณเอาเมาส์ไปวางที่รูปที่ 4 ก็จะแสดงการเคลื่อนไหวดังรูปที่ 5


        รูปที่ 4


รูปที่ 5 ภาพเคลื่อนไหวเมื่อเอาเมาส์ไปวาง

ตอนนี้คุณก็ได้ปุ่มที่สามารถเคลื่อนไหวได้แล้วนะคะ ถ้าสังเกตดีๆ จะห็นว่าขนาดของฉากหลังของปุ่มนั้นใหญ่เกนกว่าปุ่มมาก ซึ่งจะทำให้เกิดปัญหาเวลาที่คุณนำไปใช้ได้ คราวนี้เราจะมาดูวิธีที่จะทำให้ฉากหลังนั้นมีขนาดเท่ากับปุ่มที่คุณต้องการแสดง โดยดูจาก properties ของปุ่ม ดังรูปที่ 6


รูปที่ 6 Properties ของปุ่ม



  รูปที่ 7 Properties ของฉากหลัง

ในช่อง W คือความกว้างของปุ่ม H คือความสูงของปุ่ม ถ้ากลัวว่าจะจำไม่ได้ก็จดเอาไว้นะคะ เพราะเราต้องนำมาใช้กำหนด ขนาดของฉากหลังกัน ดังรูปที่ 7

ในส่วนนี้ยังมีฟังก์ชันอื่นที่ให้เรากำหนดได้อีกด้วย เช่น สีของพื้นหลัง ถ้าปุ่มที่คุณใช้นั้นเป็นรูปภาพตรงส่วนนี้ ก็ไม่จำเป็นต้องไปกำหนดหรอกค่ะ เพราะรูปจะบังสีพื้นหลังจนหมด แต่ถ้าเป็นตัวอักษรคุณก็สามารถกำหนดได้ตามใจชอบเลยค่ะ


          รูปที่ 8 บันทึกไฟล์


                  รูปที่ 9

ในส่วนของ Frame rate เป็นการกำหนดว่าจะให้ภาพเคลื่อนไหวที่เราสร้างขึ้นมานั้นมีความถี่กี่เฟรมต่อวินาที ค่า default คือ 12 สำหรับ Ruler Unit ก็คือหน่วยที่เราเลือกใช้นั่นเองค่ะ เมื่อได้ขนาดตามที่ต้องการแล้วก็ทำการบันทึกไฟล์เพื่อนำไปใช้งานต่อไปดังรูปที่ 8 และ 9


รูปที่ 10 Publish ไฟล์


   รูปที่ 11 เลือกประเภทของไฟล์


      รูปที่ 12 ไฟล์ที่ได้

เมื่อได้ไฟล์ตามที่ต้องการแล้ว ต่อมาเราจะมาทำการนำไฟล์ที่สร้างขึ้นไปใช้งานโดยไปที่เมนู File> Publish Settings ดังรูปที่ 10 และจะได้ดังรูปที่ 11 เมื่อเลือกประเภทที่ต้องการโดยคลิ้กเลือกที่ Flash (swf) ซึ่งเป็นไฟล์ที่นำไปใช้ในเว็บได้ ประเภท GIF เป็นไฟล์รูปภาพ

เมื่อกดปุ่ม Publish จะได้ดังรูปที่ 12

คุณๆ สามารถที่จะนำการสร้างปุ่มลักษณะนี้ไปประยุกต์ใช้กับภาพเคลื่อนไหวแบบอื่นๆที่ต้องการได้ เป็นยังไงบ้างคะหวังว่าคงไม่ยากเกินกว่าที่คุณผู้อ่านจะเข้าใจนะคะ แล้วตอนต่อไปจะนำเทคนิคอื่นๆมากฝากกันอีกนะคะ

ข้อมูลจาก : http://www.arip.co.th
โดย มรกต อุ่นเสรี