Back to Top
sunshine
Untitled Document

   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


  สาระการเรียนรู้

1. เข้าใจถึงวิธีการเรียกใช้สคริปต์ในพาเนล Actions 
2. มีความรู้เกี่ยวกับคำสั่งพื้นฐานในการสร้างงานที่โต้ตอบกับผู้ใช้ 
3. มีความรู้ความเข้าใจเกี่ยวกับการเขียนคำสั่งโดยใช้ ActionScript 2.0 
4. มีความรู้ความเข้าใจเกี่ยวกับการเขียนคำสั่งโดยใช้ ActionScript 3.0




มาทำแบบทดสอบก่อนเรียนก่อนนะคะ
    แบบทดสอบ หน่วยที่ 15



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  วิธีการเรียกใช้สคริปต์ในพาเนล  ACTIONS

       วิธีการเรียกใช้สคริปต์ในพาเนล ACTIONS  หรือการใส่แอ็คชั่นให้กับมูฟวี่นั้น   มีวิธีการเขียนผ่านโหมดการทำงาน  2  โหมด  คือโหมด  Script  Assist  และโหมด  Expert  ซึ่งเราสามารถสลับไปตามความถนัดได้ทำได้โดยคลิกที่ปุ่ม  Script  Assist  เมื่อถูกกดจะเข้าสู่โหมด  Script  Assist   และเมื่อกดปุ่ม  Script  Assist  ออกก็กลับสู่โหมด  Expert  ดังเดิม

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    การใส่แอ็คชั่นด้วยการเรียกคำสั่งจากผู้ช่วยในโหมด Script Assist

       โหมด Script Assist เป็นโหมดผู้ช่วยเขียนสคริปต์  เราสามารถเขียนคำสั่งโดยการเลือกจากรายการคำสั่งที่ถูกจัดเตรียมไว้ให้  ส่วนค่าข้อมูลต่าง ๆ  ที่จำเป็นสำหรับบางคำสั่งก็จะมีช่องว่างให้เรากรอกค่าที่จะกำหนดลงไปได้เลย  วิธีนี้จึงง่ายสำหรับการเขียนโค้ดและเกิดข้อผิดพลาดได้อยาก  เพราะเราไม่ได้พิมพ์คำสั่งเข้าไปเองโดยมี 2 วิธีเข้าสู่การเขียนสคริปต์  ดังนี้

 

 วิธีที่ 1  เลือกสคริปต์จากเมนูใน  Script  panle  Toolbar

        ให้คลิกเมาส์ที่เครื่องหมาย  +  ใน  Script  panle  Toolbar  จะเกิดเมนูขึ้นมาให้เลือกแอ็คชั่นที่เราต้องการ



  วิธีที่ 2 เลือกสคริปต์จากเมนูใน Actions Toolbox



 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

    การใส่แอ็คชั่นด้วยการเขียนคำสั่งในโหมด Expert

        ในโหมด Expert นี้ เป็นการเขียนคำสั่งต่างๆ ได้โดยตรงใน Actions panel ด้านขวา ซี่งเราสามารถจะใส่หรือแก้ไขค่าต่างๆในโค้ดโปรแกรม หรือจะใช้งานร่วมกับการเลือกแอ็กชั่นจากรายการใน Actions Toolbox ด้านซ้ายเหมือนที่เคยทำในโหมด Script Assist ก็ได้

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

การกำหนดแอ็คชั่นบนเฟรม

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



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

   รู้จักกับแอ็คชั่นพื้นฐาน

        โปรแกรมแฟลชได้บรรจุคำสั่งไว้อย่างเป็นหมวดหมู่  คำสั่งพื้นฐานที่มักจะใช่กันบ่อยในการสร้างงานที่โต้ตอบกับผู้ใช้  และช่วยให้ผลงานน่าสนใจมากยิ่งขึ้น  มีดังนี้

คำสั่ง

คำอธิบาย

goto

ให้ไปแสดงเฟรมหรือซีนที่เราต้องการ

Play

ให้แสดงงานแอนิเมชั่น

Stop

ให้หยุดแสดงงานแอนิเมชั่น

URLRequest

