Post Pic

Κινούμενη Σφαίρα στο 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

Trackbacks - Pingbacks

Αφήστε ένα σχόλιο

* Το όνομα σας, το Email, και το σχόλιο είναι απαιτούμενα

Γραφτείτε στις Email Ενημερώσεις

Εισάγετε το email σας:

Powered by FeedBurner

Log In

Register

Lost your Password?

Tag Cloud

Οι Φίλοι μας στο Twitter

lennondtps
FORADA
papaki
gegenos
jsclavos
tophostGR
gkapraras
wdfgr
nfountas
zouri9
Th3Ag3nt
ThodorisV
thevoyager
techfansGR
wp2blog
St0iK
andreas_m68
herath72
Dimitraakis
silve992
kymagr
papano
amorphis_
g_argyrakis
gstam78
nikos171984
gkatsampirhs
GamesHellasGR
kalliophhhh
dimsim7
giorgioret
Zoitsa_2010
ultrathunder
Weird_AL
fotisk
payne4life
splusgr
Chrysanthospro
Serderides
LewisHowes
bartvii
hambos227
ideodoxeio
BeBestT
gamosgamos
Φίλοι: 271 Μας ακολουθούν: 221

To GreekTuts Στο Διαδύκτιο

Bookmark & Share

Γίνε Συνδρομητής Στο GreekTuts


Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.

Γράψτε Για Το GreekTuts


Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.