Trasformare la grafica in pulsanti in Flash Catalyst

• Potrebbe 6, 2024

Ora che abbiamo importato il nostro file di progetto del portfolio PhotoshopLayout.psd in Adobe^R Veloce^R Catalizzatore^TM e abbiamo esplorato l'area di lavoro di Catalyst, siamo pronti a lavorare sulla navigazione per il nostro portafoglio.

Al momento, abbiamo solo una pagina, o stato, per il nostro progetto. Dobbiamo creare altre due pagine in modo da poter visualizzare un logo diverso su ogni pagina.

1. Nel pannello Pagine / Stati, faremo clic due volte sul pulsante Stati duplicati. Questo ci darà Pagina2 e Pagina3. Ma sono tutti uguali. Prendiamoci cura di quello.

2. Fai clic sull'icona Pagina1 e vai al pannello Livelli. Apri la cartella Logos. Vogliamo che il logo 1 sia visibile in questa pagina. Disattiva la visibilità per il logo 2 e 3.

3. Fare clic sull'icona Pagina2 e disattivare la visibilità per il logo 1 e 3. Attivare la visibilità per il logo 2.

4. Fare clic sull'icona Pagina3 e disattivare la visibilità per il logo 1 e 2. Attivare la visibilità per il logo 3.

Successivamente, creeremo i pulsanti per il nostro portafoglio. Abbiamo una miniatura per ogni logo. Questi saranno i pulsanti.

5. Torna a Pagina1 facendo clic sull'icona nel pannello Pagine / Stati. Nel pannello Livelli, apri la cartella Miniature. Nella tavola da disegno, fai clic sulla miniatura per il logo 1. Quando esegui questa operazione, vedrai l'HUD aperto e il pannello Proprietà cambierà.

Lavoriamo prima nell'HUD. Qui è dove diremo a Catalyst che vogliamo trasformare questa immagine bitmap in un pulsante.

6. In Converti grafica, fai clic su Converti grafica in Componente e seleziona Pulsante dall'elenco dei componenti. L'HUD cambierà per darci nuovi controlli per il nostro pulsante. Espandere l'elenco Interazioni personalizzate e quindi fare clic sull'icona Più. Scegli On Click dall'elenco. Verrà visualizzato un altro menu a discesa chiamato Do Action. Da questo menu, scegli Riproduci transizione allo stato. Dal menu a discesa Scegli stato, scegli Pagina1 perché vogliamo che questo pulsante porti il ​​visualizzatore a Pagina1.

7. Fare clic sulla miniatura per il logo 2 e ripetere il passaggio precedente. Impostare Scegli stato su Pagina2.

8. Fare clic sulla miniatura per il logo 3 e ripetere il passaggio precedente. Impostare Scegli stato su Pagina3.

Mettiamo alla prova i nostri pulsanti. Dalla barra dei menu, fare clic su File - Esegui progetto. Si aprirà nel tuo browser web. Quando si fa clic su ciascun pulsante, dovrebbe essere visibile il logo corretto.

Nel prossimo tutorial, oscureremo il pulsante per il logo visibile e aggiungeremo una transizione tra le pagine.

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: Fireworks CS5 - Creare e modificare i pulsanti con i simboli (Potrebbe 2024).