เป็นการสั่งให้เปิดบราวเซอร์เพื่อใช้ลิงค์กับเว็บเพจ



      ตัวอย่างต่อไปจะแสดงวิธีการใช้คำสั่งพื้นฐานเหล่านี้โดยแต่ละตัวอย่างสามารถเขียนได้ทั้ง  ActionScript  เวอร์ชั่น 2.0 หรือ 3.0  ก็ได้  ในที่นี้จะใช้แบบใดแบบหนึ่งในแต่ละตัวอย่างเท่านั้น โดยมีเวอร์ชั่นกำกับอยู่

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

ตัวอย่างการเขียนคำสั่ง  โดยใช้ ActionScript 2.0

 การใช้คำสั่ง  goto

       คำสั่ง goto  เป็นคำสั่งที่สั่งให้ไปแสดงเฟรมที่เราต้องการ  โดยปกติเราจะเห็นว่าการเล่นแอนิเมชันของเราจะเป็นแบบวิ่งไปตามเฟรมโดยเริ่มจากเฟรมแรกและวิ่งไปเรื่อยๆ ทีละเฟรม  แต่เมื่อใช้คำสั่งgoto เราสามารถสั่งให้เล่นเฟรมที่ 10 โดยที่ไม่ต้องเล่นเฟรมที่ 1 ก็ได้  หรือสั่งให้เล่นถึงเฟรมที่ 10  แล้วให้กระโดดไปเล่นเฟรมที่ 20 ก็ได้  เมื่อเราดับเบิ้ลคลิกที่คำสั่ง goto  จะมีคำสั่งที่ให้เรากำหนดดังนี้  เมื่อดับเบิ้ลคลิกที่ goto จะปรากฏคำสั่งสำหรับการปรับรายละเอียด



Scene   กำหนดว่าเราต้องการจะไป  Scene  ไหน  (ใช้กรณีที่เราสร้างแฟลชมูฟวี่  Fiash  movie มากกว่า 1 Scene)

Type  เป็นการกำหนดรูปแบบของ goto  ว่าจะเป็นแบบไหน  ซึ่งมีเงื่อนไข 5 แบบ

  Frame  Number  เป็นการกำหนดให้ใส่ตัวเลขว่าต้องการไปยังเฟรมที่เท่าไร
  Frame Label  เป็นการกำหนดให้ใส่ชื่อของเฟรม (การใช้วิธีนี้ก็เพื่อป้องกันการอ้างอิงผิดเฟรม  กรณีที่เรามีการเพิ่มหรือลดเฟรม  ทำให้ต้องเปลี่ยนหมายเลขเฟรมใหม่)
  Expression เป็นการคำนวณค่าเพื่อให้ได้เฟรมที่ต้องการ  เช่น goto  (2+3) คือสั่งให้ไปยังเฟรมที่ 5  หรือ goto  ( Y + 1)  เป็นต้น (กรณีนี้  Y เป็นตัวแปรที่ถูกกำหนดขึ้น)
 Next  Frame  เป็นการสั่งให้ไปยังเฟรมถัดไป
  Previous  Frame  เป็นการสั่งให้ไปยังเฟรมก่อนหน้า

Frame  เป็นการกำหนดว่าต้องการจะไปเฟรมไหน  ซึ่งอาจจะอยู่ซีนเดียวกัน  หรือต่างซีนกันก็ได้

Go to  and  play  เป็นการกำหนดว่าเมื่อกระโดดข้ามเฟรมแล้วให้เล่นเฟรมนั้นต่อไป
Go to  and  stop   เป็นการกำหนดว่าเมื่อกระโดดไปยังเฟรมใดก็ให้หยุดที่เฟรมนั้นเลย

 

  ตัวอย่างการใช้คำสั่ง  Goto 

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




     ปุ่มที่   1   ชื่อปุ่ม  Number   เป็นการกำหนดให้ใช้ตัวเลขในการเลือเฟรม
     ปุ่มที่   2   ชื่อปุ่ม  Lable  เป็นการเลือกเฟรมจากการตั้งชื่อเฟรม
     ปุ่มที่   3   ชื่อปุ่ม  Expression  เป็นการใช้การคำนวณจากตัวเลข  เพื่อนำผลลัพธ์มาใช้ในการเลือกเฟรม
     ปุ่มที่   4   ชื่อปุ่ม  Next  เป็นการสั่งให้เลือกเฟรมถัดไป
     ปุ่มที่   5   ชื่อปุ่ม  Previous   ให้กลับไปที่เฟรมก่อนหน้า

