Tutorial: riviste sfogliabili in Flash con InDesign CS4

21 luglio, 2009 - Tags: cs4, flash, indesign, tutorial

Tutorial InDesign In realtà questo non è proprio un tutorial, semplicemente vi mostrerò una delle funzioni più interessanti di InDesign CS4, avendo notato un notevole afflusso di visite al mio sito tramite frasi su motori di ricerca tipo “riviste sfogliabli cs4 come fare” ho deciso di venire incontro a chi ha l’esigenza di creare questo tipo di effetto.

Fino a un’anno fa per creare un Flipping Book (il termine esatto di questo effetto, tradotto “libro sfogliabile”) c’erano principalmente due casi: o acquistare un’apposito plugin per Flash o trovare qualche tutorial che spiegasse come fare , scrivendo una vagonata di codice (spesso in ActionScript 2).

Oggigiorno, fortunatamente, la Creative Suite 4 ci viene incontro! Chi dispone di InDesign CS4 o di CS4 Design Premium/Standard (che include InDesign) potrà sperimentare e sfruttare la realizzazione di Flipping Books con estrema facilità.

Perche devo usare InDesign anziche Flash?

Questa è la domanda che molti di voi probabilmente si stanno facendo, il libro sfogliabile è un’effetto che si ottiene grazie alla tecnologia Flash, quindi perche includere questa funzionalità in Indesign invece di Flash? Semplice, perche per fare un libro sfogliabile dovete prima creare il libro vero e proprio, ovvero impaginarlo, e questo è un compito che non rientra nelle funzioni di Flash ma è invece il pane quotidiano di Indesign, e tra poco scoprirete la rapidità col quale potrete realizzarlo grazie a questo programma.

Software richiesto:

Indesign CS4 o CS4 Design Premium o Standard (entrambe includono Indesign), questa è una nuova funzionalità di questa specifica versione. Entrambi sono software a pagamento ma sul sito di Adobe potrete scaricarne una versione di prova gratuita completamente funzionante per 30 giorni. Per fare alcune “correzioni” sulla pagina Html finale è necessario un’editor testuale come Notepad o magari uno più specifico come Aptana (gratuito e multi-piattaforma).

Prerequisiti:

Qualche immagine, conoscenza basilare di software di elaborazione grafica, (opzionale) conoscenza minima di Indesign.

Argomenti trattati:

Cenni basilari di Indesign, esportazione in SWF (formato Flash) da Indesign.

1. Avvio di Indesign CS4

All’avvio di InDesign create un nuovo documento; dimensioni, orientamento e tutto il resto impostatelo a vostro piacimento ma tenete presente un paio di cosette: ovviamente almeno 4/5 pagine (nell’esempio lo farò da 4 pagine) e le impostazioni di “Pagina al vivo” settate a 0. Visto che l’output finale è il web, l’abbondanza non ci serve a meno che non state creando un file per la stampa che in futuro vorrete riutilizzare anche per il web (di default nell’esportazione web l’abbondanza viene ignorata).

Passo 1

2. Posizioniamo le immagini

A questo punto create il documento che vi serve, come siete abituati a lavorare con InDesign. Per continuare con l’esempio semplicemente inserisco una foto grande tutta l’area in ogni pagina, e in fondo disegno una striscia nera con opacità 60% in cui sopra inserisco un testo bianco con il titolo della foto.

Passo 2

3. La transizione magica

Eccoci alla parte “magica”, completato il passo 2 andate sul menu “Finestra” poi “Interattività” e infine “Transizioni di pagina”, per aprire la finestrella che ci permette di selezionare e applicare le transizioni animate. Queste transizioni in genere funzionano una volta esportato il file in formato PDF per creare animazioni e rendere il proprio documento molto simile a una slideshow. Nel nostro caso selezioniamo la transizione “Sfoglia”, da notare che accanto c’è scritto “solo SWF” per avvisarci che quella transizione funzionerà solo se esportiamo il tutto in un file SWF che sono i file compilati per il web di Flash. Possiamo applicare le trasizioni pagina per pagina semplicemente selezionando la pagina desiderata e successivamente selezionando il tipo di trasizione, oppure per velocizzare il lavoro possiamo cliccare la piccola icona in basso a destra al pannello “Transizioni di pagina” che applicherà l’effetto in automatico a tutte le pagine.

Passo 3

4. Esportiamo per il web

Ora clicchiamo su “File” quindi “Esporta”, nella finestra di dialogo che ci appare, alla voce “Formato” selezioniamo “SWF” e procediamo, nella prossima finestra vi consiglio di seguire queste impostazioni:

Passo 4

