3 Card

การประยุกตใ์ ช้ ZapWorks การ์ด การออกแบบการ์ดสาหรบั สรา้ ง Tracking Image ZapWorks สามารถประยกุ ต์ได้กับการด์ เชญิ ทกุ รูปแบบ ทุกโอกาส ตัวอยา่ งการ์ดงานมงคลสมรส (หมายเลข 1) แหลง่ ท่มี าของการ์ด 1. ออกแบบและตกแตง่ ขึน้ มาเอง หรอื 2. สามารถดาวน์โหลดฟรี และนามาตกแตง่ ได้ท่ี https://www.freepik.com/home หรอื << คลิก >> 3. การสรา้ ง Tracking Image ชนดิ ไฟลภ์ าพแนะนา คือ .PNG 1 การด์ หรอื เอกสารสงิ่ พมิ พ์ทุกชนดิ สามารถนามาสร้าง AR ได้ หมายเหตุ เพอื่ ความสะดวกทา่ นโปรนาไฟลภ์ าพจากFolder Tracking Image ทีส่ ่งให้นามาทา Tracking Image ในการสร้างชิน้ งาน TCK e-Training เฟรมท่ี 1 ขอคำแนะนำกำรผลิต

1 การประยุกตใ์ ช้ ZapWorks การด์ สร้างการเ์ ชิญรปู แบบ AR 2 1. ไปทห่ี น้าเวบ็ ZapWorks 3 https://my.zap.works/login/?_ga=2.50174244.343852293. 1607492603-2119857970.1603158057 หรอื << คลกิ >> 2. Login เขา้ สูร่ ะบบ 3. เลือกฟังกช์ ั่นรปู แบบการทางาน Hobby 4. ตั้งช่อื โครงการ หรอื ชนิ้ งาน (หมายเลข 1) 4.1 เลอื กคร่ืองมอื ประเภท Designer (หมายเลข 2) 4.2 คลกิ Next Step (หมายเลข 3) หมายเหตุ ปัจจุบันทาง Zappar ปรับเปล่ียนหน้า Home Page ใหม่ เมนู ZapWorks จะอยดู่ า้ นลา้ ง (จากที่เคยอยดู่ า้ นบน) TCK e-Training เฟรมที่ 2 ขอคำแนะนำกำรผลิต

การประยกุ ตใ์ ช้ ZapWorks การ์ด การเลือก Trigger 1 Trigger คือ ภาพท่เี ป็น Markup โดยที่เมอื่ ใดก็ตามท่ี แอปพลเิ คช่นั Focus อย่ทู ี่ Trigger ส่วนท่เี ป็น Overlay จะ แสดงผลขึ้นมา 1. คลกิ ZapWorks (หมายเลข 1) หรอื สามารถเลือก WebAR QR code กไ็ ด้เช่นกนั 2. คลิก Create Project (หมายเลข 2) เร่มิ สรา้ งชน้ิ งาน หมายเหตุ 1) แบบ WebAR QR Code เปน็ รูปแบบท่สี ามารถเลือกใช้ก็ได้ 2) Marker หรือ Markup หรอื AR-Code 2 ก็คอื Trigger น้ันเองโดยที่ ZapWorks เรียก Zapcode TCK e-Training เฟรมท่ี 3 ขอคำแนะนำกำรผลติ

การประยุกต์ใช้ ZapWorks การ์ด ใชง้ านคร่อื งมือ Designer 3. คลกิ Open Designer (หมายเลข 3) 3 ขอคำแนะนำกำรผลติ TCK e-Training เฟรมที่ 4

การประยกุ ตใ์ ช้ ZapWorks การ์ด การกาหนดการ Download Zapcode 4. คลกิ Download Your Zapcode (หมายเลข 4) ในกรณคี ลกิ Download your ZapCode ระบบจะบงั คับให้ สแกน ZapCode ก่อนแล้วถึงจะสแกน Tracking Image หากเลอื ก Start without a Tracking Image ระบบให้ สแกน ZapCode เพยี งอยา่ งเดียวเท่านั้น 4 TCK e-Training เฟรมท่ี 5 ขอคำแนะนำกำรผลติ

การประยกุ ตใ์ ช้ ZapWorks การด์ การกาหนดการ Download Zapcode 5. คลิก Continue (หมายเลข 5) รปู แบบของ Zapcode จะถกู กาหนดเป็นคา่ พื้นฐานสาหรับสมาชิก ทเ่ี ลอื กทดลองใช้งานฟรี 5 TCK e-Training เฟรมที่ 6 ขอคำแนะนำกำรผลติ

การประยุกตใ์ ช้ ZapWorks การด์ นาเขา้ Tracking Image Tracking Image ภาพทใี่ ชส้ แกน ต้องเป็นภาพๆเดียวกับ ท่ีจะนาไปทาการด์ 6. คลิก Upload Tracking Image (หมายเลข 6) หมายเหตุ Tracking Image สามารถเปล่ียน หรือยกเลกิ ใน ภายหลงั ได้ ในกรณนี าภาพมาจากอินเทอรเ์ น็ตโปรดระวัง เรอ่ื งเครดติ การเผยแพร่ 6 ขอคำแนะนำกำรผลติ TCK e-Training เฟรมท่ี 7

