Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Interface Design

Membangun Sebuah Kategori Galeri Gambar Menggunakkan XML dan AS3

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

XML adalah format data yang cocok untuk galeri gambar dinamis . Hal itu juga sangat mudah untuk diproses di Flash dengan AS3. Dengan bantuan dari XML dan ActionScript, kita akan membuat galeri foto yang dinamis dan dikategorikan menjadi tema yang berbeda.
Kami juga akan belajar bagaimana menggunakan sangat praktis tweening kelas, yang disebut Tweener, untuk memindahkan ikon tema berbeda dan thumbnail. Dalam tutorial ini saya akan berkonsentrasi pada efektif pengolahan data yang Diperoleh dari XML; Semua animasi gambar mewah terserah Anda ;)


Langkah 1: Menyiapkan panggung

Pertama kali aku akan berbagi bagaimana cara mengatur panggung saya. Ini tidak tetap pilihan, jadi jika Anda ingin mengubah hal-hal, yang baik-baik saja. Hanya pastikan Anda mengubah kode dalam tutorial ini untuk menyesuaikan setelan Anda (khususnya mengenai ukuran panggung).

Tahap saya adalah 900 x 600 px; Saya menetapkan warna latar belakang hitam dan frame rate menjadi 25fps. Meskipun film SWF adalah hanya satu jangka panjang, menetapkan FPD penting karena akan mempengaruhi tweening kita akan melakukan.


Seperti Anda dapat melihat kita akan menggunakan dokumen kelas, tetapi sebelum itu, kita perlu membuat lapisan, dan menempatkan benda-benda yang kita akan menggunakan.


Langkah 2: Utama gambar movieklip

Semua konten-bergerak kami akan pada lapisan yang disebut 'BigPic + judul + Arrows' (membuat ini sekarang). Yang pertama adalah movieklip kosong yang disebut Img (nama contoh: img); ini adalah Mc di mana kita akan memuat setiap gambar yang besar. Membuat ini, dan menempatkannya di (x: 450, y:220).


Langkah 3: Membuat navigasi Panah

Cara termudah untuk membuat ini adalah dengan menggunakan besar ' <' karakter. Membuat bidang teks statis baru, pilih apa pun font dan ukuran yang anda inginkan, jenis ' <', dan kemudian menggunakan perintah 'Break apart': pilih karakter dan tekan CTRL + B atau Ubah > Pecah.

Kemudian, mengubah bentuk ini menjadi sebuah movieklip, nama 'Panah' dan mengubah titik bergabung ke pusat sebelah kiri (di mana panah poin).



Langkah 4: Menempatkan panah navigasi

Kita akan membutuhkan dua ini di panggung, jadi tarik satu lagi dari perpustakaan. Flip salah satunya horizontal (Ubah > mengubah > Flip Horizontal). Posisi kiri satu pada (x: 0, y:220), dan memberikan nama contoh dari 'prevArrow'. Orang yang tepat harus pergi di (x: 900, y:220), dan memiliki nama contoh dari 'nextArrow'.


Langkah 5: Teks Field Title

Menciptakan sebuah lapangan teks lebar dinamis 900px (sehingga Anda dapat menggunakan judul selama yang Anda inginkan). Menempatkannya di (x: 0, y:440), dan memberikan nama contoh dari 'txtField'. Saya menggunakan Arial font di 16pt, selaras dengan pusat; Jangan lupa untuk menanamkan!



Langkah 6: Menggambar penutup piring

Ini adalah elemen desain hanya sedikit untuk ikon tema dan thumbnail untuk membuat mereka menghilang di perbatasan panggung. Membuat 30px lebar, 130px tinggi persegi panjang (tanpa stroke - hanya mengisi), dan dengan persegi panjang masih dipilih, pergi ke panel warna dan mengubah gaya isi dari padat ke linier. Mengatur warna kedua ke hitam, namun tetapkan salah satu dari mereka ke alpha 0%.



Langkah 7: Mengkonversi dan menempatkan pelat penutup

Sekarang, mengubah persegi untuk sebuah movieklip (reg. titik: sudut kiri atas, nama: Cover). Melakukan hal yang sama seperti yang Anda lakukan dengan panah: drag dua contoh ke panggung, dan flip salah satu dari mereka. Dalam setiap kasus, sisi alpha 0% harus terdekat ke pusat panggung.

Menempatkan mereka pada sisi panggung: (meninggalkan satu: (x: 0, y:470); kanan satu: (x: 900, y:470)).

Semua benar - kami selesai dengan lapisan ini.


Langkah 8: "Tema + jempol" lapisan

Di bawah lapisan kami yang sudah ada, membuat yang baru bernama 'tema + jempol'. Pada lapisan ini, membuat movieklip kosong untuk ikon tema (nama: 'Tema', reg. titik: sudut kiri atas, nama contoh: 'tema', x: 0, y: 470) dan satu lagi untuk thumbnail (nama: 'smallPics', reg. titik: sudut kiri atas, nama contoh: 'smallPicsMc', x: 0, y: 510).

Kita harus menciptakan beberapa simbol lain yang tidak mulai keluar di panggung, tetapi kami akan membuat ini di ActionScript kemudian.


Langkah 9: Simbol Thumbnail

Membuat movieklip kosong (nama: 'SmallPicButton', reg. titik: pojok kiri). MC ini akan berisi satu thumbnail; kita akan memiliki banyak contoh dari simbol ini, jadi kami akan membuat masing-masing pada saat runtime.

Untuk melakukan itu, kita harus mengekspor simbol ini untuk ActionScript: di panel Perpustakaan, klik kanan pada simbol ini, kemudian pilih Properties. Centang kotak 'Ekspor untuk ActionScript', kemudian set kelas SmallPicButton. Kelas dasar tetap seperti itu.


Setelah Anda klik OK, klik dua kali pada simbol ini di perpustakaan untuk memasuki modus edit, kemudian pergi ke panel tindakan - kita akan menulis beberapa kode sekarang. Kita akan memastikan bahwa movieklip ini berperilaku seperti sebuah tombol yang tepat.


Langkah 10: Tindakan untuk SmallPicButton

Copy dan paste kode ini ke dalam tindakan panel:


Langkah 11: ThemeButton

Simbol ini akan digunakan untuk ikon Anda dapat mengklik untuk memilih kategori bertema yang berbeda - apa kejutan:). Hal ini mirip dengan SmallPicButton, jadi untuk menciptakan itu ulangi langkah 8-10 - saja, mengubah nama dan kelas untuk ThemeButton daripada SmallPicButton. Anda tidak perlu mengubah apa pun dalam kode.


Langkah 12: Apa yang kita miliki sejauh

Jadi, kami membuat dua lapisan: atas adalah BigPic + judul + Arrows, Bagian bawah salah satu tema + jempol.

Pada lapisan BigPic + judul + Arrows kami memiliki img, prevArrow, nextArrow, txtField, dan pelat penutup dua di sisi di bagian bawah.

Pada tema + jempol lapisan kami memiliki dua movieklip kosong: tema, yang akan berisi semua ikon tema, dan smallPicsMc, yang akan berisi semua thumbnail.

Dalam Perpustakaan, kami memiliki SmallPicButton dan simbol-simbol ThemeButton dengan benar mengatur hubungan pilihan.

Saya berharap Anda dengan saya sejauh ini. Sangat penting untuk memiliki simbol-simbol yang bernama dengan benar, karena jika tidak kode mendatang tidak akan bekerja.


Langkah 13: Mengatur struktur Folder

Semua hak - jadi kami selesai dengan bagian Flash. Kami memiliki dua hal yang harus dilakukan sebelum kita mulai pengkodean: meletakkan semua gambar dalam folder dapat digunakan struktur dan membuat file XML kami.

Dalam folder yang sama sebagai file FLA Anda, membuat sebuah folder bernama 'foto'. Dalam folder itu membuat dua lainnya: salah satu dari mereka disebut 'kecil' (untuk mengandung thumbnail) dan lainnya disebut 'besar' (untuk memuat gambar besar). Dalam folder kedua Anda akan memiliki struktur map yang sama: satu folder untuk setiap tema.



Langkah 14: File gambar

Masing-masing thumbnail harus memiliki nama yang sama sebagai gambar besar yang sesuai. Penting bahwa dalam folder 'kecil' Semua gambar harus 80px tinggi agar sesuai UI kami. Ukuran gambar besar ini tidak penting, karena kita akan merubah ukuran mereka sebelum menambahkannya ke panggung, namun perlu diingat bahwa ukuran maksimum gambar kita akan mampu menunjukkan adalah 840px oleh 420px.



Langkah 15: Membuat XML File

Buat sebuah file teks baru dalam program manajer file dan nama itu 'pics.xml'.

Anda dapat mengedit file ini dengan setiap editor teks seperti Notepad, tapi itu jauh lebih mudah untuk mengeditnya dengan Flash.


Langkah 16: Mengedit XML File

Saya hanya akan memberitahu Anda hal-hal yang kita butuhkan untuk XML untuk bekerja dengan baik, jika Anda tertarik untuk belajar lebih banyak tentang XML Anda dapat menemukan banyak tutorial di sini di Activetuts + (seperti yang satu ini oleh Druid Kepple) atau halaman lain di web - dan jangan lupa : Google adalah teman Anda ;)

Dalam file XML ini kami akan menjelaskan struktur folder (dan gambar-gambar di dalamnya), sehingga Flash dapat membaca dan menafsirkan itu.

Jadi, pics adalah elemen root, dan semuanya berjalan antara tag pics. Jika Anda ingin menambahkan tema baru, Anda hanya menyalin dan menyisipkan elemen tema yang sudah ada dan mengubah sifat-sifatnya. Jika Anda ingin menambahkan gambar baru untuk salah satu tema Anda hanya copy dan paste pic tag di dalam hak mereka, dan mengubah sifat-sifatnya. Nama atribut dari tag tema harus sama dengan nama folder, karena itulah di mana kami going untuk memberitahu Flash untuk mencari file. Nama dan nama file bersifat case-sensitive.


Langkah 17: Menciptakan kelas dokumen

Klik File > baru dan pilih ActionScript File. Copy dan paste kode berikut.

Pada dasarnya kode ini tidak melakukan apa pun, tapi itu mengatakan bahwa kelas ini adalah dalam paket global, dan kelas umum yang disebut galeri.


Langkah 18: Constructor

Fungsi pertama kita mulai untuk menulis adalah konstruktor. Itu adalah fungsi dasar seluruh program, dan akan menjadi kode pertama yang berjalan ketika SWF dimulai.

Copy dan paste kode ini antara kurung kurawal yang pergi dengan garis "kelas publik galeri meluas movieklip":


Langkah 19: URLLoader

Hal pertama yang perlu kita lakukan adalah untuk memuat file XML yang kita buat. Kita akan melakukannya dengan bantuan URLLoader kelas, yang dalam paket flash.net.

Untuk menggunakannya, kita perlu untuk impor paket. Sebenarnya, mari kita hanya mengimpor setiap paket yang akan kita butuhkan. Salinan dan berikut kode dan paste di atas garis "kelas publik galeri meluas movieklip":

Ingat, impor akan selalu di awal kode (setelah ' paket {' bagian), Deklarasi variabel non-lokal akan sebelum konstruktor dan semua fungsi akan setelah konstruktor.

Dalam rangka untuk Flash untuk impor paket "caurina.transitions", Anda akan perlu memiliki paket ini dalam folder yang sama sebagai FLA Anda dan kelas dokumen Anda. Jadi, membuka sumber file zip, dan Salin \caurina\ folder ke dalam folder proyek Anda.

