ตัวอย่าง Animation

นี่เป็นตัวอย่างของ Animation ที่ผู้เขียนกับเพื่อนๆเคยทำนะคะ

https://drive.google.com/file/d/0B13MyMfIUjtmdDltMFFMTE1HQ3M/view?usp=sharing

อาจมีปัญหาในการเปิดแต่โหลดเก็บไว้ในตัวเครื่องก่อนก็สามารถเปิดได้นะคะ
ไฟล์เป็นนามสกุล .swf นะคะ

จริงๆแล้วสามารถเซฟไว้เป็นไฟล์นามสกุลอื่นได้นะคะ แต่เนื่องจากเป็นงานที่ทำไว้เมื่อนานแสนนานมาแล้วจึงหาไฟล์ต้นฉบับไม่เจอ (ฮาาาา) เหลือไว้เป็นโบราณวัตถุแต่เพียงเท่านี้จริงๆค่ะ

สร้างการเคลื่อนไหวแบบปรับให้ค่อยชัดหรือจางลง(Alpha)

     Alpha เป็นการปรับค่าความโปร่งของวัตถุถ้าค่า alpha (อัลฟ่า) มาก เราจะมองวัตถุนั้นชัดเจน ถ้าค่า alpha น้อยลงเราจะมองเห็นภาพวัตถุนั้นเลือนๆ

ขั้นตอนที่ 1 คลิกที่เฟรมที่ 1 แล้ววาดรูปที่ต้องการลงไป

    

ขั้นที่ 2 คลิกขวาที่เฟรมที่ 1 แล้วเลือกคำสั่ง Create Motion Tween

 

ขั้นที่ 3 คลิกขวาเฟรมที่ 20 เลือกคำสั่ง Insert Keyframe แล้วขยายรูปให้ใหญ่ขึ้นด้วย Free Transform Tool  (ไม่ขยายก็ได้) 

 

ขั้นที่ 4 คลิกที่วัตถุเพื่อให้ตัวเลือกปรากฏขึ้นที่ Properties จากนั้นเลือก Alpha แล้วปรับค่า Alpha เป็นค่าที่น้อยลง จะได้ภาพที่จางลงมองทะลุพื้นหลังได้

 

ขั้นที่ 5 กดปุ่ม Ctrl+Enter เพื่อดูตัวอย่างภาพเคลื่อนไหว จะเห็นภาพค่อยใหญ่ขึ้นและจางหายไปแต่ตำแหน่งไม่เปลี่ยนเนื่องจากเราไม่ได้ย้ายตำแหน่งของวัตถุ

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

ที่มา  : http://www.kroojan.com/flash/content/animate/alpha.html

การเผยแพร่และนำไปใช้

เกี่ยวกับการสร้างมูฟวี่ (Movie)
1. การสร้างภาพเคลื่อนไหว แบบ Motion Tween จะทำให้ไฟล์เล็กกว่าแบบ Frame by Frame
2. หลีกเลี่ยงการนำภาพบิตแมพ มาสร้างเป็นภาพเคลื่อนไหว ควรนำมาใช้เป็นฉากหลังหรือภาพนิ่งเท่านั้น
3. ควรใช้ซิมโบล แทนออบเจ็คที่มีปรากฏอยู่ในมูฟวี่ (ดูได้จากหน้าต่าง Library)
4. หากจำเป็นต้องนำภาพบิตแมพ มาใช้ ควรตัดภาพให้ขนาดเล็กเท่าที่จำเป็นและบีบอัดคุณภาพลงก่อน
5. หากต้องใช้เสียง ควรเลือกประเภท MP3 เนื่องจากเป็นไฟล์ที่มีขนาดเล็ก

เกี่ยวกับการ สร้างวัตถุ (Object)
1. ควรรวมวัตถุ ให้เป็นกลุ่ม (Group) ให้มากที่สุด
2. ควรแยกเลเยอร์ที่มีวัตถุเคลื่อนไหว และไม่เคลื่อนไหว ออกจากกัน
3. การวาดเส้นทึบธรรมดา จะทำให้ไฟล์มีขนาดเล็กกว่าเส้นแบบจุด (dash) หรือ เส้นที่มีลวดลาย
4. การวาดเส้นด้วยดินสอ (Pencil) จะทำให้ไฟล์มีขนาดเล็กกว่าการวาดเส้นด้วยแปรง (Brush)
5.ภาพบิตแมพที่ไม่มีความซับซ้อน ลดขนาดลงได้ด้วยการทำ break apart
6. ควรใช้คำสั่ง Modify > Shape > Optimize เพื่อลดจำนวนเส้นที่ประกอบกันเป็นรูปทรง

