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

Membuat Fitur Baru untuk Flash dengan JSFL

by
Read Time:10 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam pengenalan bahasa scripting JavaScript for Flash (JSFL) ini, Anda akan belajar cara mengotomatiskan tugas berulang dan menambahkan perintah baru ke lingkungan penulisan Flash.


Perkenalan

Kita akan mulai dengan menjelajahi JSFL secara umum, melihat apa yang bisa dilakukannya, kemudian membangun aplikasi yang berguna: perintah yang dapat mengubah teks menjadi tombol (dengan area hit-nya diatur dengan benar) dalam satu klik.

Awesome font is Urbix by urbanpixel.caAwesome font is Urbix by urbanpixel.caAwesome font is Urbix by urbanpixel.ca

Langkah 1: Buat File JSFL

Buka Flash dan klik File > New. Pilih Flash JavaScript File dari daftar, dan simpan dokumen baru Anda sebagai example.jsfl, di mana saja Anda suka.

JSFL adalah format teks biasa, sehingga Anda dapat membuka file JSFL di editor teks apa pun.


Langkah 2: Buat FLA

Kita akan membutuhkan FLA kosong untuk menguji skrip kita, jadi buat juga salah satunya. Anda bahkan tidak harus menyimpannya; itu hanya untuk pengujian.


Langkah 3: Tulis Beberapa Skrip

Di file JSFL Anda, tempelkan kode berikut:

Bahkan jika Anda belum pernah menggunakan JavaScript sebelumnya, sintaksnya cukup mirip dengan ActionScript sehingga Anda bisa menebak apa fungsinya:

  • fl adalah obyek yang mewakili aplikasi Flash itu sendiri
  • getDocumentDOM() mengembalikan FLA yang saat ini terbuka
  • addNewOval() menggambar oval ke FLA, dengan parameter yang diberikan

Langkah 4: Jalankan Skrip

Jika Anda mengedit JSFL di Flash, jalankan skrip dengan mengklik tombol Play segitiga besar di bilah alat. Jika tidak, klik ganda file JSFL di komputer Anda dan secara otomatis akan berjalan di Flash.

Anda akan melihat lingkaran muncul, menggunakan warna apa pun yang telah Anda pilih. Hebat! Sekarang setiap kali Anda perlu menggambar lingkaran 50px yang berpusat di (125, 125), Anda bahkan tidak perlu menggambarnya.


Langkah 5: Buat Script Lebih Berkode

Ini semacam hasil yang membosankan. Mari kita buat yang lebih rumit:

Yap - JavaScript juga memiliki for-loop. Kali ini, jalankan JSFL dengan beralih ke FLA Anda, klik Commands > Run Command, lalu temukan file skrip Anda di hard drive Anda.

Lihat hasilnya:

Sudah jelas bahwa ini bisa sangat berguna untuk mengurus tugas yang berulang dan tepat. Misalnya, akan mudah untuk memodifikasi kode itu untuk membuat grid lingkaran... dan dari sana itulah langkah kecil untuk membuat grid tombol. Tidak ada lagi menyalin, menempel, dan dengan lembut menggeser simbol di sekitar panggung untuk berbaris dengan benar.


Langkah 6: Pelacakan

Selalu baik untuk memiliki perintah trace() tersedia ketika Anda menguji sesuatu yang baru. Dalam JSFL, kita memiliki fungsi fl.trace(), yang mengambil string tunggal (tidak seperti trace() AS3, yang dapat mengambil beberapa sekaligus) dan mencetaknya ke panel Output. Cobalah:

Hasilnya:


Langkah 7: Tambahkan Perintah ke Menu

Harus menjaga JSFL terbuka atau menjelajahinya kapan pun Anda ingin menggunakannya akan sangat menyebalkan. Sebaliknya, Anda dapat menambahkannya ke menu Commands sehingga hanya beberapa klik saja. (Dan begitu ada di sana, Anda bahkan dapat menetapkan pintasan keyboard.)

Yang harus Anda lakukan adalah memindahkan file example.jsfl Anda ke folder \Command\ dari Flash. Lokasi folder ini tergantung pada OS Anda:

  • Mac OS X: [hard drive]/Users/userName/Library/Application Support/Adobe/Flash CS3/language/Configuration/Commands
  • Windows XP: [boot drive]\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Commands
  • Windows Vista: [boot drive]\Users\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Commands
  • Windows Vista (alt): [boot drive]\Users\username\AppData\Local\Adobe\Flash CS3\language\Configuration\Commands
  • Windows 7: [boot drive]\Users\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\Commands
  • Windows 7 (alt): [boot drive]\Users\username\AppData\Local\Adobe\Flash CS3\language\Configuration\Commands

Folder username akan sesuai dengan nama yang Anda gunakan untuk login, language akan berubah tergantung pada apa yang Anda pilih ketika Anda menginstal Flash (untuk penutur bahasa Inggris mungkin akan menjadi en-us atau hanya en), dan jika Anda menggunakan versi Flash yang lebih baru dari CS3, folder itu juga akan berubah.

Setelah disimpan di folder itu, itu akan muncul di menu Commands, menggunakan nama file JSFL:

Cukup klik untuk menjalankannya. Sekarang Anda dapat mengedit file JSFL di dalam folder Commands, untuk mempercepatnya.


Langkah 8: Ambil Informasi dari FLA

JSFL dapat melakukan lebih dari menjalankan daftar perintah. Ia juga bisa mendapatkan informasi tentang FLA dan item di dalamnya, dan membuat keputusan berdasarkan info tersebut.

Misalnya, kita dapat menulis skrip untuk melacak berapa banyak item yang saat ini dipilih:

Obyek selection sebenarnya adalah array, dengan setiap elemen berisi salah satu obyek yang dipilih. Itu sebabnya selection.length memberi kita jumlah obyek yang dipilih.

Skrip sederhana ini memberikan wawasan tentang cara kerja Flash: coba menggambar beberapa lingkaran, memilih semuanya, dan menjalankan skripnya. Ini akan mengembalikan "1". Buat beberapa bidang teks, pilih semuanya, dan jalankan skrip, dan itu akan menghasilkan angka yang sama dengan jumlah bidang teks.


Langkah 9: Temukan Jenis Obyek

Kita juga dapat memperoleh informasi tentang obyek di dalam pemilihan itu:

Saya memiliki dua bidang teks dan sekelompok lingkaran yang dipilih, dan skrip ini menghasilkan:

Untuk daftar obyek dan fungsi lengkap, jelajahi buku Extending Flash di Adobe LiveDocs.


Langkah 10: Ubah Obyek di Panggung

Inilah skrip sederhana yang menekan semua bentuk yang dipilih di atas panggung - tetapi tidak ada yang lain:

Sebelum:

...dan sesudah:


Langkah 11: Gambaran "Buttonize"

Anda punya dasar-dasarnya. Sekarang saatnya untuk daging dari tutorial ini.

Kita akan membuat skrip yang mengambil bidang teks dan mengubahnya menjadi tombol. Saya akan berjalan melalui langkah-langkah yang akan direplikasi skrip ini; mulai FLA baru dan letakkan bidang teks di tengah, lalu ikuti bersama:

  1. Klik teksnya
  2. Konversikan menjadi simbol
  3. Pergilah ke Edit Mode
  4. Buat keyframe baru: over, down, hit
  5. Gambarlah persegi panjang padat yang menutupi teks untuk menentukan area hit.

Ini cukup sederhana, ketika Anda melihatnya terdaftar seperti itu. Tetapi bagaimana kita melakukan semua itu di JSFL? Bagaimana skripnya?

Kita bisa melihat semuanya di LiveDocs, tetapi ada cara yang lebih mudah...


Langkah 12: Panel History

Klik Window > Other Panels > History untuk membuka panel History:

Itu semua langkah yang kita butuhkan. Kalau saja mereka berada di JSFL...


Langkah 13: Daftar Panel History di JSFL

Oh, benar, mereka ada di JSFL. Klik tombol kecil ini:

... lalu klik View > JavaScript in Panel:

Hasil:

Ini bukan yang kita butuhkan, tapi itu memberi kita beberapa indikasi ke mana harus mencari di LiveDocs.


Langkah 14: Salin Riwayat

Klik item riwayat bagian atas yang Anda butuhkan dan shift-klik bagian bawah untuk memilih semua langkah di antaranya. Anda dapat ctrl-klik (cmd-klik pada Mac) item individual untuk membatalkan pilihan mereka dari daftar ini (saya telah menghapus beberapa klik mouse yang tidak perlu dari milik saya). Kemudian, klik lagi tombol menu kecil itu dan pilih Copy Steps. Anda sekarang dapat menempelkannya ke file JSFL:

Simpan ini sebagai Buttonize.jsfl.

