Tutorial: riviste sfogliabili in Flash con InDesign CS4

Scritto da Salvo il 21 luglio 2009 con 42 commenti

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.

Scarica i sorgenti Guarda una demo

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!

Stampa o genera un PDF con Print Friendly

Articoli correlati:

InDesign e il Web ATTENZIONE: Sto preparando un aggiornamento per questo articolo, date le non poche novità introdotte da CS5 per InDesign e il web Quando venne presentata la Creative Suite 4 e specialmente [...]...
CS5 in azione: InDesign Se con Illustrator dicevo che non ci sono state particolari grosse novità nella versione CS5, su InDesign al contrario c’è tantissimo da dire! Partendo proprio dal fatto che l’intero programma [...]...
10 anni di InDesign Visto i miei pochi ma molto popolari post (e relative discussioni) su InDesign, come non segnalare il suo decennale? Con solo 10 anni di attività e 9 anni di presenza [...]...

Riguardo Salvo...

Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.

Se ti e' sembrato utile perche' non mi offri un caffe'?

Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!

Salvo scrive:

21 agosto 2009 alle 14:48

Devo dedurre che questo tutorial piace… 210 visite in un mese!