Οι «πρώτες ύλες», τα assets τα οποία χρησιμοποιεί η nousbuilder είναι τα ακόλουθα:

Transcript

1 Nous Builder Εισαγωγή Η nousbuilder είναι μια εφαρμογή, η οποία επιτρέπει τη δημιουργία διαδραστικών εντύπων στηριγμένων στην πλατφόρμα nous. Τα έντυπα αυτά μπορούν να διαβαστούν από την εφαρμογή nousviewer διαθέσιμη για ipad και Android, αλλά και να χρησιμοποιηθούν ως αυτόνομες εφαρμογές ή τεύχη περιοδικών. Το περιεχόμενο ενός εγγράφου nous είναι οργανωμένο σε άρθρα. Κάθε άρθρο μπορεί να περιέχει μια ή περισσότερες σελίδες. Κατά την ανάγνωση ενός εντύπου nous, η πλοήγηση από άρθρο σε άρθρο γίνεται κάνοντας οριζόντιο swipe, ενώ η πλοήγηση από σελίδα σε σελίδα του ίδιου άρθρου γίνεται κάνοντας κατακόρυφο swipe. Τα έντυπα δηλαδή έχουν μια «δισδιάστατη» λογική όπου ο οριζόντιος άξονας είναι τα άρθρα και ο κατακόρυφος οι σελίδες. Οι «πρώτες ύλες», τα assets τα οποία χρησιμοποιεί η nousbuilder είναι τα ακόλουθα: Αρχεία pdf. Πρέπει να σημειωθεί εξ αρχής ότι μετά την εισαγωγή τους στη nousbuilder, οι σελίδες των αρχείων pdf, αντιμετωπίζονται ως ανεξάρτητες στατικές εικόνες χωρίς κάποια σύνδεση μεταξύ τους. Επίσης πιθανά εξωτερικά hyperlinks στα αρχεία pdf διατηρούνται και στη nousbuilder. Εικόνες. Υποστηρίζονται αρχεία png και jpg Ήχοι. Υποστηρίζονται αρχεία mp3 Video. Υποστηρίζονται αρχεία mp4 Ο βασικός πυρήνας μέσω του οποίου επιτυγχάνεται η διαδραστικότητα στα nous έντυπα είναι τα διάφορα components τα οποία είναι διαθέσιμα. Αυτά τοποθετούνται μέσα στις σελίδες, χρησιμοποιούν τα διαθέσιμα assets και μέσω των παραμέτρων τους επιτυγχάνουν την επιθυμητή διαδραστικότητα. Το μεγαλύτερο μέρος αυτού του κειμένου είναι αφιερωμένο ακριβώς στην περιγραφή του τρόπου χρήσης των διαθέσιμων components. Πρέπει να σημειωθεί ότι η nousbuilder ΔΕΝ είναι εφαρμογή δημιουργίας ψηφιακών assets, αλλά οργάνωσής και σύνδεσής τους έτσι ώστε να δημιουργηθεί ένα διαδραστικό έντυπο. Επομένως σε μια τυπική χρήση, ο χρήστης σχεδιάζει τα έντυπά του με τα εργαλεία που επιθυμεί (π.χ. InDesign, Quark κλπ.). Κατά το σχεδιασμό προβλέπει τις περιοχές στις οποίες επιθυμεί διαδραστικότητα (π.χ. εναλλακτικές εικόνες στην ίδια τοποθεσία, popup εικόνες, περιοχές video, περιοχές με κυλιόμενο περιεχόμενο κλπ.) και ετοιμάζει επίσης το επιπλέον αυτό περιεχόμενο. Έχοντας τα υλικά του έτοιμα, τα εισάγει στη nousbuilder και δίνει την επιθυμητή διαδραστικότητα χρησιμοποιώντας τα κατάλληλα components. Το περιβάλλον της εφαρμογής

2 Μια τυπική όψη της εφαρμογής φαίνεται στην Εικόνα 1. Στο πάνω μέρος βρίσκονται τα διαθέσιμα components μέσω των οποίων όπως αναφέρθηκε επιτυγχάνεται η επιθυμητή διαδραστικότητα. Κάνοντας κλικ σε κάποιο από αυτά, ένα νέο component του Εικόνα 1: Τυπική όψη της εφαρμογής συγκεκριμένου είδους προστίθεται στην τρέχουσα σελίδα. Στα αριστερά βρίσκεται το παράθυρο Document Structure. Εδώ εμφανίζεται η δομή του εντύπου όπως είναι οργανωμένο σε άρθρα και σελίδες. Κάθε κόμβος του δέντρου αποτελεί και ένα άρθρο, μέσα στο οποίο μπορούμε να δούμε μικρογραφίες των σελίδων του. Μέσω αυτού του παραθύρου μπορούμε να προσθαφαιρέσουμε άρθρα και σελίδες καθώς και να τα αναδιατάξουμε. Στο μέσο της οθόνης βρίσκεται το σημαντικότερο ίσως παράθυρο της εφαρμογής, ο Editor, αφού εδώ εμφανίζεται η τρέχουσα σελίδα που επεξεργαζόμαστε. Για να επιλέξουμε μια σελίδα αρκεί να κάνουμε διπλό κλικ στη σχετική μικρογραφία του παραθύρου Document Structure. Εδώ μπορούμε να προσθαφαιρέσουμε components από τη σελίδα μας, να ορίσουμε τη θέση και το μέγεθός τους και να τα επιλέξουμε, ώστε να δούμε και να τροποποιήσουμε τις ιδιότητές τους. Οι ιδιότητες οποιουδήποτε αντικειμένου έχουμε επιλέξει εμφανίζονται στο παράθυρο Properties στο δεξιό τμήμα της οθόνης. Μέσω του παραθύρου αυτού μπορούμε να ορίσουμε ακριβώς τις ιδιότητες του αντικειμένου αυτού σύμφωνα με τις ανάγκες μας. Στο κάτω μέρος της οθόνης εμφανίζεται το παράθυρο Assets. Εδώ βρίσκονται όλα τα assets και τα components του εντύπου μας. Κάνοντας κλικ σε κάποιο από αυτά εμφανίζονται οι ιδιότητές του στο παράθυρο Properties, ενώ μπορούμε να σύρουμε τα περισσότερα από αυτά στον Editor, ώστε να προστεθούν στη σελίδα μας.

