Παρασκευή, 29 Ιανουαρίου 2010

''Φτιάξτε κινούμενα banners με το Flash''

Χρησιμοποιήστε τη δυνατότητα αυτόματης δημιουργίας κίνησης του Flash,για να δημιουργήσετε κινούμενα banners για το site/blog σας.


«Το Flash της Adobe είναι η de facto λύση για τη δημιουργία δυναμικών στοιχείων στο Web με κίνηση και εφέ. Το θετικότερο από τα χαρακτηριστικά της είναι ότι μπορεί να αξιοποιηθεί τόσο από έναν αρχάριο χρήστη όσο και από έναν προχωρημένο developer, με τον πρώτο να δημιουργεί απλά animations και τον δεύτερο να “χτίζει” ολόκληρες εφαρμογές με βάση τη γλώσσα Actionscript που κρύβεται πίσω από το Flash.


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


Το ίδιο μπορεί να γίνει με το μέγεθος ενός αντικειμένου, το χρώμα του κ.λπ. Έτσι, η δημιουργία κίνησης μέσα από το Flash είναι, τελικά, αρκετά εύκολη υπόθεση. Ας δούμε, λοιπόν, πώς γίνεται, εστιάζοντας στα σημαντικότερα σημεία της διαδικασίας.


Βήμα 1ο

Αφού τρέξετε το Flash, διαλέξτε τον τύπο εγγράφου που θέλετε να δημιουργήσετε. Στη δική μας περίπτωση διαλέξαμε ένα τυπικό banner για site. Επομένως, επιλέξτε το Advertising στο Create from Template. Στη συνέχεια θα παρουσιαστεί ένα παράθυρο με τα διαθέσιμα templates. Από εκεί επιλέξτε το 468x60 Full Banner (εκτός και αν προτιμάτε κάποια άλλη ανάλυση).



Βήμα 2ο

Το Flash θα δημιουργήσει και θα παρουσιάσει στο περιβάλλον του έναν κενό καμβά στις διαστάσεις του banner που επιλέξατε. Για να βλέπετε καλύτερα το χώρο εργασίας, επιλέξτε το εργαλείο Zoom (M από το πληκτρολόγιο) και κάντε κλικ επάνω του ή “τραβήξτε” ένα παραλληλόγραμμο γύρω από το σημείο στο οποίο θέλετε να εστιάσετε. Κάνοντας κλικ με πατημένο το Alt κάνετε zoom-out.



Βήμα 3ο

Επιλέξτε το εργαλείο Rectangle (R από το πληκτρολόγιο) και δημιουργήστε ένα παραλληλόγραμμο μεγαλύτερο από το χώρο του καμβά σας και με παραπλήσιες αναλογίες. Στην εικόνα βλέπετε αυτό που δημιουργήσαμε εμείς (για να το δείτε σε σχέση με το χώρο εργασίας, το έχουμε μετακινήσει λίγο προς τα κάτω και δεξιά).



Βήμα 4ο

Αν και προτιμήσαμε ένα απλό, μονόχρωμο παραλληλόγραμμο ως background για το banner, όταν εξοικειωθείτε περισσότερο με το Flash μπορείτε να χρησιμοποιήσετε πιο πολύπλοκα σχήματα, εικόνες κ.λπ. Συνεχίζουμε με το κείμενο. Πρώτα, κάντε κλικ στο εικονίδιο που βρίσκεται στο κάτω αριστερά άκρο της εφαρμογής, της “λευκής σελίδας”, στο πλαίσιο των layers, για να δημιουργήσετε ένα νέο layer. Επιλέξτε το (θα ονομάζεται Layer 2) και μετά επιλέξτε το εργαλείο κειμένου (T από το πληκτρολόγιο), κάντε κλικ σε ένα σημείο του χώρου εργασίας και γράψτε ό,τι επιθυμείτε - π.χ. το όνομα του site σας.



Βήμα 5ο

Το πιθανότερο είναι ότι στη συνέχεια θα θελήσετε να διορθώσετε τόσο το μέγεθος όσο και τη θέση του κειμένου σας. Διαλέγοντας το εργαλείο επιλογής (V από το πληκτρολόγιο) μπορείτε να “πιάσετε” και να μετακινήσετε ένα αντικείμενο (στη συγκεκριμένη περίπτωση το κείμενό σας), ενώ με το εργαλείο τροποποίησης (Q από το πληκτρολόγιο) μπορείτε να αλλάξετε το μέγεθος και τις αναλογίες του. Για να μείνει “κλειδωμένος” ο λόγος ύψος/πλάτος, κρατήστε πατημένο το Shift, καθώς “πειράζετε” ένα αντικείμενο με το εργαλείο τροποποίησης.



Βήμα 6ο

Ο λόγος που δημιουργήσαμε ένα δεύτερο layer για το κείμενο είναι ότι κάθε layer μπορεί να κινείται ανεξάρτητα από τα άλλα. Έτσι, αν βάζαμε στο ίδιο layer το παραλληλόγραμμο και το κείμενο, θα κινούνταν ταυτόχρονα, ως ένα σύνολο. Τώρα που βρίσκονται σε ανεξάρτητα layers, μπορούμε να δώσουμε διαφορετική κίνηση στο καθένα. Επιλέξτε, λοιπόν, το Layer 1 όπου βρίσκεται το παραλληλόγραμμό σας, κάντε δεξί κλικ στο καρέ 100 (η οριζόντια γραμμή δίπλα από κάθε layer αντιστοιχεί στα καρέ στα οποία απλώνεται η κίνησή του) και από το μενού που εμφανίζεται επιλέξτε Create Motion Tween.



Βήμα 7ο

Κάντε πάλι δεξί κλικ στο καρέ 100 και επιλέξτε Insert Keyframe>Position. Επαναλάβετε για το καρέ 50 και το καρέ 1. Επιλέξτε το καρέ 1 και με το εργαλείο επιλογής αντικειμένων (V από το πληκτρολόγιο) διαλέξτε το παραλληλόγραμμο και μετακινήστε το έξω από τον καμβά. Θα δείτε ότι θα εμφανιστεί μία διακεκομμένη γραμμή, η οποία ουσιαστικά δείχνει την κίνηση που θα ολοκληρωθεί από το παραλληλόγραμμο, από το Keyframe όπου βρισκόμαστε μέχρι το επόμενο. Το Flash υπολογίζει/δημιουργεί κινήσεις βάσει της διαφοράς κατάστασης κάθε αντικείμενου ανάμεσα σε δύο keyframes.



Βήμα 8ο

Επαναλάβετε την ίδια διαδικασία για το κείμενό σας. Επιλέξτε, δηλαδή, το Layer 2 προσθέτοντας αντίστοιχα keyframes και αλλάζοντας τη θέση του ανάμεσά τους, ώστε το Flash να δημιουργήσει κίνηση από το ένα keyframe προς το άλλο. Για καλύτερο οπτικό αποτέλεσμα προτείνουμε να μη συγχρονίσετε την κίνηση ανάμεσα σε κείμενο και παραλληλόγραμμο, αλλά, για παράδειγμα, να βάλετε το ένα να μπαίνει από αριστερά και το άλλο από δεξιά. Ολοκληρώστε αποθηκεύοντας το αρχείο κίνησης από το File>Export>Export Movie είτε ως Shockwave Flash Movie (SWF) είτε ως πιο… παραδοσιακό (αλλά και μεγαλύτερο σε μέγεθος) Animated GIF.»



via: pcw.gr

Δεν υπάρχουν σχόλια: