คอมโพเนนต์หมุนวน

คอมโพเนนต์หมุนวนให้คุณสร้างครีเอทีฟโฆษณาในรูปแบบการแสดงผลที่สมจริงด้วยโมเดล 3 มิติแบบอินเทอร์แอกทีฟ เมื่อโฆษณาเลื่อนเข้ามาในมุมมอง ภาพเคลื่อนไหว 3 มิติเริ่มต้นจะเชื่อมโยงกับการเลื่อนหน้าเว็บ ผู้ใช้จะโต้ตอบกับโมเดลโดยตรงและขยายโฆษณาให้เต็มหน้าจอเพื่อดูเพิ่มเติมได้

คอมโพเนนต์นี้มีไว้สำหรับใช้ในครีเอทีฟโฆษณา Swirl ของ Display & Video 360 เท่านั้น และ Microsoft Edge ไม่รองรับคอมโพเนนต์นี้

วิธีเพิ่มคอมโพเนนต์หมุนวนในโครงการ

1. เปิดแผงคอมโพเนนต์ จากนั้นเลือกโฟลเดอร์กราฟิกและเอฟเฟกต์
2. ลากคอมโพเนนต์ หมุนวน ไปยังพื้นที่งาน
3. ดับเบิลคลิกที่คอมโพเนนต์เพื่อเปิดกล่องโต้ตอบการแก้ไขการหมุนวน
4. เลือกเลเยอร์โมเดล 3 มิติในแผงเลเยอร์
5. ในช่อง URL ของแผงคุณสมบัติ ให้เรียกดูไฟล์ GLB ของเนื้อหา 3 มิติที่ต้องการใช้ คุณยังปรับคุณสมบัติอื่นๆ ได้ด้วย (ดูด้านล่าง)
6. เพิ่มเลเยอร์โดยลากไฟล์ภาพจากระบบไฟล์ไปยังพื้นที่งานหรือแผงเลเยอร์ (เฉพาะ Windows หรือ Mac) หรือคลิกปุ่มนำเข้าเนื้อหา ที่ด้านล่างของแผงไลบรารี คุณเพิ่มได้เฉพาะรูปภาพเป็นเลเยอร์ในคอมโพเนนต์หมุนวน
7. จัดตำแหน่งแต่ละเลเยอร์ที่จะปรากฏที่จุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหวโดยใช้แท็บเริ่มต้นและสิ้นสุด คุณจะลากเลเยอร์ไปที่ตำแหน่งที่ต้องการ หรือใช้ช่องตำแหน่งเริ่มต้นและสิ้นสุดในแผงคุณสมบัติก็ได้
8. ตั้งค่าตัวเลือกการกำหนดค่าเพิ่มเติมตามต้องการ (ดูด้านล่าง)
9. เมื่อพอใจกับคอมโพเนนต์แล้ว (ดูตัวอย่างในระหว่างที่ทำงานได้) ให้คลิกบันทึก คุณจะกลับไปที่อินเทอร์เฟซปกติของ Google Web Designer

ตัวเลือกการกำหนดค่า

หากต้องการกำหนดค่าคอมโพเนนต์ ให้ดับเบิลคลิกบนพื้นที่งาน หรือเลือกพื้นที่งานและคลิกการตั้งค่า… ในแผงคุณสมบัติ

เพิ่มตำแหน่งตรงกลาง

คุณเพิ่มตำแหน่งตรงกลางและเปลี่ยนคุณสมบัติของเลเยอร์ ณ จุดนี้ได้หากต้องการควบคุมการเคลื่อนไหวของคอมโพเนนต์หมุนวนมากขึ้น

1. เลื่อนเมาส์ไปทางขวาของแท็บเริ่มต้น และคลิกปุ่ม แท็บตรงกลางจะปรากฏขึ้น
2. โดยค่าเริ่มต้น ตำแหน่งตรงกลางจะเกิดขึ้นกลางทางระหว่างจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว คุณปรับเวลาของภาพเคลื่อนไหวได้
3. เปลี่ยนไปที่แท็บตรงกลางเพื่อตั้งค่าคุณสมบัติของเลเยอร์เมื่อถึงจุดนี้

