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.
var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();
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
var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50
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
var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2
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
var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color"
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
var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0
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
var dPoint:Point = new Point(0, 0); var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint;
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
var dPoint:Point = new Point(0, 0); var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
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
var dPoint:Point = new Point(0, 0); var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080) var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
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
var dPoint:Point = new Point(0, 0); var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080) dMap.draw(colorMap_mc) removeChild(colorMap_mc) var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint; dFilter.mapBitmap =
Langkah 15: Menetapkan peta Filter
Tambahkan bitmapData dMap ke displacementMapFilter dengan mengatur parameter terakhir dalam daftar (mapBitmap) ke 'dMap'.
Memodifikasi baris: 19
var dPoint:Point = new Point(0, 0); var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080) dMap.draw(colorMap_mc) removeChild(colorMap_mc) var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint dFilter.mapBitmap = dMap
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
var dPoint:Point = new Point(0, 0); var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080) dMap.draw(colorMap_mc) removeChild(colorMap_mc) var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint dFilter.mapBitmap = dMap Image_mc.filters = [dFilter]
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
var dPoint:Point = new Point(0, 0);
var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080)
dMap.draw(colorMap_mc)
removeChild(colorMap_mc)
var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();
dFilter.scaleX = 50
dFilter.scaleY = 50
dFilter.componentX = 1
dFilter.componentY = 2
dFilter.mode = "color"
dFilter.color = 0x000000
dFilter.alpha = 0
dFilter.mapPoint = dPoint
dFilter.mapBitmap = dMap
Image_mc.filters = [dFilter]
Image_mc.addEventListener(Event.ENTER_FRAME, onFrame)
function onFrame(e:Event){
} 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
var dPoint:Point = new Point(0, 0);
var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080)
dMap.draw(colorMap_mc)
removeChild(colorMap_mc)
var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();
dFilter.scaleX = 50
dFilter.scaleY = 50
dFilter.componentX = 1
dFilter.componentY = 2
dFilter.mode = "color"
dFilter.color = 0x000000
dFilter.alpha = 0
dFilter.mapPoint = dPoint
dFilter.mapBitmap = dMap
Image_mc.filters = [dFilter]
Image_mc.addEventListener(Event.ENTER_FRAME, onFrame)
function onFrame(e:Event){
dPoint.x = mouseX
dPoint.y = mouseY
dFilter.mapPoint = dPoint
Image_mc.filters = [dFilter]
} 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
var dPoint:Point = new Point(0, 0);
var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080)
dMap.draw(colorMap_mc)
removeChild(colorMap_mc)
var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();
dFilter.scaleX = 50
dFilter.scaleY = 50
dFilter.componentX = 1
dFilter.componentY = 2
dFilter.mode = "color"
dFilter.color = 0x000000
dFilter.alpha = 0
dFilter.mapPoint = dPoint
dFilter.mapBitmap = dMap
Image_mc.filters = [dFilter]
Image_mc.addEventListener(Event.ENTER_FRAME, onFrame)
function onFrame(e:Event){
dPoint.x += ((mouseX-colorMap_mc.width/2)-dPoint.x)*0.3
dPoint.y += ((mouseY-colorMap_mc.height/2)-dPoint.y)*0.3
dFilter.mapPoint = dPoint
Image_mc.filters = [dFilter]
} 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
function onFrame(e:Event){
dPoint.x += ((mouseX-colorMap_mc.width/2)-dPoint.x)*0.3
dPoint.y += ((mouseY-colorMap_mc.height/2)-dPoint.y)*0.3
lens_mc.x = dPoint.x-8
lens_mc.y = dPoint.y-8
dFilter.mapPoint = dPoint
Image_mc.filters = [dFilter]
} 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!
