Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Λογισμικό που χρησιμοποιήθηκε
Adobe Flash CS3

Τι είναι το 9-Slice Scaling

Με την λειτουργία αυτή το αντικείμενο διαιρείται σε 9 περιοχές, κάθε μια από τις οποίες μπορεί να μεταβληθεί ανεξάρτητα από τις υπόλοιπες. Η χρησιμότητα της λειτουργίας αυτής φαίνεται όταν χρησιμοποιήσουμε το εργαλείο Free Transform. Η λειτουργία αυτή ενεργοποιείται μέσα από το πλαίσιο διαλόγου Convert to Symbol.

Εικόνα 1 – Το πλαίσιο διαλόγου Convert to Symbol

Παράδειγμα

Θα ξεκινήσουμε με την δημιουργία ενός τετραγώνου. Θα δημιουργήσουμε ένα τετράγωνο, στην συνέχεια θα το αντιγράψουμε και έπειτα θα μετατρέψουμε τα δύο αυτά τετράγωνα σε σύμβολα, ένα με ενεργοποιημένη την λειτουργία 9-slice scale και το άλλο χωρίς.

Επιλέξτε το εργαλείο Rectangle, θέστε στην παλέτα properties την τιμή rectangle corner radius ίση με 24 και φτιάξτε ένα τετράγωνο διαστάσεων 100 πλάτος και 30 ύψος. Το τετράγωνο μπορείτε να το σχεδιάσετε ελεύθερα στην αρχή και έπειτα με το εργαλείο selection να το επιλέξετε και να αλλάξετε τις διαστάσεις του από την παλέτα properties.

Εικόνα 2 – Οι ιδιότητες του τετραγώνου

Στην συνέχεια μπορούμε να αντιγράψουμε το τετράγωνο με την απλή λειτουργία της αντιγραφής και επικόλλησης χρησιμοποιώντας τις συντομεύσεις του πληκτρολογίου ή τις επιλογές του μενού Edit.  Στην συνέχεια τοποθετήστε το ένα τετράγωνο κάτω από το άλλο.

Εικόνα 3 – Τα δύο τετράγωνα

Στην συνέχεια επιλέγουμε το πάνω τετράγωνο, με διπλό κλικ για να πιάσουμε και το περίγραμμα του και  το μετατρέπουμε σε σύμβολο Movie Clip, με χρήση της εντολής Modify > Convert to Symbol. Φροντίζουμε να είναι ενεργοποιημένη η επιλογή Enable guides for 9-slice scaling.

Εικόνα 4 – Το σύμβολο με ενεργοποιημένη την επιλογή

Στην συνέχεια επιλέγουμε το κάτω τετράγωνο και το μετατρέπουμε πάλι σε σύμβολο movie clip. Στο πλαίσιο διαλόγου Convert to Symbol φροντίζουμε να έχουμε απενεργοποιημένη την επιλογή Enable guides for 9-slice scaling.

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

Εικόνα 5 – Η προεπισκόπηση των συμβόλων

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

Κάνοντας κλικ οπουδήποτε πάνω στο σκηνικό, από-επιλέγουμε τα αντικείμενα και βλέπουμε την διαφορά. Στο πρώτο σύμβολο στο οποίο εφαρμόσαμε το 9-slice scale τα καμπύλα τμήματα του διατηρήθηκαν και αυτό επειδή οι 2 κάθετες γραμμές είναι κοντά στα τμήματα αυτά. Αντίθετα στο δεύτερο σύμβολο έχουν παραμορφωθεί τα καμπύλα τμήματα του όπως και ολόκληρο το αντικείμενο.

Εικόνα 6 – Η διαφορά στην παραμόρφωση

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

Εικόνα 7 – Διαφοροποίηση σχήματος βάση της θέσης των γραμμών-οδηγών

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

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

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

Δημιουργία επιπέδου μάσκας

Στο αρχείο mask.fla υπάρχουν έτοιμα τα αντικείμενα του τοπίου και της μάσκας στα αντίστοιχα επίπεδα. Αυτό που χρειαζόμαστε είναι το επίπεδο της μάσκας. Ξεκινάμε φτιάχνοντας ένα νέο επίπεδο το οποίο ονομάζουμε mask και το οποίο τοποθετούμε πάνω από το επίπεδο photo.

Εικόνα 1 – Το επίπεδο της μάσκας

Κύκλοι στην μάσκα

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

Στην συνέχεια, επιλέγουμε το καρέ κλειδί του επιπέδου της μάσκας και φτιάχνουμε 2 κύκλους με μέγεθος 120 pixels, λίγο μεγαλύτερο μέγεθος από το άνοιγμα των κιαλιών και τους τοποθετούμε στο άνοιγμα τους. Ο σκοπός είναι οι κύκλοι αυτοί να λειτουργήσουν ως μάσκα μέσα από τους οποίους θα φαίνεται η εικόνα.

Εικόνα 2 – Οι κύκλοι στο επίπεδο της μάσκας

Αλλαγή ιδιοτήτων των επιπέδων

Για να αλλάξουμε την ιδιότητα του επιπέδου mask σε μάσκα, κάνουμε δεξί κλικ στο επίπεδο της μάσκας και επιλέγουμε mask. Με την ενέργεια αυτή, το σχήμα του επιπέδου mask λειτουργεί ως μάσκα για το σχήμα το οποίο είναι στο αμέσως από κάτω επίπεδο δηλαδή το photo.

Εικόνα 3 – Αλλαγή της ιδιότητας του επιπέδου

Εικόνα 4 – Το επίπεδο mask ως μάσκα και το photo ως masked επίπεδο

Για να δούμε το εφέ μπορούμε είτε να τρέξουμε την ταινία επιλέγοντας από το μενού Control > Test Movie ή είτε να κλειδώσουμε τα δύο αυτά επίπεδα.

Εικόνα 5 – Το εφέ της μάσκας

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

Κίνηση

Στην συνέχεια θα δώσουμε κίνηση στα κιάλια και στους κύκλους της μάσκας. Επειδή οι κύκλοι είναι σχήματα, πρέπει να μετατραπούν σε σύμβολα προκειμένου να προσδώσουμε σε αυτούς κίνηση. Για να το κάνουμε αυτό, τους επιλέγουμε και από το μενού Modify επιλέγουμε Convert to Symbol. Επιλέγουμε Movie Clip αποδεχόμαστε το όνομα που μας δίνει το Flash και πατάμε ΟΚ.

Εικόνα 6 – Τα σχήματα της μάσκας ως σύμβολο

Η κίνηση που θέλουμε να δώσουμε είναι στο πάνω μέρος της εικόνας, από αριστερά προς δεξιά και το αντίθετο. Για να γίνει αυτό, επιλέγουμε τα αντικείμενα της μάσκας και των κιαλιών και τα μετακινούμε πάνω αριστερά στο σκηνικό. Προκειμένου να τα επιλέξουμε κλειδώνουμε το επίπεδο photo και επιλέγουμε όλα τα υπόλοιπα.

Για τις λεπτομέρειες όσον αφορά την κίνηση, έχει γίνει μνεία σε προηγούμενο άρθρο στο οποίο μπορείτε να ανατρέξετε.

Η κίνηση που θα δώσουμε θέλουμε να είναι συνεχής, για τον σκοπό αυτόν το πρώτο και το τελευταίο καρέ κλειδί της κίνηση μας πρέπει να είναι ίδιο. Για να το κάνουμε αυτό, επιλέγουμε όλα τα καρέ κλειδιά της 1^ης θέσης, κάνουμε δεξί κλικ, επιλέγουμε copy frames επιλέγουμε τις θέσεις στην θέση 30 της λωρίδας χρόνου και με δεξί κλικ επιλέγουμε paste frames.

Εικόνα 7 – Αντιγραφή καρέ κλειδιών

Για να δώσουμε την κίνηση κάπου ενδιάμεσα, χρειαζόμαστε καρέ κλειδιά σε μια ενδιάμεση θέση, έστω στην θέση 15. Επιλέγουμε τα καρέ των επιπέδων mask και binoculars και με δεξί κλικ επιλέγω Convert to Keyframes. Με τον τρόπο αυτόν μπορούμε να μετακινήσουμε τα αντικείμενα σε άλλη θέση.

Εικόνα 8 – Θέση αντικειμένων στην θέση 15 της λωρίδας χρόνου

Τελευταία ενέργεια είναι να θέσουμε τα ενδιάμεσα καρέ ανάμεσα στα καρέ κλειδιά ως tween. Για να γίνει αυτό, επιλέγουμε ένα οποιοδήποτε ενδιάμεσο καρέ και από την παλέτα Properties και το μενού Tween επιλέγουμε Motion.

Εικόνα 9 – Εφαρμογή Motion Tween

Επαναλαμβάνουμε την ίδια διαδικασία και για τις υπόλοιπες ενδιάμεσες θέσεις και το αποτέλεσμα φαίνεται στην εικόνα 10.

Εικόνα 10 – Motion tween και στις υπόλοιπες θέσεις

Τέλος, για να δούμε την κίνηση στο Flash Player επιλέγουμε από το μενού Control > Test Movie.

Τελικό Αποτέλεσμα

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος απο εδώ.

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Τα φίλτρα τα προσθέτουμε με το σύμβολο «+» και τα αφαιρούμε με το σύμβολο «-«. Φίλτρα μπορούμε να εφαρμόσουμε σε σύμβολα movie clips και buttons. Στην ακόλουθη εικόνα βλέπουμε τα διαθέσιμα φίλτρα στο Flash.

Εικόνα 1 – Διαθέσιμα Φίλτρα

Στην ακόλουθη εικόνα βλέπουμε την εφαρμογή του φίλτρου Drop Shadow. Σε κάθε φίλτρο που επιλέγουμε έχουμε πρόσβαση σε μια σειρά από ιδιότητες.

Εικόνα 2 – Οι ιδιότητες του συμβόλου Drop Shadow

Οι κύριες ιδιότητες των φίλτρων

Οι περισσότερες ιδιότητες των φίλτρων βρίσκονται στα περισσότερα από αυτά. Ας δούμε τις ιδιότητες του φίλτρου Drop Shadow.

Μια βασική ιδιότητα είναι η Blur-x ή Blur-y. Με την ιδιότητα αυτή ρυθμίζουμε το ποσοστό θόλωσης της σκιάς που αφήνει το φίλτρο.

Εικόνα 3 – Η Ιδιότητα θόλωσης

Μια άλλη ιδιότητα είναι η Strength. Η ιδιότητα αυτή ρυθμίζει την ένταση του φίλτρου. Η ιδιότητα αυτή παίρνει θετικές και αρνητικές τιμές.

Εικόνα 4 – Η ένταση του φίλτρου

Η ιδιότητα Quality ρυθμίζει την ποιότητα εμφάνισης του φίλτρου. Παίρνει 3 τιμές Low, Medium και High.

Εικόνα 5 – Η ποιότητα του φίλτρου.

Άλλες ιδιότητες είναι

• το χρώμα του φίλτρου (Color),
• η γωνία κλήσης του (Angle) γύρω από το σχήμα
• η απόσταση του φίλτρου από αυτό (Distance).

Εικόνα 6 – Οι Ιδιότητες Color, Angle και Distance

Τέλος άλλες οι βασικές ιδιότητες είναι:

• Knockout: Εξουδετερώνει το αντικείμενο αφήνοντας το αποτύπωμα του στη σκιά του.
• Inner Shadow: Εφαρμόζει το φίλτρο με τέτοιο τρόπο ώστε να εμφανίζεται το φίλτρο μέσα στο αντικείμενο και όχι γύρο από αυτό.
• Hide Object: Αφαιρεί το αντικείμενο, αφήνοντας ορατό μόνο το φίλτρο.

Εικόνα 7 – Οι ιδιότητες Knockout, Inner Shadow και Hide Object

Τα υπόλοιπα φίλτρα

Το φίλτρο Blur προκαλεί θόλωση του αντικειμένου.

Εικόνα 8 – Το φίλτρο Blur

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

Εικόνα 9 – Το φίλτρο Glow

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

Εικόνα 10 – Το φίλτρο Bevel

Το φίλτρο Gradient είναι παρόμοιο με το φίλτρο Drop Shadow με την διαφορά ότι το χρώμα του είναι διαβαθμισμένο.

Εικόνα 11 – Το φίλτρο Gradient

Το φίλτρο Gradient Bevel είναι παρόμοιο με το φίλτρο Bevel με την διαφορά ότι η υφή που δίνει αποτελείται από διαβαθμισμένα χρώματα.

Εικόνα 12 – Το φίλτρο Gradient Bevel

Λειτουργίες με τα φίλτρα

Εμφάνιση και διαγραφή φίλτρων

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

Εικόνα 13 – Εμφάνιση φίλτρων

Ένα φίλτρο μπορούμε να το αφαιρέσουμε επιλέγοντας το και πατώντας το κουμπί «-«.

Εικόνα 14- Αφαίρεση φίλτρου

Αντιγραφή και επικόλληση φίλτρων

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

Εικόνα 15 – Αντιγραφή φίλτρων

Αποθήκευση και εφαρμογή φίλτρων

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

Εικόνα 16 – Αποθήκευση μιας ομάδας φίλτρων

Στην συνέχεια επιλέγουμε και εφαρμόζουμε στο σύμβολο που θέλουμε το σύνολο φίλτρων που έχουμε αποθηκεύσει.

Εικόνα 17 – Εφαρμογή της ομάδας φίλτρων σε σύμβολο.

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

]]> http://greektuts.net/flash-filters/feed/ 0 http://greektuts.net/animated-ball-in-flash/ http://greektuts.net/animated-ball-in-flash/#comments Thu, 29 Oct 2009 21:42:20 +0000 Γιώργος Γεωργίου http://greektuts.net/?p=1942 Περιγραφή

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

Η σφαίρα

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

Ανοίγουμε λοιπόν την παλέτα Color και από το μενού Type επιλέγουμε Radial. Τα χρώματα εξ’ ορισμού είναι μαύρο και άσπρο. Εάν δεν είναι, τότε κάνουμε κλικ σε κάθε κουτάκι στο κάτω μέρος της παλέτας και επιλέγουμε το χρώμα της αρεσκείας μας.

Εικόνα 1 – Η παλέτα Color

