Δ.Π.Θ. Multimedia - 1 Προσθέτοντας αντικείμενα πολυμέσων.

Παρουσίαση με θέμα: "Δ.Π.Θ. Multimedia - 1 Προσθέτοντας αντικείμενα πολυμέσων."— Μεταγράφημα παρουσίασης:

1 Δ.Π.Θ. Multimedia - 1 Προσθέτοντας αντικείμενα πολυμέσων

2 Δ.Π.Θ. Multimedia - 2

3 Δ.Π.Θ. Multimedia - 3 Όταν προσθέτουμε ένα πολυμεσικό αντικείμενο στη σελίδα, ενώ ο απαιτούμενος ΗΤΜL κώδικας προστίθεται αυτόματα, το παράθυρο του κώδικα (code) δεν εμφανίζει το αντικείμενο το οποίο αναπαρίσταται από ένα γραφικό αντικατάστασης (placeholder). Π.χ. για ένα αντικείμενο flash θα εμφανιστεί το εικονίδιο Μπορούμε να προσαρμόσoυμε τις ιδιότητες των αντικειμένων χρησιμοποιώντας το παράθυρο των ιδιοτήτων (Properties) το οποίο προσφέρει μια μεγάλη ποικιλία εργαλείων ανάλογα με τον τύπο του αντικειμένου το οποίο είναι επιλεγμένο.

4 Δ.Π.Θ. Multimedia - 4 Πρόσθεση εφέ Flash Με την προσάρτηση εφέ Flash κειμένου καθώς και προκατασκευασμένων κουμπιών Flash στο Dreamweaver, μπορούμε να ενσωματώσουμε εφέ Flash απευθείας, χωρίς να χρειάζεται να μάθουμε το Flash για να δημιουργήσουμε το κατάλληλο αντικείμενο. Υπάρχουν δύο τύπων αρχείων που δημιουργεί το Flash: FLA Είναι η μορφή με την οποία αποθηκεύονται οι ταινίες Flash SWF Είναι η μορφή των ταινιών Flash, συμπιεσμένη και βελτιστοποιημένη για προβολή στο διαδίκτυο

5 Δ.Π.Θ. Multimedia - 5 Τα κουμπιά (button) Flash Τα κουμπιά Flash (flash button) είναι εικόνες στις οποίες μπορούμε να έχουμε πρόσβαση κάνοντας κλικ στο εικονίδιο ή εναλλακτικά επιλέγοντας Insert/Media/Flash Button Όταν ένα κουμπί Flash βρεθεί στη θέση του, μπορούμε να το τροποποιήσουμε κάνοντας διπλό κλικ πάνω σε αυτό μπορούμε να διαλέξουμε ένα διαφορετικό στυλ κουμπιού, να αλλάξουμε τη γραμματοσειρά, το μέγεθος, ή το χρώμα φόντου κτλ.

6 Δ.Π.Θ. Multimedia - 6 Το κείμενο Flash Το κείμενο Flash (flash text) είναι εικόνες κειμένου στις οποίες μπορούμε να έχουμε πρόσβαση κάνοντας κλικ στο εικονίδιο ή εναλλακτικά επιλέγοντας Insert/Media/Flash Text Με τη χρήση των ιδιοτήτων (Properties) μπορούμε να προσαρμόσουμε το κείμενο Flash

7 Δ.Π.Θ. Multimedia - 7 Επεξεργασία ήχου Τα αρχεία ήχου μπορούν να ρυθμιστούν έτσι ώστε να αναπαράγονται μόλις κάποιος επισκέπτεται τη σελίδα ή μόλις πατηθεί ένας συγκεκριμένος σύνδεσμος. Η διαδικασία αναπαραγωγής ήχου σε μία ιστοσελίδα απαιτεί την πρόσθεση JavaScript στον κώδικα ΗΤΜL της σελίδας. Το Dreamweaver δημιουργεί αυτόματα αυτόν τον κώδικα (script) της JavaScript. Το εργαλείο που χρησιμοποιείται για την προσθήκη ήχου σε μία σελίδα είναι ο πίνακας συμπεριφορών (Behaviors), ο οποίος εμφανίζεται επιλέγοντας Windows/ Behaviors από τη γραμμή του μενού, ή πατώντας SHIFT-F3

