Create Sprite at Runtime

Transcript

1 Create Sprite at Runtime (with ActionScript 3.0) Free Flash Demos Tested on Adobe CS4 Το σενάριο: Να φτιάξεις ένα sprite (που στον «μουσαμά» του να υπάρχει μια ζωγραφιά, π.χ. ένα τετράγωνο). Αυτό να το πετύχεις με εντολές κι όχι με τα σχεδιαστικά εργαλεία του Flash. Τέλος, με κλικ πάνω στο sprite θέλουμε να κάνει μία περιστροφή γύρω από τον εαυτό του. Με την ευκαιρία θα συζητήσουμε και για το «Registration point» των sprites. Η λύση σε αδρές γραμμές: Θα δημιουργήσουμε ένα sprite με το όνομα pinakas. Με τη βοήθεια της συνάρτησης zografiseenasxima θα ζωγραφίσουμε πάνω στον μουσαμά του ένα τετράγωνο. Κατόπιν θα «καρφιτσώσουμε» το sprite στη σκηνή. Αν θέλουμε το τοποθετούμε και σε μια άλλη θέση από αυτήν που αρχικά σχεδιάστηκε. ΒΉΜΑ 1. ΒΉΜΑ 2. Δημιουργία νέου αρχείου File New Flash File (ActionScript 3.0) Ρύθμισε το μέγεθος της σκηνής περίπου σε 150 x 105 Action! Επίλεξε τη σκηνή και πάτα F9. Γράψε τον παρακάτω κώδικα import fl.transitions.tween; import fl.transitions.easing.*; // Το πρόγραμμα αρχίζει εδώ var pinakas: Sprite; Flas(); // Το πρόγραμμα τελειώνει εδώ. Τα υπόλοιπα είναι περιγραφές συναρτήσεων musamas.beginfill (0xFF00FF); // FF00FF το RGB χρώμα γεμίσματος Ctrl + Enter. Δυστυχώς δεν βλέπεις τίποτα. Ο λόγος? Πάνω στον «μουσαμά» του πίνακα (ιδιότητα graphics) σχεδιάστηκε μεν ένα τετράγωνο, όμως για να το δούμε πρέπει ο ίδιος ο πίνακας να «καρφιτσωθεί» πάνω στη σκηνή. Πρόσθεσε τη κόκκινη εντολή με το <-- addchild (pinakas); // <-- Ctrl + Enter. Τώρα βλέπεις ένα τμήμα του πίνακα, για την ακρίβεια το κάτω δεξιά τεταρτημόριο. Όμως τον θέλουμε περίπου στη μέση της σκηνής Πρόσθεσε τις κόκκινες εντολές addchild (pinakas); 1/5 Create Sprite at Runtime

