Menghidupkan Grafik ke dalam Butang dalam Flash Catalyst

• April 27, 2024

Kini kami telah mengimport fail projek portfolio PhotoshopLayout.psd kami ke dalam Adobe^R Kilat^R Pemangkin^TM dan telah menjelajah ruang kerja Catalyst, kami bersedia untuk bekerja pada navigasi untuk portfolio kami.

Sekarang, kami hanya mempunyai satu halaman, atau menyatakan, kepada projek kami. Kita perlu membuat dua lagi halaman supaya kita boleh memaparkan logo yang berbeza pada setiap halaman.

1. Dalam panel Laman / Negeri, kami akan mengklik butang Duplikat Negeri dua kali. Ini akan memberi kita Page2 dan Page3. Tetapi, mereka semua sama. Mari kita jaga itu.

2. Klik pada ikon Page1 dan pergi ke panel Layers. Buka folder Logos. Kami hanya mahu logo 1 dapat dilihat pada halaman ini. Matikan penglihatan untuk logo 2 dan 3.

3. Klik pada ikon Page2 dan matikan penglihatan untuk logo 1 dan 3. Hidupkan penglihatan untuk logo 2.

4. Klik pada ikon Page3 dan matikan penglihatan untuk logo 1 dan 2. Hidupkan penglihatan untuk logo 3.

Seterusnya, kami akan membuat butang untuk portfolio kami. Kami mempunyai lakaran kecil untuk setiap logo. Ini akan menjadi butang.

5. Kembali ke halaman1 dengan mengklik ikon di panel Pages / States. Dalam panel Layers, buka folder Thumbnails. Pada Artboard, klik pada thumbnail untuk logo 1. Apabila anda melakukan ini, anda akan melihat HUD terbuka dan panel Properties akan berubah.

Mari kerja di HUD terlebih dahulu. Di sinilah kita akan memberitahu Catalyst bahawa kita mahu membuat imej bitmap ini menjadi butang.

6. Di bawah Menukar Karangan, klik pada Menukar Karya Seni ke Komponen dan pilih Butang dari senarai komponen. HUD akan berubah untuk memberi kami kawalan baru untuk butang kami. Kembangkan senarai Interaksi Tersuai dan kemudian klik pada ikon Plus. Pilih On Klik dari senarai. Anda akan mendapat menu drop-down lain yang dipanggil Do Action. Dari menu ini, pilih Main Peralihan ke Negeri. Dari menu lungsur Pilih Negeri, pilih Page1 kerana kami mahu butang ini membawa penonton ke Page1.

7. Klik pada thumbnail untuk logo 2 dan ulangi langkah sebelumnya. Tetapkan Pilih Negeri ke Page2.

8. Klik pada thumbnail untuk logo 3 dan ulangi langkah sebelumnya. Tetapkan Pilih Negeri untuk Page3.

Mari kita menguji butang kita. Dari menu menubar, klik Fail - Run Project. Ia akan dibuka dalam pelayar web anda. Seperti yang anda klik pada setiap butang, logo yang betul sepatutnya kelihatan.

Dalam tutorial seterusnya, kami akan meremehkan butang untuk logo yang kelihatan dan menambah peralihan antara halaman.

Hak Cipta 2018 Adobe Systems Incorporated. Hak cipta terpelihara. Pukulan skrin produk Adobe (s) dicetak semula dengan kebenaran daripada Adobe Systems Incorporated. Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Elemen Premiere, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper adalah sama ada [a] tanda dagangan berdaftar atau tanda dagangan Adobe Systems Incorporated di Amerika Syarikat dan / atau negara lain.