() translation by (you can also view the original English article)
Kecerahan adalah atribut persepsi visual di mana sumber muncul untuk memancarkan atau mencerminkan cahaya.
Dalam tutorial ini kita akan belajar cara mengubah kecerahan layar objek menggunakan ActionScript 3.
Tinjauan Hasil akhir
Mari kita lihat pada hasil akhir yang kita akan kerjakan:
Langkah 1: Ikhtisar singkat
Menggunakan ColorTransform kelas dan Slider komponen kami akan meningkatkan atau mengurangi kecerahan DisplayObject.
Langkah 2: Memulai
Buka Flash dan membuat File Flash baru (ActionScript 3).
Atur ukuran stage ke 500x350px dan atur frame rate untuk 24fps.
Langkah 3: Pilih Objek Tampilan
DisplayObject apapun dapat digunakan dengan kelas ini; untuk contoh ini saya mengambil gambar dari Flickr:
Tempatkan gambar Anda di tengah-tengah stage, Konvesi ke MovieClip dan memberikannya instance nama dari image.
Langkah 4: Panel Kecerahan
Kami akan membuat sebuah panel dengan Slider komponen dan Textfield dinamis sebagai obyek interaktif.
Pilih Rectangle Primitive Tool (R) dan gambar persegi panjang 250x70px, atur radius sudut ke 7 dan ubah alpha ke 60.
Konversi ke MovieClip dan tambahkan filter berikut:
Panel akan terlihat seperti ini:
Klik dua kali MovieClip untuk memasuki edit mode dan membuat Textfield dinamis; atur nama instance ke bValue (untuk "nilai kecerahan") dan tengahkan ini. Berikan entri awal 0. Anda juga dapat menambahkan judul untuk panel dan beberapa ikon sebagai panduan.
Langkah 5: Slider komponen
Buka panel komponen (Cmd Ctrl + F7) dan seret Slider komponen pada panel kecerahan; tengahkan itu dan nama itu slider.
Langkah 6: Inspektur Komponen
Di slider komponen yang dipilih, tekan Shift + F7 untuk membuka panel inspektur komponen dan edut pilihan seperti yang ditunjukkan pada gambar:
Langkah 7: ActionScript
Buat dokumen ActionScript baru dan Simpan sebagai Main.as.
Kita akan menggunakan dokumen kelas untuk proyek ini. Jika Anda tidak yakin bagaimana menggunakan kelas dokumen, baca pengenalan cepat ini.
Langkah 8: Paket
1 |
|
2 |
package
|
3 |
{
|
Kata kunci paket memungkinkan Anda untuk mengatur kode Anda ke dalam kelompok yang dapat diimpor oleh skrip lainnya, dianjurkan untuk nama mereka mulai dengan huruf huruf kecil dan menggunakan intercaps untuk kata-kata berikutnya misalnya: myClasses.
Jika Anda tidak ingin mengelompokan file dalam paket atau Anda memiliki hanya satu kelas, Anda dapat menggunakannya langsung dari folder source Anda.
Langkah 9: Kelas yang diperlukan
Beberapa kelas yang diperlukan untuk ini bekerja. Untuk keterangan lebih rinci tentang setiap kelas, silakan merujuk ke Flash Help (F1).
1 |
|
2 |
import flash.display.Sprite; |
3 |
import fl.events.SliderEvent; |
4 |
import flash.geom.ColorTransform; |
Langkah 10: Memperluas kelas
Kata kunci extends mendefinisikan kelas yang subclass dari kelas lain. Subclass mewarisi semua metode, sifat dan fungsi, dengan cara itu kita dapat menggunakannya di kelas kami.
1 |
|
2 |
public class Main extends Sprite |
3 |
{
|
Langkah 11: Variabel
Hanya satu variabel yang diperlukan dalam contoh ini: sebuah instance ColorTransform. Ini akan digunakan untuk mengubah nilai-nilai RGB objek tampilan target.
1 |
|
2 |
var colorTransform:ColorTransform = new ColorTransform(); |
Langkah 12: Fungsi Constructor
Fungsi ini dijalankan ketika kelas di-muat.
Listener SliderEvent ditambahkan ke Slider komponen untuk menjalankan fungsi ketika pengguna merubah nilai Slider.
1 |
|
2 |
public function Main():void |
3 |
{
|
4 |
panel.slider.addEventListener(SliderEvent.CHANGE, updateBrightness); |
5 |
}
|
Langkah 13: Mengubah Warna
Fungsi ini dijalankan ketika nilai slider berubah. Ini adalah bagian ColorTransform. Offset warna merah, hijau, dan biru mengubah matriks yang atur sesuai nilai slider.
1 |
|
2 |
private function updateBrightness(e:SliderEvent):void |
3 |
{
|
4 |
/* Set the RGB offsets to the slider value */
|
5 |
|
6 |
colorTransform.redOffset = e.value; |
7 |
colorTransform.greenOffset = e.value; |
8 |
colorTransform.blueOffset = e.value; |
Ingin tahu apa yang kita lakukan di sini? Periksa artikel ini menjelaskan transformasi warna.
Langkah 14: Menerapkan Perubahan
Baris ini digunakan untuk merubah pada gambar di atas stage.
1 |
|
2 |
image.transform.colorTransform = colorTransform; |
Langkah 15: Nilai Teks
Teks dalam panel kecerahan juga diperbarui.
1 |
|
2 |
panel.bValue.text = e.value; |
3 |
}
|
4 |
}
|
5 |
}
|
Langkah 16: Dokumen kelas
Kembali ke file FLA dan di Panel properti atur bidang Class ke Main untuk link ke dokumen kelas.
Kesimpulan
Sekarang Anda dapat dengan mudah menerapkan cara untuk mengubah kecerahan gambar atau tampilan objek lain menggunakan ActionScript 3.
Terima kasih sudah membaca!
