Προσθήκη του βίντεο στο Adobe Muse

Πίνακας περιεχομένων:

Προσθήκη του βίντεο στο Adobe Muse
Προσθήκη του βίντεο στο Adobe Muse
Anonim

Τι πρέπει να γνωρίζετε

  • Με τη σελίδα Αρχική στην προβολή Σχέδιο, μεταβείτε στο Window >Βιβλιοθήκη > [MR] Βίντεο φόντου πλήρους οθόνης φάκελο και σύρετε το γραφικό στοιχείο στη σελίδα.
  • Για να προσθέσετε ένα βίντεο, μεταβείτε στο Αρχείο > Προσθήκη αρχείων για μεταφόρτωση > φάκελος βίντεο > Άνοιγμα.

Το Adobe Muse σάς επιτρέπει να δημιουργείτε ιστοσελίδες χρησιμοποιώντας παρόμοια ροή εργασίας με τις δημοσιεύσεις. δεν χρειάζεστε βαθιά κατανόηση του κώδικα που δημιουργεί έναν ιστότοπο ή μια σελίδα, αν και η εξοικείωση με τα HTML5, CSS και JavaScript δεν θα βλάψει. Αν και το παραδοσιακό βίντεο ιστού προστίθεται συνήθως μέσω του HTML5 Video API, το Adobe Muse επιτυγχάνει το ίδιο μέσω γραφικών στοιχείων που δημιουργούν το HTML 5 που απαιτείται για συγκεκριμένες εργασίες, αλλά χρησιμοποιούν μια διεπαφή απλής γλώσσας στο Muse για να γράψει τον κώδικα όταν δημοσιεύεται η σελίδα.

Πώς να προετοιμάσετε μια σελίδα για βίντεο στο παρασκήνιο στο Adobe Muse CC

Image
Image

Με το γραφικό στοιχείο εγκατεστημένο, μπορείτε τώρα να δημιουργήσετε τη σελίδα που θα χρησιμοποιεί το βίντεο.

  1. Πριν ξεκινήσετε, δημιουργήστε έναν φάκελο για τον ιστότοπό σας Muse. Μέσα σε αυτόν τον φάκελο, δημιουργήστε έναν άλλο φάκελο – χρησιμοποιούμε «μέσα» – και μετακινήστε τις εκδόσεις mp4 και webm του βίντεο σε αυτόν τον φάκελο.
  2. Όταν εκκινείτε το Muse, επιλέξτε Αρχείο > Νέος ιστότοπος.
  3. Όταν ανοίξει το παράθυρο διαλόγου Layout, επιλέξτε Desktop ως Αρχική διάταξη και αλλάξτε το Πλάτος σελίδας Τιμέςκαι Ύψος σελίδας σε 1200 και 900 . Κάντε κλικ στο OK.
  4. Διπλό κλικ Κύρια σελίδα στην προβολή Σχεδίου για να ανοίξετε την κύρια σελίδα. Όταν ανοίξει η κύρια σελίδα, μετακινήστε τους οδηγούς κεφαλίδας και υποσέλιδου στο επάνω και στο κάτω μέρος της σελίδας. Δεν χρειάζεστε πραγματικά κεφαλίδα και υποσέλιδο για αυτό το παράδειγμα.

Πώς να χρησιμοποιήσετε το γραφικό στοιχείο βίντεο φόντου πλήρους οθόνης στο Adobe Muse CC

Image
Image

Η χρήση του γραφικού στοιχείου είναι απλή.

  1. Το πρώτο πράγμα που πρέπει να κάνετε είναι να επιστρέψετε στην Προβολή σχεδίου επιλέγοντας Προβολή > Λειτουργία σχεδίου.
  2. Όταν ανοίξει η Προβολή σχεδίου, κάντε διπλό κλικ στην Αρχική σελίδα για να την ανοίξετε.
  3. Άνοιγμα του πίνακα Βιβλιοθήκη – αν δεν είναι ανοιχτός στη δεξιά πλευρά της διεπαφής, επιλέξτε Window > Βιβλιοθήκη - και περιστρέψτε τον φάκελο [MR] Fullscreen Video Background.
  4. Σύρετε το γραφικό στοιχείο φακέλου στη σελίδα.
  5. Θα παρατηρήσετε ότι οι Επιλογές θα σας ζητήσουν να εισαγάγετε τα ονόματα των εκδόσεων mp4 και webm των βίντεο. Εισαγάγετε τα ονόματα ακριβώς όπως είναι γραμμένα στο φάκελο όπου τα τοποθετήσατε. Ένα μικρό κόλπο για να βεβαιωθείτε ότι δεν θα κάνετε λάθος είναι να αντιγράψετε το όνομα του βίντεο mp4 και να το επικολλήσετε στις περιοχές MP4 και WEBM του μενού Επιλογές

    Ένα άλλο κόλπο: Το μόνο που κάνει αυτό το γραφικό στοιχείο είναι να γράφει τον κώδικα HTML 5 για εσάς. Μπορείτε να το πείτε αυτό επειδή το βλέπετε στο widget. Σε αυτήν την περίπτωση, μπορείτε να τοποθετήσετε το γραφικό στοιχείο από την ιστοσελίδα στον χαρτόνι και θα εξακολουθεί να λειτουργεί. Με αυτόν τον τρόπο, δεν παρεμβαίνει σε οποιοδήποτε περιεχόμενο θα τοποθετήσετε στη σελίδα.

