Flash Professional bukan satu-satunya tool yang dapat Anda gunakan untuk membuat aplikasi dan game Flash. Di awal tahun kita meninjau FlashDevelop; sekarang, kita akan meninjau FDT 4, sebuah IDE kuat yang dirancang khusus untuk pengembangan ActionScript, MXML dan haXe. Baca terus untuk mengetahui apa yang bisa ditawarkannya kepada Anda!

Fitur Penghemat Waktu Hebat FDT

Perbedaan antara FDT dan editor kode Flash Professional atau tool lain adalah bahwa ia menawarkan banyak fitur menghemat waktu yang memungkinkan Anda berkonsentrasi pada logika kode, sehingga tidak perlu repot dengan masalah sintaksis seperti braket penutup yang hilang atau panggilan fungsi yang salah eja. Seperti pemeriksa ejaan, FDT memberi Anda feedback instan tentang kode Anda dan mengidentifikasi masalah bahkan sebelum Anda menyusun proyek. Sebelum kita menginstal dan mulai bekerja dengan FDT, saya ingin memberi Anda mencoba beberapa fitur yang paling menarik.

Code Completion

Fitur terpenting dari FDT, yang mungkin paling sering Anda gunakan, adalah code completion, juga disebut penyelesaian otomatis. Anda tidak perlu mengetikkan seluruh nama variabel atau fungsi lagi. Cukup mulai menulis dan tekan CTRL + Space untuk memunculkan daftar proposal. Anda dapat mengubah perilaku penyelesaian otomatis yang akan dipicu pada setiap penekanan tombol (seperti yang dilakukan FlashDevelop) dengan masuk ke Preferences > FDT > Editor > Code Assist dan menyalakan "Every Key

Lanjutkan mengetik untuk mempersempit daftar pilihan. Gunakan mouse untuk memilih proposal dari daftar atau gunakan tombol panah "Atas" dan "Bawah" diikuti dengan menekan "Return". Anda juga dapat menggunakan "camel case auto completion" - misalnya, someMovieClip.gap akan menawarkan fungsi gotoAndPlay().

Quick Fixes

Fitur favorit saya dari FDT adalah menggunakan fungsi Quick Fix. FDT tidak hanya akan segera memberi tahu Anda apa yang salah dalam kode Anda, tetapi juga memberi Anda opsi untuk memperbaikinya secara otomatis dengan memasukkan kode yang hilang. Jika, misalnya, Anda memanggil fungsi yang belum tersedia, FDT akan menambahkan penanda kesalahan di sebelah kiri baris itu. Bola lampu kuning menunjukkan, bahwa ada Quick Fix yang tersedia untuk masalah ini. Tekan CMD/CTRL + 1 dan periksa proposal di popup Quick Fix:

FDT menawarkan Anda untuk membuat fungsi sayHello(). Tekan "Return" dan FDT akan secara otomatis memasukkan fungsi. Gunakan tombol "Tab" untuk menelusuri pernyataan kode yang dikelilingi oleh kotak biru dan mengubahnya. Sekali lagi tekan "Return" untuk menyelesaikan prosedur Quick Fix.

Fitur ini tidak hanya bagus untuk memperbaiki masalah hanya dengan beberapa penekanan tombol, tetapi juga akan mengubah alur kerja pengkodean. Anda akan mulai memaksa masalah untuk menggunakan Quick Fix!

Organize Imports

Menggunakan pintasan CMD/CTRL + SHIFT + O atau memilih Source > Organize Imports dari menu akan menambahkan semua pernyataan impor yang hilang di bagian atas kelas. Anda tidak perlu menambahkan impor secara manual lagi. Hal terbaik tentang fitur Impor Impor FDT adalah bahwa itu juga akan menghapus impor yang tidak digunakan secara otomatis.

Pemilih Warna

Saya ingin memiliki label ungu di aplikasi Flex saya, tetapi kode warna hex apa yang dimiliki ungu? Tanpa harus beralih ke Flash Pro atau Photoshop Anda cukup menggunakan color picker FDT untuk memilih warna. Letakkan kursor Anda di atas kode hex dan aktifkan Quick Fix (CMD/CTRL + 1). Pilih "Select color" dan gunakan color picker.

Template Kode

Sebagai developer, Anda mendapati diri Anda mengetik cuplikan kode berulang berulang-ulang, seperti "for loop" misalnya. Dalam FDT kita cukup menggunakan template kode untuk itu. Ketik fori, gunakan penyelesaian otomatis (CTRL + SPACE) dan pilih "fori - iterate over array". Ini akan memasukkan cuplikan kode untuk Anda. Buat perubahan dengan menggunakan tombol "Tab" dan tekan "Return" untuk menyelesaikan.

Untuk menelusuri template kode yang dikirimkan bersama FDT, buka Preferences > FDT Editor > Templates. Ini adalah tempat di mana Anda juga dapat membuat template Anda sendiri! Lihat saja template lainnya dan Anda akan segera belajar cara membuatnya dan menggunakan variabel kuat untuk membuatnya lebih pintar.

Refactoring

FDT memiliki dua fitur refactoring yang hebat: Move dan Rename. Jika Anda ingin memindahkan kelas ke paket lain, Anda biasanya perlu mengubah pernyataan impor di semua kelas yang menggunakannya. Pindahkan refactoring dalam FDT menangani ini secara otomatis. Cukup seret dan jatuhkan kelas dari satu paket ke paket lain di Flash Explorer dan FDT akan mengurus sisanya.

Jika Anda ingin mengubah nama kelas, fungsi atau variabel, cukup gunakan fitur Rename refactoring (ALT + SHIFT + R). FDT akan mengubah nama di mana-mana di seluruh proyek.

Fitur Navigasi Kode

Menavigasi kode sumber Anda sangat penting dalam proyek besar. Berikut adalah beberapa cara pintas yang paling penting untuk dinavigasi:

• F2 - Show Class di Flash Explorer
• F3 - Buka deklarasi
• Alt + (CMD) + Tombol Kiri - Melompat kembali ke Riwayat
• CMD/CTRL + T - Hirarki Jenis Cepat
• CMD/CTRL + O - Quick Outline
• CMD/CTRL + R - Cari Referensi

Komunitas FDT

FDT dimulai sebagai editor ActionScript 2 profesional pertama pada tahun 2004. Ada komunitas besar dan sangat aktif di sekitar FDT, yang memberikan kontribusi tutorial, blog tentang penggunaan fitur baru yang terus ditambahkan, membantu di Twitter dan memposting feature requests dan bug reports. Tim development FDT memberikan kembali cinta ini kepada masyarakat dengan mendengarkan requests mereka dan mengintegrasikan tools komunitas seperti Joa Ebert's Apparat atau haXe.

Untuk menjadi bagian dari komunitas FDT, periksa Blog dan ikuti FDT di Twitter atau Facebook.

Menginstal FDT 4

Menginstal FDT sangat mudah. Ikuti 3 langkah ini untuk mengatur development environment FDT Anda:

1. Unduh dan install FDT
2. Unduh SDK Flex
3. Instal Debug Flash Player

Untuk menginstal FDT cukup buka http://fdt.powerflasher.com dan arahkan ke halaman unduh. Pilih salah satu dari installers untuk Windows, Mac atau Linux. Jika Anda ingin mencoba FDT dan belum memiliki lisensi, isi formulir di atas untuk mendaftar untuk lisensi percobaan 30 hari. Setelah mengunduh, ikuti instruksi untuk menyelesaikan instalasi.

FDT didistribusikan tanpa Flex SDK. Flex SDK pada dasarnya adalah folder yang berisi kompiler, kelas inti, dan tool lain untuk mengkompilasi Script Tindakan Anda dan kode Flex ke SWF. Anda dapat mengembangkan proyek Action Script murni maupun proyek Flex menggunakan Flex SDK Adobe. Buka Adobe Open Source dan unduh SDK yang ingin Anda gunakan dalam FDT. Setelah mengunduh dan unzipping SDK pergi ke FDT > Preferences > Installed SDKs dan klik tombol "Add" untuk menambahkan Flex SDK.

