2Οκτ

Μάσκα με ντεγκραντέ στο Flash

, 2 Οκτωβρίου 2008 | FLASH | 0 Σχόλια

Η δημιουργία μιας μάσκας με ντεγκραντέ στο Photoshop είναι μια απλή και συγκεκριμένη διαδικασία, σύντομη και καθόλου πολύπλοκη. Στην περίπτωση που θέλετε όμως να φτιάξετε ένα παρόμοιο εφέ στο Flash, τότε τα πράγματα αλλάζουν.Στο σημερινό άρθρο, θα σας παρουσιάσουμε τον τρόπο με τον οποίο μπορείτε να κάνετε κάτι τέτοιο με την βοήθεια 3 γραμμών κώδικα ActionScript 2.0.

Αρχικά δημιουργήστε ένα κενό αρχείο, το οποίο να υποστηρίζει ActionScript 2.0. Στην συνέχεια ορίστε σαν χρώμα του φόντου σας το μαύρο και ορίστε το frame rate στα 25 με 30 frames per second (fps).


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

Δημιουργήστε οτιδήποτε σας αρέσει. Μόλις ολοκληρώσετε το σχήμα σας, μετατρέψτε το σε movie clip πατώντας F8. Ονομάστε το movie clip σας «MC_pacman«. Αφού δημιουργήσετε το «MC_pacman», επιλέξτε το και πάλι και πατώντας F8 άλλη μια φορά μετατρέψτε το και αυτό σε ένα movie clip. Ονομάστε το «MC_pacman_animation«.

Μέσα στο «MC_pacman_animation», επιλέξτε το πρώτο frame και τοποθετήστε το Pacman σας έξω από την σκηνή σας στην αριστερή πλευρά. Μετά επιλέξτε το frame 60 και πατήστε F6 για να δημιουργήσετε ένα όμοιο frame. Επιλέξτε το instance του MC_pacman στο frame 60 και μεταφέρετέ το έξω από την σκηνή σας στην δεξιά πλευρά. Τώρα θα πρέπει το πρώτο σας frame να είναι ένα Pacman στην έξω αριστερή πλευρά της σκηνής σας και το τελευταίο, ένα Pacman στην έξω δεξιά πλευρά. Επιλέξτε με δεξί κλικ ένα τυχαίο frame ανάμεσα σε αυτά τα 2 και διαλέξτε Motion Tween από το μενού που θα εμφανιστεί, για να δώσετε μια κίνηση από αριστερά προς τα δεξιά στο αντικείμενο σας. Μόλις βεβαιωθείτε πως όλα είναι σωστά γυρίστε στο αρχικό επίπεδο του flash αρχείου σας (root).

Ονομάστε το Layer που περιέχει το Pacman σε «pacman» και επιλέγοντας το instance στην σκηνή, δηλώστε σαν instance name «MC_pacman«. Κλειδώστε το layer.

Δημιουργήστε ένα καινούργιο layer, ονομάστε το MASK και φτιάξτε σε αυτό ένα ορθογώνιο το οποίο να πιάνει από την μια άκρη της σκηνής στην άλλη. Χρωματίστε την με ένα gradient όπως αυτό που φαίνεται στην εικόνα. Τα άσπρα τμήματα του degrade κάντε τα αόρατα με την χρήση του Alpha. Μόλις είναι αόρατα θα φανούν τα γνωστά transparency boxes στις άκρες του gradient panel.

Επιλέξτε το ορθογώνιο στην σκηνή σας και πατήστε το F8 για να το μετατρέψετε σε symbol. Ονομάστε το symbol αυτό «MC_Mask«. Δώστε το ίδιο όνομα και στο instance του συμβόλου πάνω στην σκηνή. Μόλις ολοκληρώστε τις διαδικασίες, κλειδώστε το layer MASK.

Η διαδικασία ακόμα δεν έχει ολοκληρωθεί. Το επόμενο βήμα είναι να δημιουργήσετε ένα layer που να λέγεται Actions και έχοντας επιλεγμένο το πρώτο του frame να πατήσετε το F9 για να ανοίξετε το actions panel στο οποίο μπορείτε να γράφετε ActionScript.

Ένα αντικείμενο για να δουλέψει σαν μάσκα (Mask) ή να λειτουργήσει σαν αντικείμενο πίσω από μάσκα (Masked) πρέπει να γίνεται cashed as bitmap. Για να γίνει αυτό, υπάρχουν 2 τρόποι. Ο ένας τρόπος είναι να επιλέξετε το «Use runtime bitmap caching» στο properties panel των αντικειμένων, ή να το ορίσετε με ActionScript. Για να το ορίσετε με ActionScript εισάγετε τον παρακάτω κώδικα:

MC_mask.cacheAsBitmap = true;
MC_pacman.cacheAsBitmap = true;

Στην συνέχεια θα πρέπει να ορίσετε πoιο layer θα λειτουργεί σαν μάσκα του άλλου layer. Οπότε συμπληρώστε άλλη μια γραμμή κώδικα:

MC_mask.cacheAsBitmap = true;
MC_pacman.cacheAsBitmap = true;
MC_pacman.setMask(«MC_mask»);

Όλα είναι έτοιμα. Πατώντας το Ctrl + Enter μπορείτε να δείτε τα αποτελέσματα της εργασίας σας.

Σε περίπτωση που επιθυμείτε να αποθηκεύσετε τα πηγαία αρχεία του συγκεκριμένου άρθρου, πατήστε εδώ.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μάσκα με ντεγκραντέ στο Flash γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter