Προσθήκη του βίντεο στο Adobe Muse
Η πολύ ενδιαφέρουσα πτυχή του Adobe Muse είναι ότι σας επιτρέπει να δημιουργείτε ιστοσελίδες χρησιμοποιώντας μια παρόμοια ροή εργασίας με εκείνη που χρησιμοποιείται για τη διαμόρφωση των εκδόσεων. Δεν χρειάζεστε μια βαθιά κατανόηση του κώδικα που δημιουργεί έναν ιστότοπο ή μια σελίδα, αλλά η εξοικείωση με HTML5, CSS και JavaScript δεν θα βλάψει.
Παρόλο που το παραδοσιακό βίντεο web προστίθεται συνήθως μέσω της χρήσης του HTML5 Video API, το Adobe Muse ολοκληρώνει το ίδιο πράγμα με αυτό που ονομάζει "widgets". Τα widgets δημιουργούν το HTML 5 που απαιτείται για συγκεκριμένες εργασίες, αλλά χρησιμοποιούν μια διεπαφή απλής γλώσσας στο Muse για να γράψουν τον κώδικα όταν δημοσιευτεί η σελίδα.
Σε αυτή την άσκηση, πρόκειται να χρησιμοποιήσουμε ένα widget που μπορείτε να το κατεβάσετε δωρεάν από το Muse Resources. Όταν κάνετε λήψη του γραφικού στοιχείου, το μόνο που χρειάζεται να κάνετε είναι να ανοίξετε το αρχείο .zip και να κάνετε διπλό κλικ στο αρχείο .mulib στο φάκελο βίντεο πλήρους οθόνης. Αυτό θα το εγκαταστήσει στο αντίγραφο του Adobe Muse.
Πώς να προετοιμάσετε μια σελίδα για το βίντεο φόντου στο Adobe Muse CC
Με το widget εγκατεστημένο, μπορείτε τώρα να δημιουργήσετε τη σελίδα που θα χρησιμοποιήσει το βίντεο.
Πριν ξεκινήσετε, δημιουργήστε ένα φάκελο για τον ιστότοπό σας Muse. Μέσα σε αυτόν το φάκελο δημιουργήστε έναν άλλο φάκελο - μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ "- και μετακινήστε τις mp4 και webm εκδόσεις του βίντεο σε αυτόν το φάκελο.
Όταν ανοίγετε την επιλογή Muse Αρχείο> Νέα τοποθεσία. Όταν ανοίξει το πλαίσιο διαλόγου Διάταξη επιλέξτε Επιφάνεια εργασίας ως Αρχική διάταξη και να αλλάξετε το Πλάτος σελίδας και Ύψος σελίδας τιμές σε 1200 και 900. Κάντε κλικ Εντάξει.
Κάντε διπλό κλικ στην Κύρια Σελίδα στην προβολή Πλάνου για να ανοίξετε τη Βασική σελίδα. Όταν ανοίγει η κύρια σελίδα, μετακινήστε τους οδηγούς κεφαλίδας και υποσέλιδου στην κορυφή και στο κάτω μέρος της σελίδας. Δεν χρειάζεστε πραγματικά Header και Footer για αυτό το παράδειγμα.
03 του 05Πώς να χρησιμοποιήσετε το Widget οθόνης φόντου πλήρους οθόνης στο Adobe Muse CC
Η χρήση του γραφικού στοιχείου είναι απλή. Το πρώτο πράγμα που πρέπει να κάνετε είναι να επιστρέψετε στην Προβολή προγράμματος επιλέγοντας Προβολή> Λειτουργία σχεδίου. Όταν ανοίξει η προβολή σχεδίου, κάντε διπλό κλικ στο Αρχική σελίδα για να το ανοίξετε.
Ανοίξτε το πλαίσιο της Βιβλιοθήκης - αν δεν είναι ανοιχτό στη δεξιά πλευρά της επιλογής Διεπαφής Παράθυρο> Βιβλιοθήκη - και στρέψτε το MR Πλήρης οθόνη βίντεο ντοσιέ. Σύρετε το γραφικό στοιχείο στο φάκελο στη σελίδα.
Θα παρατηρήσετε το Επιλογές να σας ζητήσω να εισαγάγετε τα ονόματα των εκδόσεων mp4 και webm των βίντεο. Εισαγάγετε τα ονόματα ακριβώς όπως είναι γραμμένα στο φάκελο όπου τα τοποθετήσατε. Ένα μικρό τέχνασμα για να βεβαιωθείτε ότι δεν κάνετε λάθος είναι να αντιγράψετε το όνομα του βίντεο mp4 και να το επικολλήσετε στο MP4 και WEBM περιοχές της περιοχής Μενού επιλογών.
Ένα άλλο τέχνασμα: Αυτό το widget κάνει είναι να γράψετε τον κώδικα HTML 5 για εσάς. Μπορείτε να το πείτε επειδή βλέπετε <> στο γραφικό στοιχείο. Σε αυτήν την περίπτωση, μπορείτε να τοποθετήσετε το widget της ιστοσελίδας στο πακέτο και θα συνεχίσει να λειτουργεί. Με αυτόν τον τρόπο δεν παρεμβαίνει σε κανένα περιεχόμενο που θα τοποθετήσετε στη σελίδα.
04 του 05Πώς να προσθέσετε βίντεο και να δοκιμάσετε μια σελίδα στο Adobe Muse CC
Παρόλο που έχετε προσθέσει τον κώδικα που θα αναπαράγει τα βίντεο, η Muse εξακολουθεί να μην έχει ιδέα για το πού βρίσκονται αυτά τα βίντεο. Για να διορθώσετε αυτό, επιλέξτε Αρχείο> Προσθήκη αρχείων για μεταφόρτωση. Οταν ο Ανεβάστε το παράθυρο διαλόγου ανοίγει περιηγηθείτε στο φάκελο που περιέχει τα βίντεό σας, επιλέξτε τα και κάντε κλικ Ανοιξε. Για να βεβαιωθείτε ότι έχουν μεταφορτωθεί, ανοίξτε το Πίνακας περιουσιακών στοιχείων και θα πρέπει να δείτε τα δύο σας βίντεο. Απλώς αφήστε τα στον πίνακα. Δεν χρειάζεται να τοποθετηθούν στη σελίδα.
Για να ελέγξετε την επιλογή του έργου Αρχείο> Προεπισκόπηση σελίδας στο πρόγραμμα περιήγησης ή, επειδή πρόκειται για μία σελίδα, Αρχείο> Προεπισκόπηση τοποθεσίας στο πρόγραμμα περιήγησης. Το προεπιλεγμένο πρόγραμμα περιήγησης θα ανοίξει και το βίντεο - στην περίπτωσή μου μια τροπική καταιγίδα - θα αρχίσει να παίζει.
Σε αυτό το σημείο, μπορείτε να επεξεργαστείτε το αρχείο Muse ως κανονική ιστοσελίδα και να προσθέσετε περιεχόμενο στην Αρχική σελίδα και το βίντεο θα αναπαραχθεί κάτω από αυτό.
05 του 05Πώς να προσθέσετε ένα πλαίσιο αφίσας βίντεο στο Adobe Muse CC
Αυτός είναι ο ιστός που μιλάμε εδώ και, ανάλογα με την ταχύτητα σύνδεσης, υπάρχει μια καλή πιθανότητα ο χρήστης να ανοίξει τη σελίδα και να κοιτάξει σε κενή οθόνη ενώ φορτώνει το βίντεο. Αυτό δεν είναι καλό. Εδώ είναι πώς να ασχοληθεί με αυτό το κομμάτι της επιδείνωση.
Είναι μια "Βέλτιστη πρακτική" για να συμπεριλάβετε ένα πλαίσιο αφίσας του βίντεο, το οποίο θα εμφανιστεί ενώ φορτώνεται το βίντεο. Αυτό είναι συνήθως ένα στιγμιότυπο οθόνης πλήρους μεγέθους ενός πλαισίου από το βίντεο.
Για να προσθέσετε το πλαίσιο αφίσας, κάντε κλικ μία φορά Φόρτωση με το πρόγραμμα περιήγησης στο επάνω μέρος της σελίδας. Κάντε κλικ στο Σύνδεσμος εικόνας και μεταβείτε στην εικόνα που θέλετε να χρησιμοποιήσετε. Στο Προσαρμογή περιοχή, επιλέξτε Κλίμακα για τη συμπλήρωση και κάντε κλικ στο Κεντρικό σημείο στο Θέση περιοχή. Αυτό θα διασφαλίσει ότι η εικόνα θα κλιμακώνεται πάντα από το κέντρο της εικόνας όταν αλλάζει το μέγεθος του παραθύρου προβολής του προγράμματος περιήγησης. Θα δείτε επίσης ότι η εικόνα συμπληρώνει τη σελίδα.
Ένα άλλο μικρό τέχνασμα είναι τουλάχιστον να έχει ένα στερεό-όχι λευκό-πλήρωση χρώμα μόνο σε περίπτωση που το πλαίσιο αφίσα χρειάζεται λίγο χρόνο για να εμφανιστεί. Για να το κάνετε αυτό, κάντε κλικ στο τσιπ χρώματος για να ανοίξετε το Muse Color Picker. Επιλέξτε το εργαλείο σταγονόμετρου και κάντε κλικ σε ένα κυρίαρχο χρώμα στην εικόνα. Όταν τελειώσετε, κάντε κλικ στη σελίδα για να κλείσετε το παράθυρο διαλόγου Browser Fill.
Σε αυτό το σημείο, μπορείτε να αποθηκεύσετε το έργο ή να το δημοσιεύσετε.
Το τελευταίο μέρος αυτής της σειράς σας δείχνει πώς να γράψετε τον κώδικα HTML5 που προβάλλει ένα βίντεο σε ένα ιστορικό μιας ιστοσελίδας.
