ต้องรู้
- ด้วยหน้า Home ใน Plan ดู ไปที่ Window >Library > [MR] โฟลเดอร์วิดีโอพื้นหลังแบบเต็มหน้าจอ แล้วลากวิดเจ็ตไปที่หน้า
- หากต้องการเพิ่มวิดีโอ ให้ไปที่ ไฟล์ > เพิ่มไฟล์สำหรับการอัปโหลด > โฟลเดอร์วิดีโอ > เปิด.
Adobe Muse ให้คุณสร้างหน้าเว็บโดยใช้เวิร์กโฟลว์ที่คล้ายกับสิ่งพิมพ์ คุณไม่จำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับโค้ดที่สร้างไซต์หรือหน้าเว็บ แม้ว่าความคุ้นเคยกับ HTML5, CSS และ JavaScript จะไม่เสียหาย แม้ว่าโดยทั่วไปแล้ววิดีโอบนเว็บจะถูกเพิ่มผ่าน HTML5 Video API แต่ Adobe Muse ก็ทำสิ่งเดียวกันได้สำเร็จผ่านวิดเจ็ตที่สร้าง HTML 5 ที่จำเป็นสำหรับงานเฉพาะ แต่ใช้อินเทอร์เฟซภาษาธรรมดาใน Muse เพื่อเขียนโค้ดเมื่อมีการเผยแพร่หน้า
วิธีเตรียมหน้าสำหรับวิดีโอพื้นหลังใน Adobe Muse CC
เมื่อติดตั้งวิดเจ็ตแล้ว คุณสามารถสร้างเพจที่จะใช้วิดีโอได้แล้ว
- ก่อนที่คุณจะเริ่ม ให้สร้างโฟลเดอร์สำหรับไซต์ Muse ของคุณ ภายในโฟลเดอร์นั้น ให้สร้างโฟลเดอร์อื่น – เราใช้ “สื่อ” – และย้ายวิดีโอเวอร์ชัน mp4 และ webm ของคุณไปยังโฟลเดอร์นั้น
- เมื่อคุณเปิด Muse ให้เลือก File > New Site.
- เมื่อกล่องโต้ตอบเค้าโครงเปิดขึ้น ให้เลือก Desktop เป็น Initial Layout และเปลี่ยน Page Widthและ ความสูงของหน้า เป็น 1200 และ 900 คลิก ตกลง.
- ดับเบิ้ลคลิก มาสเตอร์เพจ ในมุมมองแผนเพื่อเปิดหน้ามาสเตอร์ เมื่อมาสเตอร์เพจเปิดขึ้น ให้ย้ายเส้นบอกแนวส่วนหัวและส่วนท้ายไปที่ด้านบนและด้านล่างของหน้า คุณไม่จำเป็นต้องมีส่วนหัวและส่วนท้ายสำหรับตัวอย่างนี้
วิธีใช้วิดเจ็ตวิดีโอพื้นหลังแบบเต็มหน้าจอใน Adobe Muse CC
การใช้วิดเจ็ตนั้นง่ายมาก
- สิ่งแรกที่คุณต้องทำคือกลับไปที่มุมมองแผนโดยเลือก ดู > โหมดแผน.
- เมื่อมุมมองแผนเปิดขึ้น ให้ดับเบิลคลิกที่ โฮมเพจ เพื่อเปิด
- เปิดแผงห้องสมุด – หากยังไม่เปิดทางด้านขวาของอินเทอร์เฟซ ให้เลือก Window > Library – และ หมุนลง [MR] วิดีโอพื้นหลังแบบเต็มหน้าจอ
- ลากวิดเจ็ตโฟลเดอร์ไปที่หน้า
-
คุณจะสังเกตเห็น Options ขอให้คุณป้อนชื่อวิดีโอเวอร์ชัน mp4 และ webmป้อนชื่อให้ตรงตามที่สะกดในโฟลเดอร์ที่คุณวางไว้ เคล็ดลับเล็ก ๆ น้อย ๆ เพื่อให้แน่ใจว่าคุณจะไม่ทำผิดพลาดคือการคัดลอกชื่อของวิดีโอ mp4 และวางลงในพื้นที่ MP4 และ WEBM ของ เมนูตัวเลือก
เคล็ดลับอีกอย่างหนึ่ง: วิดเจ็ตทั้งหมดนี้ทำได้โดยเขียนโค้ด HTML 5 ให้คุณ คุณสามารถบอกสิ่งนี้ได้เนื่องจากคุณเห็นในวิดเจ็ต ในกรณีนี้ คุณสามารถวางวิดเจ็ตจากหน้าเว็บลงบนกระดานวางได้ และวิดเจ็ตจะยังคงทำงานอยู่ วิธีนี้จะไม่รบกวนเนื้อหาใดๆ ที่คุณจะวางบนหน้า
วิธีการเพิ่มวิดีโอและทดสอบหน้าใน Adobe Muse CC
แม้ว่าคุณจะเพิ่มรหัสที่จะเล่นวิดีโอแล้ว Muse ก็ยังไม่รู้ว่าวิดีโอเหล่านั้นอยู่ที่ใด
- ในการแก้ไขปัญหานี้ ให้เลือก ไฟล์ > เพิ่มไฟล์สำหรับการอัปโหลด.
- เมื่อ กล่องโต้ตอบการอัปโหลด เปิดขึ้น ให้ไปที่โฟลเดอร์ที่มีวิดีโอของคุณ เลือกวิดีโอเหล่านั้นแล้วคลิก เปิด.
- เพื่อให้แน่ใจว่าได้อัปโหลดแล้ว ให้เปิดแผง Assetsแล้วคุณจะเห็นวิดีโอทั้งสองของคุณ เพียงแค่ทิ้งไว้ในแผง ไม่ต้องวางบนเพจ
- หากต้องการทดสอบโครงการ ให้เลือก ไฟล์ > หน้าตัวอย่างในเบราว์เซอร์ หรือเนื่องจากเป็นหน้าเดียว ไฟล์ > ดูตัวอย่างไซต์ในเบราว์เซอร์ เบราว์เซอร์เริ่มต้นของคุณจะเปิดขึ้น และวิดีโอจะเล่น
-
ณ จุดนี้ คุณสามารถจัดการไฟล์ Muse เป็นหน้าเว็บปกติและเพิ่มเนื้อหาในหน้าแรก และวิดีโอจะเล่นด้านล่าง
วิธีการเพิ่มกรอบโปสเตอร์วิดีโอใน Adobe Muse CC
นี่คือเว็บที่เรากำลังพูดถึงที่นี่ และขึ้นอยู่กับความเร็วในการเชื่อมต่อ มีโอกาสดีที่ผู้ใช้ของคุณอาจเปิดหน้าเว็บและจ้องมองที่หน้าจอว่างขณะโหลดวิดีโอ นี่ไม่ใช่สิ่งที่ดี นี่คือวิธีจัดการกับความน่ารังเกียจเล็กน้อยนี้
เป็น "แนวทางปฏิบัติที่ดีที่สุด" ในการใส่กรอบโปสเตอร์ของวิดีโอ ซึ่งจะปรากฏขึ้นขณะโหลดวิดีโอ โดยปกติแล้วจะเป็นภาพหน้าจอขนาดเต็มของเฟรมจากวิดีโอ
- หากต้องการเพิ่มกรอบโปสเตอร์ ให้คลิกหนึ่งครั้งที่ เติมเบราว์เซอร์ ที่ด้านบนสุดของหน้า
- คลิกลิงก์ รูปภาพ และไปที่รูปภาพเพื่อใช้
- ในพื้นที่ Fitting เลือก มาตราส่วนที่จะเติม และคลิกเครื่องหมาย จุดศูนย์กลาง ใน พื้นที่ ตำแหน่ง เพื่อให้แน่ใจว่ารูปภาพจะปรับขนาดจากศูนย์กลางของรูปภาพเสมอเมื่อขนาดวิวพอร์ตของเบราว์เซอร์เปลี่ยนไปคุณจะเห็นภาพเติมหน้า
-
เคล็ดลับเล็กๆ อีกประการหนึ่งคือการเติมสีให้ทึบ เผื่อว่ากรอบโปสเตอร์จะใช้เวลาสักครู่จึงจะปรากฏ ในการดำเนินการนี้ ให้คลิกชิป Color เพื่อเปิด Muse Color Picker เลือกเครื่องมือ eyedropper และคลิกที่สีเด่นในภาพ เมื่อเสร็จแล้ว ให้คลิกที่หน้าเพื่อปิดกล่องโต้ตอบการเติมเบราว์เซอร์
-
ณ จุดนี้ คุณสามารถบันทึกโครงการหรือเผยแพร่ได้
ส่วนสุดท้ายของชุดนี้จะแสดงวิธีเขียนโค้ด HTML5 ที่สไลด์วิดีโอลงในพื้นหลังของหน้าเว็บ