3 Όπως φαίνεται στην εικόνα υπάρχουν και άλλα διαθέσιμα παράθυρα (Sprites, Animations, Groups, Pdf Assets) η χρήση των οποίων θα περιγραφεί αναλυτικά στα σχετικά κεφάλαια. Στην πράξη... Ίσως ο καλύτερος τρόπος για να μάθει κανείς την εφαρμογή και να δει τις δυνατότητες που προσφέρει είναι μέσα από μια σειρά μαθημάτων. Κάθε μάθημα θα έχει ως στόχο τη δημιουργία ενός μικρού εντύπου, όπου θα παρουσιάζονται συγκεκριμένα συνήθη διαδραστικά χαρακτηριστικά. Φυσικά η σειρά των μαθημάτων αυτών δεν καλύπτει όλες τις δυνατότητες της εφαρμογής (που πολλές φορές εξαρτώνται και από τη δημιουργική φαντασία του χρήστη), αλλά αποτελούν μια καλή αρχή για να καταλάβει κανείς τη λογική της εφαρμογής. Το υλικό για όλα τα μαθήματα μπορείτε να το βρείτε στη διεύθυνση Κάθε μάθημα περιέχει το τελικό ολοκληρωμένο αρχείο το οποίο θέλουμε να φτιάξουμε, έτσι ώστε να μπορείτε να δείτε άμεσα στη nousviewer τη λειτουργικότητα που θέλουμε να πετύχουμε καθώς και όλα τα αρχεία τα οποία χρησιμοποιούνται για τη δημιουργία της. Τα αρχεία τα οποία παράγονται από το nousbuilder έχουν κατάληξη.mag. Για να τα δείτε πρέπει να έχετε κατεβάσει και να έχετε εγκαταστήσει στο ipad σας την εφαρμογή nousviewer. Έχοντας εγκαταστήσει την εφαρμογή nousviewer, συνδέετε το ipad στον υπολογιστή σας και ανοίγετε το itunes. Επιλέξτε ipad και στη συνέχεια «Εφαρμογές». Κάντε scroll μέχρι το τέλος της σελίδας. Εκεί θα δείτε την περιοχή «Κοινή χρήση αρχείων» και στη λίστα των εφαρμογών θα δείτε τη nousviewer. Εικόνα 2 Επιλέξτε την, πατήστε «Προσθήκη Αρχείου» και επιλέξτε το αρχείο που θέλετε να δείτε (Εικόνα 2). Έχοντας κάνει την παραπάνω διαδικασία ανοίξτε τη nousviewer στο ipad σας και πατήστε «Εισαγωγή». Θα εμφανιστεί στη λίστα το αρχείου που προσθέσατε στο itunes στο

4 προηγούμενο βήμα. Επιλέξτε το. Το αρχείο θα εγκατασταθεί στη nousviewer και θα είναι διαθέσιμο προς ανάγνωση. Μάθημα 1: Δημιουργώντας ένα έντυπο χωρίς διαδραστικότητα!... Φυσικά τα έντυπα που φτιάχνουμε με την nousbuilder θέλουμε να είναι διαδραστικά όμως με αυτό το μάθημα θα μπορέσουμε να γνωρίσουμε κάποιες βασικές αρχές λειτουργίας της nousbuilder που θα μας είναι απολύτως χρήσιμες στη συνέχεια. Αρχικά εγκαταστήστε στη nousviewer το αρχείο lesson1.mag ώστε να δείτε τι θέλουμε να φτιάξουμε. Όπως βλέπετε έχουμε ένα απλό έντυπο που αποτελείται από 3 άρθρα. Τα πρώτα δυό έχουν από μία σελίδα, ενώ το τρίτο περιέχει 3 σελίδες. Οι σελίδες κάθε άρθρου περιέχονται στα αρχεία cover.pdf, guide.pdf και periexomena.pdf. Ας ξεκινήσουμε λοιπόν. Ανοίξτε τη nousbuilder και επιλέξτε το παράθυρο Document Structure. Θα δείτε ότι έχετε ήδη ένα νέο έγγραφο που περιέχει ένα άρθρο με μία σελίδα. Κάντε κλικ πάνω στο «New Magazine». Το παράθυρο Properties θα εμφανίσει τις γενικές ιδιότητες του εντύπου. Για την ώρα αυτές που μας ενδιαφέρουν είναι οι Title, Width, Height. Επιλέξτε Title και βάλτε τον τίτλο που επιθυμείτε (π.χ. Μάθημα 1). Ο τίτλος αυτός θα είναι ορατός στον Viewer όταν ο χρήστης κάνει tap στο έντυπο και εμφανίζεται η μπάρα εργαλείων. Οι ιδιότητες Width και Height καθορίζουν τις διαστάσεις του εντύπου. Σε ένα τυπικό retina ipad οι διαστάσεις αυτές είναι 1536x2048 και είναι οι προτεινόμενες διαστάσεις, επομένως τις αφήνουμε όπως είναι. Είναι ώρα να εισάγουμε το υλικό για το πρώτο μας άρθρο, το εξώφυλο. Πατάμε το κουμπί του κεντρικού μενού πάνω αριστερά και επιλέγουμε Import Πηγαίνουμε στο φάκελο όπου είναι αποθηκευμένα τα υλικά του μαθήματος και επιλέγουμε το αρχείο «cover.pdf». Το αρχείο εισάγεται στα assets του περιοδικού και μπορούμε να το δούμε επιλέγοντας το παράθυρο «Assets». Κάτι που θα πρέπει να γίνει κατανοητό εξ αρχής είναι ότι κάθε σελίδα ενός αρχείου pdf αντιμετωπίζεται από την εφαρμογή σαν ένα ανεξάρτητο asset. Αν και στο παράθυρο Assets εμφανίζεται το αρχείο pdf ως asset, δεν μπορούμε να τοποθετήσουμε στη σελίδα μας κατ ευθείαν το αρχείο αυτό, αλλά μόνο συγκεκριμένες σελίδες του. Για να έχουμε πρόσβαση στις σελίδες του αρχείου pdf επιλέγουμε το παράθυρο Pdf Assets. Από το DropDown του παραθύρου αυτού πάνω αριστερά επιλέγουμε το αρχείο pdf που μας ενδιαφέρει (εδώ έχουμε μόνο ένα αρχείο το cover.pdf). Επιλέγοντάς το εμφανίζονται στο παράθυρο μικρογραφίες όλων των σελίδων του αρχείου (το συγκεκριμένο περιέχει μόνο μια, αλλά γενικά εδώ εμφανίζονται όλες οι σελίδες). Κάνουμε drag & drop τη σελίδα μας από το παράθυρο Pdf Assets στον κεντρικό editor και βλέπουμε ότι η σελίδα pdf έχει τοποθετηθεί μέσα στη σελίδα του εντύπου μας. Επιλέγοντάς την βλέπουμε ότι μπορούμε να τη μετακινήσουμε και να ορίσουμε το μέγεθός της σύμφωνα με τις επιθυμίες μας. Στο σημείο αυτό είναι καλό να επιλέξουμε το παράθυρο «Sprites» (βρίσκεται στην ίδια ομάδα με το Document Structure). Το παράθυρο αυτό μας εμφανίζει τη λίστα με όλα τα αντικείμενα που βρίσκονται στη σελίδα μας. Εδώ είναι σκόπιμο να ξεκαθαρίσουμε κάποια ορολογία που θα χρησιμοποιούμε. Οποιοδήποτε αντικείμενο βρίσκεται σε μια σελίδα είναι ένα «Sprite». Το sprite περιλαμβάνει όλη την πληροφορία που σχετίζεται με το μέγεθος, τη θέση και τη διαφάνεια του αντικειμένου (και κάποιες άλλες στις οποίες θα αναφερθούμε

5 στη συνέχεια). Κάθε sprite τώρα περιέχει ένα component. Το component είναι το αντικείμενο το οποίο υλοποιεί συγκεκριμένη λειτουργικότητα. Στο συγκεκριμένο παράδειγμα έχουμε τοποθετήσει στη σελίδα μας ένα sprite του οποίου το component είναι μια απλή στατική σελίδα pdf. Στα επόμενα μαθήματα θα γνωρίσουμε άλλα πιο περίπλοκα components, όλα όμως θα «ζουν» μέσα σε ένα sprite το οποίο θα καθορίζει τη θέση και το μέγεθός τους. Το παράθυρο «Sprites», λοιπόν εμφανίζει όλα τα sprites της σελίδας. Η σειρά με την οποία εμφανίζονται στη λίστα είναι από αυτό που βρίσκεται πιο κάτω στη σελίδα προς αυτό που βρίσκεται πιο πάνω, επομένως τα τελευταία sprites της λίστας καλύπτουν sprites που πιθανώς βρίσκονται από κάτω τους. Στο κάτω μέρος του παραθύρου εμφανίζονται οι ιδιότητες του επιλεγμένου sprite. Η βασικότερη από αυτές ίσως είναι η «Box» και είναι το καταληλλότερο μέρος για να ορίζουμε με ακρίβεια τη θέση και το μέγεθος των sprite μας. Εδώ λοιπόν επειδή θέλουμε το sprite μας να ξεκινάει από την κορυφή της σελίδας θέτουμε ως X και Y του Box την τιμή 0. Παρατηρήστε ότι το ύψος και το πλάτος της σελίδας έχουν τις τιμές 1536 και 2048 που είναι οι διαστάσεις του εγγράφου μας. Οι διαστάσεις που παίρνουν by default οι σελίδες pdf που προσθέτουμε στα έντυπά μας είναι αυτές που έχουν στο αρχείο pdf. Αν και αυτές μπορεί να είναι οποιεσδήποτε, συνιστούμε έντονα αυτές να είναι οι πραγματικές διαστάσεις στις οποίες θα χρησιμοποιηθούν. Έτσι σελίδες όπως αυτή που χρησιμοποιείται ως background είναι καλό να έχει τις ίδιες διαστάσεις με τις διαστάσεις του περιοδικού, όπως ακριβώς συμβαίνει στην περίπτωσή μας. Tip! Οι σελίδες background πάντα έχουν θέση τη 0,0. Αν την ώρα που κάνουμε drag & drop μια τέτοια σελίδα στον editor κρατάμε πατημένο το Shift, το sprite μας τοποθετείται αυτόματα στη θέση 0,0 και δεν είναι ανάγκη να ορίσουμε εμείς τη θέση στη συνέχεια. Η σελίδα μας δεν περιέχει κάτι άλλο επομένως έχουμε τελειώσει με αυτήν (στην πραγματικότητα μια σελίδα περιέχει περισσότερα sprites, τα οποία ακριβώς της δίνουν τη διαδραστικότητα, αλλά εδώ είπαμε ότι κάνουμε κάτι εντελώς απλό). Επιλέξτε και πάλι το παράθυρο «Document Structure» και πατήστε πάνω στο Article 1. Στο παράθυρο Properties θα εμφανιστούν τώρα οι ιδιότητες του άρθρου. Αυτή που μας ενδιαφέρει είναι κυρίως η Title, αλλά και οι Subtitle, Supertitle. Πρόκειται προφανώς για τον τίτλο του άρθρου καθώς και για πιθανό υπέρτιτλο ή υπότιτλο. Οι υπέρτιτλοι μπορούν να χρησιμοποιηθούν αν θέλουμε να ομαδοποιήσουμε κάποια άρθρα σε ένα «υπεράρθρο» ενώ οι υπότιτλοι μας επιτρέπουν να γράψουμε λίγα πράγματα παραπάνω για το άρθρο. Και οι τρεις εμφανίζονται στον αυτόματο πίνακα περιεχομένων του viewer κατά την ανάγνωση. Εδώ ας δώσουμε ως τίτλο το «Εξώφυλλο». Έχουμε ολοκληρώσει το πρώτο μας άρθρο επομένως μπορούμε να συνεχίσουμε δημιουργώντας το δεύτερο! Στο παράθυρο «Document Structure» πατάμε το κουμπί «Add Article» (δεύτερο από το τέλος). Βλέπουμε ότι δημιουργείται ένα νέο κενό άρθρο. Το επιλέγουμε πατώντας επάνω του. Ας του δώσουμε το όνομα «Οδηγίες». Για να προσθέσουμε σελίδες στο άρθρο, έχοντας το επιλεγμένο πατάμε το κουμπί «Add Page» του παραθύρου «Document Structure» (τελευταίο στη σειρά). Βλέπουμε ότι δημιουργείται μια νέα σελίδα στο άρθρο μας. Κάνουμε διπλό κλικ σε αυτήν, ώστε να γίνει η ενεργή σελίδα στον editor και να μπορέσουμε να την επεξεργαστούμε.

