Interaktív alkatrészek hozzáadása a Flash Catalyst alkalmazáshoz

• Lehet 17, 2024

Ebben az oktatóanyagban befejezzük a portfólió diavetítését az Adobe alkalmazásban^R Vaku^R Katalizátor^R. Ha követtétek, készítettük a gombjainkat és készen állunk a speciális effektusok hozzáadására. A portfólióban való navigálás során azt akarjuk, hogy a látható logó gombja elsötétüljön, a többi gomb pedig látható legyen. Ezért meg kell mondanunk a Catalyst-nak, hogy melyik gomb melyik oldalhoz van, és mikor kell tompítani a gombokat. Ezután hozzáadunk egy Fade átmeneti hatást az oldalak között.

Először elsötétítjük az aktuális logó gombját. Amikor az 1. embléma látható az 1. oldal állapotában, azt szeretnénk, hogy a megfelelő gomb tompítsa. Ezt mindhárom államra vagy portfóliónk oldalára meg kell tennünk.

1. Kattintson az Oldalak / államok panelen található 1. oldal ikonra, hogy ezen az oldalon dolgozzon. Kattintson a miniatűr képre, amely most az 1-es logó gombja. A Tulajdonságok panelen állítsa az Opacitást 40-re. Mivel a szőnyeg közepén a gomb alatt fekete, ekkor a gomb homályosnak tűnik.

2. Kattintson az Oldal2 ikonra az Oldalak / államok panelen. Ismételje meg az előző lépést a 2. oldal számára, csak a 2. logóval megegyező gomb elsötétítésével. Kattintson az Oldalak / államok panelen található 3. oldal ikonjára, és ismételje meg ezt a lépést.

Kattintson a Fájl - Projekt futtatása elemre az új effektus teszteléséhez. A gombokra kattintva a megfelelő logónak láthatónak kell lennie, és a gombnak tompítani kell.

Az utolsó dolog, amelyet hozzáadunk navigációnkhoz, az oldalak közötti Fade Átmenet az Idővonal használatával. Az 1. oldal ikonra kattintva térjen vissza az 1. oldalra. Vessen egy pillantást az Idővonal rétegeire, és látni fogja, hogy van egy rétegünk minden lehetséges átmenethez a három oldal között.

1. oldal> 2. oldal
1. oldal> 3. oldal
2. oldal> 1. oldal
3. oldal> 1. oldal

3. Kattintson az 1. oldal> 2. oldal rétegre. Látni fogja, hogy a Catalyst átváltási lehetőségeket adott nekünk az 1. és 2. logóra (elhalványítva), valamint az 1. és 2. gombra. Mivel távolodunk az 1. logótól, van Fade Out opciónk. De a 2. logóra lépünk. Van egy Fade In opció ehhez a logóhoz.

A Fade Out-effektust csak az 1. logóhoz és a Fade In Effect-t a 2. logóhoz fogjuk hozzáadni. Nincs szükség a gombjainkra alkalmazott Fade-effektusra. Érdemes azonban ezt a hatást egy másik projektben is felhasználni.

Kattintson a Sima átmenet gombra az Idővonal alján. Látni fogja, hogy a Fade Out / In vezérlők minden rétegen fél másodpercre meghosszabbodtak. Még az 1. oldal> 2. oldal rétegben ki kell kapcsolnunk a két gomb hatását. Tolja a csúszka vezérlőjét balra minden gombhoz.

Kattintson az 1. oldal> a 3. oldal rétegre. Ismételje meg az előző lépést a két gombra és logóra. Ismételje meg ismét az 2. oldal> 1. oldal réteg és az 3. oldal> 1. oldal réteg esetében.

Ez gondoskodik az összes átalakulásról az Page1 állam számára. De portfóliónkban három állam van. Ezt meg kell tennünk a másik két állam esetében. Kattintson az Oldal2 ikonra az Oldalak / államok panelen.

Vessen egy pillantást az Idővonal rétegeire. Észre fogja venni, hogy a beállításokat, amelyeket csak az 1. oldal állapotra állítottunk, az 1. oldal> 2. oldal és 2. oldal> 3. oldal közötti átmenetekre kerülnek a 2. oldal állapotába. Csak hozzá kell adnunk az átmenetet a 2. oldal> a 3. oldal és a 3. oldal> 2. oldal között.

4. Ismételje meg az előző lépéseket, hogy az átmenetet a Page2 állapot logóira alkalmazza. Ezt az idővonal minden rétegére meg kell tennie.

5. Kattintson az Oldal3 ikonra az Oldalak / államok panelen. Észre fogja venni, hogy az átmeneti beállítások átkerültek a másik két állapotból. Ha több oldalunk lenne, akkor az állapothoz a rétegeken kell dolgoznunk. De mivel ez a három állam közül az utolsó, mindannyian készen állunk.

Tesztelje újra a projektet. Ha minden működik, készen állunk arra, hogy a fájlt LogoPortfolio.fxp fájlként mentsük el.

6. Meg kell mondanunk a Catalyst-nak, hogy előállítsuk azokat a fájlokat, amelyek megjelenítik a Flash portfóliónkat. Kattintson a Fájl - közzététel SWF-fájlra elemre. Keresse meg a megfelelő helyet a merevlemezen, és mentse el a projektet. Látni fogja, hogy a Catalyst két mappát kínál. A webes telepítés mappában vannak a portfólió webkiszolgálón futtatásához szükséges fájlok. A run-local programban az asztalon vannak a portfólió futtatásához szükséges fájlok.

Szerzői jog 2018 Adobe Systems Incorporated. Minden jog fenntartva. Az Adobe termék képernyőképe (i) újra kinyomtatva az Adobe Systems Incorporated engedélyével. 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, Flash Catalyst és Flash Paper vagy bejegyzett védjegy (ek) vagy az Adobe Systems Incorporated védjegye (i) az Egyesült Államokban és / vagy más országokban.

Video Utasításokat: Building Dynamic Web Apps with Laravel by Eric Ouyang (Lehet 2024).