Riassumendo, InDesign vuole sapere se fissare una dimensione (cosa che consiglio) o rendere “elastico” il documento, se affiancare o no le pagine e se creare un file Html in automatico (altra impostazione consigliata), se avete inserito pulsanti con interattivià potete decidere se mantenere tale interattività (come linkare verso un sito) mentre per la qualità delle immagini è meglio impostare su “Alta”. Fatto questo premete il pulsante “OK” e InDesign ci creerà tutti i file necessari nella cartella da noi indicata, a questo punto non ci resta che andare nella suddetta cartella e lanciare il file .html per vedere funzionare il nostro documento sfogliabile!

ATTENZIONE: InDesign potrebbe dirvi che ci sarà una leggera alterazione dei colori in quanto state esportando da quadricromia (stampa) vero tricromia (web), se volete evitare questo seguite le istruzioni indicate e alterate da subito il profilo del documento per non avere differenze tra quello con cui lavorate e il prodotto finale.

5. Conclusione

Avete appena visto uno dei punti forti della versione CS4 di InDesign, ovvero la possibilità di utilizzare le conoscenze e strumenti di grafica per la stampa e utilizzarle per creare contenuti web interattivi. E , per chi gia utilizza Flash, la comodità di ottenere un’effetto di questo tipo in breve tempo e senza particolari sforzi!

NOTA:

Nel file sorgente da scaricare ho impostato tutto esattamente come nel demo tranne che non ci sono le foto. Quindi se volete fare una prova veloce vi basta scaricare il file inserire nel livello indicato le vostre foto, sostituire i titoli ed esportare in swf!

26 risposte per “Tutorial: riviste sfogliabili in Flash con InDesign CS4”

Salvo , il 21 agosto 2009 alle 14:48 scrive:

Devo dedurre che questo tutorial piace… 210 visite in un mese!
ilaria , il 2 settembre 2009 alle 08:44 scrive:

E’ una funzionalità molto utile, mi chiedevo se q.no sa come si può creare un indice per le pagine.
pier sicurella , il 1 ottobre 2009 alle 11:47 scrive:

ottimo articolo, ma il problema del preload come lo risolvi, visto il peso generato, in caso di magazine on line
scusa se te lo chiedo, ma ho provato ad inserirlo, e si perde l’azione di sfoglia, generando un loop

se non si mette il preload tutto fila liscio, ma aspetti un po’ perche’ la pagina si carichi e non e’ bello

grazie e ancora complimenti
pier sicurella
Salvo , il 1 ottobre 2009 alle 13:56 scrive:

ciao pier,
la questione che tratti non è assolutamente da sottovalutare. Mi vengono in mente due soluzioni “teoriche” nel senso che non le ho mai provate in questo caso specifico, potresti creare un nuovo file Flash che abbia esclusivamente lo scopo di caricare un file esterno (il file swf del libro sfogliabile) cosi da poter sfrutare la ProgressBar per visualizzare l’avanzamento del dowload, oppure potresti inserire il file swf dello sfogliabile in un file html e sfruttare dei preloader Javascipt (con jQuery ce ne sono vari a disposizione). Esportare per Flash da InDesign ho notato recentemente che perde la transizione di pagina, quindi in generale l’unica cosa che mi sembra giusta da fare è precaricare il fil swf.
Se sistemi la cosa con queste o altre soluzioni fammi sapere!
ciao
Adriana , il 2 dicembre 2009 alle 10:51 scrive:

Ottimo tutto!
Peccato che il Fit ti screen non funzioni! Lo ingrandisce, quello sì, ma non lo adatta. Sob.

Come si fa ad adattare?
Adriana , il 2 dicembre 2009 alle 11:13 scrive:

… e poi cmq hoh c’è lo zoom

Bella funzione, ma parziale…
Salvo , il 2 dicembre 2009 alle 11:34 scrive:

non saprei dirti per il Fit, in genere preferisco mantenere una dimensione fissa , specialmente se lavoro con le foto.
Per lo zoom posso solo dirti che in CS4 la parte del “flipping book” si limita a queste 4 opzioni… ma la CS5 è ancora in lavorazione e tra poco passa in beta, quindi se si invia qualche segnalazione o suggerimenti su nuove funzionalità chissà che magari non ci ascoltino considera che le novità principali di Illustrator e InDesign sono state introdotte tramite feedback!
Adriana , il 2 dicembre 2009 alle 13:19 scrive:

Ehhhhh il potere della rete!
Grazie per la condivisione!
Diego , il 8 dicembre 2009 alle 15:41 scrive:

Ciao Salvo hai visto ke ti sto lasciando il commento??? ;-D
Il mio commento non può che essere positivo, è scritto bene, in italiano e de semplicissimo da capire!
Grazie 1000 Salvo
Ciao Diego
elisa , il 10 dicembre 2009 alle 09:53 scrive:

buongiorno a tutti… avrei bisogno di un aiuto
elisa , il 10 dicembre 2009 alle 09:58 scrive:

