Η ΑctionScript είναι η script που χρησιμοποιεί το Flash της Adobe. Με την χρήση της ActionScript ένας web developer μπορεί να διευρύνει τις δυνατότητες του Flash application ή του Flash website που δημιουργεί. Στο σημερινό άρθρο θα σας παρουσιάσουμε μια τεχνική με την οποία μπορείτε να βάζετε αντικείμενα σε τροχιά γύρω από άλλα.

Βήμα 1

Ανοίξτε ένα καινούργιο αρχείο το οποίο να χρησιμοποιεί ActionScript 2.0.

Βήμα 2

Δημιουργήστε 2 movie clips στη σκηνή του Flash. Oνομάστε το instance του ενός, earth και το άλλο ονομάστε το satellite.

Προσοχή, όταν τα δημιουργείτε, θέστε το σημείο αναφοράς τους στο κέντρο.

Όταν αναφερόμαστε στο instance ενός Movie Clip, αναφερόμαστε στο όνομα που δίνουμε στο αντίγραφο του Movie clip που βρίσκεται εκείνη την στιγμή στη σκηνή του Flash. Κάθε φορά που εισάγουμε το ίδιο Movie clip στη σκηνή, δημιουργείται ένα διαφορετικό instance από το ίδιο Movie clip.

Βήμα 3

Επιλέξτε το instance satellite και ανοίξτε το Actions panel (F9 Win ή ALT+F9 Mac). Στο Actions panel επικολλήστε τον παρακάτω κώδικα:

onClipEvent(load){
angle=0//degrees
mainDistance=100//pixels
}
onClipEvent(enterFrame){
angle+=5
xDistance=Math.sin(angle * Math.PI/180)*mainDistance
yDistance=Math.cos(angle * Math.PI/180)*mainDistance
xDisCalculated=_root.earth._x-xDistance
yDisCalculated=_root.earth._y-yDistance
this._x=xDisCalculated
this._y=yDisCalculated
}

Βήμα 4

Κάντε publish το .swf για να δείτε το satellite να βρίσκεται σε τροχιά γύρω από το centre.
Δείτε το παράδειγμα.

Τώρα μπορείτε να φτιάξετε το δικό σας πλανητικό σύστημα, μόνο με ActionScript 2.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 websites που αξίζει να δείτε – μέρος 1ο» σας παρουσιάζουμε το 2o μέρος με τα υπόλοιπα Flash websites.

1. The Happiness Factory
   http://www.coca-cola.com/template1/index.jsp?locale=en_US&site=../happiness_factory/index.html
   
2. Bergmann Metallbau
   http://www.bergmann-metallbau.de/
   
3. Toyota Yaris Virtual Test Drive
   http://www.toyota.com/vehicles/minisite/yaris/experience/
   
4. Proxonic Visuals
   http://www.proxonicvisuals.com/site/
   
5. 99 Rooms
   http://www.99rooms.com
   
6. Turbo Chef
   http://theovenreinvented.com/
   
7. Uniqlo
   http://www.uniqlo.com/us/ (κάντε κλίκ στον σύνδεσμο Uniqlo Explorer)
   
8. Dave Werner
   http://www.okaydave.com/
   
9. Levitated
   http://levitated.net/daily/index.html
   
10. Help the Honey Bees
    http://www.helpthehoneybees.com/
    

Απλά εκπληκτικά…

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

Το Web Design Blog σας παρουσιάζει μερικά εκπληκτικά Flash websites που αξίζει να δείτε:

1. National Grid
   http://www.nationalgridfloe.com/
2. Mathieu Badimon
   http://lab.mathieu-badimon.com/
3. The Eco Zoo
   http://ecodazoo.com/
4. Lacoste Future
   http://www.lacoste-future.com/
5. Section Seven
   http://sectionseven.com/
6. DVEIN
   http://www.dvein.com/
7. Kid’s Cold Aid
   http://demo.fb.se/e/apoteket/sneezeaid/site/index_en.html
8. VodaFone Journe
   http://www.vodafonejourney.com/
9. Virtual Knee Surgery
   http://www.edheads.org/activities/knee/
10. Get The Glass
    http://www.gettheglass.com/
11. Our Vice
    http://www.ourvice.com/

συνεχίζεται…