หากต้องการนำตำแหน่งตรงกลางออก ให้วางเมาส์เหนือแท็บตรงกลาง และคลิก X

เปลี่ยนเวลาของภาพเคลื่อนไหว

เวลาภาพเคลื่อนไหวของคอมโพเนนต์หมุนวนจะพิจารณาจากระยะที่เลื่อนเข้าไปหรือเลื่อนออกจากหน้าเว็บ โดยค่าเริ่มต้น ภาพเคลื่อนไหวจะเริ่มต้นเมื่อขอบด้านบนของคอมโพเนนต์เริ่มปรากฏในมุมมองของหน้าเว็บ (0%) และสิ้นสุดเมื่อขอบด้านล่างหายไปจากด้านบนของหน้าเว็บ (100%) หากเพิ่มตำแหน่งตรงกลาง คุณจะปรับเวลาที่ตำแหน่งตรงกลางจะเกิดขึ้นระหว่างการเคลื่อนไหวได้ด้วย การปรับเวลาของภาพเคลื่อนไหวทำได้ 2 วิธีดังนี้

• ในแผงเวลาของภาพเคลื่อนไหว ให้ลากช่องเริ่มต้น ตรงกลาง และสิ้นสุด หรือลากแถบเลื่อนไปที่เปอร์เซ็นต์ที่ต้องการ
• ป้อนเปอร์เซ็นต์เริ่มต้น ตรงกลาง และสิ้นสุดที่ช่องในแผงเวลาของภาพเคลื่อนไหว

ทำให้พื้นหลังของโมเดล 3 มิติโปร่งใส

1. เลือกโมเดล 3 มิติ
2. ในแผงคุณสมบัติ ให้เลือกช่องพื้นหลังโมเดล 3 มิติแบบโปร่งใส

เพิ่มสัญลักษณ์ท่าทางสัมผัส

1. เลือกโมเดล 3 มิติ
2. ในแผงคุณสมบัติ ให้คลิกเมนูแบบเลื่อนลงไอคอน และเลือกรูปภาพจากไลบรารี หรือคลิกเรียกดู... เพื่อเลือกรูปภาพจากระบบไฟล์
3. (ไม่บังคับ) ป้อนข้อความที่จะแสดงพร้อมไอคอนในช่องข้อความ

สัญลักษณ์ท่าทางสัมผัสจะปรากฏขึ้นเหนือโมเดล 3 มิติเพื่อแจ้งให้ผู้ใช้โต้ตอบกับโมเดล

หมุนโมเดล 3 มิติ

1. เลือกโมเดล 3 มิติ
2. ในแผงคุณสมบัติ ให้ตั้งค่าการเอียงสำหรับจุดเริ่มต้น ตรงกลาง และสิ้นสุดของภาพเคลื่อนไหว

การเอียงคือการที่โมเดลหมุนรอบแกนแนวตั้ง

เพิ่มเลเยอร์รูปภาพ

การเพิ่มเลเยอร์ทำได้ 2 วิธีดังนี้

• ลากไฟล์จากระบบไฟล์ไปที่พื้นที่งานหรือแผงเลเยอร์ (เฉพาะ Mac หรือ Windows)
• คลิกปุ่มนำเข้าเนื้อหา ที่ด้านล่างของแผงไลบรารี

เลเยอร์ใหม่ในคอมโพเนนต์หมุนวนต้องเป็นรูปภาพ อนุญาตให้มีเลเยอร์โมเดล 3 มิติได้เพียงเลเยอร์เดียวเท่านั้น ซึ่งจะมีอยู่โดยค่าเริ่มต้น

ย้ายเลเยอร์

1. เลือกเลเยอร์ที่ต้องการย้าย
2. เลือกแท็บเริ่มต้น ตรงกลาง หรือสิ้นสุด
3. จัดตำแหน่งเลเยอร์โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
   • ลากเลเยอร์ไปที่ตำแหน่งใหม่
   • ตั้งค่าคุณสมบัติของตำแหน่งเริ่มต้น ตรงกลาง หรือสิ้นสุดในแผงคุณสมบัติ คุณแก้ไขได้เฉพาะคุณสมบัติที่ตรงกับแท็บที่เปิดอยู่เท่านั้น ใช้ปุ่มจับคู่ตำแหน่งเริ่มต้น จับคู่ตำแหน่งตรงกลาง หรือจับคู่ตำแหน่งสิ้นสุด เพื่อคัดลอกตำแหน่งอื่น

เปลี่ยนไปที่แท็บเริ่มต้น ตรงกลาง หรือสิ้นสุดเพื่อปรับตำแหน่งอื่นของเลเยอร์

เปลี่ยนรูปภาพ

1. คลิกขวาที่รูปภาพบนพื้นที่งานที่คุณต้องการสลับออกไป แล้วเลือกสลับรูปภาพ... จากเมนูป๊อปอัป
2. เลือกรูปภาพจากไลบรารี หรือคลิกปุ่มนำเข้าไฟล์ เพื่อเลือกไฟล์ภาพจากคอมพิวเตอร์

รูปภาพใหม่จะแทนที่รูปภาพเดิม หากก่อนหน้านี้คุณได้ปรับขนาดรูปภาพที่สลับออกไป รูปภาพใหม่จะใช้ขนาดที่ปรับนั้นด้วย หากไม่ได้ปรับขนาดไว้ รูปภาพใหม่จะมีขนาดตามปกติ

เรียงลำดับเลเยอร์ใหม่

ในแผงเลเยอร์ ให้ลากเลเยอร์ไปที่ตำแหน่งใหม่ในรายการ

ลำดับของเลเยอร์จะกำหนดว่าเลเยอร์ใดจะแสดงอยู่ด้านหน้าของแต่ละเลเยอร์ เลเยอร์ที่อยู่ในลำดับสูงกว่าจะปรากฏอยู่หน้าเลเยอร์ในลำดับที่ต่ำกว่า

ลบเลเยอร์รูปภาพ

1. เลือกเลเยอร์ที่ต้องการลบ
2. คลิกปุ่มลบ ที่ด้านล่างของแผงเลเยอร์

คอมโพเนนต์หมุนวนจำเป็นต้องมีเลเยอร์โมเดล 3 มิติซึ่งจะลบไม่ได้

ปรับขนาดเลเยอร์

1. เลือกเลเยอร์ที่ต้องการปรับขนาด
2. ปรับขนาดเลเยอร์โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
   • ในแผงคุณสมบัติ ให้ตั้งค่าความกว้างและความสูงของเลเยอร์ คลิกปุ่มจำกัดสัดส่วนภาพ เพื่อสลับว่าจะให้อัตราส่วนระหว่างความกว้างและความสูงคงที่หรือไม่
   • ลากแฮนเดิลปรับขนาดที่มุมและขอบของเลเยอร์ในพื้นที่งาน

เลเยอร์จะมีขนาดเท่ากับที่ระบุไว้ตลอดระยะเวลาที่ภาพเคลื่อนไหว

เปลี่ยนความทึบแสงของเลเยอร์

1. เลือกเลเยอร์ที่ต้องการเปลี่ยน
2. ในแผงคุณสมบัติ ให้ตั้งค่าความทึบแสงเริ่มต้นหรือสิ้นสุดเป็นค่าระหว่าง 0 ถึง 1 (0 คือโปร่งใส และ 1 คือทึบ)

เลเยอร์โมเดล 3 มิติจะทึบแสงเมื่อสิ้นสุดภาพเคลื่อนไหวเสมอ

เปลี่ยนการค่อยๆ เปลี่ยนภาพเคลื่อนไหวของเลเยอร์

1. เลือกเลเยอร์ที่ต้องการเแก้ไข
2. ในแผงคุณสมบัติในส่วนคุณสมบัติขั้นสูง ให้เลือกประเภทการค่อยๆ เปลี่ยนจากเมนูแบบเลื่อนลงการค่อยๆ เปลี่ยน

ใช้การค่อยๆ เปลี่ยนที่กำหนดเองไม่ได้

ซ่อนและแสดงเลเยอร์

ในแผงเลเยอร์ ให้คลิกช่องข้างภาพขนาดย่อของเลเยอร์ (ใต้ปุ่มซ่อนทุกเลเยอร์ )

คุณจะซ่อนหรือแสดงเลเยอร์ทั้งหมดได้โดยคลิกปุ่มซ่อนทุกเลเยอร์

การซ่อนเลเยอร์ช่วยให้ทำงานกับเลเยอร์อื่นได้ง่ายขึ้นและช่วยให้เลเยอร์ที่ซ่อนอยู่ไม่ปรากฏในตัวอย่างการกำหนดค่า แต่จะไม่มีผลต่อการแสดงตัวอย่างของเบราว์เซอร์หรือครีเอทีฟโฆษณาที่เผยแพร่

แสดงและซ่อน Ghost

1. เลือกเลเยอร์รูปภาพ
2. ในแผงคุณสมบัติในส่วนคุณสมบัติขั้นสูง ให้คลิกช่องทำเครื่องหมายแสดง Ghost

Ghost คือเลเยอร์เวอร์ชันโปร่งแสงซึ่งอยู่ในตำแหน่งที่คุณไม่ได้กำลังแก้ไขอยู่ คุณจึงเปรียบเทียบตำแหน่งเริ่มต้น ตรงกลาง และสิ้นสุดด้วยสายตาได้ Ghost เป็นเพียงข้อมูลอ้างอิงเท่านั้นและจะไม่แสดงในตัวอย่างหรือในไฟล์ที่เผยแพร่

คุณสมบัติ

คุณสมบัติของคอมโพเนนต์หมุนวน

คุณสมบัติ	คำอธิบาย
ชื่อ	ชื่อของคอมโพเนนต์หมุนวน
ระยะการเลื่อน	ตัวเลขระหว่าง 0-1 หมายถึงระยะที่ผู้ชมเลื่อน ใช้เพื่อแสดงในพื้นที่งานของ Google Web Designer เท่านั้น ค่าเริ่มต้นคือ 0.5

คุณจะดูและแก้ไขคุณสมบัติของเลเยอร์ได้เมื่ออยู่ในกล่องโต้ตอบการแก้ไขการหมุนวนและเลือกเลเยอร์ไว้

คุณสมบัติของเลเยอร์โมเดล 3 มิติ

หมายเหตุ: คอมโพเนนต์หมุนวนที่สร้างขึ้นก่อน Google Web Designer เวอร์ชัน 11.0.0 มีพร็อพเพอร์ตี้บางรายการสําหรับเลเยอร์โมเดล 3 มิติ

