Εισαγωγή στη σχεδίαση κινούμενων γραφικών

ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Εισαγωγή στη σχεδίαση κινούμενων γραφικών Νικόλας Τσαπατσούλης Επίκουρος Καθηγητής Τμήμα Επικοινωνίας & Σπουδών Διαδικτύου Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα - Άσκηση Βιβλιογραφία Adobe Creative Team [2007]: Κεφάλαιο Ι Green [2007]: Chapter 1 Kerman [2007]: Chapters 1 & 2

Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Εισαγωγή Η δημιουργία κινούμενου οπτικού περιεχομένου μπορεί να επιτευχθεί: Παραδοσιακές τεχνικές κινηματογράφησης και χρήση επεξεργασίας video για προσθήκη των επιθυμητών effect. Η διαδικασία αυτή εφαρμόζεται κυρίως για δημιουργία διαφημιστικών ταινιών για την τηλεόραση ή /και τον κινηματογράφο. Ενδεικτικά εργαλεία (επεξεργασίας) για το σκοπό αυτό είναι τα: Adobe After Effects και το Adobe Premiere Οι ταινίες που παράγονται αποτελούνται από bitmap καρέ (εικόνες) και επομένως έχουν μεγάλο μέγεθος (σε bytes) Δημιουργία κινούμενο γραφικών απευθείας στο υπολογιστή. Η διαδικασία αυτή εφαρμόζεται κυρίως για τη δημιουργία ταινιών και διαφημιστικών κυρίως για το Διαδίκτυο και τις φορητές συσκευές επικοινωνίας (κινητά τηλέφωνα, PDA κλπ) Κυρίαρχο εργαλείο για το σκοπό αυτό είναι το Adobe Flash CS3 Οι ταινίες που παράγονται αποτελούνται κυρίως από διανυσματικά γραφικά (vector graphics) και επομένως τα καρέ που παράγονται έχουν πολύ μικρό μέγεθος (σε bytes) Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Εφαρμογές Ενδεικτικές εφαρμογές δημιουργίας κινούμενου οπτικού περιεχομένου: Δημιουργία ταινιών κινουμένων σχεδίων Διαφημιστικά φιλμάκια για το Διαδίκτυο (στις ιστοσελίδες) αλλά και τη τηλεόραση Διαδικτυακές εφαρμογές ηλεκτρονικού εμπορίου Παιχνίδια για παιχνιδομηχανές (Playstation, Xbox, κλπ) Εφαρμογές για φορητές συσκευές επικοινωνίας (κινητά τηλέφωνα, PDA κλπ)

Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Κύρια χαρακτηριστικά Το οπτικό περιεχόμενο με κίνηση αποτελείται από τα εξής συστατικά στοιχεία: Γραφικά ή εικόνες (όπως αυτά δημιουργούνται με εργαλεία δημιουργίας στατικού περιεχομένου) Καρέ (frames). Η κίνηση των αντικειμένων επιτυγχάνεται με την αλλαγή των χαρακτηριστικών τους (θέση, κατεύθυνση, μέγεθος, χρώμα) σε διαδοχικές εικόνες (καρέ) οι οποίες προβάλλονται με μικρή καθυστέρηση η μία προς την άλλη Στρώματα (layers) μέσω των οποίων καθορίζεται: Διαφορετική κίνηση για τα αντικείμενα που απαρτίζουν μια σκηνή Η αίσθηση του βάθους με την επικάλυψη αντικειμένων Διαδραστικότητα (απόκριση του συστήματος σε μία ενέργεια του χρήστη) Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Flash CS4 Interface To Flash χρησιμοποιεί αρκετούς όρους αλλά και φιλοσοφία δανεισμένη από την παραγωγή ταινιών (film production): Το αποτέλεσμα της σχεδίασης οπτικού περιεχομένου (στο Flash) ονομάζεται ταινία (movie) Τα διακεκριμένα τμήματα (κυρίως όσον αφορά το νόημα και την εξέλιξη τους στο χρόνο) της ταινίας ονομάζονται σκηνές (scenes) Το περιεχόμενο (τα στοιχεία) τοποθετείται στο σκηνικό (stage) Η κίνηση καθορίζεται από τη γραμμή χρόνου (timeline)

