Advertisement
  1. Code
  2. Effects

Membuat efek pembesar mengesankan dengan ActionScript 3.0

Scroll to top
Read Time: 10 min

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

Dua kali sebulan, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah Activetuts +. Tutorial ini pertama kali diterbitkan pada bulan April, 2009.

Dalam tutorial ini kita akan menciptakan efek kaca pembesar, mendemonstrasikan penggunaan displacementMapFilter. Efek dapat dicapai dalam waktu relatif singkat waktu dan dengan sangat sedikit kode.


Hasil akhir Tinjauan

Mari kita lihat apa yang sedang kita bertujuan untuk:


Langkah 1: Ikhtisar singkat

Kami akan bekerja dengan dua lapisan, lapisan tambahan opsional. Yang pertama akan mengadakan gambar yang akan berisi grafis visual, ini bisa apa saja. Lapisan kedua akan warna peta yang akan mengendalikan mendorong piksel. Lapisan ketiga akan mengadakan ActionScript.

Lapisan tambahan yang keempat akan overlaying grafis bertindak sebagai bingkai atau lens surround.

Mari kita melihat ke dalamnya!


Langkah 2: Dokumen Setup

Hal pertama yang perlu kita lakukan adalah membuat file ActionScript 3.0 Flash baru - membuat dokumen ukuran 530px X 400px dengan framerate 30 fps.

””””””

Langkah 3: Impor Sumber Daya

Selanjutnya kita perlu mengimpor gambar yang dapat kita gunakan untuk efek ini - saya menemukan gambar desktop keren, tersedia secara gratis di 1024px X 768px.

Impor ini ke panggung dan nama lapisan "Gambar".

””””””

Sekarang mari kita skala gambar hingga 50% dan pusat itu.

””””””

Langkah 4: Scripting Filter

Buat layer baru di atas dan menyebutnya "Tindakan". Kemudian Mari kita membawa panel tindakan keluar dan mulailah berkreasi efek. Pertama kita perlu filter untuk gambar jadi mari kita membuat objek filter baru dan menyebutnya "dFilter". Kita akan meninggalkan filter gratis parameter karena ada beberapa untuk mengatur.

Selanjutnya kita perlu untuk mengatur parameter filter ini dalam pandangan terdaftar.


Langkah 5: Efek skala

Mari kita mulai dengan yang termudah dan mengatur skala menjadi sekitar 50. Ini adalah jumlah yang akan diperbesar dengan kaca pembesar. Ini juga dapat diatur ke nilai negatif, tetapi dalam hal ini kita membutuhkannya untuk memperbesar, bukan keluar.

Baris tambahan: 3,4

Catatan: hal ini tidak urutan yang sebenarnya di mana filter biasanya menerima parameter. Namun, dalam hal ini kita dapat menambahkan mereka seperti yang kita inginkan karena kita menggunakan tampilan terdaftar untuk gambaran yang lebih baik.


Langkah 6: Channel warna komponen

Selanjutnya kita akan mengatur komponen warna saluran untuk X dan Y - ini menentukan colorchannels yang dalam peta kontrol (yang kami akan membuat kedua) filter akan mendengarkan.

Jika Anda terbiasa dengan kode hex RGB #RRGGBB, kita dapat memilih dari BitmapDataChannel.RED, BitmapDataChannel.GREEN dan BitmapDataChannel.BLUE. Untuk membuatnya lebih mudah kita dapat juga hanya menulis 1 (merah), 2 (hijau) atau 4 (biru) - (dan tidak saya tidak membuat kesalahan ejaan, biru 4; diatur dari posisi sebenarnya saluran dalam kode hex). Dalam contoh ini kita akan hanya menempel merah (1) dan hijau (2)- tetapi kami akan datang kembali untuk lebih tentang ini ketika kita merancang peta sebenarnya perpindahan.

Baris tambahan: 5,6


Langkah 7: Perpindahan Mode

Selanjutnya kita perlu mengatur mode untuk menentukan bagaimana piksel akan bereaksi jika mereka didorong lebih jauh dari batas gambar. Di sini kita dapat memilih dari:

DisplacementMapFilterMode.COLOR / DisplacementMapFilterMode.WRAP / DisplacementMapFilterMode.CLAMP / DisplacementMapFilterMode.IGNORE

Sekali lagi kita dapat menyederhanakan ini dengan menulis 'warna', 'penjepit', 'bungkus', 'abaikan'. Saya tidak akan membahas lebih jauh tentang hal ini dalam tutorial ini, jadi mari kita gunakan 'warna' yang berfungsi paling baik dalam banyak kasus.

Baris tambahan: 7

Mode ini memungkinkan piksel untuk melanjutkan melampaui batas gambar (jika filter mendorong piksel lebih jauh dari tepi gambar).


Langkah 8: Mengelilingi Warna dan Alpha

Sekarang mari kita mengatur warna sekitarnya untuk 0x000000 dan alpha ke 0. Ini adalah 100% transparan, jadi tidak ada yang dipajang di luar gambar kecuali sumber pixel.

Baris tambahan: 8,9


Langkah 9: Filter efek posisi

Sekarang kita perlu untuk menetapkan posisi mana filter akan mempengaruhi foto; posisi lensa kami. Ini harus diatur sebagai titik objek yang mengandung x dan y nilai. Kita akan mulai dengan membuat objek titik sehingga siap untuk digunakan ketika kita menetapkannya ke displacementMapFilter. Sebut saja 'dPoint' dan set ke 0, 0 sebagai nilai awal. Kami akan kembali ke ini di saat kita perlu menginstruksikan titik ini untuk mengikuti mouse.

Selanjutnya kami menetapkan posisi titik "dPoint" untuk "dFilter".

Baris tambahan: 1,11


Langkah 10: BitmapData

Terakhir tetapi tidak paling kita perlu menetapkan peta kontrol untuk filter. Ini adalah peta yang mengandung pixel berwarna yang componentX dan Y mendengarkan.

Baris tambahan: 13

Di sini kita juga perlu sebuah objek BitmapData untuk bertindak sebagai wadah data untuk peta warna kami.


Langkah 11: Merancang Peta Warna

Pertama kami membuat X 100px 100px, merah hitam, linear gradient Square. Ini akan mengambil pixel saat ini dan mendorong mereka kiri dan kanan bersamaan dengan kita menetapkan componentX merah. Mari kita membuat ini sebuah movieklip yang disebut "redMap"

Kemudian kami melakukan hal yang sama lagi - tapi kali ini dengan green menjadi gradiasi linear hitam persegi, lagi 100px X 100px. Kali ini kita akan juga memutarnya 90°. Anda mungkin ingat kita menetapkan komponen untuk perpindahan sumbu Y sebagai hijau (componentY = 2) sehingga gradien berjalan di sepanjang sumbu y. Sekali lagi kita akan mengubahnya menjadi sebuah movieklip, kali ini menyebutnya "greenMap"

””””””

Langkah 12: Mempersiapkan peta untuk menangkap tahap

Kami sekarang memiliki dua terpisah warna gambar; kita membutuhkan hanya satu, jadi mengatur blendmode greenMap untuk "layar". Setiap warna dari greenMap kemudian akan bersinar melalui di redMap. Tempat greenMap di atas redMap dan pastikan mereka menyelaraskan dengan benar.

Memilih kedua movieklip dengan mengklik pada lapisan "Peta" dan mengkonversi dua menjadi satu movieklip disebut "colorMap". Kemudian menetapkan nama misalnya "colorMap_mc".

””””””

Langkah 13: Peta kontainer

Sekarang mari kita kembali ke kode dan lanjutkan dengan mengambil colorMap movieclip dalam bitmapData.

Pergi ke bagian atas kode dan membuat objek BitmapData baru. Mari kita menyebutnya "dMap" dan mengatur ukuran untuk sesuai dengan ukuran colorMap kami (dalam hal ini 100px X 100px, tapi ini dapat hampir apa pun). Kami akan menetapkan transparan untuk "benar" dan warna untuk 0x808080. Ini memastikan bahwa setiap piksel yang tersisa di bitmapData netral.