8 Δ.Π.Θ. Multimedia - 8 Υπάρχουν πολλές μορφές αρχείων ήχου αλλά, μερικές από αυτές απαιτούν τα ανάλογα plug-ins και άλλες απαιτούν επιπλέον λογισμικό πέρα από ένα απλό plug- in. Οι επιλογές τύπων αρχείων ήχου είναι: WAV ΜΙDΙ ΜΡ3 AIF RAM, RPM (.ram,.rpm, RealAudio)

9 Δ.Π.Θ. Multimedia - 9 MACROMEDIA FIREWORKS 2004 Με το πρόγραμμα Fireworks της Macromedia μπορούμε να δημιουργήσουμε εντυπωσιακά γραφικά για το διαδίκτυο Το Fireworks υποστηρίζει τόσο bitmap όσο και vector γραφικά Το Fireworks υποστηρίζει όλα τα γνωστά formats αρχείων γραφικών (GIF, JPEG, BMP, TGA) αλλά και αρχεία που έχουν παραχθεί από τα προγράμματα CorelDRAW, Illustrator και Photoshop Το Fireworks χρησιμοποιεί μια δική του μέθοδο αποθήκευσης των αρχείων με κατάληξη PNG

10 Δ.Π.Θ. Multimedia - 10 ΕΡΓΑΛΕΙΑ ΤΟΥ FIREWORKS Toolbox: Περιλαμβάνει τα πιο συχνά χρησιμοποιούμενα εργαλεία Property: Για κάθε αντικείμενο που επιλέγουμε έχουμε ην εμφάνιση διαφορετικών παραμέτρων, που καλύπτουν τις σχεδιαστικές ανάγκες. Layers : Χρησιμοποιείται κυρίως για τη δημιουργία animations, αφού κάθε frame πρέπει να δημιουργηθεί ξεχωριστά, Assets : Εδώ διακρίνουμε τρία (3) πεδία. Στο πεδίο style έχουμε έτοιμα σχήματα τα οποία μπορούνε να μας βοηθήσουνε να φτιάξουμε εύκολα 3D backgrounds και κείμενα με 3D γράμματα. Στο πεδίο Url μπορούμε να βάλουμε στην εικόνα σημεία με διασύνδεση σε άλλες σελίδες του διαδικτύου

11 Δ.Π.Θ. Multimedia - 11 Στο πεδίο library εμφανίζονται τα αντικείμενα που έχουμε δημιουργήσει και τα μεταφέρουμε εύκολα σε άλλες εικόνες Frames and History: Το Frames είναι χρήσιμο για εικόνες GIF που έχουν κίνηση. Το History είναι αρκετά χρήσιμο γιατί εκεί αποθηκεύονται όλες μας οι κινήσεις πάνω στην εικόνα δηλ. τι εργαλεία χρησιμοποιήσαμε, τι αλλαγές κάναμε στην εικόνα κτλ. Optimize : Μέσα από το Optimize μπορούμε να δούμε όλους τους δυνατούς τρόπους αποθήκευσης ταυτόχρονα και να επιλέξουμε όποιον ταιριάζει περισσότερο στις ανάγκες της σελίδας. Αν δημιουργηθεί πρόβλημα κατανόησης της λειτουργίας Export του Fireworks ή δεν μπορούμε να ολοκληρώσουμε τη διαδικασία εξόδου ενός αρχείου, υπάρχει και ο Export Wizard

12 Δ.Π.Θ. Multimedia - 12 Δημιουργία συμβόλου Button Οποιοδήποτε γραφικό μπορεί να γίνει Button επιλέγοντάς το και ακολουθώντας έναν από τους δύο τρόπους: Πατώντας δεξί ‘κλικ’ πάνω του και επιλέγοντας Convert to Symbol στο pop up μενού που εμφανίζεται. Επιλέγοντας Modify/Symbol/Convert to Symbol από το βασικό menu.

13 Δ.Π.Θ. Multimedia - 13 Εξερεύνηση του Χώρου Εργασίας του Flash

14 Δ.Π.Θ. Multimedia - 14 Χρονική Γραμμή (Τimeline) Μια ταινία αποτελείται από ένα σύνολο στρωμάτων (layer) και πλαισίων (frame) Στη πρώτη σειρά του παραθύρου της Χρονικής Γραμμής υπάρχει ο μετρητής της Χρονικής Γραμμής που δείχνει το πλήθος των πλαισίων Η τελευταία σειρά του παραθύρου της Χρονικής Γραμμής περιέχει την κατάστασή της, δηλαδή τον αριθμό του επιλεγμένου πλαισίου, το πλήθος των πλαισίων ανά δευτερόλεπτο και το συνολικό χρόνο της ταινίας

15 Δ.Π.Θ. Multimedia - 15 Σύμβολα και στιγμιότυπα Όταν ένα γραφικό αντικείμενο μετατρέπεται σε σύμβολο (symbol), το Flash αποθηκεύει στη Βιβλιοθήκη (Library) όλες τις σχετικές οδηγίες που χρειάζονται για την αναπαραγωγή του αντικειμένου Κάθε φορά που χρησιμοποιούμε ένα σύμβολο σε μια ταινία, το Flash δημιουργεί ένα στιγμιότυπο του αρχικού Όταν δημιουργούμε ένα σύμβολο, αναθέτουμε σ’ αυτό μια συμπεριφορά. Υπάρχουν τρεις συμπεριφορές συμβόλων που είναι : Γραφικού (Graphic) Κουμπιού (Button) Αποσπάσματος Ταινίας (movie clip)

16 Δ.Π.Θ. Multimedia - 16 Βασικές έννοιες Keyframes, είναι όσα μπορούν να δεχθούν μοναδικό περιεχόμενο και τα διακρίνουμε στο timeline απο την μαύρη τελεία που φέρουν Frames, είναι όσα παίρνουν το περιεχόμενο του προϋπάρχοντος keyframe και δεν έχουν τελεία blank, empty, clear keyframes είναι όσα δεν έχουν περιεχόμενο και είναι λευκά. Όσα έχουν περιεχόμενο είναι χρωματισμένα (με ένα γκρίζο χρώμα)κτλ LIBRARY (Ctrl+L) οτιδήποτε φτιάχνουμε ή κάνουμε import μπαίνει αυτόματα στη library. Εκεί μπορούμε να δούμε και να κάνουμε preview ότι έχουμε φτιάξει Τα αντικείμενα της library τα βάζουμε στο flash με drag&drop. Το τελικό μέγεθος στο flash (swf) αρχείο μας δεν εξαρτάται από το τί υπάρχει στη library αλλά απο το τί από όλα αυτά έχουμε εισάγει στο έργο μας και το τι ποιότητα έχουμε επιλέξει για export και συμπίεση για τον ήχο (άν έχουμε ήχους)

17 Δ.Π.Θ. Multimedia - 17 Buttons Για να δημιουργήσουμε ένα symbol κάνουμε τα εξής : Πηγαίνουμε απο το μενού : Insert/new symbol ή εναλλακτικά με ctrl+F8 Θα εμφανιστεί η εικόνα

18 Δ.Π.Θ. Multimedia - 18

19 Δ.Π.Θ. Multimedia - 19 BUTTONS Με την επιλογή button το Timeline αλλάζει τελείως και γίνεται

20 Δ.Π.Θ. Multimedia - 20 Κάθε button έχει 4 frames Τα up, over, down, hit up : Το αρχικό σχέδιο παρουσίασης Over : Αυτό που θα φαίνεται όταν κάποιος περάσει με το mouse πάνω απο το button Down : Τί θα βλέπει κάποιος όταν κάνει κλίκ πάνω σε ένα button Hit : Αυτό δεν φαίνεται αλλά υπάρχει

21 Δ.Π.Θ. Multimedia - 21 Όταν τελειώσει η εισαγωγή των τεσσάρων frame επιλέγουμε από το Edit το Edit Document για τη δημιουργία τoυ. Για να τοποθετήσουμε το button στη ταινία πατάμε CTL-L για να ανοίξει το Library panel. Στη συνέχεια, σύρουμε ( drag and drop) το Button από το Library panel και το τοποθετούμε στην ταινία μας. Προσοχή, στις διαστάσεις των frame και του Button επειδή η αρχική διάσταση του Button είναι 550x400 pixels. Μπορούμε να σώσουμε το αποτέλεσμα με επέκταση.fla για μελλοντικές αλλαγές και αν θέλουμε να το χρησιμοποιήσουμε σε μια σελίδα πρέπει να το εξάγουμε (File/Export/Export Movie) σε μορφή.swf

22 Δ.Π.Θ. Multimedia - 22 Μπορούμε να κάνουμε insert/layer(s) και σε κάποιο frame να βάλουμε ένα movie clip (πχ στο over frame)