Το Flash CS3 είναι ένα εργαλείο που το χρησιμοποιούν τόσο οι Web Designers (για animations), όσο και οι Web Developers ή Action Scripters (για ανάπτυξη εφαρμογών). Οι δύο αυτές ομάδες αν και χρησιμοποιούν το ίδιο εργαλείο με κοινούς στόχους (τη δημιουργία ενός project) συνήθως χρησιμοποιούν διαφορετικές μεθόδους.

Από τη μια πλευρά, οι Web Designers, επειδή είναι οπτικοί τύποι, δημιουργούν animations με τη χρήση του Timeline και παραδίδουν το αποτέλεσμα στους Web Developers για να το χειριστούν με κώδικα. Από την άλλη όμως, οι Web Developers θα λέγαμε ότι δυσκολεύονται ιδιαίτερα στο να αναπτύξουν με κώδικα το animation που έχει δημιουργηθεί με αυτό το εργαλείο.

Το Flash CS3 έρχεται με μια λειτουργία που επιχειρεί να γεφυρώσει αυτή την διαφορά “απόψεων” και να προσφέρει και στις 2 ομάδες αυτό που θέλουν με τον τρόπο που θέλουν. Η λειτουργία αυτή ονομάζεται “Copy Motion as ActionScript 3.0″ και από το όνομά της είναι ξεκάθαρο ότι μπορεί να χρησιμοποιηθεί μονάχα αν το αρχείο που χρησιμοποιείται είναι AS3 Flash file. Σε αυτό το άρθρο θα δείτε πώς μπορείτε να εκτελέσετε αυτή τη λειτουργία, μετατρέποντας ένα Timeline Animation (Σειριακή κίνηση με καρέ) σε Codebased Animation (κίνηση με κώδικα) AS3.

Βήμα 1ο (Δημιουργία ενός AS3 Flash αρχείο)
Ανοίξτε το Flash CS3 και στην αρχική οθόνη όπου σας δίνονται πολλές επιλογές χωρισμένες σε 3 στήλες, επιλέξτε από την στήλη Create New την πρώτη επιλογή που ονομάζεται “Flash File (ActionScript 3.0)”. Κάνοντας αυτή την επιλογή θα έχετε δώσει εντολή στο Flash CS3 να δημιουργήσει ένα Flash αρχείο που να υποστηρίζει την ActionScript 3.0 και όχι την προηγούμενή της έκδοση, την ActionScript 2.0. Στο πάνελ των ιδιοτήτων (Properties), πατήστε το κουμπί μεγέθους (Size) για να ανοίξετε τις ιδιότητες του αρχείου. Συντονίστε τον ρυθμό αναπαραγωγής (Frame Rate) στα 30fps, χρωματίστε μαύρο το background, καθορίστε το πλάτος (Width) στα 800px και το ύψος (Height) στα 600px και πατήστε ΟΚ. Κάντε διπλό κλικ στο πρώτο layer στο Timeline, μετονομάστε το σε Actions, και μετά κλειδώστε το.

Βήμα 2ο (Εισαγωγή γραφικού)
Κάντε κλικ στο κουμπί εισαγωγής Layer (Insert Layer) για να δημιουργήσετε ένα καινούργιο layer. Ονομάστε το “phone”. Σε αυτό το Layer θα τοποθετηθεί το γραφικό του τηλεφώνου. Έχοντας επιλεγμένο το πρώτο καρέ (Keyframe), πατήστε Ctrl-R για PC ή Command-R για Mac για να ανοίξετε το pop up της εισαγωγής εξωτερικού αρχείου (Import). Επιλέξτε το αρχείο που θέλετε να εισάγετε – στην περίπτωσή μας το τηλέφωνο – και πατήστε Import. Επιλέξτε το νέο εισαγόμενο γραφικό σας στην κεντρική οθόνη ή σκηνή (Stage) και πατήστε το F8 για να μετατρέψετε το γραφικό σε σύμβολο (Symbol). Όταν ανοίξει το pop up επιλέξτε Movie Clip, ονομάστε το “phoneClip” και πατήστε ΟΚ. Στην συνέχεια επιλέξτε το Movie Clip και ονομάστε το στιγμιαίο αντίγραφό (Instance) του, “phone” από το πάνελ ιδιοτήτων (Properties).

