General Tip & Trick Working with Lottie
สะ หวัด ดี ครับ 🤓
บทความในครั้งนี้ไม่ได้จะมาแนะนำ Tool ในการทำงาน หรือ สอนวิธีการทำงานแต่อย่างใด แต่ผมจะมาเล่าเกี่ยวกับการประสบการณ์การทำงานกับ Lottie พร้อมเกร็ดเล็กเกร็ดน้อยในการทำงานกับ Lottie
แล้ว Lottie มันคืออะไร ?
มันคือองค์ความรู้อย่างหนึ่งที่ทางทีม Airbnb เป็นคนทำขึ้นเพื่อไว้เรียกสั่งให้ไฟล์ Motion ทำงาน ซึ่งตอนนี้สามารถทำงานบน iOS, Android, React Native, Xamarin, NativeScript, Titanium, UWP, Web ทั้งหมดนี้วิธีการเรียกใช้งานก็จะต่างกันออกไป และยังคง Support การทำงานของ Motion ที่ไม่เท่ากัน อาจจะมีข้อจำกัดในการทำงานในแต่ละรูปแบบ ซึ่งใครจะนำไปใช้กับระบบไหนก็ต้องลองไปศึกษากันดูต่อเองนะครับ รอบนี้ผมจะพูดเกี่ยวกับการทำงานกับ Lottie โดยผ่านโปรแกรม Sketch > Ai > After effect > iOS & Android ว่าจากที่ผมทำงานมาได้เจออะไรบ้าง และมี Trick มานำเสนอในการทำงาน
อย่างแรกเลยมาเริ่มกันที่ Sketch 💎
การที่เราจะทำไฟล์เพื่อนำไปทำ Motion ต่อไปเราควรจะเตรียมไฟล์อย่างไรให้นำไปทำงานต่อได้อย่างไม่มีสะดุด หรือทำไปใกล้จบจะ Render ไฟล์ อยู่แล้วเชียว กลับมาพบว่าไฟล์มีปัญหาต้องกลับมาแก้ที่ไฟล์ Sketch มันก็จะทำให้การทำงานของเราเสียเวลาเปล่า อย่างแรกเลย
1. จัดระเบียบ Layer ให้เข้าใจง่าย
จริงๆ แล้วการจัดระเบียบเลเยอร์มันเป็นเหมือนพื้นฐานของดีไซน์เนอร์ทุกคนที่ควรทำอยู่แล้ว มันก็เหมือนการพับผ้า เราจะต้องจัดผ้าเข้าตู้อยู่แล้วก็จัดระเบียบมันหน่อย 😝
จะยัดๆ ผ้าเข้าตู้ไป สุดท้ายจะหาเสื้อผ้ามาใส่ก็ต้องค้นตู้เสื้อผ้าจนเละแทะ เพราะฉะนั้นจัดก่อนดีกว่า ผมเคยดูสารคดี วาฟุโซฮงโกะ ใน Netflix ที่ไปสัมภาษณ์ช่างฝีมือเก่าแก่ที่ทำของโบราณเขาบอกไว้ว่า “การเริ่มต้นงานที่ดี จะจบด้วยผลงานที่ออกมาสมบูรณ์แบบ”
2. ตั้งชื่อเลเยอร์ให้เหมาะสม
หลายคนต่างก็มีการตั้งชื่อที่แตกต่างกันไปในการทำงาน แต่ที่บริษัทที่ผมทำงานอยู่เราได้มีการสร้าง Design Guideline ตัวนึงขึ้นมาชื่อว่า Naming Convention เอาไว้เป็นสื่อกลางในการตกลงการตั้งชื่อ เลเยอร์ ไฟล์ ทุกอย่าง เพื่อให้ได้งานที่ออกมาแล้วสามารถส่งต่อให้คนอื่นทำได้อย่างไม่มีปัญหาตามมาภายหลัง ไว้มีโอกาสจะมาเล่าให้ฟังครับ แต่เอาเป็นว่า ตั้งชื่อตามสไตล์ของตัวเองไปก่อน ถ้าเราอ่านแล้วเข้าใจว่ามันคืออะไร ก็ถือว่าผ่าน
3. เคลียร์ให้เหลือแต่ Object ที่เราจะใช้งาน
Object บางอย่างตอนที่เราทำงาน เราอาจจะหลงลืมไปว่าเราได้ทิ้งเศษ Path อะไรไว้หรือเปล่า หรือ อาจจะมีเลเยอร์ที่เราไปปิดตาไว้แล้วลืมลบออกไป ให้เรากลับไปเช็คให้ดีๆ ว่ามีหลงเหลือมั้ย จัดการลบออกไปให้หมดให้เหลือที่เราจะใช้งานก็พอ
4. แตกให้เป็น Path ให้หมด(Create Outline)
ส่วนมากจะมีปัญหากับ Object ที่เป็นตัวอักษร เพราะจะลืม Create Outline กัน เวลาจะย้ายไฟล์ไปทำงานกับโปรแกรมอื่น หรือ ส่งงานต่อคนอื่น Shortcut ใน Sketch ก็จะเป็น Shift+Cmd+O หรือจะไปกดจาก Toolbar ข้างบน จะอยู่ในส่วนของเมนู
Layer>Convert to Outlines
5. Don’t use effect
เป็นอีกข้อที่สำคัญมาก คือห้ามให้เลเยอร์มีติด Effect ใดๆ ทั้งสิ้นก่อนที่เราจะ Export หากงานของเรามีเงา หรือมีการไล่สี ให้เราทำมันให้เป็น Path แยกชิ้นเสียก่อน เหตุผลเพราะตัว Lottie ตอนนี้ยังไม่สามารถ Support Effect ใดๆ ได้ อาจจะ Support ได้ในบางตัวเช่น React Native แต่ถ้าเราจะทำเพื่อ Cross platform แนะนำว่าเคลียร์เลเยอร์ของเราให้เหลือแต่ Fill ดีกว่าครับ
ข้อดีของการทำ 4 ข้อนี้คือ เราจะสามารถมั่นใจได้ว่าเราจะไม่ต้องเสียเวลากลับมาทำใหม่หากมีข้อผิดพลาดเรื่อง Path หรือ แก้การสับสนในการหา Layer ตอนทำงานหรือ เกี่ยวกับ Peformance ของ Motion ที่เราจะนำไปเรนเดอร์ รวมถึงขนาดไฟล์ที่ใหญ่เกินความจำเป็นอีกด้วย
หากตรวจสอบครบ 4 ข้อนี้แล้ว ก็ Export เป็นไฟล์ SVG เพื่อเตรียมนำไปเข้าสู่ AI
แต่เดี๋ยวก่อน !!
Tip 💡 ก่อนที่เราจะทำขั้นตอนทั้งหมดที่กล่าวมา เราจะต้องมี Story Board ของ Motion ที่เราจะทำเสียก่อน จะในกระดาษในหัวได้หมดถ้าเก๋าพอ เพราะถ้าเราไม่มีภาพการเคลื่อนไหวในหัวเลย เวลาเราแยกจัดเลเยอร์เพื่อนำไปใช้งาน จะมีปัญหาได้ เช่น ผมอยากทำให้โลโก้ โผล่มาทีละตัว แต่ตอนจัดเลเยอร์ผมดันไป Group Layer โลโก้ไว้เป็นก้อนเดียวกันแล้ว นั่นแปลว่าผมก็ต้องกลับมาแก้ไฟล์อยู่ดี ถ้ายิ่งทำ Motion อันอื่นเสร็จไปแล้วด้วยนะ แทบจะต้องทำใหม่กันเลยทีเดียว
เมื่อเรา Export ออกมาได้ไฟล์ SVG แล้ว เราเอาไปทำใน Ai กันต่อเลย
หลังจากที่เรา Import File SVG เข้ามาที่ Ai เรียบร้อยแล้ว ให้เราเปิดเลเยอร์เช็คเลยว่า Object เรามาครบมั้ย ถ้ามาครบถือว่าผ่าน ถ้ามาไม่ครบ กลับไปเช็คก่อนเลยว่า เลเยอร์นั้นเราลืมเอา Effect ออกหรือป่าว
หลังจากนั้นให้เราแยก SVG ที่มาเป็นก้อนออกเป็นชิ้นๆ โดยการคลิกที่ Object แล้ว Ungroup มันซะ
Tip 💡การที่เราแยกเลเยอร์ออกมาเป็นชิ้นๆ แล้ว หากเราต้องการแก้ไขใน Ai โดยที่ไม่กลับไปใช้ Sketch เราสามารถที่จะแยกเลเยอร์ออกมาเป็นส่วนๆ เพื่อสะดวกแก่การแก้ไขและใช้งานได้ โดยการไปเลือกที่เลเยอร์ แล้วคลิกมุมขวาบน แล้วเลือกคำสั่ง
Release to Layer (Sequence) มันก็จะทำการแบ่งเลเยอร์ออกมาเป็นส่วนๆ ดังภาพจ้า
เมื่อเสร็จขั้นตอนนี้ เราก็สามารถเซฟไฟล์ Ai ได้แล้ว ให้เราเซฟไฟล์เป็น .Ai เวอร์ชั่นล่าสุดได้เลยครับ จากนั้นเราก็นำไฟล์นั้นไปใช้เปิดต่อใน AE ได้เลยครับ
Tip 💡แนะนำว่าให้เราเซฟไฟล์ที่เกี่ยวข้องกันไว้ในโฟลเดอร์เดียวกันให้หมดและตั้งชื่อในแบบที่ตัวเองเข้าใจ ทั้ง Sketch ที่เป็น Base / SVG / Ai ไว้โฟลเดอร์เดียวกันเลย รวมถึง AE(After effect ) ที่เราจะต้องนำไฟล์ Ai ที่เรา Export มาไปทำต่อใน AE เพื่อความสะดวกในการแก้ไข ค้นหาไฟล์ และกัน ไฟล์หายระหว่างการทำงานครับ
Tip 💡นอกจากการนำไฟล์ Sketch มาแปลงผ่าน AI เพื่อให้โปรแกรม AE รู้จักแล้ว ตอนนี้ได้มี Plugin ตัวหนึ่งจากทางทีม Design Google ได้ปล่อยออกมาให้ลองใช้กันคือ Sketch2AE โดยที่ Plugin ตัวนี้ใช้งานง่ายมาก เขาจะให้เราลง Plugin ที่ Sketch และที่ AE ที่เหลือเราก็แค่เลือก Artboard ในโปรแกรม Sketch ใช้ Plugin Copy แล้วก็มา Paste โดยที่จะสามารถเลือกได้ว่า จะเปิดเป็น New Composition หรือว่า จะให้วางลงใน Composition เดิม ใครสนใจสามารถเข้าไปดูกันได้ ตามลิงค์เลยครับ Sketch2AE
(สำหรับคนที่จะลองใช้ Sketch2AE ผมมี Tip จากการใช้งานข้างล่างครับ)
Tip 💡Sketch2AE ปัญหาที่เจอจากการใช้งานคือ Vector รอยต่อที่เป็น แกน X/Y มันมักจะมีปัญหาเวลา Export โดยใช้ Plugin ตัวนี้ วิธีแก้ปัญหาคือให้เราเปิดชั้นเลเยอร์แต่ละอันที่เรา Export มาเช็คให้หมด เอาให้ลึกที่สุดเท่าที่จะเปิดได้เลยครับ หากเราเจอตัวเลขสีแดงๆ แปลกตา ให้เราจัดการเคลียร์เลเยอร์นั้นครับ แล้วทำการเซ็ตจุด Anchor Point ใหม่ครับ ใครไม่เข้าใจลองดูตัวอย่างข้างล่างนี้เลย
ถามว่าทำไมเราต้องมาจัดการมัน เหตุผลเพราะว่าถ้าเราละเลยที่จะจัดการมัน เวลาเรา Export งานผ่าน Bodymovin เพื่อจะทำเป็นไฟล์ Json มันจะแสดงผลเพี้ยนครับ Shape อยู่ผิดที่ผิดทางไปหมด เราเลยต้องมาจัดการมันก่อนครับ 😊
หลังจากที่เราทำการ Motion object ที่เราเตรียมไว้เรียบร้อยแล้ว ก็มาถึงขั้นที่ต้อง Export ผ่าน Plugin Bodymovin เพื่อให้ได้ไฟล์ Json ออกมาหนึ่งก้อน เพื่อจะเอาไปให้ Dev. ใช้งานครับผม
เมื่อเปิดหน้าต่าง Bodymovin ขึ้นมา มันก็จะแสดงรายชื่อของ List Composition ที่เราตั้งไว้ เราก็ทำการกดเลือก (Selected) และอย่าลืมเลือกกำหนด Destination ที่ต้องการ Export ลงไปด้วยนะครับ เพราะว่าตัว Plugin ไม่ได้เลือกมาให้เรา
เมื่อเราได้ไฟล์ Json มาเรียบแล้ว เราสามารถส่งให้ Dev เลยได้ แต่ !! ใครมันจะไปรู้ มันอาจจะเกิดการผิดพลาดเมื่อเรานำไปใช้งานจริงก็ได้ เพราะฉะนั้นเราต้องทดสอบมันก่อน คล้ายๆ กับที่เวลาเราออกแบบแล้วเราต้องเอา UI ที่เราออกแบบไว้ไป Test บน Screen จริง หรือ Device จริงเลยครับ
Tip 💡ให้เราโหลด App ที่มีชื่อว่า Lottie Preview มาครับหน้าตา App เป็นแบบนี้
ให้โหลดตัวที่ผมทำกล่องสีเขียวไว้นะครับ สามารถโหลดได้ทั้ง Android และ iOS ถามว่าแล้วทำไมไม่โหลดตัวข้างล่างละ เป็นตัว Official จาก Airbnb เลยนะ เท่าที่ผมได้ลองใช้งานมาแล้ว ตัว Lottie Preview by kudanai ใช้งานง่ายและสะดวกมีความแม่นยำมากกว่าครับ
หลังจากที่เราโหลดเสร็จแล้ว ให้เรา Upload File Json เข้าเว็บไซต์นี้ครับ https://www.lottiefiles.com
มุมซ้ายบนจะมีปุ่ม Lottie Preview เรากดปุ่มนั้นเลยก็จะมาเจอหน้าจอ Upload Json เพื่อ Preview ครับ
ให้เราทำการลากไฟล์มาโยนใส่หน้าเว็บ หรือจะกดเพื่ออัพโหลดก็ได้ หลังจากที่เราใส่ไฟล์ Json ที่เราทำเสร็จ ผลที่ได้คือเว็บจะทำการแสดงผลงานของเราให้ครับ
จากนั้นให้เราเปิดแอพพลิเคชั่น Lottie preview ที่เราโหลดมา เปิดเพื่อ Scan QR Code ที่เราได้จาก Website ครับ
เมื่อเรา Scan เสร็จ เราก็จะได้ ทดลองไฟล์กันบน Device และ Platform นั้นๆ เพื่อดูว่ามันทำงานได้สมบูรณ์ตามที่เราออกแบบไว้หรือเปล่า ถ้าออกมาสมบูรณ์ก็เยี่ยมเลย เพราะจะได้ไม่ต้องแก้งานไง Hahahahahaha 🤣
Tip 💡แนะนำว่า ถ้าเราจะเอาไฟล์ตัวนี้ไปใช้กับ Platform อะไร ให้เราทดสอบบนเครื่องนั้นเลยนะครับ จะเป็นการ Sure กว่าในการทำงาน เพราะว่าส่วนตัวนั้นผมเคยเจอกรณี OK บนเว็บ แสดงเสียบน Android แสดง Android OK ไปแสดงเสียใน iOS ก็มี
หลังจากนี้ก็เราก็นำไฟล์ที่เสร็จและถูกตรวจสอบเรียบร้อยแล้ว ส่งต่อให้ Dev ได้เลยครับ หวังว่าการอ่านบทความในครั้งนี้จะทำให้ได้ Tip จากการทำงานร่วมกับ Lottie plugin ไปไม่มากก็น้อยครับ
หากชอบบทความนี้ ฝากปรบมือแรงๆ ครับ ขอบคุณครับ 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
สามารถอ่านบทความอื่นๆของผมได้ต่อ