คุณสมบัติ	คำอธิบาย
ชื่อ	ชื่อของคอมโพเนนต์โมเดล 3 มิติ
URL	ไฟล์แหล่งที่มา GLB สำหรับเนื้อหา 3 มิติ ใช้ Khronos glTF Validator เพื่อตรวจสอบว่าไฟล์ GLB ถูกต้อง สําหรับคอมโพเนนต์หมุนวน URL หรือรหัสของเนื้อหา 3 มิติ รองรับเฉพาะเนื้อหาที่โฮสต์ใน Poly ซึ่งเปิดการแชร์ลิงก์เอาไว้ ไฟล์เนื้อหาต้องมีขนาดไม่เกิน 2 MB เนื่องจากเนื้อหาที่มีขนาดใหญ่กว่านี้อาจโหลดใน Google Web Designer ไม่ได้ ดูข้อกำหนดเพิ่มเติมได้จากคู่มือเนื้อหา 3 มิติ URL ควรเริ่มต้นด้วย https://poly.google.com/view/ คุณดูรหัสได้ที่ส่วนท้ายของ URL หน้ามุมมอง Poly ดังตัวอย่างต่อไปนี้ https://poly.google.com/view/0CkCZrXqCWW ตัวอย่าง https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW รีเฟรชเนื้อหา - รีเฟรชเนื้อหา 3 มิติได้โดยคลิกปุ่มนี้ในช่อง URL หากไม่เห็นการเปลี่ยนแปลงใดๆ แสดงว่าระบบยังประมวลผลเนื้อหาอยู่ โปรดรอสักครู่แล้วลองอีกครั้ง
พื้นหลังโมเดล 3 มิติแบบโปร่งใส	(สำหรับคอมโพเนนต์หมุนวนแบบเก่าเท่านั้น) เลือกช่องนี้หากต้องการให้พื้นหลังของคอมโพเนนต์โมเดล 3 มิติโปร่งใส
สัญลักษณ์ท่าทางสัมผัส
ไอคอน	รูปภาพที่จะแสดงเหนือโมเดล 3 มิติเพื่อแจ้งให้ผู้ใช้โต้ตอบกับโมเดล สัญลักษณ์ท่าทางสัมผัสจะเคลื่อนไหวเล็กน้อยเพื่อดึงดูดความสนใจของผู้ใช้จนครบกำหนดเวลาของภาพเคลื่อนไหว และจะหายไปเมื่อผู้ใช้เริ่มโต้ตอบกับโมเดล
ข้อความ	ข้อความที่จะแสดงใต้ไอคอนสัญลักษณ์ท่าทางสัมผัส มีผลเมื่อระบุไอคอนสัญลักษณ์ท่าทางสัมผัสไว้เท่านั้น
กำหนดเวลาของภาพเคลื่อนไหว	ตั้งค่าช่องนี้และกำหนดระยะเวลา (เป็นวินาที) ที่จะแสดงภาพเคลื่อนไหวของสัญลักษณ์ท่าทางสัมผัส
ตำแหน่งและขนาด
เริ่มต้น	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์หมุนวนที่จุดเริ่มต้นของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บเริ่มต้น
ตรงกลาง	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์หมุนวนที่ตำแหน่งตรงกลางของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บตรงกลาง
สิ้นสุด	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์หมุนวนที่จุดสิ้นสุดของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บสิ้นสุด
ขนาด	ความกว้างและความสูงของเลเยอร์ มีผลกับเลเยอร์ตลอดระยะเวลาที่ภาพเคลื่อนไหว
การหมุน
การเอียง	การหมุนที่จุดเริ่มต้น ตรงกลาง และสิ้นสุดของโมเดลรอบแกนแนวตั้ง หน่วยเป็นองศา
รูปแบบ
ความทึบแสง	ความทึบแสงที่จุดเริ่มต้น ตรงกลาง และสิ้นสุดของเลเยอร์ซึ่งแสดงเป็นตัวเลขระหว่าง 0 (โปร่งใส) ถึง 1 (ทึบแสง)
คุณสมบัติขั้นสูง
การค่อยๆ เปลี่ยน	ประเภทการค่อยๆ เปลี่ยนภาพเคลื่อนไหวของเลเยอร์ ใช้การค่อยๆ เปลี่ยนที่กำหนดเองไม่ได้

คุณสมบัติของเลเยอร์รูปภาพ

คุณสมบัติ	คำอธิบาย
แหล่งที่มา	แหล่งที่มาของไฟล์ภาพ (แก้ไขไม่ได้)
URL ทางออก	URL ทางออกเมื่อผู้ใช้คลิกรูปภาพ
ตำแหน่งและขนาด
เริ่มต้น	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์ที่จุดเริ่มต้นของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บเริ่มต้น
ตรงกลาง	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์ที่ตำแหน่งตรงกลางของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บตรงกลาง
สิ้นสุด	ระยะห่างของเลเยอร์จากด้านซ้ายและด้านบนของคอมโพเนนต์ที่จุดสิ้นสุดของภาพเคลื่อนไหว แก้ไขได้เมื่อเลือกแท็บสิ้นสุด
ขนาด	ความกว้างและความสูงของเลเยอร์ มีผลกับเลเยอร์ตลอดระยะเวลาที่ภาพเคลื่อนไหว
รูปแบบ
ความทึบแสง	ความทึบแสงที่จุดเริ่มต้น ตรงกลาง และสิ้นสุดของเลเยอร์ซึ่งแสดงเป็นตัวเลขระหว่าง 0 (โปร่งใส) ถึง 1 (ทึบแสง)
คุณสมบัติขั้นสูง
การค่อยๆ เปลี่ยน	ประเภทการค่อยๆ เปลี่ยนภาพเคลื่อนไหวของเลเยอร์ ใช้การค่อยๆ เปลี่ยนที่กำหนดเองไม่ได้
แสดง Ghost	เมื่อเปิดใช้ เลเยอร์เวอร์ชันโปร่งแสงจะแสดงที่ตำแหน่งที่ไม่ได้ใช้งาน (ตำแหน่งที่คุณไม่ได้แก้ไขอยู่)

