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

Membuat Alat pemutar (Rotator) Gambar di Flash menggunakan XML dan ActionScript 3.0

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Abdul Aziz (you can also view the original English article)

Dalam tutorial ini anda akan belajar bagaimana cara membuat rotator gambar sederhana dari awal menggunakan Flash, XML dan ActionScript 3.0




Tahap 1 : Gamabran Singkat

Rotator gamabr ini di buat hampir seluruhnya dari kode saja.

selama tahap pertama kita akan mengatur properti file Fla dan menanamkan beberapa font untuk membuat informasi gambar tampak lebih baik. Kami juga menambahkan preloader untuk menunjukan transisi otomatis dari gambar.

Tahap 2 : Mempersiapkan.

Buka Flash dan buat File Flash Baru (ActionScript 3.0)

Atur ukuran Stage ke 600 x 300 px dan kecepatan frame ke 24 fps.

Tahap 3 : Sematkan Huruf

Untuk memberikan tampilan yang lebih baik ke aplikasi kita, kita akan menggunakan font yang tertanam.

Buka Library Panel (Cmd+L) dan klik kanan aream item untuk membuka menu context.

Pilih New Font dan pilih fon yang anda suka. ingatlah untuk memilih ukuran yang sebenarnya yang akan gunakan dalam film.

saya menggunakan Helvetica Bold untuk gambar judul dan FFF Harmony untuk deskripsi.

Tahap 4 : Preloader

MovieClip preloader akan digunakan sebagai indikasi kemajuan, ini akan memberi tahu pengguna bahwa gambar diputar secara otomatis.

Dalam contoh ini, saya menggunakan Apple Inspired Preloader yang telah kami buat sebelumnya di ActiveTuts+. Kita akan menggunakan animasi, jadi tidak perlu menyalin kode. Kode kita akan beralih ke gambar berikutnya setiap loop animasi preloader.

Tahap 5 : Dapatkan beberapa gambar

Ini tidak akan menjadi Rototar gambar tanpa gambar, jadi pilihlah gambar dari koleksi pribadi anda atau unduh beberapa gambar untuk pengujian.

ini adalah gambar dari demi, yang didapat ari Flickr, semuanya dengan lisensi Creative Commons.

Grass 01 dari 100kr

deep impact on planet color dari spettacolopuro

Yosemite : fall colours dari tibchris

gamabr telah di ubah ukuranya ke 600x300 px agar sesuai dengan ukuran film.

Tahap 6 : menulis denggan XML

File XML akan dimuat oleh aplikasi; file ini akan berisi semua informasi tentang gambar, seperti Judul, URL gambar dan Deskripsi.

Buka editor favorit anda dan tulis :

Tahap 7 : Membuat Class dokumen

Buat Dokumen ActionScript baru dan simpan pada ImageRotator.as.

Tahap 8 : Impor class yang diperlukan

Ini adalah Class yang diwajibkan. untuk deskripsi ynag lebih rinci untuk setiap class, silahkan merujuk ke Help (tekan F1 dalam Flash).

Tahap 9 : Mulai Class

Memperluas definisi kata kuncisebuah class adalah sub class dari class lain. sub-class memiliki metode, properti dan fungsi, dengan cara itu kita adapat menggunakan class kita.

kita akan membuat class dokumen, memperluas Sprite karena tidak memerlukan timeline.

Tahap 10 : Deklarasi Variabel

ini adalah variabel yang kita gunakan. masing-masing dijelaskan dalam komentar.

tahap 11 ; menulis Fungsi Constructor

Constrctor adalah fungsi yang berjalan ketika suatu objek yang dibuat dari class. Kode ini adalah yang pertama kali dieksekusi ketika kita membuat instance objek run menggunakan Class dokumen. dalam hal ini akan menjadi kode pertama yang dijalankan ketika SWF kami mulai.

Parameter awal memiliki nilai default; ini akan memungkinkan kita menggunakan class sebagai class dokumen dan sebagi contoh.

Parameternya adalah URL File XML dan waktu objek akan menunggu untuk transisi di antara gambar; nomor ini harus lebih tinggi dari durasi transisi Tween (satu detik secara default)

Tahap 12 : Menulis Kontruksi Kode

Kode ini termasuk dalam konstruktor. ini memulai timer, mengatur mengatur format teks default untuk bidang teks dan memanggil fungsi load XML.

Tahap 13 : Load File XML

Fungsi ini menggunakan objek URLLoader untuk memuat file XML yang ditentukan dalam parameter konstruktor. Fungsi parseXML (pada langkah berikutnya) diatur untuk mengeksekusi ketika load selesai.

Tahap 14 : Parse File XML

Data XML ditugaskan pada objek xml dan fungsi untuk memuat gambar disebut.

Thapa 15 : Memuat Gambar.

untuk sebuat pernyataan digunakan untuk mendapatakan jumlah gambar dari XML, memuat gambar menggunakan objek Loader dan menyimpan Loader dalam objek vektor, yang didefinisikan sebelumnya. Ketika memuat gambar selesai, fungsi sortlmages di eksekusi.

Tahap 16 : Sortir Gambar

Fungsi ini menambahkan gambar ke stage dan mengurutkanya; ketika semua gambar dimuat, itu akan memanggil fungsi yang membuat panel informasi dan mouse listeners.

Tahap 17: menambahkan Mouse Listener ke Gambar.

Kami menggunakan for stetmen untuk mengatur mouse listeners di setiap gambar. ini adalah bentuk kontrol yang sangat sederhana; ketika pengguna mengklik sebuah gambar, fungsi handler perubah gambar akan di panggil.

Tahap 18 : Transisi Manual

Kode ini akan berjalan ketika pengguna mengklik sebuah gambar. baca komentar dalam kode untuk lebih detailnya.

Tahap 19 : Memindahkan Gambar untuk Kembali.

Transisi antar gambar didasrkan pada alpha tween, jadi anda akan melihat gambar berikutnya ketika transisi telah selesai. Namun jika anda mengkliknya, anda akan mengklik gambar yang sama seperti sebelumnya, meskipun itu tidak terlihat. ini akan memperbaikinya.

Tahap 20 : Menulis Panel Informasi

ini akan membuat panel semi transparan, dengan teks yang dihasilkan dari Judul XML dan Tags deskripsi.

Tahap 21 : Menangani Transisi Otomatis

Kode ini menangani tansisi otomatis; itu dipicu oleh objek TIMER.

Tahap 22 : Posisikan MovieClip Preloader

Potongkan tambahan skrip ini dan letakan preloader.

Ini melengkapi class ImageRotator

Tahap 23 : Menggunkan Class

Ada dua cara menggunakan Class ini. anda dapat menggunakan kode anda sebagai instans atau sebagai kelas dokumen dengan parameter default yang kita atur sebelumnya.

jika anda memilih untuk membuat instan kelas ini dan menggunakan kode anda, ini adalah contoh cara untuk menggunakanya.

dengan cara ini anda dapat mengatur file XML yang akan di muat dan interval transisi tanpa perlu edit kode class

kalau tidak bisa, lihat tahap selanjutnya.

tahap 24 : menggunakan dokumen Class

di file .fla, buka panel properti dan tulis ImageRotator di bidang Class. ingat! ini akan menggunakan parameter dafault.

kesimpulan

ini ahnya contor dari rotator gambar dan cara yang baik untuk mulai membuat galeri gambar yang menakjubkan.

terima kasih telah membaca.

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.