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

Cara Menggunakan External Library di Proyek Flash Anda

Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called GreenSock Tweening Platform.

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

Jadi Anda telah membaca tentang Flash library yang mengagumkan, mesin, atau API, dan Anda ingin menggunakannya dalam proyek Anda sendiri. Anda download... tapi itu file aneh yang Anda tidak tahu cara menggunakannya (SWC), atau sejuta folder file AS - tidak ada yang mengatakan "klik dua kali untuk menginstal saya". Apa-apaan itu?

Library hanyalah kumpulan kelas ActionScript yang telah dirancang sehingga mereka tidak terikat pada satu proyek, dan dapat digunakan dalam apa pun yang Anda bangun. File-file kelas ini dapat dibundel menjadi file SWC tunggal, yang seperti zip.

Saya akan menggunakan MinimalComps luar biasa Keith Peters sebagai contoh, karena ini tersedia dalam format SWC dan folder. Hal yang sama berlaku untuk semua pustaka AS3, API, dan mesin, meskipun; beberapa contoh hebat lainnya adalah Box2DFlash dan Platform Greensock Tweening.

Mari kita mulai dengan melihat apa yang harus dilakukan jika Anda membuka zip dan dihadapkan dengan file kelas mentah:


Jutaan Folder File AS

Setiap file AS, seperti yang Anda tahu, berisi kelas (oke, mungkin mengandung beberapa kelas, atau interface, tetapi bekerjalah dengan saya di sini). Anda harus dapat mengakses kelas-kelas ini dari proyek Anda, tetapi Anda juga perlu kelas-kelas untuk dapat saling mengakses, karena banyak dari mereka hampir pasti akan mewarisi atau terdiri dari kelas-kelas lain di library. Ini berarti Anda tidak bisa hanya mengambil beberapa kelas, mengekstraknya ke folder proyek Anda, dan berharap mereka berfungsi.

Buka salah satu file, dan lihat deklarasi package. Misalnya, di zip minimcomps, di file /src/com/bit101/components/Accordion.as, deklarasi package adalah:

Lihat bagaimana ini terkait dengan struktur folder? /src/com/bit101/components/Accordion.as. (Dan kelas dalam file tersebut disebut Accordion.)

Bukan hanya Keith Peters yang rapi dan teratur. Saat Anda mengetik garis seperti:

...Flash mencari file bernama Accordion.as dalam struktur folder /com/bit101/components/. Paket harus sesuai dengan struktur folder, sehingga Flash dapat menemukan file; jika Anda memindahkan Accordion.as ke folder lain, seperti /com/bit101/charts/, dan coba lakukan:

...Anda akan mendapatkan pesan error:

Masuk akal. Jadi, package kelas memberi tahu Anda folder mana yang merupakan folder root dari library; itu kata pertama sebelum titik pertama dalam nama package -- com dalam kasus ini. Ini berarti Anda harus memindahkan /com/ folder, dan semua sub-foldernya, ke direktori kode utama proyek Anda.


Apa itu Direktori Kode Utama?

Tips: Anda akan sering menemukan bahwa folder root untuk pustaka disebut /com/ atau /net/ atau /org/, karena itu adalah konvensi umum untuk menggunakan nama domain Anda (secara terbalik) sebagai struktur paket. Misalnya, http://active.tutsplus.com jadi jika kita merilis library, package akan memulai com.tutsplus.active. Jika semua orang menempel pada nama domain mereka sendiri, maka tidak ada yang khawatir tentang siapa pun yang secara tidak sengaja membuat library dengan nama paket yang sama dengan library orang lain. Namun, ini bukan konvensi universal; pustaka Box2D atau Greensock tidak menggunakannya.

Direktori kode utama adalah istilah yang saya gunakan untuk merujuk ke folder tempat Flash mencari file AS Anda (dan folder yang berisi file AS).

Jika Anda menggunakan Flash Professional, maka, secara default, ini akan menjadi folder tempat FLA Anda berada. Namun, Anda dapat mengubahnya; lihat Tip Singkat Daniel Apt, Cara Mengatur File Proyek Flash Anda, untuk info lebih lanjut.

Jika Anda menggunakan editor Flash lain maka folder itu bisa disebut apa saja -- tetapi mungkin akan ada folder bernama /src/ atau /source/ atau /code/ atau yang serupa, sehingga Anda bisa mengetahuinya. (Jika semuanya gagal, cukup buat file AS baru dan lihat apa lokasi penyimpanan defaultnya.)

Cobalah -- download MinimalComps, ekstrak zip, dan salin folder yang benar ke direktori kode utama proyek Anda. Kemudian, import com.bit101.components.Accordion; dan buat new Accordion() di suatu tempat di proyek Anda. Jika Anda tidak melihat pesan error, maka Anda melakukannya dengan benar!


Global Classpaths

Bagaimana jika Anda menemukan library yang sangat berguna sehingga Anda ingin itu tersedia untuk semua proyek Anda secara default, tanpa harus copy dan paste folder root ke direktori kode utama setiap proyek baru?

Untuk ini, Anda dapat menggunakan global classpaths. Jika Anda menentukan folder pada hard drive Anda sebagai global classpaths, Anda memberi tahu Flash untuk selalu mencari kelas di sana, juga di direktori kode utama proyek.

Misalkan Anda membuat direktori C:\FlashLibraries\ (Pengguna Mac: alih-alih gunakan Macintosh HD / FlashLibraries), dengan subdirektori MinimalComps, dan salin folder /com/ dari zip MinimalComps ke direktori MinimalComps ini. File kelas Accordion akan berada di C:\FlashLibraries\MinimalComps\com\bit101\components\Accordion.as. Anda kemudian dapat menetapkan C:\FlashLibraries\MinimalComps\ sebagai global classpath, dan sejak saat itu, setiap proyek Flash yang Anda buka akan dapat dijalankan:

...tanpa masalah. Dan karena Flash hanya mengkompilasi kelas yang benar-benar digunakan dalam proyek Anda, itu tidak akan melengkapi SWF Anda dengan perpustakaan di global classpath Anda yang tidak digunakan.

Anda bahkan dapat mengekstrak semua kelas kode root dari semua libraries Anda ke kelas global yang sama - yaitu, Anda dapat mengatur C:\FlashLibraries\ sebagai kelas global, dan kemudian salin folder /com/ dari MinimalComps ke folder ini. , jadi kelas Accordion akan berada di C:\FlashLibraries\com\bit101\components\Accordion.as. (Namun, ini mungkin tidak sepadan dengan usaha; jika Anda download library Activetuts + imajiner, itu akan berada di C:\FlashLibraries\com\tutsplus\active\, yang berarti bahwa /com/ folder akan mengandung a /bit101/ folder dan /tutsplus/ folder. Itu bukan masalah, tetapi itu menjadi berantakan, dan dapat membuatnya sangat sulit untuk menghapus satu library nanti.)


Cara Mengatur Global Classpath

Di Flash CS3, klik Edit | Preferences, lalu klik kategori ActionScript, dan pilih ActionScript 3.0 Settings. Anda akan melihat daftar folder. Klik tanda Plus untuk menambahkan yang baru; Anda dapat mengetik lokasi, atau tekan target untuk menjelajahinya.

Di versi Flash Professional yang lebih baru, ada sedikit lebih dari itu. Klik Edit | Preferensi, lalu pilih kategori ActionScript dan klik ActionScript 3.0 Settings seperti sebelumnya. Formulir entri sedikit berbeda:

Kali ini, gunakan bagian Source path untuk mengatur global classpaths. Gunakan tanda Plus untuk menambahkan entri baru, dan ikon folder untuk menelusuri ke folder.

Jika Anda menggunakan development environment yang berbeda, pengaturan global classpath akan berada di tempat lain. Misalnya, di FlashDevelop, pilih Project | Properti, lalu tab Classpaths, dan klik Edit Global Classpaths....


Classpath Tingkat Proyek atau Dokumen

Apa yang Anda lakukan jika developer library merilis versi baru? Anda dapat men-download ke classpath global, menimpa versi sebelumnya, dan mulai menggunakannya dalam proyek terbaru Anda. Tetapi kemudian jika Anda membuka salah satu proyek lama Anda -- yang menggunakan versi library sebelumnya -- Anda akan mengalami segala macam masalah ketidakcocokan.