7 การประยกุ ตใ์ ช้ ZapWorks การด์ 8 การวิเคราะห์ Tracking Image ของ Zapworks 7. Tracking Image ทีอ่ พั โหลดไประบบ จะทาการวเิ คราะห์คณุ ภาพโดยกาหนดออกมา 3 คา่ Good / Moderate / Poor (หมายเลข 7) โดยคณุ ภาพของภาพส่วนใหญจ่ ะต้องอยู่ในเกณฑ์ดี(Good) 8. คลิก Use This Tracking Image (หมายเลข 8) TCK e-Training เฟรมท่ี 8 ขอคำแนะนำกำรผลิต

1 การประยกุ ตใ์ ช้ ZapWorks การ์ด 2 การอัพโหลด Video Video คลปิ สามารถนาเข้าได้จาก 3 แหลง่ คอื เว็บไซต์ YouTube, จากเคร่ืองคอมฯ และเว็บไซต์ Vimeo 1. ภาพของการ์ดที่ใช้ทา Tracking Image ทผี่ ่านการการวเิ คราะห์ จากระบบของ Zapworks (หมายเลข 1) 2. คลิกเมนู Video เพื่อนาเขา้ วดิ ีโอคลปิ (หมายเลข 2) 3. คลกิ ฟงั กชั่น Upload นาเข้าวิดีโอคลิปจากเคร่ืองคอมพิวเตอร์ (หมายเลข 3) 3 TCK e-Training เฟรมที่ 9 ขอคำแนะนำกำรผลิต

การประยุกต์ใช้ ZapWorks การ์ด การอพั โหลด Video 5. คลกิ เลิกไฟลว์ ดิ โี อคลิปท่ีต้องการ (หมายเลข 4) 6. คลกิ Open (หมายเลข 5) ในกรณีที่ต้องการเลือกวดิ โี อคลิปจากเวบ็ ไซต์ Vimeo สามารถดาเนินการได้ตามข้ันตอนเดยี วกับการนาเข้า จากเว็บไซต์ Youtube 4 ข้อแนะนา 1) วดิ ีโอคลิปควรตดั ต่อและใสแ่ คปชนั่ มาให้เรียยรอ้ ยก่อนนามาใช้งาน 2) ชนิดไฟลแ์ บบ MP4 3) ช่ือไฟลต์ ้องเป็นภาษาอังกฎษ 5 TCK e-Training เฟรมที่ 10 ขอคำแนะนำกำรผลติ

2 การประยกุ ต์ใช้ ZapWorks การด์ 1 ตัง้ คา่ การแสดงผลวดิ ีโอ ทั้งนีจ้ ะเลอื กค่าสดั สว่ นการแสดงผลบนสมารม์ โฟนเป็นหลกั 1. คลกิ ทีไ่ ฟล์ วดิ โี อ (หมายเลข 1) 2. จะปรากฏค่าสัดสว่ นการแสดงผล (หมายเลข 2) TCK e-Training เฟรมท่ี 11 ขอคำแนะนำกำรผลติ

การประยกุ ต์ใช้ ZapWorks การด์ ต้ังคา่ การแสดงผลวดิ โี อ 3 3. ตง้ั ค่าการแสดงผลโดยกาหนดค่าท่เี หมาะสมกับสมาร์ทโฟน คอื 640 ((หมายเลข 3)ตัง้ เฉพาะความกว้าง) ซึ่งเป็นค่าทแี่ นะนา TCK e-Training เฟรมที่ 12 ขอคำแนะนำกำรผลติ

4 การประยุกตใ์ ช้ ZapWorks การ์ด 5 ตั้งค่าการแสดงผลวิดโี อ 4. คลิกท่ีฟังก์ช่นั Properties (หมายเลข 4) 5. เลอื กคาส่งั Play on start และPause other media (หมายเลข 5) หมายถึง ให้เรมิ่ เล่นทันทีเม่ือเปดิ และหยดุ เล่นส่อื อนื่ ๆ ก่อนชัว่ คราว TCK e-Training เฟรมที่ 13 ขอคำแนะนำกำรผลติ