Στην συνέχεια θα δημιουργήσουμε την σφαίρα. Για να το κάνουμε αυτό επιλέγουμε από την παλέτα εργαλείων το Oval Tool και σχεδιάζουμε μια σφαίρα της αρεσκείας μας στο σκηνικό.

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

Εικόνα 2 – Δημιουργία κύκλου

Αφού φτιάξουμε τον κύκλο, παρατηρούμε πως το γέμισμα ξεκινάει από έξω άσπρο και καταλήγει στο εσωτερικό του κύκλου ως μαύρο. Εφόσον θέλουμε το αντίθετο πρέπει να αντιστρέψουμε την θέση των τετραγώνων χρώματος στην παλέτα Colors.  Πριν την ενέργεια αυτή πρέπει να επιλέξουμε το γέμισμα με το Selection Tool.Έπειτα πρέπει να μεταβάλλουμε την θέση των τετραγώνων χρώματος. Αυτό το κάνουμε σέρνοντας το άσπρο τετράγωνο αρχικά λίγο ποιο μακριά από το μαύρο, το μαύρο στην θέση του άσπρου, δηλαδή δεξιά, και το άσπρο στην θέση του μαύρου. Παρατηρήστε ότι ανάλογα με την θέση του επιλεγμένου τετραγώνου μεταβάλλεται η διαβάθμιση.

Εικόνα 3 – Αλλαγή της διαβάθμισης

Προκειμένου να από-επιλέξουμε την σφαίρα, κάνουμε κλικ στο σκηνικό.

Στην συνέχεια θα μεταβάλλουμε τις ιδιότητες της διαβάθμισης. Αυτό γίνεται με το εργαλείο Gradient Transform. Αφού επιλέξουμε το εργαλείο, επιλέγουμε το γέμισμα της διαβάθμισης που θέλουμε να μεταβάλλουμε.

Εικόνα 4 – Εργαλείο Gradient Transform

Τα σημάδια που βλέπουμε μπορούμε να τα σύρουμε και να αλλάξουμε κάποια ιδιότητα ανάλογα με το σημάδι.

Οι αλλαγές που μπορούμε να κάνουμε είναι:

1. Να μεταβάλλουμε το κέντρο της διαβάθμισης
2. Να παραμορφώσουμε την διαβάθμιση
3. Να μεταβάλουμε το εύρος της διαβάθμισης
4. Να περιστρέψουμε την διαβάθμιση

Εικόνα 5 – Οι ιδιότητες του εργαλείου Gradient Transform

Οι αλλαγές που θέλουμε να κάνουμε είναι να σύρουμε προς τα πάνω δεξιά το κέντρο της διαβάθμισης.

Αυτό το πετυχαίνουμε μετακινώντας, σύμφωνα με την προηγούμενη εικόνα, τα σημάδια 1 και 4.

Εικόνα 6 – Οι αλλαγές στην διαβάθμιση

Δημιουργία Κίνησης

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

Ξεκινάμε λοιπόν φτιάχνοντας ένα νέο επίπεδο οδηγό.

Εικόνα 7 – Motion Path

Προκειμένου να δώσουμε κίνηση χρειαζόμαστε καρέ. Για τον λόγο αυτό επιλέγουμε και για τα 2 επίπεδα μια θέση καρέ, έστω την 15 και εισάγουμε καρέ, frames.

Στην συνέχεια επιλέγουμε το 1^ο καρέ του επιπέδου Guide: Layer 1 και με το εργαλείο Pen σχεδιάζω μια καμπύλη – ένα κλικ για το πρώτο σημείο και στην συνέχεια πατάω για το δεύτερο σημείο και σέρνω για να φτιάξω καμπύλη.

Εικόνα 8 – Καμπύλη στο επίπεδο Guide Layer

Στην συνέχεια πρέπει να μετατρέψουμε την σφαίρα σε αντικείμενο, έστω movie clip προκειμένου να την συνδέσουμε με το guide layer.

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

Εικόνα 9 – Ενσωμάτωση σχήματος στο μονοπάτι.

Έχοντας επιλεγμένο το σύμβολο στο 1^ο καρέ κλειδί, πιάνουμε το σχήμα από το κέντρο του, 1, και το σέρνουμε στην αρχή του μονοπατιού, path. Όταν το φέρουμε στην αρχή του μονοπατιού βλέπουμε έναν κύκλο σε αυτό, 2, ο οποίος υποδηλώνει την ένωση, snap, του σχήματος στην άκρη του μονοπατιού. Σε αυτή την φάση αφήνουμε το σύμβολο, 3, το οποίο είναι αγκιστρωμένο στην αρχή του μονοπατιού. Επιλέγοντας το τελευταίο καρέ κλειδί επαναλαμβάνουμε την ίδια κίνηση, 4, οπότε και το σχήμα αγκιστρώνεται στο τέλος του μονοπατιού, 5.

Τέλος, είμαστε έτοιμοι να πούμε στο Flash να εισάγει ενδιάμεσα καρέ κίνησης. Για τον σκοπό αυτό επιλέγουμε ένα οποιοδήποτε ενδιάμεσο καρέ στο επίπεδο της σφαίρας και από το μενού Tween της παλέτας Properties επιλέγουμε Motion.

Εάν τρέξουμε την ταινία, μενού Control > Test Movie, θα δούμε την καμπύλη κίνηση της σφαίρας χωρίς βέβαια να βλέπουμε το μονοπάτι.

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

Τελικό Αποτέλεσμα

Μπορείτε να κατεβάσετε το αρχείο TipAnimatedSphere το οποίο περιλαμβάνει το source αρχείο όσο και το swf το οποίο μπορείτε να δείτε με οποιοδήποτε flash player.

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Εισαγωγή

Για να θυμηθούμε παλιότερο άρθρο, ένα κουμπί είναι ένα σύμβολο το οποίο αποθηκεύεται στην βιβλιοθήκη και χρησιμοποιείται στο σκηνικό όσες φορές θέλουμε. Το κουμπί έχει τέσσερις καταστάσεις Up, Over, Down, και Hit. Για κάθε μια κατάσταση φτιάχνουμε ή τροποποιούμε το σχήμα που θέλουμε να έχει το κουμπί στην συγκεκριμένη κατάσταση.

Μπορείτε να κατεβάσετε το αρχείο TipButton.fla που θα βρείτε στο τέλος του βοηθήματος. Το αρχείο είναι η τελική εκδοχή και μπορείτε να διαγράψετε από την βιβλιοθήκη το σύμβολο-κουμπί και να το φτιάξετε από την αρχή.

Θέλουμε να φτιάξουμε ένα κουμπί το οποίο θα αποτελείται από ένα μπλε κουτί με άσπρο περίγραμμα και δύο σχήματα με διαβαθμισμένο χρώμα τα οποία θα κινούνται κατακόρυφα. Κάθε ένα από αυτά θα έχει μια καμπύλη πλευρά.

Ξεκινώντας ένα νέο αρχείο το πρώτο πράγμα που κάνουμε είναι αλλαγή στο χρώμα του παρασκηνίου. Αυτό το κάνουμε κάνοντας κλικ στο σκηνικό και αλλάζοντας το χρώμα από την παλέτα properties.

Εικόνα 1 – Αλλαγή σκηνικού

Στην συνέχεια δημιουργούμε ένα νέο σύμβολο κουμπί προκειμένου να ξεκινήσουμε έπειτα την σχεδίαση του.

Εικόνα 2 – Δημιουργία κουμπιού συμβόλου

Επεξεργασία συμβόλου

Μετά την δημιουργία του κουμπιού, περνάμε σε symbol editing mode δηλαδή σε επεξεργασία συμβόλου. Στην φάση αυτή, ότι σχεδιάζουμε αφορά μόνο το συγκεκριμένο σύμβολο, δηλαδή το κουμπί.

Στην συνέχεια δημιουργούμε δύο επίπεδα ένα για το σώμα του κουμπιού και ένα για το ένα διαβαθμισμένο σχήμα.

Εικόνα 3 – Δημιουργία επιπέδων

Στην συνέχεια φτιάχνουμε ένα κουτί διαστάσεων 100Χ50, στο επίπεδο Body, με περίγραμμα πάχους 2 pixels και χρώματα άσπρο περίγραμμα με μπλε γέμισμα. Τις ιδιότητες αυτές μπορούμε να τροποποιήσουμε και μετά τον σχεδιασμό του κουτιού.

Εικόνα 4 – Το σώμα του κουμπιού

Επειδή το κουμπί θα έχει σταθερά και κινούμενα κομμάτια, δημιουργούμε επίπεδα έτσι ώστε να μπορούμε να κλειδώνουμε ή/και να κρύβουμε τα κομμάτια εκείνα που θέλουμε να προστατέψουμε. Για τον λόγο αυτό, κλειδώνουμε το επίπεδο Body, επιλέγουμε το επίπεδο up shape και αλλάζουμε το zoom σε 300% για καλύτερη οπτική.

Εικόνα 5 – Κλείδωμα επιπέδου και μεγέθυνση

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

Εικόνα 6 – Αλλαγή χρωμάτων

Στο επίπεδο up shape φτιάχνουμε ένα τετράγωνο 100 Χ 25. Αν δεν βγουν οι σωστές συντεταγμένες κατά την διάρκεια της σχεδίασης, μπορούμε να τις αλλάξουμε από την παλέτα properties.

Εικόνα 7 – Διαστάσεις επιλεγμένου σχήματος

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

Με το εργαλείο sub selection, εργαλείο με το οποίο επιλέγουμε και αλλάζουμε σημεία σε ένα σχήμα, επιλέγουμε το περίγραμμα του τετραγώνου. Με το Pen Tool φτιάχνουμε και τροποποιούμε την γεωμετρία ενός σχήματος φτιάχνοντας σημεία στο περίγραμμα του. Από το εργαλείο Pen Tool επιλέγουμε Add Anchor Point Tool και βάζουμε 3 επιπλέον σημεία στο κάτω μέρος του κουτιού.

Εικόνα 8 – Προσθήκη σημείων

Με το Sub Selection Tool επιλέγουμε το πρώτο σημείο αριστερά και με πατημένο το Shift επιλέγουμε το διπλανό του σημείο δεξιά.

Εικόνα 9 – Επιλογή σημείων

Έχοντας επιλεγμένα τα σημεία, πατάμε το Shift και 2 φορές το πάνω βέλος.

Με το Sub Selection Tool επιλέγουμε το τελευταίο σημείο δεξιά και με πατημένο το Shift επιλέγουμε το διπλανό του σημείο αριστερά. Έχοντας επιλεγμένα τα σημεία, πατάμε το Shift και 2 φορές το κάτω  βέλος

Εικόνα 10 – Μετακίνηση σημείων

Αφού ορίσαμε και μετακινήσαμε τα σημεία, πρέπει να τα καμπυλώσουμε.

Επιλέγουμε το Pen Tool επιλέγουμε το Convert Anchor Point Tool, κάνουμε κλικ στο κεντρικό σημείο και σέρνουμε προς τα κάτω δημιουργώντας έτσι καμπύλες.

Εικόνα 11 – Δημιουργία καμπυλών από ένα σημείο

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

Εμφανίζουμε την παλέτα Transform (menu window), Αλλάζουμε την τιμή στο rotate σε 180 μοίρες και επιλέγουμε το κουμπί Copy and Apply Transform. Με το κουμπί αυτό, δημιουργείται ένα αντίγραφο του επιλεγμένου σχήματος σύμφωνα με τις αλλαγές που κάναμε.

Το νέο σχήμα πρέπει να το μεταφέρουμε σε ένα άλλο επίπεδο επειδή θα κινείται ανεξάρτητα από το πρώτο.  Δημιουργούμε νέο επίπεδο down shape και μετακινούμε το σχήμα στο κατάλληλο σημείο επιλέγοντας από το μενού, cut, και paste in place. Στην συνέχεια κάνουμε αναδιάταξη επιπέδων.

Εικόνα 12 – Αντιγραφή και τροποποίηση σχήματος

Στην φάση αυτή έχουμε τα σχήματα στην κατάσταση Up δηλαδή στην κατάσταση εμφάνισης του κουμπιού. Θέλουμε να προσθέσουμε καρέ κλειδιά στην κατάσταση Over προκειμένου να αλλάξουμε τον χρωματισμό στα διαβαθμισμένα σχέδια.

Επιλέγουμε το καρέ στην κατάσταση Over, σέρνουμε για να επιλέξουμε τα υπόλοιπα frame slots και εισάγουμε καρέ κλειδιά. Στην συνέχεια επιλέγουμε το σχήμα του επιπέδου Up Shape στην κατάσταση Over και από την παλέτα Color αλλάζουμε την μπλε απόχρωση της διαβάθμισης. Επαναλαμβάνουμε την διαδικασία αυτή και για το σχήμα του επιπέδου down shape στην ίδια κατάσταση.

Στην συνέχεια προσθέτουμε καρέ κλειδιά σε όλα τα επίπεδα για την κατάσταση Down.

Εικόνα 13 – Εισαγωγή καρέ κλειδιών στις άλλες καταστάσεις του κουμπιού και αλλαγή χρώματος

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

Στις ακόλουθες δύο εικόνες μπορούμε να δούμε την διαδικασία αυτή για το σχήμα του επιπέδου up shape.

Εικόνα 14 – Επιλέγουμε το σχήμα και το μετακινούμε κατακόρυφα

Εικόνα 15  – Επιλογή και διαγραφή κομματιού

Ακολουθούμε την ίδια διαδικασία και για το σχήμα στο επίπεδο down shape.

Εικόνα 16  – Τροποποίηση του άλλου διαβαθμισμένου σχήματος

Στο σημείο αυτό μπορούμε να βγούμε από το symbol editing mode, και να επιστρέψουμε στο σκηνικό.

Εικόνα 17  – Επιστροφή στο σκηνικό

Εργασία στο σκηνικό και εκτέλεση

Εφόσον το κουμπί είναι έτοιμο μπορούμε να σύρουμε το σύμβολο στο σκηνικό το από την βιβλιοθήκη.

Εικόνα 18  – Εισαγωγή του κουμπιού στο σκηνικό

Τέλος μπορούμε να κάνουμε προεπισκόπηση της ταινίας. Αυτό γίνεται επιλέγοντας από το μενού Control > Test Movie. Κάνοντας την ενέργεια αυτή, δημιουργείται αυτόματα το αρχείο TipButton.swf το οποίο είναι και το παραγόμενο αρχείο. Για την δοκιμή του κουμπιού μπορούμε να τρέξουμε το .swf αρχείο.

Εικόνα 19  – Δοκιμή του κουμπιού

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος από εδώ

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

Ότι εισάγουμε στο Flash αποθηκεύεται ως σύμβολο στην βιβλιοθήκη.

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

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

Εικόνα 1 – Βιβλιοθήκη

Η λειτουργία αυτή μας δίνει μεγάλο πλεονέκτημα επειδή ότι αλλαγή κάνουμε σε ένα σύμβολο ενημερώνονται αυτόματα όλα τα στιγμιότυπα του συμβόλου αυτού στο σκηνικό.

Τύποι Συμβόλων

Στο Flash έχουμε τους ακόλουθους τύπους συμβόλων

• Movie Clip: Τα σύμβολα αυτού του τύπου είναι ταινίες με δική τους λωρίδα χρόνου η οποία είναι ανεξάρτητη από την κύρια λωρίδα χρόνου.
  Για παράδειγμα, εάν η κύρια λωρίδα χρόνου έχει διάρκεια 1 καρέ και λωρίδα χρόνου του movie clip είναι 10 καρέ, τότε το movie clip θα παίζει όταν βάλουμε ένα στιγμιότυπο του στο σκηνικό της κύριας λωρίδας ανεξάρτητα από το μήκος της.
• Graphic: Τα σύμβολα αυτού του τύπου είναι ταινίες με δική τους λωρίδα χρόνου η οποία είναι άμεσα εξαρτώμενη από την κύρια λωρίδα χρόνου.
  Για παράδειγμα, εάν η κύρια λωρίδα χρόνου έχει διάρκεια 1 καρέ και λωρίδα χρόνου του movie clip είναι 10 καρέ, τότε το movie clip, όταν βάλουμε ένα στιγμιότυπο του στο σκηνικό, θα παίξει 1 μόνο καρέ.
• Button: Τα σύμβολα αυτά συμπεριφέρονται ως κουμπιά. Τα κουμπιά έχουν τέσσερις καταστάσεις η οποίες δηλώνουν την εμφάνιση του κουμπιού ανάλογα με την θέση του δείκτη του ποντικιού:

1. Up: Η εμφάνιση του κουμπιού όταν ο δείκτης του ποντικιού δεν βρίσκεται πάνω στο κουμπί.
2. Over: Η εμφάνιση του κουμπιού όταν ο δείκτης του ποντικιού βρίσκεται πάνω στο κουμπί.
3. Down: Η εμφάνιση του κουμπιού όταν ο χρήστης πατάει, κάνει κλικ στο κουμπί.
4. Hit: Ορίζει την ενεργή περιοχή του κουμπιού. Την περιοχή δηλαδή εκείνη στην οποία όταν ο χρήστης κάνει κλικ θα συμβεί κάτι

Εικόνα 2 – Τύποι συμβόλων

Εικόνα 3 – Η καταστάσεις του συμβόλου Button

Πλεονεκτήματα των συμβόλων

Αλλάζοντας ένα σύμβολο, αλλάζουμε ταυτόχρονα όλα τα στιγμιότυπα του που βρίσκονται πάνω στο σκηνικό. Για να αλλάξω ένα σύμβολο μπορώ:

• Να κάνω διπλό κλικ στο εικονίδιο του συμβόλου στην βιβλιοθήκη οπότε και επεξεργάζομαι το σύμβολο μεμονωμένα μπαίνοντας σε symbol editing mode.
• Να κάνω διπλό κλικ στο στιγμιότυπο του συμβόλου πάνω στο σκηνικό οπότε, τα υπόλοιπα σύμβολα γίνονται αχνότερα, μπαίνω σε symbol editing mode οπότε και επεξεργάζομαι το σύμβολο.
• Να κάνω δεξί-κλικ πάνω στο στιγμιότυπο και από το μενού επιλέγω τον Edit… ανάλογα με το πώς θέλω να το επεξεργαστώ

Εικόνα 4 – Αλλαγή στιγμιότυπων μέσω συμβόλων

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

Τύποι κίνησης (animation)

Η λωρίδα χρόνου του Flash αποτελείται από καρέ κάθε ένα από τα οποία είναι και μια στατική εικόνα. Τα καρέ τοποθετούνται σε μια σειρά και η αναπαραγωγή αυτής της ακολουθίας δίνει την κίνηση. Τα καρέ στα οποία μπορούμε να μεταβάλουμε την κίνηση ονομάζονται καρέ κλειδιά. Ανάμεσα σε δύο καρέ κλειδιά τοποθετούμε 1 ή περισσότερα καρέ. Τα καρέ αυτά μπορούμε να τα τοποθετήσουμε με δύο τρόπους:

• Βίαιη κίνηση: Προσθέτοντας συνεχόμενα καρέ κλειδιά, το ένα δίπλα στο άλλο και αλλάζοντας σε κάθε καρέ το περιεχόμενο Εικόνα 5. Στην περίπτωση αυτή αρκεί να έχουμε ένα αρχικό καρέ κλειδί.
• Tweening: Κάνοντας το Flash να τοποθετήσει ενδιάμεσα καρέ κίνησης ανάμεσα σε δύο καρέ κλειδιά. Η λειτουργία αυτή ονομάζεται Tweening. Το tweening είναι μια σειρά από καρέ με αρχή και τέλος, τα οποία τοποθετούνται αυτόματα από το Flash ανάμεσα σε δύο καρέ κλειδιά με σκοπό να δώσουν κίνηση.

Εικόνα 5 – Βίαιη κίνηση

Τύποι Tweeining

Για να εφαρμόσουμε την τεχνική αυτή χρειαζόμαστε δύο καρέ κλειδιά. Στο πρώτο καρέ κλειδί έχουμε την αρχική εικόνα και στο τελευταίο καρέ κλειδί έχουμε την μεταβαλλόμενη εικόνα. Για να εφαρμόσουμε tweeining επιλέγουμε ένα οποιοδήποτε ενδιάμεσο καρέ και από το αναδυόμενο μενού Tween στην παλέτα Properties επιλέγουμε τον τύπο που θέλουμε. Ανάλογα με το τι αντικείμενο έχουμε εφαρμόζουμε τους ακόλουθους τύπους tweening.

• Motion Tween: Αυτός ο τύπος κίνησης έχει σκοπό την μεταβολή της εμφάνισης ή/και της θέσης ενός αντικειμένου. Το αντικείμενο αυτό πρέπει να είναι σύμβολο. Motion Tween μπορούμε να εφαρμόσουμε μόνο σε ένα σύμβολο ανά επίπεδο. Δηλαδή εάν έχουμε τρία σύμβολα στα οποία θέλουμε να δώσουμε κίνηση θα χρειαστούμε τρία επίπεδα, ένα για κάθε σύμβολο.
• Shape Tween: Αυτός ο τύπος κίνησης έχει σκοπό την μεταβολή του σχήματος ή/και της θέσης ενός αντικειμένου. Για να γίνει αυτό, το αντικείμενο δεν πρέπει να είναι σύμβολο. Μπορούμε να έχουμε παραπάνω από ένα αντικείμενα στο ίδιο επίπεδο αλλά με την προϋπόθεση πως δεν διασταυρώνει το ένα με το άλλο. Για τον λόγο αυτό, καλό είναι να βάζουμε κάθε αντικείμενο στο δικό του επίπεδο εφόσον θέλουμε να δώσουμε κίνηση, tweening.

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