6 Τώρα επαναλαμβάνουμε τη διαδικασία που κάναμε πριν για να εισάγουμε τα υλικά του δεύτερου άρθρου. Έτσι επιλέγουμε «Import...» και διαλέγουμε το αρχείο «guide.pdf». Πηγαίνουμε στο παράθυρο «Pdf Assets» και στο dropdown διαλέγουμε και πάλι το αρχείο guide.pdf ώστε να εμφανιστεί η (μοναδική) σελίδα του. Την κάνουμε drag & drop στην άδεια σελίδα μας κρατώντας πατημένο το shift, ώστε να πάει κατευθείαν στη θέση 0,0 και είμαστε έτοιμοι. Ας βάλουμε λοιπόν και το τρίτο άρθρο. Η διαδικασία είναι ίδια. Στο παράθυρο «Document Structure» πατάμε Add Article. Επιλέγουμε το νέο άρθρο. Αν θέλουμε του δίνουμε τον τίτλο «Περιεχόμενα». Το άρθρο αυτό περιέχει 3 σελίδες οπότε πατάμε το κουμπί Add Page 3 φορές, ώστε να δημιουργηθούν οι 3 σελίδες. Σημείωση: Μπορούμε να σβήσουμε τυχόν παραπάνω σελίδες ή άρθρα επιλέγοντάς τα και πατώντας «Διαγραφή» (το 3 κουμπί από το τέλος). Κάνουμε και πάλι Import το αρχείο «periexomena.pdf», πηγαίνουμε στα Pdf Assets και το επιλέγουμε στο DropDown. Βλέπουμε τώρα, ότι εμφανίζεται κάθε μια από τις τρεις σελίδες του χωριστά. Επιλέγουμε κάθε μια από τις σελίδες του άρθρου μας με διπλό κλικ στο Document Structure και κάνουμε Shift drag & drop στον Editor την αντίστοιχη σελίδα Pdf από το παράθυρο Pdf Assets. Μόλις ολοκληρώσαμε το πρώτο μας μάθημα. Από το κεντρικό μενού επιλέγουμε Save As αποθηκεύουμε το αρχείο μας και είμαστε έτοιμοι να το δούμε στη nousviewer. Μάθημα 2: Αλλάζοντας εικόνες σε μια περιοχή της σελίδας μας. Το μάθημα αυτό είναι από τα βασικότερα της σειράς, αφού μας δείχνει τη λειτουργία ενός από τα βασικότερα components της nousbuilder, του multiimage. Το component multiimage επιτρέπει την εμφάνιση σε μια συγκεκριμένη περιοχή της σελίδας μας εναλλακτικού περιεχομένου. Το περιεχόμενο αυτό μπορεί να αλλάζει διαδραστικά από το χρήστη (π.χ. με πάτημα κάποιων κουμπιών στη σελίδα, ή κάνοντας swipe) ή αυτόματα ύστερα από συγκεκριμένο χρονικό διάστημα. Όπως μπορείτε να δείτε, αφού κατεβάσετε το σχετικό υλικό, στο μάθημα αυτό θα φτιάξουμε ένα έντυπο που αποτελείται από ένα άρθρο 5 σελίδων. Κάθε σελίδα του δείχνει και έναν διαφορετικό τρόπο χρήσης του multiimage component. Σελίδα 1: Ξεφυλλίζοντας εικόνες σε μια περιοχή. Όπως μπορούμε να δούμε στο έτοιμο αρχείο mag αυτό που θέλουμε να πετύχουμε είναι να αλλάζει η εικόνα που εμφανίζεται μέσα στην εικόνα του ipad της σελίδας κάνοντας ο χρήστης swipe σε αυτήν. Πριν προχωρήσουμε ας δούμε τα αρχεία που θα χρησιμοποιήσουμε. Το αρχείο p1.pdf αποτελεί το background της σελίδας μας. Παρατηρήστε τον κενό χώρο που έχει προβλεφθεί, στον οποίο θα εμφανίζονται οι διάφορες εικόνες μας. Τα αρχεία m1-m4.jpg αποτελούν τις εναλλακτικές φωτογραφείες που θα εμφανίζονται στο multiimage. Παρατηρήστε ότι όλες έχουν τις ίδιες ακριβώς διαστάσεις. Γενικά τα περιεχόμενα ενός multiimage component παίρνουν τις διαστάσεις του component. Αν το aspect Ratio του component είναι διαφορετικό από αυτό των περιεχομένων τα περιεχόμενα θα εμφανίζονται παραμορφωμένα.

7 Ας ξεκινήσουμε λοιπόν το μάθημα ξεκινώντας με ένα νέο έγγραφο στη nousbuilder. Ήδη υπάρχει ένα άρθρο με μια σελίδα επομένως μπορούμε να ξεκινήσουμε την πρώτη μας σελίδα άμεσα. Αρχικά εισάγουμε το pdf που περιέχει το background, δηλαδή το «p1.pdf». Το επιλέγουμε κατά τα γνωστά στο Pdf Assets και κάνουμε Shift drag & drop την πρώτη σελίδα στον editor. Το background μας είναι έτοιμο. Όπως είπαμε θέλουμε στην κενή περιοχή μέσα στη φωτογραφία του ipad να εμφανίζονται διαφορετικές εικόνες. Οποτεδήποτε θέλουμε σε μια περιοχή να μπορεί να εμφανίζεται διαφορετικό περιεχόμενο χρησιμοποιούμε το component multiimage. Για να εισάγουμε ένα multiimage component επιλέγουμε κατ αρχήν από το menu τη Menubar Insert, ώστε να εμφανιστούν όλα τα διαθέσιμα components και στη συνέχεια πατάμε το κουμπί MultiImage. Ένα νέο sprite δημιουργείται στη σελίδα μας, το οποίο περιέχει ένα multiimage component. Το sprite αυτό είναι αρχικά τοποθετημένο πάνω αριστερά στη σελίδα μας, έτσι κάνουμε κλικ στο πάνω αριστερά μέρος της σελίδας ώστε να το επιλέξουμε (Εικόνα 3) Εικόνα 3 Παρατηρούμε ότι στο παράθυρο Properties έχουν εμφανιστεί οι ιδιότητες του multiimage component. Η σημαντικότερη ιδιότητα ενός multiimage component είναι η Images διότι αυτή ακριβώς λέει το ποιές εικόνες μπορεί να εμφανίζει το multiimage. Κάνουμε λοιπόν κλικ πάνω σε αυτήν και στη συνέχεια πάνω στο κουμπί με τις τρεις τελείες που εμφανίζεται. Θα εμφανιστεί ένα popup μέσω του οποίου μπορούμε να επιλέξουμε τις εικόνες που θέλουμε. Η αριστερή λίστα περιέχει τα αντικείμενα Εικόνα 4

8 που μπορούμε να εισάγουμε στο multiimage (Εικόνα 4). Εμείς δεν έχουμε εισάγει ακόμα τις εικόνες μας επομένως πατάμε Import και επιλέγουμε τα αρχεία m1.jpg, m2.jpg, m3.jpg, m4.jpg. Βλέπουμε ότι τώρα αυτά εμφανίζονται και στην αριστερή λίστα μια και έχουν πλέον εισαχθεί στο έγραφο και είναι διαθέσιμα assets, αλλά έχουν επίσης αυτομάτως επιλεγεί και στη λίστα των επιλεγμένων εικόνων. Γενικά μπορούμε να προσθέτουμε ένα asset από τα διαθέσιμα στα επιλεγμένα κάνοντας διπλό κλικ επάνω του στην αριστερή λίστα, ενώ μπορούμε να το αφαιρούμε από τη λίστα των επιλεγμένων κάνοντας διπλό κλικ επάνω του στη δεξιά λίστα. Μπορούμε να αλλάξουμε τη σειρά των επιλεγμένων εικόνων χρησιμοποιώντας τα κουμπιά «up» και «down» κάτω από τη δεξιά λίστα. Πατάμε ΟΚ και βλέπουμε ότι στο multiimage φαίνεται η πρώτη εικόνα που έχουμε επιλέξει. Βέβαια είναι μικρή και παραμορφωμένη... Κάντε δεξί κλικ πάνω στο multiimage και από το μενού που εμφανίζεται επιλέξτε «Size From Member». Με τον τρόπο αυτό το component παίρνει τις διαστάσεις της πρώτης εικόνας που περιέχει (γενικά είναι καλό όπως είπαμε όλες οι εικόνες να έχουν το ίδιο μέγεθος). Μετακινήστε το και στην κατάλληλη θέση στον κενό χώρο της εικόνας του ipad. Αν θέλετε ακρίβεια επιλέξτε το παράθυρο sprites και έχοντας επιλεγμένο το multiimage δώστε στο box X:660, Y:872. (Στην πράξη μπορείτε να έχετε αυτές τις ακριβείς θέσεις από το πρόγραμμα που έχετε χρησιμοποιήσει για το σχεδιασμό του background σας, π.χ. InDesign). Έχουμε τώρα δημιουργήσει το multiimage component, το έχουμε βάλει στην κατάλληλη θέση, του έχουμε δώσει το σωστό μέγεθος, αλλά δεν έχουμε πει με ποιόν τρόπο θα περνάμε από τη μια εικόνα στην άλλη. Επιλέγουμε λοιπόν και πάλι το multiimage στη σελίδα μας και στο παράθυρο Properties πηγαίνουμε στην ιδιότητα «Interaction Mode». Εκεί επιλέγουμε «Swipe». Το Interaction mode αυτό επιτρέπει ακριβώς την μετάβαση από εικόνα σε εικόνα όταν ο χρήστης εκτελεί ένα swipe gesture πάνω σε αυτήν. Στην περίπτωση του Interaction Mode Swipe δε χρειαζόμαστε κάτι άλλο επομένως σώζουμε τη δουλειά μας και την ελέγχουμε στο ipad. Η πρώτη μας σελίδα είναι έτοιμη. Σελίδα 2: Χρησιμοποιώντας κουμπιά για να μετακινηθούμε σε επόμενη προηγούμενη εικόνα. Στην προηγούμενη σελίδα χρησιμοποιήσαμε το swipe gesture για να μετακινηθούμε από εικόνα σε εικόνα. Ένας άλλος τρόπος πλοήγησης είναι να έχουμε πάνω στη σελίδα μας κάποια κουμπιά (previous next) τα οποία όταν τα πατάει ο χρήστης να πηγαίνουν από εικόνα σε εικόνα. Αυτό θα κάνουμε στη δεύτερη σελίδα του άρθρου μας. Πηγαίνετε στο παράθυρο «Document Structure» επιλέξτε την σελίδα που φτιάξατε πριν και πατήστε «Add Page» ώστε να προσθέσετε μια νέα σελίδα μετά από αυτήν. Κάντε διπλό κλικ στη νέα σελίδα, ώστε να την επιλέξετε και να αρχίσετε να τη στήνετε. Το background αυτής της σελίδας είναι στο αρχείο p2.pdf. Η κάτω περιοχή της σελίδας όπως μπορείτε να δείτε είναι κενή, ώστε να φιλοξενήσει διάφορες εικόνες τατουάζ, ενώ θα υπάρχουν και δυο κουμπιά που θα οδηγούν στην προηγούμενη και στην επόμενη εικόνα. Οι εικόνες των τατουάζ βρίσκονται στο αρχείο tattoo.pdf. Παρατηρήστε ότι εδώ χρησιμοποιούμε τις σελίδες ενός pdf για εικόνες και όχι ανεξάρτητα αρχεία jpg ή png. Η επιλογή είναι καθαρά δική μας.

