Πριν ασχοληθούμε με την πρώτη μας κινούμενη εικόνα, την Bouncing Ball, θα ήθελα πρώτα να κάνω ένα τεχνικό challenge: Ο κείμενος θα σχεδιαστεί με εικόνα, λες και κάποιος τον γράφει με το χέρι του. Το Fig Leaf Rag έχει μια όμορφη εισαγωγή με έμφαση στο τέλος, όπου θα τοποθετήσουμε το τελεία-θαυμαστικό.

Υπάρχουν πολλοί τρόποι που μπορούν να είναι πετυχημένοι ή όχι, ανάλογα με την κατάσταση που έχουμε. Επειδή δουλεύω με γραφικό ταμπλέτ, θα ζωγραφίσω τη γραμματοσειρά και θα σας δείξω πως λειτουργεί η κίνηση. Πριν όμως, θα σας δείξω και πως θα μπορούσαμε να το κάνουμε, αν και δεν είναι η αγαπημένη μου μέθοδος:


Βήματα 1-10

Βήμα 1

Θέλω να αφαιρέσω το επίπεδο με το κείμενο και αντ' αυτού να δημιουργήσω ένα επίπεδο σύνθεσης, ένα κανονικό επίπεδο pixel όπου μπορώ να ζωγραφίσω. Το κείμενο θα πρέπει να βρίσκεται μέσα στο επίπεδο. Έτσι δημιουργώ ένα υπο-σύνθεση με Ctrl+Shift+C ή μέσω του Επίπεδο> Δημιουργία υπο-σύνθεσης. Το ονομάζω "Typo_Intro".

Δημιουργία εύκολης κινούμενης εικόνας: σκιαγραφία

Βήμα 2

Όλα τα χαρακτηριστικά μεταφέρθηκαν, συμπεριλαμβανομένης και της Ταρακουνητής μετατόπιση.

Επειδή δεν το θέλω, κάνω κλικ στην Ταρακουνητής μετατόπιση, πατάω Ctrl+X και το επικολλάω σε μια σύνθεση παραπάνω ("Fig Leaf Rag").

Εύκολη δημιουργία κινούμενων σχεδίων: animation με γραμμές

Βήμα 3

Επιστρέφουμε στην υπο-σύνθεση "Typo_Intro". Εδώ έχουμε απελευθερώσει το κείμενο και μπορούμε να το κινήσουμε. Η πρώτη επιλογή θα ήταν μέσω Μονοπατιών. Παίρνω το Εργαλείο στυλό και σχεδιάζω την πρώτη γραμμή του γράμματος Α στο κείμενο. Στη συνέχεια κάνω pause και κάνω κλικ με το Ctrl- πατημένο κάπου στο μαύρο και έτσι ολοκληρώνω την τρέχουσα διαδρομή, πριν συνεχίσω με τη δεύτερη γραμμή του Α.

Κάνω άλλη μια παύση, κάνω κλικ με το Ctrl- πατημένο στο μαύρο και στη συνέχεια σχεδιάζω την επόμενη γραμμή και έτσι συνεχίζω μέχρι να έχω σχεδιάσει όλο το κείμενο.

Κινούμενα σχέδια εύκολα: σχεδίαση με γραμμές

Βήμα 4

Τώρα εφαρμόζω ένα εφέ. Το βρίσκουμε ως Περίγραμμα στην έκδοση CC μέσα στις Δημιουργία. Στην έκδοση CS6 ονομαζόταν Εφέ γραμμές.

Επιλέγουμε μια μάσκα ή επιλέγουμε το checkbox για Όλες οι μάσκες και μπορούμε έτσι να αφήσουμε τις μάσκες να σχεδιαστούν.

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

Βήμα 5

Απενεργοποιώ τις μάσκες με αυτό το μικρό εικονίδιο και βάφω την διαδρομή κόκκινη. Μπορώ επίσης να αλλάξω το Μέγεθος, αλλά μόνο για όλες τις μάσκες.

Μπορώ να μετακινήσω και να προσαρμόσω τις μεμονωμένες σημεία των μάσκων, ώστε το συνολικό λευκό κείμενο από κάτω να καλύπτεται.