Εικόνα 6 – Motion Tween 1

Εικόνα 7 – Motion Tween 2

Εικόνα 8 – Shape Tween 1

Εικόνα 9 – Shape Tween 2

Διαφορές

Ανάλογα με το τι κίνηση θέλουμε να δώσουμε πρέπει να έχουμε υπόψη κάποιους κανόνες. Οι κανόνες αυτοί εμφανίζονται στον ακόλουθο πίνακα.

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Η ακόλουθη εικόνα δείχνει τα υπόλοιπα στοιχεία του περιβάλλοντος του Flash CS3.

Εικόνα 1 – Το περιβάλλον εργασίας του Flash CS3

Σκηνικό

Η λευκή περιοχή ονομάζεται σκηνικό. Ότι σχεδιάζουμε στην περιοχή αυτό θα προβληθεί αργότερα όταν εξάγουμε την ταινία μας.

Περιοχή εργασίας

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

Μπάρα Επεξεργασίας (Edit bar)

Εικόνα 2 – Η μπάρα επεξεργασίας

Σκηνικό – Scene

Στο Flash μπορούμε να έχουμε πολλές σκηνές με κάθε μια να έχει την δική της λωρίδα χρόνου. Η μπάρα επεξεργασίας μας βοηθάει στο να εναλλασσόμαστε μεταξύ των σκηνών της ταινίας μας. Το επιλεγμένο σκηνικό το βλέπουμε στην αριστερή πλευρά της μπάρας επεξεργασίας.

Workspace

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

Επεξεργασία συμβόλων

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

Μεγέθυνση – Zoom

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

Οι Παλέτες

Στο Flash οι λειτουργίες της εφαρμογής είναι ομαδοποιημένες σε ομάδες που ονομάζονται παλέτες. Τέτοιες παλέτες είναι οι Color και η Swatches, παλέτες που είδαμε στο άρθρο για τα χρώματα του Flash. Οι παλέτες μπορεί να είναι τοποθετημένες σε ομάδες όποτε στην περίπτωση αυτή επιλέγουμε την ανάλογη καρτέλα-παλέτα.

Σημειώστε πως ο τρόπος χρήσης των παλετών είναι κοινός στις περισσότερες εφαρμογές της Adobe.

Τρόπος χρήσης

Μια παλέτα μπορούμε να την εμφανίσουμε ή να την αποκρύψουμε από το μενού Window. Με τικ μπροστά από το όνομα της η παλέτα εμφανίζεται.

Εικόνα 3 – Επιλογή / Aπόεπιλογή παλετών.

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

Εικόνα 4 – Αγκιστρωμένες και μετέωρες παλέτες.

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

Εικόνα 5 – Αλλαγή της θέσης μιας παλέτας.

Κάθε παλέτα-καρτέλα  έχει ένα μενού επιλογών με σχετικές με την παλέτα επιλογές.

Εικόνα 6 – Μενού επιλογών μιας παλέτας.

Τις ομάδες παλετών μπορούμε να τις σμικρύνουμε ή να τις επεκτείνουμε. Όταν είναι σε κατάσταση σμίκρυνσης, κάνουμε κλικ στο εικονίδιο της παλέτας που θέλουμε και η παλέτα ανοίγει. Η παλέτα θα μείνει ανοιχτή για μέχρι να κάνουμε κλικ σε ένα άλλο σημείο της εφαρμογής.

Εικόνα 7 – Σμίκρυνση, μεγέθυνση παλετών

Παλέτα Εργαλείων

Η παλέτα εργαλείων βρίσκεται στην δεξιά πλευρά της εφαρμογής και περιέχει τα εργαλεία σχεδίασης και επεξεργασίας των σχεδίων που φτιάχνουμε στο Flash.

Εικόνα 8 – Η παλέτα εργαλείων

Η παλέτα εργαλείων ομαδοποιεί τα εργαλεία ως εξής:

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

Ο επιθεωρητής Ιδιοτήτων

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

Στην εικόνα 9 βλέπουμε τις ιδιότητες ενός επιλεγμένου σχήματος.

Εικόνα 9 – Ο επιθεωρητής ιδιοτήτων με τις ιδιότητες ενός επιλεγμένου σχήματος

Στην εικόνα 10 βλέπουμε τις ιδιότητες ενός επιλεγμένου κειμένου.

Εικόνα 10 – Ο επιθεωρητής ιδιοτήτων με τις ιδιότητες ενός επιλεγμένου κειμένου.

Χρήση της βιβλιοθήκης

Η βιβλιοθήκη, η αλλιώς library, είναι μια παλέτα μέσα στην οποία μπορούμε να αποθηκεύσουμε οποιοδήποτε αντικείμενο χρησιμοποιούμε στην ταινία μας. Τα αντικείμενα αυτά μπορεί να είναι εικόνες ή σχήματα που σχεδιάζουμε και τα οποία τα μετατρέπουμε σε σύμβολο. Σύμβολο είναι ένα σχήμα το οποίο όταν μετατραπεί σε σύμβολο, αποθηκεύεται στην βιβλιοθήκη και μπορεί να χρησιμοποιηθεί πολλές φορές. Για τα σύμβολα θα μιλήσουμε σε μελλοντικό άρθρο.

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

Στην βιβλιοθήκη τα αντικείμενα μπορούμε να τα οργανώσουμε με τον ίδιο τρόπο που οργανώνουμε τα αρχεία μας στον windows explorer. Μπορούμε να φτιάξουμε φακέλους, να μετακινήσουμε αντικείμενα μέσα αυτούς, να διαγράψουμε αρχεία και φακέλους.

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

Εικόνα 11 – Η παλέτα βιβλιοθήκης – Library

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Το Flash είναι εφαρμογή με την οποία φτιάχνουμε ταινίες όπως διαφημιστικά banners και διαδραστικές εφαρμογές οι οποίες περιέχουν κίνηση. Για να δημιουργηθεί η αίσθηση της κίνησης χρειαζόμαστε μια ακολουθία από στατικές εικόνες, στο flash ονομάζονται καρέ – frames,  οι οποίες όταν προβληθούν οι μία μετά την άλλη δίνουν την ψευδαίσθηση της κίνησης. Στο Flash αυτό υλοποιείται με την λωρίδα χρόνου  – Timeline.

Εικόνα 1 – Η λωρίδα χρόνου

Περιγραφή της λωρίδας χρόνου

Επίπεδα

Στις περισσότερες σχεδιαστικές εφαρμογές χρησιμοποιείται ο όρος επίπεδα – layers. Με τον όρο αυτόν εννοούμε στρώσεις, διαφάνειες σε κάθε μια από τις οποίες τοποθετούμε αντικείμενα. Με την ομαδοποίηση αυτή των αντικειμένων σε επίπεδα, πετυχαίνουμε την ταυτόχρονη διαχείριση κοινών σε αυτά τα αντικείμενα ιδιοτήτων τους όπως η εμφάνιση και η απόκρυψη τους. Επιπλέον με βάση την σειρά εμφάνισης των επιπέδων, σειρά στοίβας, ελέγχεται και η επικάλυψη η μη ορισμένων αντικειμένων. Έτσι τα αντικείμενα του 1^ου επιπέδου εμφανίζονται πρώτα, του 2ου κάτω από τα αντικείμενα του 1^ου, του 3^ου κάτω από αυτά του 2^ου κ.ο.κ.

Εικόνα 2 – Διάταξη επιπέδων

Μετονομασία και επιλογή επιπέδου

Ένα επίπεδο μπορούμε να το μετονομάσουμε κάνοντας διπλό κλικ στο όνομα του και αλλάζοντας το. Επιλέγοντας ένα επίπεδο επιλέγονται αυτόματα και τα αντικείμενα που ανήκουν σε αυτό και το αντίστροφο.

Εικόνα 3 – Επιλογή και μετονομασία επιπέδου

Προσθαφαίρεση επιπέδων και φακέλων.

Στην κάτω αριστερή γωνία του παραθύρου υπάρχουν οι εξής επιλογές για τα επίπεδα:

• Insert Layer: Προσθέτει ένα νέο επίπεδο κάτω από το επιλεγμένο
• Add Motion Guide: Προσθέτει ένα ειδικό επίπεδο για δημιουργία μονοπατιού πάνω στο οποίο θα κινηθεί ένα αντικείμενο – θα το δούμε ποιο αναλυτικά σε μελλοντικό άρθρο.
• Insert Layer Folder: Προσθέτει έναν φάκελο κάτω από το επιλεγμένο επίπεδο ή φάκελο. Ένας φάκελος έχει στόχο την οργάνωση των επιπέδων και μπορεί να περιέχει άλλα επίπεδα ή φακέλους.
• Delete Layer: Διαγράφει ένα επίπεδο η φάκελο. Προσοχή: ένας φάκελος για να διαγραφεί πρέπει να είναι άδειος.

Εικόνα 4 – Προσθαφαίρεση επιπέδων και φακέλων

Διάταξη επιπέδων (περιεχόμενα),

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

Εικόνα 5 – Μετακίνηση επιπέδου σε φάκελο

Απόκρυψη και κλείδωμα επιπέδων

Στην πάνω-δεξιά πλευρά βλέπουμε τα εξής τρία εικονίδια:

• Show / Hide All Layers: Αποκρύπτει / εμφανίζει τα περιεχόμενα όλων των επιπέδων. Αυτό είναι ιδιαίτερα χρήσιμο όταν τα περιεχόμενα του ενός επιπέδου καλύπτουν αυτά κάποιου κάτω από αυτό. Αυτό το πετυχαίνουμε εάν κάνουμε κλικ στην κουκίδα του αντίστοιχου επιπέδου.
• Lock / Unlock All Layers: Κλειδώνει όλα τα επίπεδα. Αυτό είναι χρήσιμο όταν θέλουμε να προστατέψουμε τα περιεχόμενα κάποιου επιπέδου από απρόσεκτη αλλαγή. Αυτό το πετυχαίνουμε εάν κάνουμε κλικ στην κουκίδα του αντίστοιχου επιπέδου.
• Show All Layers as Outlines: Εμφανίζει τα περιεχόμενα ενός επιπέδου ως περιγράμματα. Αυτό είναι χρήσιμο όταν θέλουμε ένα σκιαγράφημα των αντικειμένων που βρίσκονται σε κάποιο επίπεδο. Αυτό το πετυχαίνουμε εάν κάνουμε κλικ στην κουκίδα του αντίστοιχου επιπέδου.

Εικόνα 6 – Απόκρυψη και κλείδωμα επιπέδων

Η λωρίδα χρόνου

Η λωρίδα χρόνου αποτελείται από μια ακολουθία καρέ – frames, κάθε ένα από τα οποία περιέχει μια στατική εικόνα. Η κεφαλή αναπαραγωγής, play head, παίζει τον ρόλο της ροής αυτής, δηλαδή της αλληλουχίας τον καρέ με σκοπό την ψευδαίσθηση της κίνησης. Στο πάνω μέρος υπάρχει μια ακολουθία από αριθμούς κάτω από τους οποίους εμφανίζονται τα καρέ. Κάθε επίπεδο έχει την δική της ακολουθία από καρέ. Στο κάτω μέρος, υπάρχουν εικονίδια για την προβολή περισσοτέρων του ενός καρέ, καθώς επίσης και πληροφορίες για τα καρέ.

Εικόνα 7 – Η λωρίδα χρόνου.

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

Ο ρυθμός αναπαραγωγής, frame rate ή αλλιώς frame per second, δείχνει τον αριθμό καρέ ανά δευτερόλεπτο. Οι συνήθεις τιμές είναι 12, 24 & 36. Όσο μεγαλώνει η τιμή τόσο γρηγορότερη γίνεται η ταινία και το αντίθετο.

Εικόνα 8 – Frame rate

Με την λειτουργία onion skin, έχουμε την δυνατότητα να βλέπουμε ταυτόχρονα τα περιεχόμενα σε περισσότερα από ένα καρέ την φορά.

Εικόνα 9 – Onion skin

Τύποι καρέ

Σε ένα κενό έγγραφο έχουμε ένα κενό καρέ κλειδί blank key frame. Όταν βάλουμε περιεχόμενο το καρέ αυτό γίνεται καρέ κλειδί – key frame. Το καρέ κλειδί παίζει κυρίαρχο ρόλο σε μια ταινία αφού σε αυτό και μόνο αυτό μπορούμε να σχεδιάσουμε και παρέμβουμε. Αριστερά από ένα καρέ κλειδί μπαίνουν καρέ – frames τα οποία περιέχουν τα περιεχόμενα από το καρέ κλειδί.

Εικόνα 10 – Τύποι καρέ

Στην εικόνα αυτή, στο Layer 3 υπάρχει ένα καρέ κλειδί από το οποίο ξεκινάει το τετράγωνο και ακολουθούν καρέ τα οποία περιέχουν το σχήμα που βρίσκεται στο καρέ κλειδί. Το τελευταίο καρέ κλειδί στο ίδιο επίπεδο είναι άδειο. Στο Layer 4 πάλι έχουμε ένα καρέ κλειδί, άδειο, από το οποίο συνεχίζουν καρέ τα οποία είναι και αυτά άδεια. Στο Layer 2 υπάρχει ένα καρέ κλειδί το οποίο έχει περιεχόμενο, τον κύκλο. Στο Layer 1 υπάρχει απλά ένα άδειο καρέ κλειδί. Εάν σύρουμε την κεφαλή αναπαραγωγής σε ένα άλλο καρέ, στο 3, θα δούμε μόνο το περιεχόμενο του Layer 3, δηλαδή τον κύκλο μόνο.

Τέλος, η προσθαφαίρεση καρέ γίνεται είτε από το μενού Insert > Timeline, είτε με δεξί κλικ σε ένα οποιοδήποτε  καρέ στην λωρίδα χρόνου.

Λογισμικό που χρησιμοποιήθηκε

Adobe Flash CS3

Το Flash έχουμε τους εξής τύπους χρωμάτων:
•    Solid: Γεμάτο, ενιαίο χρώμα σε όλο το σχήμα.
•    Linear: Χρώμα κάθετα διαβαθμισμένο και αποτελούμενο από δύο τουλάχιστον χρώματα.
•    Radial:  Χρώμα κυκλικά διαβαθμισμένο και αποτελούμενο από δύο τουλάχιστον χρώματα.
•    Bitmap: Αντί για χρώμα, χρησιμοποιείται μια έτοιμη bitmap εικόνα.

Εικόνα 5 – Τύποι Χρωματισμών

Οι παλέτες χρωμάτων στο Flash

Το Flash χρησιμοποιεί παλέτες οι οποίες ομαδοποιούν κοινές λειτουργίες και οι οποίες τοποθετούνται στην δεξιά πλευρά της εφαρμογής. Τις παλέτες ενεργοποιούμε / απενεργοποιούμε μέσα από το μενού Window. Στο μενού αυτό, κάθε ενεργή παλέτα έχει ένα σημάδι τικ στα αριστερά του ονόματος της.
Κάθε παλέτα έχει καρτέλες με ομαδοποιημένες επιπλέον λειτουργίες. Κάθε καρτέλα έχει ένα μενού επιλογών,  option menu, το οποίο βρίσκεται πάνω-δεξιά σε κάθε καρτέλα με την μορφή παράλληλων γραμμών και ενός κάθετου βέλους αριστερά από αυτές.

Εικόνα 6 – Μενού επιλογών (option menu)

Παλέτα Swatches

Ο ρόλος της παλέτας αυτής είναι η προσθήκη επιπλέον χρωμάτων πέρα από αυτά τα οποία περιέχει. Στην παλέτα αυτή επιλέγουμε να χρησιμοποιήσουμε ένα χρώμα τόσο από την γκάμα των web safe χρωμάτων, για γεμάτο χρώμα, όσο και έτοιμες διαβαθμίσεις χρωμάτων. Σημειώστε πως πρώτα επιλέγουμε το κατάλληλο εικονίδιο για χρώμα γεμίσματος ή περιγράμματος και έπειτα επιλέγουμε την παλέτα swatches για την επιλογή χρώματος.
Εάν έχουμε επιλέξει ένα χρώμα, γεμάτο ή διαβαθμισμένο, μπορούμε να το προσθέσουμε τοποθετώντας τον δείκτη του ποντικιού στην γκρι περιοχή της παλέτας, ο δείκτης του ποντικιού γίνεται κουβαδάκι, οπότε κάνοντας κλικ στο σημείο αυτό, παρατηρούμε ότι το νέο χρώμα έχει προστεθεί στην παλέτα ως επιπλέον χρωματικό κουτί.
Εάν θέλουμε να διαγράψουμε το επιλεγμένο χρωματικό κουτί, το επιλέγουμε και από μενού επιλογών της καρτέλας επιλέγουμε delete swatch. Με χρήσης των ανάλογων επιλογών του μενού, μπορούμε να αποθηκεύσουμε την τρέχουσα γκάμα χρωμάτων ή να φορτώσουμε μια ήδη αποθηκευμένη που έχουμε. Τέλος εάν θέλουμε να επαναφέρουμε την παλέτα swatch στην αρχική της κατάσταση, επιλέγουμε από το μενού επιλογών την επιλογή Load Default Colors.

Εικόνα 7 – Η Παλέτα Swatches

Παλέτα Color

Στην παλέτα αυτή μπορούμε να επιλέξουμε ένα χρώμα για κάθε τύπο χρώματος, γέμισμα ή περίγραμμα και για κάθε ένα από αυτά να ορίσουμε ένα χρώμα:
•    Από τα web safe colors
•    Δίνοντας τιμές στα αντίστοιχα κουτιά R(ed), G(reen), B(lue)
•    Επιλέγοντας ένα χρώμα από την παλέτα χρωμάτων
•    Δίνοντας τον αντίστοιχο δεκαεξαδικό κωδικό στο αντίστοιχο κουτί.
Μπορούμε να ορίσουμε και την διαφάνεια σε ένα χρώμα. Αυτό γίνεται από την επιλογή  Alpha. Η τιμή 100% σημαίνει ορατό χρώμα και η επιλογή 0% σημαίνει αόρατο, διαφανές χρώμα. Οι ενδιάμεσες τιμές ορίζουν το ποσοστό διαφάνειας του χρώματος, κάτι σαν το εφέ aero στα windows vista.
Στο κάθετο κουτί δεξιά από τη παλέτα χρωμάτων ρυθμίζουμε την φωτεινότητα του χρώματος. Στο κάτω μέρος της παλέτας βλέπουμε την προεπισκόπηση του επιλεγμένου χρώματος.
Οι επιλογές αυτές ισχύουν για χρώμα γεμίσματος (solid).

Εικόνα 8 – Η Παλέτα Color

Εάν επιλέξουμε από το μενού Type, Linear ή Radial παίρνουμε ένα διαβαθμισμένο χρώμα το οποίο αποτελείται από δύο ή περισσότερα χρώματα. Στο κάτω μέρος της παλέτας και στο σημείο της προεπισκόπησης υπάρχουν χρωματικά κουτιά, ένα για κάθε χρώμα. Με τα χρωματικά κουτιά μπορούμε να κάνουμε τα ακόλουθα:
•    Να επιλέξουμε ένα χρωματικό κουτί και να αλλάξουμε το χρώμα και την διαφάνεια του, κάνοντας τις ίδιες επιλογές με αυτές για το χρώμα γεμίσματος.
•    Να μετακινήσουμε ένα χρωματικό κουτί δεξιά ή αριστερά αλλάζοντας έτσι την διαβάθμιση του.
•    Να προσθέσουμε ένα χρωματικό κουτί κάνοντας κλικ στην γκρι περιοχή ακριβώς πάνω από την προεπισκόπηση.
•    Να αφαιρέσουμε ένα χρωματικό κουτί κάνοντας κλικ πάνω του και τραβώντας το προς τα κάτω.

Εικόνα 9 – Η Παλέτα Color με διαβαθμισμένο χρώμα

Κάτω από το εικονίδιο γεμίσματος υπάρχουν τα εξής 3 εικονίδια:
•    Black and White: Ορίζει ως χρώματα περιγράμματος και γεμίσματος το μαύρο και το άσπρο αντίστοιχα.
•    No Color: Αφαιρεί το χρώμα γεμίσματος ή περιγράμματος.
•    Swap Colors: Εναλλάσσει τα χρώματα γεμίσματος και περιγράμματος

Η επιλογή Overflow ορίζει τον τρόπο υπερχείλισης της διαβάθμισης πέρα από τα όρια της. Οι επιλογές είναι οι ακόλουθες:
•    Extend: Επεκτείνει το χρώμα πέρα από τα όρια.
•    Reflect: Συνεχίζει η διαβάθμιση ως καθρέφτισμα. Η διαβάθμιση δηλαδή αρχίζει από την αρχή προς το τέλος και στην συνέχεια πάει από το τέλος στην αρχή.
•    Repeat: Συνεχίζει την διαβάθμιση από την αρχή προς το τέλος.

Τέλος, η επιλογή Linear RGB ορίζει τον σαφή ή μη διαχωρισμό των χρωμάτων σε μια διαβάθμιση.

Λογισμικό που χρησιμοποιήθηκε
Adobe Flash CS3