ผลลัพธ์ของการกดปุ่มทั้งห้า  เราจะเป็นผู้กำหนดโดยใช้  ActionScript  เป็นตัวควบคุม  ซึ่งเราต้องการให้ทุกครั้งที่กดปุ่มต่างๆ หน้าจอจะแสดงเฟรมภาพ  ดังนี้

 ปุ่ม Number

กำหนดให้ทุกครั้งที่กดปุ่ม   Number  จะเป็นการเลือกเฟรม  ที่ 1 เสมอ



 ปุ่ม Lable

กำหนดให้ทุกครั้งที่กดปุ่ม   Lable   จะเป็นการเลือกเฟรมที่ 2 เสมอ

 ปุ่ม  Expression

กำหนดให้ทุกครั้งที่กดปุ่ม  Expression  จะเป็นการเลือกเฟรมที่ตรงกับค่าสมการที่เราได้ตั้งไว้ใน  ActionScript  ซึ่งเรากำหนดให้เลือกเฟรมที่ 1+2 นั่นก็คือเฟรมที่ 3 นั่นเอง



 ปุ่ม  Next 

        กำหนดให้ทุกครั้งที่กดปุ่ม Next  จะเป็นการเลือกเฟรมถัดไปหรือต่อจากเฟรมที่กำลังแสดง  อยู่เสมอ
ตัวอย่าง  ขณะกำลังเปิดเฟรมที่ 3 เมื่อคลิกปุ่ม Next  จะเป็นการสั่งให้เปิดเฟรมที่ 4 ทันที



 ปุ่ม  Previous 

กำหนดให้ทุกครั้งที่กดปุ่ม  Previous  จะเป็นการเลือกเฟรมก่อนหน้าเฟรมที่กำลังแสดง  อยู่เสมอ




      จากภาพผลลัพธ์ในชิ้นงานนี้เราจะสร้างคีย์เฟรมทั้งหมด  5 คีย์เฟรม  โดยให้แต่ละคีย์เฟรม  แสดงภาพสถานที่ต่างๆ  จากนั้นจะใช้สคริปต์มาควบคุมแต่ละปุ่มให้แสดงภาพตามเงื่อนไขเมื่อมีการคลิกที่ปุ่มนั้นๆ  โดยเราจะเริ่มจากการเตรียมชิ้นงานของเราก่อน   ให้แต่ละเฟรมแสดงภาพ  ดังนี้




1. ในเลเยอร์ที่ 1 ให้เรา  Import  รูปมาวางในเฟรมทั้งหมด  5  เฟรมด้วยกันดังตัวอย่าง



 2. สร้างเลเยอร์ที่ 2 ขึ้นมา  จากนั้นเลือกเมนู  Window -> Common  Libraries ->Buttons   เพื่อสร้างปุ่มการทำงาน  (ในตัวอย่างเลือกใช้ปุ่ม botton  tube  flat)





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


ขั้นตอนที่ 1 กำหนดแอ็คชั่นให้กับปุ่ม  1  (ปุ่ม Number )
ขั้นตอนที่ 2 กำหนดแอ็คชั่นให้กับปุ่ม  2  (ปุ่ม Lable )
ขั้นตอนที่ 3 กำหนดแอ็คชั่นให้กับปุ่ม  3  (ปุ่ม Expression)
ขั้นตอนที่ 4 กำหนดแอ็คชั่นให้กับปุ่ม  4  (ปุ่ม Next )
ขั้นตอนที่ 5 กำหนดแอ็คชั่นให้กับปุ่ม  5  (ปุ่ม Previous)
ขั้นตอนที่ 6 กำหนดหยุดการแสดง


  ขั้นตอนที่ 1 กำหนดแอ็คชั่นให้กับปุ่ม 1  (ปุ่ม Number )

       สำหรับปุ่ม  Number  นี้  จะเป็นการเลือกเฟรมจากตัวเลขประจำเฟรม  โดยจะใช้คำสั่ง  gotoAndStop  แล้วใส่เลข “ 1 ” ลงไปในวงเล็บเพื่อกำหนดให้ทุกครั้งที่กดปุ่ม  Number  จะเป็นการเลือกเฟรมที่ 1 เสมอ  โดยพิมพ์คำสั่งเพิ่มลงไป  ดังนี้







   ขั้นตอนที่ 2 กำหนดแอ็คชั่นให้กับปุ่ม  2  (ปุ่ม Lable )

      สำหรับปุ่ม   Lable นี้  จะเป็นการเลือกเฟรมจากชื่อเฟรม  โดยเรากำหนดให้ทุกครั้งที่กดปุ่ม  Lable
