Άσκηση 9 Διαφημιστική εφαρμογή κινητού τηλεφώνου Σε αυτή την άσκηση θα δημιουργήσουμε μια διαφημιστική πολυμεσική εφαρμογή προώθησης ενός κινητού τηλεφώνου με υλικό που μπορεί να ανακτηθεί από την ιστοσελίδα της εταιρίας. Η εφαρμογή θα έχει ένα γενικό μενού επιλογών στο πάνω μέρος και στο κυρίως παράθυρο θα εμφανίζονται οι πληροφορίες που αφορούν το χρήστη. H γενική όψη της εφαρμογής φαίνεται στην παρακάτω εικόνα: Προετοιμασία υλικού 1. Συνήθως όταν σχεδιάζουμε κάποια νέα εφαρμογή χρειάζεται να δημιουργήσουμε εξαρχής το υλικό μας. Αυτό σημαίνει ότι ο προγραμματιστής και η ομάδα του είναι αναγκαίο να τραβήξουν φωτογραφίες, να πάρουν συνεντεύξεις, να ηχογραφήσουν, να βιντεοσκοπήσουν, να μορφοποιήσουν κείμενα, φωτογραφίες και video κατάλληλα, ώστε να τα εισάγουν στην εφαρμογή. Στην παρούσα περίπτωση θα υποθέσουμε ότι αυτή η διαδικασία έχει προηγηθεί και εμείς θα χρησιμοποιήσουμε το έτοιμο υλικό από την ιστοσελίδα του προϊόντος. Για να εισάγουμε το υλικό θα επιλέξουμε File Import. Φροντίζουμε να διαλέξουμε το φάκελο Files που περιέχει τις φωτογραφίες και τα απαιτούμενα αρχεία και να κάνουμε κλικ στην επιλογή Add all. 2. Ορίζουμε μέγεθος σκηνής 1000x550 με χρώμα λευκό. 3. Τοποθετούμε την εικόνα Menu bar στο πάνω μέρος της σκηνής. Το μενού θα πρέπει να είναι ορατό σε όλες τις σκηνές που θα δημιουργήσουμε. Σώζουμε την εφαρμογή ως iphone.dir. Δημιουργία σκηνών Θα δημιουργήσετε 7 σκηνές. Η πρώτη (αρχική) θα έχει διάρκεια 30 frame και οι υπόλοιπες θα διαρκούν 20 frame η κάθε μία. 1. Στην αρχική σκηνή θα εμφανίζεται με fade in στο κέντρο του παραθύρου κάτω από τη μπάρα του μενού, η εικόνα spot1. Αφού την τοποθετήσουμε, επιλέγουμε από τη βιβλιοθήκη συμπεριφορών Animation Automatic Fade In Out και σέρνουμε πάνω στην εικόνα spot1. Στο παράθυρο που εμφανίζεται θέτουμε: Fade in or out? - > In Maximum fade value - > 100 Minimum fade value - > 0 Start automatically, when clicked or by message? - > Automatic Fade cycles - > 0
Time period for fade (seconds) - > 1.5 2. Δεν ξεχνάμε να βάλουμε το Hold on current frame στο τέλος της σκηνής και marker στην αρχή. Ονομάζουμε το marker: start. 3. Δημιουργούμε τις υπόλοιπες σκηνές με βάση τις εικόνες spot2-7 με διάρκεια 20 frames. Η εικόνα του μενού (Menu bar) θα πρέπει να είναι σε όλες ορατή στην ίδια θέση. Σε κάθε μία από τις υπόλοιπες σκηνές, η αντίστοιχη εικόνα (spot) θα μπαίνει με οριζόντια κίνηση από δεξιά έξω από τη σκηνή και θα σταματάει στο κέντρο της. Για να το επιτύχουμε αυτό, βρίσκουμε την ιδανική θέση της εικόνας στο κέντρο της σκηνής. Τοποθετούμε ένα keyframe στο score, στο τελευταίο frame της εικόνας που μας ενδιαφέρει. Στη σκηνή, κρατώντας πατημένο το Shift, τη σέρνουμε οριζοντίως έξω από το περιθώριο δεξιά της σκηνής. Με τo πλήκτρο Shift, «κλειδώνουμε» την κίνηση των sprite μόνο στον οριζόντιο άξονα, ώστε να μη μας ξεφύγουν πάνω και κάτω. Αν αναπαράγετε την ταινία θα δείτε ότι πετύχαμε το αντίθετο από αυτό που θέλουμε. Δηλαδή, η εικόνα βγαίνει έξω από τη σκηνή αντί να μπαίνει. Για να αντιστρέψουμε την κίνηση, έχοντας επιλεγμένη την εικόνα στο score, επιλέγουμε από το μενού Modify - Reverse Sequence. Ελέγξτε ότι τώρα η κίνηση γίνεται σωστά. 4. Επαναλάβετε την παραπάνω διαδικασία και για τις υπόλοιπες σκηνές. Ονομάστε τους markers των σκηνών one, two,... κ.λπ. Προσθέστε Hold on current frame στο τέλος κάθε σκηνής. Σώζουμε την εφαρμογή. Προγραμματισμός κουμπιών γραμμικής κίνησης 1. Για να πηγαίνουμε από σκηνή σε σκηνή θα χρησιμοποιήσουμε τα κουμπιά button left και button right. Τα κουμπιά θα είναι ορατά σε όλες τις σκηνές που έχουμε δημιουργήσει. Θέλουμε να επιτύχουμε τα εξής: Όταν το mouse περνάει πάνω από το κουμπί, ο cursor θα γίνεται χεράκι. Η αρχική όψη του κουμπιού θα είναι αχνή και όταν θα περνάει το ποντίκι από πάνω του, αυτό θα τονίζεται (θα σκουραίνει) με fade, ενώ αντίστροφα, θα επανέρχεται στην αρχική του κατάσταση όταν το ποντίκι απομακρύνεται. Όταν ο χρήστης θα πατάει πάνω στο κουμπί right, θα πλοηγείται στην επόμενη σκηνή και αντίστοιχα όταν πατάει το κουμπί left, θα πλοηγείται στην προηγούμενη σκηνή. 2. Στην πρώτη σκηνή, τοποθετούμε το κουμπί button right στο κέντρο του κάθετου άξονα της σκηνής και σε 30 pixel απόσταση από το δεξί περιθώριο της σκηνής. Υπολογίστε σωστά τις συντεταγμένες Χ και Y και πληκτρολογήστε τη σωστή θέση του κουμπιού στο Property Inspector. 3. Εφαρμόζουμε συμπεριφορά για την εμφάνιση cursor τύπου finger όταν το ποντίκι περνάει από πάνω του και αντίστοιχα, την κατάλληλη συμπεριφορά (Jump to marker button) και επιλέγουμε να μας πηγαίνει στον επόμενο (next) marker, όταν πατάμε πάνω του. Ελέγχουμε ότι δουλεύει σωστά και σώζουμε την εφαρμογή.
4. Αντίστοιχα επαναλαμβάνουμε τη διαδικασία και για το button left, το οποίο θα μας πηγαίνει στον προηγούμενο (previous) marker. Το τοποθετούμε 30 pixels από το αριστερό περιθώριο της σκηνής και στο ίδιο ύψος με το δεξί κουμπί. Φροντίζουμε το αριστερό κουμπί να μην εμφανίζεται στην πρώτη σκηνή και το δεξί στην τελευταία σκηνή. Ελέγχουμε τη λειτουργία τους και σώζουμε την εφαρμογή. Προγραμματισμός του μενού στο πάνω μέρος του παραθύρου. 1. Μπορούμε με μια πολύ απλή μέθοδο να δημιουργήσουμε σημεία συνδέσμων πάνω από την αδρανή εικόνα του μενού που έχουμε τοποθετήσει στο πάνω μέρος του παραθύρου. Ανοίγουμε τη σκηνή στο frame 1. Από τα εργαλεία στα αριστερά της σκηνής επιλέγουμε το Rectangle χωρίς χρωματισμό (άδειο). Σχεδιάζουμε ένα ορθογώνιο πλαίσιο γύρω από τη λέξη Iphone πάνω αριστερά. 2. Παρατηρείστε ότι το πλαίσιο αυτό είναι αόρατο. Πηγαίνουμε στο cast, βρίσκουμε το πλαίσιο που σχεδιάσαμε και το ονομάζουμε field. Επαληθεύουμε ότι είμαστε στο frame 1 και ξανατοποθετούμε το field στη σκηνή άλλες 4 φορές: γύρω από τις λέξεις: χαρακτηριστικά, σχεδιασμός, τεχνικές προδιαγραφές, αγόρασε το iphone. Τα field αυτά θα έχουν ίδια διάρκεια σε frames με την εικόνα Menu bar στο score. 3. Αυτό το αόρατο πεδίο μπορεί όπως όλα τα υπόλοιπα στοιχεία, να μετατραπεί σε σύνδεσμος. Προγραμματίζουμε το field γύρω από τη λέξη iphone να μας μεταφέρει στο marker start (αρχική οθόνη) και αντίστοιχα το ποντίκι να μετατρέπεται σε finger όταν περνάει από πάνω του. Ελέγχουμε ότι δουλεύει σωστά και το χρησιμοποιούμε αναπαράγοντας την εφαρμογή. Σώζουμε. 4. Στο field γύρω από το Αγόρασε το iphone θα προσθέσουμε ένα διαδικτυακό σύνδεσμο. Από το Library - > Navigation επιλέγουμε Go to URL. Εισάγουμε τη διεύθυνση του ιστοτόπου της εταιρείας: www.apple.com. Ελέγχουμε τη συμπεριφορά του νέου κουμπιού και σώζουμε. 5. Δημιουργήστε μια νέα σκηνή εισάγοντας το iphone5 video σε κατάλληλη θέση στο score με διάρκεια 20 frames. Έχοντας επιλεγμένο το video, πηγαίνετε στο Property Inspector, καρτέλα Quicktime και επιλέξτε το Controls. Με αυτό τον τρόπο προστέθηκε γραμμή ελέγχου στο video. Ολοκληρώστε τη σκηνή φροντίζοντας να φαίνεται η λωρίδα του μενού, να εισάγετε marker με τίτλο sxediasmos και Hold on current frame στο τέλος της σκηνής. Προγραμματίστε το field γύρω από τη λέξη σχεδιασμός στο μενού να μας πηγαίνει στη σκηνή του video. 6. Για κάθε μια από τις υπόλοιπες επιλογές του μενού (Χαρακτηριστικά, Τεχνικές προδιαγραφές), σχεδιάζουμε τις αντίστοιχες νέες σκηνές αντλώντας υλικό
(φωτογραφίες, κείμενο) από τις ιστοσελίδες που σας δίνονται. Θα προγραμματίσετε τα field να οδηγούν σε αυτές τις σκηνές. Κατά την κρίση σας, μπορεί ανάλογα με την έκταση του υλικού να δημιουργηθούν νέα μενού και σύνδεσμοι που θα οδηγούν σε περισσότερες και πιο πλήρεις πληροφορίες το χρήστη. Εφαρμογή των εφέ στα κουμπιά 1. Στο director μπορούμε να δημιουργήσουμε ένα sprite που εμπεριέχει εσωτερική κίνηση. Σε αυτό το βήμα θα φτιάξουμε έναν νέο ηθοποιό κουμπιού που θα κάνει fade in αυτόματα. Τοποθετούμε το κουμπί button right στα frame 250-260 του πρώτου καναλιού. Στο Property Inspector, ορίζουμε το ink Copy του sprite στο 20%. Βάζουμε keyframe στο τέλος της διάρκειας του sprite και ορίζουμε το ink Copy στο 100%. Ελέγχουμε σε αυτό το σημείο ότι πραγματοποιείται fade in στο κουμπί. Σέρνουμε από το score αυτό το κουμπί και το τοποθετούμε σε μια κενή θέση του cast. Ονομάζουμε το νέο ηθοποιό rightfadein. Έχοντας επιλεγμένο στο cast το rightfadein, πάμε στο Property inspector, στην καρτέλα Film loop και αποεπιλέγουμε τα πεδία Audio και Loop. 2. Στο παράθυρο του score, αντιγράφουμε τα υπάρχοντα frames (250-260) του κουμπιού στα frames 260-270. Έχοντας επιλεγμένα τα νέα frames, επιλέγουμε από το μενού Modify - > Reverse Sequence. Ελέγχουμε ότι το νέο κουμπί στη σκηνή κάνει fade out. Το σέρνουμε από το score και το τοποθετούμε σε μια κενή θέση του cast. Το ονομάζουμε rightfadeout. 3. Επιστρέφουμε στο παράθυρο του score στα frames που αντιστοιχούν στις σκηνές που δημιουργήσαμε προηγουμένως. Για να εφαρμόσουμε το εφέ Fade in στο δεξί κουμπί κάθε φορά που περνάει το ποντίκι από πάνω του, επιλέγουμε τη συμπεριφορά Rollover member change και επιλέγουμε ως rollover member το rightfadein. Αναπαράγουμε την εφαρμογή και διαπιστώνουμε ότι ενώ λειτουργεί, κάτι δεν πάει καλά και σα να αναβοσβήνει. Αυτό συμβαίνει γιατί το κουμπί πρέπει στην αρχική του κατάσταση να φαίνεται αχνό. Έχοντας επιλεγμένο το κουμπί στη σκηνή, πηγαίνουμε στο Property inspector και ορίζουμε Ink Copy 20%. Ελέγχουμε πάλι την εφαρμογή και σώζουμε. 4. Ενώ το Director έχει έτοιμη συμπεριφορά roll over για την περίπτωση που το ποντίκι περάσει πάνω από ένα ηθοποιό στη σκηνή, δε διαθέτει κάτι αντίστοιχο για την περίπτωση που το ποντίκι απομακρύνεται από κάποιο ηθοποιό. Εμείς σε αυτό το σημείο όμως θα χρειαστούμε κάτι τέτοιο για να προγραμματίσουμε το fade out του κουμπιού. Σε αυτήν την περίπτωση πρέπει να δημιουργήσουμε εξαρχής μια νέα συμπεριφορά. Στο πεδίο Code Library επιλέγουμε την καρτέλα Behavior Inspector έχοντας επιλεγμένο το button right στο score. Πατάμε το κουμπί + που βρίσκεται πάνω αριστερά στην καρτέλα και επιλέγουμε New Behavior... Ονομάζουμε τη νέα συμπεριφορά FadeOutRight η οποία θα προστεθεί στις συμπεριφορές μέσα στο παράθυρο. Την επιλέγουμε και πάμε στο από κάτω παράθυρο που είναι χωρισμένο σε 2 στήλες. Η αριστερή στήλη είναι η στήλη των γεγονότων (events) και η αριστερή στήλη των ενεργειών (actions). Πατάμε το κουμπί + στην αριστερή στήλη και επιλέγουμε Mouse Leave. Αυτό το γεγονός υποδηλώνει την απομάκρυνση του ποντικιού από τον ηθοποιό στην σκηνή. Πατάμε το κουμπί + στην δεξιά στήλη και επιλέγουμε την ομάδα Sprite - > Change Cast Member... Ορίζουμε ως νέο ηθοποιό το rightfadeout.
Με αυτή τη νέα συμπεριφορά επιτύχαμε να γίνεται roll over όταν το ποντίκι απομακρύνεται από το button right στη σκηνή. Η συμπεριφορά έχει αποθηκευθεί σε μια θέση του cast. Τη σέρνουμε από το παράθυρο του cast πάνω στο button right στο score. 5. Ελέγχουμε τη σωστή λειτουργία του κουμπιού και σώζουμε την εφαρμογή. Επαναλαμβάνουμε όλα τα παραπάνω και για το αριστερό κουμπί. Ελέγχουμε και σώζουμε. 6. Δημιουργήστε μόνοι σας μια νέα συμπεριφορά, ώστε όταν ο χρήστης πατάει πάνω στο αριστερό ή δεξί κουμπί να ακούγεται ο ήχος swoosh που έχετε εισάγει στο cast.