Share
Questo è un tutorial Basix durante il quale costruiremo il nostro primo progetto in Flash Catalyst da un file PSD predefinito. Tratteremo le basi di Catalyst: convertire l'arte in componenti, creare alcuni effetti e rendere vivi questi componenti - nessun codice richiesto!
In questo tutorial imparerai come gestire le illustrazioni in Flash Catalyst e renderlo vivo.
Nella seconda parte del tut, dopo aver acquisito familiarità con il programma, faremo alcune cose più complicate e aggiungeremo più interattività.
Nota: puoi salvare il tuo progetto Flash Catalyst in qualsiasi momento e poi continuare quando è comodo per te. Per fare questo vai su File> Salva come ..., dai un nome al progetto e salvalo dove vuoi.
Ecco il risultato finale che raggiungeremo. Imparando le basi del lavoro con uno dei nuovi prodotti di Adobe, convertiremo le nostre opere d'arte in componenti, creeremo alcuni effetti luminosi, specificheremo icone e faremo transizioni alle pagine. Creeremo anche un'icona Adobe come un pulsante che conduce a un URL specificato: http://active.tutsplus.com
Questo può sembrare un esempio estremamente semplice. Ciò che è importante è il modo in cui otteniamo l'interattività. L'intero processo è Punta e clicca, non c'è una sola linea di codice coinvolta.
Apri Adobe Flash Catalyst, quindi nella finestra iniziale seleziona "Crea nuovo progetto da file di disegno"> "Da Adobe Photoshop File PSD ...".
Selezionare Galaxy.PSD (puoi ottenere questo dal download di Source nella parte superiore del tutorial). Assicurati che l'opzione "Importa livelli non visibili" sia selezionata e premi OK.
Prima di tutto dovremmo assegnare i cosiddetti "Stati" per il nostro progetto. Gli stati (detti anche "Pagine") rappresentano i cambiamenti che si verificano dopo che gli utenti eseguono determinate azioni (ad esempio, lui o lei preme un pulsante).
Nel nostro progetto l'obiettivo è il seguente: dopo che l'utente fa clic su una delle icone (Flash, Photoshop o Dreamweaver), viene visualizzato un rettangolo con alcune informazioni sul prodotto. Dato che abbiamo tre icone dovremmo aggiungere tre ulteriori Stati (pagine). Per fare ciò, premi "Duplica stato" tre volte nel pannello Pagine / Stati. Questo crea tre copie della nostra Pagina principale, nella quale apporteremo alcune modifiche.
Ora è saggio impostare i nomi degli stati. Fai doppio clic sul nome di ogni stato e modificalo in qualcosa di significativo. Ho scelto i seguenti nomi che iniziano con il primo stato: Main, Photoshop, Flash, Dreamweaver. Ti consiglio di dare a questi stati gli stessi nomi: questo ti aiuterà a seguire il tutorial ed evitare confusione.
Nota: È molto importante mantenere strutturato il progetto e assegnare nomi significativi ai componenti. Fare così ti aiuterà a trovare ciò di cui hai bisogno e decidere dove collocare le risorse future.
Quindi abbiamo assegnato gli stati per il nostro progetto. Ora creiamo alcuni pulsanti. Per fare ciò, scegli il gruppo di livelli Flash. Il pannello HUD dovrebbe apparire (in caso contrario, premere F7). Tra parentesi vedrai "2 elementi", mostrando che sono stati selezionati due elementi. Ora fai clic Converti elementi grafici in componenti> Scegli componente e dal menu scegli Button e fai clic su di esso. Questo trasformerà il nostro gruppo di livelli in un pulsante. Fai lo stesso con i gruppi Photoshop e Dreamweaver.
Dopo aver fatto ciò nel pannello di livello e nel pannello HUD dovrebbe apparire come questo (nota "Pulsante" nel pannello HUD e nel pannello di livello i nostri gruppi vengono convertiti nei livelli con il pulsante Nome):
La prossima cosa che dovremmo fare è assegnare gli stati ai nostri pulsanti. Se hai familiarità con Flash Professional, sai che i pulsanti esistono con quattro stati: lo stesso è vero qui. Nel nostro progetto siamo interessati agli Stati Over e Down.
Permettetemi di chiarire i significati di tutti gli stati per coloro che non hanno familiarità con loro.
Iniziamo con lo stato Sopra del pulsante Photoshop: nel pannello HUD fare clic su "Over state". Attira la tua attenzione sul pannello Pagine / Stati dove per ora abbiamo solo quattro stati (Su, Sopra, Giù, Disabilitato). Puoi anche vedere che solo il nostro pulsante è completamente visibile e l'altra grafica è sbiadita sullo sfondo.
Dai anche un'occhiata al nostro pannello dei livelli in cui puoi vedere il gruppo Photoshop:
Espandi il gruppo Photoshop. Seleziona il livello PhotoshopIcon dal pannello dei livelli, quindi vai a Pannello Proprietà> Filtri> Aggiungi filtro> Bagliore. Scegli il colore che ti piace (ho usato il colore dall'icona - # 179AFF), imposta Sfocatura su 16 e Intensità su 1.
Nota: Ricorda che tutto ciò è fatto nello stato Sopra nel pannello Pagine / Stati.
Scegli il livello Rettangolo nel pannello Livello. Guarda la scena e vedrai che l'oggetto è selezionato, ma è dietro a PhotoshopIcon. Estendi semplicemente il rettangolo portando il mouse sul lato destro del rettangolo, posiziona la freccia al centro tra l'angolo superiore e quello inferiore. Estendilo in modo da avere spazio per scrivere l'etichetta "Photoshop".
Quindi abbiamo esteso il rettangolo. Ora prendi lo strumento Testo (scorciatoia T) e in cima al rettangolo scrivi la parola "Photoshop". Nel pannello Proprietà dello strumento di testo ho scelto le seguenti proprietà (puoi scegliere lo stesso):
Per ora dovresti avere qualcosa che assomigli a questo (ho deselezionato i livelli):
OK, abbiamo impostato Over State per il pulsante Photoshop: puoi testare il tuo progetto con la scorciatoia Ctrl + Invio o andare a File> Esegui progetto. Se hai seguito il tutorial e fatto tutto correttamente, l'icona di Photoshop dovrebbe illuminarsi e il testo con il rettangolo dovrebbe apparire mentre passi il mouse sopra il pulsante.
Tornando al nostro progetto, puoi andare alla scena principale semplicemente cliccando due volte sullo spazio vuoto o premendo Esc sulla tastiera. Puoi anche fare clic sui link breadcrumb nell'angolo in alto a sinistra della scena in cui vedi Galaxy / PhotoshopButton.
Ripeti i passaggi da 7 a 9 con i pulsanti Flash e Dreamweaver. Nota che negli effetti Glow è meglio usare i colori delle icone.
Questo passaggio è facoltativo. Vorrei aggiungere un po 'di bagliore quando un utente fa clic su uno dei pulsanti. Per fare ciò, selezioniamo uno dei pulsanti nel pannello dei livelli, quindi scegliamo lo stato nel pannello HUD. Quindi, nel pannello Livello, vai al gruppo Dreamweaver (o al gruppo che preferiresti affrontare prima), seleziona il livello DreamweaverIcon. Una volta lì, vai al pannello Proprietà, seleziona Filtri> Aggiungi filtro> Bagliore e seleziona le preferenze che ti piacciono (ho usato il grigio scuro- # 333333). Ripeti questo passaggio per gli altri gruppi.
Durante questo passaggio convertiremo il livello AdobeIcon in un pulsante e assegneremo i cursori a mano per le nostre icone. Prima di tutto, seleziona il livello AdobeIcon. Vai al pannello HUD e fai clic su Scegli componente> Pulsante. Dopo aver finito seleziona il nuovo pulsante, vai su Aspetto e controlla il campo "Cursore della mano". Fallo per tutti gli altri pulsanti (Photoshop, Flash e Dreamweaver).
Se metti alla prova il tuo progetto, noterai che il cursore a forma di mano appare quando passiamo il mouse sulle icone. Abbiamo illustrato ai nostri utenti che queste icone sono pulsanti. Il prossimo passo è assegnare questa opzione ad altre pagine. Può essere fatto molto facilmente - per farlo basta selezionare una delle icone, andare al pannello HUD e una volta lì scegliere l'opzione "Make Same in All Other States". In questo modo, il cursore a mano apparirà anche sulle altre pagine.
Nota: Noterai anche che i livelli con le icone hanno lo stesso nome "Pulsante". Questo va bene per un progetto semplice come questo, ma per altri più complessi consiglio vivamente di rinominare i livelli e dare loro nomi significativi.
Siamo un passo avanti verso la fine. Ora affrontiamo le interazioni. Nelle interazioni Flash Catalyst ci permettono di passare da una pagina all'altra (Stati), andare a un URL specifico, riprodurre, mettere in pausa o interrompere il video.
Iniziamo con la nostra prima interazione. Scegli il pulsante AdobeIcon e fai doppio clic sul pannello Interazioni se è nascosto. Con il livello selezionato fai clic sul pulsante Aggiungi interazione:
Qui puoi vedere l'elenco a discesa. Poiché siamo interessati all'interazione dell'URL, scegli le seguenti opzioni:
Utilizzando questi parametri, comunichiamo a Catalyst che quando un utente fa clic sul pulsante, verrà inviato all'URL che abbiamo assegnato e che il sito verrà aperto in una nuova finestra del browser. Abbiamo anche definito che questa interazione è possibile solo quando siamo nello Stato principale (Pagina).
Ora creiamo le interazioni tra le pagine. Prima di tutto dobbiamo spostare il livello AdobeIcon in modo che si trovi sotto il livello del gruppo Rettangoli. Questo ci permetterà di vedere Rettangoli sopra gli altri oggetti. Per farlo basta trascinare i livelli per modificare il loro ordine. Il seguente ordine di livello verrà applicato a tutti gli altri stati:
La prossima cosa di cui abbiamo bisogno è cambiare l'aspetto delle pagine specificate modificando il contenuto. Scegli la pagina Photoshop. Nel pannello Livelli seleziona il livello di gruppo Rettangoli e visualizzalo facendo clic su dove indicato qui:
L'icona dell'occhio verrà rivelata e nella pagina vedrai il rettangolo di Adobe Dreamweaver con il testo e l'icona al suo interno. Poiché è Photoshop Page, dovremmo solo rivelare il contenuto pertinente ad esso. Espandi il livello del gruppo Rettangolo e disattiva le icone dell'occhio dei gruppi Flash e Dreamweaver: questo ci permetterà di vedere solo il contenuto pertinente di Photoshop:
Ripeti queste azioni per le pagine Flash e Dreamweaver in modo che i rettangoli visibili siano pertinenti al software.
Se hai fatto tutto correttamente, i pollici nel pannello Pagine / Stati dovrebbero apparire come questo:
Ora aggiungiamo l'interazione tra le nostre pagine principale e Photoshop. Nel pannello Pagine / Stati seleziona la nostra Pagina principale. Quindi vai su Pannello livelli e scegli il pulsante PhotoshopIcon. Come abbiamo fatto in precedenza, vai al pannello Interazioni e scegli le seguenti opzioni:
Ripeti questo passaggio per Dreamweaver e Flash Pages in modo che facendo clic su un'icona veniamo portati alla pagina corrispondente.
Il nostro prossimo passo è quello di importare un'altra immagine nella libreria in modo da poter riprodurre la transizione alla pagina principale. Vai a Pagina Photoshop. Seleziona il livello di gruppo Rettangolo nel pannello di livello. Scegliere File> Importa e seleziona l'icona exit.gif (di nuovo, questo è disponibile nel download Source nella parte superiore del tutorial):
L'immagine dovrebbe apparire al centro del rettangolo:
E il pannello di livello dovrebbe apparire così:
Ora con l'aiuto del mouse posiziona semplicemente l'icona Esci nella parte in basso a destra del rettangolo bianco:
Flash Catalyst è abbastanza intelligente per posizionare l'immagine nel posto giusto in altre pagine. Dobbiamo solo svelare l'immagine facendo clic sull'icona dell'occhio:
Ora dobbiamo convertire l'icona Exit in un pulsante e impostare un effetto.
Seleziona l'icona Esci, vai al pannello HUD e convertilo in un pulsante come abbiamo fatto in precedenza.
Seleziona lo stato su, e nel pannello Proprietà scegli Comune> Opacità. Imposta l'opacità a 50. Questo ci permetterà di rivelare la piena opacità solo quando passiamo il mouse sul pulsante o lo premiamo sopra:
Aggiungiamo una semplice interazione al nostro pulsante di uscita. Nella Pagina di Photoshop seleziona il livello con l'icona, fai clic su Aggiungi interazione come abbiamo fatto in precedenza e imposta le opzioni mostrate nell'immagine sottostante. L'unica differenza è che dovrebbe giocare la transizione allo stato principale mentre si trova in qualsiasi stato:
Hai completato la prima parte di questo tutorial in due parti sulle basi di Flash Catalyst. Premere Ctrl + Invio o File> Esegui progetto per verificare se tutto funziona correttamente. Per ora ci dovrebbero essere effetti bagliore, e l'icona di Adobe dovrebbe portare all'URL che hai specificato. Le altre icone (Photoshop, Flash, Dreamweaver) dovrebbero riprodurre le transizioni alle loro pagine e l'icona Esci dovrebbe tornare alla pagina principale.
Nella parte successiva del tutorial impareremo come aggiungere alcune animazioni al nostro progetto, aggiungere suoni e impostare video.
Accentsconagua