เกี่ยวกับการ สร้างตัวอักษรและข้อความ
1. การใช้รูปแบบตัวอักษรที่หลากหลาย ทำให้ไฟล์มีขนาดใหญ่
2. การฝังฟอนต์ (Embedded) ไปกับมูฟวี่ ทำให้ไฟล์มีขนดใหญ่ ควรใช้เท่าที่จำเป็น

เกี่ยวกับการใช้ สี
1. หากรูปภาพหรือวัตถุ ทีมีความคล้ายกัน ควรสร้างจากซิมโบล แล้วค่อยนำมาปรับขนาดหรือสี
2. ควรใช้ฟิลเตอร์เท่าที่จำเป็น

หมายเหตุ : ควรตรวจสอบไฟล์ หรือวัตถุต่างๆ ใน Library ที่ไม่ได้ใช้งานและลบทิ้ง

เมื่อทำแอนิเมชั่นเสร็จตามต้องการแล้ว การส่งออกไฟล์เพื่อนำเสนอ ทำได้โดย
คลิกเมนู File > Pubblish Settings... (หมายเลข 14)

คลิกที่แท็บ Formats แล้วคลิกเลือก Windows Projector (.exe) (หมายเลข 15)
สามารถเลือก Path สำหรับการส่งออกได้ (หมายเลข 16)
ทำการส่งออกโดยคลิก Publish (หมายเลข 17)

การ Publish

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

ขั้นตอนการ Publish
1. คลิกเมนู File > Publish Settings...

  2. ที่หน้าต่าง Publish Settings กำหนดรูปแบบไฟล์ กำหนดชื่อไฟล์ และกำหนดสถานที่
  หรือ Path ที่ต้องการส่งออก

1. การกำหนดชนิดไฟล์ที่ต้องการส่งออก
ทำได้โดย คลิกเครื่องหมายถูก หน้าชนิดของไฟล์ที่ต้องการ (กรอบหมายเลข 1)
2. เมื่อคลิกในข้อ 2.1 แล้ว จะปรากฏแท็บคุณสมบัตินั้นๆ ( ดังกรอบหมายเลข 2)
3. หากต้องการเปลี่ยนชื่อไฟล์ สามารถเปลี่ยนได้ในช่องกรอบหมายเลข 3
4. การเลือกสถานที่ หรือ Path ในการบันทึกไฟล์ ทำได้โดยคลิกสัญลักษณ์โฟลเดอร์ ในหมายเลข 4

ในการกำหนดคุณสมบัติการส่งออกของ ไฟล์แต่ละชนิด ทำได้โดยคลิกแท็บชนิดนั้นๆ
เช่น การกำหนดค่าการส่งออกภาพเคลื่อนไหวของ Flash ซึ่งจะได้ไฟล์ .swf เมื่อคลิกแท็บ Flash จะปรากฏหน้าต่างสำหรับ
การตั้งค่าคุณสมบัติ ดังภาพที่ 3 แล้วกำหนดค่าตามต้องการ

ในกรณีต้องการส่งออกเป็นรูปภาพ ชนิด .jpg ทำได้โดยคลิกที่แท็ป JPEG
ซึ่งจะได้หน้าต่างสำหรับการตั้งค่าคุณสมบัติดังภาพ แล้วกำหนดค่าตามต้องการ

  
     ในกรณีต้องการส่งออกเป็นรูปภาพ ชนิด .gif ทำได้โดยคลิกที่แท็ป GIF
  ซึ่งจะได้หน้าต่างสำหรับการตั้งค่าคุณสมบัติดังภาพ แล้วกำหนดค่าตามต้องการ

 

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

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

การ Export ไฟล์เพื่อนำไปใช้กับเอกสารอื่นๆ
การส่งออกไฟล์เพื่อนำไปใช้ นอกจากจะส่งออกในแบบของการ Publish แล้ว
ยังสามารถส่งออกแบบเดี่ยวๆ ตามแต่ชนิดของการใช้งานตามต้องการ ดังนี้

ขั้นตอนการส่ง ออกภาพเดียว
1. คลิกเมนู File > Export > Export Image... (หมายเลข 1)

