Prototype Motion Intro Page by Principle
บทความนี้จะมาสอนวิธีสร้าง Prototype ที่มี ไฟล์ Motion อยู่ข้างใน โดยใช้โปรแกรม Principle เพื่อที่จะเป็นตัวอย่างการใช้งานจริงสำหรับการส่งต่อไปให้แก่ทีมในฝ่ายต่างๆ เพื่อจะได้เห็นภาพ และเข้าใจตรงกันเกี่ยวกับตัวงาน (เอาให้จริงไม่ได้เขียนบทความนี้เพื่อใครหรอกครับ เขียนไว้กันตัวเองลืมแค่นั้นเหละครับ 😆)
ก่อนที่จะเริ่มสอนขอบ่นให้ฟังก่อนนะครับที่มาที่ไป ไหนๆก็เขียนมาเป็นบทความแล้วข้างบนเป็น Intro ของ Application แนะนำวิธีการใช้งาน ตัวที่ทำเสร็จแล้ว ถามว่าทำไมต้องทำเป็นตัว Prototype ก่อน เพราะเวลาเราส่งไฟล์ .json เพื่อให้ Dev เรียกใช้เขาจะได้เห็นภาพว่าต้องเรียกใช้และนำไปวางแบบไหน และคนในทีมอื่นๆจะเห็นภาพรวมก่อนด้วย ก่อนให้ Dev ทำงานจริง ส่วนเรื่องไฟล์ .json ใครสงสัยว่ามันคืออะไร ที่ส่งให้ Dev มันคือตัวไฟล์ Motion ที่ Export ออกมาจากโปรแกรม After Effect ครับ ใครสนใจสามารถไปดูรายละเอียดตาม ลิงค์นี้เลยจ้า lottie Plugin After Effect โดย Plugin ตัวนี้ Khomsun Chaiwong และ Sansern Wutthirat เป็นคนแนะนำมาให้ลองใช้งานครับ มันใช้งานได้ดีทีเดียว แต่ก่อนหน้านั้นผมเคยลองใช้ Plugin ที่เป็น Script จากทาง Facebook มาก่อน ชื่อว่า Keyframe ซึ่งตัวนี้มันมีข้อจำกัดบางอย่างที่ยังทำให้มันเล่น Motion ได้ไม่เต็มที่ เช่น ไม่สามารถ Export Path ที่ซ้อนกันได้ หรือไม่สามารถ Export Shadow ออกมาได้ ถ้าเราไปฝืนมันผลที่ออกมามันจะเน่าใช้งานไม่ได้ไปเลย เลยทำให้ lottie Plugin ทำงานได้ดีกว่า แต่ไม่ใช่ว่ามันจะ Perfect นะ จากที่ผมเอาไปใช้งานจริงมันก็ยัง Sensitive อยู่ หากเจอ Object Path ที่เราทำมันไม่ดี เช่น ในหนึ่ง Object มี Border ไม่ครบ Loop (Close Path) กับพวก Border ที่ถูก Fill(Create Outline) มันก็จะออกมา เน่าๆตามตัวอย่างที่เห็นครับ
ทางด้านซ้ายคือ Export ออกมาจาก After effect แล้วเน่าครับ พึ่งรู้ว่าเน่าตอนเอาส่งไปให้ Dev ใช้ กว่าจะหาวิธีแก้ได้ก็ปาเข้าไป 8 Version ครับ ตามที่บอกไปข้างต้นมันก็ยังไม่ Perfect ไปทุกอย่าง เนื่องจาก Path ใน Icon Qr code มันเยอะแล้วมั่วมาก ไม่ได้ถูกจัดดีพอ ส่วนด้านขวาคือถูกแก้ไขแล้วทำการ Export ใหม่เรียบร้อย พร้อมเอาไปใช้งานครับ น้อง Dev Pimpaporn Pare Chaichompoo เลยบอกว่า งั้นเดี๋ยวทำโปรแกรม Preview ให้เลยจะได้ไม่ต้องส่งมาเทสเปลี่ยนโค้ดไปมา ก็ตามนั้น 😳🙄😆
ตัวที่เห็นข้างบนเป็นโปรแกรมที่ทาง น้องทีม Dev iOS Pimpaporn Pare Chaichompoo พัฒนาขึ้นมาเพื่อให้ผม Preview ทดสอบความเรียบร้อยก่อนส่งไฟล์ Json ให้ไปใช้งานจริง หากใครสนใจสามารถโหลดไปใช้กันได้เลยนะครับ LottiePreviewApp ตอนนี้โปรแกรมทำใช้กันเองในทีม อาจจะยังมีบัคเยอะนะครับ มันจะถูกแก้ไขตามความขยันของ Dev ครับ 😆 เพราะฉะนั้นฝากติดตามอัพเดทกันด้วยนะครับ
อ่านมาเยอะแล้ว ยังไม่เริ่มสอนเลย โว่ะ!! มาเปิดโปรแกรม Principle เลย การเริ่มทำ Prototype ในโปรแกรม Principle ที่ดีนั้น แนะนำว่าไม่ต้องไปเปิด Artboard ใหม่ครับ ให้สร้าง Artboard อันเดียวเลย การ Export เข้าโปรแกรม Principle ก็มีหลายวิธีครับ ไม่ว่าจะเป็นการ Copy วางดื้อๆ หรือจะเป็นการใช้ฟังชั่น Import ที่ทาง Principle ทำมาเพื่อไว้ Import Sketch File โดยเฉพาะ ขึ้นอยู่กับงานที่เรานำไปใช้เลยครับว่าต้องการละเอียดแค่ไหน ถ้าเราทำ Prototype เพื่อแสดง Motion การทำงานไม่กี่หน้า ก็แนะนำเป็น Copy วางเลยครับ แต่ถ้าทำหลายๆหน้าเพื่อแสดง Flow การทำงาน ก็แนะนำเป็น Import เอาครับ จากนั้นเมื่อเราเตรียมไฟล์เสร็จแล้ว เราก็ทำการยัด Element ทุกอย่างลงไปในหน้าเดียวเลยครับ ตามตัวอย่าง
ถามว่าทำไมทำแบบนี้ถึงดีกว่า ก็เพราะว่าหลักการทำงานของโปรแกรม Principle มันคือการเรียกชื่อ Layer ที่เหมือนกันทำการ Auto Anmaition ระหว่างหน้าให้เราเองโดยที่เราไม่ต้องทำอะไร เพราะฉะนั้น การที่เรา Duplicate Artboard มันอาจจะทำให้ Layer ข้างในมันถูกต่อด้วยชื่อแปลกๆโผล่มาเช่น Layer Copy 1 ประมาณนี้ ทำให้เวลาโปรแกรมมันประมวล มันจะหา Layer ไม่เจอ เวลามันแสดง Animation ระหว่างหน้าอาจจะทำให้มีปัญหา เราจะต้องเสียเวลามานั่งไล่แก้มันอีก อีกข้อที่ทำให้การเริ่มสร้าง Artboard แบบนี้ดีกว่าคือการเรียก Animation มันจะต้องมี Object ที่แอบไว้ใน Artboard นั้นๆ เพื่อรอเรียกแสดงออกมา โปรแกรมมันจะไม่งง เช่น Artboard 1 มี Layer Name A ส่วน Artboard 2 มี Layer Name A/Layer Name B โปรแกรมมันจะงงทันทีเลยว่า Artboard 1 ไอ้ตัว Layer Name B อยู่ไหนมันจะเรียกจากไหน พอมันเรียกไม่ได้ มันก็ไม่แสดง Animation ให้
วิธีการสร้าง Artboard อีกอันเผื่อให้โปรแกรมสร้าง Animation ให้เราผมจะใช้วิธีเรียกคำสั่ง Link ไปยัง Artboard ของมันเอง เพื่อให้มัน Duplicate Artboard ให้ชื่อมันเหมือนกัน Object ข้างในเหมือนกัน เผื่อที่โปรแกรมมันจะได้ไม่งง ตามตัวอย่างข้างล่างเลย
ผลที่ออกมาก็จะเป็นแบบนี้ครับ ทำงานได้ตามที่วางไว้
จากนั้นทำเหมือนเดิมครับ ตามข้างบนที่ได้สอนไป จากหน้าสอง ไปยังหน้าสาม ที่นี้ปัญหาต่อมาที่เจอ ซึ่งคิดว่าหลายคนก็น่าจะเจอ (คิดไปเองคนเดียว😆) คือ Video ที่เราทำการ Export มาจาก After effect มันเล่นเองโดยที่เรายังไม่ได้สั่ง กลายเป็นว่าพอเรา Slide มา Page 2 หรือ Page 3 Video มันดันเล่นเองไปแล้วซะงั้น ตามตัวอย่างข้างล่าง
วิธีแก้ก็ไม่มีอะไรมาก (แต่ตอนหาวิธีแก้นี้ผมลองผิดลองถูกอยู่พักใหญ่ๆเลย😂) ให้เราไปเปิด Animate Window แล้วไปกดเลือกที่ Layer ของ Video ครับ เราจะสังเกตได้ว่าตรง Layer Video Media Time มันถูก Frozen อยู่ ให้เราไปติ๊กตรง Icon เกล็ดหิมะออกครับ มันจะกลายเป็น Not Animatable คือมันจะไม่เล่นเอง จนกว่าจะแสดง หากใครอ่านแล้ว งง ลองดูตามตัวอย่างข้างล่างเองครับ
หลังจากที่เราไปเอา Frozen ใน Layer Video ออกแล้ว ผลที่ได้ก็จะเป็นปกติ Video จะเล่นก็ต่อเมื่อมาถึงหน้าที่แสดงครับ ตามตัวอย่างข้างล่างเลย
หลังจากนี้เราจะเอา Prototype ที่ได้ ไปต้มยำทำแกงอะไรก็ได้ครับ เสร็จเรียบร้อย เย้!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!เป็นอันจบการสอนแต่เพียงเท่านี้ หาใครมีอะไรสงสัย หรืออยากแลกเปลี่ยนความรู้สามารถคอมเม้นพูดคุยกันได้เลยนะครับ อย่างที่ Atom บอกไว้ว่า ความรู้ไม่เหมือนการแบ่งปันสิ่งของ หากเป็นสิ่งของการให้คือเราต้องเสียส่วนแบ่งของเราออกไป หากเราแบ่งปันความรู้ ความรู้จะเพิ่มขึ้นเรื่อยๆ ไว้เจอกันในเรื่องต่อไปที่ผมจะมาบ่นครับ👋🏻
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Principle Trick 🔥ส่งท้าย หากใครกำลังเจอปัญหา Video วน Loop ไม่ยอมหยุดสักที ให้ไปคลิกตรง Media แล้วเลือกเป็น Play One นะครับ มันจะเล่นให้เรารอบเดียว หากใครไม่เข้าใจ ดูตามข้างล่างเลยครับ
ขอบคุณที่อ่านจนถึงล่างสุดนะครับ ขอบคุณจากขั้วหัวใจ❤️ บับบาย 🔥🍃 😚💨
