Introduction to ePub workflow with PubCoder: text formatting, anatomy of Action:Scale, Seek Sound and foundation of Animation

1. ePub3
Innocenzo Tremamondo

2. 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

3. 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

4. • altra angolazione

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

6. 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

7. 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

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

9. 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

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

11. • tre diverse opzioni per usufruire del programma

12. photo book
• Opzione inserita nelle ultime versioni

13. Sistemazione testi+immagine
• le varie caselle di testo possono finire collocate in diverse
posizioni
• sempre tenute sotto traccia con il pannello “Overlay”

14. 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

15. 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

16. 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”

17. 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

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

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

20. Azione: Scale- selezionare
risorsa
• Inseriamo un’immagine che dovrà ingrandirsi al tocco
dell’utente
• Selezioniamo l’immagine dall’apposito pannello “Images”
controllare sempre
l’inserimento!

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

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

23. 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)

24. 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)