9 Ξεκινάμε λοιπόν κάνοντας Import τα δυο αρχεία pdf που θα χρειαστούμε. Στη συνέχεια επιλέγουμε στο Pdf Assets το αρχείο p2.pdf και κάνουμε Shift drag & drop το background στη σελίδα. Από το μενού Insert, πατάμε το MultImage ώστε να εισάγουμε ένα νέο multiimage και το επιλέγουμε (πάνω αριστερά). Πηγαίνουμε στα Properties, επιλέγουμε Images και ανοίγουμε το σχετικό popup διαχείρισης. Επειδή έχουμε ήδη εισάγει το αρχείο tattoo.pdf βλέπουμε ότι οι σελίδες του είναι διαθέσιμες για χρήση. Τις επιλέγουμε κάνοντας διπλό κλικ σε κάθε μια από αυτές και πατάμε ΟΚ. Κάνουμε δεξί κλίκ και Size From Member για να πάρουμε το σωστό μέγεθος και τις τοποθετούμε στη σωστή θέση (Χ:80, Υ:950). Τώρα πρέπει να φτιάξουμε τα δυο κουμπιά, τα οποία θα μας πηγαίνουν από εικόνα σε εικόνα. Τα κουμπιά στη nousbuilder δημιουργούνται από το component Radio Button. Από το μενού Insert πατάμε λοιπόν το Radio Button και ένα νέο Radio Button δημιουργείται στη σελίδα μας. Το επιλέγουμε κάνοντας κλικ απάνω του και βλέπουμε τις ιδιότητές του. Η σημαντικότερη είναι η MainImage που μας λέει τι εικόνα θα έχει το κουμπί. Την επιλέγουμε, και στο popup που εμφανίζεται κάνουμε Import και διαλέγουμε το αρχείο prev.png (προσοχή να είναι επιλεγμένα τα αρχεία τύπου png). Πατάμε ΟΚ κάνουμε δεξί κλικ και Size From Member, και το τοποθετούμε σε μια κατάλληλη θέση (Χ:980, Υ:1740). Με τον ίδιο τρόπο φτιάχνουμε και το δεύτερο Radio Button χρησιμοποιώντας το αρχείο next.png και βάζοντάς το στη θέση (X:1200, Y:1740). Έχουμε πλέον φτιάξει το MultiImage μας καθώς και τα δύο RadioButtons, αλλά δεν τα έχουμε ακόμα συνδέσει, ώστε να κάνουν αυτό που θέλουμε, δηλαδή το πρώτο να μας πηγαίνει στην προηγούμενη εικόνα και το δεύτερο στην επόμενη. Εδώ πρέπει να τονίσουμε κάτι σχετικά με τον τρόπο λειτουργίας των κουμπιών στην πλατφόρμα nous. Σε αντίθεση με άλλα περιβάλλοντα, όπου με κάποιον τρόπο λέμε στα κουμπιά τι θέλουμε να κάνουν όταν αυτά πατηθούν, εδώ το μόνο που κάνουν τα κουμπιά όταν πατιούνται είναι να «φωνάζουν» σε όλο το σύστημα «Πατήθηκα!». Είναι τώρα καθήκον των διαφόρων components να «ακούν» αυτή την πληροφορία και να συμπεριφέρονται ανάλογα. Στην περίπτωσή μας, επιλέγουμε και πάλι το multiimage component που έχουμε στη σελίδα μας. Στο παράθυρο Properties παρατηρούμε τις ιδιότητες «NextTrigger» και «PrevTrigger». Αυτές ακριβώς μας λένε ποιό sprite (το οποίο θα πρέπει να περιέχει ένα RadioButton) αν πατηθεί, το multiιmage θα πάει στο επόμενο ή στο προηγούμενο sprite. Επιλέγουμε λοιπόν ως NextTrigger το sprite με το «next» κουμπί και ως PrevTrigger το sprite με το «previous» κουμπί. Tip! Είναι καλή πρακτική τα sprites τα οποία έχουν κουμπιά να τους δίνετε ονόματα, έτσι ώστε να μπορείτε να τα ξεχωρίζετε εύκολα. Για να κάνετε κάτι τέτοιο, πηγαίνετε στο παράθυρο Sprites, κάντε διπλό κλικ στο όνομα του sprite που σας ενδιαφέρει (imagspritexxx) και δώστε του το όνομα που θέλετε. Η σελίδα μας είναι σχεδόν έτοιμη. Μας μένει ακόμα να αποφασίσουμε αν θέλουμε οι εικόνες μας να κάνουν loop, δηλαδή όταν φτάνουμε στην τελευταία και πατάμε next να συνεχίζουμε στην πρώτη ή αν θέλουμε να σταματάμε. Αυτό καθορίζεται από την ιδιότητα Loop που μπορεί να πάρει τιμές true ή false. Στο συγκεκριμένο παράδειγμα το κάνουμε True.

10 Τέλος μπορούμε να δηλώσουμε και κάποιο εφφέ μέσω του οποίου θα γίνεται η μετάβαση από τη μια εικόνα στην άλλη. Αυτό το επιτυγχάνουμε μέσω της ιδιότητας Transition, όπου επιλέγουμε το εφφέ, και της Transitiontime όπου δηλώνουμε τη διάρκεια του εφφέ. Εδώ πρέπει να τονίσουμε ότι όλοι οι χρόνοι στη nousbuilder δίνονται σε miliseconds επομένως μια τιμή 1000 δηλώνει διάρκεια 1 δευτερολέπτου. Για το συγκεκριμένο παράδειγμα δίνουμε Transition: Crossfade και TransitionTime: 300 (προφανώς μπορείτε να πειραματιστείτε με άλλες τιμές). Σελίδα 3: Χρησιμοποιώντας κουμπιά για να επιλέγουμε συγκεκριμένες εικόνες Αρκετές φορές θέλουμε να μπορούμε να πηγαίνουμε σε συγκεκριμένες εικόνες πατώντας συγκεκριμένα κουμπιά. Στην περίπτωση αυτή συνήθως έχουμε μια σειρά από τόσα κουμπιά όσες και οι εικόνες του multiimage μας και κάθε κουμπί μας οδηγεί σε μια εικόνα. Αυτό θα κάνουμε στην κατασκευή της 3 ης σελίδας του μαθήματος αυτού. Από το Document Structure διαλέγουμε την τελευταία σελίδα μας και πατάμε Add Page, ώστε να προστεθεί μια νέα σελίδα. Την επιλέγουμε και είμαστε έτοιμοι να τη στήσουμε. Όλο το υλικό για τη σελίδα μας βρίσκεται στο αρχείο p3.pdf. Αν το ανοίξουμε θα δούμε έναν εναλλακτικό τρόπο οργάνωσης του υλικού μας. Στο συγκεκριμένο παράδειγμα η πρώτη σελίδα του pdf αποτελεί το background της σελίδας μας, ενώ οι υπόλοιπες σελίδες αποτελούν τις εναλλακτικές σελίδες του multiimage το οποίο καταλαμβάνει ολόκληρο το μέγεθος της σελίδας! Παρατηρήστε ότι στην πρώτη σελίδα (στο background) όλα τα κουμπιά είναι «μη επιλεγμένα» και το πλαίσιο κειμένου άδειο, ενώ στις υπόλοιπες είναι επιλεγμένο από ένα κουμπί και στο πλαίσιο εμφανίζεται το αντίστοιχο κείμενο. Ας προχωρήσουμε λοιπόν στην υλοποίηση. Αρχικά κάνουμε import το αρχείο p3.pdf. Κατά τα γνωστά πηγαίνουμε στο Pdf Assets και το επιλέγουμε. Κάνουμε shift drag & drop την πρώτη σελίδα, ώστε να έχουμε το background μας. Εδώ παρατηρούμε ότι η σελίδα pdf έχει τις μισές διαστάσεις από τη σελίδα μας. Αν και αυτό όπως έχουμε πει δεν προτείνεται δε δημιουργεί και ιδιαίτερο πρόβλημα. Απλά τώρα θα πρέπει να ορίσουμε τις σωστές διαστάσεις επιλέγοντας το sprite του background, πηγαίνοντας στο παράθυρο sprites και δίνοντας στο Box το σωστό Width (1536) και Height (2048). Στη συνέχεια δημιουργούμε κατά τα γνωστά το multiimage κάνοντας κλικ στο σχετικό κουμπί του insert μενού. Το διαλέγουμε και πάμε κατά τα γνωστά στο Properties->Images ώστε να επιλέξουμε τις σχετικές εικόνες. Εδώ είναι οι υπόλοιπες σελίδες του pdf p3 επομένως τις διαλέγουμε από τη λίστα κάνοντας διπλό κλικ σε αυτές. Προφανώς εδώ δεν κάνουμε import γιατί οι σελίδες έχουν ήδη μπει στο σύστημα όταν κάναμε import το pdf. Επίσης προσέχουμε να μη διαλέξουμε και την πρώτη σελίδα που είναι το background, αλλά μόνο τις υπόλοιπες (2 6). Έχοντας επιλεγμένο το multiimage πηγαίνουμε στο παράθυρο Sprites και του δίνουμε διαστάσεις (1536x2048) (To size from member εδώ δεν είναι χρήσιμο αφού όπως είπαμε στα συγκεκεριμένο παράδειγμα οι σελίδες δεν έχουν το «σωστό» μέγεθος. Έχοντας φτιάξει το multiimage, αρκεί τώρα να φτιάξουμε και τα 5 radiobuttons με τα οποία θα επιλέγουμε κάθε εικόνα του multiimage. Εδώ είναι αρκετά χρήσιμο για να αποφευχθεί πιθανό μπέρδεμα να δίνουμε όνομα σε κάθε κουμπί που φτιάχνουμε, ώστε μπορούμε να

11 το αναγνωρίζουμε εύκολα. Έτσι κάνουμε τα εξής: Από το insert μενού πατάμε το RadioButton, ώστε να δημιουργηθεί το κουμπί μας. Το επιλέγουμε και στο παράθυρο των sprites κάνουμε διπλό κλικ πάνω στο όνομά του, ώστε να του δώσουμε αναγνωρίσιμο όνομα. Εδώ θα χρησιμοποιήσουμε τα ονόματα b1-b5. Στη συνέχεια το τοποθετούμε στην κατάλληλη θέση πάνω στη σελίδα, δηλαδή πάνω από το αντίστοιχο κουμπί της εικόνας και του δίνουμε το επιθυμητό μέγεθος. Παρατηρήστε ότι στο συγκεκριμένο παράδειγμα η εικόνα του κουμπιού είναι ήδη περασμένη στις από πίσω εικόνες σε αντίθεση με το προηγούμενο παράδειγμα. Γενικά μπορούμε να μη δίνουμε συγκεκριμένη MainImage στα RadioButtons, οπότε αυτά θα εμφανίζονται διαφανή στον viewer (όχι όμως και στην nousbuilder, ώστε να μπορούν να φαίνονται εύκολα). Στην περίπτωση αυτή η τοποθέτηση των radiobuttons δεν απαιτεί απόλυτη ακρίβεια, αρκεί μόνο να ταιριάζει με την εικόνα που Εικόνα 5 βρίσκεται από πίσω. Επαναλαμβάνουμε την παραπάνω διαδικασία και για τα υπόλοιπα τέσσερα κουμπιά. Η τελική εμφάνιση θα πρέπει να είναι περίπου όπως στην Εικόνα 5. Παρατηρήστε τα ονόματα των sprites στο παράθυρο Sprites και τη θέση των κουμπιών στη σελίδα. Το μόνο που μένει τώρα είναι να συνδέσουμε τα κουμπιά με τις εικόνες που θα εμφανίζουν. Για το σκοπό αυτό επιλέγουμε το multiimage μας στη σελίδα και στο παράθυρο Properties ανοίγουμε την περιοχή ImageTriggers. Θα εμφανιστεί μια λίστα με όλες τις εικόνες του multiimage. Σε κάθε μια από αυτή διαλέγουμε το κατάλληλο sprite. Δηλαδή στην πρώτη το b1, στη δεύτερη το b2 κλπ. Παρατηρήστε ότι επειδή τα κουμπιά εδώ είναι διαφανή δε βλέπουμε κάποια εικόνα γι αυτό είναι πολύ χρήσιμη η ονομασία των sprites που κάναμε στο προηγούμενο βήμα. Αν θέλουμε ορίζουμε και Transition TransitionTime (π.χ. Crossfade -300) και είμαστε έτοιμοι.

12 Μια πιθανή παρατήρηση στο συγκεκριμένο παράδειγμα είναι το τι χρειαζόμαστε το background αφού η σελίδα μας καλύπτεται εξ ολοκλήρου από το multiimage. Η απάντηση είναι ότι αυτό χρειάζεται στην περίπτωση που χρησιμοποιούμε κάποιο Transition όπως το crossfade όπου η μια εικόνα σβήνει σταδιακά και η άλλη εμφανίζεται. Στην περίπτωση αυτή απαιτείται το «ουδέτερο» background γιατί αλλιώς το transition δε φαίνεται ομαλό. Μπορείτε να διαγράψετε το background και θα δείτε τη διαφορά. Επίσης ίσως να απορήσει κανείς γιατί χρησιμοποιούμε όλη τη σελίδα ως multiimage ενώ μόνο ένα μέρος της αλλάζει. Η απάντηση είναι ότι ασφαλέστατα δεν είναι αναγκαίο, αλλά εξαρτάται αποκλειστικά από το πώς βολεύει τους χρήστες να φτιάχνουν τα assets τους. Έτσι για κάποιους είναι πιο γρήγορο να φτιάχνουν εναλλακτικές μορφές ολόκληρης της σελίδας και να τις αποθηκεύουν ολόκληρες, ενώ άλλοι μπορεί να προτιμούν να αποθηκεύουν ξεχωριστά μόνο το μέρος της σελίδας που όντως αλλάζει. Είναι καθαρά επιλογή του χρήστη. Σελίδα 4: Frame Animation με τη χρήση MultiImage Μέχρι τώρα οι εναλλαγές των εικόνων στο multiimage γίνονταν κατόπιν κάποιας ενέργειας του χρήστη. Εναλλακτικά οι εικόνες ενός multiimage μπορούν να εναλλάσονται και αυτόματα κάθε φορά που περνάει κάποιο συγκεκριμένο χρονικό διάστημα. Αν το χρονικό αυτό διάστημα είναι σχετικά μεγάλο μπορούμε να μιλάμε για μια τυπική χρήση multiimage που προχωράει αυτόματα, όμως αν το χρόνικό διάστημα είναι σχετικά μικρό μπορούμε να χρησιμοποιήσουμε το multiimage για να πετύχουμε το εφφέ του frameanimation. Αυτό ακριβώς θα κάνουμε στην τέταρτη σελίδα του μαθήματός μας, όπου θα εμφανίσουμε σταδιακά, αλλά αρκετά γρήγορα τα γράμματα ενός τίτλου δίνοντας ακριβώς την αίσθηση ενός animation. Δημιουργούμε τη νέα μας σελίδα όπως πριν και εισάγουμε το αρχείο p4.pdf που περιέχει το σχετικό background της σελίδας. Τοποθετούμε το background στη νέα μας σελίδα και εισάγουμε ένα νέο multiimage στη σελίδα μας. Τα καρέ του frame animation που θέλουμε βρίσκονται στα αρχεία k0 έως και k8.png. Τα εισάγουμε λοιπόν ως εικόνες του MultiImage όπως έχουμε ήδη μάθει, κάνουμε size from member για να αποκτήσει το multiimage τις σωστές διαστάσεις και το τοποθετούμε στο κάτω μέρος της σελίδας (Χ:100, Υ:1024). Για να κάνουμε το mutiimage να εναλλάσει τα καρέ αυτόματα απλά το διαλέγουμε και βάζουμε μια μη μηδενική τιμή στo property AutoAdvanceInterval. Η τιμή αυτή λέει καθέ πόσα milliseconds το multiimage θα προχωράει στο επόμενο καρέ. Τυπικές τιμές για ένα frame animation είναι από milliseconds (εδώ έχουμε βάλει 35). Γενικά όταν έχουμε frame animation δε χρησιμοποιούμε κάποιο transition, αντίθετα αν θέλουμε απλά να πετύχουμε κάποιο εφφέ slide show, χρησιμοποιούμε πολύ μεγαλύτερους χρόνους (κάποια δευτερόλεπτα) και αν θέλουμε μπορούμε να χρησιμοποιήσουμε και κάποιο transition. Σελίδα 5. Περιστρέφοντας αντικείμενα Ένα ιδιαίτερα ενδιαφέρον εφφέ είναι αυτό κατά το οποίο αλλάζει η εικόνα του multiimage καθώς μετακινούμε το δάχτυλό μας προς τα μπρος ή προς τα πίσω πάνω σε αυτό. Αυτό χρησιμοποιείται συνήθως για να δείξουμε ένα αντικείμενο να περιστρέφεται (αν έχουμε αρκετά καρέ του αντικειμένου που το δείχνουν σε διάφορες γωνίες), αλλά με λίγη φαντασία μπορεί να χρησιμοποιηθεί με διάφορους τρόπους. Στο μάθημα αυτό εμείς θα τα

13 χρησιμοποιήσουμε για να «περιστρέψουμε» ένα αντικείμενο. Το σχετικό background βρίσκεται στο p5.pdf ενώ τα διάφορα καρέ είναι οι εικόνες r1 r35.jpg. Παρατηρήστε ότι κάθε εικόνα δείχνει το αντικείμενο με λίγο περισσότερη περιστροφή κάθε φορά. Η διαδικασία είναι ίδια με αυτήν που έχουμε ήδη περιγράψει, επομένως φτιάχνουμε μια καινούργια σελίδα και βάζουμε ως background το p5.pdf και ως εικόνες του multiimage τα r1-r35.jpg (προσοχή να μπουν με τη σωστή σειρά). Επειδή οι συγκεκριμένες εικόνες έχουν το μισό μέγεθος από το κανονικό δίνουμε στο Box του multiimage τις ακόλουθες τιμές Χ:228, Υ:176, Width:598, Height: Τώρα το μόνο που έχουμε να κάνουμε είναι να δώσουμε στο multiimage ώς InteractionMode το Rotate. Δοκιμάστε το! Μάθημα 3: Εμφανίζοντας εικόνες στη σελίδα μας Στο προηγούμενο μάθημα είδαμε πώς μπορούμε να εμφανίζουμε διαφορετικές εικόνες σε μια περιοχή της σελίδας μας χρησιμοποιώντας το multiimage component. Βασικό χαρακτηριστικό του multiimage component είναι ότι ήδη υπάρχει στη σελίδα μας και εμφανίζει κάποια εικόνα, η οποία στη συνέχεια μπορεί να αλλάξει. Πολλές φορές όμως θέλουμε να εμφανίζεται στη σελίδα μας κάτι (συνήθως με το πάτημα ενός κουμπιού) χωρίς να προϋπάρχει στη σελίδα μας. Ουσιαστικά θέλουμε μια λειτουργικότητα τύπου popup. Η λειτουργικότητα αυτή επιτυγχάνεται με το radioimage component τα χαρακτηριστικά του οποίου θα δούμε στο μάθημα αυτό. Ας δούμε τη σελίδα του μαθήματός μας. Όπως μπορούμε να δούμε έχουμε μια σελίδα στο δεξί μέρος της οποίας υπάρχουν κάποια κουμπιά, που όταν τα πατάμε θέλουμε να εμφανίζεται κάποιο popup κείμενο. Το background της σελίδας μας βρίσκεται στο αρχείο p1.pdf ενώ τα popups βρίσκονται στο αρχείο vatmoi.pdf. (Σημείωση: Ο τρόπος οργάνωσης είναι καθαρά τυχαίος και σύμφωνος με τις προτιμήσεις του χρήστη. Θα μπορούσαν τα πάντα να είναι σε ένα αρχείο, ή τα πάντα να είναι σε ξεχωριστά αρχεία). Ξεκινάμε λοιπόν κάνοντας import τα δυο pdf που χρειαζόμαστε και τοποθετώντας το background της σελίδας μας στον editor από το Pdf Asset p1.pdf. Είμαστε τώρα έτοιμοι να ασχοληθούμε με τα popup μας. Όπως είπαμε το component που πρέπει να χρησιμοποιήσουμε είναι το radioimage, δημιουργούμε λοιπόν ένα πατώντας το RadioImage από τo insert μενού. Το περιεχόμενο του radioimage καθορίζεται από την ιδιότητα «Image». Πηγαίνουμε λοιπόν στο παράθυρο Properties, επιλέγουμε Image και πατάμε το κουμπί με τις τρεις τελίτσες για να επιλέξουμε την εικόνα που θέλουμε. Όπως είπαμε οι εικόνες που θέλουμε να εμφανίζονται βρίσκονται στο αρχείο vatmoi.pdf που έχουμε ήδη εισάγει επομένως είναι διαθέσιμες. Διαλέγουμε την πρώτη σελίδα (vatmoi.pdf Pg:1) και πατάμε ΟΚ. Κατά τα γνωστά κάνουμε δεξί κλικ και size from member για να πάρει το sprite μας τις διαστάσεις της εικόνας και το μετακινούμε στη θέση που θέλουμε να εμφανίζεται. (στο συγκεκριμένο παράδειγμα Χ:6, Υ: 1082). Επειδή στο συγκεκριμένο παράδειγμα θα έχουμε αρκετά τέτοια components καλό είναι να τους δώσουμε στα sprite τους όνομα ώστε να τα εντοπίζουμε εύκολα. Έχοντας λοιπόν επιλέξει τη σελίδα μας στο παράθυρο Document Structure, ανοίγουμε το παράθυρο Sprites και κάνουμε διπλό κλικ στο sprite με το

14 radioimage που μόλις δημιουργήσαμε. Στο παράδειγμα μας θα ονομάσουμε τα sprites των radioimages ως ri1 ri7. Αν και εμείς τώρα στον editor βλέπουμε κανονικά το component, κατά την ανάγνωση του εντύπου στη nousviewer, τα radioimages ΔΕΝ είναι ορατά. Ένα radioimage εμφανίζεται στη nousviewer, μόνο όταν πατηθεί ένα κουμπί το οποίο έχουμε ορίσει ως Trigger του radioimage. Αυτό λοιπόν που πρέπει να κάνουμε τώρα είναι να δημιουργήσουμε το κουμπί το οποίο όταν πατιέται θα εμφανίζει το radioimage. Όπως έχουμε πει στο προηγούμενο μάθημα, δημιουργούμε κουμπιά χρησιμοποιώντας το component radiobutton. Στο insert μενού πατάμε λοιπόν Radio Button και βλέπουμε ότι δημιουργείται ένα νέο radiobutton. Επειδή έχουμε ήδη ζωγραφισμένο το κουμπί μας στο background θα αφήσουμε το radiobutton διαφανές και απλά θα ρυθμίσουμε το μέγεθος και τη θέση του ώστε να καλύπτει την περιοχή που θέλουμε να «πατιέται». Επίσης είναι καλό (ειδικά εδώ που θα έχουμε αρκετά κουμπία) να δώσουμε στο sprite κάποιο όνομα, ώστε να το αναγνωρίζουμε εύκολα. Στο παράδειγμά μας θα ονομάσουμε τα κουμπία b1 b7 αντίστοιχα. Πρέπει λοιπόν τώρα να «συνδέσουμε» το κουμπί μας με το radioimage, έτσι ώστε όταν πατιέται το κουμπί να εμφανίζεται το radioimage. Υπενθυμίζουμε, ότι στη nousbuilder δε λέμε στα κουμπία τι να κάνουν, αλλά στα υπόλοιπα components να ακούν αν κάποιο κουμπί πατήθηκε και να αντιδρούν ανάλογα. Έτσι λοιπόν επιλέγουμε και πάλι το radioimage που φτιάξαμε και στο παράθυρο Properties επιλέγουμε την ιδιότητα Trigger. Αυτή είναι η ιδιότητα που λέει ποιο sprite όταν πατηθεί θα πρέπει να εμφανιστεί το radioimage. Στη συγκεκριμένη περίπτωση είναι το κουμπί που μόλις φτιάξαμε, δηλαδή το «b1», επομένως το επιλέγουμε. Το πρώτο μας popup είναι έτοιμο και μπορούμε να το δούμε άμεσα στη nousviewer. Με τον ίδιο τρόπο μπορούμε να συνεχίσουμε και για τα υπόλοιπα Popups. Δημιουργούμε το radioimage, του δίνουμε κάποιο όνομα, του ορίζουμε την εικόνα που θα εμφανίζει και το τοποθετούμε στη θέση που θέλουμε (στο συγκεκεριμένο παράδειγμα όλα εμφανίζονται στην ίδια θέση αλλά αυτό είναι τυχαίο). Δημιουργούμε και ένα radiobutton, του δίνουμε επίσης κάποιο όνομα και το τοποθετούμε στη θέση που θέλουμε. Τέλος, επιλέγουμε το radioimage που φτιάξαμε και του δίνουμε ως Trigger το radiobutton που φτιάξαμε. Tip! Μπορούμε εύκολα να επιλέξουμε ένα sprite από το παράθυρο Sprites κάνοντας κλικ πάνω σε αυτό. Tip! Καθώς η σελίδα μας γεμίζει με components ίσως είναι δύσκολο να εντοπίσουμε κάποιο από αυτά. Μπορούμε να κρύψουμε από τον editor όποια sprites θέλουμε κάνοντας κλικ στο σχετικό checkbox του παραθύρου Sprites. Προσοχή! Αυτή η απόκρυψη σχετίζεται μόνο με το περιβάλλον του editor και όχι με την nousviewer. Στο viewer τα διάφορα αντικείμενα εμφανίζονται κανονικά άσχετα αν τα έχουμε κρύψει στον editor. Όταν έχουμε εμφανίσει ένα popup στη nousviewer, για να το κρύψουμε πρέπει ο χρήστης να ξαναπατήσει το κουμπί με το οποίο το εμφάνισε. Εναλλακτικά μπορούμε να κάνουμε το popup να εξαφανίζεται και όταν ο χρήστης κάνει tap πάνω σε αυτό. Για να πετύχουμε κάτι τέτοιο αρκεί να θέσουμε την ιδιότητα CloseOnTap του RadioImage σε True. Όλα τα radioimage components που έχουν το ίδιο GroupName (ακόμα και το κενό) λειτουργούν ως radio group, δηλαδή όταν εμφανίζεται ένα από αυτά αυτομάτως κλείνει όποιο άλλο radioimage της ομάδας είναι τυχόν ανοιχτό.

15 Όπως και στο multiimage έτσι και στα radioimage μπορούμε να επιλέξουμε ένα transition και κάποιο transitiontime μέσω του οποίου θα εμφανίζονται και θα εξαφανίζονται τα popup. Στο συγκεκριμένο παράδειγμα έχουμε βάλει σε όλα Crossfade 300.