กลับหน้าหลัก
 บทเรียนที่ 5
 ใบความรู้ที่ 5.1
 การสร้าง Symbol
 Symbol คืออะไร
  - Symbol แบบ Graphic
  - Symbol แบบ Movie Clip
  - Symbol แบบ Button
 
 ใบความรู้ที่ 5.2
  - การสร้างชิ้นงานด้วย Symbol ที่เตรียมไว้
 
 แบบฝึกหัดและใบงาน
  ใบงานที่ 5.1
  ใบงานที่ 5.2
 
แนวการตอบภาคปฏิบัติ
  ใบงานที่ 5.1
  ใบงานที่ 5.2
 

การสร้างชิ้นงานด้วย  Symbol

 

การสร้างชิ้นงานด้วย  Symbol

      การนำ  Symbol ที่เตรียมไว้มาสร้างชิ้นงาน

      1.  คลิก 2 ครั้งที่  “Layer 1”    เปลี่ยนชื่อเป็น “ปุ่ม”  \

      2.  นำซิมโบล Button จาก Library มาวางที่ stage ดังภาพ

 
 

      3.  คลิก  Insert Layer  เพื่อเพิ่ม  Layer

      4.  คลิก 2  ครั้งที่  “Layer 2”  เปลี่ยนชื่อเป็น  “ถังน้ำ”

      5.  นำ  Symbol  แก้วน้ำมาวางที่ Stage แล้วดึงภาพให้เป็นลักษณะรูปถังน้ำ

ด้วย  Free Transform

      6.  คลิก  Insert Layer  เพื่อเพิ่ม  Layer

      7.  คลิก 2  ครั้งที่  “Layer 3”    เปลี่ยนชื่อเป็น “ปลา”

      8.  นำ  Symbol  “ปลา” มาวางที่ Stage ดังภาพ

 
 
      9.  นำเมาส์ไปคลิกค้างไว้เฟรมที่ 25 ของเลเยอร์ “ปลา” แล้วลากลงมาถึงเฟรมที่ 25 ของเลเยอร์ “ปุ่ม”
 
 
 

      10. คลิกขวาเลเยอร์ที่ 25  เลือก  Insert Keyframe

 
 
 

      11. คลิกเฟรมที่ 25 ของเลเยอร์ “ปลา”

      12. ย้าย “ปลา” ไปไว้ทางด้านซ้ายมือของถังน้ำ

 

 
 
 
      13. คลิกขวาระหว่างเฟรมที่ 1 – 25  เฟรมใดก็ได้  เลือก  Create Motion Tween
 
 

      14. นำเมาส์ไปคลิกค้างไว้เฟรมที่ 26 ของเลเยอร์ “ปลา” แล้วลากลงมาถึงเฟรมที่ 26 ของเลเยอร์ “ปุ่ม”

      15. คลิกขวาเลเยอร์ที่ 26  เลือก  Insert Keyframe

 
 

      16. คลิกเฟรมที่ 26 ที่เลเยอร์ “ปลา”

      17. คลิก  Free Transform

 
 
      18. สลับด้านหัวหางของปลา
 
 
      19. นำเมาส์ไปคลิกค้างไว้เฟรมที่ 50 ของเลเยอร์ “ปลา” แล้วลากลงมาถึงเฟรมที่ 50 ของเลเยอร์ “ปุ่ม”
 
 
      20. คลิกขวาเฟรมที่ 50  เลือก  Insert Keyframe
 
 

      21. คลิกเฟรมที่ 50 ของเลเยอร์ “ปลา”

      22. ย้ายซิมโบล “ปลา” ไปไว้ด้านขวาของถังน้ำ

 
 

      23. คลิกขวาเฟรมที่ 35 หรือเฟรมใด ๆ ก็ได้ระหว่างเฟรมที่ 26 – 50 เลือก Create Motion Tween

 
 
 

      24. ทดสอบ Movie Clip  ด้วยการกดปุ่ม  Ctrl + Enter

      25. การกำหนด  Action Script  เพื่อควบคุม  Symbol  Movie  Clip

          การกำหนด Action Script ให้กับปุ่ม Play เพื่อสั่งให้ Animation ทำงาน

          25.1  คลิกปุ่ม  Play

 
 

          25.2 คลิกเมนู  Window

          25.3 คลิก  Actions  หรือกดปุ่มคีย์ลัด  F9

 
 

          25.4 พิมพ์  Actions Script   “ on (release) { play(); } ”

 
 
              การกำหนด  Action Script  ให้กับปุ่ม Pause  เพื่อสั่งให้ Animation หยุดทำงาน
 
          25.5 คลิกปุ่ม  Pause
 
 
          25.6 คลิก Actions  หรือกดปุ่มคีย์ลัด  F9
 
 
          25.7 พิมพ์  Actions Script   “ on (release) { stop(); } ”
 
 
          การกำหนด Action Script  ให้กับปุ่ม Stop เพื่อสั่งให้ Animation หยุดทำงาน
          และเริ่มเฟรมที่ 1
 

          25.8 คลิกปุ่ม  Stop

 
 
          25.9 คลิก  Actions  หรือกดปุ่มคีย์ลัด  F9
 
 
          25.10  พิมพ์  Actions Script   “ on (release) { gotoAndStop(1); } ”
 
 
          25.11 คลิกเฟรมที่ 1 ของเลเยอร์ “ปุ่ม” เพื่อเขียน Actions Script :  Stop();  
เป็นการสั่งให้ Animation หยุดทำงาน เพื่อรอคำสั่งจากการกดปุ่ม Play (เมื่อเขียน Script แล้ว ที่เฟรมจะมีตัวอักษรเอ
 ปรากฏ)
 
 
          25.9 คลิกเฟรมที่ 50 ของเลเยอร์ “ปุ่ม” เพื่อเขียน Actions Script :  gotoAndPlay(2);  เป็นการสั่งให้ Animation เริ่มทำงานเฟรมที่ 2  (ข้ามเฟรมที่ 1 ซึ่งเป็นเฟรมที่มี Script สั่งหยุดการทำงาน)
 
 
        ย่อ Actions ทำการทดสอบด้วยการกดปุ่ม Ctrl+Enter
 
เว็บไซต์นี้สามารถดูได้ที่ความละเอียด 1366 x 768 Pixel
ดูผู้แลเว็บไซต์ วัชรา ปานนาค  e-mail : watra25177@gmail.com