Setelah kami telah diimpor paket kita akan membutuhkan, kita dapat menyatakan - dan membuat sebuah instance baru dari - variabel URLLoader kami:

(Menempatkan kode dalam fungsi constructor.)

Sekarang kita dapat memberitahu Flash untuk memuat file XML kami, dan menambahkan acara pendengar untuk urlLoader:

Jadi ketika urlLoader selesai loading pics.xml, Flash akan menjalankan fungsi urlLoadComplete, yang merupakan hal berikutnya kami menulis...


Langkah 20: UrlLoadComplete fungsi

Ketika XML file dimuat kita akan memiliki untuk menempatkan semua info yang berisi ke objek XML. Kemudian, untuk menggunakan itu, kita akan membutuhkan sebuah objek XMLList terlalu:

Setelah konstruktor paste ini:

Sekarang, Semua anak node elemen pics - yaitu semua tema Tag - berada dalam daftar variabel. Jika Anda ingin melihat apa yang ada di sana, paste 'trace(list);' setelah baris kedua fungsi urlLoadComplete.


Langkah 21: Membuat tombol tema

Untuk melakukan ini kita akan membutuhkan untuk loop. Jadi pertama kita perlu mendeklarasikan variabel loop untuk loop untuk bekerja dengan baik dan array untuk objek themeButton:

Setelah dua baris sudah ada fungsi urlLoadComplete kita harus mulai menulis loop kami:

Setelah ini, kami menempatkan semua tombol dalam tema MC, maka kita menyelaraskan ke pusat tahap:

Anda dapat menguji film Anda sekarang dan melihat apakah ia bekerja. Anda akan melihat tombol tema Anda (bekerja seperti tombol) di baris...


Langkah 22: Pindah themeButtons

Untuk memiliki themeButtons yang bergerak, kita menambah mouseMove eventListener tahap; paste ini dalam konstruktor:

Sebelum kita menulis fungsi slideTheme, kita mendeklarasikan variabel non-lokal lain:

Dalam slideTheme fungsi kita akan menggunakan Tweener kelas - secara khusus, salah satu fungsi dari kelas itu, yang disebut addTween(). (Anda dapat membaca semua tentang kelas ini di sini.)

Menguji film Anda; tema MC harus bergerak sekarang (jika itu lebih lama daripada tahap).


Langkah 23: Variabel untuk themeClick fungsi

Sebelum kita mulai untuk menulis fungsi, kita perlu menyatakan beberapa variabel lebih non-lokal:


Langkah 24: themeClick() Reset negara

Awal fungsi ini menangani ulang hal-hal ketika Anda mengklik salah satu themeButtons.


Langkah 25: themeClick() jelas gambar dan teks

Jika ada gambar pada tahap (dalam img Mc), akan dihapus, dan bidang teks judul akan dihapus:


Langkah 26: themeClick() ingat Clicked tema

Bagian ini menjamin bahwa program akan mampu 'ingat' tema yang Anda mengklik, dengan menyimpan referensi dalam variabel themeClicked.


Langkah 27: themeClick() Filter XML

Bagian selanjutnya dari fungsi ini akan menyaring konten daftar hanya unsur-unsur dari tema yang dipilih:


Langkah 28: themeClick() penghapusan

Jika smallPicsMc berisi item (yaitu Anda sudah mengklik pada beberapa tema), kami menghapus mereka semua.


Langkah 29: themeClick() mengisi array

Jika dipilih tema memiliki setidaknya satu gambar, kita mengisi sumber array dan array judul dan beban jempol.


Langkah 30: themeClick() berurusan dengan tema kosong

Jika thema yang dipilih tidak memiliki gambar apapun di dalamnya, kami memberitahu pengguna bahwa itu akan datang segera.


Langkah 31: SlideSmallPics fungsi

