Share
Le compresse sono la cosa più importante di oggi. Certo, l'iPad non può fare Flash, ma è solo il primo di un'onda. Adobe InDesign CS5 può fare un sacco di materiale interattivo che è perfetto per lo spazio dello schermo di un tablet, quindi passarlo a Flash per ottimizzare e migliorare. In questo tutorial, vedremo come lavorare con il lato InDesign delle cose.
Quando Adobe ha fatto il suo iPhone Compiler for Flash a Max l'anno scorso, devo ammettere che sono stato, brevemente, spazzato via. Poi mi sono rivolto al tipo accanto a me tra il pubblico e ho detto: "Sarà fantastico finché Apple non troverà un modo per spegnerlo". Il che spiega perché Apple "April Shock" non mi ha davvero sorpreso. Come hanno fatto è stata una sorpresa, ma chiuderla non è stata una sorpresa.
Un paio di settimane più tardi Richard Galvan, il Product Manager di Flash, era sul palco di FlashintheCan e mostrava alcune cose "sfrenate" che Flash CS5 può fare. Nel corso della sua presentazione ha dimostrato come InDesign CS5 può ora fare un sacco di materiale interattivo che può essere facilmente spostato su Flash CS5 come .fla o semplicemente girato da InDesign come swf completamente interattivo. Devo ammettere che ho avuto la stessa reazione di molti di voi: "Datemi una pausa, non c'è alcun modo in cui uno sviluppatore / designer di Flash degno del titolo creerà un grande swf di InDesign".
Dopo la presentazione di Richard l'ho messo alle strette e gli ho chiesto perché stava facendo demo di qualcosa che equivaleva a dare una pistola a un pazzo. La sua risposta di una sola parola mi ha scosso.
compresse.
Egli ha detto.
Se c'è una regola fondamentale che cerco di battere nelle teste dei miei studenti è che quando si tratta di affrontare problemi "inizia con l'ovvio e torna all'oscuro". La risposta di Richard fu talmente ovvia che mi sentii un po 'imbarazzato.
Anche se l'iPad è un dispositivo estremamente interessante, tendiamo a dimenticare che i tablet sono una tecnologia emergente. Google, HP e altri usciranno con una normale cornucopia di queste cose e saranno tutti abilitati per Flash. Aggiungete a questo la versione di Flash Player 10.1 che inizierà a comparire su tutti i dispositivi mobili ad eccezione delle offerte Apple e non è molto difficile presumere che sia solo una questione di tempo prima che i nostri clienti si arrampichino sul carrozzone mobile.
Solo perché Apple è stata la prima a uscire dal blocco con il suo "giocattolo per bambini alla moda", non significa che sia il punto di riferimento. Se queste cose decollano potrebbe essere Apple che ha prodotto un prodotto di "nicchia".
Il che mi porta a questo tutorial. Le tavolette hanno molto spazio sullo schermo, che è molto vicino alle dimensioni di un normale foglio di carta estratto dalla stampante laser. È logico, (e Wired lo sta già dimostrando), considerare le pubblicazioni cartacee come nient'altro che pagine di "contenuto" e utilizzare Flash Player per trasformare un mezzo piuttosto passivo in un'esperienza multimediale ricca.
Nei prossimi mesi, ci saranno una serie di nuovi cellulari e tablet Android che arriveranno sul mercato quest'estate. La line up include ADAM di Notion Ink, ma ce ne sono anche altri, tra cui Marvell Moby, WePad e Dell Mini 5, per citarne alcuni.
Nel corso di questa serie in due parti scoprirete perché Flash CS5 ha avuto le sue molecole capovolte e riorganizzate con il nuovo formato XFL; come InDesign CS5 è improvvisamente cambiato da un'app di layout statico a uno con una pletora di funzionalità interattive e come il nuovo TextLayout Framework in Flash è molto più di un'aggiunta piuttosto curiosa alla line up. Naturalmente, inizieremo a assemblare le risorse in InDesign. Alla fine di questo pezzo spero che molti di voi scopriranno quanto siano "cool" le funzionalità interattive di InDesign e, soprattutto, perché sono lì in primo luogo. Iniziamo:
OK. Sono pigro. Lascio che il mio iPhone gestisca quello. Brendan Dawes da MagneticNorth nel Regno Unito mi ha trasformato in un'app per iPhone piuttosto interessante - addLib - che prende un'immagine che la alimenta e dà dei calci a variazioni piuttosto interessanti su come può essere usata. Visto che volevo dimostrare alcune delle caratteristiche di InDesign CS5, ho pensato che un viaggio che ho fatto in un piccolo villaggio in Cina - Huo Guo - sarebbe andato bene per il conto e la foto del vecchio che scruta sul muro è una di quelle i miei preferiti da quel viaggio. Ho alimentato l'immagine in addLib e mi è davvero piaciuto l'ultimo trattamento.
Basandomi su questo progetto, sapevo che lo strumento per il lavoro era Illustrator CS5 e che l'imaging era stato fatto meglio in ... si preparava per questo ... Fireworks CS5.
Quando l'immagine si è aperta, la prima cosa da fare era ottenere una dimensione più gestibile. L'immagine originale della mia Nikon D200 era 2896 per 1944 pixel che non funzionava in Illustrator CS5 o Fireworks CS5. Ho selezionato l'immagine nell'area di disegno di Fireworks, ho selezionato Modifica> Area di disegno> Dimensioni immagine e ho cambiato le dimensioni dei pixel in quelle mostrate nella figura. Con l'immagine ridimensionata, ho fatto clic sul pulsante Adatta tela nel pannello Proprietà per garantire che non ci fosse un tele extra nell'immagine finale.
L'immagine è piuttosto scura e potrebbe utilizzare un po 'di correzione del colore. Ho selezionato l'immagine sulla tela e, nel pannello Proprietà, ho selezionato Filtri> Regola colori> Livelli. L'istogramma mi ha detto che dovevo ritagliare parte del bianco sul lato destro del grafico. Lo spostamento del punto bianco, come mostrato nella figura, ha reso più luminosa l'immagine. L'immagine è stata salvata come CoverColor.jpg.
Anche creare una versione in scala di grigi era un gioco da ragazzi. Con l'immagine selezionata sulla tela ho selezionato Filtri> Regola colori> Tonalità / Saturazione e impostare il valore di saturazione su -100 che ha rimosso il colore dall'immagine. Questa immagine è stata quindi salvata come CoverGrey.jpg.
Pensavo che sollevare una galleria fotografica in InDesign fosse una cosa ovvia e avrebbe dimostrato questa funzione dell'applicazione. Ovviamente 12 immagini, le stesse dimensioni dell'immagine di copertina non volavano e il loro ridimensionamento, a mano, non è divertente.
Una delle mie funzionalità preferite di Fireworks CS5 è Batch Processing: File> Processo batch ... È un flusso di lavoro molto semplice. Identifica le foto, determina la quantità di ridimensionamento e lascia che Fireworks inserisca le versioni ridimensionate in una cartella separata. Ciò ha richiesto meno di 30 secondi.
Il design addLib era notevolmente facile da replicare in Illustrator CS5. Usando una combinazione di forme semplici, maschere e tipo sono riuscito a riunirlo in meno di 30 minuti. La decisione principale riguardava il formato di output. Sono andato con il formato AI perché sia Flash che InDesign mi consentono di tornare su Illustrator per apportare modifiche. Se questo fosse destinato a un'applicazione web con stop in Catalyst o Flex, sarei andato con FXG su Fireworks, Flash e Illustrator..
Con le risorse assemblate era giunto il momento di lavorare in InDesign.
Anche se mi servirebbe un minuto o due per approfondire questo argomento prima di entrare nel progetto perché, francamente, come molti di voi, l'ho visto come uno strumento di layout di stampa che si trovava sul banco degli strumenti piuttosto che uno nella mia cassetta degli attrezzi interattiva. Eppure, essendo un po 'un drogato di tipo, nulla mi ha frustrato più di essere stato in grado di utilizzare tecniche di tipografia fine sul lato di stampa della recinzione, mentre abbiamo dovuto "fingere" sul lato interattivo. Per non parlare del fatto che il tentativo di ottenere un layout a più colonne o un sistema a griglia per funzionare in Flash era qualcosa che i miei colleghi grafici sul lato stampato della strada non mancavano mai di menzionarmi.
InDesign CS5 si ferma in questo modo agevole. Tra le funzionalità di InDesign CS5 che ho appena scavato sono:
Non commettere errori su di esso gente. Queste cose non sono dei bizzarri, delle caratteristiche gratuite di eye-eye aggiunte all'app per raccogliere i cori di "Cool" dal Fan Boyz alle demo e alle conferenze. Queste sono, come stai per scoprire, funzionalità di livello industriale che si integrano perfettamente in un SWF o in Flash. In effetti, per te i codici, non devi nemmeno toccare Flash o Catalyst. I documenti InDesign possono essere pubblicati come buoni vecchi XML.
Detto questo, questo è un flusso di lavoro emergente che, specialmente per il personale di Flash, richiederà un lavoro extra da parte vostra. Considero questa cosa una "cosa buona" perché, mentre stai per vedere, estrarre un documento Flash da InDesign non ne fa un artista Flash. Ottieni le ossa nude e se le tue abilità Flash sono minime sei essenzialmente morto nell'acqua.
Infine, questo non è un tutorial di InDesign. Lo scopo è quello di mostrare come le caratteristiche interattive di InDesign vengono aggiunte a una pagina e come un documento viene emesso nei formati SWF e Fla.
Andiamo avanti ...
Aprire InDesign CS5 e selezionare Finestra> Area di lavoro> Interattivo per aprire il pannello Interattività.
Qui, in termini generali, è ciò che fa ogni elemento nel pannello:
Ora applicheremo un effetto di animazione alla didascalia. Seleziona l'oggetto che si animerà, apri il pannello Animazione e seleziona l'animazione dal popup Predefinito. Quando lo fai succedono alcune cose:
Il percorso del movimento, in verde, viene mostrato nella pagina e un'anteprima dell'animazione viene applicata alla farfalla nella finestra di anteprima del pannello. Questi Motion Path possono essere modificati con lo strumento Penna e un aspetto veramente accurato di questo è che qualsiasi percorso personalizzato che puoi creare in Flash può essere usato qui e viceversa. Usa l'area del nome per dare un nome all'animazione e selezionare quando l'evento - Carica pagina, Clic su pagina, Clic su (Self), On Roll Over (Self) - si verificheranno dall'Event (s) pop-down.
Puoi anche scegliere la durata e la frequenza con cui si verifica e anche se l'animazione è in loop. Il pop-down Speed è dove puoi applicare Easing.
Le Proprietà, se sei un designer Flash, sembrano abbastanza familiari. Il menu a tendina Animate consente di determinare il funzionamento dell'animazione, da o all'aspetto attuale o alla posizione corrente. E l'area Animate in consente di applicare la rotazione e il ridimensionamento allo stato finale dell'oggetto in movimento.
Testare le animazioni o l'interattività nelle versioni precedenti di InDesign è stato doloroso. Dovresti creare l'animazione, compilare il file SWF e lasciare in InDesign l'anteprima del tuo lavoro in Flash Player. Il pannello Anteprima mette tutti questi passaggi in un punto.
Al termine della tua animazione, fai semplicemente clic sul pulsante del pannello di anteprima e verrà visualizzato il pannello. All'inizio sarà vuoto. Questo perché InDesign sta creando un swf che verrà riprodotto nel pannello. Quando viene visualizzata la pagina, fai clic sul pulsante Riproduci nell'angolo in basso a sinistra e la didascalia scorre all'interno.
Se il pannello sembra troppo piccolo, basta trascinare un angolo per ingrandirlo.
Le 12 immagini che abbiamo preparato in precedenza utilizzando l'elaborazione Batch in Fireworks CS5 ora possono essere inserite nel documento e utilizzate in una presentazione. Questa è una procedura in due fasi: inserire le immagini e allinearle sulla pagina e quindi convertirle in un oggetto Multi State. Ecco come:
Selezionare Modifica> Posiziona, individuare la cartella contenente le immagini ridimensionate e, tenendo premuto il tasto Maiusc, selezionarle tutte e fare clic su OK. Vedrai una piccola "pistola" contenente una miniatura di un'immagine. Fare clic e l'immagine nella miniatura viene rilasciata sulla pagina e la "pistola" mostra l'immagine successiva nella pila. Spostare approssimativamente tutte le immagini in cui verranno visualizzate le diapositive e, con tutte le immagini selezionate, aprire il pannello Allinea premendo il tasto F7. Allinea le immagini in base ai bordi superiore e sinistro.
Dopo aver creato lo "stack", apri il pannello Object States e fai clic sul pulsante "Converti selezione su oggetto multi-stato" - la pagina con l'angolo rivolto verso l'alto nella parte inferiore del pannello - e tutte le immagini verranno visualizzate nel pannello . Assegna un nome all'oggetto e, se lo desideri, riordina le immagini trascinandole, nel pannello, in "strati" diversi nello stack.
Una pila è inutile se non la metti al lavoro. In questo caso, i pulsanti Avanti e Indietro creati in Fireworks CS5 vengono importati per l'attività in corso. InDesign, come molte delle app CS5, contiene una libreria di pulsanti "pre-rolled" - Finestra> Pulsanti di esempio - ma nessuno si adatta al design. Sono stati portati usando File> Place e spostati nelle loro posizioni finali sulla pagina.
Per creare un pulsante apri il pannello Pulsanti e, con l'oggetto selezionato, fai clic sul pulsante "Converti oggetto in pulsante": è proprio accanto al cestino sul pannello Pulsanti. Quando ciò accade il pannello si accende e puoi assegnare al pulsante alcune proprietà.
La prima cosa da fare è dare un nome al pulsante. Quindi, allegare un evento al pulsante. Ci sono sei eventi, due dei quali strettamente per progetti PDF, tra cui scegliere. "On Release" è una scommessa sicura. Il prossimo passo è assegnare una azione a un evento. Fai clic sul segno + nell'area azioni e apparirà un elenco a comparsa. Questa è una presentazione, quindi è logico assegnare un'azione "Vai allo stato successivo". La cosa importante da notare qui è che le Azioni sono raggruppate in base all'uso finale. In questo caso andremo a SWF e Flash, quindi la scelta funzionerà.
Quando è selezionata l'azione, il pannello Pulsanti cambierà per chiedere quale oggetto deve essere controllato dal pulsante. In questo caso, sarà lo stack Village. Puoi anche fare clic sul pulsante di opzione "Ferma all'ultimo stato" per garantire che l'utente si fermi effettivamente all'ultima immagine nello stack.
Ripeti questa procedura per il pulsante Indietro e prova la presentazione nel pannello Anteprima.
Aggiungere una traccia audio a una pagina è semplice. Puoi utilizzare il menu File> Inserisci o fare clic una volta sul pannello Media e utilizzare il pulsante Inserisci un file audio o video, quello nell'angolo in basso a destra del pannello, che aprirà la finestra di dialogo Posiziona media. Tieni presente che l'unico formato audio che puoi utilizzare è l'mp3.
Una volta importato il file, sul palco appare un piccolo contenitore audio. Per molti aspetti questo contenitore è simile a come Flash gestisce l'audio sul palco. Il contenitore può essere posizionato ovunque perché è più di un segnaposto che altro.
Il pannello Audio ti consente di verificare l'audio facendo clic sul pulsante Riproduci e le opzioni sono in qualche modo auto-esplicative. La soluzione migliore, se si sta percorrendo il percorso interattivo, è selezionare le prime due opzioni. Se non lo fai il tuo file audio continuerà a giocare anche quando lasci la pagina.
Semplici principi di progettazione UX affermano che se stai riproducendo un file audio, dovresti dare all'utente la possibilità di ucciderlo. In questo caso, un pulsante Pausa e un pulsante Riproduci sono stati creati in Fireworks CS5 e convertiti in pulsanti in InDesign CS5. Non appena si collega il pulsante a una fonte, viene riconosciuto un file audio e vengono visualizzate le opzioni di controllo audio mostrate nella figura. Una caratteristica davvero accurata del pannello Pulsanti è l'icona nell'angolo in basso a sinistra. Fare clic e il pannello Anteprima si apre per consentire di determinare se il pulsante esegue ciò che si desidera che faccia.
Video - FLV, F4V, MP4 - possono essere aggiunti a InDesign con la stessa facilità di un file audio e le proprietà video sono impostate nel pannello multimediale. Tuttavia ci sono alcuni aspetti di ciò che devi sapere.
Sebbene ti vengano fornite due opzioni di riproduzione, se vuoi assegnare all'utente un controller, lascialo deselezionato. L'opzione Poster ti consente di scegliere una cornice dal video o anche un'altra immagine da visualizzare nel documento. In questo esempio, ho usato lo scrubber nel pannello per identificare la cornice che apparirà nel layout. Puoi anche scegliere un controller: le skin di SkinOver di Flash sono le tue uniche scelte e se il controller verrà visualizzato o meno quando il cursore si posiziona sul video nella pagina. Puoi anche aggiungere cue point - InDesign li chiama Punti di navigazione - al video o possono essere aggiunti utilizzando Adobe Media Encoder CS5.
L'altra cosa che devi sapere su questa funzione video, specialmente se usi il video in Flash, è che il video deve essere cliccato sul palco perché possa iniziare a suonare o rivelare la pelle. Potrebbe non essere una cattiva idea, se stai per trasmettere solo un swf, aggiungere una piccola didascalia o un'icona che dice all'utente di fare clic sull'immagine per avviare la riproduzione del video.
Infine, usa il pannello Anteprima per testare il video.
In questo articolo ti ho mostrato come utilizzare tutte le funzionalità del pannello interattivo di InDesign CS5. Ti ho mostrato come creare pulsanti, aggiungere audio e video e come trasformare una pila di immagini importate in una presentazione. Ti hanno anche mostrato come usare i pulsanti per controllare l'audio e come aggiungere una skin a un video.
Ho anche incluso quante risorse sono state create in Fireworks CS5 e Illustrator CS5 e preparate per il posizionamento nel progetto InDesign CS5.
Nella prossima puntata di questa serie ti illustrerò i passaggi necessari per generare un documento InDesign interattivo per la riproduzione in un browser o per ulteriori "ritocchi" in Flash. Grazie per aver letto!
Accentsconagua