2 // βάλε τον πίνακα εκεί που θες να φαίνεται // <-- // <-- Ctrl + Enter. Τώρα ο πίνακας είναι περίπου στη μέση και φαίνεται ολόκληρος. Δοκίμασε να αλλάξεις το χρώμα του Όσο κι αν κλικάρεις πάνω του δεν κάνει τη τούμπα που σου υποσχέθηκαν. Θα υποχρεώσεις τον πίνακα να «ακούει» τα κλικ που γίνονται πάνω του. Πρόσθεσε τις κόκκινες εντολές pinakas.addeventlistener (MouseEvent.CLICK, tuba) // <-- function tuba (e: MouseEvent): void { // <-- var t: Tween = new Tween (pinakas, "rotation", None.easeNone, 0, 360, 5, true) // <-- // <-- Δοκίμασε (Ctrl + Enter). Η συνάρτηση tuba ενεργοποιείται κάθε φορά που κλικάρεις πάνω στον πίνακα, οπότε και βλέπεις τη περιστροφή. Κάνε τον πίνακα, ώστε με το κλικ, να περιστρέφεται όχι μία αλλά δύο φορές Αύξησε το χρόνο περιστροφής σε 8 δευτερόλεπτα Οι πιο απαιτητικοί θα ήθελαν, ίσως, τη στιγμή που θα σημαδεύουμε πάνω στο πίνακα, το βέλος του ποντικιού να γίνεται χεράκι. Πρόσθεσε τη κόκκινη εντολή // Δώσε την αίσθηση ενός μπουτόν αλλάζοντας το βέλος του // ποντικιού με χεράκι όταν αυτό περνά πάνω από το πίνακα pinakas.buttonmode = true; // <-- pinakas.addeventlistener (MouseEvent.CLICK, tuba) Ctrl + Enter. Μόλις το ποντίκι περάσει πάνω από τον πίνακα μετασχηματίζεται σε χεράκι, φιλική ένδειξη οτι εκεί, αν θέλεις, μπορείς να κλικάρεις. ΒΉΜΑ 3. Registration point Registration point ενός sprite λέμε εκείνο το σημείο τού μουσαμά του, που οι συντεταγμένες του x, y εκφράζουν και τη θέση ολόκληρου τού sprite. Επίσης, είναι εκείνο το σημείο, γύρω από το οποίο θα περιστρέφεται το sprite, όταν πειράζεις την ιδιότητα rotation. Στις ζωγραφιές που κάνουμε με τα σχεδιαστικά εργαλεία του Flash μας δίνεται η δυνατότητα να καθορίσουμε το Registration point, όταν πάμε να τις μετατρέψουμε σε σύμβολα, διαλέγοντας μία από εννιά επιλογές (δες την εικόνα πιο πάνω). Στις ζωγραφιές, όμως, που φτιάχνουμε με την ActionScript την ώρα της εκτέλεσης του προγράμματος, ως Registration point θεωρείται εξ ορισμού η αρχή των αξόνων. Επομένως ο μόνος τρόπος για να «πετύχεις» το Registration point του πίνακά σου εκεί που θέλεις, είναι να σχεδιάσεις τα σχήματά σου κατάλληλα γύρω από την αρχή των αξόνων. Δέστε τα δύο παραδείγματα της παρακάτω εικόνας. 2/5 Create Sprite at Runtime

3 Στο sprite με το κόκκινο τετράγωνο (αριστερά), το Registration point πέφτει στο κέντρο του τετραγώνου, γιατί την ώρα της σχεδίασής του «έτυχε» η αρχή των αξόνων να βρίσκεται πράγματι στο κέντρο του. Αντίθετα στο δεξιά sprite, το Registration point πέφτει στην πάνω αριστερή γωνία του τετραγώνου, γιατί την ώρα της σχεδίασής του «έτυχε» η αρχή των αξόνων να βρίσκεται πράγματι στη πάνω αριστερή γωνία του. Για όσους δεν γνωρίζουν, η μέθοδος drawrect οποιουδήποτε μουσαμά, σχεδιάζει πάνω του ένα παραλληλόγραμμο. Οι δύο πρώτες παράμετροι είναι οι συντεταγμένες της πάνω αριστερής γωνίας του, η 3η είναι το πλάτος του και η 4η το ύψος του του παραλληλογράμμου. ΒΉΜΑ 4. Πειραματίσου 1. Άλλαξε την εντολή και κάνε την όπως αυτήν στο κάτω δεξιά μέρος της πιο πάνω εικόνας, ώστε να συμπέσει το Registration point με την πάνω αριστερή γωνία του τετραγώνου. Εκτέλεσε το φλασάκι (Ctrl + Enter) και κάνε κλικ πάνω στο sprite ώστε να δεις γύρω από πιο σημείο περιστρέφεται. Είναι πράγματι το πάνω αριστερά? 2. Άλλαξε, πάλι, την ίδια εντολή και κάνε την έτσι ώστε το Registration point να «πέσει» στη πάνω δεξιά γωνία του τετραγώνου. Γράψε την εντολή και εδώ : Άλλαξε το ύψος του παραλληλογράμμου και κάνε το Άλλαξε το χρώμα του παραλληλογράμμου και κάνε το πράσινο. Θυμήσου οτι ο δεκαεξαδικός αριθμός 0xFF00FF εκφράζει την αναλογία των τριών βασικών χρωμάτων κόκκινου, πράσινου και γαλάζιου σε μια κλίμακα από 00 έως FF 5. Αντί για τετράγωνο κάνε το να σχεδιάζει ένα τέλειο πεντάγωνο αστέρι αντικαθιστώντας τη συνάρτηση zografiseenasxima με τον κώδικα που ακολουθεί. var exoterikiaktina: Number = 14; // διαιρώ 3.14 / 180 = 0, για εύκολη μετατροπή μοιρών σε ακτίνια με ένα πολλαπλασιασμό const n = Math.PI / 180; var esoterikiaktina: Number = exoterikiaktina * Math.cos (72 * n) / Math.cos (36 * n); musamas.beginfill (0xFF0000); musamas.moveto (0, -exoterikiaktina); for (var korifi: int = 1; korifi <= 10; korifi++) { var monikorifi: int = korifi % 2; // το υπόλοιπο της διαίρεσης με το 2 var aktina: Number = (monikorifi)? esoterikiaktina : exoterikiaktina; var gonia: Number = (korifi * 36-90) * n; var simio: Point = new Point (Math.cos (gonia), Math.sin (gonia)); simio.normalize (aktina); musamas.lineto (simio.x, simio.y) 3/5 Create Sprite at Runtime

