Κινούμενα γραφικά και διαδραστικότητα

Transcript

1 ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Κινούμενα γραφικά και διαδραστικότητα Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Actions panel Object oriented programming Βασικά στοιχεία της ActionScript Βιβλιογραφία Adobe Creative Team [2007]: Κεφάλαιο 6 Green [2007]: Chapter 5 Kerman [2007]: Chapter 15 1

2 Εισαγωγή Διαδραστικές ταινίες έχουν διαφορετική εξέλιξη ανάλογα με τις επιλογές που κάνει χρήστης: Επιλογή ενός συγκεκριμένου κουμπιού μπορεί να εμφανίσει ένα συγκεκριμένο τμήμα μιας ταινίας Η κίνηση του ποντικιού πάνω από ένα κουμπί μπορεί να μας εμφανίσει τη χρησιμότητα του συγκεκριμένου κουμπιού Επειδή οι επιλογές του χρήστη δεν είναι εκ των προτέρων γνωστές χρειάζεται κάποια πρόβλεψη των ενεργειών του: Αν ο χρήστης κάνει την επιλογή X (δράση action) εσύ (ταινία) πρέπει να απαντήσεις με τη δράση Υ (αντίδραση reaction) Για τον καθορισμό των αντιδράσεων πρέπει να χρησιμοποιηθεί προγραμματισμός (συγγραφή κώδικα) Στο Flash ο προγραμματισμός υποστηρίζεται με την γλώσσα προγραμματισμού ActionScript Actions Panel Εργαλειοθήκη Δράσεων (Actions toolbox) Πλοηγός κώδικα (Script Navigator) Χώροςγραφήςκώδικα(Script Pane) 2

3 Actions Panel (II) Actions toolbox: Κατάλογος διαθέσιμων λειτουργιών μέσω της ActionScript (αναζήτηση κλάσεων και μεθόδων για τα διάφορα στοιχεία μιας ταινίας) Script pane: Περιοχή συγγραφής κώδικα ActionScript Script Navigator: Μας δείχνει ποια καρέ σε ποια σκηνή είναι συσχετισμένα με κώδικα Object oriented programming Η ActionScript είναι μια γλώσσα προγραμματισμού που βασίζεται σε αντικείμενα (όπως είναι η Java, η C++, κ.ο.κ). Στο πλαίσιο της ActionScript (αλλά και οποιασδήποτε άλλης αντικειμενοστραφούς γλώσσας προγραμματισμού) τα πάντα θεωρούνται αντικείμενα (καρέ, movie clips, buttons, μαθηματικές συναρτήσεις, κ.ο.κ) Οι κλάσεις (class) καθορίζουν τα αντικείμενα: Για παράδειγμα η κλάση σκύλος καθορίζει όλες τις ιδιότητες που μπορεί να έχει ένας σκύλος (μουσούδα, τρίχωμα, ουρά) και τις δράσεις που μπορεί να κάνει (τρέξιμο, κούνημα ουράς, γαύγισμα). Συγκεκριμένα σκυλιά (Max, Azor, Lassie) αποτελούν υποδείγματα (instances) της κλάσης σκύλος και παρότι μοιράζονται κοινές ιδιότητες (π.χ. τρίχωμα) έχουν διαφορετικές τιμές για τις ιδιότητες αυτές (Max => γκρι τρίχωμα, Azor => καφέ) Η κλάση σκύλος είναι μια κατηγορία της κλάσης «ζώο». Ως τέτοιο κληρονομεί και όλες τις ιδιότητες της κλάσης «ζώο» (4 πόδια, κεφάλι, ουρά, κ.ο.κ) 3

4 Object oriented programming (ΙΙ) Κάθε αντικείμενο στην Actionscript χαρακτηρίζεται από: Τις ιδιότητες του (properties) Τα πράγματα τα οποία μπορεί να κάνει (methods) Τις ενέργειες στις οποίες αντιδρά (events) Παράδειγμα κλάσης στο Flash Movieclip Has dimensions (property) Has timeline (property) Can play (method) Reacts to mouse over (event) Ιδιότητες (properties) Ιδιότητες => Τα χαρακτηριστικά που έχει ένα αντικείμενο: Movieclip, position (θέση ενός συγκεκριμένου movie clip) Μπορούμε να έχουμε πρόσβαση στις ιδιότητες ενός υποδείγματος κάποιου αντικειμένου (δηλαδή ενός συγκεκριμένου movieclip το οποίο έχει συγκεκριμένο όνομα). Δεν μπορούμε, για παράδειγμα, να ρωτήσουμε πόσο ύψος έχει ο άνθρωπος, διότι η απάντηση θα είναι ποιος από όλους τους ανθρώπους; Μπορούμε όμως να ρωτήσουμε «πόσο ύψος έχει ο Κώστας Χ.;» Κάθε υπόδειγμα μιας κλάσης έχει ένα όνομα το οποίο καθορίζεται από την ιδιότητα Instance Name. 4

