Share
Durante questo tutorial Basix impareremo come aggiungere le funzionalità finali al nostro progetto Flash Catalyst esistente. Vedremo un'interazione fluida tra pagine, azioni di hover aggiuntive, suoni e video. Come con il precedente tutorial non è richiesto alcun codice!
Nota: puoi salvare il tuo progetto Flash Catalyst in qualsiasi momento e poi continuare quando è comodo per te. Per farlo vai su File> Salva come ... dai un nome al progetto e salvalo in una directory appropriata.
Guarda il risultato finale che miriamo a raggiungere. Riguardando le basi di Catalyst impareremo come creare transizioni di pagina uniformi, applicare animazioni 3D, aggiungere suoni ai nostri pulsanti e anche aggiungere video.
Apri Adobe Flash Catalyst. Alla finestra iniziale selezionare Apri progetto> File scaricato. Seleziona Galaxy2.fxp, che puoi scaricare dal download sorgente nella parte superiore della pagina.
Apri il pannello Linee temporali facendo doppio clic sul suo nome. Ci vengono presentate tutte le possibili interazioni tra le pagine:
Se vuoi vedere le interazioni che riguardano una certa pagina, scrivi il suo nome nella finestra di ricerca:
Puoi farlo anche con il menu a discesa:
Ora copriamo alcune cose riguardanti la timeline stessa. Qui abbiamo 5 punti importanti:
Ok, ora hai familiarità con la timeline in modo che possiamo aggiungere animazioni alle nostre pagine. Iniziamo con la transizione tra la pagina principale e la pagina di Photoshop. Nel pannello Linee temporali con il livello Photoshop selezionato (se selezionato, vedrai il riempimento blu), fai clic sulla freccia vicino al pulsante Transizione uniforme:
Qui vediamo il menu che ci consente di impostare determinati parametri. "Durata" è la durata dell'animazione; Ho deciso di impostarlo su 1 secondo e per Timing ho usato l'opzione "Smart Smoothing". Non abbiamo bisogno di "Simultaneo" poiché applichiamo solo l'animazione a un livello. Ovviamente non è necessario sovrascrivere nulla, quindi lasciare vuoto il campo del segno di spunta.
Abbiamo applicato una transizione uniforme a una delle pagine. Diamo un'occhiata all'immagine e vediamo cosa è cambiato:
Prima di tutto puoi vedere in anteprima l'effetto che abbiamo impostato utilizzando il pulsante Riproduci. Qui puoi vedere che ora abbiamo una linea blu con le parole "Fade In" all'interno. Ciò significa che abbiamo applicato l'animazione al nostro livello di Photoshop. Fare clic su quella linea continua blu ed esaminare il pannello Proprietà:
Vediamo che dice Fade in cima; questo indica il nome dell'effetto applicato. Abbiamo alcune opzioni aggiuntive: Opacity è impostato su Auto, ma se vuoi regolarlo manualmente deseleziona il segno di spunta e imposta i tuoi parametri in "Da" e "A". Puoi anche vedere che possiamo modificare la Durata e persino impostare il tempo di ritardo per l'effetto. Easing è un'altra opzione importante, specialmente se si ha familiarità con Flash Professional. Lascio l'impostazione predefinita, ma sentitevi liberi di sperimentarlo.
La prossima cosa che dovremmo fare è applicare l'animazione al pulsante Esci. Seleziona il livello "Pulsante" nel pannello Timelines (ricorda che la transizione Principale> Photoshop deve essere selezionata nella finestra in basso a sinistra del pannello Timelines) e di nuovo fai clic sulla freccia vicino al pulsante Smooth Transition. Nella finestra di dialogo impostare la durata a 0,5 secondi:
Separiamo il tempo dell'animazione. Seleziona il livello "Pulsante Esci". Abbiamo due metodi per farlo.
Vai al pannello Proprietà e imposta il Ritardo per il livello del pulsante Esci su 1 secondo:
In alternativa, puoi selezionare la linea verde sul livello del pulsante Esci in modo che diventi blu fisso, quindi fare clic e trascinarlo sul segmento sulla timeline adatto a noi (nel nostro caso questo è 1 secondo):
C'è un altro modo per regolare la lunghezza dell'animazione. È molto importante e molto facile da usare. Per modificare la durata dell'animazione semplicemente con il livello selezionato, posiziona il mouse sulla piccola freccia alla fine del segmento di animazione, tieni premuto il pulsante sinistro del mouse e trascina nella direzione desiderata (destra - estendi, sinistra - abbrevia):
Passiamo a un'altra pagina; la pagina Flash. Nel pannello "Timelines" seleziona Main> Flash transition. Ancora una volta, imposta lo stesso effetto Fade In per entrambi i livelli come mostrato nei passaggi 5-7:
Aggiungiamo un po 'più di interazione. Nel pannello "Linee temporali" con il livello "Flash" selezionato, fai clic sul centro-basso sul pulsante "+ Aggiungi azione". Dal menu a discesa selezionare Ruota:
Ora abbiamo selezionato tre elementi dal nostro livello di Flash e puoi vedere che tutti hanno l'effetto Ruota applicato:
Ok, scegli uno degli effetti Ruota (l'effetto Ruota su cui hai fatto clic diventa blu fisso) sul pannello Timelines e vai alla finestra Proprietà. Una volta impostata la prima opzione su un Angolo specifico e l'Angolo stesso impostato su 360 °, questo completerà la rotazione. La durata di 0,5 sec dovrebbe essere OK, ma sei libero di sperimentare - il mio obiettivo è solo quello di mostrarti cosa puoi fare :)
Dopo averlo applicato a uno degli elementi, imposta le stesse impostazioni sui due rimanenti, quindi tutti e tre avranno una rotazione di 360 ° e la stessa durata. Successivamente è possibile visualizzare l'anteprima dell'animazione. Ora abbiamo effetti di rotazione e dissolvenza per questa pagina Flash.
Andiamo avanti e aggiungere effetti alla pagina di Dreamweaver. Nel pannello Timeline, seleziona Principale> Transizione Dreamweaver. Ripeti ancora i passaggi da 5 a 7 alla pagina, quindi ci sarà Fade In Effect:
Con il livello Dreamweaver selezionato, fai clic sul pulsante "+ Aggiungi azione" e seleziona "Ruota 3D" dal menu a discesa.
Ora dovresti guardare qualcosa di simile a questo (l'effetto Ruota 3D è applicato a tutti e tre gli elementi sulla timeline):
Personalizziamoli. Seleziona una delle animazioni Ruota 3D e vai al pannello Proprietà. Lì abbiamo un paio di opzioni. Oltre a Durata, Delay e Easing abbiamo tre tipi di rotazione. Quindi da sinistra a destra: prima - ruota l'oggetto attorno all'asse X, secondo - ruota l'oggetto attorno all'asse Y e il terzo - è una rotazione semplice che avevamo nella pagina Flash. E per ogni tipo di rotazione possiamo impostare l'angolo di partenza e il suo valore finale.
Per DreamweaverRect uso la rotazione da 0 a 360 ° attorno all'asse Y:
Per DreamweaverIcon e Text, utilizzo la rotazione da 0 a 360 ° attorno all'asse X con 0.5 Delay:
Quindi, dovresti avere la seguente immagine e puoi testare la tua animazione con il pulsante Riproduci:
La prossima cosa che dovremmo fare è impostare il video. Aggiungiamo video alla pagina Flash in quanto il video stesso riguarda Flash Catalyst e Flash Player. Per fare ciò, scegli la nostra pagina Flash. Quindi vai su File> Importa> Video / File audio. Scegli il file Adobe.flv scaricato dal codice sorgente zip collegato nella parte superiore del tutorial.
La prossima cosa di cui abbiamo bisogno è assegnare il file al gruppo Flash. Basta selezionare il lettore video dal pannello dei livelli, tenere premuto il pulsante sinistro del mouse e trascinare il lettore video sul livello del gruppo Flash finché non si espande e inserirlo in esso. Fatto ciò dovresti vedere quanto segue:
Ora nascondiamo l'icona e il testo di Flash in modo che ci sia solo il video. Per fare ciò, fai clic sulle icone degli occhi su questi livelli in modo che scompaiano (puoi anche eliminare questi livelli, dipende da te - seleziona semplicemente questi livelli e fai clic sull'icona Cestino nell'angolo in basso a destra del pannello Livelli).
La prossima cosa da fare è ridimensionare il nostro video in modo che si adatti al rettangolo. Seleziona il livello "Video Player" e il mouse sull'angolo in alto a sinistra del video in modo da poter vedere due frecce rivolte in direzioni diverse (il mouse dovrebbe trovarsi sul quadrato bianco). Tieni premuto il tasto sinistro del mouse e inizia a trascinare. Noterai anche che ci sono altri quadrati bianchi e il quadrato blu al centro. Allo stesso modo trascinali in modo da posizionare il video centralmente (se vuoi trascinare il video stesso, non i suoi angoli, punta il mouse al centro del video e trascina).
Andiamo al pannello Proprietà ed esploriamo ciò che è in offerta.
Prima di tutto vediamo la posizione del video sul palco, la sua larghezza e altezza. Se vuoi regolarli come ho fatto imposta le seguenti opzioni: X - 179, Y - 89, Larghezza (W) - 281, Altezza (H) - 154. Quindi noterai che abbiamo già i controlli video - il Pannello proprietà ci offre due controlli video predefiniti (Wireframe e Standard) ma aggiungeremo i nostri pulsanti per controllare il video, quindi impostarlo su Nessuno.
Per la modalità di scala ho anche optato per impostare "Nessuno". Oltre a Nessuno possiamo impostare la Modalità Scala su Tratto, Letterbox o Zoom: qui puoi sperimentare e impostare il meglio che ti si adatta. Se vuoi vedere in anteprima come apparirà controlla l'opzione "Auto Play" (ricorda che quando hai finito di sperimentare, deseleziona l'opzione Auto Play).
Oltre ad Auto Play abbiamo l'opzione "Loop" e "Silenzioso". Non abbiamo bisogno di Loop Video, quindi lasciatelo deselezionato e vogliamo anche sentire il suono, così l'opzione Muto deve essere anche deselezionata.
Ora andiamo ai sottomenu Component and Appearance. Assicurati che l'opzione "Accetta evento del mouse" sia selezionata (se non è selezionata, non saremo in grado di impostare i nostri pulsanti sul video). L'opzione "Tooltip" ci consente di scrivere la descrizione del video e quando l'utente lo sostituisce, vedrà la descrizione.
"Volume", penso, è chiaro., /
Nell'opzione Aspetto puoi impostare un certo "Metodo di fusione" e puoi anche selezionare l'opzione "Cursore della mano" in modo che quando l'utente passa sopra il video la freccia del mouse si trasformi nel cursore della mano.
Ora è il momento di impostare i pulsanti di controllo sul nostro video. Con il gruppo di livelli Flash selezionato vai su File> Importa> Immagine e importa Play.png. Fai lo stesso per Stop.png. Convertili in pulsanti e posizionali sotto il video (è sempre una buona pratica rinominarli). Puoi anche applicare alcuni effetti a loro ma non è necessario - Ho impostato Opacity nello stato Su per loro a 75 (se non sai come fare assicurati di vedere il mio primo tutorial su Flash Catalyst dove discutere di queste cose).
... e la situazione nel pannello dei livelli dovrebbe essere così:
Ora per la parte più facile finora - vai al pannello Interazioni, seleziona il pulsante Riproduci e nel pannello Interazioni scegli le seguenti opzioni: Primo - On Click, secondo - Riproduci video, terzo - seleziona il nostro video "Adobe1.flv", quarto - solo quando nella pagina Flash:
Fai lo stesso per il pulsante Stop, ma invece di "Riproduci video" impostalo su "Arresta video".
Ora che abbiamo impostato i controlli sul nostro video, provalo, premi Ctrl + Invio o vai su File> Esegui progetto.
L'ultima cosa che dobbiamo fare è applicare il suono ai nostri pulsanti. Prima di tutto importiamo il suono. Vai su File> Importa> File video / audio e vai alla cartella radice di Flash Catalyst installata. Qui, seleziona "Effetti sonori / Flash Beep.mp3". Ovviamente possiamo usare i nostri suoni ma volevo mostrarti che Flash Catalyst ha un pacchetto di suoni preinstallato. Scegli quello che fa per te. Una volta importato, puoi visualizzarlo in anteprima - vai al pannello Libreria e lì in basso vai alla sottocartella Media e seleziona "Flash Beep.mp3" - noterai che nella finestra in alto è apparso il pulsante Riproduci. Se fai clic su di esso sentirai il suono del pulsante:
Nota: Qui troverai anche tutti i nostri file grafici, media e componenti.
Completiamo il nostro progetto e aggiungiamo suoni ai pulsanti durante i loro stati sovraordinati. Per fare ciò seleziona uno dei pulsanti nel pannello "Livelli", vai al suo stato precedente. Nel pannello "Timelines" con l'icona sullo stage selezionata, fai clic sul pulsante "+ Aggiungi azione" e seleziona Effetti sonori:
Dalla finestra di dialogo selezionare "Flash Beep" e fare clic su OK:
La situazione sulla tempistica dovrebbe essere la seguente:
Ripeti questo passaggio alle icone di Flash e Photoshop e il gioco è fatto. Esegui il progetto!
Ora sai non solo come convertire le tue opere d'arte in componenti, ma come aggiungere fluide interazioni tra le pagine, applicare diverse varianti di animazione, utilizzare video e suoni nei tuoi progetti e controllarli. Flash Catalyst è una fantastica applicazione e ora puoi facilmente senza scrivere una sola riga di codice per dare vita al tuo artwork.
Spero ti sia piaciuto seguire questo progetto e imparare come usare Flash Catalyst. Esercitati e otterrai grandi risultati! Grazie anche per aver letto il mio tutorial :)
Accentsconagua