คู่มือการสร้าง สื่อวิธีป้องกันโควิด ด้วยโปรแกรม Adobe Animate 2019_Ebook

ค่มู อื การสรา้ ง สอ่ื วธิ ปี อ้ งกันโควิด ดว้ ย
โปรแกรม Adobe Animate 2019

จัดทำโดย
1. นายพีรวัส ยอดธรี สิทธิ์
2. นางสาวจดิ าภา เรยี งสา
3. นางสาวฐติ ิพร น้อยเกิด
4. นายวรายุส ทรัพย์มลู
5. นายสทุ ธิพงษ์ แสงบัวท้าว

ค่มู ือการสรา้ ง สื่อวธิ ปี ้องกนั โควดิ ด้วยโปรแกรม Adobe Animate 2019
1.ดบั เบล้ิ คลิกโปรแกรม Adobe Animate 2019 หน้า Desktop หรือคลิกขวาท่โี ปรแกรม Adobe Animate 2019
เลือก Open เพื่อทำการเปดิ โปรแกรมขน้ึ มาใช้งานดังรูป

2.เปดิ โปรแกรม Adobe Animate 2019 จะแสดงหนา้ สร้างโปรเจก๊ ขน้ึ มา ใหเ้ ลือก Standard และ คลิก Create

3. เมอื่ ทำการสร้างโปรเจก๊ เสร็จแลว้ จะแสดงหน้าตา การทำงานของ Seen1 ดงั ภาพ

4. จากนัน้ ทำการดึงทรัพยากรที่ต้องใช้โดยการคลิกที่ File → Import → Import to Library

5. เลอื ก Folder ทช่ี ่อื วา่ ทรพั ยากร ดบั เบล้ิ คลกิ ไปทช่ี ว่ งเชา้ และ Seen_intro จากนน้ั เลือกทรัพยากรท้ังหมด
และ กดเปิด โปรแกรมจะทำการดงึ ทรัพยากรมาไวท้ ี่ library ท่ี กลุ่มเมนมู ุมขวาบน ดงั ภาพ

6.จากนั้นเปล่ยี นชอ่ื Layer1 เป็น bg ที่ แถบ Timeline ด้ายซา้ ยบน ดงั ภาพ

7. จากน้นั ดึง ทรพั ยากรท่ีช่ือ Background จาก แถบ Library มาวางที่ ฉาก หรือ Seen ของเราเพื่อเปน็ การใส่พ้นื
หลังดงั ภาพ และทำการล๊อก Layer bg โดยการคลิกทีจ่ ุด ตรงกบั เครื่องหมายแม่กุญแจด้านบน ดังภาพ

8. ทำการเลือ่ กแถบ Timeline ไปทวี่ ินาทที ่ี 10 และ คลิกขวา เลอื ก Insert Keyframe เพอื่ เป็นการเพมิ่ เฟรมของ
พืน้ หลงั ให้ถงึ วินาทที ่ี 10 ดงั ภาพ

9. ทำการสร้าง Layer ใหม่ โดยการคลิกที่เครื่องมือรูปกระดาษที่แถบ Timeline จะปรากฎ Layer ใหม่ขึ้นมาดัง
ภาพ และเปลีย่ นชอื่ เปน็ Title

10. คลกิ เลือก Layer ที่ช่ือ Title แล้วไปทแ่ี ถบ Library และทำการดงึ ไฟล์ท่ีช่ือวา่ title ในแถบ Library มาวางดัง
ภาพ

11. สามารถใช่เครื่องมือ Free Transform Tool ในการปรับขนาดย่อขยายภาพได้ โดยนคลิกทีเ่ ครื่องมอื ดังภาพ
หรือ Q บนแปน้ พมิ พก์ ็ได้เช่นกนั สังเกตไดว้ า่ จะมจี ุดตามมุมของภาพ ให้กดค้างท่จี ุดตามมมุ ของภาพเพื่อปรบั ขนาด
ของภาพโดยการกด Shift เพื่อไม่ใหข้ นาของภาพเพยี น และจัดให้อยู่ตำแหน่งดังภาพ

12.ทำการคลิกซา้ ยค้างที่ จดุ สีดำแลว้ ลากมาทเี่ ฟรมที่60วินาทีท่ี2ดังภาพแลว้ ปลอ่ ย เพื่อท่ีจะตอ้ งการใหแ้ สดงภาพน้ี
ในเฟรมท6่ี 0วนิ าทีที่ 2

13. ทำการคลิกขวาแล้วเลอื กคลกิ คำสง่ั Action ด้านล้าง จะปรากฎหนา้ ต่างขึ่นมาดังภาพ
14. ทหี่ น้าต่าง Action ให้คลิกท่เี คร่ืองมือ Code Snippets จะปรากฏหน้าตา่ งข้ึนมาดงั ภาพ

15. จากน้ันทำการคลกิ ซ้ายท่ี ActionScript และคลกิ ที่ Animation เลือกสลปิ ที่ชอ่ื วา่ Fade In a Movie Clip
แล้วดับเบิ้ลคลิด จะมโี คดของ Action ท่เี ราเลือกขนึ้ มาให้เรากดปดิ ไปไดเ้ ลย จะสังเกตได้ว่า จะมี Layer ขอื่ Action
ขน้ึ มาให้ ดงั ภาพ เพื่อท่จี ะต้องการใหภ้ าพของเราค่อยๆแสดงข้ึนมา ใหล้ องกด Ctrl + Enter เพือ่ ทำการทดสอบ

16. ทำการสรา้ ง Layer ใหม่ขน้ึ มา แล้วเปลี่ยนชือ่ เปน็ P1และทำการล้างไฟล์ p1 จากแถบ Library มาวางไวน้ อก
ฉากและปรับขานให้เหมาะสมดงั ภาพ

17. ทำการคลิกซา้ ยค้างท่ี จุด สดี ำแลว้ ลากมาท่ีเฟรมที่30วนิ าทที ่ี1 แลว้ คลิกขวาเลือกคำส่งั Create Classic
Tween จะสังเกตได้วา่ แถบเฟรมของเราเปล่ียนเปน็ สี มว่ ง

18. ทำรการคลิกขวาที่เฟรมท่ี 120 วนิ าทที ี่ 4 แล้วเลือกคำสั่ง Insert Keyframe จากนนั้ ทำการขยบั ภาพมาท่ี
ตำแหน่งทเ่ี ราต้องการ และทำการกด Ctrl + Enter เพอ่ื ทำการทดสอบ

19. ทำการสรา้ ง Layer ใหม่ขน้ึ มาและเปลีย่ นช่ือเปน็ P2 และทำการลา้ งไฟล์ p2 จากแถบ Library มาวางไวน้ อก
ฉากและปรบั ขานให้เหมาะสมดงั ภาพ

20. ทำการคลิกซา้ ยค้างท่ี จุด สดี ำแล้วลากมาทเ่ี ฟรมที่60วนิ าทีท่ี 2 แลว้ คลกิ ขวาเลอื กคำส่งั Create Classic
Tween จะสงั เกตได้ว่า แถบเฟรมของเราเปล่ยี นเป็นสี ม่วง

21. ทำรการคลิกขวาทเ่ี ฟรมที่ 150 วินาทที ี่ 5 แล้วเลอื กคำสัง่ Insert Keyframe จากน้นั ทำการขยับภาพมาที่
ตำแหน่งที่เราต้องการ และทำการกด Ctrl + Enter เพื่อ ทำการทดสอบ

22. เลือ่ นแถบ Timeline ไปทางทา้ ยๆของเฟรมจะเหน็ ได้วา่ มีเฟรมบางส่วนที่เกินมาให้เราทำการคลิกซ้ายคา้ งลาก
คลมุ่ เฟรมสว่ นทเี่ กนิ แลว้ คลกิ ขวาเลอื กคำส่งั Remove Frame เพอ่ื ทำการลบเฟรมส่วนเกินออกไปดงั ภาพ

23.ทำการสรา้ ง Layer ใหม่ขึ้นมาและเปลย่ี นช่อื เป็น P3 และทำการล้างไฟล์ p3 จากแถบ Library มาวางไวน้ อก
ฉากและปรบั ขานให้เหมาะสมดังภาพ

24. ทำการคลิกซา้ ยค้างท่ี จุด สีดำแล้วลากมาทเ่ี ฟรมที่90วินาทีที่ 3 แล้วคลกิ ขวาเลอื กคำสง่ั Create Classic
Tween จะสังเกตไดว้ ่า แถบเฟรมของเราเปลยี่ นเป็นสี มว่ ง

25.ทำรการคลิกขวาทเี่ ฟรมที่ 130 วินาทที ่ี 6 แล้วเลือกคำส่ัง Insert Keyframe จากนั้นทำการขยับภาพมาที่
ตำแหน่งท่เี ราต้องการ และทำการกด Ctrl + Enter เพอ่ื ทำการทดสอบ

26. เลอื่ นแถบ Timeline ไปทางทา้ ยๆของเฟรมจะเหน็ ได้ว่ามเี ฟรมบางสว่ นท่เี กนิ มาให้เราทำการคลิกซ้ายคา้ งลาก
คลุ่มเฟรมส่วนที่เกินแลว้ คลกิ ขวาเลือกคำสงั่ Remove Frame เพ่อื ทำการลบเฟรมสว่ นเกนิ ออกไปดงั ภาพ

27.ทำการสร้าง Layer ใหมข่ ึ้นมาและเปล่ียนช่ือเป็น “เสยี ง” และทำการล้างไฟล์ sound_intro.wav จากแถบ
Library มาวางไว้สว่ นไหนก็ได้ของฉาก สังเกตทแี่ ถบ Timeline ว่ามี คล่นื เสยี งปรากฏทเี่ ฟรมของ Layer “เสยี ง”
แลว้ กด Ctrl + Enter เพอ่ื ทำการทดสอบ

28. ทำการสรา้ ง Seen ใหมโ่ ดยการคลกิ ท่เี คร่ืองมือ ดังภาพแล้ว คลิก Add Seen จะได้หนา้ ตา่ ง Seen ใหมข่ นึ้ มา
ดงั ภาพ

29. จากน้นั ทำการดึงทรัพยากรทต่ี อ้ งใช้โดยการคลิกท่ี File → Import → Import to Library

30.เลอื ก Folder ทช่ี ื่อวา่ ทรัพยากร ดับเบล้ิ คลกิ ไปทีช่ ว่ งเช้า และ Seen1 จากนั้นเลือกทรัพยากรทั้งหมด
และ กดเปดิ จะมีหน้าต่างปรากฎขึน้ มาให้กด Import โปรแกรมจะทำการดงึ ทรัพยากรมาไว้ท่ี library ท่ี กล่มุ เมนู
มมุ ขวาบน ดังภาพ

31.จากนน้ั เปลี่ยชือ่ Layer1 เปน็ bg ที่ แถบ Timeline ดา้ ยซา้ ยบน ดงั ภาพ

32.จากนนั้ ดึง ทรัพยากรทชี่ ือ่ Background_seen1 จาก แถบ Library มาวางที่ ฉาก หรอื Seen ของเราเพอื่ เปน็
การใส่พืน้ หลงั ดังภาพ และทำการล๊อก Layer bg โดยการคลกิ ท่จี ดุ ตรงกับเคร่ืองหมายแม่กุญแจดา้ นบน ดงั ภาพ

33.ทำการเล่ือนกแถบ Timeline ไปท่ีวินาทีท่ี 10 และ คลกิ ขวา เลอื ก Insert Keyframe เพอื่ เป็นการเพ่ิมเฟรม
ของพ้ืนหลงั ใหถ้ ึงวินาทีท่ี 10 ดงั ภาพ

34.ทำการสร้าง Layer ใหมข่ ้ึนมาและเปลย่ี นชื่อเปน็ “ผ้หู ญงิ ” และทำการล้ากไฟล์ ผู้หญิง.ai จากแถบ Library มา
วางไว้นอกฉากและปรับขานใหเ้ หมาะสมดังภาพ

35.ทำการคลกิ ขวาท่ีรปู ภาพแลว้ เลือกคำส่งั Convert to Symbol.. กดแป้น F8 ก็ได้เชน่ กนั แลว้ ต้งั ชอ่ื ผหู้ ญิง ดง้ั
ภาพแลว้ กด OK

36.ทำการดบั เบ้ิลคลิกท่รี ู้ภาพเพื่อเข้าสหู้ น้าจดั การ Symbol ดงั ภาพ

37.ทำการคลิกขาวทรี่ ปู ภาพอีกครั้งแลว้ เลือกคำสงั่ Distribute to Layers หรอื กดแปน้ Ctrl+Shift+D ก็ไดเ้ ชน่ กนั
จากนน้ั ใหเ้ ลอื ก Layer ชอ่ื ผ้หู ญงิ _ai แลว้ ดับเบล้ิ คลิกท่ีรูปภาพ จะปรากฏ Layer ของภาพขึ้นมาอีกหลาย Layer
เลยใหท้ ำการทดลองปิดเปดิ ดวงตาดวู ่า Layer ไหนเปน็ สว่ นไหนบา้ ง โดยคลิดที่จดุ สีดำตามแนวของไอคอนดวงตา
ทำการเปลี่ยนช่ือและล๊อก Layer สว่ นตัวไว้ตามภาพ

38.จากนน้ั ที่ Layer ตวั ใหท้ ำการคลิกขาวท่ีเฟรมท6่ี 0วนิ าทีที่2เลอื กคำสั่ง Insert Keyframe

39.จากน้นั คลกิ ขวาทเี่ ฟรมท่ี 1 ของ Layer ขาขวา แลว้ เลือกคำสง่ั Create Classic Tween จากน้ันใหค้ ลกิ ขวาที่
เฟรมที่ 30 วนิ าทีที่ 1 และเลือกคำส่ัง Insert Keyframe ดงั ภาพ

40.จากนั้นใหท้ ำการคลิกเลอ้ื นจุดหมนุ สีขาวตรงกลางของภาพเพ่ือทีจ่ ะทำการขยบั ขาขวา และทำการขยบั ขาท่จี ุด
ตรงมมุ ของภาพตามทตี่ อ้ งการ ดังภาพ

41.จากน้นั ให้คลิกขาวที่เฟรมที่1ของ Layer ขาขวา แล้วทำการเลอื กคำส่งั Copy Frames แลว้ นำมาวางทีเ่ ฟรม
ท6ี่ 0วินาทีท่ี2 โดยการคลิกขวาทเี่ ฟรมท่ี60วนิ าทีท่ี2แล้วเลือกคำสงั่ Paste Frame เพือ่ วางเฟรม ดังภาพ

42.จากนั้นคลิกขวาท่เี ฟรมท่ี 1 ของ Layer ขาซา้ ย แลว้ เลอื กคำสั่ง Create Classic Tween จากนน้ั ให้คลิกขวาที่
เฟรมท่ี 30 วนิ าทที ่ี 1 แล้วเลอื กคำสัง่ Insert Keyframe ดงั ภาพ

43.จากนั้นใหท้ ำการคลิกเล้อื นจุดหมนุ สขี าวตรงกลางของภาพเพื่อทจี่ ะทำการขยบั ขาซ้าย และทำการขยับขาทีจ่ ดุ
ตรงมมุ ของภาพตามที่ต้องการ ดงั ภาพ

44.จากนั้นใหค้ ลิกขาวท่เี ฟรมท่ี1ของ Layer ขาซา้ ย แล้วทำการเลือกคำสัง่ Copy Frames แลว้ นำมาวางทีเ่ ฟรม
ท6ี่ 0วนิ าทที ่ี2 โดยการคลกิ ขวาทเี่ ฟรมท่ี60วินาทีท่ี2แล้วเลือกคำสั่ง Paste Frame เพอ่ื วางเฟรม ดงั ภาพ

45.หลังจากนั้นให้ดับเบล้ิ คลิกทีแ่ ถบ Seen ชอ้ื ผหู้ ญงิ เพ่ือกลบั ไปหน้า Symbol และทำการคิกขวาท่ี Layer
“ผู้หญิง_ai” ตรงเฟรมท6่ี 0วนิ าทีที่2 และเลือกคำส่งั Insert Keyfremes ตามภาพ

46.หลงั จากนัน้ ให้ดบั เบ้ิลคลิกท่ี Seen2 เพ่ือหลับมาหน้าแรกของและทำการคลิกขาวที่ Layer ผู้หญงิ ตรงเฟราท่ี1
แลว้ เลอื ก Create Classic Tween จากน้ันใหค้ ลิกขวาท่ีเฟรมที่ 300 วนิ าทที ี่ 10 แลว้ เลือกคำสง่ั Insert Keyframe
แล้วคลิกซา้ ยคา้ งดงึ ภาพมาท่ีตำแหนง่ ทต่ี ้องการดังภาพ

47.ทำการสร้าง Layer ใหมข่ ึ้นมาและเปล่ยี นชือ่ เป็น “ผู้ชาย” และทำการลา้ กไฟล์ ผู้ชาย.ai จากแถบ Library มา
วางไว้นอกฉากและปรบั ขานให้เหมาะสมดงั ภาพ

48.หลังจากนนั้ ทำการคลกิ ขวาทภี่ าพ เลือกคำส่ัง Transform FlipHorizontal เพอื่ ทำการพลิกภาพกลบั ด้านมา

49.หลงั จากน้ันใหค้ ลิกขวาแล้วเลือกคำสง่ั Convert to Symbol จะมีหนา้ ตา่ งข้นึ มาให้ตังชื่อ “ผู้ชาย” แล้วกดOK
แลว้ ดับเบิ้ลคลกิ ทร่ี ปู ภาพอีกคร้ังเพอื่ เขา้ สู้หนา้ จดั การ Symbol

50.เม่อื เขา้ ส้หู น้าจดั การ Symbol คลิกขวาทีภ่ าพเลือกคำสั่ง Distribute to Layers หรือ กดแป้น Ctrl+Shift+D
ก็ไดเ้ ชน่ กัน จากนั้นใหเ้ ลอื ก Layer ชอื่ ผู้ชาย_ai แลว้ ดับเบล้ิ คลิกทร่ี ปู ภาพ จะปรากฏ Layer ของภาพข้ึนมาอกี
หลาย Layer เลยให้ทำการทดลองปิดเปดิ ดวงตาดวู ่า Layer ไหนเปน็ สว่ นไหนบ้าง โดยคลิดทีจ่ ดุ สีดำตามแนวของ
ไอคอนดวงตาทำการเปลี่ยนชอ่ื และล๊อก Layer สว่ นตวั ไว้ตามภาพ

51.จากนัน้ ที่ Layer ตวั ทัง้ 2 Layer ใหท้ ำการคลิกขาวทเ่ี ฟรมที่60วนิ าทีท่ี2เลอื กคำสัง่ Insert Keyframe ดงั ภาพ

52.ให้จดุ หมนุ สขี าวตรงกลางของภาพไปตรงจุดท่ตี ้องการตามภาพจากนัน้ คลิกขวาทเ่ี ฟรมท่ี 1 ของ Layer แขน แลว้
เลอื กคำสงั่ Create Classic Tween จากนั้นให้คลิกขวาที่เฟรมท่ี 30 วนิ าที ท่ี 1 และเลือกคำสั่ง Insert Keyframe
ดังภาพ

53. จากน้ันให้ทำการขยับขาท่ีจดุ ตรงมมุ ของภาพตามท่ตี ้องการ ดังภาพ

54. จากนัน้ ให้คลกิ ขาวทเี่ ฟรมท่ี1ของ Layer แขน แล้วทำการเลือกคำสง่ั Copy Frames แล้วนำมาวางทเ่ี ฟรมท่ี60
วินาทที ี2่ โดยการคลิกขวาที่เฟรมท6ี่ 0วนิ าทีที่2แลว้ เลือกคำสัง่ Paste Frame เพ่ือวางเฟรม ดังภาพ