Fungsi ini melakukan hal yang sama sebagai fungsi slideTheme, tetapi dengan smallPicsMc bukan tema MC.


Langkah 32: Fungsi smallPicLoad

Fungsi ini banyak ibu jari dalam smallPics array dan menampilkan proses loading.

Ini agak sulit jadi saya akan memberikan penjelasan lebih rinci. Beban thumbnail satu per satu; seperti loop tetapi saya melakukan perulangan 'secara manual', hampir secara rekursif. Solusi ini diperlukan karena saya ingin thumbnail untuk muncul pada waktu yang sama. Ingat bahwa kita tetapkan visibilitas smallPicsMc ke false, sebelumnya, sehingga kami bisa mengungkapkan thumbnail bersama-sama.

[/sourcecode]


Langkah 33: smallPicComplete() Loading gambar

Pertama, kita memiliki dua variabel non-lokal lainnya untuk menyatakan:

Ini adalah bagian pertama dari fungsi di mana kami memuat gambaran besar pertama, kemudian isi smallPicButtons array dan smallPicsMc.


Langkah 34: smallPicComplete() mengungkapkan jempol dan panah

Ini adalah paruh kedua fungsi ini. Di sini kami mengungkapkan thumbnail dan panah navigasi (dan set mereka untuk siap untuk menavigasi).

Setelah komentar baris yang mana kita sebut fungsi kita belum ditulis belum, Anda akan dapat untuk menguji film Anda, klik pada tombol tema dan thumbnail muncul dan geser.


Langkah 35: NextPic fungsi

Fungsi ini memuat gambar berikutnya berturut-turut. Hal ini dipicu dengan mengklik nextArrow.


Langkah 36: PrevPic fungsi

Fungsi ini memuat gambar sebelumnya di baris. Itu adalah reverse nextPic fungsi, dan dipicu dengan mengklik prevArrow.


Langkah 37: Klik fungsi

Variabel non-lokal lain untuk menyatakan:

Ini adalah fungsi yang disebut dengan mengklik thumbnail:


Langkah 38: loadPic() kliring yang lama

Fungsi ini banyak gambar besar dan mengurus navigasi panah.

Pertama kita perlu mendeklarasikan sebuah Loader yang akan memuat gambar...

.. .dan sekarang, sebenarnya fungsi:


Langkah 39: loadPic() Loading gambar

Kemudian kita ciptakan Loader object, mulai loading, dan menambahkan beberapa pendengar.


Langkah 40: loadPic() angka keluar gambar indeks

Di sini kita memilih indeks kanan gambar kami dimuat. Hal ini penting karena cpi menjelaskan apa gambar yang kita berada di, dan apa judul untuk menunjukkan.


Langkah 41: loadPic() menampilkan atau menyembunyikan Nav Panah

Apakah navigasi panah tersembunyi atau mengungkapkan tergantung pada nilai cpi.


Langkah 42: Beban kemajuan Handler

Fungsi ini dijalankan setiap kali sepotong baru gambar di-load.


Langkah 43: bigLoadComplete() Setup

Hal pertama yang melakukan fungsi ini adalah mengatur isi bidang teks, dan kemudian menetapkan dan mendapatkan beberapa properti gambar dimuat.


Langkah 44: bigLoadComplete() lebih variabel

Kami membuat beberapa variabel baru sehingga kita dapat mengubah ukuran gambar dengan benar. Mereka harus pergi di dalam fungsi bigLoadComplete().


Langkah 45: bigLoadComplete() mengatur ukuran gambar

Bagian ini akan mengatur ukuran baru gambar.


Langkah 46: bigLoadComplete() mengungkapkan gambar

Kami menetapkan sifat bitmap, kemudian mengungkapkan hal itu di atas panggung.


Kesimpulan

Baiklah! Kami selesai sekarang! Saya harap Anda bisa memahami ide-ide ini tut (dan menikmatinya juga).

Terima kasih untuk membaca!

Akhirnya di sini datang seluruh kode:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.