Μετατρέποντας το Timeline Animation σε Animation με κώδικα στο Flash CS3
Το Flash CS3 είναι ένα εργαλείο που το χρησιμοποιούν τόσο οι Web Designers (για animations), όσο και οι Web Developers ή Action Scripters (για ανάπτυξη εφαρμογών). Οι δύο αυτές ομάδες αν και χρησιμοποιούν το ίδιο εργαλείο με κοινούς στόχους (τη δημιουργία ενός project) συνήθως χρησιμοποιούν διαφορετικές μεθόδους.
Από τη μια πλευρά, οι Web Designers, επειδή είναι οπτικοί τύποι, δημιουργούν animations με τη χρήση του Timeline και παραδίδουν το αποτέλεσμα στους Web Developers για να το χειριστούν με κώδικα. Από την άλλη όμως, οι Web Developers θα λέγαμε ότι δυσκολεύονται ιδιαίτερα στο να αναπτύξουν με κώδικα το animation που έχει δημιουργηθεί με αυτό το εργαλείο.
Το Flash CS3 έρχεται με μια λειτουργία που επιχειρεί να γεφυρώσει αυτή την διαφορά “απόψεων” και να προσφέρει και στις 2 ομάδες αυτό που θέλουν με τον τρόπο που θέλουν. Η λειτουργία αυτή ονομάζεται “Copy Motion as ActionScript 3.0” και από το όνομά της είναι ξεκάθαρο ότι μπορεί να χρησιμοποιηθεί μονάχα αν το αρχείο που χρησιμοποιείται είναι AS3 Flash file. Σε αυτό το άρθρο θα δείτε πώς μπορείτε να εκτελέσετε αυτή τη λειτουργία, μετατρέποντας ένα Timeline Animation (Σειριακή κίνηση με καρέ) σε Codebased Animation (κίνηση με κώδικα) AS3.
Βήμα 1ο (Δημιουργία ενός AS3 Flash αρχείο)
Ανοίξτε το Flash CS3 και στην αρχική οθόνη όπου σας δίνονται πολλές επιλογές χωρισμένες σε 3 στήλες, επιλέξτε από την στήλη Create New την πρώτη επιλογή που ονομάζεται “Flash File (ActionScript 3.0)”. Κάνοντας αυτή την επιλογή θα έχετε δώσει εντολή στο Flash CS3 να δημιουργήσει ένα Flash αρχείο που να υποστηρίζει την ActionScript 3.0 και όχι την προηγούμενή της έκδοση, την ActionScript 2.0. Στο πάνελ των ιδιοτήτων (Properties), πατήστε το κουμπί μεγέθους (Size) για να ανοίξετε τις ιδιότητες του αρχείου. Συντονίστε τον ρυθμό αναπαραγωγής (Frame Rate) στα 30fps, χρωματίστε μαύρο το background, καθορίστε το πλάτος (Width) στα 800px και το ύψος (Height) στα 600px και πατήστε ΟΚ. Κάντε διπλό κλικ στο πρώτο layer στο Timeline, μετονομάστε το σε Actions, και μετά κλειδώστε το.
Βήμα 2ο (Εισαγωγή γραφικού)
Κάντε κλικ στο κουμπί εισαγωγής Layer (Insert Layer) για να δημιουργήσετε ένα καινούργιο layer. Ονομάστε το “phone”. Σε αυτό το Layer θα τοποθετηθεί το γραφικό του τηλεφώνου. Έχοντας επιλεγμένο το πρώτο καρέ (Keyframe), πατήστε Ctrl-R για PC ή Command-R για Mac για να ανοίξετε το pop up της εισαγωγής εξωτερικού αρχείου (Import). Επιλέξτε το αρχείο που θέλετε να εισάγετε – στην περίπτωσή μας το τηλέφωνο – και πατήστε Import. Επιλέξτε το νέο εισαγόμενο γραφικό σας στην κεντρική οθόνη ή σκηνή (Stage) και πατήστε το F8 για να μετατρέψετε το γραφικό σε σύμβολο (Symbol). Όταν ανοίξει το pop up επιλέξτε Movie Clip, ονομάστε το “phoneClip” και πατήστε ΟΚ. Στην συνέχεια επιλέξτε το Movie Clip και ονομάστε το στιγμιαίο αντίγραφό (Instance) του, “phone” από το πάνελ ιδιοτήτων (Properties).
Βήμα 3ο (Ρυθμίζοντας το Timeline)
Το επόμενο βήμα είναι να προσθέσετε μερικά frames στο Timeline ώστε να υπάρχει χώρος να εξελιχθεί το animation. Για να το πετύχετε αυτό, επιλέξτε το frame 30 και στα 2 layers κάνοντας κλικ και κρατώντας πατημένο το κουμπί του ποντικιού (click and drag) μέχρι να επιλεχθούν και τα 2 frames των 2 layers. Αφού επιλέξετε και τα 2 frames πατήστε F5 για να προσθέσετε τα καινούργια frames. Επιλέξτε το frame 1 στο phone layer. Θα φτιάξετε ένα animation το οποίο θα δείχνει το τηλέφωνο να μπαίνει από αριστερά προς τα δεξιά και στη συνέχεια να μεγαλώνει σε μέγεθος. Στο πάνελ των ιδιοτήτων (Properties) τοποθετήστε το (x) του Movie Clip σε 360. Πηγαίνετε στο πάνελ της μεταβολής (Transform panel) πατώντας Window>Transform και κάντε το μέγεθος του movie clip 50% τόσο στον άξονα του x, όσο και στον άξονα του y.
Βήμα 4ο (Από αριστερά προς τα δεξιά)
Επιλέξτε το frame 12 στο layer του τηλεφώνου και πατήστε το κουμπί F6 στο πληκτρολόγιό σας για να εισάγετε ένα καινούργιο keyframe. Στη συνέχεια επιλέξτε το phone clip και τοποθετήστε το στη θέση x=159. Κάντε δεξί κλικ (PC) ή Ctrl-κλικ (Mac) ενδιάμεσα στα 2 keyframes στο επίπεδο (layer) που βρίσκεται το τηλέφωνο και επιλέξτε την εντολή Create Motion Tween (Δημιουργία κίνησης). Στο πάνελ των ιδιοτήτων (Properties) μετακινήστε το ease slider στο 100. Στην συνέχεια επιλέξτε το πρώτο keyframe στο layer του τηλεφώνου και μετά επιλέξτε το movie clip του τηλεφώνου που βρίσκεται στη σκηνή του Flash. Ανοίξτε το πάνελ των φίλτρων (Filters panel) και κάντε κλικ στο (+) που βρίσκεται στο πάνω αριστερό μέρος του πάνελ. Όταν ανοίξει το μενού, επιλέξτε Blur (Θαμπάδα) και ρυθμίστε τις παραμέτρους σε X=100 και Y=0.
Βήμα 5ο (Η παύση)
Δοκιμάστε την ταινία σας πατώντας Ctrl-Enter (PC) ή Command-Return (Mac). Αν όλα έχουν γίνει σωστά, θα δείτε μια κίνηση του τηλεφώνου από αριστερά προς τα δεξιά. Στην συνέχεια θα επιλέξετε το Frame 16 στο layer που βρίσκεται το τηλέφωνο και θα πατήσετε F6 για να δημιουργήσετε σε αυτό το σημείο ένα καινούργιο keyframe. Σκοπός είναι να δημιουργηθεί μια στιγμιαία παύση στην κίνηση του τηλεφώνου. Η παύση αυτή θα δημιουργηθεί με την δημιουργία των 4 κοινών keyframes στο σημείο πριν αρχίσει να εξελίσσεται η κίνηση, όπως φαίνεται και στην εικόνα.
Βήμα 6ο (Αλλαγή μεγέθους)
Επιλέξτε το frame 30 στο layer που βρίσκεται το τηλέφωνο και πατήστε F6 για να δημιουργήσετε ένα καινούργιο keyframe. Στην συνέχεια επιλέξτε το movie clip του τηλεφώνου πάνω στην σκηνή, ανοίξτε το πάνελ Transform και καθορίστε το μέγεθος και για τους δυο άξονες στο 100%. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) ενδιάμεσα στα keyframes 16 και 30 στο επίπεδο (layer) που βρίσκεται το τηλέφωνο και επιλέξτε την εντολή Create Motion Tween (Δημιουργία κίνησης). Στο πάνελ των ιδιοτήτων (Properties) μετακινήστε το ease slider στο 100. Επιλέξτε το frame 23 και εισάγετε άλλο ένα keyframe. Από το πάνελ των φίλτρων (Filters panel) επιλέξτε Blur (Θαμπάδα) και ρυθμίστε τις παραμέτρους σε X=15 και Y=15.
Βήμα 7ο (Ολοκλήρωση κίνησης)
Δοκιμάστε την ταινία και αν όλα έχουν γίνει σωστά θα δείτε ένα όμορφο αποτέλεσμα. Η κίνησή σας όμως επαναλαμβάνεται μόλις φτάσει στο τέλος . Για να την κάνετε να μην επαναλαμβάνεται, θα προσθέσετε μια εντολή stop στο τέλος του Timeline σας. Επιλέξτε το frame 30 στο layer που ονομάζεται Actions και πατήστε το πλήκτρο F6 για να εισάγετε ένα καινούργιο keyframe. Στην συνέχεια επιλέξτε το νέο σας keyframe, ανοίξτε το πάνελ εντολών (Actions Panel) και πληκτρολογήστε την εντολή stop(); για να ρυθμίσετε την ταινία σας να σταματήσει στο συγκεκριμένο σημείο. Δοκιμάστε άλλη μια φορά την ταινία σας για να ελέγξετε ότι όλα είναι σωστά.
Βήμα 8ο (Η μετατροπή της κίνησης σε κώδικα)
Έφτασε η στιγμή να μετατρέψετε την κίνηση που έχετε δημιουργήσει στα προηγούμενα βήματα, σε ActionScript κώδικα. Επιλέξτε όλα τα frames στο layer του τηλεφώνου, κάνοντας κλικ και κρατώντας πατημένο το κουμπί του ποντικού μέχρι να επιλεχθούν και τα 30 frames. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) στα επιλεγμένα frames και επιλέξτε την εντολή Copy Motion as ActionScript 3.0 (Αντιγραφή κίνησης ως ActionScript 3.0). Στην συνέχεια θα ανοίξει ένα παράθυρο που θα σας ρωτήσει το όνομα του instance του animation. Εισάγετε “phone” και πατήστε ΟΚ.
Βήμα 9ο (Επικόλληση του κώδικα)
Επιλέξτε το πρώτο keyframe στo layer που ονομάζεται Actions και ανοίξτε το Actions Panel (F9). Επικολλήστε τον κώδικα στον κενό χώρο του πάνελ πατώντας Ctrl-V (PC) ή Command-V (Mac). Ο κώδικας που έχει δημιουργηθεί, είναι ένας συνδυασμός ActionScript κώδικα και XML, το οποίο (XML) έχει αναπτυχθεί ειδικά για την κίνηση που δημιουργήσαμε.
Βήμα 10ο (Διαγραφή κίνησης)
Η ActionScript που δημιουργήσατε στο προηγούμενο βήμα θα αναλάβει πλέον την κίνηση του τηλεφώνου επί της σκηνής. Αυτό καθιστά την κίνηση που έχουμε φτιάξει στο Timeline άχρηστη. Για να διαγράψετε την κίνηση και όλα τα περιττά frames από το .fla αρχείο σας, επιλέξτε όλα τα frames και από τα 2 layers εκτός του frame 1. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) στα επιλεγμένα frames και επιλέξτε την εντολή Remove Frames (Διαγραφή). Δοκιμάστε πάλι την ταινία σας. Όλα φαίνονται ίδια, αλλά αυτή την φορά δεν έχετε Timeline animation.
Βήμα 11ο (Κατανόηση του κώδικα)
Στην πρώτη γραμμή του κώδικα, το Flash εισάγει το απαραίτητο Code Library (βιβλιοθήκη). Ένα καινούργιο XML αντικείμενο (XML Object) δημιουργείται στη 2η γραμμή. Το αντικείμενο αυτό χρησιμοποιείται για την αποθήκευση του κώδικα XML που είναι απαραίτητο για την κίνηση. Αυτό το XML data χωρίζεται σε 2 βασικά μέρη: Πρώτον, υπάρχει ο κώδικας που περιγράφει το αντικείμενο που βρίσκεται σε κίνηση και δεύτερον από την γραμμή 14 και μετά μπορείτε να δείτε όλη την πληροφορία που έχει σχέση με τα keyframes, και την πληροφορία της κίνησης που δημιουργήσατε στο Timeline. Στην συνέχεια, ένα καινούργιο αντικείμενο (object) δημιουργείται με την χρήση του XML κώδικα και με την τελευταία γραμμή κώδικα, αρχίζει η κίνηση.
Βήμα 12ο (Keyframe Data)
Αν κοιτάξετε στα keyframe tags στον κώδικα XML, θα δείτε πως υπάρχει μια παράμετρος που ονομάζεται “index”. Σε αυτή την παράμετρο, αναφέρεται το νούμερο του frame στο οποίο αρχίζει το συγκεκριμένο keyframe και στο οποίο αναφέρεται ο κώδικας. Θα παρατηρήσετε ότι τα νούμερα είναι πάντα -1 (ένα νούμερο μικρότερο) γιατί η αρίθμηση στον κώδικα αρχίζει από το 0 και όχι από το 1. Οπότε, αν αλλάξετε τις τιμές αυτές, μπορείτε να αλλάξετε τον χρονισμό των κινήσεων του animation. Π.χ. εάν αλλάξετε την τιμή στην γραμμή 23 σε “5”, θα διπλασιαστεί η ταχύτητα της κίνησης.
Βήμα 13ο (Αλλάζοντας το animation)
Αν παρατηρήσετε μερικές τιμές στον κώδικα να διαφέρουν από τις τιμές που είχατε δώσει αρχικά στο Timeline animation, μην ανησυχείτε, είναι φυσιολογικό. Για να αποκτήσετε μια καλύτερη αίσθηση του κώδικα, θα δείτε πώς μπορείτε να μεταφέρετε το κινητό όχι από αριστερά προς τα δεξιά, αλλά το αντίθετο.
Πηγαίνετε στην γραμμή 14 του κώδικα όπου βρίσκεται το πρώτο σας keyframe, προσθέστε μια νέα παράμετρος (x) και ορίστε την τιμή της στα 1000. Αυτή η ενέργειά σας θα τοποθετήσει το κινητό τηλέφωνο στα δεξιά της οθόνης όταν αρχίσει την επόμενη φορά το animation. Δοκιμάστε το να δείτε το αποτέλεσμα.
Βήμα 14ο (Συμπεράσματα)
Ο παραγόμενος κώδικας σάς δίνει την δυνατότητα να παραμετροποίησετε την κίνηση του animation σας με αναρίθμητους τρόπους. Αν κοιτάξετε στα αρχεία βοήθειας (Help Files) του Flash, θα βρείτε σχετικές συμβουλές. Το έργο που δημιουργήσατε μπορεί να δοθεί σε έναν προγραμματιστή ο οποίος έχει πλέον τη δυνατότητα να μετατρέψει τις τιμές σε δυναμικές μεταβλητές και να ανοίξει έτσι νέους ορίζοντες στον τρόπο προβολής του animation σας.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μετατρέποντας το Timeline Animation σε Animation με κώδικα στο Flash CS3 γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