2. เลือกสถานที่บันทึก และพิมพ์ชื่อไฟล์ที่ต้องการบันทึก (หมายเลข 2)
เลือกชนิดของไฟล์ (หมายเลข 3) แล้วคลิก Save (หมายเลข 4)

3. กำหนดคุณสมบัติของไฟล์ โดยตั้งค่าในกรอบหมายเลข 5
เมื่อกำหนดค่าตามต้องการแล้ว คลิก OK (หมายเลข 6) เพื่อส่งออกไฟล์

 

ขั้นตอนการส่งออกมูฟวี่

1. คลิกเมนู File > Export > Export Movie... (หมายเลข 7)

2. เลือกสถานที่บันทึก และพิมพ์ชื่อไฟล์ที่ต้องการบันทึก (หมายเลข 8)
เลือกชนิดของไฟล์ (หมายเลข 9) ซึ่งชนิดของไฟล์หากต้องการเป็นไฟล์ Flash ต้องเลือกเป็น .swf
แล้วคลิก Save (หมายเลข 10)

หมายเหตุ : ในกรณีที่ต้องการไฟล์ชนิดอื่นๆ สามารถเลือกชนิดไฟล์ โดยการคลิกที่ปุ่มหมายเลข 9
แล้วเลือกชนิดไฟล์ ซึ่งมีหลายรูปแบบ ดังภาพหมายเลข 11

ที่มา : http://202.143.142.151/flash/

การใช้งาน action script พื้นฐาน

     Action Script (แอคชั่นสคริปต์) คือชุดคำสั่งหรือภาษาคอมพิวเตอร์ที่ใช้ในการควบคุมหรือสั่งการในโปรแกรม Flash  โดย Action Script สามารถเขียนควบคุมได้ทั้งบน Timeline และ บน Symbol

การเขียน Action Script บน Timeline

      การเขียนแอคชั่นสคริปต์บนไทม์ไลน์สามารถทำดังนี้
1. สร้างแอนิเมชั่นแบบใดก็ได้ขึ้นมา 1 ชิ้น (ในตัวอย่างจะสร้างแอนิเมชั่นแบบ Motion Tween)

หมายเหตุ * ปกติเมื่อเรากดปุ่ม Ctrl+Enter โปรแกรม Flash จะเล่นวนซ้ำไปซ้ำมาจนกว่าจะปิด
2. แทรกคำสั่ง Action Script เข้าไปในเฟรมสุดท้ายของงาน ให้คลิกที่เฟรมที่ 40 แล้วกดปุ่ม F9 บนคีย์บอร์ด จะมีหน้าต่างๆAction Frame ขึ้นมาดังรูป

3. ในการเขียนคำสั่งโปรแกรมได้ออกแบบให้สามารถเขียนได้ 2 รูปแบบคือ แบบ Normal หรือ แบบธรรมดา 

สำหรับผู้ที่ยังใช้คำสั่งไม่คล่อง และ แบบ Expert คือ แบบที่สามารถพิมพ์คำสั่งได้เลย

สำหรับหัวข้อนี้จะให้เขียนทั้ง 2 รูปแบบ ดังนี้

เลือกคำสั่ง Global Functions > Timeline Control > stop  (คำสั่ง stop คือ สั่งให้หยุดการทำงาน)

4. ให้นักเรียนสังเกตที่เฟรมที่ 40 จะมีสัญลักษณ์ ตัว a เล็กอยู่ในเฟรม จากนั้นก็ทดสอบกด Ctrl+Enter

แบบที่ 2 การเขียนแบบ Expert mode คลิกที่เครื่องคำว่า Script Assist ด้านขวาของแถบ Action

จะปรากฏหน้าต่างๆว่างๆขึ้นมา ให้นักเรียนพิมพ์คำสั่ง stop(); ลงในพื้นที่ว่างนั้น

เสร็จแล้วกดปุ่ม Ctrl + Enter เพิ่อทดสอบคำสั่ง ถ้าทำถูกแอนิเมชั่นจะแสดงผลแค่ 1 ครั้งแล้วหยุด

การเขียน Action Script บน Symbol Button

