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

Post Pic
στις 16.10.09. Kατηγορίες 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

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>