Ο πιο σημαντικός στόχος του Flash είναι να προσθέσει ζωντάνια και κίνηση στις στατικές και χωρίς ενδιαφέρων σελίδες του web. Παρόλο που μπορούμε να προσθέσουμε εικόνες μέσω των tags της HTML δεν μπορούμε σε καμία περίπτωση να δημιουργήσουμε κίνηση (animation) κάτι που αναμφίβολα εάν υπάρχει θα εντυπωσιάσει τους επισκέπτες μας. Αλλά πέραν από τους σχεδιαστές ιστοσελίδων, μέσω της Flash μπορούμε να φτιάξουμε παιχνίδια ακόμα και ολόκληρες ταινίες.
Το Flash παρέχει τα μέσα έτσι ώστε να δημιουργούμε αλληλεπιδραστικά και συναρπαστικά animations γρήγορα και αποτελεσματικά. Γενικά στην Flash μπορούμε να δημιουργήσουμε animation με δυο διαφορετικούς τρόπους-τεχνικές. Ο πρώτος εξ’ αυτών είναι μέσω της τεχνικής Tween animation και ο δεύτερος μέσω της τεχνικής Frame by Frame. Σε αυτήν εδώ την ενότητα θα ασχοληθούμε αποκλειστικά με την πρώτη τεχνική μιας και είναι η πιο απλή και ταυτόχρονα μέσω αυτής μπορούμε να πετύχουμε γρήγορα και εύκολα συναρπαστικά αποτελέσματα.
Η λέξη tween είναι συντομογραφία της λέξης between που στα Ελληνικά σημαίνει ‘ανάμεσα’. Προτιμώ όμως να συνεχίσω να χρησιμοποιώ την λέξη ως έχει στα αγγλικά. Η βασική ιδέα αυτής της τεχνικής είναι στο ότι μπορούμε να δημιουργήσουμε κίνηση ορίζοντας δύο διαφορετικά σημεία στο χρόνο, ενώ στην συνέχεια το ίδιο το Flash αναλαμβάνει να συμπληρώσει την κίνηση ανάμεσα σε αυτά τα δύο χρονικά σημεία συμπληρώνοντας με αυτόν τον τρόπο το κενό ανάμεσα τους. Από κει προέρχεται και το όνομα αυτής της τεχνικής Tween (ανάμεσα).
Για να αντιληφθούμε αυτήν την τεχνική καλύτερα, φανταστείτε πως την χρονική στιγμή 1 έχουμε μια μπάλα που βρίσκεται στα αριστερά της σκηνής και την χρονική στιγμή 20 έχουμε βάλει την μπάλα στα δεξιά της σκηνής. Έχοντας ορίσει με κάποιο τρόπο (θα δούμε παρακάτω) μία αρχική και μία τελική χρονική στιγμή, μέσω της τεχνικής “tween” το ίδιο το Flash μπορεί να παράγει όλη την μετάβαση της μπάλας μεταξύ των δύο καταστάσεων που έχουμε θέση έτσι με αυτόν τον τρόπο μπορούμε εύκολα και γρήγορα να παράγουμε κίνηση.
Κάθε μια από αυτές τις διαφορετικές χρονικές στιγμές που το Flash δημιουργεί για να γεμίσει το κενό ονομάζονται frames. Ενώ το αρχικό και το τελικό σημείο του animation που φτιάχνουμε καλούνται keyFrames (frames κλειδιά). Τα keyFrames είναι κάτι ξεχωριστό για το Flash, είναι εκείνα τα Frames πάνω στα οποία μπορούμε να εφαρμόσουμε μια αλλαγή πάνω στα χαρακτηριστικά ενός αντικειμένου, μία αλλαγή που μπορεί να είναι πάνω στην θέση, στο σχήμα, στο χρώμα, στην διαφάνεια του κτλ.
Το εντυπωσιακό με την τεχνική Tween έγκειται στο γεγονός πως εάν για παράδειγμα θέλουμε να φτιάξουμε ένα animation που να αποτελείται από 200 frames μπορούμε να το φτιάξουμε γρήγορα ορίζοντας μόνο δύο Frames το αρχικό και το τελικό και αφήνοντας όλα τα υπόλοιπα να τα δημιουργήσει το Flash για μας! Σε αντίθεση με την δεύτερη τεχνική, την Frame by Frame, στην οποία μπορούμε να δημιουργήσουμε το animation για κάθε ένα από τα frames ξεχωριστά, προσδίδοντας μεγαλύτερη λεπτομέρεια στην κίνηση μας αλλά με σαφώς μεγαλύτερη χρονική επιβάρυνση για τον δημιουργό του animation.
Το Flash μας παρέχει δύο τρόπους για Tween animation την Shape Tween και την Motion Tween. Η shape tween παίρνει δύο σχήματα και δημιουργεί κίνηση ανάμεσα τους, αντίθετα η motion tween παίρνει δύο σύμβολα (symbols) και δημιουργεί κίνηση ανάμεσα σε αυτά. Η διαφορά μεταξύ αυτών των τεχνικών είναι λεπτή, αν και παρακάτω ακολουθούν δραστηριότητες που θα δούμε στην πράξη με ποιόν τρόπο μπορούμε να τις χρησιμοποιήσουμε για την παραγωγή animation, συγκρατήστε πως η μεν Shape θέλει σχήματα η δε Motion σύμβολα.
3. Για να το έχετε στην ίδια θέση με το κύκλο της παραπάνω εικόνας, πηγαίνετε στην εργαλειοθήκη και επιλέξτε το εργαλείο επιλογής (selection tool) και κάντε διπλό κλικ πάνω στο κύκλο σας ώστε να επιλέξτε τόσο την περίμετρο του όσο και το εσωτερικό του. Μόλις τον επιλέξετε, μετακινήστε τον στο πάνω αριστερά μέρος της σκηνής σας. Μετατροπή του γραφήματος σε σύμβολο Το Tween animation όπως είπαμε και στην αρχή της ενότητας γίνεται μεταξύ συμβόλων, όχι μεταξύ σχημάτων-γραφημάτων που δημιουργούμε με τη βοήθεια της εργαλειοθήκης του flash. Συνεπώς σε αυτό το σημείο θα πρέπει να μετατρέψουμε την ζωγραφιά μας σε σύμβολο. Για να το κάνουμε αυτό κάντε τα παρακάτω:
1. Επιλέξτε το αντικείμενο κάνοντας διπλό κλικ με το εργαλείο επιλογής και κάντε στην
συνέχεια δεξί κλικ με το ποντίκι σας.
2. Το παράθυρο convert to symbol (μετατροπή σε σύμβολο) εμφανίζεται. Σε αυτό το παράθυρο δώστε ένα όνομα για το σύμβολο που πάτε να φτιάξετε π.χ my_circle και στο πεδίο Type επιλέξτε Graphic. Στην συνέχεια πατήστε OK για να εφαρμοστούν οι αλλαγές σας και να δημιουργηθεί το σύμβολο.
Το Flash παρέχει τα μέσα έτσι ώστε να δημιουργούμε αλληλεπιδραστικά και συναρπαστικά animations γρήγορα και αποτελεσματικά. Γενικά στην Flash μπορούμε να δημιουργήσουμε animation με δυο διαφορετικούς τρόπους-τεχνικές. Ο πρώτος εξ’ αυτών είναι μέσω της τεχνικής Tween animation και ο δεύτερος μέσω της τεχνικής Frame by Frame. Σε αυτήν εδώ την ενότητα θα ασχοληθούμε αποκλειστικά με την πρώτη τεχνική μιας και είναι η πιο απλή και ταυτόχρονα μέσω αυτής μπορούμε να πετύχουμε γρήγορα και εύκολα συναρπαστικά αποτελέσματα.
Η λέξη tween είναι συντομογραφία της λέξης between που στα Ελληνικά σημαίνει ‘ανάμεσα’. Προτιμώ όμως να συνεχίσω να χρησιμοποιώ την λέξη ως έχει στα αγγλικά. Η βασική ιδέα αυτής της τεχνικής είναι στο ότι μπορούμε να δημιουργήσουμε κίνηση ορίζοντας δύο διαφορετικά σημεία στο χρόνο, ενώ στην συνέχεια το ίδιο το Flash αναλαμβάνει να συμπληρώσει την κίνηση ανάμεσα σε αυτά τα δύο χρονικά σημεία συμπληρώνοντας με αυτόν τον τρόπο το κενό ανάμεσα τους. Από κει προέρχεται και το όνομα αυτής της τεχνικής Tween (ανάμεσα).
Για να αντιληφθούμε αυτήν την τεχνική καλύτερα, φανταστείτε πως την χρονική στιγμή 1 έχουμε μια μπάλα που βρίσκεται στα αριστερά της σκηνής και την χρονική στιγμή 20 έχουμε βάλει την μπάλα στα δεξιά της σκηνής. Έχοντας ορίσει με κάποιο τρόπο (θα δούμε παρακάτω) μία αρχική και μία τελική χρονική στιγμή, μέσω της τεχνικής “tween” το ίδιο το Flash μπορεί να παράγει όλη την μετάβαση της μπάλας μεταξύ των δύο καταστάσεων που έχουμε θέση έτσι με αυτόν τον τρόπο μπορούμε εύκολα και γρήγορα να παράγουμε κίνηση.
Κάθε μια από αυτές τις διαφορετικές χρονικές στιγμές που το Flash δημιουργεί για να γεμίσει το κενό ονομάζονται frames. Ενώ το αρχικό και το τελικό σημείο του animation που φτιάχνουμε καλούνται keyFrames (frames κλειδιά). Τα keyFrames είναι κάτι ξεχωριστό για το Flash, είναι εκείνα τα Frames πάνω στα οποία μπορούμε να εφαρμόσουμε μια αλλαγή πάνω στα χαρακτηριστικά ενός αντικειμένου, μία αλλαγή που μπορεί να είναι πάνω στην θέση, στο σχήμα, στο χρώμα, στην διαφάνεια του κτλ.
Το εντυπωσιακό με την τεχνική Tween έγκειται στο γεγονός πως εάν για παράδειγμα θέλουμε να φτιάξουμε ένα animation που να αποτελείται από 200 frames μπορούμε να το φτιάξουμε γρήγορα ορίζοντας μόνο δύο Frames το αρχικό και το τελικό και αφήνοντας όλα τα υπόλοιπα να τα δημιουργήσει το Flash για μας! Σε αντίθεση με την δεύτερη τεχνική, την Frame by Frame, στην οποία μπορούμε να δημιουργήσουμε το animation για κάθε ένα από τα frames ξεχωριστά, προσδίδοντας μεγαλύτερη λεπτομέρεια στην κίνηση μας αλλά με σαφώς μεγαλύτερη χρονική επιβάρυνση για τον δημιουργό του animation.
Το Flash μας παρέχει δύο τρόπους για Tween animation την Shape Tween και την Motion Tween. Η shape tween παίρνει δύο σχήματα και δημιουργεί κίνηση ανάμεσα τους, αντίθετα η motion tween παίρνει δύο σύμβολα (symbols) και δημιουργεί κίνηση ανάμεσα σε αυτά. Η διαφορά μεταξύ αυτών των τεχνικών είναι λεπτή, αν και παρακάτω ακολουθούν δραστηριότητες που θα δούμε στην πράξη με ποιόν τρόπο μπορούμε να τις χρησιμοποιήσουμε για την παραγωγή animation, συγκρατήστε πως η μεν Shape θέλει σχήματα η δε Motion σύμβολα.
Δραστηριότητα
Αρχικά θα σχεδιάσουμε έναν κύκλο και στην συνέχεια χρησιμοποιώντας την τεχνική tween animation θα υποβάλλουμε το κύκλο σε επαναληπτική κίνηση από τα αριστερά προς τα δεξιά της σκηνής.
Απάντηση
Δημιουργία κύκλου
1. Αρχικά κάντε κλικ με το ποντίκι πάνω στο Frame 1 του Layer 1 απλά και μόνο να για να είμαστε σίγουροι πως ο κύκλος που θα φτιάξουμε θα τοποθετηθεί στο σημείο που επιθυμούμε.
2. Για να σχεδιάσουμε τον κύκλο πηγαίνουμε στην εργαλειοθήκη του flash και επιλέγουμε το οβάλ εργαλείο (oval tool). Στην συνέχεια κάνουμε δεξί κλικ πάνω στην σκηνή και έχοντας το πλήκτρο shift πατημένο σχεδιάζουμε τον κύκλο.
1. Αρχικά κάντε κλικ με το ποντίκι πάνω στο Frame 1 του Layer 1 απλά και μόνο να για να είμαστε σίγουροι πως ο κύκλος που θα φτιάξουμε θα τοποθετηθεί στο σημείο που επιθυμούμε.
2. Για να σχεδιάσουμε τον κύκλο πηγαίνουμε στην εργαλειοθήκη του flash και επιλέγουμε το οβάλ εργαλείο (oval tool). Στην συνέχεια κάνουμε δεξί κλικ πάνω στην σκηνή και έχοντας το πλήκτρο shift πατημένο σχεδιάζουμε τον κύκλο.
1. Επιλέξτε το αντικείμενο κάνοντας διπλό κλικ με το εργαλείο επιλογής και κάντε στην
συνέχεια δεξί κλικ με το ποντίκι σας.
2. Το παράθυρο convert to symbol (μετατροπή σε σύμβολο) εμφανίζεται. Σε αυτό το παράθυρο δώστε ένα όνομα για το σύμβολο που πάτε να φτιάξετε π.χ my_circle και στο πεδίο Type επιλέξτε Graphic. Στην συνέχεια πατήστε OK για να εφαρμοστούν οι αλλαγές σας και να δημιουργηθεί το σύμβολο.
3. Αυτήν την στιγμή πάνω στο frame 1 υπάρχει ένα στιγμιότυπο του αντικειμένου. Το ίδιο το σύμβολο έχει τοποθετηθεί στην βιβλιοθήκη (library) του Flash. Εάν δεν βλέπετε την βιβλιοθήκη στην οθόνη επιλέξτε Windows | Library από το βασικό μενού του. Όταν εννοούμε στιγμιότυπο στην ουσία αναφερόμαστε σε ένα αντίγραφο του αντικειμένου. Σημειώστε δε, πως μετατρέποντας ένα γράφημα που σχεδιάσατε με την εργαλειοθήκη της Flash ή το εισάγατε από μια εξωτερική πηγή π.χ (scaner) αυτό εισάγεται στην βιβλιοθήκη και πλέον μπορεί να χρησιμοποιηθεί και σε μελλοντικά έργα, τοποθετώντας πάντα ένα στιγμιότυπο του.
Δημιουργία Motion Tween
Στο Tween animation αναφέραμε πως εμείς θα ορίσουμε δύο χρονικές στιγμές και στην συνέχεια το ίδιο το Flash θα γεμίσει τον ενδιάμεσο χρόνο. Την μια χρονική στιγμή την έχουμε ήδη ορίσει με την δημιουργία του κύκλου ως σύμβολο στο Frame 1, αυτό που θα κάνουμε τώρα είναι να πάμε στο frame 35 και να αλλάξουμε την θέση του κύκλου τοποθετώντας τον αυτήν την φορά στο πάνω δεξιό μέρος της σκηνής.
1. Κάντε δεξί κλικ πάνω στο frame 35 και επιλέξτε keyframe.
2. Μετατρέψτε το Frame 35 σε keyframe. ότι σύμβολο υπήρχε στο ακριβώς προηγούμενο keyframe αντιγράφετε σε αυτό (Το Frame 1 είναι εξ’ ορισμού keyframe) και πλέον σε αυτό του είδους frame μπορείτε να εφαρμόσετε αλλαγή πάνω στο στιγμιότυπο που έχετε. Συνεπώς επιλέξτε το κύκλο κάνοντας ένα απλό κλικ πάνω σε αυτόν και μετακινήστε τον προς τα δεξιά της σκηνής, για να διατηρηθεί μάλιστα στην ίδια ευθεία με το κύκλο που έχετε στο frame 1 έχετε πατημένο το πλήκτρο shift κατά την διάρκεια που σύρεται το κύκλο με το ποντίκι σας.
3. Έχοντας εκτελέσει όλα τα παραπάνω επιλέγουμε ένα οποιοδήποτε frame ανάμεσα στα frames 1 και frameς 35, κάνουμε δεξί κλικ πάνω σε αυτό που επιλέξαμε και από το μενού που θα εμφανιστεί επιλέγουμε Create Motion Tween.
Δημιουργία Motion Tween
Στο Tween animation αναφέραμε πως εμείς θα ορίσουμε δύο χρονικές στιγμές και στην συνέχεια το ίδιο το Flash θα γεμίσει τον ενδιάμεσο χρόνο. Την μια χρονική στιγμή την έχουμε ήδη ορίσει με την δημιουργία του κύκλου ως σύμβολο στο Frame 1, αυτό που θα κάνουμε τώρα είναι να πάμε στο frame 35 και να αλλάξουμε την θέση του κύκλου τοποθετώντας τον αυτήν την φορά στο πάνω δεξιό μέρος της σκηνής.
1. Κάντε δεξί κλικ πάνω στο frame 35 και επιλέξτε keyframe.
2. Μετατρέψτε το Frame 35 σε keyframe. ότι σύμβολο υπήρχε στο ακριβώς προηγούμενο keyframe αντιγράφετε σε αυτό (Το Frame 1 είναι εξ’ ορισμού keyframe) και πλέον σε αυτό του είδους frame μπορείτε να εφαρμόσετε αλλαγή πάνω στο στιγμιότυπο που έχετε. Συνεπώς επιλέξτε το κύκλο κάνοντας ένα απλό κλικ πάνω σε αυτόν και μετακινήστε τον προς τα δεξιά της σκηνής, για να διατηρηθεί μάλιστα στην ίδια ευθεία με το κύκλο που έχετε στο frame 1 έχετε πατημένο το πλήκτρο shift κατά την διάρκεια που σύρεται το κύκλο με το ποντίκι σας.
3. Έχοντας εκτελέσει όλα τα παραπάνω επιλέγουμε ένα οποιοδήποτε frame ανάμεσα στα frames 1 και frameς 35, κάνουμε δεξί κλικ πάνω σε αυτό που επιλέξαμε και από το μενού που θα εμφανιστεί επιλέγουμε Create Motion Tween.
4. Εάν έχετε ακολουθήσει σωστά τα παραπάνω βήματα θα δείτε την κύρια timeline όπως αυτή που φαίνετε στην εικόνα.
Προσέξτε το βέλος που ξεκινάει από το πρώτο keyframes και καταλήγει στο δεύτερο Keyframes να είναι συνεχόμενο και όχι σπαστό, αν δεν είναι όπως αυτό της εικόνας σιγουρευτείτε ότι ακολουθήσατε σωστά όλα τα παραπάνω βήματα της δραστηριότητας.
Έλεγχος και σύνοψη
Μόλις έχετε φτιάξει το πρώτο σας animation, όπως ακριβώς σας το είχα περιγράψει στην εισαγωγή της παρούσας ενότητας. Αρχικά ορίζετε τα δύο σας σημεία (keyfarmes) κάνετε Motion Tween και το ίδιο το flash δημιουργεί το animation ανάμεσα στα ενδιάμεσα σημεία. Για να δείτε το αποτέλεσμα της άσκησης επιλέξτε Control | test Movie από το κύριο μενού του Flash. Με αυτό τον τρόπο το Flash παράγει ένα εκτελέσιμο αρχείο με κατάληξη .swf τοοποίο εκτελείται άμεσα από τον Macromedia Player. Εναλλακτικά, πατήστε την συντόμευση Ctrl + Enter από το πληκτρολόγιο.
