At omdanne grafik til knapper i Flash Catalyst

• Kan 1, 2024

Nu hvor vi har importeret vores PhotoshopLayout.psd porteføljeprojektfil til Adobe^R Blitz^R Katalysator^TM og har udforsket Catalyst-arbejdsområdet, er vi klar til at arbejde på navigationen til vores portefølje.

Lige nu har vi kun en side eller stat til vores projekt. Vi er nødt til at oprette to sider mere, så vi kan vise et andet logo på hver side.

1. I panelet Sider / stater klikker vi to gange på knappen Duplicate States. Dette giver os Side2 og Side3. Men de er alle ens. Lad os tage os af det.

2. Klik på ikonet Side1 og gå til panelet Lag. Åbn mappen Logos. Vi ønsker kun, at logo 1 skal være synligt på denne side. Sluk synligheden for logo 2 og 3.

3. Klik på Side2-ikonet, og sluk synligheden for logo 1 og 3. Tænd for synligheden for logo 2.

4. Klik på Side3-ikonet, og sluk synligheden for logo 1 og 2. Tænd for synligheden for logo 3.

Dernæst opretter vi knapperne til vores portefølje. Vi har et miniaturebillede til hvert logo. Disse vil være knapperne.

5. Gå tilbage til Side1 ved at klikke på ikonet i panelet Sider / Stater. Åbn mappen Miniaturer i panelet Lag. Klik på miniaturebilledet for logo 1. Når du gør dette, vil du se HUD'en åben og panelet Egenskaber ændres.

Lad os arbejde i HUD først. Det er her, vi vil fortælle Catalyst, at vi ønsker at gøre dette bitmap-billede til en knap.

6. Klik på Konverter illustrationer til komponent under Konverter kunst, og vælg Knap på listen over komponenter. HUD'en ændres for at give os nye kontroller til vores knap. Udvid listen over tilpassede interaktioner, og klik derefter på Plus-ikonet. Vælg On Click fra listen. Du får en anden rullemenu kaldet Gør handling. Vælg Play Overgang til tilstand i denne menu. Fra rullemenuen Vælg tilstand skal du vælge Side1, fordi vi ønsker, at denne knap skal føre fremviseren til Side1.

7. Klik på miniature for logo 2, og gentag det foregående trin. Indstil Vælg tilstand til Side2.

8. Klik på miniature for logo 3, og gentag det foregående trin. Indstil Vælg tilstand til Side3.

Lad os teste vores knapper. Klik på Filer - Kør projekt i menulinjen. Det åbnes i din webbrowser. Når du klikker på hver knap, skal det korrekte logo være synligt.

I den næste tutorial vil vi dæmpe knappen for det synlige logo og tilføje en overgang mellem sider.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheder forbeholdes. Adobe-produktskærmbilleder (r) genudtrykt med tilladelse fra 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, fyrværkeri, Bidrage, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registreret varemærke [er] eller et varemærke [s] fra Adobe Systems Incorporated i USA og / eller andre lande.

Video Instruktioner: 3000+ Common English Words with Pronunciation (Kan 2024).