จะเป็นการเลือกเฟรมที่ 2 ที่ชื่อ “Button2”  เสมอ  โดยเราจะไปกำหนดชื่อเฟรมไว้ก่อนใช้ชื่อว่า “Button2”  จากนั้นจึงจะกำหนดแอ็คชั่นด้วยคำสั่ง gotoAndStopและ ใส่ชื่อเฟรม“Button2” 
ลงไปในวงเล็บให้กับปุ่ม Label  ดังนี้

 

  ขั้นตอนที่ 3 กำหนดแอ็คชั่นให้กับปุ่ม 3 (ปุ่ม Expression)

       สำหรับปุ่ม Expression  นี้ จะเป็นการเลือกเฟรมจากผลลัพธ์ของการคำนวณสมการ โดยจะใช้คำสั่ง gotoAndStop  แล้วใส่สมการ “1+2” ลงไปในวงเล็บ  เพื่อกำหนดให้ทุกครั้งที่กดปุ่ม Expression  จะเป็นการคำนวณผลลัพธ์ออกมาเป็นค่าเฟรมที่จะแสดงออกมา  ซึ่งทุกครั้งที่กดปุ่มนี้ก็จะแสดงเฟรมที่ 3 (ผลลัพธ์จาก 1+2) เสมอ

 

  ขั้นตอนที่ 4 กำหนดแอ็คชั่นให้กับปุ่มที่ 4 (ปุ่ม Next)

สำหรับปุ่ม Next  นี้  จะเป็นการเลือกเฟรมถัดไปที่ต่อจากเฟรมที่กำลังแสดงเสมอ

 

 ขั้นตอนที  5  กำหนดแอ็คชั่นให้กับปุ่มที่ 5 (ปุ่ม Previous)

สำหรับปุ่ม Previous  นี้  จะเป็นการเลือกเฟรมก่อนหน้าเฟรมที่กำลังแสดงเสมอ

 

 ขั้นตอนที่ 6  กำหนดให้หยุดการแสดง

     เมื่อเราทดสอบชิ้นงานโดยการกดคีย์บอร์ด  Ctrl + Enter  ก็จะเห็นว่าภาพทั้ง 5 มีการแสดงต่อกันและวนซ้ำๆ ไม่หยุด  ดังนั้นเราจำเป็นต้องใส่แอ็คชั่นให้แสดงภาพในเฟรมแรกและหยุดรอปุ่มกด  โดยใช้คำสั่ง stop ในหมวด Timeline  Control  กับเฟรมที่ 1ในเลเยอร์ใหม่  จากนั้นให้ทดสอบชิ้นงานที่สร้างโดยกดคีย์บอร์ด  Ctrl + Enter  จะเห็นว่าภาพหยุดที่เฟรม 1 และไม่แสดงวนเช่นเดิมอีก



แสดงการทำงานของปุ่มต่างๆ ที่เราใส่สคริปต์ลงไปและสไลด์ก็จะไม่วิ่งวนอีก

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



       เมื่อเราสร้างชิ้นงานเรียบร้อยแล้ว  เราก็จะได้สไลด์แสดงภาพที่จะแสดงตามการกดปุ่ม  คือเมื่อกดปุ่ม Number  จะเป็นการเลือกเฟรมที่ 1 เสมอ,  เมื่อกดปุ่ม Label จะเป็นการเลือกเฟรมที่ 2 เสมอ, เมื่อกดปุ่ม Expression จะเป็นการเลือกเฟรมที่ตรงกับค่าสมการที่เราต้องการได้ตั้งไว้ใน  ActionScript  ซึ่งเรากำหนดให้เลือกเฟรมที่ 1+2 นั่นก็คือเฟรมที่ 3 เสมอ,  เมื่อกดปุ่ม  Next จะเป็นการเลือกเฟรมถัดไปหรือต่อจากเฟรมที่กำลังแสดงอยู่เสมอ  และเมื่อกดปุ่ม  Previous  จะเป็นการเลือกเฟรมก่อนหน้าเฟรมที่กำลังแสดงอยู่เสมอ

 

 


 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  