Εύκολη δημιουργία κινούμενων σχεδίων: Ανοιχτή γραμμή

Βήμα 6

Το ωραίο είναι: Εδώ έχω ένα Αρχή- και Τέλος- Slider: Μετακινώ το από αρχής ως τέλους και έτσι μπορώ να αφήσω τον συνολικό κείμενο να σχεδιαστεί.

Λειτουργεί πολύ καλά, αλλά δεν έχεις το ακριβές έλεγχο. Για παράδειγμα, πρέπει πάντα να χρησιμοποιείς το ίδιο πάχος γραμμής, άρα δεν μπορείς να ζωγραφίζεις πιο λεπτά ή πιο παχιά.

Κινούμενα σχέδια εύκολα: Κινούμενη γραμμή



Γι' αυτό θα ήθελα να δείξω μια άλλη μέθοδο, η οποία κατά τη γνώμη μου είναι λίγο ταχύτερη από το να ζωγραφίζεις όλα ξεχωριστά...

Βήμα 7

Προτιμώ σε αυτήν την περίπτωση την πιο γρήγορη μέθοδο με το Πινέλο.

Το Πινέλο δεν μπορεί να εφαρμοστεί σε επίπεδα κειμένου. Πρέπει να δημιουργήσουμε ξανά μια Υπο-σύνθεση και να την ονομάσουμε "Typo_Statisch". Μπορούμε να δουλέψουμε άμεσα σε αυτήν την Υπο-σύνθεση.

Κινούμενα σχέδια εύκολα: Κινούμενα σχέδια με γραμμές

Βήμα 8

Όταν θέλουμε να εργαστούμε με το Πινέλο και διπλό κλικ στη λειτουργία Πινέλο, ανοίγει το πλαίσιο επιπέδων και μόνο εκεί μπορούμε να εργαστούμε με το Πινέλο.

Δημιουργήθηκαν επίσης δύο νέα πάνελ: Πινέλο και Ζωγραφίζω. Στο πάνελ Πινέλο μπορούμε να ρυθμίσουμε το μέγεθος, τη σκληρότητα κλπ. του πινέλου.

Και στο πάνελ Ζωγραφίζω μπορούμε να επιλέξουμε τον τρόπο ζωγραφικής. Αρχικά είναι σταθερό, αλλά το αλλάζω σε Ζωγραφίζω με κίνηση.

Ζωγραφίζω μια γραμμή, μια άλλη και μια ακόμη - αλλά μόλις τελειώσω μια γραμμή, χάνεται περίεργα.

Εύκολη δημιουργία animation: Κινούμενη γραμμή

Βήμα 9

Όταν επιστρέφω στον άλλο καρτελάκι και κινούμαι κατά μήκος της χρονολογίας, βλέπω ότι όλες οι γραμμές είναι εκεί και όλες σχεδιάζονται αυτόματα.

Εύκολη δημιουργία animation: Σχεδίαση με γραμμές

Βήμα 10

Όταν πατάω UU για όλες τις τροποποιημένες ιδιότητες, τότε βλέπουμε εδώ κάτω πολλές υπο-ιδιότητες.

Για κάθε μία εμφανίζονται και η αρχή και το τέλος.

Επιπλέον μπορούμε να τροποποιήσουμε την ξεχωριστή απόσταση, σκληρότητα και ακόμα και τη θέση κάθε γραμμής - ακόμα και μετά τη σχεδίασή της.

Εύκολη δημιουργία κινούμενων σχεδίων: Animation σχεδιασμένο με γραμμές.

Συνεχίζουμε απλά: Βήματα 11-20

Βήμα 11

Διαγράφω ξανά τα πάντα για καλύτερη επισκόπηση.

Σχεδιάζω ξανά μια νέα γραμμή και αν είστε στην προβολή στρωμάτων, τότε βλέπετε το μονοπάτι. Αυτό είναι αυτό που αποθηκεύεται.

Αν η ζωγραφισμένη γραμμή δεν μου αρέσει, τότε μπορώ να τη ζωγραφίσω ξανά, επιλέγοντάς την και απλά ζωγραφίζοντάς τη ξανά. Θα ενημερωθεί και θα αντικατασταθεί απλά.