Anda dapat menyelesaikan ini dengan memiliki satu folder untuk setiap versi library: C:\FlashLibraries\MinimalComps\v1\C:\FlashLibraries\MinimalComps\v2\C:\FlashLibraries\MinimalComps\v2.5\C:\FlashLibraries\MinimalComps\v3\,... dan seterusnya. Kemudian, setiap kali Anda membuka proyek, Anda akan membuat global classpath baru sebagai folder untuk versi library yang dibutuhkan proyek Anda, dan menghapus yang lainnya.

Itu bekerja, tapi ini workflow yang mengerikan. Sebagai gantinya, Anda dapat mengatur classpath yang khusus untuk satu proyek.


Cara Mengatur Proyek atau Classpath Level Dokumen

Di Flash Professional CS3 dan di atasnya, setelah Anda membuka FLA, klik File | Publish Settings, lalu pilih tab Flash, dan klik Settings disebelah ActionScript 3.0. Di Flash CS3, dialognya terlihat seperti ini:

Sama seperti saat mengatur jalur kelas global, Anda dapat menggunakan tombol Plus untuk menambahkan entri baru, dan ikon Target untuk menelusuri folder. Di versi Flash selanjutnya, dialog memiliki lebih dari itu:

Jangan khawatir tentang tab lain; cukup gunakan tab Source path untuk menambahkan classpath yang Anda inginkan.

Sekali lagi, development environments yang berbeda akan menyimpan pengaturan ini di tempat yang berbeda. Untuk menambahkan classpath proyek di FlashDevelop, pilih Project | Properties, lalu tab Classpaths, dan klik Add Classpath....


Jalur Relatif

Bayangkan Anda sedang membangun game Flash yang memiliki versi yang sedikit berbeda untuk portal game yang berbeda dan editor level yang terpisah. Struktur folder Anda mungkin terlihat seperti ini:

Sekarang anggaplah Anda ingin menggunakan MinimalComps di semua versi game Anda, dan di editor level Anda -- bukan sembarang versi MinimalComps, tetapi khususnya versi terbaru, di setiap proyek. Sementara itu, Anda memiliki proyek lain yang ditulis dengan versi MinimalComps lama, jadi Anda tidak ingin menggunakan global classpath.

Anda dapat membuat folder baru di dalam folder base game Anda:

...dan kemudian salin folder root perpustakaan langsung ke sana, sehingga kelas Accordion akan berada di C:\MyAwesomeGame\libraries\com\bit101\components\Accordion.as.

Sekarang, Anda tahu bahwa Anda dapat mengatur classpath level proyek atau dokumen di setiap versi game yang berbeda, dan editor level, untuk menunjuk ke C:\MyAwesomeGame\libraries\, tetapi bagaimana jika Anda perlu berbagi semua game file dengan orang lain - - mungkin seluruh tim? Mereka harus memastikan struktur folder mereka cocok dengan Anda dengan tepat, atau melalui setiap proyek dan mengubah jalur kelas agar sesuai dengan komputer mereka, setiap kali mereka mendapatkan versi terbaru. Sungguh merepotkan!

Sebagai gantinya, Anda dapat menggunakan relative classpath. Dengan asumsi direktori kode utama editor level adalah /levelEditor/, maka jika Anda menetapkan classpath dari ../libraries/ itu akan terlihat di folder yang benar. Mengapa? Karena ../ berarti "direktori di atas yang sekarang".

Ini artinya Anda bisa menggunakan ../libraries/ untuk semua versi game Anda, dan semuanya akan menunjuk ke direktori yang sama. Dan kemudian, ketika Anda membagikan kode dengan rekan tim Anda, Anda dapat memberi mereka seluruh folder /MyAwesomeGame/ dan itu akan berisi semua yang mereka butuhkan. Ada sedikit yang harus Anda ingat untuk dilakukan -- tidak perlu mengubah jalur kelas atau menyalin setiap versi baru library ke berbagai folder yang berbeda -- sehingga ada sedikit peluang untuk membuat kesalahan sederhana. Hebat!

(Anda dapat mengambil ini lebih jauh dan meletakkan semua kode yang dibagikan berbagai versi game dalam folder C:\MyAwesomeGame\shared\... tapi itu semakin menjauh dari topik artikel ini!)

