9 Slice Scaling

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

Στο Flash φτιάχνουμε σχήματα τα οποία στην εξέλιξη της ταινίας μπορεί να αλλάξουν μορφή. Το Flash CS3 μας δίνει την δυνατότητα ελέγχου της δυνατότητας αυτής η οποία έχει ως αποτέλεσμα την ομαλή παραμόρφωση ενός αντικειμένου. Η λειτουργία αυτή ονομάζεται 9-Slice Scaling και σε αυτό το βοήθημα θα δούμε όλα όσα χρειάζεται να γνωρίζουμε για την λειτουργία αυτή.

Περιγραφή

Τι είναι το 9-Slice Scaling

Με την λειτουργία αυτή το αντικείμενο διαιρείται σε 9 περιοχές, κάθε μια από τις οποίες μπορεί να μεταβληθεί ανεξάρτητα από τις υπόλοιπες. Η χρησιμότητα της λειτουργίας αυτής φαίνεται όταν χρησιμοποιήσουμε το εργαλείο Free Transform. Η λειτουργία αυτή ενεργοποιείται μέσα από το πλαίσιο διαλόγου Convert to Symbol.

Εικόνα 1 – Το πλαίσιο διαλόγου Convert to Symbol

Εικόνα1

Παράδειγμα

Θα ξεκινήσουμε με την δημιουργία ενός τετραγώνου. Θα δημιουργήσουμε ένα τετράγωνο, στην συνέχεια θα το αντιγράψουμε και έπειτα θα μετατρέψουμε τα δύο αυτά τετράγωνα σε σύμβολα, ένα με ενεργοποιημένη την λειτουργία 9-slice scale και το άλλο χωρίς.

Επιλέξτε το εργαλείο Rectangle, θέστε στην παλέτα properties την τιμή rectangle corner radius ίση με 24 και φτιάξτε ένα τετράγωνο διαστάσεων 100 πλάτος και 30 ύψος. Το τετράγωνο μπορείτε να το σχεδιάσετε ελεύθερα στην αρχή και έπειτα με το εργαλείο selection να το επιλέξετε και να αλλάξετε τις διαστάσεις του από την παλέτα properties.

Εικόνα 2 – Οι ιδιότητες του τετραγώνου

Εικόνα2

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

Εικόνα 3 – Τα δύο τετράγωνα

Εικόνα3

Στην συνέχεια επιλέγουμε το πάνω τετράγωνο, με διπλό κλικ για να πιάσουμε και το περίγραμμα του και  το μετατρέπουμε σε σύμβολο Movie Clip, με χρήση της εντολής Modify > Convert to Symbol. Φροντίζουμε να είναι ενεργοποιημένη η επιλογή Enable guides for 9-slice scaling.

Εικόνα 4 – Το σύμβολο με ενεργοποιημένη την επιλογή

Εικόνα4

Στην συνέχεια επιλέγουμε το κάτω τετράγωνο και το μετατρέπουμε πάλι σε σύμβολο movie clip. Στο πλαίσιο διαλόγου Convert to Symbol φροντίζουμε να έχουμε απενεργοποιημένη την επιλογή Enable guides for 9-slice scaling.

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

Εικόνα 5 – Η προεπισκόπηση των συμβόλων

Εικόνα5

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

Κάνοντας κλικ οπουδήποτε πάνω στο σκηνικό, από-επιλέγουμε τα αντικείμενα και βλέπουμε την διαφορά. Στο πρώτο σύμβολο στο οποίο εφαρμόσαμε το 9-slice scale τα καμπύλα τμήματα του διατηρήθηκαν και αυτό επειδή οι 2 κάθετες γραμμές είναι κοντά στα τμήματα αυτά. Αντίθετα στο δεύτερο σύμβολο έχουν παραμορφωθεί τα καμπύλα τμήματα του όπως και ολόκληρο το αντικείμενο.

Εικόνα 6 – Η διαφορά στην παραμόρφωση

Εικόνα6

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

Εικόνα 7 – Διαφοροποίηση σχήματος βάση της θέσης των γραμμών-οδηγών

Εικόνα7

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

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>