(Atau, Anda dapat mengklik tombol Save untuk membuat file JSFL di direktori Commands, dalam hal ini skrip akan memiliki komentar untuk membantu menjelaskan setiap langkah.)


Langkah 15: Pengujian Skrip

Mari kita coba skrip seperti sekarang sehingga kita bisa mendapatkan ide bagus tentang apa yang perlu kita perbaiki. Mulai FLA kosong lain, buat bidang teks (letakkan di posisi yang berbeda, dengan teks yang berbeda), klik, dan jalankan JSFL.

Apa itu bekerja? Milik saya tidak berhasil:

Kita dapat melihat bahwa kita harus memindahkan kotak sehingga ukuran dan posisinya cocok dengan bidang teks.


Langkah 16: Dapatkan Dimensi Bidang Teks

Untungnya, kita sudah tahu cara mendapatkan informasi tentang item yang dipilih. Kita bisa menebak apa properti dimensi dari obyek yang dipilih akan dipanggil; mari kita coba melacaknya dan lihat apakah kita benar:

Kejutan, kejutan, ya, itu bekerja dengan baik. Sekarang kita bisa menggunakan informasi itu untuk menggambar persegi panjang:

Cobalah:

...Oh.


Langkah 17: Simpan Informasi sebelum Perubahan Pilihan

Apa yang terjadi? Nah, ketika skrip masuk ke mode Edit, seleksi berubah; kita berada di dalam simbol Button, jadi kita tidak memilihnya lagi. Perhatikan kesalahan semacam itu saat bekerja dengan JSFL.

Namun, ini mudah diperbaiki - kita hanya perlu menyimpan properti left, top, right, dan bottom lebih awal, sebelum pemilihan berubah:

Apa itu bekerja? Itu berhasil untuk saya!


Langkah 18: Periksa Potensi Kesalahan

Apa yang terjadi jika kita menjalankan perintah tanpa memilih teks? Kita mendapatkan kesalahan yang sama seperti sebelumnya:

Kita harus memeriksa untuk melihat apakah ada obyek yang dipilih sebelum melakukan sesuatu:

Sebenarnya, kita dapat melakukan lebih baik dari itu... bagaimana dengan memeriksa apakah sebenarnya satu bidang teks telah dipilih?

Ini membuka segala macam opsi lain. Jika beberapa item dipilih, Anda bisa mengulang semuanya, dan mengubahnya menjadi tombol. Jika sebuah obyek dipilih yang bukan bidang teks, Anda bisa memperlakukannya secara berbeda - mungkin tidak perlu persegi panjang untuk bentuk Hit-nya.


Langkah 19: Beri Nama Tombol Berdasarkan Teksnya

Sentuhan yang bagus adalah memberi simbol Button nama yang sama dengan teks yang dikandungnya. Itu akan membuat Perpustakaan tetap rapi juga. Tapi tidak ada dalam skrip kita yang menyarankan bagaimana kita bisa melakukan itu.

Kita tahu bahwa JSFL untuk mengubah seleksi menjadi simbol adalah fl.getDocumentDOM().ConvertToSymbol(), terima kasih kepada panel History. Jika Anda melihatnya di LiveDocs, Anda akan menemukan bahwa parameter kedua (yang dibiarkan kosong oleh skrip panel History) disebut name, dan dijelaskan seperti ini:

String yang menentukan nama untuk simbol baru, yang harus unik. Anda dapat mengirim string kosong agar metode ini membuat nama simbol unik untuk Anda.

Bingo! Tentu saja, kita tidak tahu apa kata teksnya...


Langkah 20: Dapatkan Teksnya

Kita bisa menebak:

Sayangnya, pengembalian ini undefined. Baiklah.

Jangan khawatir - pemindaian cepat melalui LiveDocs mengungkapkan halaman ini pada obyek Text. Di sana kita dapat menemukan fungsi yang kita cari: text.getTextString().

Tambahkan itu ke skrip Anda:

Ujilah.

Fantastis.


Merangkum

Buttonize adalah perintah kecil yang mudah yang tersedia jika Anda perlu membuat UI dengan cepat, tetapi itu bukan inti dari tutorialnya. Tujuannya adalah untuk memahami JSFL, dan melihat di mana JSFL dapat digunakan. Saya berharap bahwa lain kali Anda dihadapkan dengan pekerjaan satu jam dari tugas-tugas Flash yang membosankan, Anda akan menemukan cara untuk mengotomatiskannya dengan skrip dalam separuh waktu :)

Advertisement
Did you find this post useful?
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.