Ανάπτυξη

Εισαγωγή

Για να θυμηθούμε παλιότερο άρθρο, ένα κουμπί είναι ένα σύμβολο το οποίο αποθηκεύεται στην βιβλιοθήκη και χρησιμοποιείται στο σκηνικό όσες φορές θέλουμε. Το κουμπί έχει τέσσερις καταστάσεις 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

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