ho una rivista da caricare come sfogliabile su una piattaforma che da dei limiti di dimensioni e formato…
il file SWF non deve pesare più di 1MB…
riesco a farlo solo inserendo una bassa qualità di immagine… ovviamente risulta poi visivamente brutta…
non so come fare per creare un file così piccolo che la piattaforma mi da la possibilità di caricare
ma che abbia anche una risoluzione decente….
GRAZIE!!!!
bruno , il 31 dicembre 2009 alle 21:04 scrive:

Caro Salvatore, ho letto attentamente perché l’argomento mi interessa. Ho l’impressione di non aver capito un gran che. Sono scorso in informatica ed un pò attempato. Ora rileggo per vedere se riesco a creare un libro sfogliabile di circa seicento pagine, quasi 200 MB per via di alcune foto. Poi ti faccio sapere se ci riesco. Comunque credo veramente valiti i tuoi consigli in cui mi sono imbattuto casualmente, cercando proprio di risolvere il mio problema.
InDesign e il Web | MoebiusMania , il 7 febbraio 2010 alle 19:42 scrive:

[...] persone che cercano tutorial in italiano su come usare InDesign nel web, basti vedere il precedente tutorial su come creare un Swf sfogliabile che è stato segnalato in moltiplici siti, il che mi ha convinto a dedicare un post su questo [...]
Pietro , il 15 febbraio 2010 alle 17:50 scrive:

Grazie. Pensavo di conoscere Indd come le mie tasche, invece…
moter , il 1 marzo 2010 alle 21:49 scrive:

volevo sapere se è possibile caricare video sul libro sfogliabile….su indesign dubito….quindi si potrebbe importarlo in flash e metterceli?!
andrea , il 11 marzo 2010 alle 07:20 scrive:

Grazie mille lo provo subito, stavo cercando proprio una soluzione veloce e tecnicamente apprezzabile!
ugoforli , il 12 marzo 2010 alle 14:47 scrive:

Sono riuscito a fare lo sfogliabile si indesign…
però appena sposto il file.HTML in un altro notebook o PC il browser mi apre una pagina grigia dove nn visualizzo lo sfogliabile…. potrebbe essere un problema di Flash Player ???
Grazie mille ciao a tutti !!
Salvo , il 14 marzo 2010 alle 10:54 scrive:

ciao ugo, oltre al file .html hai spostato insieme a lui anche il file .swf?
elpupi86 , il 24 marzo 2010 alle 10:11 scrive:

ciao a tutti! volevo saper se era possibile inserire un menù con zoom e altro per gestire la pagina e se è possibile inserire video visualizzabili dopo l’esportazione in .swf. grazie!
simona , il 11 aprile 2010 alle 19:44 scrive:

se inserisco il file swf(di indesign)sfogliabile
nel mio file flash non mi mantiene la transizione! è normale???
Salvo , il 12 aprile 2010 alle 12:40 scrive:

ciao, mmm cosi la domanda è un pò generica… l’unica cosa che mi viene da chiederti subito è: il tuo file Flash dove poi inserisci lo sfogliabile di Indesign è in ActionScript 2 o 3?
toni , il 17 giugno 2010 alle 15:17 scrive:

Complimenti ma ci sono dei problemini.
In Swf con sfoglia a tutte le pagine tolgo l’opzione all’ultima e inserisco l’azione torna alla prima pagina o a poagina 1 ma non funziona.
Pdf: quando esporto si vedono anche parte degli oggetti che sono fuorti pagina.
Ancora grazie.
beps , il 19 giugno 2010 alle 15:35 scrive:

Complimenti e grazie per il tutorialanche da parte mia.
Ho fatto una prova anch’io e vorrei inserire la rivista sfogliabile in un sito. Purtroppo non riesco a capire come mai non mi funziona online pur avendo caricato nel server sia l’html che l’swf
Salvo , il 20 giugno 2010 alle 12:33 scrive:

toni: l’opzione del libro sfogliabile purtroppo è molto limitata alle 4 opzioni disponibili e non può essere smanettata, in più è l’unica delle transizioni di pagina di InDesign a non poter essere esportata in PDF. Sono proprio limitazioni del software non posso farci niente

beps: prova a passarmi l’url della pagina che ci do un’occhiata veloce e ti dico
beps , il 20 giugno 2010 alle 17:37 scrive:

Grazie toni ho risolto, era un problema nel nome del file html,, conteneva un accento e a quanto pare l’html non lo supporta.
Grazie ancora
cristina , il 21 giugno 2010 alle 13:49 scrive:

questo tutorial è utilissimo, ma volevo fare una domanda è possibile esportare questo libro sfogliabile con la copertina e poi le pagine affiancate e di nuovo alla fine solo l’ultima di copertina? Come se fosse una vera e propria riproduzione di una rivista???
Grazie

Articoli e Tutorial sul web e dintorni – a cura di Salvatore Laisa