الجزء 3 من كيفية إنشاء فيديو الخلفية

01 من 05

إضافة الفيديو إلى Adobe Muse

فيديو الخلفية من السهل إضافة في موسى بفضل القطعة الحرة.

الجانب المثير للإعجاب في Adobe Muse هو أنه يسمح لك بإنشاء صفحات ويب باستخدام سير عمل مشابه لتلك المستخدمة لوضع المنشورات. لا تحتاج إلى فهم عميق للرمز الذي ينشئ موقعًا أو صفحة ، ولكن لا يضر التعرف على HTML5 و CSS وجافا سكريبت.

على الرغم من أنه عادة ما يتم إضافة الفيديو التقليدي عبر استخدام HTML5 Video API ، فإن Adobe Muse يحقق نفس الشيء من خلال ما يطلق عليه "widgets". تقوم الأدوات بتكوين HTML 5 المطلوب لمهام محددة ، ولكن استخدم واجهة بلغة عادية في Muse لكتابة الرمز عند نشر الصفحة.

في هذا التمرين ، سنستخدم أداة يمكنك تنزيلها مجانًا من Muse Resources. عندما تكون تنزيلات عنصر واجهة المستخدم ، كل ما عليك فعله هو فتح ملف .zip والنقر نقرًا مزدوجًا فوق ملف .mulib في مجلد فيديو ملء الشاشة. سيقوم هذا بتثبيته في نسختك من Adobe Muse.

02 من 05

كيفية إعداد صفحة لفيديو الخلفية في Adobe Muse CC

نبدأ بإنشاء موقع جديد وتعيين أبعاد الصفحة.

عند تثبيت الأداة ، يمكنك الآن إنشاء الصفحة التي ستستخدم الفيديو.

قبل أن تبدأ ، قم بإنشاء مجلد لموقع موسى الخاص بك. داخل هذا المجلد أنشئ مجلدًا آخر - أستخدم " الوسائط " - وقم بنقل إصدارات MP4 و Webm الخاصة بك من الفيديو إلى هذا المجلد.

عند تشغيل Muse ، حدد File> New Site . عند فتح مربع الحوار تخطيط حدد سطح المكتب كتخطيط أولي وتغيير قيم عرض الصفحة والصفحة إلى 1200 و 900 . انقر فوق موافق .

انقر نقرًا مزدوجًا فوق الصفحة الرئيسية في طريقة عرض "الخطة" لفتح الصفحة الرئيسية. عند فتح الصفحة الرئيسية ، قم بتحريك موجهات "رأس وتذييل الصفحة" إلى أعلى الصفحة وأسفلها. أنت لا تحتاج حقاً إلى رأس وتذييل لهذا المثال.

03 من 05

كيفية استخدام القطعة فيديو خلفية الشاشة في برنامج Adobe Muse CC

كل ما عليك القيام به هو إضافة أسماء الفيديو والسماح للعنصر التعامل مع بقية.

استخدام القطعة بسيط للغاية. أول ما يجب عليك فعله هو الرجوع إلى "عرض الخطة" عن طريق تحديد View> Plan Mode . عند فتح "عرض الخطة" ، انقر نقرًا مزدوجًا فوق الصفحة الرئيسية لفتحها.

افتح لوحة Library - إذا لم يكن مفتوحًا على الجانب الأيمن من الواجهة ، حدد Window> Library - وقم بتدوير مجلد الفيديو [Video] Fullscreen Background . اسحب الأداة إلى المجلد إلى الصفحة.

ستلاحظ أن الخيارات تطالبك بإدخال أسماء إصدارات mp4 و webm لمقاطع الفيديو. أدخل الأسماء تمامًا كما هي مكتوبة في المجلد الذي وضعته فيها. إحدى الخدع الصغيرة لضمان عدم ارتكاب خطأ هي نسخ اسم الفيديو mp4 ولصقه في مناطق MP4 و WEBM من قائمة الخيارات .

خدعة أخرى: كل هذه الأداة هي كتابة كود HTML 5 لك. يمكنك معرفة ذلك لأنك ترى <> في الأداة. في هذه الحالة ، يمكنك وضع القطعة خارج صفحة الويب على لوحة اللصق وستظل تعمل. بهذه الطريقة لا تتداخل مع أي محتوى ستضعه على الصفحة.

04 من 05

كيفية إضافة فيديو واختبار صفحة في Adobe Muse CC

يتم تشغيل الفيديو عند اختبار الموقع أو الصفحة.

على الرغم من أنك قد أضفت الرمز الذي سيتم تشغيل مقاطع الفيديو ، فلا يزال موسى ليس لديه أدنى فكرة عن مكان وجود مقاطع الفيديو هذه. لحل هذه المشكلة ، حدد File> Add Files For Upload . عند فتح مربع حوار التحميل ، انتقل إلى المجلد الذي يحتوي على مقاطع الفيديو الخاصة بك ، وحددها وانقر فوق فتح . للتأكد من تحميلها ، افتح لوحة Assets وسيجب عليك مشاهدة الفيديوين. فقط اتركهم في اللوحة. لا يجب وضعها على الصفحة.

لاختبار المشروع ، حدد File> Preview Page In Browser أو ، لأن هذه صفحة واحدة ، File> Preview Site In Browser . سيتم فتح المتصفح الافتراضي وسيبدأ تشغيل الفيديو - في حالتي عاصفة مطيرة استوائية.

في هذه المرحلة ، يمكنك التعامل مع ملف Muse كصفحة ويب عادية وإضافة محتوى إلى الصفحة الرئيسية وسيتم تشغيل الفيديو أسفله.

05 من 05

كيفية إضافة إطار ملصق فيديو في Adobe Muse CC

قم دائمًا بإضافة إطار ملصق إلى أي مشروع فيديو.

هذا هو الويب الذي نتحدث عنه هنا ، واعتمادًا على سرعة الاتصال ، هناك فرصة جيدة أن يقوم المستخدم بفتح الصفحة والتحديق في شاشة فارغة أثناء تحميل الفيديو. هذا ليس شيئا جيدا. إليك كيفية التعامل مع هذا الشيء من القبح.

إنها "أفضل ممارسة" لتضمين إطار ملصق للفيديو ، والذي سيظهر أثناء تحميل الفيديو. هذه عادةً لقطة شاشة كاملة الحجم لإطار من الفيديو.

لإضافة إطار الملصق ، انقر مرة واحدة على " ملء المستعرض" في أعلى الصفحة. انقر على رابط الصورة وانتقل إلى الصورة المراد استخدامها. في منطقة Fitting ، حدد Scale to Fill وانقر فوق نقطة المركز في منطقة الموضع . سيعمل هذا على التأكد من أن الصورة ستتغير دائمًا من مركز الصورة عندما يتغير حجم منفذ العرض الخاص بالمتصفح. سترى أيضًا الصورة التي تملأ الصفحة.

وهناك حيلة صغيرة أخرى هي أن يكون لونها بلون أبيض خالص فقط في حالة ما إذا استغرق إطار الملصق بعض الوقت ليظهر. للقيام بذلك انقر فوق رقاقة اللون لفتح Muse Color Picker. حدد أداة القطارة وانقر على اللون السائد في الصورة. عند الانتهاء ، انقر فوق الصفحة لإغلاق مربع الحوار "ملء المستعرض".

في هذه المرحلة ، يمكنك حفظ المشروع أو نشره.

يعرض الجزء الأخير من هذه السلسلة كيفية كتابة شفرة HTML5 التي تعرض الفيديو في خلفية صفحة الويب.