ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Σχεδιοκίνηση με ενδιάμεση παραγωγή κίνησης Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα - Άσκηση Βιβλιογραφία Adobe Creative Team [2007]: Κεφάλαιο 5 Green [2007]: Chapter 7 Kerman [2007]: Chapter 9
Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Εισαγωγή Η δημιουργία σχεδιοκίνησης με την παραδοσιακή μεθοδολογία (πλαίσιο-πλαίσιο) είναι επίπονη επειδή απαιτείται σχεδιασμός του περιεχομένου όλων των πλαισίων (καρέ) Για μια ταινία διάρκειας 3 λεπτών με ρυθμό πλαισίων 12 fps ο δημιουργός θα πρέπει να ορίσει επακριβώς το περιεχόμενο για 3x60x12 = 2160 καρέ. Τα σύγχρονα προγράμματα δημιουργία σχεδιοκίνησης επιτρέπουν την αυτόματη δημιουργία των ενδιάμεσων καρέ εφόσον ορισθεί το περιεχόμενο δυο καρέ Τα καρέ στο οποία ορίζουμε εμείς το περιεχόμενο ονομάζονται πλαίσια κλειδιά (keyframes) Η δημιουργία των ενδιάμεσων καρέ (ανάμεσα στα πλαίσια κλειδιά) ονομάζεται tweening Η δημιουργία ενδιάμεσης κίνησης (classic tweening) είναι η πιο διαδεδομένη μέθοδος δημιουργίας των ενδιάμεσων καρέ Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Δημιουργία ενδιάμεσης κίνησης Για τη δημιουργία ενδιάμεσης κίνησης χρειάζεται: Για κάθε αντικείμενο που πρέπει να μετακινηθεί να οριστεί ένα επίπεδο (layer) Το αντικείμενο πρέπει να οριστεί ως σύμβολο (για την μείωση του μεγέθους του αρχείου) Παρά το όνομα της η δημιουργία ενδιάμεσης κίνησης μπορεί να δημιουργήσει ενδιάμεσες καταστάσεις για: θέση, μέγεθος, κατεύθυνση, χρώμα, παραμόρφωση τα αποτελέσματα εφαρμογής φίλτρων στα αντικείμενα Τα καρέ τα οποία δημιουργούνται αυτόματα δεν πρέπει να τροποποιούνται: Θεωρούνται χώρος ευθύνης του προγράμματος δημιουργίας της σχεδιοκίνησης Για τροποποίηση των αποτελεσμάτων της σχεδιοκίνησης χρειάζεται η εισαγωγή επιπλέον πλαισίων-κλειδιών. Τα πλαίσια κλειδιά είναι η περιοχή ευθύνης του χρήστη (δημιουργού της ταινίας)
Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παράδειγμα Δημιουργήστε ένα νέο αρχείο Flash (Actionscript 3.0): Στο καρέ 1 δημιουργήστε 1 κύκλο (με περίγραμμα 3 pixels μαύρο και εσωτερικό χρώματος μπλε) στο αριστερό μέρος του καρέ και μετατρέψτε το σε σύμβολο (τι κερδίζουμε με την μετατροπή σε σύμβολο;) με το όνομα circle Δημιουργήστε ένα keyframe στο καρέ 30. Μετακινήστε τον κύκλο στα δεξιά του καρέ. Ποια είναι η θέση του κύκλου στο καρέ 28; Δημιουργήστε ενδιάμεση κίνηση στο καρέ 1. Ποια είναι η θέση του κύκλου στο καρέ 14; Τροποποιήστε το μέγεθος, το χρώμα και την παραμόρφωση (skew) του κύκλου στο καρέ 30. Ελέγξτε την ταινία που δημιουργήθηκε. Κάντε τον κύκλο να επανέρχεται σταδιακά στην αρχική του θέση, χρώμα και σχήμα Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παράδειγμα ΙΙ Σε ένα νέο αρχείο: 1. Γράψτε στο όνομα σας στο καρέ 1 και τοποθετήστε κάτω αριστερά. 2. Διασπάστε το σε γράμματα (break apart) 3. Προσθέστε ένα keyframe στο καρέ 30. Αλλάξτε το μέγεθος (ώστε να καλύπτει όλο το σκηνικό), χρώμα, περιστροφή, και παραμόρφωση του ονόματος σας. 4. Δοκιμάστε να δημιουργήσετε ενδιάμεση κίνηση. Τι παρατηρείτε; Παρατηρήστε τη βιβλιοθήκη (library). Ποια σύμβολα έχουν δημιουργηθεί; Επαναλάβετε τα βήματα (1)-(4) αλλά στο βήμα 2 μετατρέψτε το όνομα σας σε σύμβολο αντί να το διασπάσετε σε γράμματα Τι παρατηρείτε;
Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Βελτίωση ενδιάμεσης κίνησης Η δημιουργία ενδιάμεσης κίνησης γίνεται με τρόπο γραμμικό, δηλαδή με ισόποση μεταβολή στις ιδιότητες του αντικειμένου ανάμεσα σε δύο διαδοχικά καρέ: Έστω ότι θέλουμε ένα αντικείμενο να ξεκινά από το αριστερό μέρος του σκηνικού και να καταλήγει στο δεξιό αλλά κινούμενο σε ημικυκλική τροχιά. Για να το πετύχουμε αυτό χρειάζεται είτε να: προσθέσουμε περισσότερα πλαίσια κλειδιά ορίζοντας τις σωστές θέσεις για το αντικείμενο μας σε αυτά Ορίσουμε επακριβώς τη διαδρομή κίνησης μέσω ενός στρώματος «οδηγού κίνησης» (Guide layer) Με τη δεύτερη μέθοδο θα χρειαστούμε συνολικά δύο στρώματα: Στο πρώτο θα ορίζουμε τη διαδρομή κίνησης ως μια καμπύλη χωρίς διασταυρώσεις (γιατί;). Το στρώματα αυτό πρέπει να οριστεί ως Guide Στο δεύτερο που πρέπει να βρίσκεται αμέσως από κάτω από το προηγούμενο θα ορίσουμε την αρχική και τελική θέση του αντικειμένου (οι οποίες πρέπει να συμπίπτουν με την αρχή και τέλος της διαδρομής) Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Η χρήση στρωμάτων για κίνηση πολλαπλών αντικειμένων Στα προγράμματα δημιουργίας στατικού περιεχομένου (Photoshop, Gimp, κοκ) τα στρώματα (layers) ορίζουν την οπτική διαστρωμάτωση (δηλαδή ποιο αντικείμενο βρίσκεται μπροστά και πιο πίσω). Παρόλο που και στα προγράμματα δημιουργίας σχεδιοκίνησης μπορούν να χρησιμοποιηθούν τα στρώματα για τον ίδιο σκοπό η κύρια χρήση τους είναι η διευκόλυνση της δημιουργίας ενδιάμεσης κίνησης για πολλαπλά αντικείμενα Για κάθε αντικείμενο ορίζεται ένα τουλάχιστον στρώμα. Στο στρώμα αυτό καθορίζονται τα πλαίσια κλειδιά που περιγράφουν τη θέση του συγκεκριμένου σε διάφορες χρονικές στιγμές.
Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Επιτάχυνση και επιβράδυνση κίνησης Η κίνηση ενός αντικειμένου σπάνια πραγματοποιείται σε σταθερή ταχύτητα. Για την προσομοίωση της επιτάχυνσης / επιβράδυνσης τα προγράμματα σχεδιοκίνησης παρέχουν ειδικές παραμέτρους στον καθορισμό της κίνησης: Η παράμετρος Ease του Motion Tween χρησιμοποιείται ακριβώς για το σκοπό αυτό. Ease in => Επιταχυνόμενη κίνηση (αρνητικές τιμές) Ease out => Επιβραδυνόμενη κίνηση (θετικές τιμές) Η επιτάχυνση και επιβράδυνση της κίνησης μπορεί να οριστεί με τροποποίηση της σχετικής καμπύλης (Custom Easing) Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παράδειγμα ΙΙΙ Δημιουργήστε ένα νέο αρχείο Flash (Actionscript 3.0): Στο καρέ 1 δημιουργήστε 1 κύκλο στην αριστερή πλευρά του σκηνικού. Μετατρέψτε τον κύκλο σε σύμβολο και ονομάστε το στρώμα στο οποίο εργάζεστε σε «ball» Δημιουργήστε ένα keyframe στο καρέ 30. Μετακινήστε τον κύκλο στα δεξιά του καρέ και παραμορφώστε έτσι ώστε να μοιάζει με μπάλα του μπέιζμπολ. Δημιουργήστε ένα νέο στρώμα (με την επιλογή Add Classic Motion Guide). Ονομάστε το Path. Στο πρώτο καρέ τραβήξτε μια ευθεία γραμμή από αριστερά προς τα δεξιά. Τροποποιήστε τη γραμμή ώστε να μοιάζει με ημικύκλιο. Στα καρέ 1 και 30 αγκιστρώστε την μπάλα στην αρχή και στο τέλος της γραμμής αντίστοιχα Ελέγξτε την ταινία σας.
Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παραδείγματα - άσκηση Δημιουργήστε ένα κύκλο με κίνηση yo-yo (από πάνω προς τα κάτω και ξανά στην αρχική θέση) Δοκιμάστε να κάνετε την κίνηση του κύκλου προς τα κάτω να είναι επιταχυνόμενη και προς τα πάνω επιβραδυνόμενη. Με ποιο τρόπο μπορείτε να το πετύχετε; Επιθυμούμε ο κύκλος με το που ακουμπά κάτω να παραμορφώνεται και αμέσως μετά (πριν ξεκινήσει την άνοδο του) να επανέρχεται στο κανονικό του σχήμα. Τι τροποποιήσεις θα χρειαστεί να κάνουμε; Εισαγωγή Δημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Άσκηση ΙΙ Δημιουργήστε μια ταινία με δύο κύκλους οι οποίοι κινούνται από αριστερά προς τα δεξιά αλλά με διαφορετική ταχύτητα: 1. Μπορείτε να δοκιμάσετε σε κάποιο σημείο οι κύκλοι να επικαλύπτονται 2. Φροντίστε οι κύκλοι να επιστρέφουν στην αρχική τους θέση. Κατά την επιστροφή οι κύκλοι να έχουν αντίστροφη επικάλυψη