Baris tambahan: 3


Langkah 14: Capture fase

Kita perlu untuk menarik konten colorMap ke bitmapData. Setelah selesai, kami akan dapat menggunakan script untuk menghapus colorMap dari panggung. Hal ini dimungkinkan karena gambar colorMap yang akan terkandung dalam kode bitmapData.

Baris tambahan: 5, 7


Langkah 15: Menetapkan peta Filter

Tambahkan bitmapData dMap ke displacementMapFilter dengan mengatur parameter terakhir dalam daftar (mapBitmap) ke 'dMap'.

Memodifikasi baris: 19


Langkah 16: Tambahkan Filter ke Gambar

Filter lengkap! Kita sekarang perlu untuk menambahkannya ke gambar, jadi pilih gambar dan pastikan memiliki nama contoh - memungkinkan menyebutnya "Image_mc". Bahwa dilakukan, kami tidak dapat mengatur filter pada gambar. Kita melakukan ini pada akhir kode dengan menetapkan parameter filter gambar sebagai array seperti ini:

Image_mc.Filters = [dFilter]

Baris tambahan: 21

OK, mari kita ekspor film dan melihat bagaimana filter mempengaruhi gambar. Seharusnya terlihat seperti ini:


Langkah 17: Interaktivitas

Apa yang kita miliki sejauh ini tidak sangat menarik, jadi mari kita mencoba untuk membuat lensa mengikuti mouse.

Pertama kita tambahkan kode loop "enterFrame" seperti ini:

Baris tambahan: 23,25,27


Langkah 18: Mengikuti Mouse

Selanjutnya kami menetapkan nilai-nilai kami dPoint X dan Y untuk mengikuti mouse. Selain itu, kami akan menetapkan kembali baru berubah dPoint untuk dFilter lagi dan menetapkan kembali filter untuk gambar.

Baris tambahan: 26,27,28,29

Mari kita menguji lagi. Seharusnya terlihat seperti ini:


Langkah 19: menyelesaikan

Ini masih tidak persis seperti yang kita inginkan, jadi mari kita membuat pusat perpindahan mengikuti mouse dan juga menambahkan sedikit pelonggaran pada gerakan. Untuk melakukan itu kami mengubah kode berikut:

dPoint.x = mouseXdPoint.y = mouseY

Memodifikasi baris: 26,27

Untuk meringkas: kami kurangi setengah ukuran peta dari posisi peta, sehingga pusat. Lalu kami Tambahkan fungsi dasar tweening, yang dapat ditulis seperti ini:

+ = ini (yang-ini) * kecepatan


Langkah 20: Menambahkan Grafik Khusus

Untuk top it off, saya menambahkan grafis kaca pembesar yang saya disiapkan di photoshop. Mengubahnya menjadi sebuah movieklip, memberikannya nama contoh dan membuatnya mengikuti titik yang kami gunakan untuk displacemenMapFilter.

””””””

Hal ini dicapai dengan menetapkan lens_frame_image baru X dan Y posisi sama dengan posisi dPoint. Kemudian mengurangi offset untuk tepi grafis, sehingga itu sempurna sejalan dengan efek filter.

Baris tambahan: 4,5

Sekarang kami hasil akan terlihat seperti ini:


Kesimpulan

Ketika Anda belajar untuk membuat efek ini sendiri tidak boleh lebih dari 15 menit untuk menyiapkan. Ingat; Jika Anda lupa apa parameter untuk displacementMapFilter yang Anda dapat selalu melihat mereka pada "bantuan". Sana Anda akan mendapatkan urutan terdaftar dan apa setiap parameter.

Untuk cepat eksperimen Anda dapat pergi ke situs web saya dan melihat di bagian "flash" di bawah "menguji / laboratorium"-saya punya banyak lingkungan pengujian displacementMapFilter Anda dapat mencoba.

Saya harap Anda dapat menggunakan filter ini dalam karya kreatif Anda!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.