สำหรับการใช้งานซิมโบลนั้นมี 3 อย่างตามที่ได้กล่าวมาแล้ว ได้แก่ Movie Clip Graphic และ Button ซิมโบลแบบMovie Clip คือซิมโบลที่สามารถสร้างภาพเคลื่อนไหวซ้อนในตัวของมันเองได้
ซิมโบลแบบ Graphic คือ ซิมโบลที่เป็นภาพกราฟฟิคไม่สามารถสร้างภาพเคลื่อนไหวซ้อนได้
ซิมโบลแบบ Button คือ ปุ่มที่ใช้สำหรับการควบคุมให้ซิมโบล วัตถุ หรือ ภาพเคลื่อนไหวทำงานได้

สำหรับการใช้งานซิมโบลแบบ Button สามารถทำได้ดังนี้
1. วาดรูปปุ่มขึ้นมา 1 รูป จะเป็นรูปอะไรก็ได้          

2. ใช้ลูกศรสีดำ (Selection Tool) ลากครอบแล้วกดปุ่ม F8 จากนั้นตั้งชื่อซิมโบลแล้วเลือกซิมโบลแบบButton  กด OK

3. เมื่อได้ซิมโบลแล้วดับเบิ้ลคลิกเข้าไปที่ ซิมโบล จะปรากฏเฟรม 4 สถานะ คือ Up Over Down Hit

Up คือ สถานะปกติที่ยังไม่ได้ทำอะไร        Over คือ สถานะเมื่อเคอเซอร์ของเมาส์มาทับปุ่ม
Down คือ สถานะเมื่อคลิกปุ่ม                Hit คือ กรอบพื้นที่หรือขอบเขตของปุ่ม

4. คลิกขวาที่เฟรม Over แล้วเลือกคำสั่ง Insert Keyframe

5. ทำการเปลี่ยนสีหรือรูปร่างของปุ่มใน เฟรม Over

6. คลิกขวาที่เฟรม Down แล้วเลือกคำสั่ง Insert Keyframe แล้วเปลี่ยนสีอีกรอบ

7. คลิกขวาที่เฟรม Hit แล้วเลือกคำสั่ง Insert Keyframe ไม่ต้องเปลี่ยนสีก็ได้เพราะสถานะ Hit เป็นขอบเขตของปุ่มที่สามารถคลิกได้เท่านั้น ไม่สามารถแสดงสีได้

หมายเหตุหากต้องการพิมพ์ข้อความบนปุ่มสามารถพิมพ์ได้ตามคีย์เฟรมของแต่ละสถานะ

8. เมื่อตกแต่งเสร็จ กดที่คำว่า Scene 1 เพื่อกลับไปยังหน้าหลัก จากนั้นกด ปุ่ม Ctrl+Enter เพื่อทดสอบ และลองเลื่อนเมาส์มาทับปุ่มและคลิกดู จะมีการเปลี่ยนแปลงเกิดขึ้นตามที่เรากำหนด

วิธีการใช้ ActionScript

ActionScript เป็นการเขียนภาษา Script บนโปรแกรม Flash เพื่อใช้ควบคุมมูวี่ (Movie) ให้ทำงานตามเหตุการณ์ต่างๆโดยเขียนที่หน้าต่างที่เรียกว่า พาเนล (Panel) ซึ่งพาเนล มี 2 โหมดคือ 
Normal Mode เป็นโหมดปกติ ซึ่งจะมีตัวนำทางหรือเมนูตัวเลือก โหมดนี้เหมาะสำหรับมือใหม่ 
Expert Mode เป็นโหมดสำหรับผู้เชี่ยวชาญเหมาะสำหรับผู้ที่จำรูปแบบคำสั่ง (Syntax, operator,command)ได้ดี ในโหมดนี้จะไม่มี เมนูนำทาง เหมือนแบบแรก

การเปิดหน้าต่าง พาเนล (Panel Actions) คลิก Windows > Action หรือ กด F9

ขั้นที่ 1 คลิกที่ปุ่ม Script Assist เพื่อสลับหน้าต่างพาเนล

การเขียนคำสั่งให้กับเฟรม

คำสั่ง Action Script สามารถเขียนให้กับองค์ประกอบ 3 ชนิด คือ
เฟรม (Frame) ปุ่ม (Button) และมูวีคลิป (Movie Clip)

ขั้น ตอนการการเขียนคำสั่งให้กับเฟรม (Frame)
ขั้นที่ 1 คลิกเฟรมที่ต้องการใส่คำสั่งสคริปต์ (หมายเลข 1)

ขั้นที่ 2 เขียนคำสั่งที่ต้องการ
กรณีอยู่ใน Normal Mode ทำได้โดย คลิกเครื่องหมายบวก (หมายเลข 2 ) แล้วคลิกเลือกคำสั่งที่ต้องการ 