Untuk men-debug aplikasi Flash Anda menggunakan debugger visual FDT, Anda perlu memastikan bahwa Debug Flash Player diinstal pada sistem Anda. Buka Unduhan Adobe Flash Player:

• Mac: Unduh dan install debugger konten Plugin Flash Player
• Windows: Unduh dan pasang debugger konten Flash Player Active X control serta debugger konten Plugin Flash Player

Selamat, Anda telah berhasil mengatur development environment FDT Anda dan sekarang dapat mulai mengkodekan!

FDT Workbench

Klik untuk memperbesar

• Toolbar (atas): Temukan tindakan paling penting seperti membuat file baru atau mengkompilasi aplikasi Anda di toolbar
• Flash Explorer (kiri): Di sinilah Anda akan mengatur proyek, file, dan folder Anda
• Outline (kiri): Daftar properti dan fungsi dari kelas yang saat ini dibuka
• Editor (tengah): Jika Anda membuka file, itu akan ditampilkan di area editor
• Problems (bawah): Daftar masalah dan peringatan dalam kode sumber Anda

Panel yang dijelaskan di atas disebut "Views" dalam FDT. Anda dapat menutup view, memperkecil atau mengatur ulang hanya dengan menyeret view ke lokasi yang berbeda. Jika Anda ingin mengatur ulang view ke posisi default, buka Window > Reset Perspective. Untuk membuka view tambahan, buka Window > Show View dan pilih yang Anda lewatkan. View dikelompokkan menjadi apa yang disebut "Perspectives".

Pilih Workflow Anda

FDT dapat diintegrasikan ke dalam setiap alur kerja pengembangan Flash/Flex, apakah Anda ingin menggunakan FDT dalam kombinasi dengan Flash Pro, menggunakan FDT tanpa tool lain, atau menggunakan FDT sebagai editor kode untuk Flash Pro. Bab ini menjelaskan tiga alur kerja populer yang paling umum digunakan oleh developers Flash.

Workflow 1: Hanya FDT

Dalam alur kerja ini kita akan menggunakan FDT sebagai standalone tool untuk mengembangkan proyek Flash/Flex. Anda bahkan tidak perlu menginstal Flash Pro atau Adobe Creative Sweet. Kita hanya akan menggunakan FDT untuk menulis kode dan mengkompilasinya ke SWF.

Membuat Proyek Baru

Mulailah dengan mengklik kanan di suatu tempat di Flash Explorer dan pilih New > New Flash Project. "Flash Project Wizard" muncul.

Panduan ini memungkinkan Anda memilih dari daftar template proyek untuk web, seluler, dan desktop. Kita akan membuat proyek Action Script murni saat ini. Ketik nama proyek "HelloFDT", pilih Web > AS3 dan klik "Finish".

Di Flash Explorer di sebelah kiri kita sekarang melihat proyek yang dibuat dengan beberapa file dan folder. Klik dua kali kelas Main.as di folder src untuk membukanya.

FDT menyimpan beberapa pengaturan spesifik proyek dalam folder .settings dan dalam file .project. Karena Anda tidak boleh menyentuh file-file itu, mari kita sembunyikan dengan mengklik panah bawah kecil di sudut kanan atas Flash Explorer dan memilih "Filter". Sekarang periksa filter ". *" Dan tekan "OK". Folder .settings dan file .project sekarang harus disembunyikan.

Menguji dan Menyusun Proyek

Mari kita tambahkan beberapa baris kode sebelum kita mengkompilasi proyek kita:

package 
{
  import flash.display.Sprite;

	public class Main extends Sprite
	{
		public function Main()
		{
			graphics.beginFill(0x0000ff);
			graphics.drawCircle(100, 100, 40);
			trace("Hello FDT");
		}
	}
}

Untuk mengkompilasi dan men-debug aplikasi sederhana kami, klik kanan kelas Main.as di Flash Explorer dan pilih Debug As > FDT SWF Application. Setelah kompilasi selesai dengan sukses, FDT akan meluncurkan aplikasi Anda menggunakan "External SWF Viewer". Lihatlah "Console"; Anda juga harus melihat pernyataan jejak "Hello FDT" di sana. (Jika Anda tidak melihatnya, pastikan Anda menginstal Debug Flash Player.)

Aset yang Disematkan

Untuk menanamkan aset seperti gambar JPEG ke SWF, kita dapat menggunakan Tag Metadata [Embed]. Pertama-tama buat paket baru bernama aset di folder src dan seret gambar dari Finder/Explorer ke paket aset.

Sekarang kita dapat menggunakan baris kode berikut untuk menanamkan JPEG ke SWF dan menampilkannya di atas panggung:

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		[Embed(source="assets/image.jpeg")]
		private var ActiveTutsLogo : Class;

		public function Main()
		{
			var logo:Bitmap = new ActiveTutsLogo();
    		addChild(logo);
		}
	}
}

Kita sekarang dapat menggunakan tombol Debug atau Rilis di Toolbar di atas untuk meluncurkan aplikasi kita. Mereka akan selalu meluncurkan aplikasi yang diluncurkan sebelumnya. Debug aplikasi Anda menggunakan breakpoints dan trace() pernyataan hanya berfungsi jika Anda memilih Debug.

Setelah kompilasi selesai, Anda akan melihat SWF Anda dengan gambar yang disematkan. Selamat!

Workflow 2: FDT dengan Aset Flash Pro

Alur kerja ini sangat ideal jika Anda bekerja sama dengan desainer, yang membuat grafik dan animasi di Flash Pro, saat Anda menambahkan logika menggunakan ActionScript. Alur kerja ini sangat ideal jika Anda bekerja sama dengan desainer, yang membuat grafik dan animasi di Flash Pro, saat Anda menambahkan logika menggunakan ActionScript.

• Atur dan siapkan proyek dalam FDT
• Membuat file FLA baru dan MovieClip animasi di Flash Pro
• Ekspor FLA sebagai file library SWC
• Instantiate dan kontrol MovieClip menggunakan AS3 di FDT

Menyiapkan Proyek dalam FDT

Ayo mulai! Pertama-tama kita akan membuat proyek Flash baru di FDT. Untuk melakukannya, ikuti petunjuk yang sama persis seperti yang dijelaskan dalam Alur Kerja 1: FDT Only > Creating a New Project. Sebagai nama proyek saya akan menggunakan "FDTwithFlashPro" kali ini.

Membuat FLA dan MovieClip

Dalam contoh ini saya akan membuat animasi bingkai kunci yang sangat sederhana dengan bola memantul. Luncurkan Flash Pro dan buat File Flash baru (ActionScript 3). Pilih Insert > New Symbol dari menu. Masukkan nama BouncingBall dan centang kotak "Ekspor untuk ActionScript". Jika Anda tidak melihat kotak centang, klik tombol "Advanced".

Jangan lupa untuk mencentang kotak "Export for ActionScript", kalau tidak kita tidak akan dapat menggunakan aset ini nanti. Selanjutnya, saya akan membuat animasi bingkai kunci sederhana untuk membiarkan bola memantul. Seharusnya terlihat seperti ini. (Pada dasarnya Anda dapat membuat animasi apa pun yang Anda suka pada langkah ini; itu tidak harus menjadi bola memantul).

Sekarang saatnya untuk menyelamatkan FLA. Buka File > Save As dan pilih folder libs dari proyek FDT yang dibuat sebelumnya. Pilih Assets.fla sebagai nama file dan tekan "Save". Untuk menggunakan bola animasi MovieClip dalam proyek kode FDT, kita perlu mengekspor Proyek Flash Pro sebagai file pustaka SWC. Mari kita lakukan ini dengan masuk ke File > Publish Settings dan temukan kotak centang "Export SWC" di dialog publish. Klik "Publish" dan Flash Pro akan menghasilkan file SWC untuk Anda.

Menggunakan MovieClip di FDT

Sekarang mari kita kembali ke FDT. Proyek kita akan terlihat seperti ini:

Perhatikan bahwa jika Anda memperluas pustaka Assets.swc, Anda akan melihat kelas BouncingBall MovieClip yang termasuk dalam pustaka itu. Ini adalah fitur FDT yang hebat, yang memungkinkan Anda memeriksa pustaka SWC untuk melihat kelas aset yang dikandungnya.

Langkah terakhir dari alur kerja ini adalah untuk membuat animasi bola memantul dan menambahkannya ke panggung. Buka kelas Main.as dan masukkan baris kode berikut:

package 
{
	import flash.display.Sprite;
	
	public class Main extends Sprite
	{
		public function Main()
		{
			var bouncingBall:BouncingBall = new BouncingBall();
			bouncingBall.y = 200;
			addChild(bouncingBall);
		}
	}}

Itu dia! Tekan tombol "Run" dan Anda akan melihat bola memantul di atas panggung.

Alur kerja 3: FDT sebagai Editor Kode Flash Pro

Alur kerja terakhir yang ingin saya tunjukkan kepada Anda adalah menggunakan FDT sebagai editor kode untuk proyek Flash Pro. Anda akan menulis kode dalam FDT tetapi mengkompilasi proyek Anda menggunakan Flash Pro. FDT memiliki fitur hebat untuk secara otomatis beralih ke Flash Pro dan memulai kompilasi hanya dengan satu klik. Kita akan melihat penghemat waktu kecil ini juga.

Menyiapkan Proyek dalam FDT

Sekali lagi, kita akan mulai dengan membuat proyek dalam FDT. Cukup buka New > New Flash Project dan pilih Web > Flash Professional dari daftar template proyek. Atur nama proyek menjadi "FDTforFlashPro" dan klik "Finish"

FDT perlu mengetahui lokasi instalasi Flash Pro Anda. Buka Preferences > FDT > Tools > Flash dan setel path ke instalasi Flash Pro Anda dengan mengklik tombol "Browse". Pilih salinan Flash Pro Anda dan tutup jendela preferensi. Selanjutnya buka Main.as class dan tambahkan pernyataan jejak ke konstruktor seperti trace("Hello Flash Pro"). Sekarang klik dua kali file FDTforFlashPro.fla dari Flash Explorer untuk membukanya. Perhatikan, bahwa Main class sudah diatur di panel Properties di Flash Pro. Anda dapat mengklik tombol pensil untuk memverifikasi bahwa kelas benar-benar ada.

Main class sudah ada, jadi sekarang kita dapat meluncurkan proyek di Flash Pro dengan memilih Debug > Debug Movie dari menu atau dengan menggunakan pintasan. Di panel output Flash Pro Anda seharusnya sekarang melihat jejak output:

Hebat, sekarang kita bisa beralih antara FDT dan Flash Pro. Tulis beberapa baris kode dalam FDT, tambahkan kelas dan logika dan beralih ke Flash Pro untuk membuat aset dan debug proyek.

Peluncuran Dari Dalam FDT

Untuk meningkatkan alur kerja ini, ada fitur hebat di FDT, yang memungkinkan Anda beralih ke Flash Pro hanya dengan menekan tombol "Run" dari dalam FDT untuk mengkompilasi dan men-debug proyek. Dalam FDT pilih Run > Run Configurations dari menu.

Di panel Run Configurations klik dua kali entri "FDT Flash IDE" dari menu di sebelah kiri. Ini akan membuat konfigurasi kosong baru. Sekarang cukup atur proyek dan file FLA menggunakan tombol "Browse" dan pilih TestMovie. Itu saja, menekan tombol "Run" akan beralih ke Flash Pro dan akan meluncurkan proyek! Mulai sekarang, Anda cukup menekan tombol "Run" di menu bar FDT untuk meluncurkan proyek Anda di Flash Pro.

Langkah Selanjutnya

Jika Anda ingin mempelajari lebih lanjut tentang FDT dan fiturnya, kunjungi halaman FDT Documents. Anda akan menemukan banyak tutorial, video, pintasan, templat proyek, dan banyak lagi di sana. Happy coding!