5 Παράδειγμα Δημιουργήστε ένα νέο αρχείο Flash (Box1.fla) Ονομάστε το Layer 1 σε «Content». Δημιουργήστε ένα νέο layer και ονομάστε το «Scripts» Είναι πάγια τακτική στο Flash ο κώδικας να τοποθετείται σε δικό του ξεχωριστό layer Στο Contents layer σχηματίστε ένα ορθογώνιο διαστάσεων 75x100 pixels. Μετατρέψτε το σε σύμβολο movie clip με το όνομα «rect». Επιλέξτε το υπόδειγμα στη σκηνή και δώστε του instance name box Εισάγετε ένα keyframe στο καρέ 50 και μετακινήστε το ορθογώνιο σας στην κάτω αριστερή γωνία του σκηνικού περιστρέφοντας το 45 μοίρες και διπλασιάζοντας το μέγεθος του Δημιουργήστε motion tween. Στο καρέ 5 του layer Scripts τοποθετήστε ένα keyframe. Ανοίξτε το Actions panel και στο Script pane γράψτε τη γραμμή κώδικα: trace(box.x, box.y); Ελέγξτε την ταινία που δημιουργήσατε Παράδειγμα (συν.) Στο καρέ 20 του layer Scripts προσθέστε τις εξής γραμμές κώδικα: box.x = 300; box.y = 100; box.width = 300; Ελέγξτε την ταινία που δημιουργήσατε Τι παρατηρείτε; 5

6 Μέθοδοι (methods) Μέθοδοι => Τι μπορεί να κάνει ένα αντικείμενο: Movieclip, stop (σταμάτημα του movie clip) Μπορούμε να δώσουμε εντολή σε ένα αντικείμενο να κάνει κάτι (π.χ. somemovieclip.stop(), somemovieclip.gotoandplay) Παράδειγμα: Στην προηγούμενη άσκηση τροποποιήστε το movie clip box εισάγοντας στο δικό του timeline ένα νέο keyframe στο καρέ 2. Στο καρέ αυτό αφαιρέστε το ορθογώνιο και αντικαταστήστε το με ένα κύκλο. Ελέγξτε την ταινία σας. Τι παρατηρείτε; Πωςθαμπορούσαμεναέχουμεμόνοτοορθογώνιοναμετασχηματίζεται; Πως θα μπορούσαμε να έχουμε μόνο τον κύκλο να μετασχηματίζεται; Γεγονότα (events) Events => Δράσειςστιςοποίεςένααντικείμενοαντιδρά Τα γεγονότα συνήθως αντικατοπτρίζουν μια ενέργεια του χρήση όπως αυτή διαβιβάζεται μέσω του ποντικιού (MouseEvent.CLICK, MouseEvent.OVER) ή του πληκτρολογίου (KeyboardEvent.KEY_DOWN) Για να αντιδράσει ένα αντικείμενο σε ένα event χρειάζεται: Να μπορεί να το ακούσει (someobject.addeventlistener (someevent, someeventhandler)) Να οριστεί ο τρόπος αντίδρασης (μέσω της συνάρτησης someeventhandler) Παράδειγμα: Στην προηγούμενη άσκηση τροποποιήστε επιθυμούμε όταν τοποθετούμε το ποντίκι μας πάνω στο ορθογώνιο αυτό να μετασχηματίζεται σε κύκλο. Τι χρειάζεται να κάνουμε; 6