ขั้นที่ 3 ผลที่ได้จากการใส่คำสั่ง (หมายเลข 4 )

4. กรณีอยู่ใน Expert Mode สามารถเขียนคำสั่งได้โดยตรง (หมายเลข5)

5. เมื่อต้องการลบคำสั่งออก ทำได้โดยคลิกเครื่องหมายลบ (หมายเลข 6)
หรือหากอยู่ใน Expert Mode ทำการแดรกเมาส์คลุมคำสั่งที่ต้องการลบ แล้วกดปุ่ม Delete

การเขียนคำสั่งให้กับปุ่ม
         การเขียนคำสั่งให้กับปุ่ม คือการกำหนดแอคชั่นให้ปุ่ม ให้ตอบสนองต่อการกระทำ เช่น เวลาคลิกลาก (Drag) หรือวางเมาส์ไว้เหนือปุ่ม ซึ่งต้องใส่คำสั่งไว้ภายในตัวควบคุม on พร้อมทั้งระบุเหตุการณ์หรืออีเวนต์ (event) ของเมาส์หรือคีย์บอร์ด ตามด้วยคำสั่งที่ต้องการ
โดยมีรูปแบบคำสั่ง คือ

ขั้นตอน การเขียนคำสั่งให้กับปุ่ม (โหมด Normal)

1. คลิกที่ปุ่ม แล้วใส่คำสั่งที่หน้าต่างพาเนล ActionScript ตามต้องการ  

4. คลิกเครื่องหมายบวก (หมายเลข 1)

5. เลือกเมนูคำสั่งที่ต้องการ เช่น ต้องการให้เปิดเว็บ (หมายเลข 2)

6. ในบางคำสั่ง จะต้องมีการกรอกรายละเอียดที่ต้องการ (หมายเลข 3)

แนวทางการเขียน ActionScriptสำหรับการเขียนใน Expert Mode จะมีรูปแบบการเขียนแอคชั่นสคริปต์ ให้กับเฟรมเพื่อควบคุมปุ่มและมูฟวี่คลิป ดังนี้

ตัวอย่างเช่น การเขียนสั่งงานให้กับปุ่มชื่อ button1 เวลาถูกคลิก จะใช้รูปแบบ คือ

ขั้น ตอนการเขียนด้วยหน้าต่าง Expert Mode
(หมายหตุ : ดูขั้นตอนการเขียนโดยใช้หน้าต่าง Normal Mode ได้ที่ การเขียนคำสั่งให้กับปุ่ม)

1. คลิกที่ปุ่มให้แอคทีฟ (Active)  

2. เปิดหน้าต่างแอคชั่น แบบ Expert Mode  หรือถ้าเปิดแล้ว ให้คลิกที่ปุ่ม   เปรียบเทียบหน้าต่าง Expert Mode และ Normal Mode

3. คลิกเครื่องหมายบวก  (หมายเลข 1)

4. คลิกเลือกกลุ่มคำสั่งที่ต้องการ (หมายเลข 2)

5. ดับเบิลคำสั่ง หรืออีเวนต์ที่ต้องการ (หมายเลข 3)

6. ทำซ้ำข้อ 3-5 เพื่อเพิ่มเติมคำสั่งอื่นๆ อีก ตามต้องการ

คำสั่งพื้นฐาน Action Script

คำสั่ง On Mouse Event ใช้กำหนดเหตุการณ์ ของเมาส์หรือคีย์บอร์ด ซึ่งจะมีผลชุดคำสั่งที่อยู่ในบรรทัดต่อๆ มาที่อยู่ในเครื่องหมาย { } ถูกดำเนินการ โดยทุกครั้งที่กำหนดคำสั่งให้กับปุ่ม โปรแกรมจะสร้างคำสั่ง On ขึ้นมารองรับซึ่งจะมีอีเวนต์ที่ประกอบด้วย

คำสั่ง Go To เป็นคำสั่งที่ใช้ควบคุมการแสดงของมูฟวี่ โดยสั่งให้หัวอ่าน (Play Head) กระโดดไปยังตำแหน่งที่ต้องการ ได้แก่

ตัวอย่าง....................

จากภาพ เป็นการกำหนดให้หัวอ่าน (Play Head) กระโดดไปหยุดที่ Scene 2 เฟรมที่ 10

ที่มา : http://www.kroojan.com/flash/content/actionscript.html