การประยุกตใ์ ช้ ZapWorks การ์ด ทดสอบการสแกน ในกรณีทดสอบการสแกน คลิกที่ เมนู Preview เปิดแอปพลิเคช่ัน Zappar ที่สมารท์ โฟน 1. คลิกท่ี เมนู Preview 1 2. เปิดแอปพลเิ คชนั่ Zappar ที่สมารท์ โฟน แล้วสแกนทีภ่ าพการ์ด หรือ Tracking image กบั Zapcode (หมายเลข 1) 3. หากผลการทดสอบการแสดงผลถูกตอ้ ง คลิกเมนู Publish เพ่อื เผยแพรส่ สู่ ารณะ หมายเหตุ ตวั อย่างวดิ โี อคลปิ นเี้ ปน็ การสมมตุ ขิ น้ึ เพ่อื จะแสดงให้เหน็ ถึงกระบวน การสรา้ งชิน้ งานเทา่ นน้ั จะไม่เกยี่ วข้องกับเนอื้ หาในการด์ TCK e-Training เฟรมที่ 14 ขอคำแนะนำกำรผลติ

การประยุกตใ์ ช้ ZapWorks การด์ การตกแตง่ การด์ มี 2 วิธี วธิ ที ี่ 1 การตกแตง่ การด์ แบบ Scan Zapcode ทาการดาวนโ์ หลด Zapcode มาตกแต่งร่วมกบั ภาพการ์ด (ภาพที่ใช้ทา Tracking image ) โดยจดั ให้อยใู่ นองค์ประกอบภาพ เดียวกนั จากน้นั เปดิ แอปพลิเคช่นั Zappar จากสมาร์ทโฟน สแกนยงั การ์ดเชิญ (หมายเลข 1) 1 หมายเหตุ การแสดงผลของวิดีโอคลปิ ในรูป AR น้ี ถกู นามาใช้เปน็ ตวั อย่างประกอบวธิ สี ร้างช้นิ งานเทา่ นนั้ จะไมเ่ กยี่ วขอ้ งกับเนอื้ หาใน การ์ดท้งั น้ีการสรา้ งงานจรงิ ๆ ควรจะเกย่ี วข้องและสมั พนั ธ์กนั Scan Picture with Zappar App TCK e-Training เฟรมท่ี 15 ขอคำแนะนำกำรผลติ

การประยุกตใ์ ช้ ZapWorks การด์ วธิ ที ี่ 2 การตกแต่งการ์ดแบบ Scan QR Code ทาการดาวนโ์ หลด QR Code มาตกแต่งรว่ มกับภาพการด์ (ทใี่ ชท้ า Tracking image) โดยจดั ใหอ้ ยู่ในองค์ประกอบภาพเดยี วกนั เปิดกลอ้ งถา่ ยรปู จากสมารท์ โฟน สแกนยังการ์ดเชญิ (หมายเลข 1) จากน้ันระบบจะแสดงผลผ่าน WebAR QR code 1 หมายเหตุ การแสดงผลของนวดิ โี อคลปิ ในรูป AR น้ี ถกู นามาใช้เปน็ ตวั อยา่ งประกอบวิธสี รา้ งชนิ้ งานเทา่ นน้ั จะไม่เก่ียวข้องกับเนอื้ หาใน การด์ ทง้ั น้ีการสรา้ งงานจรงิ ๆ ควรจะเก่ียวข้องและสมั พนั ธ์กนั Scan Picture with Camera TCK e-Training เฟรมท่ี 16 ขอคำแนะนำกำรผลิต

การประยกุ ต์ใช้ ZapWorks การด์ ตวั อยา่ งเพ่ิมเตมิ แบบสแกนด้วย QR Code Scan QR Code ดว้ ยกล้อง หมายเหตุ การแสดงผลของนวิดีโอคลปิ ในรูป AR นี้ ถกู นามาใชเ้ ปน็ ตวั อยา่ งประกอบวิธสี รา้ งชิน้ งานเทา่ นนั้ จะไมเ่ ก่ยี วขอ้ งกับเนอ้ื หาใน การด์ ทั้งนกี้ ารสรา้ งงานจรงิ ๆ ควรจะเก่ียวขอ้ งและสมั พนั ธก์ ัน TCK e-Training เฟรมที่ 17 ขอคำแนะนำกำรผลิต

การประยุกต์ใช้ ZapWorks การ์ด ตัวอยา่ งเพิ่มเติม แบบ Scan ภาพดว้ ย Zappar App Scan ภาพน้ดี ้วย Zappar App โดยสรปุ การใช้เทคนิคความเปน็ จริงเสริมหรือAR เป็นอีก อรรถรสหนง่ึ ท่ีทาใหเ้ อกสารส่ิงพิมพน์ ้ันมชี วิ ิตชวี าน่าติดตาม นา่ ชมสามารถประยกุ ต์ใช้ได้อย่างง่ายดาย จบ หมายเหตุ การแสดงผลของนวิดโี อคลปิ ในรปู AR น้ี ถูกนามาใช้เปน็ ตัวอย่างประกอบวิธสี ร้างชิน้ งานเทา่ นนั้ จะไมเ่ ก่ยี วข้องกบั เนอ้ื หาใน การ์ดท้งั น้ีการสรา้ งงานจรงิ ๆ ควรจะเกยี่ วข้องและสมั พนั ธ์กนั TCK e-Training เฟรมที่ 18 ขอคำแนะนำกำรผลติ