Come realizzare Demo interattivi in PDF con Fireworks
Questa volta ho deciso di spiegarvi come generare demo interattive, direttamente con Fireworks in formato PDF. Questo tipo di tutorial può essere molto utile per l’approvazione del layout da parte dei clienti o semplicemente per rendere più facile la comunicazione tra voi ed il team di sviluppo dedito al progetto.
FASE 1
L’intero processo è abbastanza semplice.
Il file dovrà essere organizzato per pagine ed i link associati ad ognuna di esse, per creare pagine, andare sul selettore “pagine” nella colonna a destra, andare su “pagina 1” e cliccare con il tasto destroà nuova pagina… createne tutte quelle che vi servono, in questo esempio ne bastano 6 una per ogni voce inserita.
FASE 2
Cominciamo a creare gli Hotspot, che sono i marcatori per le varie aree.
Inizieremo con la Home, che sarà anche la pagina iniziale del PDF.
FASE 3
Selezionare lo strumento Punto attivo rettangolare (J) dalla barra degli strumenti.
FASE 4
Aggiungere le forme (Hotspot) per tutte le aree a cui si desidera creare il collegamento, così come da immagine..
Assicurati di dare la giusta dimensione alle forme.
FASE 5
Dopo aver creato le forme, imposteremo le proprietà per ciascuno di essi.
FASE 6
Ora ci dedicheremo a mettere i link verso le pagine a cui sono riservate le forme.
Come si vede nell’immagine sopra, selezioniamo la forma inserita su Notizie e andiamo a scegliere la pagina a cui farlo linkare.
Nel campo successivo, quello con titolo “Alt:” sotto l’opzione “Link”, possiamo anche aggiungere un testo alternativo per l’immagine anche se non necessario.
E seguendo questo metodo creiamo i collegamenti per tutte le altre forme inserite.
FASE 7
Ora andremo alla pagina successiva, quella dei Prodotti e li copiamo ed incolliamo le stesse forme dal menu.
Ora creeremo una forma per l’immagine del prodotto e la linkiamo ad una pagina che chiameremo “dettaglio_prodotto.htm”.
Alla pagina Dettaglio prodotto abbiamo il popup contenente l’immagine ingrandita del prodotto stesso e il pulsante di chiusura, in cui bisognerà inserire una nuova forma per farlo tornare alla pagina precedente quella dei prodotti.
E questa è la logica di funzionamento delle forme, collegare pagine e creare relazioni tra esse.
FASE 8
Ora non ci resta che esportare il file, per farlo andare su: File –> Esporta e salvarlo nella cartella di destinazione come da immagine.
Be spero che anche questo tutorial possa farvi avvicinare alla grandezza di questo fantastico programma nativo per il web e dalle molteplici funzionalità.
