Flash Μέρος Δ: Animation Path

Η τεχνική Tween που μας δίνει το Flash, τόσο η Motion όσο και η Shape είναι αρκετά απλές,αν και μόνο με αυτές μπορούμε να έχουμε εντυπωσιακά animations, γεννάτε μια εύλογη απορία, πως εγώ σαν σχεδιαστής ενός animation μπορώ να επέμβω και να ορίσω μόνος μου τα ενδιάμεσα frames του animation που θέλω να φτιάξω; Πώς για παράδειγμα μπορώ να φτιάξω ένα αυτοκίνητο να ακολουθεί μια συγκεκριμένη διαδρομή-πίστα; Όπως σημειώσαμε και στην εισαγωγή αυτής της ενότητας, στην flash μπορούμε να ορίσουμε από frame σε frame την κίνηση την οποία θα ακολουθεί ένα αντικείμενο στο animation που φτιάχνουμε. Αυτή όμως η τεχνική είναι αρκετά επίπονη και προτείνετε μόνο για πραγματικά δύσκολα animation π.χ την κίνηση των φτερών ενός πουλιού. Εκτός από το να ορίζουμε την κίνηση ενός αντικειμένου από frame σε frame, υπάρχει και για αυτό εδώ το ερώτημα που θέσαμε ένας πολύ πιο εύκολος τρόπος να πούμε σε ένα αντικείμενο να ακολουθήσει σε ένα animation μια συγκεκριμένη διαδρομή. Αυτήν λοιπόν η τεχνική καλείτε Path animation και αυτήν πρόκειται να δούμε μέσω μιας δραστηριότητας με ποιο τρόπο την υλοποιούμε. Συγκεκριμένα θα φτιάξουμε ένα μικρό κύκλο που θα κινείτε πάνω σε μια συγκεκριμένη διαδρομή που θα του υποδείξουμε εμείς.

 Απάντηση 1. 

Αρχικά επιλέξτε το layer 1 κάνοντας αριστερό κλικ με το ποντίκι πάνω σε αυτό. Στην συνέχεια κάντε δεξί κλικ και επιλέξτε Add Motion Guide.

2. Μόλις το επιλέξετε τότε θα παρατηρήσετε πως αυτόματα το flash μετονομάζει το layer και από layer 1 το κάνει Guide: Layer 1, ενώ ταυτόχρονα δημιουργεί ένα νέο layer με όνομα layer 1.

 3. Στην αρχή είναι και τα δύο layer επιλεγμένα. Εσείς επιλέξτε μόνο το Guide Layer κάνοντας αριστερό κλικ με το ποντίκι σας πάνω σε αυτό.

 4. Τώρα επιλέξτε το pencil tool από την εργαλειοθήκη του flash και σχεδιάστε ένα τυχαίο μονοπάτι το οποίο θα μας χρησιμεύσει ως οδηγός για το πώς θα κινηθεί στην συνέχεια ο κύκλος πάνω σε αυτό. Φτιάξτε κάτι παρόμοιο με αυτό που φαίνετε παρακάτω:

5. Είμαστε έτοιμη να ζωγραφίσουμε ένα μικρό κύκλο, ο οποίος θα κινείτε στο παραπάνω μονοπάτι που σχεδιάσαμε. Αρχικά επιλέξτε το frame 1 του layer 1 κάνοντας αριστερό κλικ με το ποντίκι. Αυτό είναι σημαντικό μιας και σε αυτό το layer θα βάλουμε το κύκλο μας. Στην συνέχεια, κατά τα γνωστά, επιλέξτε το εργαλείο οβάλ (oval tool) και σχεδιάστε έναν μικρό κύκλο πάνω στην σκηνή, όπως φαίνετε παρακάτω:

6. Σε αυτό το σημείο θα δημιουργήσουμε ένα motion tween όπως ακριβώς κάναμε παραπάνω. Συνεπώς κάντε διπλό κλικ πάνω στο κύκλο και εν συνεχεία κάνοντας δεξί κλικ επιλέξτε Convert To Symbol. Από το παράθυρο που θα εμφανιστεί καθορίστε το Type ως graphic, δώστε του ένα χαρακτηριστικό όνομα όπως π.χ my_circle στο πεδίο name και πατήστε OK.

7. Τώρα πάμε να προσθέσουμε frames μέχρι και το frame 30 και στα δύο layer που έχουμε στην timeline. Για να γίνει αυτό κάντε αριστερό κλικ πάνω στο frame 1 του guide layer και σύρετε προς τα δεξιά και κάτω ωσότου επιλέξετε τα πάνω 30 και τα κάτω 30 frames των δύο layer.

8. Αφήστε ελεύθερο το δείκτη του ποντικιού και στην συνέχεια κάντε δεξί κλικ σε ένα από τα επιλεγμένα frames. Από το μενού που θα εμφανιστεί επιλέξτε Insert Frame.

9. Μόλις εισάγετε τα frames στα δύο layers επιλέξτε το frame 1 του layer 1 κάνοντας αριστερό κλικ πάνω σε αυτό.

10. Σε αυτό το σημείο επιλέξτε το κύκλο χρησιμοποιώντας το εργαλείο επιλογής (selection tool) κάντε ένα απλό κλικ πάνω σε αυτό και τοποθετήστε το πάνω στην άκρη της αριστερής άκρης του μονοπατιού σας όπως φαίνετε στο παρακάτω σχήμα. Παρατηρήστε επίσης πως όταν το κέντρο του κύκλου πλησιάσει στο αριστερό άκρο του μονοπατιού αυτόματα το ίδιο το flash το έλκει προς το μέρος του.

11. Στην συνέχεια επιλέξτε το frame 30 του layer 1 και εισάγετε σε αυτό ένα keyframe. Για να το κάνετε αφού επιλέξετε το frame 30 κάντε δεξί κλικ πάνω σε αυτό και επιλέξτε Insert keyframe.

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

13. Τώρα θα φτιάξουμε ένα Motion Tween πάνω στο κύκλο υποδεικνύοντας του να κινηθεί δια μέσου του μονοπατιού. Για να το πετύχουμε επιλέξτε ένα τυχαίο frame από το 2 έως και το 29 του layer 1. Προσοχή σε αυτό το layer έχουμε τον κύκλο εκεί θα φτιάξουμε το animation. Από το παράθυρο ιδιοτήτων (Properties Windows) που εμφανίζετε στο κάτω μέρος της σκηνής επιλέξτε στο πεδίο Tween την ιδιότητα Motion.

14. Μόλις το επιλέξατε αυτό, τότε στο ίδιο παράθυρο εμφανίζονται και κάποιες πρόσθετες επιλογές, εικόνα 3.23. Αυτή που χρειαζόμαστε είναι η επιλογή «orient to path». Μέσω της οποίας θα μπορέσουμε να συνδέσουμε την κίνηση του κύκλου με το μονοπάτι. Επιλέξτε το κουτί κάνοντας κλικ με το ποντίκι σας στο κουτί αριστερά του πεδίου «orient to path».

15. Τέλος επιλέξτε Control | test Movie από το κύριο μενού του Flash για να δείτε το κύκλο να κινείτε επαναληπτικά πάνω ακριβώς στην διαδρομή που ορίσατε.