MoebiusMania

[avviso] Aggiunta del16/04/2013: questo articolo ha quasi 4 anni. In questi anni molte cose sono cambiate nel mondo del web specialmente per l'ambito Flash, nonostante i contenuti siano ancora validi penso sia importante avvisare voi lettori che attualmente la piattaforma Adobe Flash sta attraversando un'evidente fase di declino. Oltre al fatto che il file prodotto da InDesign NON funziona su alcuna piattaforma mobile, dato che Flash Player è stato ufficialmente discontinuato anche su Android, vi avviso che è presente un altro tutorial sul come ottenere un effetto simile con jQuery, e sto valutando di pubblicarne un'altro sempre sui libri sfogliabili ma in HTML5. [/avviso] 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.

[btn src="http://www.moebiusmania.net/tutorial/2_id_sfogliabili/sfogliabili.indd"]Scarica i sorgenti[/btn] [btn src="http://www.moebiusmania.net/tutorial/2_id_sfogliabili/sfogliabili.html"]Guarda una demo[/btn]

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

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.

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.

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: 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! [avviso]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.[/avviso]

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! [avviso]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![/avviso]