Aggiunta di componenti interattivi in ​​Flash Catalyst

• Aprile 27, 2024

In questo tutorial, finiremo la presentazione del portfolio in Adobe^R Veloce^R Catalizzatore^R. Se hai seguito, abbiamo creato i nostri pulsanti e siamo pronti ad aggiungere effetti speciali. Mentre navighiamo nel portafoglio, vogliamo che il pulsante per il logo visibile sia oscurato e gli altri pulsanti siano visibili. Pertanto, dobbiamo dire a Catalyst quale pulsante è per quale pagina e quando attenuare i pulsanti. Quindi aggiungeremo un effetto di transizione Dissolvenza tra le pagine.

Per prima cosa oscureremo il pulsante per il logo corrente. Quando il logo 1 è visibile sullo stato Pagina1, vogliamo che il pulsante corrispondente sia oscurato. Dobbiamo farlo per tutti e tre gli stati o le pagine del nostro portafoglio.

1. Fare clic sull'icona Pagina1 nel pannello Pagine / Stati per lavorare su quella pagina. Fai clic sull'immagine di anteprima che è ora il nostro pulsante per il logo 1. Nel pannello Proprietà, imposta l'opacità su 40. Poiché il centro del tappetino sotto il pulsante è nero, questo farà apparire il pulsante in grigio.

2. Fare clic sull'icona Pagina2 nel pannello Pagine / Stati. Ripetere il passaggio precedente per Pagina2 attenuando solo il pulsante corrispondente al logo 2. Fare clic sull'icona Pagina3 nel pannello Pagine / Stati e ripetere questo passaggio.

Fai clic su File - Esegui progetto per testare il nostro nuovo effetto. Quando si fa clic sui pulsanti, il logo corrispondente dovrebbe essere visibile e quel pulsante dovrebbe essere oscurato.

L'ultima cosa che aggiungeremo alla nostra navigazione è una transizione di dissolvenza tra le pagine, usando la linea temporale. Torna a Pagina1 facendo clic sull'icona Pagina1. Dai un'occhiata ai livelli nella linea temporale e vedrai che abbiamo un livello per ogni possibile transizione tra tutte e tre le pagine.

Pagina1> Pagina2
Pagina1> Pagina3
Pagina2> Pagina1
Pagina3> Pagina1

3. Fare clic sul livello Pagina1> Pagina2. Vedrai che Catalyst ci ha dato le opzioni di transizione per i loghi 1 e 2 (oscurati) e i pulsanti 1 e 2. Poiché ci allontaneremo dal logo 1, abbiamo un'opzione Dissolvenza. Passeremo al logo 2. Abbiamo un'opzione Fade In per questo logo.

Aggiungeremo l'effetto Fade Out al logo 1 e l'effetto Fade In al logo 2. Non abbiamo bisogno dell'effetto Fade applicato ai nostri pulsanti. Tuttavia, potresti voler utilizzare questo effetto in un altro progetto.

Fai clic sul pulsante Smooth Transition nella parte inferiore della linea temporale. Vedrai che i controlli Fade Out / In sono stati estesi di mezzo secondo su tutti i layer. Sempre nel livello Pagina1> Pagina2, dobbiamo disattivare l'effetto per i due pulsanti. Spingere il controllo del cursore verso sinistra per ciascun pulsante.

Fai clic sul livello Pagina1> Pagina3. Ripeti il ​​passaggio precedente per i due pulsanti e loghi. Ripetere nuovamente per il livello Pagina2> Pagina1 e il livello Pagina3> Pagina1.

Questo si occupa di tutte le transizioni per lo stato della Pagina1. Ma abbiamo tre stati nel nostro portafoglio. Dobbiamo farlo di nuovo per gli altri due stati. Fai clic sull'icona Pagina2 nel pannello Pagine / Stati.

Dai un'occhiata ai livelli nella linea temporale. Noterai che le impostazioni che abbiamo appena impostato per lo stato Pagina1 vengono riportate allo stato Pagina2 per le transizioni tra Pagina1> Pagina2 e Pagina2> Pagina3. Dobbiamo solo aggiungere la transizione tra Pagina2> Pagina3 e Pagina3> Pagina2.

4. Ripetere i passaggi precedenti per applicare le transizioni ai loghi per lo stato Pagina2. È necessario farlo per ciascun livello nella linea temporale.

5. Fare clic sull'icona Pagina3 nel pannello Pagine / Stati. Noterai che le impostazioni di transizione sono state trasferite dagli altri due stati. Se avessimo più pagine, avremmo bisogno di lavorare sui livelli per questo stato. Ma poiché questo è l'ultimo dei tre stati, siamo tutti pronti.

Prova di nuovo il tuo progetto. Se tutto funziona, siamo pronti per salvare il nostro file come LogoPortfolio.fxp.

6. Dobbiamo dire a Catalyst di generare i file che visualizzeranno il nostro portfolio Flash. Fai clic su File - Pubblica su SWF. Passare alla posizione corretta sul disco rigido e salvare il progetto. Vedrai che Catalyst ti offre due cartelle. Nella cartella deploy-to-web, abbiamo i file necessari per eseguire il portfolio su un server web. Nel run-local, abbiamo i file per l'esecuzione del portfolio sul nostro desktop.

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.

Istruzioni Video: A Show of Scrutiny | Critical Role | Campaign 2, Episode 2 (Aprile 2024).