Βήμα 3ο (Ρυθμίζοντας το Timeline)
Το επόμενο βήμα είναι να προσθέσετε μερικά frames στο Timeline ώστε να υπάρχει χώρος να εξελιχθεί το animation. Για να το πετύχετε αυτό, επιλέξτε το frame 30 και στα 2 layers κάνοντας κλικ και κρατώντας πατημένο το κουμπί του ποντικιού (click and drag) μέχρι να επιλεχθούν και τα 2 frames των 2 layers. Αφού επιλέξετε και τα 2 frames πατήστε F5 για να προσθέσετε τα καινούργια frames. Επιλέξτε το frame 1 στο phone layer. Θα φτιάξετε ένα animation το οποίο θα δείχνει το τηλέφωνο να μπαίνει από αριστερά προς τα δεξιά και στη συνέχεια να μεγαλώνει σε μέγεθος. Στο πάνελ των ιδιοτήτων (Properties) τοποθετήστε το (x) του Movie Clip σε 360. Πηγαίνετε στο πάνελ της μεταβολής (Transform panel) πατώντας Window>Transform και κάντε το μέγεθος του movie clip 50% τόσο στον άξονα του x, όσο και στον άξονα του y.

Βήμα 4ο (Από αριστερά προς τα δεξιά)
Επιλέξτε το frame 12 στο layer του τηλεφώνου και πατήστε το κουμπί F6 στο πληκτρολόγιό σας για να εισάγετε ένα καινούργιο keyframe. Στη συνέχεια επιλέξτε το phone clip και τοποθετήστε το στη θέση x=159. Κάντε δεξί κλικ (PC) ή Ctrl-κλικ (Mac) ενδιάμεσα στα 2 keyframes στο επίπεδο (layer) που βρίσκεται το τηλέφωνο και επιλέξτε την εντολή Create Motion Tween (Δημιουργία κίνησης). Στο πάνελ των ιδιοτήτων (Properties) μετακινήστε το ease slider στο 100. Στην συνέχεια επιλέξτε το πρώτο keyframe στο layer του τηλεφώνου και μετά επιλέξτε το movie clip του τηλεφώνου που βρίσκεται στη σκηνή του Flash. Ανοίξτε το πάνελ των φίλτρων (Filters panel) και κάντε κλικ στο (+) που βρίσκεται στο πάνω αριστερό μέρος του πάνελ. Όταν ανοίξει το μενού, επιλέξτε Blur (Θαμπάδα) και ρυθμίστε τις παραμέτρους σε X=100 και Y=0.

Βήμα 5ο (Η παύση)

Δοκιμάστε την ταινία σας πατώντας Ctrl-Enter (PC) ή Command-Return (Mac). Αν όλα έχουν γίνει σωστά, θα δείτε μια κίνηση του τηλεφώνου από αριστερά προς τα δεξιά. Στην συνέχεια θα επιλέξετε το Frame 16 στο layer που βρίσκεται το τηλέφωνο και θα πατήσετε F6 για να δημιουργήσετε σε αυτό το σημείο ένα καινούργιο keyframe. Σκοπός είναι να δημιουργηθεί μια στιγμιαία παύση στην κίνηση του τηλεφώνου. Η παύση αυτή θα δημιουργηθεί με την δημιουργία των 4 κοινών keyframes στο σημείο πριν αρχίσει να εξελίσσεται η κίνηση, όπως φαίνεται και στην εικόνα.

Βήμα 6ο (Αλλαγή μεγέθους)
Επιλέξτε το frame 30 στο layer που βρίσκεται το τηλέφωνο και πατήστε F6 για να δημιουργήσετε ένα καινούργιο keyframe. Στην συνέχεια επιλέξτε το movie clip του τηλεφώνου πάνω στην σκηνή, ανοίξτε το πάνελ Transform και καθορίστε το μέγεθος και για τους δυο άξονες στο 100%. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) ενδιάμεσα στα keyframes 16 και 30 στο επίπεδο (layer) που βρίσκεται το τηλέφωνο και επιλέξτε την εντολή Create Motion Tween (Δημιουργία κίνησης). Στο πάνελ των ιδιοτήτων (Properties) μετακινήστε το ease slider στο 100. Επιλέξτε το frame 23 και εισάγετε άλλο ένα keyframe. Από το πάνελ των φίλτρων (Filters panel) επιλέξτε Blur (Θαμπάδα) και ρυθμίστε τις παραμέτρους σε X=15 και Y=15.

Βήμα 7ο (Ολοκλήρωση κίνησης)
Δοκιμάστε την ταινία και αν όλα έχουν γίνει σωστά θα δείτε ένα όμορφο αποτέλεσμα. Η κίνησή σας όμως επαναλαμβάνεται μόλις φτάσει στο τέλος . Για να την κάνετε να μην επαναλαμβάνεται, θα προσθέσετε μια εντολή stop στο τέλος του Timeline σας. Επιλέξτε το frame 30 στο layer που ονομάζεται Actions και πατήστε το πλήκτρο F6 για να εισάγετε ένα καινούργιο keyframe. Στην συνέχεια επιλέξτε το νέο σας keyframe, ανοίξτε το πάνελ εντολών (Actions Panel) και πληκτρολογήστε την εντολή stop(); για να ρυθμίσετε την ταινία σας να σταματήσει στο συγκεκριμένο σημείο. Δοκιμάστε άλλη μια φορά την ταινία σας για να ελέγξετε ότι όλα είναι σωστά.

Βήμα 8ο (Η μετατροπή της κίνησης σε κώδικα)
Έφτασε η στιγμή να μετατρέψετε την κίνηση που έχετε δημιουργήσει στα προηγούμενα βήματα, σε ActionScript κώδικα. Επιλέξτε όλα τα frames στο layer του τηλεφώνου, κάνοντας κλικ και κρατώντας πατημένο το κουμπί του ποντικού μέχρι να επιλεχθούν και τα 30 frames. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) στα επιλεγμένα frames και επιλέξτε την εντολή Copy Motion as ActionScript 3.0 (Αντιγραφή κίνησης ως ActionScript 3.0). Στην συνέχεια θα ανοίξει ένα παράθυρο που θα σας ρωτήσει το όνομα του instance του animation. Εισάγετε “phone” και πατήστε ΟΚ.

Βήμα 9ο (Επικόλληση του κώδικα)
Επιλέξτε το πρώτο keyframe στo layer που ονομάζεται Actions και ανοίξτε το Actions Panel (F9). Επικολλήστε τον κώδικα στον κενό χώρο του πάνελ πατώντας Ctrl-V (PC) ή Command-V (Mac). Ο κώδικας που έχει δημιουργηθεί, είναι ένας συνδυασμός ActionScript κώδικα και XML, το οποίο (XML) έχει αναπτυχθεί ειδικά για την κίνηση που δημιουργήσαμε.

Βήμα 10ο (Διαγραφή κίνησης)
Η ActionScript που δημιουργήσατε στο προηγούμενο βήμα θα αναλάβει πλέον την κίνηση του τηλεφώνου επί της σκηνής. Αυτό καθιστά την κίνηση που έχουμε φτιάξει στο Timeline άχρηστη. Για να διαγράψετε την κίνηση και όλα τα περιττά frames από το .fla αρχείο σας, επιλέξτε όλα τα frames και από τα 2 layers εκτός του frame 1. Κάντε δεξί κλικ (PC) ή Ctrl κλικ (Mac) στα επιλεγμένα frames και επιλέξτε την εντολή Remove Frames (Διαγραφή). Δοκιμάστε πάλι την ταινία σας. Όλα φαίνονται ίδια, αλλά αυτή την φορά δεν έχετε Timeline animation.

Βήμα 11ο (Κατανόηση του κώδικα)
Στην πρώτη γραμμή του κώδικα, το Flash εισάγει το απαραίτητο Code Library (βιβλιοθήκη). Ένα καινούργιο XML αντικείμενο (XML Object) δημιουργείται στη 2η γραμμή. Το αντικείμενο αυτό χρησιμοποιείται για την αποθήκευση του κώδικα XML που είναι απαραίτητο για την κίνηση. Αυτό το XML data χωρίζεται σε 2 βασικά μέρη: Πρώτον, υπάρχει ο κώδικας που περιγράφει το αντικείμενο που βρίσκεται σε κίνηση και δεύτερον από την γραμμή 14 και μετά μπορείτε να δείτε όλη την πληροφορία που έχει σχέση με τα keyframes, και την πληροφορία της κίνησης που δημιουργήσατε στο Timeline. Στην συνέχεια, ένα καινούργιο αντικείμενο (object) δημιουργείται με την χρήση του XML κώδικα και με την τελευταία γραμμή κώδικα, αρχίζει η κίνηση.

