Τεχνολογία Πολυμέσων Ενότητα 7: Εξάσκηση στην ανάπτυξη animation Νικολάου Σπύρος Τμήμα Μηχανικών Πληροφορικής ΤΕ
Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο TEI Δυτικής Μακεδονίας και στην Ανώτατη Εκκλησιαστική Ακαδημία Θεσσαλονίκης» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3
Σκοποί ενότητας Σε αυτή την ενότητα πραγματοποιείται εξάσκηση στην ανάπτυξη animation. 4
Περιεχόμενα ενότητας Άσκηση. Βιβλιογραφία. 5
Εξάσκιση στο animation
Άσκηση (1/13) Δημιουργήστε νέα ταινία με διαστάσεις σκηνής 500x400 pixels, χρώμα φόντου μαύρο, στοίχιση στο κέντρο και Tempo: 15 fps. Στη συνέχεια κάντε τα παρακάτω! 1. Δημιουργήστε τον ηθοποιό τύπου Text «Pacman» κίτρινου χρώματος, με γραμματοσειρά μεγέθους 48 στ., στυλ έντονα και πλάγια. 2. Δημιουργήστε το διάδρομο του Pacman χρησιμοποιώντας την επιλογή Paint από το μενού Window. 7
Άσκηση (2/13) 3. Δημιουργήστε τον ηθοποιό Ball, πορτοκαλί χρώματος και με διαστάσεις 10x10 pixels, χρησιμοποιώντας την επιλογή Vector Shape από το μενού Window. 4. Δημιουργήστε τον bitmap ηθοποιό Pacman χρησιμοποιώντας την επιλογή Paint από το μενού Window και δώστε του το όνομα P1. Ο ηθοποιός Pacman είναι ένας κίτρινος κύκλος με κόκκινο κυκλάκι για μάτι και ένα τριγωνικό σχεδόν κλειστό στόμα στη δεξιά πλευρά του. 8
Άσκηση (3/13) 5. Αντιγράψτε τον ηθοποιό P1 σε νέο bitmap περιστρέφοντας το κατά 90 μοίρες προς τα κάτω και δεξιά και δώστε του το όνομα P1_down. 6. Αντιγράψτε τον ηθοποιό P1 σε νέο bitmap δημιουργώντας ένα τριγωνικό μεγαλύτερο στόμα στη δεξιά πλευρά του και δώστε του το όνομα P2. 7. Αντιγράψτε τον ηθοποιό P2 σε νέο bitmap περιστρέφοντας το κατά 90 μοίρες προς τα κάτω και δεξιά και δώστε του το όνομα P2_down. 9
Άσκηση (4/13) 8. Τοποθετήστε στη σκηνή το είδωλο του ηθοποιού text «Pacman», στη θέση Χ:150, Υ:20. Εφαρμόστε κατάλληλη τεχνική έτσι ώστε να αναβοσβήνει περιοδικά. 9. Τοποθετήστε στη σκηνή το είδωλο του διαδρόμου του Pacman, στη θέση Χ:250, Υ:250. 10. Τοποθετήστε στη σκηνή 12 είδωλα του ηθοποιού Ball, ξεκινώντας το πρώτο από τη θέση X:50 και τα υπόλοιπα σε απόσταση 50 pixels μεταξύ τους. Καθορίστε τη διάρκεια του καθενός από αυτά έτσι ώστε να συγχρονιστεί με τη διέλευση του ηθοποιού Pacman πάνω από αυτά. 10
Άσκηση (5/13) 11. Τοποθετήστε το είδωλο του ηθοποιού Pacman (P1) στη σκηνή, έτσι ώστε να ξεκινάει από την αριστερή πλευρά της αρχής του διαδρόμου. Προσαρμόστε κατάλληλα τις διαστάσεις του ηθοποιού Pacman (P1) ανάλογα με το μέγεθος του διαδρόμου, π.χ. 40x40 pixels. Ο ηθοποιός P1 θα καταλαμβάνει τα πλαίσια από 1 έως 100. 11
Άσκηση (6/13) 12. Τοποθετήστε Keyframes στα κατάλληλα σημεία κάνοντας δεξί κλικ πάνω στο είδωλο του ηθοποιού Pacman (P1) που βρίσκεται στο Score κι επιλέγοντας Insert Keyframe. Μετακινώντας τις θέσεις των Keyframes μπορείτε να κάνετε τις απαραίτητες διορθώσεις παρατηρώντας την αντίστοιχη κίνηση του ηθοποιού Pacman πάνω στον διάδρομο στη σκηνή. 12
Άσκηση (7/13) 13. Ευθυγραμμίστε την κίνηση του ηθοποιού Pacman. Για να γίνει αυτό επιλέγουμε το είδωλο του ηθοποιού Pacman στο Score και από το μενού Modify->Sprite->Tweening μετακινούμε το δείκτη της καμπυλότητας (curvature) στη θέση Linear. 14. Τον ηθοποιό Pacman_Ghost θα τον κατεβάσετε μέσω οποιουδήποτε web browser από το URL: http://img196.imageshack.us/img196/5586/shaman2red12 8.png αποθηκεύοντας τον ως Pacman_Ghost.png Στη συνέχεια από το μενού File->Import θα εισάγετε το αρχείο εικόνας Pacman_Ghost.png στο Cast (Internal). 13
Άσκηση (8/13) 15. Τοποθετήστε το είδωλο του ηθοποιού Pacman_Ghost στη σκηνή, έτσι ώστε να ξεκινάει από την αριστερή πλευρά της αρχής του διαδρόμου. Προσαρμόστε κατάλληλα τις διαστάσεις του ηθοποιού Pacman_Ghost ανάλογα με το μέγεθος του διαδρόμου, π.χ. 40x40 pixels. Ο ηθοποιός Pacman_Ghost θα καταλαμβάνει τα πλαίσια από 20 έως 100. 14
Άσκηση (9/13) 16. Τοποθετήστε Keyframes στα κατάλληλα σημεία στο είδωλο του ηθοποιού Pacman_Ghost που βρίσκεται στο Score. Μετακινώντας τις θέσεις των Keyframes μπορείτε να κάνετε τις απαραίτητες διορθώσεις. Παρατηρώντας την αντίστοιχη κίνηση του ηθοποιού Pacman πάνω στον διάδρομο στη σκηνή. 15
Άσκηση (10/13) 17. Ευθυγραμμίστε την κίνηση του ηθοποιού Pacman_Ghost. 18. Για να ανοιγοκλείνει το στόμα του ηθοποιού Pacman θα πρέπει να εφαρμόσετε την τεχνική Exchange Cast Members. Αυτό γίνεται κάνοντας δεξί κλικ πάνω στο είδωλο του ηθοποιού Pacman (P1) που βρίσκεται στο Score κι επιλέγοντας Edit Sprite Frames. Παρατηρήστε ότι το είδωλο του ηθοποιού Pacman (P1) έχει διαχωριστεί στα επιμέρους 100 πλαίσια από τα οποία αποτελείται. 16
Άσκηση (11/13) 19. Με πατημένο διαρκώς το πλήκτρο Ctrl μπορείτε να επιλέξετε π.χ. τα μονά πλαίσια και να τα αντικαταστήσετε με τον ηθοποιό Pacman (P2) επιλέγοντας τον από το Cast και στη συνέχεια από το μενού Edit -> Exchange Cast Members. Πειραματιστείτε παρομοίως και για την κάθετη κίνηση του ηθοποιού Pacman. Για βοήθεια ανατρέξτε στα ακόλουθα URL links: http://help.adobe.com/en_us/director/11.5/usingscripting/ws cf09ce35f85d76b41995180e11d55853b1f-7fac.html. http://help.adobe.com/en_us/director/11.5/usingscripting/ws cf09ce35f85d76b423a0ae0011d55853d04-7ff9.html. 17
Άσκηση (12/13) 20.Όταν ολοκληρώσετε τη διαδικασία Exchange Cast Members να επιλέξετε το πρώτο και το τελευταίο πλαίσιο του ειδώλου του ηθοποιού Pacman που βρίσκεται στο Score κρατώντας πατημένο το πλήκτρο Shift. Παρατηρήστε ότι έχουν επιλεγεί και τα 100 επιμέρους πλαίσια από τα οποία αποτελείται o ηθοποιός Pacman. 18
Άσκηση (13/13) 21. Κάνοντας δεξί κλικ πάνω στο είδωλο του, επιλέξτε Edit Entire Sprite. Παρατηρήστε ότι πλέον συνενώθηκαν και τα 100 επιμέρους πλαίσια από τα οποία αποτελείται o ηθοποιός Pacman. 22. Αναπαράγετε την ταινία για να δείτε το τελικό αποτέλεσμα και αποθηκεύστε την ολοκληρωμένη ταινία με το όνομα αρχείου pacman.dir. 19
Σημείωμα Αναφοράς Copyright ΤΕΙ Δυτικής Μακεδονίας, Νικολάου Σπύρος. «Τεχνολογία Πολυμέσων». Έκδοση: 1.0. Κοζάνη 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: 20
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο. που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο. που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο. Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 21
Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς. το Σημείωμα Αδειοδότησης. τη δήλωση Διατήρησης Σημειωμάτων. το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει). μαζί με τους συνοδευόμενους υπερσυνδέσμους. 22
Βιβλιογραφία 1. Τεχνολογία πολυμέσων, Δημητριάδης Σταύρος Ν., Πομπόρτσης Ανδρέας Σ., Τριανταφύλλου Ευάγγελος Γ. 2. Συστήματα Πολυμέσων: Αλγόριθμοι, Πρότυπα και Εφαρμογές, Havaldar P., Medioni G. 3. Πολυμέσα Αναλυτικός Οδηγός, 8η Έκδοση, Tay Vaughan. 4. Τεχνολογία Πολυμέσων και Πολυμεσικές Επικοινωνίες, Γεώργιος Β. Ξηλωμένος, Γεώργιος Κ. Πολύζος. 23
Τέλος Ενότητας