Εύκολη δημιουργία κινούμενων σχεδίων: animation γραμμής

Βήμα 12

Θέλω επίσης να ξανασχεδιάσω το κείμενο, αυτός είναι ο γρηγορότερος τρόπος για να κάνω κάτι τέτοιο να είναι κινούμενο.

Προσαρμόζω λοιπόν την διάμετρο λίγο και πηγαίνω με το γραφικό ταμπλέτο να σχεδιάσω το κείμενο στο εσωτερικό.

Κινούμενα σχέδια εύκολα φτιαγμένα: Κινούμενα γραμματικά

Βήμα 13

Έχω σχεδιάσει όλες τις γραμμές και όταν παίζουμε ολόκληρο το πλάνο στην χρονολογία, βλέπουμε ότι όλα είναι εκεί.

Όταν πατάω U, έχουμε ξανά όλα τα Keyframes.

Εύκολη δημιουργία animation: γραμμική κινούμενη εικόνα

Βήμα 14

Αν πατήσω το πλήκτρο Ü, εμφανίζεται το παράθυρο πάνω στο οποίο περιστρέφεται προς το παρόν το ποντίκι. Σε αυτή την περίπτωση το χρονόμετρο. Έτσι έχω περισσότερο χώρο και μπορώ να δω καλύτερα τα στοιχεία που ξεχώρισαν. Αυτά τα πηγαίνω λίγο πίσω, ώστε όλα να διαρκούν περίπου το ίδιο χρονικό διάστημα.

Εύκολη δημιουργία κινούμενων σχεδίων: Animation γραμμής

Βήμα 15

Ας το αφήσουμε λοιπόν να παίξει. Επιπλέον: Αν κάποια στιγμή ενεργοποιήσατε ένα λάθος το Caps Lock, τότε το After Effects δεν ενημερώνεται πλέον. Τότε λαμβάνετε την ειδοποίηση Απενεργοποιήστε το Caps Lock για να ανανεώσετε την προβολή.

Όταν το αφήνουμε να παίξει τώρα, το After Effects αρχίζει να ζωγραφίζει όλους τους χαρακτήρες ταυτόχρονα. Θέλω όμως να αρχίσει από μπροστά και να προχωρήσει προς τα πίσω. Και αυτό είναι το σημαντικό. Για να το επιτύχω αυτό ακριβώς όπως θέλω, θα έπρεπε να συγχρονίσω τα πάντα χειροκίνητα - μια γραμμή κάθε φορά. Αυτό απαιτεί αρκετό χρόνο. Θέλω να το κάνω πιο γρήγορα.

Στο επόμενο βήμα θα σας εξηγήσω πώς ακριβώς - πριν όμως επιλέξουμε όλες τις γραμμές.

Εύκολη δημιουργία κινούμενων σχεδίων: κινούμενα σχέδια με γραμμές

Βήμα 16

Γι' αυτό χρησιμοποιώ ένα script που τοποθετεί αυτά τα Keyframes σειριακά.

Αυτό το script το έχω γράψει ο ίδιος και φυσικά σας το παρέδωσα. Το βρίσκετε στο φάκελο Σενάρια με το όνομα Ακολουθία γραμμών. Οποιοσδήποτε γνωρίζει την ταινία "Στρώσεις ακολουθιακά από το After Effects" μπορεί να φανταστεί σε γενικές γραμμές τι κάνει αυτό το script.

Ανοίγω το script στο Extend Script και το εκτελώ.

Εύκολη δημιουργία κινούμενων σχεδίων: Κινούμενη γραμμή

Βήμα 17

Τώρα έχουμε ουσιαστικά μια σκάλα Keyframes και το κείμενο σχεδιάζεται βήμα προς βήμα. Ωστόσο ακόμα αργά.

Πρέπει να το επιταχύνουμε. Γι'αυτό επιλέγουμε όλα, παίρνουμε τον τελευταίο Keyframe που βρίσκουμε, πατάμε το πλήκτρο Alt-και το σύρουμε στα 5 δευτερόλεπτα.