การรับค่าจากเมาส์และคีย์บอร์ด (On Mouse Event)

      ทุกครั้งที่เราทำงานกับปุ่ม  เราต้องกำหนดเหตุการณ์  (Event) ให้มันทุกครั้ง  โดยการคลิกเมาส์ปุ่มขวาที่ปุ่ม  แล้วเลือกคำสั่ง  Actions ดับเบิ้ลคลิกที่ on  ในหมวด  Movie  Clip  Control  เราจะเห็นตัวเลือกต่างๆ ดังรูปซึ่งแต่ละตัวเลือกมีความหมายดังต่อไปนี้



press                                  คลิกแล้วทำงานทำงาน
release                               คลิกแล้วปล่อยจึงจะทำงาน
releaseOutside                   คลิกแล้วปล่อยนอกปุ่ม
rollover                              เมื่อเลื่อนเมาส์ไปโดนปุ่ม
rollout                                เมื่อเลื่อนไปโดนปุ่ม  แล้วผ่านออกไป
dragOut                             คลิกแล้วลาก
dragOver                           คลิกแล้วลากออก  แล้วลากกลับที่เดิม
keyPress                            ทำงานเมื่อผู้ใช้กดปุ่มนั้นๆ


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 ตัวอย่างการเขียนคำสั่ง  โดยใช้  ActionScript  3.0

       การเขียนคำสั่งใน  ActionScript  3.0  จะเป็นแบบโปรแกรมเชิงวัตถุ (OOP) มีความศัพท์ที่ควรทราบคือ  Class, Properties  และ  Method  โดยคลาสจะประกอบไปด้วย  พรอพเพอร์ตี้  (หรือคุณลักษณะ) และเมดถอด (หรือพฤติกรรม)  โดยเราสามารถยกตัวอย่างเปรียบเทียบง่ายๆ  โดยให้คนเป็นคลาส เช่น นายดำ  จะถือเป็นตัวแทนของคลาสคน  และลักษณะของนายดำ  ซึ่งได้แก่  ส่วนสูง, เพศ, สีผม ก็จะเปรียบได้กับพรอพเพอร์ตี้ของคลาส  คน   ส่วนพฤติกรรมต่างๆ  ของนายดำ  เช่น  นั่ง  นอน ยืน เดิน  ก็จะเปรียบได้กับเมดถอดของคลาสคนเป็นต้น

       ตัวอย่างที่เราจะศึกษากันต่อไปนี้   เราจะนำปุ่มเข้ามาใช้ในการควบคุมการทำงานใน  ActionScript  3.0
เมื่อเรากระทำการใดๆ  กับปุ่มนั้นๆ  จะมีเหตุการณ์ต่างๆ   เกิดขึ้น  เราจะต้องกำหนดว่า  ให้ใครเป็นค่อยรับฟังเหตุการณ์นั้น  และผู้รับฟังจะทำอะไรเมื่อเหตุการณ์นั้นเกิดขึ้น  โดยผู้รับฟังเราจะเรียกว่า  Listenner  มีรูปแบบดังนี้

รูปแบบ                           ปุ่ม .addEventListener( [ เหตุการณ์ที่จะคอยรับฟัง], [ผู้ที่คอยรับฟัง]);

 

ตัวอย่างเช่น ถ้าต้องการกำหนดให้เมื่อเราทำการคลิกที่ปุ่ม จะแสดงข้อความว่า "Flash ActionScript 3.0" ในที่นี้เราตั้งชื่อกับปุ่มว่า Btn01 สามารถเขียนคำสั่งได้ดังนี้

 

function showMessage(event:MouseEvent):void{

          trace("Flash ActionScript 3.0")

}

btn01.addEventListener(MouseEvent.CLICK,ShowMessage)

 

