Κινούμενη Σφαίρα στο Flash

Post Pic
στις 29.10.09. Kατηγορίες Flash με Κανένα Σχόλιο

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

Περιγραφή

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

Η σφαίρα

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

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

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

Εικόνα1

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

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

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

Εικόνα2

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

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

Εικόνα3

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

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

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

Εικόνα4

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

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

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

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

Εικόνα5

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

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

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

Εικόνα6

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

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

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

Εικόνα 7 – Motion Path

Εικόνα7

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

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

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

Εικόνα8

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

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

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

Εικόνα9

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

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

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

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

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

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

membersdownload1

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

Adobe Flash CS3

Tags: , , , ,

Γιώργος Γεωργίου { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
O Γεωργίου Γιώργος είναι προγραμματιστής Η/Υ και Web Developer. Είναι κάτοχος Bachelor σε Computing ενώ είναι Adobe Certified Specialist και Microsoft Office Specialist.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>