Έτσι έγινε αρκετά πιο γρήγορο.

Εύκολη δημιουργία κινουμένων σχεδίων: ζωγραφιά με γραμμές



Το τελευταίο σημείο πρέπει να καθυστερήσει λίγο ακόμα, αλλά θα ασχοληθούμε με αυτό αμέσως.

Βήμα 18

Θέλω να μιλήσω για την τιμή offset- καθαρίσματος. Επηρεάζει τις μεταβάσεις Keyframe:

Όταν εξετάζουμε τις τρέχουσες μεταβάσεις Keyframe, το επόμενο ξεκινά πάντα ακριβώς εκεί που τελειώνει το προηγούμενο (α).

Αν δεν θέλω αυτό και προτιμώ για παράδειγμα να έχω δύο frames παύσης μεταξύ δύο γραμμών, τότε δίνω στο offset την τιμή 2.

Φυσικά πρέπει πάλι να επιλέξω όλα τα Πινέλα πριν ενεργοποιήσω το script. Με το Ctrl+A μπορώ να τα επιλέξω όλα μαζί.

Εύκολη δημιουργία animation: Κινούμενο σχέδιο



Ή μπορώ να θέλω οι frames να επικαλύπτονται, τότε θέτω την τιμή -2 στο offset. Έτσι θα πήγαινε πάντα δύο frames πίσω από τον πραγματικό. Αν όμως έχει συμπτύξει τόσο γρήγορα όπως εδώ, τότε δεν έχει νόημα. Είμαι ευχαριστημένος και αφήνω το 2.

Βήμα 19

Αυτό που οπωσδήποτε θέλω ακόμη να αλλάξω είναι το timing του θαυμαστικού. Θα ήθελα να το ταιριάξω καλύτερα με τη μουσική.

Γι' αυτό το λόγο χρειάζομαι επίσης τη μουσική στη σύνθεση. Έτσι, πηγαίνω στην επιλογή "Fig Leaf Rag" και αντιγράφω το αρχείο.

Στη συνέχεια, επί το ενδεχόμενο, με Alt-κλικ μπαίνω πάλι στη σύνθεση και το προσθέτω εδώ.

Εύκολη δημιουργία animation: σχεδίαση γραμμών

Βήμα 20

Τώρα βλέπουμε πού βρίσκονται οι δύο θέσεις που χρειαζόμαστε. Για να το κάνω αυτό, χρησιμοποιώ το Num-Pad και πιέζω το πλήκτρο Κόμμα-, για να δημιουργήσω μια προεπισκόπηση. Πιέζω το αστεράκι * στο Num-Pad, για να τοποθετήσω ένα δείκτη. Σε συσκευές χωρίς Num-Pad, ιδίως στο Mac, θα μπορούσε να είναι cmd+Κόμμα για την προεπισκόπηση και cmd+8 για το δείκτη.

Τώρα αφήνω τη μουσική να παίξει και τοποθετώ τους δείκτες ακριβώς στα σημεία όπου πρέπει να έρθει η γραμμή και το τελεία του θαυμαστικού (1). Δηλαδή ακριβώς στους δύο τόνους της μελωδίας.

Έτσι, έχω τοποθετήσει δύο δείκτες: Στον πρώτο, η γραμμή του θαυμαστικού θα πρέπει να είναι έτοιμη και στο δεύτερο η τελεία.

Την γραμμή βοήθειας την τοποθετώ πάνω στον πρώτο δείκτη και μεταβαίνω στη σύνθεση "Typo_Statisch". Εκεί μετακινώ το frame εκείνο προς την γραμμή βοήθειας, που υποδεικνύει τη γραμμή του θαυμαστικού (2).

Κάνω το ίδιο και με τον δεύτερο δείκτη, που υποδεικνύει τη θέση της τελείας: Τοποθετώ την γραμμή βοήθειας στον δείκτη, μεταβαίνω στη σύνθεση και μετακινώ το frame αναλόγως.

Εύκολη δημιουργία κινούμενων σχεδίων: Τρισδιάστατη απεικόνιση

Τα τελευταία βήματα

Βήμα 21

Θα ήθελα να έχω τη γραμμή του θαυμαστικού να ζωγραφίζεται πιο αργά από τη γραφή πριν, ώστε να έχουμε μεγαλύτερο έμφαση στο θαυμαστικό (1).

Και η γραφή να ολοκληρώνεται γρηγορότερα γενικά. Επομένως, επιλέγω ό,τι βρίσκεται πριν (2) και το μετακινώ λίγο μπροστά (3).

Έτσι, το timing είναι τέλειο.

Εύκολη δημιουργία κινούμενων σχεδίων: Κινούμενα πλάνα

Βήμα 22

Έχουμε ζωγραφίσει το κείμενο πάνω στο κείμενο και τώρα θα κάνουμε μια αλλαγή σε αυτό.

Πρώτα αντιγράφω το επίπεδο "Typo_Statisch" και σβήνω τον Ζωγρ.-εφέ.

Κινούμενα σχέδια: Σχεδίαση με γραμμές

Βήμα 23

Στο πάνω επίπεδο έχουμε το ζωγραφισμένο κείμενο με το λευκό πρωτότυπο κάτω από αυτό.

Στο κάτω επίπεδο έχουμε το απλό λευκό κείμενο.

Αν επιλέξουμε το "Ζωγράφισε με διαφάνεια" στο πάνω επίπεδο, τότε θα φαίνονται μόνο οι ζωγραφισμένες κόκκινες γραμμές.

Εύκολη δημιουργία κινούμενων σχεδίων: Σχέδιο γραμμής

Βήμα 24

Έτσι, το πάνω επίπεδο θα χρησιμεύει ως μάσκα για το κάτω.

Αν η μάσκα δεν εμφανίζεται, απλά κάντε κλικ κάτω στο Ενεργοποίηση/απενεργοποίηση λειτουργίας στοιχείων, τότε θα εμφανιστεί η κινούμενη μάσκα BewMas.

Εκεί μπορώ να επιλέξω μια Αλφα μάσκα και να έχω το ακριβώς αποτέλεσμα που χρειάζομαι. Δηλαδή, οπουδήποτε ζωγραφίζονται αυτές οι γραμμές, εκεί είναι ο ορατός πρωτότυπος κείμενος μου.

Εύκολη δημιουργία κινούμενων σχεδίων: Κινούμενα σχέδια με γραμμές



Φαίνεται πως κάτι κινήθηκε κατά λάθος, γιατί απευθείας στην αρχή υπάρχει το Α.

Βήμα 25

Έτσι επιλέγω τώρα όλα τα Πινέλα με μια επιλογή Ορθογωνίου-κελιού από το κάτω προς τα πάνω (1) και μετά αφαιρώ τις δύο καρέκλες του θαυμαστικού με το Shift+επιλογή (2). Οι δύο είναι ήδη τοποθετημένες χρονικά τέλεια.

Έπειτα μετακινούμε το πρώτο καρέκλα αριστερά λίγο, έτσι ώστε το Α να μην είναι ακόμη ορατό στην αρχή.

Τώρα είναι τέλειο.

Εύκολη δημιουργία animations: animation με γραμμές.

Βήμα 26

Αυτό το κάναμε στην υποσύνθεση, εδώ έχουμε το εφέ Ταρακουνητός.

Όταν κοιτάξουμε όλο το πράγμα σε αυτήν τη σύνθεση, δεν έχουμε μόνο σε κίτρινο και το χρώμα αλλάζει, αλλά και δονείται.

Κατασκευάζοντας εύκολα animation: ζωγραφιστή αφήγηση

Βήμα 27

Είναι υπέροχο και ταιριάζει τέλεια, αλλά το χρώμα πρέπει να αλλάξει μετά ή καθόλου ακόμη. Το Αλλαγή Χρωμάτων παραμένει λοιπόν εκτός ενεργοποίησης.

Δημιουργία εύκολα: Κινούμενα σχέδια



Έτσι έχουμε ολοκληρώσει τα πρώτα 4 δευτερόλεπτα του τρέιλερ και θα σας δούμε ξανά στο επόμενο μέρος του οδηγού, για το Bouncing Ball.