4 6. Άλλαξε το μέγεθος του άστρου (εξωτερική ακτίνα) από 14 σε Άλλαξε το χρώμα του άστρου σε κίτρινο ΒΉΜΑ 5. Μια πιο συγκροτημένη λύση (package) Από File New διάλεξε ActionScript File, γράψε τον παρακάτω κώδικα και αποθήκευσέ τον με το όνομα Flas.as στον ίδιο φάκελο με το φλασάκι σου. Επίλεξε τη σκηνή και πήγαινε στα PROPERTIES PUBLISH Class και γράψε το όνομα της κλάσης Flas Σβήσε όλον τον κώδικα που είχες γράψει στο Action Εκτέλεσε το φλασάκι (Ctrl + Enter) Αν κάνεις αλλαγές στο αρχείο Flas.as, θα πρέπει να τις αποθηκεύεις αμέσως ώστε να πιάνουν τόπο. package { import fl.transitions.tween; import fl.transitions.easing.*; import flash.display.graphics; import flash.display.sprite; import flash.geom.point; import flash.events.mouseevent; public class Flas extends Sprite { private var pinakas: Sprite; // Initialization or Constructor // Αυτή η μέθοδος θα εκτελείται αυτόματα γιατί έχει το όνομα της κλάσης public // ή drawstar για αστέρι addchild (pinakas); // βάλε τον πίνακα εκεί που θες να φαίνεται // Δώσε την αίσθηση ενός μπουτόν αλλάζοντας το βέλος του // ποντικιού με χεράκι όταν αυτό περνά πάνω από το πίνακα pinakas.buttonmode = true; pinakas.addeventlistener (MouseEvent.CLICK, tuba) private musamas.beginfill (0xFF00FF); // χρησιμοποίησε αυτή τη μέθοδο αντί της zografiseenasxima για να έχεις ένα αστέρι private function drawstar (musamas: Graphics): void { var exoterikiaktina: Number = 14; const n = Math.PI / 180; var esoterikiaktina: Number = exoterikiaktina * Math.cos (72 * n) / Math.cos (36 * n); musamas.beginfill (0xFF0000); musamas.moveto (0, -exoterikiaktina); for (var korifi: int = 1; korifi <= 10; korifi++) { var monikorifi: int = korifi % 2; var aktina: Number = (monikorifi)? esoterikiaktina : exoterikiaktina; 4/5 Create Sprite at Runtime

5 var gonia: Number = (korifi * 36-90) * n; var p: Point = new Point (Math.cos (gonia), Math.sin (gonia)); p.normalize (aktina); musamas.lineto (p.x, p.y) private function tuba (e: MouseEvent): void { var t: Tween = new Tween (pinakas, "rotation", None.easeNone, 0, 360, 5, true) 5/5 Create Sprite at Runtime