Anda dapat membuat sarang direktori khusus ../, juga: ../../ naik dua direktori alih-alih hanya satu, dan seterusnya. Anda juga dapat menggunakan ./ untuk merujuk ke "direktori saat ini".


File SWC

Seperti yang saya katakan, file SWC pada dasarnya adalah file zip yang berisi kelas ActionScript dan data lainnya. Misalnya, dalam panduan FlashDevelop saya, saya menjelaskan cara mengekspor aset perpustakaan, dibuat di Flash Professional, sebagai SWC sehingga dapat digunakan dalam workflow lain. Dimungkinkan untuk melakukan hal yang sama dengan kelas berbasis kode murni.

Saya tidak akan menjelaskan cara membuat SWC di sini, tetapi saya akan menjelaskan dua manfaat utama bagi developers libraries:

  1. Seluruh library (termasuk aset grafis) dapat dimuat dalam satu file.
  2. Isi dari masing-masing kelas (mis. File AS) tidak dapat dilihat atau dimodifikasi.

Anda masih memiliki pilihan untuk menggunakan pustaka SWC dalam satu proyek, di semua proyek Anda, atau dibagikan di antara beberapa di antaranya, meskipun cara untuk memasukkannya dalam proyek Anda sedikit berbeda dari ketika Anda memiliki file kelas yang sebenarnya.


Menggunakan Libraries SWC dalam Proyek Anda

Flash Professional CS3 memiliki beberapa batasan utama dalam menggunakan library SWC: ia tidak dapat menggunakan SWC yang hanya kumpulan file kelas. Jika SWC berisi components, Anda dapat memindahkannya ke direktori /Components/ pada hard drive Anda, dan kemudian (dalam Flash) seret dari panel Components ke library atau stage Anda. Direktori ini di C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\ secara default di Windows, dan Macintosh HD / Applications / Adobe Flash CS3 / Configuration / Components secara default di Mac OS X.

Anda dapat menyalin components SWC ke folder yang setara di Flash Professional CS4 + jika Anda ingin mengaksesnya melalui panel Components. Untuk SWC yang terdiri dari kelas kode, Anda juga dapat mengaturnya sebagai global classpath atau dokumen atau jalur kelas tingkat proyek.

Untuk mengatur classpath global, klik Edit | Preferences, lalu pilih kategori ActionScript dan klik ActionScript 3.0 Settings seperti sebelumnya. Anda akan melihat dialog ini:

Tambahkan lokasi SWC Anda ke Library path. Seperti yang disarankan oleh dialog, Anda dapat meletakkan beberapa SWC di folder yang sama dan arahkan saja ke folder itu.

(Kotak External library path dapat digunakan untuk menentukan pustaka SWC yang harus dimuat saat runtime, daripada ketika komponen dikompilasi. Jika Anda memiliki sejumlah besar kode dan aset yang dibagi di antara proyek Anda, Anda dapat mengurangi waktu pemuatan untuk pengguna Anda dengan meletakkan semua sumber bersama dalam file SWC dan menggunakannya sebagai external library, maka pengguna hanya perlu download satu kali dan kemudian dapat menggunakannya di setiap proyek Anda yang lain. Ini mungkin bukan yang ingin Anda lakukan dengan library yang telah Anda download!)

Untuk mengatur SWC tingkat dokumen dalam Flash Pro CS4 dan yang lebih tinggi, begitu Anda membuka FLA, klik File | Publish Settings, lalu pilih tab Flash, dan klik Settings di sebelah ActionScript 3.0. Beralih ke tab Library path. Dialognya terlihat seperti ini:

Anda dapat menggunakan relative paths di sini, seperti ketika Anda memiliki file kelas individual.

Development environments yang berbeda akan memiliki cara berbeda untuk mengimpor SWC. Untuk info tentang cara menggunakan SWC di FlashDevelop, lihat panduan saya.

Saya harap itu membantu! Sekarang, ketika sebuah tutorial mengatakan, "download library ini", Anda harus tahu persis apa yang harus dilakukan :) Beritahu saya jika ada sesuatu yang tidak jelas dan saya akan menjelaskannya untuk Anda.

Advertisement
Advertisement
Advertisement
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.