Πολυμεσικές Εφαρμογές Ενότητα: ΕΡΓΑΣΤΗΡΙΟ Γεώργιος Στυλιαράς Σχολή Οργάνωσης και Διοίκησης Επιχειρήσεων Τμήμα Διαχείρισης Πολιτισμικού Περιβάλλοντος και Νέων Τεχνολογιών
Σκοποί ενότητας... 3 Περιεχόμενα ενότητας... 3 Εργαστήριο 1... 4 Εργαστήριο 2... 5 Εργαστήριο 3... 6 Εργαστήριο 4... 7 Εργαστήριο 5... 9 Σελίδα 2
Σκοποί ενότητας Σκοπός της ενότητας είναι η εξοικείωση των σπουδαστών με βασικές τεχνικές δημιουργίας εφαρμογών πολυμέσων. Το πρόγραμμα που απαιτείται για την υλοποίηση είναι το Flash. Περιεχόμενα ενότητας Η συγκεκριμένη ενότητα περιλαμβάνει 5 εργαστηριακές ασκήσεις που αναφέρονται στο κείμενο, την εικόνα, τον ήχο και το βίντεο. Σελίδα 3
Εργαστήριο 1 1. Είσοδος στο μηχάνημα ως dppntuser και κωδικό: culture 2. Έναρξη Flash CS6 3. Επιλογή ActionScript 2.0 4. Μετονομασία Layer1 σε Actions 5. Εισαγωγή νέου layer με όνομα Texts 6. Εισαγωγή νέου layer με όνομα Buttons 7. Τα layers θα είναι με την εξής σειρά: Actions, Texts, Buttons 8. Στο Actions frame 1 επιλογή Actions και συμπλήρωση stop(); στον κώδικα 9. Στο Texts δημιουργείτε με το εργαλείο T ένα κείμενο static στο οποίο θα γράψετε «Επιλέξτε ένα κείμενο:» 10. Στο Buttons δημιουργία 5 κειμένων static (προσοχή στα properties!) με το εργαλείο Τ. Η θέση τους θα είναι το ένα κάτω από το άλλο και θα γράφουν Κείμενο 1, Κείμενο 2 κοκ. Μπορείτε να μετακινήσετε τα κείμενα επιλέγοντας τα και τραβώντας τα με το μαύρο βελάκι. ΓΙΑ ΚΑΘΕ TEXT 1. Επιλογή του text με το μαύρο βελάκι (στην αρχή το 1 ο text). 2. Επιλογή με δεξί κουμπί Convert to symbol Button 3. Επιλογή του κειμένου που πλέον έχει γίνει κουμπί με το μαύρο βελάκι 4. Επιλογή με δεξί κουμπί Actions και συμπλήρωση του παρακάτω κώδικα on (release) gotoandstop(5); 5. Στο Texts, Insert BlankKeyframe στο 5, εισαγωγή ενός αναλυτικού κειμένου και ενός κειμένου τίτλου με τη μορφή Dynamic Text (επιλογή από τα Properties). 6. Ονομασία κειμένου τίτλου (Instance Name) στα properties ως title1 7. Στο ίδιο frame στο Buttons εισαγωγή κουμπιού με τίτλο ΑΛΛΑΓΗ ΧΡΩΜΑΤΟΣ και action on (release) title1.textcolor = 0x634634; 8. Στο ίδιο frame στο Buttons εισαγωγή κουμπιού με τίτλο ΑΡΧΗ και action να επιστρέφει στην αρχή Στα επόμενα texts gotoandstop(10) κοκ Μπορείτε να επιλέξετε διαφορετικά χρώματα των οποίων τους κωδικούς μπορείτε να βρείτε στο Photoshop Σελίδα 4
Εργαστήριο 2 Σκοπός του εργαστηρίου είναι η δημιουργία μιας φωτοθήκης αποτελούμενης από 5 εικόνες. Στην αρχή θα φαίνονται οι μικρογραφίες των εικόνων. Πατώντας μια μικρογραφία, θα φαίνεται η εικόνα σε μεγάλο μέγεθος και θα υπάρχει η δυνατότητα επιστροφής στην αρχή. 1. Έναρξη Flash CS6 νέο project σε ActionScript 2.0 2. Δημιουργία layers Actions, Images, Buttons 3. Εισαγωγή 5 εικόνων στη βιβλιοθήκη μέσω του File Import Import to Library 4. Drag and drop εικόνων στο frame 1, στο layers buttons 5. Μετατροπή εικόνων σε μέγεθος 100 x 100 (width και height) μέσω των Properties 6. Μετατροπή εικόνων σε κουμπιά 7. Κάθε κουμπί θα πηγαίνει σε επόμενα frames, π.χ. το 1 ο στο frame 5, το 2 ο στο frame 10 κοκ 8. Στα frames 5, 10 κοκ θα υπάρχουν οι αντίστοιχες εικόνες σε μεγάλο μέγεθος, τις οποίες θα ξανατραβήξετε από τη βιβλιοθήκη για το σκοπό αυτό. Θα μετατρέψετε κάθε εικόνα σε movie clip και θα τις ονομάσετε Image1, Image2 κοκ στο πεδίο Instance Name στις ιδιότητες 9. Στα frames 5, 10 κοκ θα δημιουργήσετε ένα κουμπί με λεζάντα «Πλάτος» το οποίο όταν θα το πατάτε το πλάτος θα γίνεται 200 ως εξής π.χ. για την 1 η εικόνα: on (release) image1._width = 200; 10. Για κάθε εικόνα θα βάλετε ένα πεδίο κειμένου με τη μορφή Input Text το οποία θα ονομάσετε text1, text2 κοκ και θα αντικαταστήσετε στον παραπάνω κώδικα την εντολή: image1._width = text1.text; Έτσι το πλάτος της εικόνας θα γίνεται όσο θα βάζετε εσείς στο πεδίο κειμένου 11. Πειραματιστείτε με άλλες ιδιότητες και κουμπιά ως εξής: image1._height = text1.text; (ύψος) image1._x = text1.text; (σημείο Χ) image1._y = text1.text; (σημείο Y) image1._alpha = text1.text; (διαφάνεια από 0 έως 100) Σελίδα 5
Εργαστήριο 3 Σκοπός του εργαστηρίου είναι η δημιουργία ενός slideshow αποτελούμενου από 5 εικόνες. Στην αρχή θα φαίνεται η 1 η εικόνα. Πατώντας την εικόνα θα εμφανίζεται σταδιακά η 2 η. 1. Έναρξη Flash CS6 νέο project σε ActionScript 2.0 2. Δημιουργία layers Actions, Image5, Image4, Image3, Image2, Image1 με αυτή τη σειρά Για το 1 ο ζευγάρι εικόνων: 3. Εισαγωγή 1 ης εικόνας στο frame 1, Image1 σε μεγάλη διάσταση και μετατροπή σε Graphic symbol 4. Insert keyframe στο frame 2, Image1 5. Μετατροπή της εικόνας στο frame 1 σε κουμπί και εισαγωγή κώδικα gotoandplay(2); στην εικόνα 6. Εισαγωγή stop(); στο frame 1 στο Actions layer 7. Insert Blank Keyframe στο frame 10 στο layer Image1 8. Εισαγωγή 2 ης εικόνας στο frame 2 στο layer Image2 και μετατροπή σε Graphic symbol 9. Insert Keyframe στο frame 9 στο layer Image2 10. Insert Keyframe στο frame 10 στο layer Image2 11. Αλλαγή στις ιδιότητες του alpha στο style της εικόνας στο frame 2 σε 0 12. Εισαγωγή classic tween στο frame 2 Σελίδα 6
Εργαστήριο 4 Σκοπός του εργαστηρίου είναι η δημιουργία ενός player αναπαραγωγής ήχου. 1. Έναρξη Flash CS6 νέο project σε ActionScript 2.0 2. Δημιουργία layers Actions, Buttons 3. Εισαγωγή στη βιβλιοθήκη του ήχου test.mp3 4. Αλλαγή ονόματος ήχου με δεξί κλικ στα Properties στο Linkage και επιλογή Export for ActionScript σε mysound. Επιλογή του Export in Frame 1. 5. Εισαγωγή κουμπιών με ονόματα play_btn, stop_btn, pause_btn, vol_btn στο Instance Name για ρύθμιση Play, Stop, Pause και Ένταση 6. Εισαγωγή dynamic text με όνομα dur_txt 7. Εισαγωγή input text με όνομα vol_txt και επιλογή Embed Numerals 8. Εισαγωγή κώδικα στο Actions var mysound:sound = new Sound(); mysound.attachsound("mysound"); var trackpos:number; play_btn.onrelease = function():void if(trackpos == 0) mysound.start(); else mysound.start(trackpos/1000, 1); stop_btn.onrelease = function():void trackpos = 0; Σελίδα 7
mysound.stop(); pause_btn.onrelease = function():void trackpos = mysound.position; mysound.stop(); vol_btn.onrelease = function():void mysound.setvolume(parseint(vol_txt.text)); onenterframe = function() dur_txt.text = mysound.position; 9. Αλλαγή dur_txt να δείχνει τα δευτερόλεπτα ή το ποσοστό του ήχου που έχει παιχτεί 10. Δημιουργία movie clip dur_bar που να δείχνει σε μπάρα τη διάρκεια του ήχου που έχει παιχτεί Σημείωση: Η ένταση του ήχου κυμαίνεται από 0 έως 100 Με το duration μπορούμε να βρούμε τη διάρκεια του ήχου Με το Math.Round() μπορούμε να στρογγυλοποιήσουμε έναν αριθμό. Σελίδα 8
Εργαστήριο 5 Σκοπός του εργαστηρίου είναι η δημιουργία ενός player αναπαραγωγής βίντεο. 1. Έναρξη Flash CS6 νέο project σε ActionScript 2.0 2. Δημιουργία layers Actions, Buttons 3. Εισαγωγή στη βιβλιοθήκη του βίντεο test.avi 4. Να ακολουθήσετε τις οδηγίες που βγαίνουν στο μήνυμα. 5. Επανεισαγωγή του νέου βίντεο ως FLV και symbol type Movie Clip 6. Εισαγωγή δύο κουμπιών με τα οποία θα μπορείτε να ξεκινάτε και να σταματάτε το βίντεο (προϋπόθεση είναι να ονομάσετε σωστά το βίντεο) Σελίδα 9
Σημειώματα Σημείωμα Ιστορικού ΕκδόσεωνΈργου Το παρόν έργο αποτελεί την έκδοση 1.0. Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Γεώργιος Στυλιαράς. «Πολυμεσικές εφαρμογές. ΕΡΓΑΣΤΗΡΙΟ». Έκδοση: 1.0. Πάτρα 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: https://eclass.upatras.gr/courses/culture162. Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. Διατήρηση Σημειωμάτων Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς το Σημείωμα Αδειοδότησης τη δήλωση Διατήρησης Σημειωμάτων το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει) Σελίδα 10
μαζί με τους συνοδευόμενους υπερσυνδέσμους. Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. Σελίδα 11