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. Προσθήκη αντικειμένων
Για να την εισάγω στην
σκηνή κάνω κλικ στο Add
instance 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 να βγει
εκτός οθόνης με την εντολή walk
offscreen

31. Προσθήκη εντολών
●Αφού τελειώσαμε με τον Joey ήρθε η ώρα για
τους άλλους δυο
●Θα ακολουθεί η Suzi που θα έρχεται και αυτή
στην κάμερα και θα κάνει ένα άλμα
●Ενώ στο τέλος θα έρχεται ο Jock που επειδή
δεν ξέρει κάτι ιδιαίτερο θα αισθάνεται
ντροπιασμένος και θα φεύγει

32. Προσθήκη εντολών

33. πΑ οθήκευση
Για να αποθηκεύσουμε την δουλειά μας
επιλέγουμε από το μενού File την επιλογή Save
world 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 να εκτελέσει
τη νέα μέθοδό του.
Επιστρέφω στην κεντρική μέθοδο και
σβήνω αρχικά την εντολή look
embarassed

43. Γράφοντας μια νέα μέθοδο
Στη θέση της σέρνω την μέθοδο pirouette που έχω φτιάξει

44. Γράφοντας μια νέα μέθοδο
Για να μην περιμένω να εκτελέσουν οι άλλοι δυο τα νούμερά τους και να πάω στον
Jock, μπορώ να απενεργοποιήσω τις εντολές που τους αφορούν, κάνοντας σε κάθε
μια δεξί κλικ και disable

45. Γράφοντας μια νέα μέθοδο
●Εκτελώ το πρόγραμμα με το play
●Παρατηρώ πως ο Jock σηκώνει τα χέρια του το
ένα μετά το άλλο
●Θα είναι καλύτερο αν μπορεί να τα σηκώσει μαζί

46. Γράφοντας μια νέα μέθοδο
Για να ορίσω κάποιες
εντολές να γίνονται μαζί
χρησιμοποιώ την δομή Do
together
Επιστρέφω στην μέθοδο
pirouette και σέρνω μια
δομή Do together μέσα στην
μέθοδο
Στην δομή αυτή βάζω τις
κινήσεις των 2 χεριών

47. Γράφοντας μια νέα μέθοδο
Τώρα θα μάθουμε στον Jock να φέρει τα χέρια
του, στη σωστή θέση για την πιρουέτα

48. Γράφοντας μια νέα μέθοδο
Για να πετύχω αυτή τη κίνηση θα χρειαστώ 4 εντολές που θα εκτελούνται μαζί σε μια
δομή Do together
1) Στρέφω (turn) όλο το δεξί χέρι πίσω κατά 0,2
2) Περιστρέφω (roll) δεξιά μόνο το κάτω μέρος του δεξιού χεριού κατά 0,12 περιστροφές
3) Περιστρέφω όλο το αριστερό χέρι (roll) αριστερά κατά 0,6 περιστροφές
4) Περιστρέφω το κάτω μέρος του αριστερού χεριού (roll) αριστερά κατά 0,12
1
2
3
4

49. Γράφοντας μια νέα μέθοδο
Τώρα θα μάθουμε στον Jock να σηκώνει το
αριστερό του πόδι και να είναι έτοιμος για την
στροφή

50. Γράφοντας μια νέα μέθοδο
Για να πετύχω αυτή τη κίνηση θα χρειαστώ 4 εντολές, 3 από τις οποίες θα εκτελούνται
μαζί σε μια δομή Do together
1) Αρχικά στρέφω το αριστερό πόδι αριστερά κατά 0,2
2) Στρέφω το αριστερό πόδι πίσω κατά 0,12
3) Στρέφω το κάτω μέρος του αριστερού ποδιού μπροστά κατά 0,25
4) Στρέφω την πατούσα (foot) του αριστερού ποδιού μπροστά κατά 0,12
1
2
3
4

51. Γράφοντας μια νέα μέθοδο
Και τώρα ήρθε η ώρα της περιστροφής!
Επιλέγω όλο το αντικείμενο Jock και φέρνω την μέθοδο turn. Επιλέγω 2 αριστερές
στροφές
Τέλος, φέρνω και την μέθοδο Straighten up του Jock η οποία επαναφέρει τα μέλη του
στην αρχική τους κατάσταση

52. Γράφοντας μια νέα μέθοδο
Όλος ο κώδικας της μεθόδου pirouette

53. Γράφοντας μια νέα μέθοδο
Όλος ο κώδικας της βασικής μεθόδου

54. 3Μέρος ο
Ιδιότητες αντικειμένων
Παράμετροι μεθόδων
- πΔομές ελέγχου ε ανάληψης

55. 3Μέρος ο
●Αντί να έχουμε ένα συνεχόμενο animation που ο
κάθε χαρακτήρας θα εκτελεί το νούμερο του,
●θα επιλέγει ο χρήστης με το πληκτρολόγιο ποιος
θα έρθει
●Πάνω από κάθε χαρακτήρα θα υπάρχει ένας
αριθμός που θα μας ενημερώνει πιο πλήκτρο
πρέπει να πατήσουμε για να τον καλέσουμε

56. 3ο Μέρος
Επιστρέφω στον
σχεδιασμό της σκηνής
(Add Objects) και
επιλέγω να
προσθέσω ένα
3διάστατο κείμενο (3D
text)

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 new
parameter

64. Παράμετροι
Ονομάζω την παράμετρο turns και ορίζω τον
τύπο της αριθμό (number)

65. Παράμετροι
Η παράμετρος εμφανίζεται πλέον στον τίτλο της μεθόδου μου

66. Παράμετροι
Πηγαίνω στην εντολή που ο
Jock περιστρέφεται γύρω από
τον εαυτό του 2 φορές.
Κάνω κλικ στο βελάκι και
Ορίζω οι περιστροφές να είναι
όσες και η τιμή της
παραμέτρου turns
(expressions>turns)

67. Παράμετροι
Γυρνάω στην βασική
μέθοδο της σκηνής
μου.
Η εντολή που καλεί
την μέθοδο pirouette
δέχεται πλέον μια
αριθμιτική τιμή ως
παράμετρο.
Θα χρησιμοποιήσω
την συνάρτηση ask
user 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