Τεχνολογία Πολυμέσων Ενότητα 9: Behaviors Νικολάου Σπύρος Τμήμα Μηχανικών Πληροφορικής ΤΕ
Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο TEI Δυτικής Μακεδονίας και στην Ανώτατη Εκκλησιαστική Ακαδημία Θεσσαλονίκης» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3
Σκοποί ενότητας Αυτή η ενότητα πραγματεύεται τα behaviors. 4
Περιεχόμενα ενότητας Άσκηση. Βιβλιογραφία. 5
Behaviors
Άσκηση (1/17) Σε αυτή την άσκηση θα δημιουργηθεί μια ταινία στην οποία θα εφαρμοστούν έτοιμες συμπεριφορές (Behaviors) σε ορισμένα είδωλα (sprites) της ταινίας. Στη συνέχεια κάντε τα παρακάτω! 1. Δημιουργήστε μια νέα ταινία με διαστάσεις 640x480. Ορίστε χρώμα φόντου κυανό (#00FFFF). Στοιχίστε την ταινία στο κέντρο. Ορίστε το ρυθμό αναπαραγωγής (tempo) της ταινίας σε 10 fps. 7
Άσκηση (2/17) 2. Δημιουργήστε τους παρακάτω ηθοποιούς: Πίνακας 1: Οι ηθοποιοί. Πηγή: Διδάσκων (2015). Τύπος Περιγραφή Όνομα Χρώμα Ιδιότητες Vector Κόκκινος Κύκλος Circle Κόκκινο Bg. Transparent Text Hello hello Μαύρο Arial 36 στ. Bg. Transparent Text «Όνομά σας» name Μαύρο Arial 36 στ. Bg. Transparent Text ΤΕΙ Δυτικής Μακεδονίας TEI Μπλε Arial 18 στ., Bold, Underlined Bg. Transparent Paint Κόκκινο Τρίγωνο* Red_T Κόκκινο Bg. Transparent Paint Πράσινο Τρίγωνο* Green_T Πράσινο Paint Μπλε Τρίγωνο* Blue_T Μπλε Όλοι οι ηθοποιοί τύπου Paint (τρίγωνα) θα πρέπει να έχουν ακριβώς το ίδιο μέγεθος. 8
Άσκηση (3/17) 3. Τοποθετήστε τους ηθοποιούς στη σκηνή ορίζοντας τα χαρακτηριστικά που παρουσιάζονται πιο κάτω: Πίνακας 2: Τα χαρακτηριστικά τοποθέτησης των ηθοποιών. Πηγή: Διδάσκων (2015). Ηθοποιός Κανάλι Πλαίσια Θέση Μέγεθος Circle 3 1-30 185-400 150x150 hello 1 1-30 111-30 235x44 name 2 1-30 111-100 162x44 TEI 4 1-30 111-170 250x22 Red_T 5 1-30 400-400 150x150 9
Άσκηση (4/17) 4. Αλλάξτε τα registration points των ηθοποιών Circle και Red_T αντίστοιχα, τοποθετώντας τα στη μέση της κάτω πλευράς τους. 5. Kάντε διπλό κλικ στον κύκλο για να ανοίξει το παράθυρο δημιουργίας του κύκλου (vector shape). Εικόνα 1: Το παράθυρο paint στην καρτέλα vector. Πηγή: Διδάσκων (2015). 10
Άσκηση (5/17) 6. Αποθηκεύστε την ταινία με το όνομα «Using_behaviors». 7. Στην συνέχεια θα ορίσετε έτοιμες συμπεριφορές στους ηθοποιούς της ταινίας. Ανοίξτε το παράθυρο της Βιβλιοθήκης (Library) με τις έτοιμες συμπεριφορές, οι οποίες είναι ταξινομημένες σε κατηγορίες. Από το κουμπί επιλογής συμπεριφοράς επιλέξτε την κατηγορία Animation -> Interactive. 11
Άσκηση (6/17) 8. Στο παράθυρο που εμφανίζεται στην οθόνη, παρουσιάζονται οι έτοιμες συμπεριφορές της κατηγορίας που διαλέξατε. Για να εφαρμόσετε μια συμπεριφορά την επιλέγετε και την σύρετε (Drag and Drop) στο είδωλο (sprite), είτε στη σκηνή (stage), είτε στο χρονο-διάδρομο (Score). Εάν έχετε επιλέξει παραπάνω από ένα είδωλα, μπορείτε να εφαρμόσετε ταυτόχρονα σε αυτά την ίδια συμπεριφορά, αφού τη σύρετε (Drag and Drop) από το παράθυρο της Βιβλιοθήκης (Library). 12
Άσκηση (7/17) 9. Επιλέξτε τη συμπεριφορά Rollover Cursor Change και εφαρμόστε την (Drag and Drop) στο είδωλο του ηθοποιού «hello». Στο παράθυρο «Parameters» που θα εμφανιστεί επιλέξτε «hand». Κάντε το ίδιο και για τα είδωλα των υπόλοιπών ηθοποιών τύπου Text της ταινίας. 13
Άσκηση (8/17) 10. Πατήστε το κουμπί αναπαραγωγής και μετακινήστε το ποντίκι πάνω από τους τρεις ηθοποιούς τύπου Text. Θα παρατηρήσετε ότι καθώς μετακινείται το ποντίκι στη σκηνή, πάνω από τους τρεις ηθοποιούς, ο δείκτης του ποντικιού θα αλλάζει στην επιλεγμένη μορφή (χέριhand). Εφαρμόστε τη συμπεριφορά Rollover Cursor Change στο είδωλο του ηθοποιού Red_T επιλέγοντας το δείκτη «Watch». 14
Άσκηση (9/17) 11. Πατήστε το κουμπί αναπαραγωγής και μετακινήστε το ποντίκι πάνω αλλά και δίπλα (εξωτερικά) από τις πλευρές του κόκκινου τριγώνου. Θα παρατηρήσετε ότι ο δείκτης του ποντικιού θα αλλάζει. 12. Αλλάξτε την ιδιότητα μελάνης (Ink) από Background Transparent σε Matte. Επαναλάβετε το Βήμα 11. Ποιά αλλαγή παρατηρείτε; 15
Άσκηση (10/17) 13. Δημιουργήστε ένα δεύτερο κύκλο όμοιο με τον πρώτο αλλά με διαφορετικά χρώματα. Ονομάστε τον ηθοποιό «Circle 2». Από το παράθυρο συμπεριφορών που έχετε ήδη ανοιχτό, (αν το έχετε κλείσει ανοίξτε πάλι το παράθυρο Library, και επιλέξτε την κατηγορία Animation->Interactive). Επιλέξτε τη συμπεριφορά Rollover Member Change και σύρετε την πάνω στον κύκλο, στη σκηνή. Στο παράθυρο «Parameters» επιλέξτε τον ηθοποιό «Circle 2» που μόλις δημιουργήσατε. 16
Άσκηση (11/17) 14. Αποθηκεύστε την ταινία και πατήστε το κουμπί αναπαραγωγής. Στην συνέχεια μετακινήστε το ποντίκι πάνω από τον κύκλο και παρατηρήστε την εναλλαγή ηθοποιών που γίνεται. 15. Από το παράθυρο συμπεριφορών Library επιλέξτε την κατηγορία Animation -> Automatic. Επιλέξτε τη συμπεριφορά Fade In Out και σύρετε την πάνω στον κύκλο, στη σκηνή. Στο παράθυρο «Parameters» επιλέξτε «In» στην 1η παράμετρο κι αφήστε τα υπόλοιπα ως έχουν. Επαναλάβετε το Βήμα 13. 17
Άσκηση (12/17) 16. Με βάση το Βήμα 13, να κάνετε τις κατάλληλες ενέργειες έτσι ώστε να αλλάζει το χρώμα του ηθοποιού «ΤΕΙ» σε magenta (#FF00FF) όταν μετακινείτε το ποντίκι πάνω του. 17. Στη συνέχεια, με επιλεγμένο το είδωλο του ηθοποιού «ΤΕΙ» στο Score, να επιλέξετε την καρτέλα Behavior Inspector που βρίσκεται στο παράθυρο Library. Εντοπίστε και επιλέξτε τη συμπεριφορά Rollover Cursor Change και αλλάξτε το δείκτη του ποντικιού σε «Finger» από το εικονίδιο Parameters. 18
Άσκηση (13/17) 18. Από το παράθυρο συμπεριφορών Library επιλέξτε την κατηγορία Navigation. Επιλέξτε τη συμπεριφορά Go to URL και εφαρμόστε τη πάνω στο είδωλο του ηθοποιού ΤΕΙ, στη σκηνή. Στο παράθυρο «Parameters» που θα εμφανιστεί, στην επιλογή «Destination URL» εισάγετε τη διεύθυνση: http://informatics.teiwm.gr. 19
Άσκηση (14/17) 19. Από το παράθυρο συμπεριφορών Library επιλέξτε την κατηγορία Controls. Επιλέξτε τη συμπεριφορά Push Button και εφαρμόστε την (Drag and Drop) στο είδωλο του ηθοποιού τύπου Paint «Red_T» στη σκηνή. Στο παράθυρο «Parameters» που θα εμφανιστεί να ορίσετε στις τέσσερις πρώτες παραμέτρους τις επιλογές «Red_T», «Green_T», «Blue_T» και «Red_T» αντίστοιχα. 20
Άσκηση (15/17) 20. Πατήστε το κουμπί αναπαραγωγής και μετακινήστε το ποντίκι πάνω από το τρίγωνο. Θα παρατηρήσετε ότι καθώς μετακινείται το ποντίκι πάνω από το τρίγωνο αλλάζει τόσο ο δείκτης του ποντικιού όσο και το χρώμα του τριγώνου (από κόκκινο σε πράσινο). Αν πατήσετε αριστερό κλικ πάνω στο τρίγωνο αλλάζει και πάλι χρώμα (από πράσινο σε μπλε). 21
Άσκηση (16/17) 21. Από το παράθυρο συμπεριφορών Library επιλέξτε την κατηγορία 3D -> Actions. Επιλέξτε τη συμπεριφορά Automatic Model Rotation και προσπαθήστε να την εφαρμόσετε στο είδωλο του ηθοποιού «hello», στη σκηνή. Απαιτείται να έχετε προσαρμόσει κατάλληλα τις ιδιότητες (καρτέλα Properties) του ηθοποιού τύπου Text από Normal σε 3D mode. 22
Άσκηση (17/17) 22. Τροποποιήστε τις παραμέτρους της συμπεριφοράς Fade In Out του Βήματος 15 έτσι ώστε να κάνει απεριόριστο κύκλο επαναλήψεων. 23. Ανοίξτε το παράθυρο Library και επιλέξτε την κατηγορία Navigation. Επιλέξτε τη συμπεριφορά Hold on Current Frame η οποία κρατάει την κεφαλή αναπαραγωγής σε συγκεκριμένο πλαίσιο και σύρετε την στο Score, στο κανάλι εφέ script στο πλαίσιο 30 (ακριβώς πάνω από τη χρονο-μεζούρα). 24. Αποθηκεύστε την ταινία και πατήστε το κουμπί αναπαραγωγής. 23
Σημείωμα Αναφοράς Copyright ΤΕΙ Δυτικής Μακεδονίας, Νικολάου Σπύρος. «Τεχνολογία Πολυμέσων». Έκδοση: 1.0. Κοζάνη 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: 24
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο. που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο. που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο. Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 25
Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς. το Σημείωμα Αδειοδότησης. τη δήλωση Διατήρησης Σημειωμάτων. το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει). μαζί με τους συνοδευόμενους υπερσυνδέσμους. 26
Βιβλιογραφία 1. Τεχνολογία πολυμέσων, Δημητριάδης Σταύρος Ν., Πομπόρτσης Ανδρέας Σ., Τριανταφύλλου Ευάγγελος Γ. 2. Συστήματα Πολυμέσων: Αλγόριθμοι, Πρότυπα και Εφαρμογές, Havaldar P., Medioni G. 3. Πολυμέσα Αναλυτικός Οδηγός, 8η Έκδοση, Tay Vaughan. 4. Τεχνολογία Πολυμέσων και Πολυμεσικές Επικοινωνίες, Γεώργιος Β. Ξηλωμένος, Γεώργιος Κ. Πολύζος. 27
Τέλος Ενότητας