55.ทำการเลือก Layer ขาซ้าย ใหจ้ ุดหมนุ สขี าวตรงกลางของภาพไปตรงจดุ ท่ตี ้องการตามภาพจากน้นั คลกิ ขวาท่ี
เฟรมที่ 1 ของ Layer ขาซ้าย แลว้ เลอื กคำสัง่ Create Classic Tween จากนนั้ ใหค้ ลิกขวาท่เี ฟรมที่ 30 วนิ าที ที่ 1
และเลือกคำสั่ง Insert Keyframe ดงั ภาพ

56. จากน้นั ใหท้ ำการขยบั ขาทจ่ี ดุ ตรงมุมของภาพตามที่ต้องการ ดังภาพ

57.จากน้นั ให้คลิกขาวทีเ่ ฟรมท่ี1ของ Layer ขาซา้ ย แล้วทำการเลอื กคำส่งั Copy Frames แลว้ นำมาวางทเ่ี ฟรม
ท6่ี 0วนิ าทที ี่2 โดยการคลกิ ขวาท่เี ฟรมที่60วนิ าทีที่2แลว้ เลือกคำสงั่ Paste Frame เพ่อื วางเฟรม ดังภาพ

58.ทำการเลือก Layer ขาขงา ใหจ้ ุดหมนุ สีขาวตรงกลางของภาพไปตรงจุดที่ต้องการตามภาพจากนั้นคลกิ ขวาท่ี
เฟรมท่ี 1 ของ Layer ขาซ้าย แล้วเลือกคำส่งั Create Classic Tween จากนน้ั ใหค้ ลิกขวาท่ีเฟรมท่ี 30 วนิ าทที ี่ 1
และเลอื กคำส่ัง Insert Keyframe ดงั ภาพ

59.จากนนั้ ให้ทำการขยับขาที่จดุ ตรงมุมของภาพตามที่ต้องการ ดงั ภาพ

60.จากนน้ั ให้คลิกขาวทเี่ ฟรมที่1ของ Layer ขาขวา แล้วทำการเลือกคำสัง่ Copy Frames แล้วนำมาวางท่เี ฟรม
ท6ี่ 0วนิ าทีที่2 โดยการคลกิ ขวาทีเ่ ฟรมที่60วนิ าทีท่ี2แลว้ เลอื กคำส่ัง Paste Frame เพ่อื วางเฟรม ดังภาพ

61.หลังจากนนั้ ใหด้ บั เบล้ิ คลิกทแี่ ถบ Seen ช้ือผู้ชายเพื่อกลับไปหน้า Symbol และทำการคิกขวาท่ี Layer
“ผ้ชู าย_ai” ตรงเฟรมท่ี60วินาทที ี่2 และเลือกคำสง่ั Insert Keyfremes ตามภาพ

62. .หลงั จากน้นั ใหด้ ับเบิ้ลคลิกที่ Seen2 เพ่ือหลบั มาหนา้ แรกของและทำการคลกิ ขาวท่ี Layer ผหู้ ญงิ ตรงเฟราท่ี1
แล้วเลอื ก Create Classic Tween จากนั้นให้คลิกขวาท่เี ฟรมที่ 300 วนิ าทที ่ี 10 แล้วเลือกคำส่ัง Insert
Keyframe แล้วคลกิ ซ้ายค้างดงึ ภาพมาท่ตี ำแหน่งท่ตี ้องการดงั ภาพ

63.หลงั จากการสร้าง Layer ใหม่ขนึ้ มาตง้ั ช่ือว่าเสยี ง แลว้ ทำการคลิกซ้ายลากทรพั ยากร ช่อื Sound_seen1.wav
วางส่วนไหนก็ของฉาก สังเกตทีแ่ ถบ Timeline ว่ามี คล่นื เสียงปรากฏที่เฟรมของ Layer “เสียง”แลว้ กด
Ctrl + Enter เพื่อ ทำการทดสอบ