Πώς να προσθέσετε βίντεο και να δοκιμάσετε μια σελίδα στο Adobe Muse CC

Image
Image

Αν και έχετε προσθέσει τον κωδικό που θα αναπαράγει τα βίντεο, η Muse εξακολουθεί να μην γνωρίζει πού βρίσκονται αυτά τα βίντεο.

  1. Για να το διορθώσετε, επιλέξτε Αρχείο > Προσθήκη αρχείων για μεταφόρτωση.
  2. Όταν ανοίξει το πλαίσιο διαλόγου Μεταφόρτωση, μεταβείτε στον φάκελο που περιέχει τα βίντεό σας, επιλέξτε τα και κάντε κλικ στο Άνοιγμα.
  3. Για να βεβαιωθείτε ότι έχουν μεταφορτωθεί, ανοίξτε τον πίνακα Στοιχεία,και θα δείτε τα δύο βίντεό σας. Απλώς αφήστε τα στον πίνακα. Δεν χρειάζεται να τοποθετηθούν στη σελίδα.

  4. Για να δοκιμάσετε το έργο, επιλέξτε Αρχείο > Προεπισκόπηση σελίδας στο πρόγραμμα περιήγησης ή, επειδή πρόκειται για μία σελίδα, File > Προεπισκόπηση ιστότοπου στο πρόγραμμα περιήγησης. Το προεπιλεγμένο πρόγραμμα περιήγησής σας θα ανοίξει και το βίντεο θα αναπαραχθεί.
  5. Σε αυτό το σημείο, μπορείτε να χειριστείτε το αρχείο Muse ως μια κανονική ιστοσελίδα και να προσθέσετε περιεχόμενο στην αρχική σελίδα και το βίντεο θα αναπαραχθεί από κάτω.

Πώς να προσθέσετε ένα πλαίσιο αφίσας βίντεο στο Adobe Muse CC

Image
Image

Αυτός είναι ο ιστός για τον οποίο μιλάμε εδώ και, ανάλογα με την ταχύτητα σύνδεσης, υπάρχει μεγάλη πιθανότητα ο χρήστης σας να ανοίξει τη σελίδα και να κοιτάζει σε μια κενή οθόνη κατά τη φόρτωση του βίντεο. Αυτό δεν είναι καλό. Δείτε πώς μπορείτε να αντιμετωπίσετε αυτή τη λιγούρα.

Είναι "Βέλτιστη πρακτική" να συμπεριλάβετε ένα πλαίσιο αφίσας του βίντεο, το οποίο θα εμφανίζεται κατά τη φόρτωση του βίντεο. Αυτό είναι συνήθως ένα στιγμιότυπο οθόνης πλήρους μεγέθους ενός καρέ από το βίντεο.

  1. Για να προσθέσετε το πλαίσιο της αφίσας, κάντε κλικ μία φορά στο Γέμισμα προγράμματος περιήγησης στο επάνω μέρος της σελίδας.
  2. Κάντε κλικ στον σύνδεσμο Σύνδεσμος εικόνας και μεταβείτε στην εικόνα που θα χρησιμοποιηθεί.
  3. Στην περιοχή Fitting, επιλέξτε Scale to Fill και κάντε κλικ στο Κεντρικό σημείο στο την περιοχή Position. Αυτό θα διασφαλίσει ότι η εικόνα θα κλιμακώνεται πάντα από το κέντρο της εικόνας όταν αλλάζει το μέγεθος της θύρας προβολής του προγράμματος περιήγησης. Θα δείτε επίσης την εικόνα να γεμίζει τη σελίδα.
  4. Ένα άλλο μικρό κόλπο είναι να έχετε ένα σταθερό χρώμα γεμίσματος σε περίπτωση που το πλαίσιο της αφίσας αργεί να εμφανιστεί. Για να το κάνετε αυτό, κάντε κλικ στο τσιπ Color για να ανοίξετε το Muse Color Picker. Επιλέξτε το εργαλείο eyedropper και κάντε κλικ σε ένα χρώμα που κυριαρχεί στην εικόνα. Όταν τελειώσετε, κάντε κλικ στη σελίδα για να κλείσετε το πλαίσιο διαλόγου Γέμισμα προγράμματος περιήγησης.
  5. Σε αυτό το σημείο, μπορείτε να αποθηκεύσετε το έργο ή να το δημοσιεύσετε.

    Το τελευταίο μέρος αυτής της σειράς σάς δείχνει πώς να γράψετε τον κώδικα HTML5 που σύρει ένα βίντεο στο φόντο μιας ιστοσελίδας.

Συνιστάται: