ePub3Innocenzo Tremamondo

Acceleration, Origin, Repeat• Controllare sempre le voci “Acceleration”• Origin risulta importante quando hai parecchio corpo testo e devi

vedere dove va a collocarsi l’animazione, evitando di dar fastidio alla lettura dell’utente

• Repeat serve quando l’animazione deve compiere lo stesso movimento indipendentemente dalla lettura o dalla narrazione

valori di Acceleration• sono gli stessi che animano le proprietà CSS:transition• ease-in parte veloce e finisce lento• ease-out parte lento e finisce veloce• elastic in elabora una partenza elastica• elastic out elabora un arrivo elastico

• altra angolazione

“Show Object”• l’Object viene mostrato all’utente

Combinare gli Eventi• Allo stesso Object si possono combinare diverse azioni, che si

attiveranno solo quando si verifica l’evento programmato• Nell’esempio, allo stesso Object sono assegnati tre eventi,

secondo cui reagirà in maniera differente

Combinare gli Eventi• On Load= caricamento dell’immagine• L’object verrà mostrato

• On Show= quando l’immagine viene visualizzata• L’object comincerà a ruotare per sempre

• On Touch Up= quando l’immagine viene toccata dall’utente• L’object farà un balzo per poi ritornare al punto di partenza

Assegnare Azioni• Nell’esempio, ogni lettera conserva un’azione programmato • Move Object

Drag Object• Azione predefinita di PubCoder, consente all’utente di

trascinare un particolare oggetto con il dito verso un punto preciso• Target: l’oggetto su cui è dichiarata l’azione (di solito self)• Drag Bounds Object: il punto preciso dove deve essere lasciato

Updating di PubCoder

• Gli Update sono frequenti (di norma, ogni due mesi)• dalla versione 1.0 risulta a pagamento

• tre diverse opzioni per usufruire del programma

photo book• Opzione inserita nelle ultime versioni

Sistemazione testi+immagine• le varie caselle di testo possono finire collocate in diverse

posizioni• sempre tenute sotto traccia con il pannello “Overlay”

Sistemazione testi+immagine• Il testo scorre all’interno della casella, ricollocandosi nel

migliore dei casi in base alle proporzioni della medesima• I piccoli quadrati bianchi servono per ricalcolare le proporzioni

di altezza e larghezza desiderate dall’utente

Sistemazione testi+immagine• anche la casella immagine segue le stesse procedure di

inserzione, basta però fare attenzione a dove questa verrà collocata

• Dietro al testo sarebbe preferibile mettere qualcosa con un’opacità più ampia, troppo colore rischia di minare la leggibilità del testo

Sistemazione testi+immagine• Possibilità di mettere più caselle di testo innestate tra di loro• oppure casella di testo con un proprio stile, come le “caselle testo

di approfondimento”

Editor di testi• All’interno di PubCoder è presente l’editor di testo, dove

inserire ulteriori elementi decorativi del testo.• Possibilità di cambiarne la struttura (font, stile, grandezza,

elenchi)• Possibilità di inserire nuovi paragrafi (stili principali, indentazione)

tutte le modifiche effettuate all’interno dell’editor andranno dentro le rispettive caselle di testo

Audio: seek audio• Altra tipologia di azione inseribile nell’elemento• stabilire il target (def. Self)• stabilire il tempo( attr. Time)

Azione Scale• Differenti tipi di Scale, combinati con i valori visti prima

Azione: Scale- selezionare risorsa• Inseriamo un’immagine che dovrà ingrandirsi al tocco

dell’utente• Selezioniamo l’immagine dall’apposito pannello “Images”

controllare semprel’inserimento!

Azione: Scale-inserire azioni• inserire due azioni all’evento “On Touch Up” (mode Enabled):• Wait• Scale Object

Azione: Scale-testing risultati• controllare il risultato sul Quick Preview• cliccare sull’immagine per controllare l’azione di Scale

Animazioni• La finestra delle animazioni si compone di tre parti:• Fotogrammi, dove si vedono le immagini in sequenza che fanno

partire le immagini• Anteprima, mostra l’esatta collocazione nello spazio

dell’immagine• Attributi come FPS (Frame per seconds), Repeat (la ripetizione),• Play en behaviour (il comportamento che deve assumere) e il

sound (il suono che accompagna l’animazione)

Animazioni• il pannello centrale ha due pulsanti in basso, che fanno avviare

e mettere in pausa l’animazione stessa• Lo sfondo di default ha il canale alpha(=trasparenza)• il suono si può importare dal proprio desktop o dal pannello

assets(=risorse)