Μέρος 2ο (Συγχωνεύοντας Multimedia & Animation)

Transcript

1 Μέρος 2ο (Συγχωνεύοντας Multimedia & Animation) Timeline Menu Timeline Behaviors Animated pop-up menu Προσθήκη video στην ιστοσελίδα Media players Embedding Videos Ιδιότητες embeding video Προσθέτοντας μουσική στην ιστοσελίδα Embedding audio Ορίζοντας εξωτερικούς Editor Μορφοποίηση εικόνων Δουλεύοντας με flash στοιχεία Slideshows με τον Image Viewer Flash buttons Flash Text Ελέγχοντας flash movies

2 A N I M A T I O N Το TIMELINE (modify->timeline)μας δίνει την δυνατότητα να προσθέσουμε, να αλλάξουμε και να διαχειριστούμε animation στο περιβάλλον μας Ακολουθώντας τα βήματα Insert->Layout Objects ->Layer και ορίζοντας την εικόνα που θέλουμε φτιάχνουμε το layer που επιθυμούμε Ο χρήστης μπορεί να εισάγει layers(επίπεδα) μέσω του timeline......καθώς και την πορεία που θα ακολουθήσει το animation

3 TIMELINE MENU Timeline menu: παρέχει την δυνατότητα χρήσης περισσοτέρων του ενός animation στον χρήστη Frame navigator:καθώς τα animation είναι βασισμένα πάνω σε frame, κάθε στιγμή μπορούμε να ορίσουμε την θέση τους καθώς και διάφορες διαδρομές που θα ακολουθήσουν Fps (frame per second): μέσω αυτού μπορούμε να ρυθμίσουμε την ταχύτητα του animation Autoplay: ενεργοποιώντας αυτή την επιλογή το animation θα κάνει αυτόματη εκκίνηση (π.χ κατά το loading μιας ιστοσελίδας) Loop: το animation επαναλαμβάνει την κίνηση που του ορίστηκε Behavior channel: καθώς το animation διέρχεται από ένα frame μπορεί να ορισθεί κάποια αντίστοιχη συμεριφορά (π.χ εμφάνιση pop-up καθώς το animation διέρχεται από το αντίστοιχο frame) Frame: κάθε μικρό τετραγωνάκι που βλέπουμε στο panel του Timeline το οποίο αντιπροσωπεύει ένα σημείο την δεδομένη στιγμή για το animation

4 Timeline with Behaviors Π.χ εισάγοντας ένα κουμπί (Insert -> Form Objects -> Button) και επιλέγοντας Behaviors για αυτό το κουμπί προσθέτουμε μία συμπεριφορά για μία αντίστοιχη ενέργεια (π.χ να ξεκινάει το animation όταν περνάει από πάνω του το ποντίκι) Καθώς προηγουμένως το animation που δημιουργήσαμε στο timeline εκτελούνταν και ο χρήστης δεν μπορούσε να παρέμβει... Στο Dreamweaver μας δίνεται η δυνατότητα να μπορούμε να ελέγξουμε το animation προσθέτοντας διάφορα κουμπιά για λειτουργίες του animation (start,pause etc)

5 Δημιουργώντας ένα animated pop-up μενού Κάνουμε εισαγωγή καινούργιου επιπέδου (π.χ Insert->Layout Objects ->Layer με όνομα management και z-index of 2) Εισάγουμε την εικόνα του management (π.χ management.gif έτσι ώστε να χωράει στο layer που δημιουργήσαμε) Δημιουργούμε ένα ακόμα layer (menu z-index of 1) και το τοποθετούμε κάτω από το προηγούμενο Εισάγουμε τις εικόνες του (π.χ Agnes.gif, Cammy.gif etc) και προσαρμόζουμε το layer έτσι ώστε να τις περικλείει. Tο animation ξεκινά στο frame2 και τελειώνει στο frame 6 Επιλέγουμε το πρώτο keyframe και κάνουμε κλικ στο Menu layer. Χρησιμοποιώντας το πάνω βελάκι δίνουμε την αρχική θέση του animation πίσω από το management. Συνεχίζοντας και αφού επιλέξουμε την εικόνα management μπορούμε να ορίσουμε διάφορες συμπεριφορές της (π.χ όταν περνάμε από πάνω της να ανοίγει το κάτω frame και όταν φεύγουμε να το κλείνει) Αυτό γίνεται μέσω του Modify->Timeline ->Add Behavior to Timeline στο οποίο και θα τις ορίσουμε... Πρώτο layer Δεύτερο layer

6 Προσθέτοντας video στην ιστοσελίδα Στο διαδίκτυο παρέχεται η προσπέλαση σε ένα video μέσω τριών τρόπων: Direct Download Progressive Download Streaming 1.Αν και το πιο εύκολο θα ήταν να παρέχεται στον χρήστη η δυνατότητα download και αναπαραγωγής του video μέσω του σκληρού του δίσκου και ενός player (direct download), αυτό δεν ενδείκνυται στην περίπτωση που επιθυμούμε να διαφυλάξουμε το εκάστοτε video. 2.Σαν δεύτερη μέθοδος (progressive download) προσφέρεται το download του video στον υπολογισή μας προσωρινά (γεγονός που μπορεί και να μην το γνωρίζουμε) και η αναπαραγωγή του αφού τελειώσει. Παρόλα αυτά η μέθοδος αυτή είναι αργή καθώς θα πρέπει να περιμένουμε να γίνει το download για να δούμε το video. 3.Η τελευταία και πλέον διαδεδομένη σε ιστοσελίδες μέθοδος (streaming) είναι αρκετά διαφορετική και πιο περίπλοκη. Ο χρήστης κάνει κλικ πάνω σε ένα αρχείο και τότε εκτελείται μία λειτουργεία (buffering) η οποία κατεβάζει δεδομένα kilobytes από το video. Μόλις αυτή η διαδικασία τελείωσει ο χρήστης μπορεί να δει το κομμάτι που κατέβηκε και αντίστοιχα το video να συνεχίζει να κάνει download το επόμενο κομμάτι προσφέροντας ομοιόμορφο παίξιμο του video. Αυτή η μέθοδος είναι πιο γρήγορη γιατί ο χρήστης δεν περιμένει να κατέβει όλο το video, αλλά η μέθοδος αυτή ιστερεί σε ποιότητα σε σχέση με τις υπόλοιπες. M u l t i m e d i a

7 Media players Για να μπορέσει ο χρήστης να δει το video από το internet θα πρέπει να έχει κάποιον media player ανεξάρτητα από το ποια μέθοδος χρησιμοποιείται στο download του video. οι πιο γνωστοί media player είναι: Real player Quick time Windows media Πρόσφατα διαδεδομένα είναι και τα video τύπου flash (.flv) Το να προστεθεί video σε μια ιστοσελίδα είναι μια απλή μέθοδος: 1. Μπορεί να δημιουργηθεί link (όπως γίνεται ως συνήθως με προορισμό ένα αρχείο video) και ο χρήστης επιλέγοντάς το να το κάνει download (Save as...) ή να το βλέπει σε κάποιο άλλο παράθυρο 2. Μπορεί να προστεθεί το αρχείο (embedding) και απλά ο χρήστης να το βλέπει

8 Embedding Video Αφού ο χρήστης ανοίξει το αρχείο στο οποίο θέλει να εισάγει το video τότε ακολουθεί τα παρακάτω βήματα: Επιλογή Insert -> Media -> Plug-in (Flash video αν θέλουμε να εισάγουμε flash video) Ζητείται από τον χρήστη να εισάγει την ακριβή διαδρομή για το video και να πατήσει OK. Μια πιο απλή μέθοδος είναι ο χρήστης να ανοίξει τον φάκελο που περιλαμβάνεται το αρχείο και μέσω drag & drop να τοποθετήσει το αρχείο μέσα στην σελίδα σχεδίασης στο Dreamweaver. Και οι δύο μέθοδοι δημιουργούν ένα μικρό εικονίδιο (32x32) στον καμβά σχεδίασης του Dreamweaver (μέγεθος το οποίο μπορεί να αλλάξει -επιλέγοντας το εικονίδιο και διαμορφώνοντας το- στο μέγεθος που επιθυμεί ο σχεδιαστής) Τα embedded videos μπορούν να παρεμβάλονται οπουδήποτε στην ιστοσελίδα χωρίς να οδηγούν σε νέα ιστοσελίδα για να τα παρακολουθήσουμε

9 Ιδιότητες embedded video Clip Name: εισάγει όνομα του αρχείου W and H: εισάγοντας αριθμητικές τιμές σε αυτά τα δύο πεδία καθορίζεις το πλάτος και το ύψος του media αρχείου Src:δείχνει όλο το μονοπάτι για το media αρχείο Plg URL:αν ο χρήστης της ιστοσελίδας δεν έχει τον media player που χρειάζεtαι για την αναπαραγωγή του video μπορεί να το βρει σε αυτό το link Align:Επιλογή ρύθμισης για το video και την διάταξη του στην ιστοσελίδα. Αυτόματες επιλογές -> Baseline, Top, Middle, Bottom, TextTop, Absolute Middle, Absolute Bottom, Left, and Right. V and H: Εισαγωγή αριθμητικών τιμών για το περιθώριο που επιθυμεί ο σχεδιαστής γύρω από το αρχείο Border: εισάγει αριθμό (pixels)για την δημιουργία συνόρου έξω από το αρχείο Στην περίπτωση εισαγωγής flash video εμφανίζεται στον χρήστη ένα παράθυρο διαλόγου στο οποίο μπορεί να εισάγει τις ρυθμίσεις του αρχείου (skin, auto play etc)

10 Μουσική στο διαδίκτυο Η μουσική στο διαδίκτυο δεν είναι ένα καινούριο φαινόμενο (μουσική background, download music etc) και σίγουρα είναι κάτι απλό όπως η εισαγωγή εικόνας ή κειμένου. Οι πιο διαδεδομένες φόρμες μουσικής στο σημερινό internet είναι:.aiff,.swf,.mid,.mp3,.mov,.ra,.wav,.wma etc Η εισαγωγή link σε ήχο στην ιστοσελίδα γίνεται το ίδιο απλά με την εισαγωγή video clip. Απλά ο χρήστης δημιουργεί το link και έπειτα καθορίζει την διαδρομή στην οποία βρίσκεται το αρχείο ήχου (ή απλά με drag & drop το εισάγει στον καμβά σχεδίασης του Dreamweaver) Έτσι δίνεται η επιλογή στον χρήστη αφού επιλέξει το link είτε να το ανοίξει με κάποιον media player είτε να τον αποθηκεύσει στον σκληρό του δίσκο. Embedding audio files Με αυτόν τον τρόπο εισαγωγής ήχου γίνεται εφικτό ο χρήστης της ιστοσελίδας να ακούσει τον ήχο χωρίς να χρειαστεί να κάνει download αλλά και να μπορέσει να τον ακούσει όποτε αυτός επιθυμεί και με όποιες παραμέτρους επιθυμεί χωρίς να μπορεί να το αποθηκεύσει. Ακολουθείται η ίδια διαδικασία για την εισαγωγή όπως και σε video (Insert -> Media -> Plug-in και προσδιορισμός της ακριβής διαδρομής του εκάστοτε ήχου) Έτσι εμφανίζεται ένα εικονίδιο στον καμβά το οποίο μπορεί να τροποποιηθεί (μέγεθος κτλ) Αλλάζοντας κάποιες επιλογές (δεξί κλικ στο εικονίδιο και επιλογή properties-> parameters) ο χρήστης μπορεί να κάνει τον ήχο να μην είναι ορατός και να ακούγεται στο παρασκήνιο (κάτι που δεν προτείνεται καθώς μπορεί να γίνει κουραστικό για τον χρήστη)

11 Ορίζοντας εξωτερικούς Editor Αν οι editor οι οποίοι έχουν προεπιλεχθεί για τις διάφορες μορφές αρχείων δεν μας ικανοποιούν τότε μέσα από το Dreamweaver μπορούμε να επιλέξουμε κάποιον άλλον editor για τα αρχεία που μας ενδιαφέρουν. π.χ θα μπορούσαμε την διαχείριση των αρχείων PNG να την κάνουμε με το πρόγραμμα Fireworks. Για να μπορέσουμε να κάνουμε αυτή την αλλάγη ακολουθούμε τα παρακάτω βήματα: Επιλέγοντας Edit ->Preferences και επιλέγοντας την κατηγορία File Types/Editors Στην λίστα με τα file extentions επιλέγουμε το είδος αρχείων το οποίο θέλουμε (PNG file στο παράδειγμα μας) Επιλέγοντας το κουμπί + πάνω από το την επιλογή editors και επιλέγοντας το Path του αρχείου (π.χ C:\Program Files\Macromedia\Fireworks 8\fireworks.exe) ορίζουμε το fireworks να ανοίγει τα αρχεία PNG για μορφοποίηση. Αν περισσότεροι του ενός editor έχουν οριστεί για το συγκεκριμμένο αρχείο τότε στο μενού editors επιλέγουμε την εφαρμογή και έπειτα επιλέγουμε το Make Primary πλήκτρο ακριβώς από πάνω.

