นำเข้า SVG ใน Synfig: เตรียมเลเยอร์แอนิเมชันที่แก้ไขได้
เปรียบเทียบการนำเข้า SVG โดยตรงกับการส่งออก SIF จาก Inkscape สำหรับ Synfig ตรวจเลเยอร์ สี และส่วนที่เคลื่อนไหวแยกกันก่อนสร้างแอนิเมชันหรือริก
ในหน้านี้
Synfig นำเข้า SVG ผ่าน File → Import ได้ แต่ควรตรวจเลเยอร์ที่ได้ก่อนทำแอนิเมชัน เอกสารนำเข้า SVG ยังอธิบายวิธีจาก Inkscape ไป SIF เมื่อการนำเข้าโดยตรงไม่ถ่ายทอดกราฟิกได้เหมาะกับการใช้งาน
ทั้งสองเป็นวิธีส่งต่องานเวกเตอร์ ไม่มีวิธีใดสร้างแผนการเคลื่อนไหวให้คุณ โคมไฟตั้งโต๊ะที่นำเข้าอาจดูถูกต้อง แต่โป๊ะ แขน และฐานยังเลือกหรือหมุนแยกกันได้ไม่สะดวก
เริ่มจากวัตถุหนึ่งชิ้น ตัดสินว่าส่วนใดควรเคลื่อนไหว แล้วเปรียบเทียบผลที่นำเข้ากับ SVG ต้นแบบ การตรวจเลเยอร์และการเคลื่อนไหวสั้น ๆ มีประโยชน์กว่าการนำเข้าทั้งฉากแล้วค่อยพบโครงสร้างภายหลัง
เลือกนำเข้า SVG โดยตรงหรือใช้สำเนา SIF
ลองนำเข้าโดยตรงก่อนเมื่อมี SVG อยู่แล้ว เปิดต้นฉบับไว้ในตัวแก้ไขต้นทางเพื่อเทียบรูปทรง สี และการจัดโครงสร้าง
| วิธี | ไฟล์ที่นำเข้า Synfig | สิ่งที่ต้องตรวจ |
|---|---|---|
| นำเข้า SVG โดยตรง | ไฟล์ส่งออก .svg ของคุณ | กราฟิกที่เห็น เรขาคณิตที่แก้ไขได้ โครงสร้างเลเยอร์ และมาตราส่วน |
| ส่งออก SIF จาก Inkscape | สำเนา .sif แยก | กลุ่มเลเยอร์ที่ส่งออก สีเติมและเส้นขอบ แล้วตรวจภาพแบบเดียวกัน |
| นำเข้าแรสเตอร์ | ไฟล์ภาพที่รองรับ | การขยับภาพแบนเพียงภาพเดียวเพียงพอสำหรับช็อตหรือไม่ |
ตัวเลือก SIF ยังมีใน นิยามส่วนขยายส่งออก Synfig อย่างเป็นทางการของ Inkscape โดยประกาศ Synfig Animation (*.sif) และระบุว่าการส่งออกอาจสูญเสียข้อมูล ตรวจว่ารุ่น Inkscape ที่ติดตั้งมีรูปแบบนี้หรือไม่ การมีตัวส่งออกไม่ได้รับรองว่าทุกการติดตั้งจะแสดงตัวเลือกเหมือนกัน
ใช้วิธีที่รักษารูปลักษณ์และโครงสร้างแก้ไขที่ต้องการ SIF ไม่ได้รับรองความเข้ากันได้กับ SVG อย่างสมบูรณ์ และ SVG ที่นำเข้าแล้วมองเห็นได้ก็ยังไม่ใช่ริก
วางแผนส่วนที่เคลื่อนไหวก่อนส่งออก
ลองนึกถึงโคมไฟตั้งโต๊ะที่ออกแบบขึ้นใหม่ มีฐาน แขนล่าง แขนบน และโป๊ะ ฐานอยู่นิ่ง แขนหมุนที่ข้อต่อ และโป๊ะเอียงตรงจุดยึด
ในตัวแก้ไขต้นทาง ให้แยกส่วนเหล่านั้นและตั้งชื่อเลเยอร์ที่สื่อความหมาย วางกราฟิกที่ควรเคลื่อนไหวด้วยกันไว้ในส่วนเดียวกัน หากโป๊ะมีสีเติมและเส้นขอบตกแต่ง ทั้งสองควรเคลื่อนไปกับโป๊ะ
วาดแต่ละส่วนให้มีพื้นที่เพียงพอสำหรับท่าที่ต้องการด้วย SVG ที่มีเพียงขอบแขนที่มองเห็นไม่สามารถเติมกราฟิกที่ซ่อนอยู่เมื่อหมุนโป๊ะออกไปได้ คุณอาจต้องขยายส่วนที่ถูกบังด้วยมือ

แผนภาพอธิบายการจัดโครงสร้างที่ต้องการ ไม่ได้ทำนายจำนวนเลเยอร์ที่ตัวนำเข้าจะสร้าง โค้ดตัวส่งออก SIF ของ Inkscape สร้างเลเยอร์พื้นที่กับเส้นขอบแยกจากสีเติมและเส้นขีดของพาธได้ ดังนั้นส่วนต้นฉบับหนึ่งส่วนอาจต้องให้หลายเลเยอร์ที่ได้เคลื่อนไหวร่วมกัน
การลากเส้นตามสีอาจจัดกราฟิกต่างจากแผนเคลื่อนไหวด้วย แขนสีเข้มสองข้างอาจอยู่ในรูปทรงประกอบเดียว แยกเรขาคณิตที่ต้องการจริง แทนที่จะสมมติว่าทุกวัตถุที่ดูจำแนกได้มีเลเยอร์ของตัวเอง
ตรวจการนำเข้าโดยตรงด้วยไฟล์เล็ก
บันทึกสำเนาส่งต่อที่มีเฉพาะโคมไฟ แล้วนำเข้าเอกสาร Synfig ใหม่ผ่าน File → Import ก่อนเพิ่มแอนิเมชัน ให้ตรวจสี่ข้อ:
- เปรียบเทียบรูปร่างรวมและขนาดกราฟิกกับผืนงาน
- ขยายลำดับชั้นเลเยอร์แล้วหาแขนหนึ่งส่วนหรือโป๊ะ
- ซ่อนส่วนนั้นชั่วคราวเพื่อดูว่ามีกราฟิกอะไรอยู่ในส่วนนี้แน่
- คืนการมองเห็นและลองเคลื่อนเล็กน้อยชั่วคราว แล้วเลิกทำ
หากซ่อนโป๊ะแล้วแขนหายไปด้วย ให้ตรวจการจัดกลุ่ม หากย้ายโป๊ะแล้วเส้นขอบถูกทิ้งไว้ ให้รวบรวมเลเยอร์ที่ประกอบเป็นส่วนนั้นก่อนทำต่อ การทดลองง่าย ๆ เหล่านี้เผยโครงสร้างได้โดยไม่ต้องสร้างแอนิเมชันสำเร็จ
ตรวจสีแยกจากเรขาคณิต เส้นขอบถูกแต่สีเติมผิดเป็นคนละปัญหากับกราฟิกหาย เปรียบเทียบสี ความทึบ เส้นขีดที่เห็น และช่องเปิดกับต้นฉบับ แก้ในสำเนาสำหรับทำงานเพื่อกลับต้นฉบับได้
สำหรับรูปแบบแอนิเมชันที่มีเรขาคณิตพื้นฐานต่างกัน ขั้นตอนเวกเตอร์ใน OpenToonz แสดงว่าเส้นขอบเติมสีที่แก้ไขได้กับเส้นแกนกลางที่แก้ไขได้ให้การควบคุมต่างกันอย่างไร อย่าสมมติว่าจำนวนเลเยอร์ของตัวนำเข้าบอกว่าทุกเลเยอร์รองรับการแก้ไขชนิดใด
ลองส่งออก SIF จาก Inkscape เมื่อช่วยได้
หาก Inkscape ที่ติดตั้งมี Synfig Animation (*.sif) ใน Save As ให้บันทึกสำเนา SIF แยกและเปิดใน Synfig เก็บ SVG ต้นแบบที่แก้ไขได้ไว้ คู่มือแปลงจาก Inkscape ของ Synfig อธิบายวิธีนี้และความสัมพันธ์ระหว่างเลเยอร์ Inkscape กับ Group Layers ของ Synfig
การทำงานของตัวส่งออกปัจจุบัน ยังถือว่าเลเยอร์ Inkscape เป็นคอนเทนเนอร์ที่มีชื่อสำหรับเนื้อหาที่แปลงแล้ว จึงช่วยให้การจัดเลเยอร์ต้นฉบับอย่างตั้งใจมีประโยชน์สำหรับโคมไฟ แต่ยังต้องตรวจผล กลุ่ม SVG ทั่วไปกับเลเยอร์ Inkscape ไม่ใช่สิ่งที่รับรองลำดับชั้นสุดท้ายแบบเดียวกัน
เปรียบเทียบสำเนา SIF กับการนำเข้าโดยตรงด้วยรายการตรวจเดียวกัน เลือกโป๊ะได้หรือไม่ สีและเส้นขอบอยู่ด้วยกันหรือไม่ ส่วนซ้อนทับยังครบหรือไม่ เลือกตามผลเหล่านี้ แทนตามนามสกุลที่ฟังดูเข้ากับโปรแกรมกว่า
อย่านำรายการความเข้ากันได้เก่ามาใช้เป็นกฎทั่วไป หน้า Synfig wiki มีวิธีแปลง XSLT เก่าที่มีข้อจำกัดของตัวเอง ข้อจำกัดเหล่านั้นไม่ได้อธิบายตัวนำเข้า SVG โดยตรงหรือตัวส่งออก Inkscape ปัจจุบันโดยอัตโนมัติ สำหรับไฟล์มีปัญหา ให้ลดสำเนาเหลือรูปทรงเติมสีง่าย ๆ แล้วเพิ่มคุณสมบัติซับซ้อนกลับทีละอย่าง
กำหนดจุดกำเนิดกลุ่มก่อนทดสอบการเคลื่อนไหว
เอกสาร Group Layer ของ Synfig อธิบายคอนเทนเนอร์ที่แปลงเลเยอร์ลูกพร้อมกัน ตัวควบคุมการแปลงมีการหมุน การเลื่อน การเอียง และมาตราส่วน จัดชิ้นส่วนที่เป็นส่วนเคลื่อนไหวเดียวของโคมไฟเข้ากลุ่มก่อนทดสอบการหมุนส่วนนั้น
วางศูนย์กลางหมุนตรงข้อต่อที่ต้องการ Group Transformation Widget ตามเอกสาร ให้กด Ctrl ค้างขณะลากศูนย์กลางการแปลง เพื่อเปลี่ยน Origin แยกจากกลุ่ม ตรวจผลต่อกลุ่มที่เลือกก่อนทำแอนิเมชัน
สำหรับโป๊ะ ศูนย์กลางที่กลางรูปร่างทำให้เคลื่อนไหวต่างจากศูนย์กลางตรงจุดยึดแขน ลองหมุนเล็กน้อยในสำเนาสำหรับทำงาน มองหาเส้นขอบที่หลุด ช่องว่างตรงข้อต่อ หรือกราฟิกที่หมุนรอบจุดผิด แล้วเลิกทำการทดลอง
ขั้นตอนนี้สร้างจุดเริ่มต้นสำหรับแก้ไข การเคลื่อนไหวตามความสัมพันธ์ระหว่างวัตถุแม่กับวัตถุลูก กระดูก จังหวะเวลา และการแทรกค่าระหว่างเฟรมยังต้องตั้งค่าแยก การนำเข้า SVG หรือส่งออก SIF ไม่ได้กู้คืนริกที่มีอยู่เดิมจากภาพประกอบแบน
หากนำเข้าแล้วว่างหรือสีเปลี่ยน
ใช้อาการจำกัดขอบเขตการตรวจ:
| อาการ | สิ่งแรกที่ควรตรวจ |
|---|---|
| ไม่เห็นอะไร | การมองเห็นเลเยอร์ ขอบเขตกราฟิก มาตราส่วนผืนงาน และต้นฉบับมีเรขาคณิตใช้ได้หรือไม่ |
| เห็นเส้นขอบแต่สีเติมผิด | สีเติมต้นฉบับ ความทึบ และเลเยอร์สีที่นำเข้า |
| บางส่วนหาย | โครงสร้างหรือเอฟเฟกต์ของส่วนที่หาย โดยทดสอบในสำเนาแยก |
| ทุกอย่างเคลื่อนพร้อมกัน | กลุ่มที่เลือกและส่วนที่อยู่ภายใน |
| เส้นขอบของส่วนหนึ่งถูกทิ้งไว้ | ต้องจัดสีเติมกับเส้นขอบเป็นกลุ่มสำหรับการเคลื่อนไหวนั้นหรือไม่ |
วิธีวินิจฉัย SVG ว่าง ครอบคลุมวิวพอร์ต การมองเห็น และเนื้อหาที่ไม่รองรับ เก็บพาธที่ดีไว้ขณะวินิจฉัย การแปลงกราฟิกทั้งหมดเป็น PNG แล้วลากเส้นใหม่ทิ้งโครงสร้างที่อาจยังมีประโยชน์
บันทึกรุ่น Synfig รุ่น Inkscape หากใช้ วิธีนำเข้าที่เลือก และไฟล์เล็กหนึ่งไฟล์ที่ทำให้เกิดปัญหาซ้ำ รายงานในฟอรัมเก่าเรื่องสีหรือกลุ่มเป็นเบาะแสให้ตรวจ ไม่ใช่หลักฐานว่าทุกการติดตั้งปัจจุบันมีปัญหาเดียวกัน
PerfectVector ช่วยตรงไหน
หากมีเพียงภาพประกอบ PNG หรือ JPG แบบแบน ขั้นตอนแปลงภาพเป็นเวกเตอร์ของ PerfectVector สร้างพาธ SVG ที่แก้ไขได้ขึ้นใหม่ก่อนส่งต่อ Synfig ตรวจรูปร่างและแยกพื้นที่ที่จะเคลื่อนไหว แล้วทดสอบการนำเข้าหนึ่งครั้ง ผลลัพธ์ยังต้องจัดเลเยอร์ วางข้อต่อ และตั้งค่าแอนิเมชันใน Synfig
เก็บ SVG ที่แก้ไขได้เดิมไว้แทนการลากเส้นภาพหน้าจอของมัน พื้นหลังที่ลงสีไว้ยังเป็นแรสเตอร์ได้เมื่อพื้นผิวมีความสำคัญและต้องการเพียงวางหรือเคลื่อนภาพ Synfig อธิบาย Import Image Layer แยกสำหรับเนื้อหาภาพ สำหรับขั้นตอนลากเส้นในโปรแกรมแบบอื่น ดู การลากเส้นภาพใน Adobe Animate ส่วน คำอธิบายการแปลงเวกเตอร์ โดยรวมแยกการกู้คืนพาธออกจากการกู้คืนโครงสร้างแบบเดิม
คำถามที่พบบ่อย
Synfig นำเข้าไฟล์ SVG ได้หรือไม่? ได้ ใช้ File → Import แล้วตรวจกราฟิกที่เห็นกับโครงสร้างเลเยอร์ที่ได้ เอกสาร Synfig ยังอธิบายวิธี Inkscape ไป SIF เป็นทางเลือกเมื่อการนำเข้าโดยตรงไม่ถ่ายทอดไฟล์ได้เหมาะกับการใช้งาน
ควรใช้ SVG หรือ SIF สำหรับแอนิเมชัน Synfig? เก็บ SVG ต้นแบบและเปรียบเทียบการนำเข้าโดยตรงกับไฟล์ส่งออก SIF แยกเมื่อ Inkscape ที่ติดตั้งมีตัวเลือกนั้น เลือกผลที่รูปลักษณ์และส่วนที่แก้ไขได้เหมาะกับแอนิเมชัน ไม่มีวิธีใดสร้างริกอัตโนมัติ
ทำไม SVG ว่างหรือสีผิดใน Synfig? ตรวจการมองเห็น ขอบเขต มาตราส่วน สีเติม ความทึบ และโครงสร้างส่วนที่หาย ทดสอบสำเนาง่าย ๆ เพื่อแยกคุณสมบัติเฉพาะไฟล์ออกจากปัญหานำเข้าโดยรวม เก็บต้นฉบับและบันทึกรุ่นแอปกับวิธีนำเข้า
การนำเข้า SVG สร้างส่วนเคลื่อนไหวแยกกันหรือไม่? ตรวจเลเยอร์จริงแทนการสมมติ ส่วนต้นฉบับหนึ่งส่วนอาจให้หลายเลเยอร์สี และหลายส่วนที่เห็นอาจใช้เรขาคณิตร่วมกัน จัดโครงสร้างแต่ละส่วนที่จะเคลื่อนไหว ตั้งจุดกำเนิด และทดลองเคลื่อนเล็กน้อยก่อนเพิ่มแอนิเมชัน
แหล่งข้อมูล
- Synfig — การนำเข้า SVG และแปลงจาก Inkscape — อธิบายการนำเข้าโดยตรงและวิธี SIF ทางเลือก พร้อมวิธีแปลงในอดีต
- Inkscape — นิยามส่วนขยายส่งออก Synfig — ลงทะเบียนรูปแบบส่งออก SIF และระบุว่าการส่งออกอาจสูญเสียข้อมูล
- Inkscape — การทำงานของตัวส่งออก Synfig — แสดงการจัดการคอนเทนเนอร์เลเยอร์และการแปลงสีเติม/เส้นขอบแยกกัน
- Synfig — Group Layer — นิยามการแปลงเลเยอร์ที่จัดกลุ่มและพารามิเตอร์
- Synfig — Group Transformation Widget — อธิบายการปรับ Origin ของกลุ่มแยกจากกราฟิก
- Synfig — Import Image Layer — อธิบายเลเยอร์แยกสำหรับเนื้อหาภาพที่นำเข้า
เริ่มจากกราฟิกแรสเตอร์ใช่ไหม? เตรียมพาธ SVG ด้วย PerfectVector ตรวจพื้นที่ที่จะเคลื่อนไหว และทดสอบหนึ่งส่วนใน Synfig ก่อนสร้างแอนิเมชันส่วนที่เหลือ
เพิ่มเติมจากบล็อก

ข้อความ SVG foreignObject: แก้ป้ายหายเมื่อส่งออก
แก้ป้าย SVG ที่เห็นในเบราว์เซอร์แต่หายเมื่อส่งออก เปรียบเทียบ foreignObject กับข้อความ SVG โดยตรง ตรวจเนมสเปซ และรักษาภาพเดิมไว้

เงา SVG ถูกตัด? ตรวจฟิลเตอร์และวิวพอร์ต
แก้เงา SVG ที่ถูกตัดด้วยการตรวจสองขอบเขตแยกกัน: พื้นที่ฟิลเตอร์และวิวพอร์ตด้านนอก ทำตามตัวอย่างที่ทดสอบแล้วก่อนเปลี่ยนพาธ