Τεχνολογία Πολυμέσων Ενότητα 12: Ανάπτυξη εφαρμογής ημερολογίου Νικολάου Σπύρος Τμήμα Μηχανικών Πληροφορικής ΤΕ
Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο TEI Δυτικής Μακεδονίας και στην Ανώτατη Εκκλησιαστική Ακαδημία Θεσσαλονίκης» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3
Σκοποί ενότητας Σε αυτή την ενότητα αναπτύσσεται μία εφαρμογή ημερολογίου (Calendar). 4
Περιεχόμενα ενότητας Άσκηση. Βιβλιογραφία. 5
Ανάπτυξη εφαρμογής ημερολογίου
Άσκηση (1/33) Δημιουργήστε μια νέα ταινία με όνομα calendar.dir με διαστάσεις 640x480 pixels. Να ορίσετε δεικτοδοτημένο (indexed) χρώμα φόντου 245 και το τέμπο της ταινίας σε 15 fps. Στη συνέχεια κάντε τα παρακάτω! 1. Να δημιουργήσετε έναν ηθοποιό τύπου text που θα αναγράφει ΗΜΕΡΟΛΟΓΙΟ με όνομα «Calendar», μέγεθος 48στ., χρώμα κόκκινο, έντονα και με την ιδιότητα Bg. Transparent. 7
Άσκηση (2/33) 1. (Συνέχεια). Τοποθετήστε τον ηθοποιό στη θέση x:75, y:200 στα πλαίσια 1 με 50. Προετοιμάστε κατάλληλα τον ηθοποιό «Calendar» για να δεχθεί τη συμπεριφορά 3D > Actions > Automatic Model Rotation. Να περιστρέφεται κατά τον άξονα «Υ». 2. Να δημιουργήσετε στο πλαίσιο 20, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα «main menu». 8
Άσκηση (3/33) Εικόνα 1: Το περιβάλλον εργασίας. Πηγή: Διδάσκων (2015). 9
Άσκηση (4/33) 3. Να δημιουργήσετε έναν ηθοποιό τύπου text που θα αναγράφει ΧΕΙΜΩΝΑΣ με όνομα «winter» μέγεθος 18στ., χρώμα μαύρο, έντονα, και με την ιδιότητα Bg.Transparent. Έως το πλαίσιο 20 ο ηθοποιός βρίσκεται στη θέση χ:20, y:490. Στο πλαίσιο 50 βρίσκεται στη θέση χ: 20, y:300. 10
Άσκηση (5/33) 4. Να δημιουργήσετε στο πλαίσιο 55, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα winter. Με δεξί mouse click στο είδωλο του ηθοποιού «winter» κι επιλέγοντας Script (στο παράθυρο Script που ανοίγει πατήστε στο σύμβολο + για να δημιουργηθεί νέο Cast member) όπου μπορείτε να γράψετε το ακόλουθο script μετάβασης το οποίο μπορείτε να αποθηκεύσετε π.χ. με το όνομα «go_to_winter». 11
Άσκηση (6/33) 4. (Συνέχεια). on mouseup me end go to winter Στη συνέχεια να σύρετε τη συμπεριφορά «go_to_winter» από το CAST πάνω στο είδωλο του ηθοποιού «winter» στη σκηνή. 12
Άσκηση (7/33) 5. Να δημιουργήσετε έναν ηθοποιό τύπου text που θα αναγράφει ΑΝΟΙΞΗ με όνομα «spring» μέγεθος 18στ., χρώμα μαύρο, έντονα, και με την ιδιότητα Bg. Transparent. Έως το πλαίσιο 25 ο ηθοποιός βρίσκεται στη θέση χ:170, y:490. Στο πλαίσιο 50 βρίσκεται στη θέση χ: 170, y:300. 13
Άσκηση (8/33) 6. Να δημιουργήσετε στο πλαίσιο 65, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα spring. Με δεξί mouse click στο είδωλο του ηθοποιού «spring» κι επιλέγοντας Script (στο παράθυρο Script που ανοίγει πατήστε στο σύμβολο + για να δημιουργηθεί νέο Cast member) όπου μπορείτε να γράψετε το ακόλουθο script μετάβασης το οποίο μπορείτε να αποθηκεύσετε π.χ. με το όνομα «go_to_ spring». 14
Άσκηση (9/33) 6. (Συνέχεια). on mouseup me end go to spring Στη συνέχεια να σύρετε τη συμπεριφορά «go_to_spring» από το CAST πάνω στο είδωλο του ηθοποιού «spring» στη σκηνή. 15
Άσκηση (10/33) 7. Να δημιουργήσετε έναν ηθοποιό τύπου text που θα αναγράφει ΚΑΛΟΚΑΙΡΙ με όνομα «summer» μέγεθος 18στ., χρώμα μαύρο, έντονα, και με την ιδιότητα Bg. Transparent. Έως το πλαίσιο 30 ο ηθοποιός βρίσκεται στη θέση χ:300, y:490. Στο πλαίσιο 50 βρίσκεται στη θέση χ: 300, y:300. 16
Άσκηση (11/33) 8. Να δημιουργήσετε στο πλαίσιο 75, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα summer. Με δεξί mouse click στο είδωλο του ηθοποιού «summer» κι επιλέγοντας Script (στο παράθυρο Script που ανοίγει πατήστε στο σύμβολο + για να δημιουργηθεί νέο Cast member) όπου μπορείτε να γράψετε το ακόλουθο script μετάβασης το οποίο μπορείτε να αποθηκεύσετε π.χ. με το όνομα «go_to_summer». 17
Άσκηση (12/33) 8. (Συνέχεια). on mouseup me end go to summer Στη συνέχεια να σύρετε τη συμπεριφορά «go_to_summer» από το CAST πάνω στο είδωλο του ηθοποιού «summer» στη σκηνή. 18
Άσκηση (13/33) 9. Να δημιουργήσετε έναν ηθοποιό τύπου text που θα αναγράφει ΦΘΙΝΟΠΩΡΟ μεόνομα «autumn» μέγεθος 18στ., χρώμα μαύρο, έντονα, και με την ιδιότητα Bg.Transparent. Έως το πλαίσιο 35 ο ηθοποιός βρίσκεται στη θέση χ:450, y:490. Στο πλαίσιο 50 βρίσκεται στη θέση χ: 450, y:300. 19
Άσκηση (14/33) 10. Να δημιουργήσετε στο πλαίσιο 85, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα autumn. Με δεξί mouse click στο είδωλο του ηθοποιού «autumn» κι επιλέγοντας Script (στο παράθυρο Script που ανοίγει πατήστε στο σύμβολο + για να δημιουργηθεί νέο Cast member) όπου μπορείτε να γράψετε το ακόλουθο script μετάβασης το οποίο μπορείτε να αποθηκεύσετε π.χ. με το όνομα «go_to_autumn». 20
Άσκηση (15/33) 10. (Συνέχεια). on mouseup me end go to autumn Στη συνέχεια να σύρετε τη συμπεριφορά «go_to_autumn» από το CAST πάνω στο είδωλο του ηθοποιού «autumn» στη σκηνή. 21
Άσκηση (16/33) 11. Να εφαρμόσετε τη συμπεριφορά Navigation >Hold on Current Frame ώστε η ταινία να κάνει παύση στα πλαίσια 50, 56, 66, 76, 86 και 96. Εναλλακτικά, κάνετε διπλό αριστερό mouse click στο πλαίσιο (frame) 50 του καναλιού εφέ Script στο Score και να γράψετε το ακόλουθο Frame behavior script το οποίο μπορείτε να αποθηκεύσετε με το όνομα «hold on current frame». 22
Άσκηση (17/33) 11. (Συνέχεια). on exitframe me end go to the frame Στη συνέχεια εφαρμόστε τη συμπεριφορά αυτή (από το CAST) στα πλαίσια 56, 66, 76, 86 και 96. 23
Άσκηση (18/33) 12. Εφαρμόστε συμπεριφορά Animation >Interactive >Rollover Member Change ώστε όταν το ποντίκι διέρχεται πάνω από τους ηθοποιούς «winter», «spring», «summer» και «autumn» αυτοί να αλλάζουν χρώμα (από μαύρα γράμματα σε κόκκινα). 13. Εφαρμόστε συμπεριφορά Animation >Interactive >Rollover Cursor Change ώστε όταν το ποντίκι διέρχεται πάνω από τους ηθοποιούς «winter», «spring», «summer» και «autumn» να αλλάζει σε «FINGER». 14. Εφαρμόστε το εφέ εναλλαγής «Centered Out, Vertical» στα πλαίσιο 55, 65, 75, 85. 24
Άσκηση (19/33) 15. Να δημιουργήσετε ένα κουμπί (γραμμή menu Insert >Control >Push button) που θα αναγράφει BACK, με όνομα «black_back», μαύρο με άσπρα γράμματα 18 στ. έντονα, και θα έχει θέση x:500, y:420 και πλάτος 100 pixels. Θα έχει διάρκεια στα πλαίσια από 55 έως 96. Εφαρμόστε συμπεριφορά Animation >Interactive >Rollover Member Change ώστε όταν το ποντίκι διέρχεται πάνω από το κουμπί αυτό να αλλάζει σε κόκκινο. Εφαρμόστε συμπεριφορά Animation >Interactive >Rollover Cursor Change ώστε όταν το ποντίκι διέρχεται πάνω από το κουμπί να αλλάζει σε «FINGER». 25
Άσκηση (20/33) 16. Στο κουμπί BACK εφαρμόστε συμπεριφορά μετάβασης στο σημάδι «main menu». Με δεξί mouse click στο είδωλο του ηθοποιού «black_back» κι επιλέγοντας Script (στο παράθυρο Script που ανοίγει πατήστε στο σύμβολο + για να δημιουργηθεί νέο Cast member) όπου μπορείτε να γράψετε το ακόλουθο script μετάβασης το οποίο μπορείτε να αποθηκεύσετε π.χ. με το όνομα «go_to_main_menu». 26
Άσκηση (21/33) 16. (Συνέχεια). on mouseup me end go to main menu Στη συνέχεια να σύρετε τη συμπεριφορά «go_to_main_menu» από το CAST πάνω στο είδωλο του ηθοποιού «black_back» στη σκηνή. 27
Άσκηση (22/33) 17. Να μεταφέρετε στη σκηνή ένα είδωλο του ηθοποιού «winter» με την ιδιότητα Bg. Transparent. Τοποθετήστε τον στη θέση χ:35, y:120, στα πλαίσια 55 έως 56. Εφαρμόστε τη συμπεριφορά Text >Tickertape Text. 18. Από τη γραμμή menu File->Import εισάγετε φωτογραφία από τα δείγματα του υπολογιστή με θέμα τον χειμώνα (Χειμώνας.jpg). Τοποθετήστε την φωτογραφία στην θέση χ:350, y:120, μέγεθος 240Χ200 στα πλαίσια 55 έως 56. 28
Άσκηση (23/33) 19. Να δημιουργήσετε τρεις ηθοποιούς τύπου text που θα αναγράφουν Δεκέμβριος, Ιανουάριος και Φεβρουάριος με ονόματα «December», «January» και «February» αντίστοιχα. Το μέγεθος τους θα είναι 10στ., χρώμα μαύρο, έντονα και με την ιδιότητα Bg. Transparent. Τοποθετήστε τους τρεις ηθοποιούς στα πλαίσια 55 έως 56, στις θέσεις: χ:20, y:250 / χ: 220, y:250 / χ:420, y:250 αντίστοιχα. Σε καθέναν από τους ηθοποιούς «December», «January» και «February» εφαρμόστε τη συμπεριφορά Text >Calendar. Στο παράθυρο «Parameter» στην πρώτη επιλογή Display entry for... επιλέξτε τον αντίστοιχο μήνα. 29
Άσκηση (24/33) 20. Να μεταφέρετε στη σκηνή ένα είδωλο του ηθοποιού «spring» με την ιδιότητα Bg. Transparent. Τοποθετήστε τον στη θέση χ:35, y:120, στα πλαίσια 65 έως 66. Εφαρμόστε τη συμπεριφορά Text >Tickertape Text 21. Από τη γραμμή menu File->Import εισάγετε φωτογραφία από τις εικόνες του υπολογιστή με θέμα την άνοιξη (Νούφαρα.jpg). Τοποθετήστε την φωτογραφία στην θέση χ:350, y: 120, μέγεθος 240Χ200 στα πλαίσια 65 έως 66. 30
Άσκηση (25/33) 22. Να δημιουργήσετε τρεις ηθοποιούς τύπου text που θα αναγράφουν Μάρτιος, Απρίλιος και Μάιος με ονόματα «March», «April» και «May» αντίστοιχα. Το μέγεθος τους θα είναι 10στ., χρώμα μαύρο, έντονα και με την ιδιότητα Bg. Transparent. Τοποθετήστε τους τρεις ηθοποιούς στα πλαίσια 65 έως 66, στις θέσεις: χ:20, y:250 / χ:220, y:250 / χ:420, y:250 αντίστοιχα. Σε καθέναν από τους ηθοποιούς «March», «April» και «May» εφαρμόστε τη συμπεριφορά Text > Calendar. Στο παράθυρο «Parameter» στην πρώτη επιλογή Display entry for... επιλέξτε τον αντίστοιχο μήνα. 31
Άσκηση (26/33) 23. Να μεταφέρετε στη σκηνή ένα είδωλο του ηθοποιού «summer» με την ιδιότητα Bg.Transparent. Τοποθετήστε τον στη θέση χ:35, y:120, στα πλαίσια 75 έως 76. Εφαρμόστε τη συμπεριφορά Text >Tickertape Text. 24. Από τη γραμμή menu File->Import εισάγετε φωτογραφία από τις εικόνες του υπολογιστή με θέμα το καλοκαίρι (Ηλιοβασίλεμα.jpg). Τοποθετήστε την φωτογραφία στην θέση χ:350, y: 120, μέγεθος 240Χ200 στα πλαίσια 75 έως 76. 32
Άσκηση (27/33) 25. Να δημιουργήσετε τρεις ηθοποιούς τύπου text που θα αναγράφουν Ιούνιος, Ιούλιος και Αύγουστος με ονόματα «June», «July» και «August» αντίστοιχα. Το μέγεθος τους θα είναι 10στ., χρώμα μαύρο, έντονα και με την ιδιότητα Bg. εικόνων Transparent. Τοποθετήστε τους τρεις ηθοποιούς στα πλαίσια 75 έως 76, στις θέσεις: χ:20, y:250 / χ: 220, y:250 / χ:420, y:250 αντίστοιχα. Σε καθέναν από τους ηθοποιούς «June», «July» και «August» εφαρμόστε τη συμπεριφορά Text >Calendar. Στο παράθυρο «Parameter» στην πρώτη επιλογή Display entry for... επιλέξτε τον αντίστοιχο μήνα. 33
Άσκηση (28/33) 26. Να μεταφέρετε στη σκηνή ένα είδωλο του ηθοποιού «autumn» με την ιδιότητα Bg.Transparent. Τοποθετήστε τον στη θέση χ:35, y:120, στα πλαίσια 85 έως 86. Εφαρμόστε τη συμπεριφορά Text >Tickertape Text. 27. Από τη γραμμή menu File->Import εισάγετε φωτογραφία από τις εικόνες του υπολογιστή με θέμα το φθινόπωρο (Μπλε λόφοι.jpg). Τοποθετήστε την φωτογραφία στην θέση χ:350, y: 120, μέγεθος 240Χ200 στα πλαίσια 85 έως 86. 34
Άσκηση (29/33) 28. Να δημιουργήσετε τρεις ηθοποιούς τύπου text που θα αναγράφουν Σεπτέμβριος, Οκτώβριος και Νοέμβριος με ονόματα «September», «October» και «November» αντίστοιχα. Το μέγεθος τους θα είναι 10στ., χρώμα μαύρο, έντονα και με την ιδιότητα Bg. Transparent. Τοποθετήστε τους τρεις ηθοποιούς στα πλαίσια 85 έως 86, στις θέσεις: χ:20, y:250 / χ: 220, y:250 / χ:420, y:250 αντίστοιχα. Σε καθέναν από τους ηθοποιούς «September», «October» και «November» αντίστοιχα εφαρμόστε τη συμπεριφορά Text >Calendar. Στο παράθυρο «Parameter» στην πρώτη επιλογή Display entry for επιλέξτε τον αντίστοιχο μήνα. 35
Άσκηση (30/33) 29. Να δημιουργήσετε στο πλαίσιο 95, στο κανάλι σημαδιών του SCORE, ένα marker με όνομα «about». 30. Να δημιουργήσετε έναν ηθοποιό τύπου text με όνομα «about» που θα αναγράφει το ονοματεπώνυμο σας, τον αριθμό μητρώου και το εξάμηνο σας, μέγεθος 18στ., χρώμα μαύρο, έντονα, και την ιδιότητα Bg. Transparent, στα πλαίσια 95 έως 96. Εφαρμόστε στο είδωλο του ηθοποιού «about» την παράμετρο Fade In από τη συμπεριφορά Animation >Automatic >Fade In Out. 36
Άσκηση (31/33) 31. Να δημιουργήσετε ένα προσαρμοσμένο μενού επιλογών για την ταινία σας ως εξής: Από τη γραμμή menu Window->Field, στο νέο παράθυρο πληκτρολογήστε τα παρακάτω, τα οποία μπορείτε να αποθηκεύσετε π.χ. με το όνομα «mymenu». menu: Ημερολόγιο 2012 Αρχικό μενού/m go to "main menu" Χειμώνας/W go to "winter" Άνοιξη/S go to "spring" Καλοκαίρι/K go to "summer" Φθνινόπωρο/F go to "autumn" (- Exit/X halt menu: Help Βοήθεια/B go to "about" 37
Άσκηση (32/33) 32. Να δημιουργήσετε ένα movie script που θα ενεργοποιεί το προσαρμοσμένο μενού επιλογών του Βήματος 31 και θα εμφανίζεται στην πάνω αριστερή γωνία της σκηνής κάθε φορά που θα ξεκινά η ταινία. Πατήστε ταυτόχρονα τα πλήκτρα Ctrl + Shift + U για να εμφανιστεί το παράθυρο script: movie script 1 όπου θα πληκτρολογήσετε το ακόλουθο script Lingo. 38
Άσκηση (33/33) 32. (Συνέχεια). on startmovie() end installmenu mymenu 33. Να αποθηκεύσετε την ταινία και από τη γραμμή menu File -> Publish Settings να δημιουργήσετε το εκτελέσιμο αρχείο της ταινίας με όνομα calendar.exe. 39
Σημείωμα Αναφοράς Copyright ΤΕΙ Δυτικής Μακεδονίας, Νικολάου Σπύρος. «Τεχνολογία Πολυμέσων». Έκδοση: 1.0. Κοζάνη 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: 40
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο. που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο. που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο. Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 41
Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς. το Σημείωμα Αδειοδότησης. τη δήλωση Διατήρησης Σημειωμάτων. το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει). μαζί με τους συνοδευόμενους υπερσυνδέσμους. 42
Βιβλιογραφία 1. Τεχνολογία πολυμέσων, Δημητριάδης Σταύρος Ν., Πομπόρτσης Ανδρέας Σ., Τριανταφύλλου Ευάγγελος Γ. 2. Συστήματα Πολυμέσων: Αλγόριθμοι, Πρότυπα και Εφαρμογές, Havaldar P., Medioni G. 3. Πολυμέσα Αναλυτικός Οδηγός, 8η Έκδοση, Tay Vaughan. 4. Τεχνολογία Πολυμέσων και Πολυμεσικές Επικοινωνίες, Γεώργιος Β. Ξηλωμένος, Γεώργιος Κ. Πολύζος. 43
Τέλος Ενότητας