Post Pic

Εκπαίδευση Flash : Σύμβολα και Κίνηση

Σε προηγούμενα βοηθήματα και άρθρα κάναμε την εισαγωγή στο Flash και είδαμε το UI και τα βασικά στοιχεία του προγράμματος. Στο σημερινό βοήθημα θα μιλήσουμε για τα σύμβολα και την κίνηση(animation) στο Flash.

Εισαγωγή

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

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

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

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

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

Εικόνα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 – Τύποι συμβόλων

Εικόνα2

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

Εικόνα3

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

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

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

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

Εικόνα4

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

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

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

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

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

Εικόνα5

Τύποι Tweeining

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

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

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

Εικόνα 6 – Motion Tween 1

Εικόνα6

Εικόνα 7 – Motion Tween 2

Εικόνα7

Εικόνα 8 – Shape Tween 1

Εικόνα8

Εικόνα 9 – Shape Tween 2

Εικόνα9

Διαφορές

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

Εικόνα10

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

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; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.