12 Μορφοποιώντας εικόνες στο Dreamweaver Προσθέτοντας μια εικόνα στο καμβά σχεδίασης του Dreamweaver μας δίνεται η δυνατότητα επεξεργασίας της Επιλέγοντας edit και αφού έχουμε ορίσει το πρόγραμμα που θα θέλαμε να κάνει την μορφοποίηση (προηγούμενη διαφάνεια) μπορούμε να επεξεργαστούμε πλέον την εικόνα Κάνουμε τις αλλαγές που επιθυμούμε και επιστρέφουμε στον καμβά σχεδίασης του Dreamweaver

13 Δουλεύοντας με flash στοιχεία στο Dreamweaver Στo Dreamweaver μπορείς να δημιουργήσεις μόνο τρία είδους Flash Αρχεία: Slideshows χρησιμοποιώντας το Image Viewer Flash button Flash Text Using Image Viewer O Image Viewer είναι ένα slideshow πρόγραμμα βασισμένο σε flash. Έτσι μπορείς να ορίσεις ένα κομμάτι της ιστοσελίδας στο οποίο θα γίνεται η παρουσίαση των εικόνων. Για να γίνει αυτό πρέπει: 1.Στο αρχείο το οποίο σχεδιάζουμε πατάμε Insert->Media ->Image Viewer 2.Σώζουμε το όνομα του αρχείου που θέλουμε σε.swf 3.To στοιχείο flash του Image Viewer εμφανίζεται στην οθόνη Εξ'ορισμού περιλαμβάνονται παραδείγμτα από εικόνες (imag1.jpg,imag2.jpg...) Για να αλλάξουμε αυτές τις default εικόνες αρκεί να επιλέξουμε το στοιχείο flash και έπειτα το Edit Array Values που βρίσκεται στα δεξιά του πεδίου ImageURLs

14 Δουλεύοντας με flash στοιχεία στο Dreamweaver (Συνέχεια) Αυτή η επιλογή μας εμφανίζει το μενού στο οποίο θα πρέπει να εισάγουμε τα αρχεία εικόνων που θέλουμε να βλέπουμε στο slideshow Το τελικό αποτέλεσμα που βλέπουμε στην ιστοσελίδα μας

15 Δημιουργία flash buttons Το δεύτερο flash στοιχείο που περιλαμβάνεται στο Dreamweaver είναι τα flash buttons. Αυτά μπορούν να δημιουργηθούν εξίσου εύκολα ακολουθώντας τα βήματα: 1.Επιλέγουμε Insert->Media->Flash buttons 2.Στο μενού Style ο χρήστης μπορεί να επιλέξει το στυλ του κουμπιού του 3.Στο button text μπορεί να συμπληρώσει τι θέλει να εμφανίζεται ως κείμενο πανω στο κουμπί 4. Στη Link επιογή μπορεί να δωθεί το που θέλουμε να μας οδηγήσει το κουμπί 5.Στο target μπορούμε να δώσουμε την διάταξη του κουμπιού (αν θα βρίσκεται στο κέντρο κτλ) 6.Μπορούμε να δώσουμε και άλλες ιδιότητες όπως το χρώμα του background, την γραμματοσειρά κ.ά

16 Δουλεύοντας με flash κείμενο Το τελευταίο στοιχεί flash που περιλαμβάνεται στο Dreamweaver είναι το flash κείμενο Δημιουργία flash κειμένου γίνεται το ίδιο απλά όσο και τα flash buttons. 1.Επιλέγουμε Insert->Media->Flash text 2.Στην περιοχή του text εισάγουμε το κείμενο που θέλουμε. 3.Υπάρχουν αρκετές ρυθμίσεις που μπορούμε να κάνουμε στο κείμενο όπως να ορίσουμε την γραμματοσειρά, το μέγεθος, το χρώμα κτλ 4.Με την επιλογή του Link μπορούμε να εισάγουμε την περιοχλη που θέλουμε να μας οδηγήσει 5.Με την επιλογή του target εισάγουμε σε τη διάταξη θέλουμε να βρίσκεται το κείμενο όπως ακριβώς και στα flash buttons

17 Ελέγχοντας flash movies με το Dreamweaver Ανοίγουμε ένα flash video (και του δίνουμε ένα όνομα).εισάγουμε τρία κουμπιά αλλάζοντας τα ονόματα τους σε Play, Stop, Rewind. Aνοίγουμε το panel Behaviors (Window->Behaviors) επιλέγουμε ένα από τα κουμπιά και έπειτα Control Shockwave or Flash behavior μέσω του κουμπιού + στο μενού του Behaviors. Επιλέγουμε την ταινία που θέλουμε να ελέγχουμε και έπειτα επιλέγουμε την αντίστοιχη λειτουργία που θέλουμε να κάνει το αντίστοιχο κουμπί