เอกสารประกอบการอบรม 25-27 กพ 61

11 เอกสารประกอบการอบรมการอบรมเชิงปฏบิ ตั กิ าร เรื่อง การสร้างส่ือการสอนมัลติมีเดยี เสมอื นจริงแบบ ปฏิสัมพันธ์โดยใชเ้ ทคโนโลยี AR เบอ้ื งต้น ในยคุ การศึกษา 4.0 วันที่ 25 – 27 กุมภาพนั ธ์ 2561 คณะครศุ าสตร์ มหาวทิ ยาลัยราชภฏั สวนสุนันทา คณะครศุ าสตร์ มหาวทิ ยาลัยราชภัสวนสุนนั ทา

22 การสร้างสอื่ มลั ติมเี ดียเสมอื นจริง (AR) โดยการใช้โปรแกรม Aurasmaออรสั มา คอื อะไร? ออรสั มาเป็นแอพพลเิ คช่นั สาหรับสร้างสือ่ ในโลกแหง่ ความจริงเสมือน (Augmented Reality : AR )เหมาะสาหรับการพฒั นาสอ่ื ทีใ่ ช้อปุ กรณป์ ระเภท i-phone i-padรวมถึงอุปกรณค์ อมพิวเตอร์พกพาตา่ ง ๆ ทใ่ี ช้ระบบปฏิบตั ิการ ios และ Android คุณสมบัติพเิ ศษของออรัสมาจะเป็นตวั กลางสาหรับการเชือ่ มโยงโลกของความเป็นจรงิ โลกความจริงเสมือนเข้าด้วย โดยแสดงผลออกมาในรูปแบบสื่อปฏิสมั พันธท์ ม่ี องเหน็ ควบคมุ และสมั ผสั ได้ทางหนา้ จอ ท้งั ทีเ่ ป็นภาพน่ิง ภาพเคลื่อนไหว เสียง การเชอ่ื มโยงไปยงั เว็บไซต์ตามทีก่ าหนดสามารถติดตงั้ แอพพลเิ คช่ัน ออรัสมา (AURASMA) ไดฟ้ รีทั้งในระบบปฏิบัติการ ios และ Android ดงั นี้ คณะครุศาสตร์ มหาวทิ ยาลัยราชภัสวนสนุ นั ทา

33 ออรัสมา เป็นเครื่องมือสาเร็จรูปที่จะอานวยความสะดวก ในการสร้างส่ือ งานด้านกราฟิก ประเภทAugmented Reality โดยผู้สร้างสื่อไม่จาเป็นต้องมีความรู้เชิงลึกในเร่ืองการเขียนโปรแกรมแต่อย่างใดหากต้ อ ง ก าร เพี ยงคว าม คิ ดสร้างสรรค์ ของผู้ สร้ างสร รค์ สื่ อและประยุ กต์ ใช้ งาน ให้สอ ดคล้ อ งกั บบริบทหรือสภาพแวดลอ้ มตามต้องการสามารถติดต้ังแอพพลิเคช่นั ออรสั มา (AURASMA) ได้ฟรีท้ังในระบบปฏิบัติการ iosและ Android ดงั นี้ 1. ระบบปฏบิ ตั กิ าร ios ดาวนโ์ หลดแอพพลิเคช่นั ไดท้ ี่ App Store 2. ระบบปฏบิ ัตกิ าร Android ดาวนโ์ หลดแอพพลเิ คช่ันไดท้ ี่ Play Storeความเปน็ มาในตา่ งประเทศ ออรสั มา กอ่ กาเนิดข้นึ เมื่อปี ค.ศ 2011 และพัฒนาเติบโตอย่างรวดเร็ว จนกลายเปน็ เทคโนโลยตี น้ แบบและผู้นาดา้ น Augmented Reality เผยแพร่สู่สาธารณะชนภายใต้เวบ็ ไซตช์ อ่ื www.aurasma.comความเปน็ มาของ Aurasma ในประเทศไทย ด ร . ไ พ ฑู ร ย์ ศ รี ฟ้ า อ า จ า ร ย์ ภ า ค วิ ช า เ ท ค โ น โ ล ยี ก า ร ศึ ก ษ า ค ณ ะ ศึ ก ษ า ศ า ส ต ร์มหาวิทยาลัยเกษตรศาสตร์ ได้นาเทคโนโลยีออรัสมา มาประยุกต์ใช้ในการเรียนการสอนรายวิชา เทคโนโลยีการศกึ ษาเบอื้ งต้น กับนิสิตระดบั ปรญิ ญาตรี ปีการศึกษา 2555 ผลจากการประยุกต์ใช้เทคโนโลยีออรัสมาเพื่อการผลิตส่ือการเรียนการสอน ปรากฏว่า นิสิตมาความสนใจต่อเทคโนโลยีออรัสมาอยูในระดับมาที่สุด และสามารถประยุกต์สร้างเป็นส่อื การสอนเพอื่ เตรียมความพร้อมในการออกฝึกประสบการณว์ ิชาชพี ได้เป็นอยา่ งดีสาหรับการผลิตสื่อเพ่ือการเรียนการสอนนั้น ดร.ไพฑูรย์ ศรีฟ้า ได้ผลิตเอกสารประกอบการสอน หนังสือตารามีชีวิต กลา่ วคือ การใช้เทคโนโลยอี อรัสผสมผสานเข้ากับเอกสารทพี่ มิ พใ์ นรปู แบบกระดาษ แต่สามารถชมผา่ นโทรศัพท์มอื ถือหรือ Tablet ปรากฏเหน็ เปน็ ส่ือมัลติมเี ดียประกอบด้วยภาพเคล่อื นไหวคาบรรยาย โมเดล3 มิติ รวมถึงการทา Touch Screen เพื่อขยายภาพแบบเตม็ จอ และเชื่อมโยงกับเว็บไซต์ตามท่กี าหนดได้ คณะครศุ าสตร์ มหาวิทยาลยั ราชภัสวนสนุ นั ทา

44คณุ สมบัตขิ องออรสั มา ออรัสมา เป็นเทคโนโลยีท่ีผสานโลกความแห่งความเป็นจริงกับโลกของความจริงเสมือนที่สร้างขึ้นทาให้มนุษย์โลกสามารถเข้าถึงข้อมูลที่ถูกเข้ารหัสด้วยออรัสมา (มองด้วยตาเปล่าไม่เห็น) ให้ปรากฏเห็นภาพผ่านหน้าจออุปกรณ์ประเภท Smart Devices เช่น โทรศัพท์มือถือ Tablet(ที่มีกล้องหลัง) ได้โดยไม่ต้องใช้มาร์คเกอร์ (Marker) ไม่ต้องเขียนโปรแกรมควบคุมใด ๆ ทั้งส้ิน ใช้งานง่าย สามารถประยุกต์ใช้ออรสั มาสร้างเป็นสือ่ ไดห้ ลากหลาย เช่น หนังสอื พมิ พ์ วารสาร ตารา กลอ่ งบรรจุภณั ฑ์ สนิ คา้ เสือ้ ผา้ ป้ายโฆษณา และอื่นๆเปน็ ตน้ ออรัสมาเป็นแอพพลิเคชั่นท่ีประยุกต์สร้างส่ือได้ทั้งแบบระบบออนไลน์และออฟไลน์ ผลผลิตที่สร้างด้วยออรัสมาจะมีท้ังภาพนิ่ง ภาพเคล่ือนไหว ภาพ 3 มิติ เสียง แล้วแต่ผู้สร้างสรรค์งานจะเลือกใช้ หากสร้างเปน็ สอ่ื แบบออนไลน์ยงั สามารถกาหนดจุดเชอ่ื มโยงไปยงั เวบ็ ไซตไ์ ดอ้ กี ด้วยการเตรียมความพรอ้ มในการผลิตสอื่ ออรัสมา 1. อุปกรณ์จาเปน็ ที่ตอ้ งใช้ 2. ขั้นตอนการสรา้ งสอื่ ออรสั มา คณะครศุ าสตร์ มหาวิทยาลัยราชภัสวนสนุ นั ทา

5 5การประยุกต์ใชอ้ อรัสมาตวั อย่าง การประยุกตเ์ พื่องานด้านการศกึ ษาตัวอยา่ งการ ประยกุ ต์เพ่อื งานด้านการท่องเท่ยี ว คณะครศุ าสตร์ มหาวทิ ยาลยั ราชภัสวนสนุ ันทา

6 6คู่มอื การสรา้ งเทคโนโลยเี สมอื นจริง บนโปรแกรม Aurasma เบ้อื งตน้1. เข้าที่เว็บไซต์ : www.hpreveal.com ดงั ภาพ2. ใหน้ ักศกึ ษาเข้าไปที่เว็บไซต์ https://studio.hpreveal.com/landing กดเลือก Login to HP RevealStudio คณะครุศาสตร์ มหาวทิ ยาลัยราชภัสวนสุนันทา

77 3. ให้ทาการกรอก Create an account ตามชอ่ งท่ีปรากฏ แลว้ กด Create account คณะครศุ าสตร์ มหาวิทยาลยั ราชภัสวนสุนนั ทา

8 84. ปรากฏหนา้ จอในการใช้งานโปรแกรม Hp Reveal5. หลังจากน้นั จะปรากฏหน้าจอการเข้าสู่เวบ็ ไซต์ Aurasma Studio (1)6. ข้ันตอนถัดไปใหน้ ักศกึ ษาเลือก + Create New Aura (1) คณะครศุ าสตร์ มหาวิทยาลัยราชภัสวนสุนนั ทา

997. หลังจากนน้ั จะปรากฏขน้ั ตอนท่ี 1 Step one Upload Trigger ใหท้ าการ upload ภาพ Trigger Image ท่ีไดจ้ ัดเตรียมไว้8. ทาการ Step 1 Upload Trigger Image ท่ไี ด้เตรยี มไว้ ตัง้ ชอื่ Name (1) เลอื ก Browse (2) เพื่อเลือกไฟลร์ ูปที่ต้องการ แล้วกด Save (1) (2) [email protected] คณะครศุ าสตร์ มหาวทิ ยาลยั ราชภัสวนสนุ นั ทา

10 109. ได้ภาพพน้ื หลังท่ีตอ้ งการ โดยสามารถปรับขนาด โดยเลอื กที่ Zoom in และ Zoom out ดา้ นล่างรูป [email protected]. หลังจากน้นั ใหท้ าการเลือก Rectangle (1) เพือ่ เป็นการกาหนดหน้าจอดงั กลา่ ว แลว้ คล๊ิก Next (2) (2) [email protected] (1) คณะครศุ าสตร์ มหาวิทยาลยั ราชภัสวนสนุ นั ทา

11 1111. ถดั ไปเราจะมาทาการใส่ปุม่ ให้กบั หน้าจอการทางาน โดยกาหนดให้สรา้ งทง้ั หมด 4 ปมุ่ Play , PauseStop, Facebook โดยทาการสร้างทีละปุ่ม เลอื ก click to upload overlay (1) (1) [email protected]. หลงั จากนน้ั ใหท้ าการเลือกปมุ่ play ทเี่ ราได้ทาการสรา้ ง import เขา้ มา เลอื ก Open หลงั จากนน้ั ทาการSave รปู ภาพดงั กล่าว[email protected] (1) (1)13. ทาการย่อภาพปุม่ play ตามความเหมาะสม หลังจากนั้นอีก 3 ปมุ่ ทเ่ี หลือให้ทาเหมือนเดมิ คณะครุศาสตร์ มหาวทิ ยาลยั ราชภัสวนสุนนั ทา

12 12 [email protected]. จะไดป้ ุ่มท้ังหมด 4 ปุ่ม และสถานะของ Overlay ของทุกปุ่ม [email protected]. ทาการเลอื กวดี โี อ ทีเ่ ราจะนามาใชป้ ระกอบ ให้เลอื กท่ี click to upload overlay แลว้ เลอื ก vdo ที่ต้องการ (1) คณะครศุ าสตร์ มหาวิทยาลยั ราชภัสวนสนุ นั ทา

13 13 (1) [email protected]. ใหท้ าการตัง้ ชื่อ Name (1) และทาการคลิ๊กเลือก Loop Overlay (2) และทาการบนั ทึก Save (3) (1) (2)[email protected] (3)คณะครศุ าสตร์ มหาวทิ ยาลยั ราชภัสวนสุนนั ทา

14 1417. ทาการเลือกวดี โี อเสรจ็ แล้ว ปรับตาแหน่งของวดี โี อให้เหมาะสม (1) [email protected]. ทาการเพมิ่ action ให้กับปมุ่ โดยเร่มิ จากป่มุ play เราจะทาการเลอื ก add action (1) ใหเ้ ลือกเป็นAfter Overlay has Started (2) (2) [email protected] (1)19. หลังจากเลือก Add Action (1) แล้วให้ทาการเลือกเป็น Stop an Overlay (2) และทาการ AddOverlay (3) เป็นช่อื เพลงที่เราได้ทาการนาวดี โี อมาวาง (4) แล้วทาการเลือก Save (5) คณะครศุ าสตร์ มหาวทิ ยาลยั ราชภัสวนสนุ ันทา

15 15 (1) (2) (3) (4) [email protected] (5)20. ถดั ไปเลือก Add Action (1) ที่ปมุ่ Play อกี รอบ หลังจากนน้ั กาหนดเป็น When Overlay is tapped (2)แล้วทาการ Add Action เป็นแบบ Start an Overlay (3) และทาการ Add Overlay (4) เปน็ วดี ีโอเดิมอยา่ ลมื กด Save (5) (2) (3) (4)[email protected] (5) (1) คณะครุศาสตร์ มหาวทิ ยาลัยราชภัสวนสุนันทา

16 1621. สถานะของปมุ่ Pause ให้เลือก Add Action (1) ใหเ้ ลอื กเป็น When Overlay is tapped (2) และ addaction เลอื กเปน็ Pause on Overlay (3) เลอื ก add Overlay เปน็ วดี ีโอเพลงเหมือนกับป่มุ play (4) (2) (3) (4) (1)22. สถานะของปุ่ม Stop ใหเ้ ลอื ก Add Action (1) ให้เลอื กเปน็ When Overlay is tapped (2) และ addaction เลือกเป็น Stop on Overlay (3) เลอื ก add Overlay เป็นวีดีโอเพลงเหมอื นกบั ปมุ่ play (4) (2) (3) (4) (1) คณะครุศาสตร์ มหาวทิ ยาลัยราชภัสวนสุนันทา

17 1723. สถานะของปุ่ม Facebook ให้เลอื ก Add Action (1) ใหเ้ ลอื กเป็น When Overlay is tapped (2) และadd action เลอื กเปน็ Perform a random Action (3) (2) (3) (1)24. ใหท้ าการเลอื ก Action (1) ทาการเปลย่ี นลงิ ก์ https://www.facebook.com/lpkeng (3) ให้เป็นช่อืลงิ ก์ Facebook ของเราเอง แล้วกด Ok (3) และอยา่ ลมื กด Save ทุกครง้ั (4) (1) (2) (3) (4) คณะครศุ าสตร์ มหาวิทยาลยั ราชภัสวนสนุ นั ทา

18 1825. ข้นั ตอนถดั ไปเราจะทาการ Save (1) และทาการ Share (2) ไฟลง์ านดงั กล่าว (1) (2)26. หลังจากน้นั เราจะไดต้ วั วีดโี อ บน Aurasma Studio จากนั้นเราลองทาการ Follow โดยตอ้ งทาการลงApplication Aurasma บนมอื ถอื ก่อน โดยทาการ Search ใน App Store หรือ Play Store วา่ Aursamaคณะครุศาสตร์ มหาวทิ ยาลัยราชภัสวนสนุ นั ทา