Εισαγωγή Εφαρμογές Κύρια Χαρακτηριστικά Flash CS3 Interface Παραδείγματα Flash CS4 Professional Αρχική σελίδα και δημιουργία ενός αρχείου Flash Πρόσφατα Δημιουργία νέου Πρότυπα εγγράφων ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Σχεδιοκίνηση με πλαίσια κλειδιά

Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα - Άσκηση Βιβλιογραφία Adobe Creative Team [2007]: Κεφάλαιο 5 Green [2007]: Chapter 7 Kerman [2007]: Chapters 7 & 8 Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Εισαγωγή Σχεδιοκίνηση ονομάζουμε την δημιουργία συνθετικού βίντεο (δηλαδή βίντεο το οποίο κατασκευάζεται στον υπολογιστή ή σε διαφάνειες φιλμ) με αντικείμενα τα οποία είναι κατά βάση κατασκευασμένα από τους ανθρώπους Τα κινούμενα σχέδια ήταν η πρώτη μορφή σχεδιοκίνησης: Ο δημιουργός ή σκηνοθέτης σχεδίαζε το περιεχόμενο κάθε σκηνής σε ξεχωριστές διαφάνειες (ή καρέ όπως ονομάζονται σύμφωνα με την ορολογία του κινηματογράφου) Για τη δημιουργία αίσθησης κίνησης χρειάζεται η προβολή των καρέ σε γρήγορο ρυθμό (πολλά καρέ ανά δευτερόλεπτο). Ο ρυθμός αυτός ονομάζεται ρυθμός καρέ (ή ρυθμός πλαισίων). Ο αντίστοιχος όρος στα Αγγλικά είναι frame rate και μετριέται σε frame per second (fps) που σημαίνει καρέ ανά δευτερόλεπτο. Στον κινηματογράφο χρειάζεται προβολή 24 καρέ το δευτερόλεπτο (24 fps), ενώ στην τηλεόραση χρησιμοποιούνται 25 (Ευρώπη) ή 30 (Αμερική) καρέ το δευτερόλεπτο. Σε σχεδιοκίνηση που χρησιμοποιείται σε ιστοσελίδες χρησιμοποιούνται συνήθως 12 καρέ το δευτερόλεπτο.

Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Ρυθμός πλαισίων και ταχύτητα Η αύξηση του ρυθμού πλαισίων δημιουργεί την αίσθηση της ταχύτερης κίνησης Μεγάλος ρυθμός πλαισίων σημαίνει μικρότερη διάρκεια στη ταινία μας Ο εκ προοιμίου (default) ρυθμός πλαισίων που χρησιμοποιεί το Flash είναι 12 fps Παρόλο που μπορεί να χρησιμοποιηθεί οποιοσδήποτε ρυθμός πλαισίων πρακτικά o μέγιστος ρυθμός πλαισίων που συναντούμε στην πράξη είναι 36 Μεγάλος ρυθμός πλαισίων μπορεί να οδηγήσει το Flash σε αδυναμία αναπαραγωγής της σχεδιοκίνησης λόγω: Περιορισμένων δυνατοτήτων του υπολογιστή στον οποίο προβάλλεται η σχεδιοκίνηση Πολλών και σύνθετων αντικειμένων που υπάρχουν στη ταινία μας Συνίσταται η χρήση ρυθμού πλαισίων μικρότερου από 24 fps Αν χρειάζεται αύξηση της ταχύτητας της κίνησης μπορούν να χρησιμοποιηθούν μεγαλύτερες μετακινήσεις μεταβολές των αντικειμένων ανάμεσα σε διαδοχικά καρέ. Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Παράδειγμα Χρησιμοποιείστε το αρχείο keyframing.fla ( www.phillipkerman.com/teachyourself/) και δοκιμάστε να: Αναγνωρίσετε τα διάφορα αντικείμενα που υπάρχουν Βρείτε που εμφανίζεται το κάθε ένα από αυτά Βρείτε σε ποια σημεία υπάρχουν πλαίσια κλειδιά (keyframes) Βρείτε το ρυθμό πλαισίων Υπολογίσετε το χρόνο που έχει παρέλθει από την εκτέλεση της ταινίας όταν βρισκόμαστε στο καρέ με αριθμό 8 Αναπαράγετε την ταινία με ρυθμό πλαισίων 6 fps και 24 fps αντίστοιχα

Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Παραδοσιακή μέθοδος σχεδιοκίνησης Η παραδοσιακή μέθοδος σχεδιοκίνησης (frame by frame animation ή brute force animation) ορίζει σαφώς το περιεχόμενο όλων των καρέ: Εφαρμοζόταν στις ταινίες κινουμένων σχεδίων πριν από την εμφάνιση των υπολογιστών Χρησιμοποιείται και σήμερα όταν θέλουμε να απεικονίσουμε σύνθετη και λεπτομερή κίνηση η οποία δεν μπορεί να προσεγγιστεί αυτόματα από τον υπολογιστή (π.χ. βάδισμα ανθρώπων) Σε αντιδιαστολή με την παραδοσιακή μέθοδο σχεδιοκίνησης τα σύγχρονα προγράμματα κινούμενων γραφικών υπολογίζουν την ενδιάμεση κίνηση ανάμεσα σε δύο keyframes: Η μεθοδολογία αυτή ονομάζεται tweening (η λέξη tween προέρχεται από το between) Υπάρχουν δύο διαφορετικές μεθοδολογίες tweening: Motion tweening (παραγωγή ενδιάμεσων καταστάσεων ενός αντικειμένου που αφορούν τη θέση, κατεύθυνση, παραμόρφωση, χρώμα και μέγεθος) Shape tweening (παραγωγή ενδιάμεσων καταστάσεων ενός αντικειμένου που αφορούν το σχήμα του) Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Παράδειγμα ΙΙ Χρησιμοποιείστε το αρχείο p174_task.fla ( www.phillipkerman.com/teachyourself/) και δοκιμάστε να: Προσθέσετε ένα ακόμη καρέ το οποίο να είναι ίδιο με το 2ο Δώσετε κλίση στο σώμα της φιγούρας (stick) συνολικά Δώσετε καμπύλη στο δεξί χέρι της φιγούρας Ενεργοποιήσετε το Onion Skin Κάνετε προεπισκόπηση (preview) των καρέ Μετακινήσετε τη φιγούρα σε όλα καρέ προς τα δεξιά κατά 35 pixels

Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Βελτίωση παραδοσιακής σχεδιοκίνησης Η αποτελεσματικότητα της παραδοσιακή μεθόδου σχεδιοκίνησης μπορεί να βελτιωθεί εισάγοντας παύσεις και δημιουργώντας οφθαλμαπάτες: Με τον όρο βελτίωση αναφερόμαστε στην ελαχιστοποίηση των καρέ τα οποία χρειάζεται να σχεδιάσουμε για να επιτευχθεί η αίσθηση της κίνησης Παύση ονομάζουμε τη εισαγωγή καρέ τα οποία είναι ακριβώς ίδια με τα προηγούμενα τους. Στην ουσία μας δηλώνουν ότι δεν υπάρχει μεταβολή στη θέση και τις άλλες ιδιότητες του αντικειμένου από το προηγούμενο καρέ Η οφθαλμαπάτη βασίζεται στη λογική «σημασία δεν έχει τι βλέπεις αλλά τι νομίζεις ότι βλέπεις». Επομένως ακόμη και αν δεν υπάρχει σαφής αναπαραγωγή της κίνησης με κάποια τεχνική tweening το μάτι στην ουσία την συμπληρώνει από μόνο του Για να εφαρμοστεί η τεχνική αυτή χρειάζεται να υπάρχουν τουλάχιστον δύο καρέ κλειδιά (keyframes) με μια σχετικά μεγάλη παύση μεταξύ τους (π.χ 5 frames) και στα αντικείμενα που υπάρχουν στα καρέ να υπάρχει σημαντική διαφοροποίηση ως προς τη θέση και το μέγεθος Εισαγωγή Ρυθμός πλαισίων και ταχύτητα Παραδοσιακή μέθοδος σχεδιοκίνησης Βελτίωση παραδοσιακής σχεδιοκίνησης Παραδείγματα Παραδείγματα - άσκηση Χρησιμοποιείστε το αρχείο p174_task.fla ( www.phillipkerman.com/teachyourself/) και δοκιμάστε να: Προσθέσετε μια μπάλα στο πρώτο καρέ κοντά στο δεξί πόδι της φιγούρας Κατασκευάστε ακόμη δύο καρέ κλειδιά (4 και 10) στα οποία να φαίνεται ότι η φιγούρα χτυπά τη μπάλα η οποία απομακρύνεται Ρυθμίστε κατάλληλα τις παύσεις ώστε το αποτέλεσμα σας να είναι όσο το δυνατό πιο πειστικό