Grafiikan muuttaminen painikkeiksi Flash Catalyst -sovelluksessa

• Saattaa 20, 2024

Nyt kun olemme tuoneet PhotoshopLayout.psd-portfolioprojektitiedostomme Adoben^R salama^R katalyytti^TM ja olemme tutkineet Catalyst-työtilaa, olemme valmiita työskentelemään portfolion navigoinnissa.

Tällä hetkellä projektiimme on vain yksi sivu tai osavaltio. Meidän on luotava vielä kaksi sivua, jotta voimme näyttää erilaisen logon jokaisella sivulla.

1. Napsauta Sivut / tilat -paneelissa Kopioi tilat -painiketta kahdesti. Tämä antaa meille sivut 2 ja 3. Mutta he ovat kaikki samanlaisia. Pidämme huolta siitä.

2. Napsauta Sivu 1 -kuvaketta ja siirry Tasot-paneeliin. Avaa Logos-kansio. Haluamme vain logon 1 näkyvän tällä sivulla. Sammuta logon 2 ja 3 näkyvyys.

3. Napsauta Sivu 2 -kuvaketta ja poista logon 1 ja 3 näkyvyys käytöstä. Kytke logon 2 näkyvyys päälle.

4. Napsauta Sivu 3 -kuvaketta ja poista logon 1 ja 2 näkyvyys käytöstä. Ota logon 3 näkyvyys käyttöön.

Seuraavaksi luomme painikkeet portfolioomme. Meillä on pikkukuva jokaisesta logosta. Nämä ovat painikkeet.

5. Palaa sivulle 1 napsauttamalla Sivut / tilat -paneelin kuvaketta. Avaa Tasot-paneelissa Pikkukuvat-kansio. Napsauta Artboard-sivulla logon 1 pikkukuvaa. Kun teet tämän, HUD tulee näkyviin ja Ominaisuudet-paneeli muuttuu.

Toimitaan ensin HUD: ssä. Tässä kerromme Catalystille, että haluamme tehdä tästä bittikarttakuvasta painikkeen.

6. Napsauta Muunna taidetta -kohdassa Muunna taidetta komponentiksi ja valitse painike komponenttiluettelosta. HUD muuttuu antamaan meille uudet painikkeet painikkeille. Laajenna mukautettujen vuorovaikutusluettelo ja napsauta sitten Plus-kuvaketta. Valitse luettelosta Napsauta napsauttamalla. Saat uuden avattavan valikon, jonka nimi on Do Action. Valitse tästä valikosta Toista siirtyminen valtioon. Valitse avattavasta Valitse tila -valikosta Sivu1, koska haluamme, että tämä painike vie katsojan sivulle1.

7. Napsauta logon 2 pikkukuvaa ja toista edellinen vaihe. Aseta Valitse tila -asetukseksi sivu2.

8. Napsauta logon 3 pikkukuvaa ja toista edellinen vaihe. Aseta Valitse tila -asetukseksi sivu 3.

Testataan painikkeemme. Napsauta valikkorivillä Tiedosto - Suorita projekti. Se avautuu selaimesi. Kun napsautat kutakin painiketta, oikean logon tulisi olla näkyvissä.

Seuraavassa opetusohjelmassa himmentämme näkyvän logon painiketta ja lisäämme siirtymisen sivujen välillä.

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

Video-Ohjeita: Building Dynamic Web Apps with Laravel by Eric Ouyang (Saattaa 2024).