7 Γεγονότα (ΙΙ) Απάντηση στο παράδειγμα: Τοποθετούμε στο καρέ 1 του layer Scripts τον πιο κάτω κώδικα: box.stop(); box.addeventlistener(mouseevent.mouse_over, mouseoverhandler); box.buttonmode = true; function mouseoverhandler(evt:object):void { box.gotoandstop(2); Βασικά στοιχεία της ActionScript Σε κάθε γλώσσα προγραμματισμού χρησιμοποιούμε συγκεκριμένο τρόπο με τον οποίο γράφουμε τον κώδικα μας: Όπως κάθε ανθρώπινη γλώσσα έχει κανόνες γραμματικής έτσι και οι γλώσσες προγραμματισμού. Η γραμματικήστιςγλώσσες προγραμματισμού ονομάζεται σύνταξη. Βασικοί κανόνες σύνταξης της ActionScript: 1. Υπάρχει διάκριση ανάμεσα σε πεζούς και κεφαλαίους χαρακτήρες 1. Frames και frames αντιπροσωπεύουν διαφορετικά πράγματα 2. Τα ονόματα κλάσεων (π.χ. ηκλάσηmovieclip) ξεκινάνε με κεφαλαίο γράμμα και κάθε νέα λέξη ξεκινά επίσης με κεφαλαίο 3. Τα ονόματα instances ξεκινάνε με πεζό (box) 4. Οι σταθερές (constants) δίνονταιμεόλαταγράμματακεφαλαίακαιχρήση κάτω παύλας ανάμεσα στις λέξεις (MOUSE_OVER, KEY_UP) 5. Τα ονόματα των μεταβλητών ξεκινάνε με πεζό γράμμα και περιέχουν μόνο χαρακτήρες και αριθμούς 2. Οι εντολές τελειώνουν πάντοτε με Ελληνικό ερωτηματικό (box.gotoandplay(2);) 7

8 Μεταβλητές (variables) Οι μεταβλητές μοιάζουν με τις ιδιότητες αλλά δεν σχετίζονται με Κάθε μεταβλητή σχετίζεται με κάποιο τύπο δεδομένων (Number, String, Array, κοκ.) που σημαίνει ότι μπορεί να αποθηκεύσει συγκεκριμένα μόνο στοιχεία Οι τιμές που έχουν οι μεταβλητές συνήθως αλλάζουν κατά τη διάρκεια της εκτέλεσης του προγράμματος (για αυτό και ονομάζονται μεταβλητές) Παράδειγμα: Στηνπροηγούμενηάσκησηορίστεμιαμεταβλητήηοποίακαταγράφει τον αριθμό των επαναλήψεων της ταινίας. Χρησιμοποιήστε την εντολή trace για να εμφανίζεται στην οθόνη ο αριθμός αυτός. Εντολές συνθήκης (conditional statements) Οι εντολές συνθήκης μεταβάλλουν τη ροή εκτέλεσης ενός προγράμματος ανάλογα με την τιμή μιας μεταβλητής: Οι πιο συνηθισμένες εντολές είναι η if και η switch if (condition) { //do something else { //do something alternative switch (somevariable) { case Value 1: //do something break; case Value 2: //do something different break; default: // do something else break; 8

9 Παράδειγμα Στην προηγούμενη άσκηση φροντίστε τις πρώτες πέντε φορές που εκτελείται η ταινία να μετασχηματίζεται το ορθογώνιο και τις υπόλοιπες να μετασχηματίζεται ο κύκλος. Επίσης ανάλογα αν το σχήμαείναιορθογώνιοκαιπεράσουμετοποντίκιπάνωαπόαυτόθα γίνεται κύκλος και το αντίστροφο. Λύση: Στο καρέ 1 του Scripts ορίστε μια μεταβλητή με όνομα loop και αρχικοποιήστε την στην τιμή 0. Στο καρέ 50 του Scripts τοποθετήστε τον πιο κάτω κώδικα: loop = loop +1; if (loop>5) { if (loop == 6) { trace("circle animation now begins"); box.gotoandstop(2); else { box.gotoandstop(1); this.gotoandplay(2); Παράδειγμα (συν) Λύση (συν.): Στο καρέ 1 του Scripts τροποποιήστε την συνάρτηση mouseoverhandler ως εξής: function mouseoverhandler(evt:object):void { if (loop<=5) { box.gotoandstop(2); else { box.gotoandstop(1); 9

10 ημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Συναρτήσεις (functions) Συναρτήσεις είναι ομάδες εντολών οι οποίες μπορούν να αναφερθούν με Πολύ συχνά χρησιμοποιούμε τις συναρτήσεις για χειρισμό της αντίδρασης αντικειμένων (όπως στο πιο κάτω παράδειγμα) Συναρτήσεις οι οποίες δεν επιστρέφουν κάποια τιμή ορίζονται ως void αλλιώς ορίζονται με βάση τον τύπο της τιμής που επιστρέφουν. Οι περισσότερες από τις συναρτήσεις χρειάζονται κάποιες παραμέτρους (parameters) για να εκτελεστούν (στο πιο κάτω παράδειγμα η παράμετρος της συνάρτησης είναι ένα event (evt) τύπου object. ημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παράδειγμα Στην προηγούμενη άσκηση φροντίστε τις άρτιες επαναλήψεις της ταινίας να μετασχηματίζεται το ορθογώνιο και τις υπόλοιπες να μετασχηματίζεται ο κύκλος. Επίσης ανάλογα αν το σχήμα είναι ορθογώνιοκαιπεράσουμετοποντίκιπάνωαπόαυτόθαγίνεται κύκλος και το αντίστροφο. Λύση: Στο καρέ 1 του Scripts ορίστε μια επιπλέον μεταβλητή με όνομα rem και αρχικοποιήστε την στην τιμή 0. Στο ίδιο καρέ, ορίστε μια συνάρτηση ως ακολούθως function remcomp(num:number):number{ var val:number = 0; val = num%2; return val; 10

11 ημιουργία ενδιάμεσης κίνησης Βελτίωση ενδιάμεσης κίνησης Παραδείγματα Παράδειγμα (συν) Λύση: Στο καρέ 50 αλλάξτε τη συνθήκη ελέγχου του από (loop >5) σε (rem ==0) Το ίδιο θα πρέπει να γίνει και με τις συναρτήσεις mouseoverhandler(), mouseoutrhandler() στο καρέ 1 του layer Scripts. 11