Βήμα 12ο (Keyframe Data)
Αν κοιτάξετε στα keyframe tags στον κώδικα XML, θα δείτε πως υπάρχει μια παράμετρος που ονομάζεται “index”. Σε αυτή την παράμετρο, αναφέρεται το νούμερο του frame στο οποίο αρχίζει το συγκεκριμένο keyframe και στο οποίο αναφέρεται ο κώδικας. Θα παρατηρήσετε ότι τα νούμερα είναι πάντα -1 (ένα νούμερο μικρότερο) γιατί η αρίθμηση στον κώδικα αρχίζει από το 0 και όχι από το 1. Οπότε, αν αλλάξετε τις τιμές αυτές, μπορείτε να αλλάξετε τον χρονισμό των κινήσεων του animation. Π.χ. εάν αλλάξετε την τιμή στην γραμμή 23 σε “5″, θα διπλασιαστεί η ταχύτητα της κίνησης.

Βήμα 13ο (Αλλάζοντας το animation)
Αν παρατηρήσετε μερικές τιμές στον κώδικα να διαφέρουν από τις τιμές που είχατε δώσει αρχικά στο Timeline animation, μην ανησυχείτε, είναι φυσιολογικό. Για να αποκτήσετε μια καλύτερη αίσθηση του κώδικα, θα δείτε πώς μπορείτε να μεταφέρετε το κινητό όχι από αριστερά προς τα δεξιά, αλλά το αντίθετο.
Πηγαίνετε στην γραμμή 14 του κώδικα όπου βρίσκεται το πρώτο σας keyframe, προσθέστε μια νέα παράμετρος (x) και ορίστε την τιμή της στα 1000. Αυτή η ενέργειά σας θα τοποθετήσει το κινητό τηλέφωνο στα δεξιά της οθόνης όταν αρχίσει την επόμενη φορά το animation. Δοκιμάστε το να δείτε το αποτέλεσμα.

Βήμα 14ο (Συμπεράσματα)
Ο παραγόμενος κώδικας σάς δίνει την δυνατότητα να παραμετροποίησετε την κίνηση του animation σας με αναρίθμητους τρόπους. Αν κοιτάξετε στα αρχεία βοήθειας (Help Files) του Flash, θα βρείτε σχετικές συμβουλές. Το έργο που δημιουργήσατε μπορεί να δοθεί σε έναν προγραμματιστή ο οποίος έχει πλέον τη δυνατότητα να μετατρέψει τις τιμές σε δυναμικές μεταβλητές και να ανοίξει έτσι νέους ορίζοντες στον τρόπο προβολής του animation σας.

Μέχρι πρότινος για να γίνει εισαγωγή αρχείων από το Photoshop (.psd) στο Flash, έπρεπε να ακολουθηθούν συγκεκριμένες διαδικασίες οι οποίες ήταν χρονοβόρες. Έτσι, όταν ερχόταν η στιγμή να μεταφέρει ο Web Designer τα γραφικά που είχε σχεδιάσει από το ένα πρόγραμμα στο άλλο, ήξερε πως έφτανε η στιγμή εκείνη που έπρεπε να “χάσει” χρόνο από την παραγωγή για να κάνει τις απαραίτητες ενέργειες μεταφοράς.

Το Creative Studio 3 της Adobe, έχει εισάγει μια λειτουργία στο Flash η οποία είναι πολύ χρήσιμη: την αυτοματοποιημένη διαδικασία εισαγωγής ενός Photoshop (.psd) αρχείου στο Flash CS3. Η διαδικασία είναι σχετικά απλή και καταφέρνει να διατηρεί το layout και άλλες πληροφορίες ακέραιες. Για χάρη αυτού του tutorial δημιουργήσαμε ένα ψεύτικο εικαστικό για ένα full flash website το οποίο είναι για το Web Design Blog Caffe.

Βήμα 1

Οργανώστε όλα τα στοιχεία του εικαστικού σας σε ξεχωριστά Photoshop layers πριν κάνετε import οτιδήποτε στο Flash CS3. Είναι σημαντικό να μην το ξεχάσετε αυτό γιατί θα δυσκολευτείτε στο ξεκαθάρισμα των imports σας μετά. Αποθηκεύστε το αρχείο σας σαν .psd στον φάκελο που δουλεύετε το project σας.

Βήμα 2

Στην συνέχεια μεταβείτε στην εφαρμογή Flash CS3. Πλοηγηθείτε στο μενού File>Import>Import to Stage. Επιλέξτε το .psd αρχείο που σώσατε στο προηγούμενο βήμα.

Βήμα 3

Θα εμφανιστεί ένα περιβάλλον που θα δείχνει από αριστερά όλα τα layers του Photoshop αρχείου σας, και από δεξιά λεπτομέρειες σχετικά με το κάθε layer που θα επιλέγετε κάθε φορά. Στο κάτω μέρος του παραθύρου θα εμφανιστούν κάποιες άλλες σημαντικές επιλογές που θα αναλύσουμε στην συνέχεια. Σε αυτό το σημείο το Flash CS3 έχει αναγνωρίσει και έχει διαβάσει το αρχείο σας και είναι έτοιμο να δεχτεί τις οδηγίες σας σχετικά με το πώς θέλετε να γίνει η εισαγωγή των στοιχείων σας.

Βήμα 4

Επιλέγοντας ένα ή και περισσότερα layers από την αριστερή πλευρά του παραθύρου, σας δίνεται πρόσβαση σε λειτουργίες που καθορίζουν τον τρόπο με τον οποίο γίνεται import κάθε στοιχείο. Στην παραπάνω εικόνα μπορείτε να δείτε πως αν επιλέξετε ένα text layer, εμφανίζονται 3 επιλογές. Editable text για να παραμείνει το text layer σαν επεξεργάσιμο κείμενο, Vector outlines για να γίνει το κείμενό σας διανυσματικό γραφικό ώστε να μπορέσετε να το επεξεργαστείτε σαν γραφικό και Flattened bitmap image για να γίνει το text σας pixel image. Αν θέλετε μπορείτε να δημιουργήσετε movie clips & movie clip instances για κάθε ένα εισαγόμενο layer ξεχωριστά.

Βήμα 5

Όπως βλέπετε στην παραπάνω εικόνα του παραθύρου του Flash CS3 importer, έχει γίνει επιλογή της δεύτερης λειτουργίας (Vector outlines), δίνοντας στον Web Designer την δυνατότητα να δημιουργήσει κατευθείαν ένα Movie clip. Αυτό γίνεται εμφανές και από την αλλαγή στο εικονίδιο στο layer WebDesignBlog Caffe από ένα κεφαλαίο Τ στο σύμβολο του Movie Clip.

Βήμα 6

Αν θέλετε να εισάγετε μια εικόνα στο Flash CS3 έχετε δύο επιλογές: μπορείτε να την εισάγετε σαν Lossy ή σαν Lossless. Lossy είναι μια εικόνα που εισάγεται σαν JPEG, οπότε δεν μπορεί να υποστηρίξει transparency, ενώ Lossless είναι μια εικόνα που εισάγεται σαν PNG 24bit, ένα είδος γραφικού που έχει πολύ καλή υποστήριξη transparency. Στην περίπτωση του demo, η εισαγωγή των εικονιδίων που έχουν ένα glow effect γύρω τους, εισάγονται σαν Lossless για να διατηρήσουν τις διαφανείς και ημιδιαφανείς ιδιότητές τους χωρίς προβλήματα. Δεν φτάνει όμως μόνο να επιλέξετε Lossless ώστε να πετύχετε το κατάλληλο transparency. Για να πετύχετε το αποτέλεσμα που θέλετε (transparency) θα πρέπει να έχετε επιλέξει και την επιλογή Bitmap Image with Editable Layer Styles.

Βήμα 7

Στο κάτω μέρος του παραθύρου, υπάρχουν 3 επιλογές. Το drop down μας δίνει την επιλογή Keyframes ή Flash Layers. Η πρώτη επιλογή εισάγει το κάθε στοιχείο σε ξεχωριστά keyframes, ενώ η δεύτερη επιλογή σε ξεχωριστά Flash layers, το ένα κάτω από το άλλο. Στην συνέχεια η επιλογή Place layers at original position, επιτρέπει τα στοιχεία να εμφανιστούν ακριβώς στα σημεία που ήταν και στο .psd αρχείο. Τέλος η επιλογή Set Stage Size to Same Size as Photoshop Canvas κάνει τον καμβά του Flash να έχει το ίδιο ακριβώς μέγεθος με αυτό που είχε το .psd αρχείο σας. Έτσι το τελικό αποτέλεσμα του import είναι ακριβώς το ίδιο με αυτό του Photoshop αρχείου σας, όπως φαίνεται στην τελευταία εικόνα στο βήμα 8.

Βήμα 8

Ολοκληρώθηκε με επιτυχία η διαδικασία του import ενός Photoshop αρχείου στο περιβάλλον του Flash CS3. Δοκιμάστε το.