เหตุการณ์และการทำงาน

เหตุการณ์

คุณใช้เหตุการณ์เพื่อทริกเกอร์การทำงานอื่นๆ ในโฆษณาได้ คอมโพเนนต์หมุนวนจะส่งเหตุการณ์ต่อไปนี้

เหตุการณ์	คำอธิบาย
โหลดการหมุนวนแล้ว	ส่งเมื่อโหลดเนื้อหาทั้งหมดที่มีอยู่ในคอมโพเนนต์แล้ว

หากต้องการเลือกเหตุการณ์นี้ในกล่องโต้ตอบเหตุการณ์ ให้ตั้งค่าคอมโพเนนต์หมุนวนเป็นเป้าหมาย

คุณจะกำหนดเหตุการณ์และการทำงานของโมเดล 3 มิติที่รวมอยู่ในคอมโพเนนต์หมุนวนด้วยก็ได้

แสดงตัวอย่าง

ระหว่างการกำหนดค่า

คุณดูตัวอย่างคอมโพเนนต์หมุนวนระหว่างการสร้างได้โดยทำดังนี้

1. ดับเบิลคลิกคอมโพเนนต์ในพื้นที่งานเพื่อเข้าสู่โหมดแก้ไขคอมโพเนนต์
2. คลิกแท็บแสดงตัวอย่างที่ด้านบน
3. เลื่อนขึ้นและลงเพื่อดูว่าเลเยอร์ที่แสดงมีลักษณะการทำงานอย่างไรในเลย์เอาต์ของอุปกรณ์เคลื่อนที่ตัวอย่าง (เลเยอร์ที่ซ่อนไว้จะไม่แสดง)
4. คุณแก้ไขคอมโพเนนต์ขณะที่ดูตัวอย่างไม่ได้ คลิกแท็บเริ่มต้น ตรงกลาง หรือสิ้นสุด ทำการเปลี่ยนแปลง จากนั้นคลิกแท็บแสดงตัวอย่างอีกครั้งเพื่อดูการเปลี่ยนแปลงนั้น

ในเบราว์เซอร์

แสดงตัวอย่างคอมโพเนนต์ในเบราว์เซอร์โดยออกจากโหมดการแก้ไขคอมโพเนนต์และใช้ปุ่มแสดงตัวอย่างใน Google Web Designer หน้าตัวอย่างจะจำลองลักษณะที่โฆษณาจะแสดงในหน้าเว็บซึ่งมีเนื้อหามากพอให้คุณเลื่อนที่ด้านบนและด้านล่างของคอมโพเนนต์

คุณเลือกใช้ตัวเลือกโหมดแสดงตัวอย่างต่อไปนี้ได้

• อุปกรณ์ - เลือกอุปกรณ์เคลื่อนที่หรือกำหนดเอง
• หมุนอุปกรณ์ - เปลี่ยนระหว่างแนวตั้งและแนวนอน
• ขนาดวิวพอร์ต - หากเลือกกำหนดเองสำหรับอุปกรณ์ คุณจะกำหนดขนาดใหม่ได้โดยการแก้ไขช่องนี้ หรือลากแฮนเดิลปรับขนาดการแสดงตัวอย่าง

โฆษณาแบบหมุนวนจะใช้โหมดแสดงตัวอย่างพารัลแลกซ์ในเบราว์เซอร์เสมอ