• Like
Εργαστήριο StoryTelling Alice
Upcoming SlideShare
Loading in...5
×

Εργαστήριο StoryTelling Alice

  • 192 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
192
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 6ο Πανελλήνιο Συνέδριο Διδακτικής τηςΠληροφορικήςΕργαστηριακή συνεδρίαLookingGlass: Διδασκαλία τουπ , StoryTelling Aliceρογραμματισμού μετά τοKelleher Caitlin, π , ,Μ ράτιτσης Θαρρενός Αρβανιτάκης Γιάννης Χασανίδης, π πΔημήτρης Πα αχαραλάμ ους Παναγιώτης
  • 2. Alice (http://www.alice.org)●3Δ Περιβάλλον προγραμματισμού από τοCarnegie Mellon University●Δημιουργία animation και παιχνιδιών●Εργαλείο εκπαίδευσης μαθητών στονπρογραμματισμό με έμφαση στοναντικειμενοστραφή προγραμματισμό
  • 3. Storytelling Alice(http://www.alice.org/kelleher/storytelling/)●Δημιουργήθηκε από την Caitlin Kelleher●Ειδικά animation για την αλληλεπίδρασηχαρακτήρων μεταξύ τους●Οδηγός σε μορφή ιστορίας για την εισαγωγή τωνχρηστών στο περιβάλλον●Ειδικές συλλογές χαρακτήρων και σκηνικών γιατην συγγραφή ιστοριών
  • 4. Looking Glass (http://lookingglass.wustl.edu)●Οι χρήστες μαθαίνουν από τα προγράμματα τωνάλλων●Επαναχρησιμοποίηση κώδικα●Δημιουργία αυτόματων tutorial από επιλεγμένοκώδικα
  • 5. 1 –Μέρος ο Τα βασικάπΤο εριβάλλον εργασίαςπΠροσθήκη και το οθέτηση αντικειμένωνΠροσθήκη εντολών
  • 6. Διάταξη Παραθύρου ΕργασίαςΔενδροδιάγραμμααντικειμένων
  • 7. Διάταξη Παραθύρου ΕργασίαςΛεπτομέρειες αντικειμένου(Ιδιότητες, μέθοδοι, συναρτήσεις)
  • 8. Διάταξη Παραθύρου ΕργασίαςΣκηνές του animation
  • 9. Διάταξη Παραθύρου ΕργασίαςΠρογραμματισμός ενεργειών
  • 10. Διάταξη Παραθύρου ΕργασίαςΕπεξεργασία μεθόδων καισυναρτήσεων
  • 11. Προσθήκη αντικειμένωνΓια να προσθέσουμε αντικείμενα και για να στήσουμε την σκηνήμας πατάμε στο πράσινο πλήκτρο Add Objects
  • 12. Προσθήκη αντικειμένωνΕνεργοποίηση παραθύρων των4 οπτικών γωνιών
  • 13. Προσθήκη αντικειμένωνΕργαλεία ελεύθερηςμετακίνησης, περιστροφής,αλλαγής μεγέθους, δημιουργίαςδιπλότυπων
  • 14. Προσθήκη αντικειμένωνΕργαλεία pan και zoom
  • 15. Προσθήκη αντικειμένωνΤοπικοί φάκελοι αντικειμένων
  • 16. Προσθήκη αντικειμένωνΕπιλέξτε την κλάση Suzi
  • 17. Προσθήκη αντικειμένωνΓια να την εισάγω στηνσκηνή κάνω κλικ στο Addinstance to world
  • 18. Προσθήκη αντικειμένων
  • 19. Προσθήκη αντικειμένωνΠροσθέτω τον Joey και τον Jock
  • 20. Προσθήκη αντικειμένωνΤους τοποθετώ σε μια σειρά χρησιμοποιώντας το εργαλείο της ελεύθερης μετακίνησης
  • 21. Προσθήκη αντικειμένωνΓια να γυρίσω στονπρογραμματισμό των αντικειμένωνπιέζω το πλήκτρο DONE
  • 22. Προσθήκη εντολώνΥπάρχει ήδη μια έτοιμη ενέργεια η οποίαμε το που ξεκινάει ο κόσμος καλεί τηνμέθοδο World.scene 1 methodΕδώ μπορούμε να προσθέσουμε τιςεντολές που θέλουμε να εκτελούνται
  • 23. Προσθήκη εντολώνΑρχικά θα βάλουμε τον Joey να έρχεται μπροστάστην κάμερα και να κάνει το δικό του νούμερο πουείναι ένας απλός χορός
  • 24. Προσθήκη εντολώνΕπιλέγοντας τον Joey από τοδενδροδιάγραμμα του κόσμου μπορώ ναδω τις μεθόδους που μπορεί να εκτελέσει
  • 25. Προσθήκη εντολώνΕπιλέγω την μέθοδο walk to καιτην σέρνω στην μέθοδοWorld.scene 1 method.Από το μενού που εμφανίζεταιεπιλέγω camera για ναπερπατήσει μπροστά στηνκάμερα
  • 26. Προσθήκη εντολώνΕπιλέγω την μέθοδο dance καιτην σέρνω στην μέθοδοWorld.scene 1 method μετά τοβάδισμα.Από το μενού που εμφανίζεταιεπιλέγω 2, για να χορέψει 2φορές
  • 27. Προσθήκη εντολώνΠαρατηρώ πως ο Joey έρχεταιπολύ κοντά στην κάμερα και δενφαίνεται καλά όλος ο χορός του.Για να το διορθώσω αυτό θαπρέπει να αλλάξω κάτι στηνεντολή του βαδίσματοςΓια να εκτελέσω το πρόγραμμά μου επιλέγω το πλήκτρο play
  • 28. Προσθήκη εντολώνΚάνω κλικ στο βελάκι πουβρίσκεται δίπλα από την λέξη moreΕπιλέγω την ομάδα amount (πόσομακριά από την κάμερα)Και ορίζω την απόσταση στα 7μέτρα
  • 29. Προσθήκη εντολώνΞανατρέχω το πρόγραμμα καιτώρα παρατηρώ πως φαίνεταιολόκληρος ο χορός του Joey
  • 30. Προσθήκη εντολώνΤέλος, στέλνω τον Joey να βγειεκτός οθόνης με την εντολή walkoffscreen
  • 31. Προσθήκη εντολών●Αφού τελειώσαμε με τον Joey ήρθε η ώρα γιατους άλλους δυο●Θα ακολουθεί η Suzi που θα έρχεται και αυτήστην κάμερα και θα κάνει ένα άλμα●Ενώ στο τέλος θα έρχεται ο Jock που επειδήδεν ξέρει κάτι ιδιαίτερο θα αισθάνεταιντροπιασμένος και θα φεύγει
  • 32. Προσθήκη εντολών
  • 33. πΑ οθήκευσηΓια να αποθηκεύσουμε την δουλειά μαςεπιλέγουμε από το μενού File την επιλογή Saveworld as
  • 34. 2 –Μέρος ο Γράφοντας μια νέα μέθοδοΔημιουργία νέων μεθόδωνΔομή αντικειμένωνΕκτέλεση εντολών κατά σειρά καιταυτόχρονα
  • 35. Γράφοντας μια νέα μέθοδο●Ο καημένος ο Jock έχει μια κρυφή επιθυμία●Θέλει να κάνει πιρουέτες αλλά δεν ξέρει πωςακόμα●Θα πρέπει να τον μάθουμε εμείς γράφοντας μιανέα μέθοδο
  • 36. Γράφοντας μια νέα μέθοδοΓια να δημιουργήσω μια νέαμέθοδο για τον Jock κάνω κλικ στοπλήκτρο create new methodΟνομάζω τη νέα μέθοδο pirouette
  • 37. Γράφοντας μια νέα μέθοδοΗ νέα μέθοδος δημιουργήθηκε και μπορώ να προσθέσωεντολές σε αυτήν
  • 38. Γράφοντας μια νέα μέθοδοΑρχικά θα βάλουμε τον Jock να σηκώνει τα 2 τουχέρια στην ευθεία
  • 39. Γράφοντας μια νέα μέθοδοΠολλά από τα αντικείμενα που υπάρχουν στο Aliceαποτελούνται από άλλα μικρότερα αντικείμενα.Για παράδειγμα ο Jock αποτελείται από το πάνωμέρος του σώματός του (torso) και τα πόδια του(leftUpperLeg και rightUpperLeg)Το torso με την σειρά του περιλαμβάνει τα δυο χέριακαι τον λαιμό τα οποία και αυτά με την σειρά τουςπεριλαμβάνουν άλλα μέρη.Ανοίγοντας τα + μπροστά από κάθε μέλος βλέπουμεαυτά που περιλαμβάνει.Κάνοντας κλικ σε κάθε μέλος βλέπουμε στην σκηνήμας ένα κίτρινο τεράγωνο γύρω από τοσυγκεκριμένο μέλος, ενώ παράλληλα βλέπουμε καιτις μεθόδους που υπάρχουν για αυτό
  • 40. Γράφοντας μια νέα μέθοδοΕπιλέγω το δεξί χέρι του Jock (rightUpperArm) και από τις μεθέδους του,επιλέγω turn και την σέρνω στην μέθοδο pirouette.Από το μενού επιλέγω στροφή προς τα πίσω (backward) κατά 1/4. Δηλαδή 0.25περιστροφές
  • 41. Γράφοντας μια νέα μέθοδοΠαρόμοια επιλέγω το αριστερό χέρι του Jock (leftUpperArm) και από τιςμεθέδους του, επιλέγω turn και την σέρνω στην μέθοδο pirouette.Από το μενού επιλέγω στροφή προς τα πίσω (backward) κατά 1/4. Δηλαδή 0.25περιστροφές
  • 42. Γράφοντας μια νέα μέθοδοΓια να δω το αποτέλεσμα προς το παρόνθα πρέπει να βάλω τον Jock να εκτελέσειτη νέα μέθοδό του.Επιστρέφω στην κεντρική μέθοδο καισβήνω αρχικά την εντολή lookembarassed
  • 43. Γράφοντας μια νέα μέθοδοΣτη θέση της σέρνω την μέθοδο pirouette που έχω φτιάξει
  • 44. Γράφοντας μια νέα μέθοδοΓια να μην περιμένω να εκτελέσουν οι άλλοι δυο τα νούμερά τους και να πάω στονJock, μπορώ να απενεργοποιήσω τις εντολές που τους αφορούν, κάνοντας σε κάθεμια δεξί κλικ και disable
  • 45. Γράφοντας μια νέα μέθοδο●Εκτελώ το πρόγραμμα με το play●Παρατηρώ πως ο Jock σηκώνει τα χέρια του τοένα μετά το άλλο●Θα είναι καλύτερο αν μπορεί να τα σηκώσει μαζί
  • 46. Γράφοντας μια νέα μέθοδοΓια να ορίσω κάποιεςεντολές να γίνονται μαζίχρησιμοποιώ την δομή DotogetherΕπιστρέφω στην μέθοδοpirouette και σέρνω μιαδομή Do together μέσα στηνμέθοδοΣτην δομή αυτή βάζω τιςκινήσεις των 2 χεριών
  • 47. Γράφοντας μια νέα μέθοδοΤώρα θα μάθουμε στον Jock να φέρει τα χέριατου, στη σωστή θέση για την πιρουέτα
  • 48. Γράφοντας μια νέα μέθοδοΓια να πετύχω αυτή τη κίνηση θα χρειαστώ 4 εντολές που θα εκτελούνται μαζί σε μιαδομή Do together1) Στρέφω (turn) όλο το δεξί χέρι πίσω κατά 0,22) Περιστρέφω (roll) δεξιά μόνο το κάτω μέρος του δεξιού χεριού κατά 0,12 περιστροφές3) Περιστρέφω όλο το αριστερό χέρι (roll) αριστερά κατά 0,6 περιστροφές4) Περιστρέφω το κάτω μέρος του αριστερού χεριού (roll) αριστερά κατά 0,121234
  • 49. Γράφοντας μια νέα μέθοδοΤώρα θα μάθουμε στον Jock να σηκώνει τοαριστερό του πόδι και να είναι έτοιμος για τηνστροφή
  • 50. Γράφοντας μια νέα μέθοδοΓια να πετύχω αυτή τη κίνηση θα χρειαστώ 4 εντολές, 3 από τις οποίες θα εκτελούνταιμαζί σε μια δομή Do together1) Αρχικά στρέφω το αριστερό πόδι αριστερά κατά 0,22) Στρέφω το αριστερό πόδι πίσω κατά 0,123) Στρέφω το κάτω μέρος του αριστερού ποδιού μπροστά κατά 0,254) Στρέφω την πατούσα (foot) του αριστερού ποδιού μπροστά κατά 0,121234
  • 51. Γράφοντας μια νέα μέθοδοΚαι τώρα ήρθε η ώρα της περιστροφής!Επιλέγω όλο το αντικείμενο Jock και φέρνω την μέθοδο turn. Επιλέγω 2 αριστερέςστροφέςΤέλος, φέρνω και την μέθοδο Straighten up του Jock η οποία επαναφέρει τα μέλη τουστην αρχική τους κατάσταση
  • 52. Γράφοντας μια νέα μέθοδοΌλος ο κώδικας της μεθόδου pirouette
  • 53. Γράφοντας μια νέα μέθοδοΌλος ο κώδικας της βασικής μεθόδου
  • 54. 3Μέρος οΙδιότητες αντικειμένωνΠαράμετροι μεθόδων- πΔομές ελέγχου ε ανάληψης
  • 55. 3Μέρος ο●Αντί να έχουμε ένα συνεχόμενο animation που οκάθε χαρακτήρας θα εκτελεί το νούμερο του,●θα επιλέγει ο χρήστης με το πληκτρολόγιο ποιοςθα έρθει●Πάνω από κάθε χαρακτήρα θα υπάρχει έναςαριθμός που θα μας ενημερώνει πιο πλήκτροπρέπει να πατήσουμε για να τον καλέσουμε
  • 56. 3ο ΜέροςΕπιστρέφω στονσχεδιασμό της σκηνής(Add Objects) καιεπιλέγω ναπροσθέσω ένα3διάστατο κείμενο (3Dtext)
  • 57. 3ο ΜέροςΣτο κείμενο γράφω τον αριθμό 1 και ορίζω ως γραμματοσειρά την Arial
  • 58. 3ο ΜέροςΜε παρόμοιο τρόπο τοποθετώ τον αριθμό 2 και τον αριθμό 3
  • 59. 3ο μέροςΧρησιμοποιώντας το εργαλείο ελεύθερης μετακίνησης και την ενεργοποίηση των 4οπτικών γωνιών τοποθετώ τους αριθμούς πάνω από τους χαρακτήρες μουΑφού τελειώσω επιστρέφω στον προγραμματισμό με το πλήκτρο DONE
  • 60. ΙδιότητεςΘέλω ο κάθε αριθμός πουυπάρχει πάνω από τουςχαρακτήρες μου να τον ακολουθείστη σκηνή.Αρχικά επιλέγω τον αριθμό 1Πηγαίνω στις ιδιότητες του(properties)Και βρίσκω την ιδιότητα Vehicleτην οποία αλλάζω από world σεJoeyΜε τον τρόπο αυτό ο αριθμός 1 θαακολουθεί μονίμως τον Joey στηνσκηνή μου
  • 61. ΙδιότητεςΜε παρόμοιο τρόπο αλλάζωτην ιδιότητα vehicle για τουςαριθμούς 2 και 3
  • 62. ΠαράμετροιΣε κάθε μέθοδο πουφτιάχνω μπορώ ναπερνάω κάποιες τιμέςσαν παραμέτρους.Ας δούμε μια απλήπερίπτωση.Πάμε νατροποποιήσουμε τηνμέθοδο pirouette τουJock ώστε αντί να κάνει 2στροφές, να ρωτάει τονχρήστη πόσες να κάνει.
  • 63. ΠαράμετροιΘα δημιουργήσουμε μια νέα παράμετρο που θα ορίζει πόσες στροφές θα κάνει οJock στην πιρουέτα του.Για να δημιουργήσω μια νέα παράμετρο στην μέθοδο κάνω κλικ στο create newparameter
  • 64. ΠαράμετροιΟνομάζω την παράμετρο turns και ορίζω τοντύπο της αριθμό (number)
  • 65. ΠαράμετροιΗ παράμετρος εμφανίζεται πλέον στον τίτλο της μεθόδου μου
  • 66. ΠαράμετροιΠηγαίνω στην εντολή που οJock περιστρέφεται γύρω απότον εαυτό του 2 φορές.Κάνω κλικ στο βελάκι καιΟρίζω οι περιστροφές να είναιόσες και η τιμή τηςπαραμέτρου turns(expressions>turns)
  • 67. ΠαράμετροιΓυρνάω στην βασικήμέθοδο της σκηνήςμου.Η εντολή που καλείτην μέθοδο pirouetteδέχεται πλέον μιααριθμιτική τιμή ωςπαράμετρο.Θα χρησιμοποιήσωτην συνάρτηση askuser for a numberπου υπάγεται στοαντικείμενο τουκόσμου (world)
  • 68. ΠαράμετροιΤώρα το πρόγραμμα θα με ρωτάεικάθε φορά πριν εκτελέσει ο Jockτην πιρουέτα του, πόσες στροφέςνα κάνει
  • 69. Παράμετροι●Ας προχωρήσω τώρα στην δημιουργία μιαςνέας μεθόδου●Θέλω όταν πατάω ένα από τα πλήκτρα 1,2 ή 3να έρχεται ο αντίστοιχος χαρακτήρας και νακάνει το νούμερο του●Αντί να κάνω 3 διαφορετικές μεθόδους, μπορώνα κάνω μία●Η μέθοδος θα δέχεται ως παράμετρο τονχαρακτήρα, θα τον μετακινεί μπροστά στηκάμερα, θα καλεί το νούμερο του και θα τονστέλνει πίσω στη θέση του.
  • 70. ΠαράμετροιΗ νέα μέθοδος δεν θα ανήκει σε κάποιον χαρακτήρα.Θα είναι γενική, οπότε θα ανήκει στον κόσμο τηςσκηνής μου (world).Την ονομάζω call act
  • 71. ΠαράμετροιΜέσα στην μέθοδο call act, δημιουργώ μια νέα παράμετρο με το όνομα player ηοποία είναι τύπου object, δηλαδή είναι αντικείμενο
  • 72. ΠαράμετροιΗ πρώτη εντολή της μεθόδου θα είναι η μετακίνηση μπροστά στην κάμερα σεαπόσταση 7 μέτρωνΔιαλέγω έναν από τους 3 χαρακτήρες (πχ την Suzi και φέρνω την μέθοδο walk to
  • 73. ΠαράμετροιΕπειδή θέλω η κίνηση να γίνεται όχι μόνο από την Suzi, αλλά από οποιοδήποτεχαρακτήρα περνάει μέσω της παραμέτρου player, κάνω κλικ στο βελάκι δίπλα απότο όνομα suzi και το αλλάζω σε expressions>player
  • 74. Παράμετροι●Το επόμενο βήμα θα είναι να κάνει οχαρακτήρας το νούμερο του.●Επειδή ο κάθε χαρακτήρας έχει διαφορετικόνούμερο θα πρέπει να ελέγξω ποιοςχαρακτήρας είναι για να καλέσω τη σωστήμέθοδο
  • 75. ΠαράμετροιΓια να προσθέσω μια δομή ελέγχουχρησιμοποιώ την εντολή If/Else.Την σέρνω στην μέθοδο call act καιαπό το μενού επιλέγω True
  • 76. ΠαράμετροιΑρχικά θέλω να ελέγξωαν ο χαρακτήρας πουέρχεται με τηνπαράμετρο player είναι οJoey.Τραβάω με το ποντίκιτην παράμετρο playerκαι την αφήνω στην λέξηtrue της συνθήκης.Από το μενού πουεμφανίζεται επιλέγωplayer == the entire Joey
  • 77. ΠαράμετροιΑν η παράμετρος playerείναι ο Joey τότε θα καλώτην μέθοδο dance τουJoey
  • 78. ΠαράμετροιΓια τον επόμενο έλεγχο κάνω μια νέα εμφωλευμένη δομή If στην οποία ελέγχω αν ηπαράμετρος player είναι ο Jock ή όχι.Αν είναι ο Jock καλώ την μέθοδο του piroutte, αλλιώς καλώ την μέθοδο spread eagleτης Suzi
  • 79. ΠαράμετροιΑφού ο χαρακτήραςκάνει το νούμεροτου θα φεύγει εκτόςοθόνης.Φέρνω την εντολήwalk offscreen ενόςχαρακτήρα πχ τηςSuzi
  • 80. ΠαράμετροιΣτην εντολή αυτή αλλάζω το Suzi σε player που είναι και η παράμετρος που δέχεται ημέθοδος call act
  • 81. ΠαράμετροιΣτο επόμενο βήμα θα ορίσω τα events που θα εκτελούνται ανάλογα με το πλήκτροπου θα πατηθεί.Αρχικά διαγράφω το event που καλεί την αρχική μέθοδο μόλις ξεκινάει ο κόσμος
  • 82. ΠαράμετροιΓια να ορίσω ένα νέο event κάνω κλικ στο create new eventΕπιλέγω when a key is typed
  • 83. ΠαράμετροιΑρχικά θα ορίσω τι θα γίνεται αν πατηθεί τοπλήκτρο 1Επιλέγω numbers και 1
  • 84. ΠαράμετροιΟ αριθμός 1 είναι πάνω από τονJoey οπότε θέλω μόλις πατηθείτο πλήκτρο 1 να καλώ τηνμέθοδο call act με παράμετροτον Joey
  • 85. ΠαράμετροιΜε παρόμοιο τρόπο δημιουργώ 2 ακόμα events για τα πλήκτρα 2 και 3
  • 86. ΠαράμετροιΤρέχω το πρόγραμμα μου. Οι χαρακτήρες περιμένουν να πατήσω κάποιοπλήκτρο (1,2,3) για να έρθει ο αντίστοιχος να κάνει το νούμερο του
  • 87. Δοκιμασίες●Μπορείτε να τοποθετήσετε τους 3διαγωνιζόμενους σε μια σκηνή με το πλήθοςγύρω τους. Χρησιμοποιήστε τα αντικείμενα πουθα βρείτε στον φάκελο scenes>circus●Μπορείτε να κάνετε τη Suzi να κάνει διπλό άλμαστο νούμερο της; Θα χρειαστείτε μάλλον μιαδομή επανάληψης●Μπορείτε να κάνετε τον Joey να υποκλίνεταιμετά τον χορό του; Φτιάξτε μια νέα μέθοδο γιατον Joey που να κάνει υπόκλιση και καλέστε τηνστο call act
  • 88. ΔοκιμασίεςΤοποθετώντας νέααντικείμενα στην σκηνή
  • 89. ΔοκιμασίεςΤο διπλό άλμα της Suzi
  • 90. ΔοκιμασίεςΗ μέθοδος bow του Joey που το κάνει να υποκλίνεται
  • 91. ΔοκιμασίεςΗ κλίση της μεθόδου bow του Joey