จากตัวอย่างผู้รับฟังเหตุการณ์คือ showMessage เหตุการณ์คือ CLICK ซึ่งอยู่ในหมวดเหตุการณ์ที่ชื่อ MouseEvent เมื่อเกิดเหตุการณ์ CLICK ผู้รับฟังที่ชื่อว่า showMessage จะทำการแสดงข้อความ "Flash Action 3.0"





โดยหมวดของเหตุการณ์ที่ชื่อว่า  Event  จะเป็นหมวดเหตุการณ์ทั่วๆไป  ซึ่งจะมีหมวดเหตุการณ์อื่นๆ   อีก สามารถเปิดดูได้จากในพาเนล  ACTIONS  รายการทางด้านขวา ให้เลือกหัวข้อ  falsh.events

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

การใช้คำสั่ง 
stop  และคำสั่ง  play  เพื่อบังคับแอนิเมชัน

คำสั่ง stop

เป็นคำสั่งให้หยุดการแสดงแฟลชมูฟวี่   ซึ่งโดยปกติแล้วแฟลชมูฟวี่จะแสดงไปเรื่อยๆ  เมื่อถึงเฟรมสุดท้ายก็จะวนกลับมาแสดงใหม่  โดยคำสั่ง  stop  จะหยุดการเล่นแฟลชมูฟวี่ที่เฟรมใดเฟรมหนึ่งที่เราต้องการ  เช่น อาจหยุดไว้ที่เฟรมสุดท้าย  เพื่อเป็นการจบแฟลชมูฟวี่  หรือให้มีการหยุดที่เฟรมใดเฟรมหนึ่งเพื่อรอรับคำสั่งจากผู้ใช้เป็นต้น

คำสั่ง play

เป็นการสั่งให้แฟลชมูฟวี่แสดงต่อไป  ซึ่งปกติแล้วคำสั่ง  play  จะเป็นการใช้งานต่อเนื่องจากคำสั่งอื่น ๆ  เช่น การใช้คู่กับคำสั่ง stop  เหมือนเราดูภาพยนตร์จากมูฟวี่  แล้วมีการกดปุ่ม  stop เพื่อหยุดการแสดงภาพยนตร์จากนั้นก็กดปุ่ม  play  เพื่อสั่งให้เล่นต่อ

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  ตัวอย่างการใช้คำสั่ง
stop, play และ goto

     สร้างแอนิเมชันโดยใช้คำสั่ง stop, play และ goto  ในการกำหนดปุ่มกดต่างๆ  ให้ควบคุมการเคลื่อนที่ของจรวด   โดยสร้างให้ผลลัพธ์นั้นสามารถกดปุ่มบังคับให้เดินหน้า, ถอยหลัง, เริ่มต้นใหม่,หยุด,เล่นต่อ,ไปที่จุดเริ่มต้นหรือจุดจบตามที่เรากำหนดไว้ได้  เราสามรถใช้คำสั่ง  stop, play และ goto  ในการกำหนดปุ่มกดต่าง ๆ ดังนี้

ปุ่มที่ 1  ชื่อปุ่ม  frame  1  เป็นการเรียกให้จรวดกลับมาแสดงในเฟรมที่ 1
ปุ่มที่ 2 ชื่อปุ่ม  Previous   เป็นการเลือกให้กลับไปยังเฟรมก่อนหน้า
ปุ่มที่ 3  ชี่อปุ่ม stop   เป็นการสั่งให้จรวดหยุดการเคลื่อนที่
ปุ่มที่ 4 ชื่อปุ่ม Play   เป็นการให้จรวดเคลื่อนที่
ปุ่มที่ 5 ชื่อปุ่ม Next  เป็นการเลือกให้ไปยังเฟรมถัดไป
ปุ่มที่ 6  ชื่อปุ่ม  frame  4  เป็นการกำหนดจรวดแสดงในเฟรมที่  40

     ในชิ้นงานนี้เราจะสร้างเอนิเมชั่นของการเคลื่อนที่ของจรวดทั้งหมด 40 เฟรม เป็นแบบโมชั่นไกด์ จากนั้นจะใช้สคริปต์มาควบคุมแต่ละปุ่มให้แสดงการเคลื่อนที่ดังที่ได้กล่าวมาแล้ว โดยเราจะเริ่มจากการเตรียมช้ินงานของเราก่อน ดังนี้

  วางภาพจรวดในเลเยอร์ Jet จากนั้นให้สร้างเอนิเมชั่นแบบโมชั่นไกด์ขึ้นมายาวถึงเฟรมที่ 40



 2. สร้างเลเยอร์ต่อมาสำหรับสร้างปุ่มกด 6 ปุ่ม โดยเลือกใช้งานปุ่มสำเร็จรูปได้จากเมนูคำสั่ง Window->Common Libraries->Buttons ดังรูป



 3. กำหนดชื่ออินสแตนซ์ใหกับปุ่ม เพื่อใช้อ้างอิงสำหรับเขียนโปรแกรม (ต้องกำหนดเสมอเมื่อใช้งานปุ่ม) โดยคลิกที่ปุ่ม frame1 แล้วพิมพ์ชื่อที่ต้องการใน Property Inspector ในที่นี้เราตั้งชื่อว่าปุ่ม frame1 ว่า frame1Btn



จากนั้นใช้วิธีเดียวกัน ตั้งชื่อให้กับปุ่มที่เหลือเป็น previousBtn, StopBtn, PlayBtn, nextBtn และ frame40btn เรียงตามลำดับ

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

 

 4. สร้างเลเยอร์ขึ้นมาใหม่อีก 1 เลเยอร์ เพื่อกันไว้สำหรับเขียนคำสั่งควบคุมทั้งหมด ตั้งชื่อเลเยอร์ว่า action



หลังจากที่ได้สร้างแอนิเมชั่นและวางปุ่มต่างๆ พร้อมแล้ว ต่อไปเราจะสร้างให้ปุ่มเหล่านั้นมีแอ็คชั่นเป็นไปตามที่วางไว้ ตามขั้นตอนดังนี้

       ขั้นตอนที่ 1 กำหนดแอ็คชั่นให้กับปุ่มที่ 1 (ปุ่ม frame 1)

       ขั้นตอนที่ 2 กำหนดแอ็คชั่นให้กับปุ่มที่ 2 (ปุ่ม Previous)

       ขั้นตอนที่ 3 กำหนดแอ็คชั่นให้กับปุ่มที่ 3 (ปุ่ม Stop)

       ขั้นตอนที่ 4 กำหนดแอ็คชั่นให้กับปุ่มที่ 4 (ปุ่ม Play)

       ขั้นตอนที่ 5 กำหนดแอ็คชั่นให้กับปุ่มที่ 5 (ปุ่ม Next)

       ขั้นตอนที่ 6 กำหนดแอ็คชั่นให้กับปุ่มที่ 6 (ปุ่ม frame 40)

 

 ขั้นตอนที่ 1 กำหนดแอ็คชั่นให้กับปุ่มที่ 1 (ปุ่ม frame 1)

เมื่อมีการคลิกปุ่ม frame1 จะเป็นการสั่งให้จรวดกลับมาแสดงที่เฟรมแรกเสมอ โดยการพิมพ์คำสั่งต่อไปนี้ลงไปในเฟรมที่ 1 ดังนี้



function gotoframe1(event:MouseEvent):void{

         gotoAndStop(1);

}

frame1Btn.addEventListener(MouseEvent.CLICK,gotoframe1);

 

 ขั้นตอนที่ 2 กำหนดแอ็คชั่นให้กับปุ่มที่ 2 (ปุ่ม Previous)

เมื่อมีการคลิกปุ่ม Previous นี้ จะเป็นการสั่งให้จรวดถอยกลับไปยังเฟรมก่อนหน้า ให้พิมพ์คำสั่งเพิ่มเติมต่อไปนี้ ดังนี้

function prevframe(event:MouseEvent):void{

         prevFrame();

}

previousBtn.addEventListener(MouseEvent.CLICK,prevframe);

 

 ขั้นตอนที่ 3 กำหนดแอ็คชั่นให้กับปุ่มที่ 3 (ปุ่ม Stop)

เมื่อมีการคลิกปุ่ม Stop นี้ จะเป็นการสั่งให้หยุดเล่นมูฟวี่ที่เฟรมปัจจุบัน ให้พิมพ์คำสั่งเพิ่มเติมต่อไปนี้

function tostop(event:MouseEvent):void{

         stop();

}

stopBtn.addEventListener(MouseEvent.CLICK,tostop);

 

 ขั้นตอนที่ 4 กำหนดแอ็คชั่นให้กับปุ่มที่ 4 (ปุ่ม Play)

เมื่อมีการคลิกปุ่ม Play นี้จะเป็นการสั่งให้มูฟวี่แสดงต่อไป ให้พิมพ์คำสั่งเพิ่มเติมต่อไป ดังนี้

function toplay(event:MouseEvent):void{

         play();

}

stopBtn.addEventListener(MouseEvent.CLICK,toplay);

 

 ขั้นตอนที่ 5 กำหนดแอ็คชั่นให้กับปุ่มที่ 5 (ปุ่ม Next)

เมื่อมีการคลิกปุ่ม Next นี้ จะเป็นการสั่งให้เล่นเฟรมถัดไป ให้พิมพ์คำสั่งเพิ่มเติมต่อไปนี้ ดังนี้

function nextframe(event:MouseEvent):void{

         nextFrame();

}

nextBtn.addEventListener(MouseEvent.CLICK,nextframe);

 

 ขั้นตอนที่ 6 กำหนดแอ็คชั่นให้กับปุ่มที่ 6 (ปุ่ม frame 40)

เมื่อมีการคลิกปุ่ม frame40 นี้ จะเป็นการสั่งให้เล่นเฟรมสุดท้าย โดยที่เรากำหนดแอ็คชั่นให้กับปุ่ม ให้พิมพ์คำสั่งเพิ่มเติมต่อไป ดังนี้

function frame40(event:MouseEvent):void{

         gotoAndStop(40);

}

frame40Btn.addEventListener(MouseEvent.CLICK,frame40);


หลังจากนั้น ให้จัดกลุ่มของฟังก์ชั่นเข้าด้วยกัน จะได้สคริปต์ใหม่ในเฟรมที่ 1 ดังนี้

function gotoframe1(event:MouseEvent):void{

         gotoAndStop(1);

}

function prevframe(event:MouseEvent):void{

         prevFrame();

}

function tostop(event:MouseEvent):void{

         stop();

}

function toplay(event:MouseEvent):void{

         play();

}

function nextframe(event:MouseEvent):void{

         nextFrame();

}

function frame40(event:MouseEvent):void{

         gotoAndStop(40);

}

frame1Btn.addEventListener(MouseEvent.CLICK,gotoframe1);

previousBtn.addEventListener(MouseEvent.CLICK,prevframe);

stopBtn.addEventListener(MouseEvent.CLICK,tostop);

stopBtn.addEventListener(MouseEvent.CLICK,toplay);

nextBtn.addEventListener(MouseEvent.CLICK,nextframe);

frame40Btn.addEventListener(MouseEvent.CLICK,frame40);



เราสามารถทดสอบได้โดย Ctrl l+ Enter หรือเลือกเมนู Control >Test Movie

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

  การรับคำจากเมาส์ (MouseEvent)

ทุกครั้งที่เราทำงานกับปุ่ม เราต้องกำหนดเหตุการณ์ให้มันทุกครั้ง ดังตัวอย่างที่ผ่านมา ซึ่งมีเหตุการณ์สำหรับเมาส์ให้เราเลือก ที่เราควรรู้จักเบื้องต้น ดังนี้

      CLICK                        เป็นคำสั่งรับค่าสำหรับการคลิก
      DOUBLE_CI_ICK     เป็นคำสั่งค่าสำหรับการดับเบิ้ลคลิก
      MOUSE_DOWN       เป็นคำสั่งตรวจเช็คการคลิกเมาส์
      MOUSE_LEAVE       เป็นคำสั่งตรวจตราว่า ถ้าเมาส์อยู่เฉยๆให้ทำงานใด
      MOUSE_MOVE        เป็นคำสั่งตรวจตราว่า ถ้าเมาส์เกิดการเคลื่อนที่ให้ทำงานใด
      MOUSE_OVER         เป็นคำสั่งตรวจตราว่าถ้าเมาส์อยู่เหนือวัตถุนั้นให้ทำงานใด
      MOUSE_OP              เป็นคำสั่งตรวจเช็ดการปล่อยเมาส์
      MOUSE_WHEEL      เป็นคำสั่งตรวจตราการหมุนลูกล้อ(Wheel)ว่ามีตำแหน่งและทิศทางเป็นอย่างไร



 

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player