חלק 3 כיצד ליצור רקע וידאו

Friday of 05

הוספת וידאו ל Adobe Muse

רקע וידאו קל להוסיף מוזה תודה על יישומון חינם.

היבט מעניין באמת של Adobe Muse היא שהיא מאפשרת לך ליצור דפי אינטרנט באמצעות עבודה דומה לזה המשמש לפרסומים. אתה לא צריך הבנה עמוקה של הקוד בונה אתר או דף, אבל היכרות עם HTML5, CSS ו- JavaScript לא יזיק.

למרות וידאו אינטרנט מסורתי הוא הוסיף בדרך כלל באמצעות ממשק HTML5 וידאו, Adobe Muse משיג את אותו הדבר באמצעות מה שהוא מכנה "יישומונים". יישומונים ליצור את HTML 5 נדרש עבור משימות ספציפיות, אבל להשתמש בממשק שפה רגיל מוזה לכתוב את הקוד כאשר הדף הוא פרסם.

בתרגיל זה, אנחנו הולכים להשתמש יישומון שבו אתה יכול להוריד, ללא תשלום, מ משאבים משאבים. כאשר הורדות widget, כל שעליך לעשות הוא לפתוח את קובץ ה- zip וללחוץ פעמיים על הקובץ .mulib בתיקייה Video Full-Screen. זה יתקין אותו לתוך העותק של Adobe Muse.

02 מתוך 05

כיצד להכין דף לקבלת רקע וידאו Adobe Muse CC

אנו מתחילים על ידי יצירת אתר חדש והגדרת מאפייני הדף.

עם יישומון מותקן, עכשיו אתה יכול ליצור את הדף שישתמש וידאו.

לפני שתתחיל, צור תיקייה עבור אתר Muse שלך. בתוך תיקיה זו ליצור תיקייה נוספת - אני משתמש " מדיה " - ולהעביר את mp4 ו webm גירסאות של וידאו לתוך התיקייה.

בעת הפעלת Muse בחר File> New Site . כאשר תיבת הדו-שיח 'פריסה' נפתחת, בחר באפשרות ' שולחן עבודה' כ'פריסה ההתחלתית ' ושנה את ערכי רוחב הדף ואת גובה הדף ל- 1200 ו- 900 . לחץ על אישור .

לחץ פעמיים על הדף הראשי בתצוגה 'תוכנית' כדי לפתוח את הדף הראשי. כאשר הדף הראשי נפתח, הזז הכותרת העליונה והתחתונה מובילות לחלק העליון והתחתון של הדף. אתה באמת לא צריך כותרת עליונה ותחתונה עבור דוגמה זו.

03 מתוך 05

כיצד להשתמש רקע מסך מלא יישומון Adobe Muse CC

כל שעליך לעשות הוא להוסיף את שמות הווידאו ולתת את הווידג'ט לטפל בשאר.

באמצעות יישומון הוא פשוט מת. הדבר הראשון שעליך לעשות הוא לחזור לתצוגת התוכנית על-ידי בחירה באפשרות תצוגה> מצב תוכנית . כאשר תוכנית הצג נפתח פעמיים לחץ על דף הבית כדי לפתוח אותו.

פתח את החלונית 'ספריה' - אם היא אינה פתוחה בצד ימין של ממשק בחר חלון> ספריה - ו לסובב את [MR] מלא מסך רקע תיקיית וידאו . גרור את הווידג'ט לתיקייה אל הדף.

תוכלו לראות את האפשרויות לבקש ממך להזין את השמות של mp4 ו webm גירסאות של קטעי וידאו. הזן את השמות בדיוק כפי שהם מאויתים בתיקייה שבה אתה שם אותם. טריק קטן אחד כדי להבטיח שאתה לא עושה טעות היא להעתיק את השם של וידאו mp4 ולהדביק אותו לתוך אזורי MP4 ו- WEBM בתפריט האפשרויות .

טריק אחד נוסף: כל יישומון זה הוא לכתוב את קוד ה- HTML 5 בשבילך. תוכל לדעת זאת מפני שאתה רואה <> ב- widget. במקרה זה, אתה יכול למקם את הווידג'ט של דף האינטרנט על הקרטון וזה עדיין יעבוד. בדרך זו היא אינה מפריעה לתוכן שתשים בדף.

04 מתוך 05

כיצד להוסיף וידאו ולבדוק דף ב Adobe Muse

סרטון הווידאו פועל כשאתה בודק את האתר או את הדף.

על אף שהוספת את הקוד שישמיע את הסרטונים, למוזה עדיין אין מושג היכן הסרטונים נמצאים. כדי לתקן זאת, בחר ' קובץ'> 'הוסף קבצים להעלאה' . כאשר תיבת הדו-שיח 'העלאה' נפתחת נווט לתיקייה שמכילה את הסרטונים שלך, בחר אותם ולחץ על פתח . כדי לוודא שהם הועלו, פתח את החלונית 'נכסים' ואתה אמור לראות את שני הסרטונים שלך. פשוט להשאיר אותם בלוח. אין צורך להציב אותם בדף.

כדי לבדוק את הפרויקט בחר קובץ> תצוגה מקדימה דף בדפדפן או, כי זה הוא דף אחד, קובץ> תצוגה מקדימה של האתר בדפדפן . דפדפן ברירת המחדל שלך ייפתח והווידאו - במקרה שלי סופת גשם טרופית - יתחיל לפעול.

בשלב זה, תוכל לטפל בקובץ Muse כדף אינטרנט רגיל ולהוסיף תוכן לדף הבית והווידאו ישחק מתחתיו.

05 מתוך 05

כיצד להוסיף מסגרת וידאו ב Adobe Adobe Muse

הוסף תמיד מסגרת פוסטר לכל פרויקט וידאו.

זה האינטרנט שאנחנו מדברים עליו, ובהתאם למהירות החיבור, יש סיכוי טוב שהמשתמש שלך יוכל לפתוח את הדף ולהביט במסך ריק בזמן טעינת הסרטון. זה לא דבר טוב. הנה איך להתמודד עם זה קצת נבל.

זהו "Best Practice" כדי לכלול מסגרת פוסטר של הסרטון, שיופיע בזמן טעינת הסרטון. בדרך כלל זהו צילום מסך בגודל מלא של מסגרת מתוך הסרטון.

כדי להוסיף את מסגרת פוסטר לחץ פעם אחת על דפדפן מילוי בחלק העליון של הדף. לחץ על הקישור תמונה ונווט אל התמונה לשימוש. באזור ' התאמה' , בחר ' קנה מידה למילוי' ולחץ על נקודת המרכז באזור ' מיקום' . פעולה זו תבטיח שהדימוי תמיד ישתנה ממרכז התמונה, כאשר גודל התצוגה של הדפדפן משתנה. תוכלו גם לראות את התמונה למלא את הדף.

עוד טריק קטן הוא לפחות יש צבע מוצק לא לבן מילוי רק במקרה מסגרת פוסטר לוקח זמן להופיע. כדי לעשות זאת לחץ על שבב צבע כדי לפתוח את Muse Color Picker. בחר את הכלי טפטפת ולחץ על צבע השולט בתמונה. בסיום, לחץ על הדף כדי לסגור את תיבת הדו-שיח 'מילוי דפדפן'.

בשלב זה, אתה יכול לשמור את הפרויקט או לפרסם אותו.

החלק האחרון של הסדרה מראה לך איך לכתוב את קוד HTML5 מחליק וידאו לרקע של דף אינטרנט.