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

Membuat Komponen Flash untuk Distribusi

by
Difficulty:IntermediateLength:LongLanguages:

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

Selama tutorial ini saya akan menjelaskan cara membuat komponen User Interface (UI) berbasis FLA. Seperti komponen yang datang dengan Flash, itu akan terlihat di atas panggung, pratinjau kemudian diperbarui secara otomatis saat Anda mengubah parameternya. Contoh khusus ini adalah bilah kemajuan melingkar.


Pratinjau

Beginilah tampilan komponen kami. Klik contoh untuk melihatnya berfungsi dengan nilai acak:

Tapi kami tidak fokus pada hasil SWF dalam tutorial ini. Untuk melihat komponen itu sendiri dan mengubah kulitnya, unduh file zip, ekstrak, dan jalankan RoundProgress.mxp untuk menginstalnya. (Anda mungkin harus mengunduh Adobe Extension Manager terlebih dahulu.)


Langkah 1: Konfigurasikan Flash untuk komponen UIC

UIComponent adalah kelas dasar dari semua komponen Flash. Semua komponen Antarmuka Pengguna yang sudah ada dalam Flash (seperti ColorPicker, Kotak Centang, dan sebagainya) memperluas komponen UIC (atau memperluas beberapa kelas yang memperluas komponen UIC); alasannya karena komponen UIC memudahkan pengembang untuk membiarkan komponennya "dikuliti".

Saat digunakan, kelas UIComponent menciptakan kembali objek, menghapus semua yang ada di atas panggung dan menambahkan skin. Ini penting untuk personalisasi komponen; pengguna cukup mengklik dua kali komponen dan mengeditnya secara visual, dengan Flash. Anda cukup membuat avatar komponen pada Frame 1 dan skin pada Frame 2, dan kelas UIComponent melakukan sisanya.

Anda dapat melakukan semua ini secara manual, tetapi jauh lebih baik menggunakan komponen UIC - Anda akan tahu alasannya.

Saya telah menjelaskan apa itu UIComponent dan apa fungsinya, tetapi Anda harus mengkonfigurasi classpath untuk UIComponent karena tidak dikonfigurasi secara default. Jadi, beberapa langkah harus diikuti:

  1. Buka Edit> Preferensi (atau Ctrl + U)
  2. Klik ActionScript di Kategori
  3. Klik Pengaturan ActionScript 3.0
  4. Di mana Anda memiliki "Jalur sumber", klik tombol "+" dan tambahkan $(AppConfig)/Component Source/ActionScript 3.0/User Interface
  5. Klik OK sampai Anda menutup semua jendela Preferensi.

Langkah 2: File Flash Actionscript 3.0 Baru

Mari kita mulai dengan membuat file AS3 Flash baru. Simpan sebagai RoundProgress.fla, di mana pun Anda inginkan (contoh: C:\RoundProgress \)


Langkah 3: Siapkan Folder

Kami akan menganggap paket org.display untuk komponen kami, jadi di folder yang sama dengan yang Anda simpan RoundProgress.fla, buat folder dengan subfolder, /org/display (contoh: c:\roundprogress\org\display\)

Di sinilah kami akan menyimpan file ActionScript komponen kami. Ini hanya digunakan untuk membuat komponen atau mengeditnya; Anda tidak akan memberikan pengguna akhir file .as.


Langkah 4: Konfigurasikan Folder Perpustakaan

Ketika kami membuat komponen untuk Flash, organisasi perpustakaan sangat penting (mungkin bahkan lebih dari biasanya). Ketika Anda menyeret komponen ke tahap proyek, aset perpustakaannya akan secara otomatis ditambahkan ke perpustakaan proyek, jadi tetap terorganisir.

Buat folder di perpustakaan yang disebut RoundProgress Assets.

Di dalam folder ini buat dua folder lain, Skins dan _private.


Langkah 5: Buat Objek RoundProgress

Klik Insert > New Symbol. Untuk nama: RoundProgress; jenis: Klip Video; tautan: periksa opsi "Ekspor untuk ActionScript" dan "Ekspor dalam bingkai 1"; untuk kelas: org.display.RoundProgress; kelas dasar: flash.display.MovieClip (meskipun itu akan berubah ketika kita membuat file .as untuk objek ini).


Langkah 6: Definisi Komponen

Mari kita memperlakukan objek RoundProgress sebagai Komponen. Untuk melakukan ini, buka perpustakaan, klik kanan pada objek RoundProgress dan klik "Definisi Komponen".

Di jendela yang terbuka, di bidang kelas masukkan: org.display.RoundProgress (kami akan membuat kelas ini nanti); di panel opsi, periksa semua opsi, dan untuk Edit Frame ketik "2" (sebenarnya tidak relevan). Bidang yang paling penting di sini adalah "Tampilan di panel Komponen": opsi ini memungkinkan komponen ditampilkan di panel komponen saat Anda menerbitkannya (kami akan melihatnya nanti).

Sejauh ini yang kita miliki di perpustakaan kita objek "RoundProgress" sebagai Komponen dan folder "RoundProgress Asset" dengan subfolder "Skins" dan "_private."


Langkah 7: Konfigurasikan Timeline

Karena kita akan menggunakan komponen UIC, kita akan membutuhkan tiga layer dan dua frame pada setiap layer. Kami membutuhkan dua frame karena UIComponent menggunakan dimensi dari frame pertama untuk menentukan ukuran komponen, dan menggunakan frame kedua untuk Skin Editing.

Di perpustakaan, klik dua kali komponen RoundProgress untuk membukanya sebagai klip video.

Di timeline, tambahkan dua layer baru, ganti nama layer teratas menjadi "Avatar", layer tengah menjadi "Skins" dan layer bawah menjadi "Shim."

Juga buat keyframe kosong baru untuk setiap layer (pilih Frame 2 dan tekan F7). Seharusnya sekarang terlihat seperti gambar:


Langkah 8: Avatar

Tidak, bukan film, Avatar adalah objek yang diambil oleh UIComponent sebagai ukuran objek, lalu dihapus. Mari kita buat persegi dengan latar belakang putih dan garis hitam (garis rambut).

Pilih kotak dan konversikan ke klip video (Ubah> Konversikan ke Simbol), dengan jenis: Klip Video, dan nama: RoundProgressAvatar. Penting bahwa titik registrasi diatur ke kiri atas; nama itu sama sekali tidak relevan.

Pergi ke perpustakaan lagi dan seret RoundProgressAvatar ke folder "_private" di dalam "RoundProgress Asset."

Kemudian, klik dua kali pada komponen RoundProgress lagi untuk mengeditnya, pilih Frame 1 dan layer Avatar, dan seret instance RoundProgressAvatar ke atas panggung (sehingga akan berada di Frame 1, pada layer Avatar pada komponen RoundProgress) . Atur posisinya ke x: 0 dan y: 0.


Langkah 9: Buat Latar Belakang

Latar belakang akan menjadi salah satu skin yang akan kita buat, itu akan menjadi latar belakang komponen RoundProgress kita.

Buat klip video baru (Sisipkan> Simbol Baru):

Untuk namanya kita akan menggunakan "RoundProgressBarBackground"; centang "Ekspor untuk ActionScript" dan "Ekspor dalam bingkai 1"; untuk kelas kita akan menggunakan "RoundProgressBarBackground" seperti namanya; dan untuk kelas dasar, karena kita tidak akan menggunakan animasi kita akan menggunakan "flash.display.Sprite" (tetapi jika Anda menggunakan flash.display.MovieClip itu akan bekerja juga).


Langkah 10: Gambarkan Latar Belakang

Dengan asumsi pada langkah terakhir Anda membiarkan objek RoundProgressBarBackground terbuka (jika tidak, klik dua kali di perpustakaan untuk membukanya lagi), mari kita menggambar sebuah cincin. Pertama, gambar sebuah lingkaran dengan diameter 150px.

Luruskan ke atas dan kiri (Window> Align); posisinya akan x: 0 dan y: 0.

Jika Anda menyalin dan menempel-di-tempat (menggunakan Ctrl + Shift + V) Anda akan membuat salinan lingkaran, tetapi jangan batalkan pilihannya, cukup ubah ukurannya untuk membuatnya sedikit lebih kecil daripada lingkaran lainnya. Kemudian ubah warnanya, semua tanpa membatalkan pilihan salinan lingkaran. Setelah ini, Anda dapat membatalkan pilihannya, sehingga Anda akan mendapatkan lingkaran di dalam lingkaran lain, lalu Anda dapat memilih lingkaran yang lebih kecil (yang akan memiliki warna lain) dan menghapusnya, sehingga Anda akan dibiarkan dengan cincin.

Ubah alfa warnanya menjadi 20%.

Sekarang Anda dapat keluar dari mode Edit objek RoundProgressBarBackground.

Buka perpustakaan dan seret RoundProgressBarBackground yang telah kami buat ke folder RoundProgress Assets / Skins.


Langkah 11: Buat Wajah

Wajah adalah salinan latar belakang, tetapi dengan alfa warna diatur ke 100%; itu harus memiliki lebar dan ketinggian yang sama dari Background ...

Buka perpustakaan, klik kanan RoundProgressBarBackground dan klik "Duplikat". Ini akan membuat objek lain seperti RoundProgressBarBackground; untuk nama penggunaan ini RoundProgressBarFace, untuk jenis: MovieClip, periksa opsi "Ekspor untuk ActionScript" dan "Ekspor pada bingkai 1", untuk penggunaan kelas "RoundProgressBarFace", dan karena kita tidak memiliki animasi mengatur kelas dasar ke "flash.display.Sprite."

Masuk ke mode edit (di perpustakaan klik dua kali objek) dan atur warnanya alpha menjadi 100%.

Jika belum ada di sana, seret objek RoundProgressBarFace ke folder RoundProgress Asset / Skins.

Sejauh ini yang kita miliki di perpustakaan kita komponen RoundProgress, RoundProgressAvatar di folder _private dan RoundProgressBarBackdround dan RoundProgressBarFace di folder Skins.


Langkah 12: File RoundProgress.as

OK, desain sudah siap, sekarang kita akan memulai pekerjaan kotor, kode ... Pertama buat File Actionscript baru

Simpan sebagai RoundProgress.as di folder org / tampilan yang dibuat di awal tutorial, dan mari mulai mengkodekannya.


Langkah 13: Paket dan Impor

Mari kita buat paket dan impor kelas yang diperlukan.

Karena kami ingin menggunakan paket org.display, kami menyimpan RoundProgress.as kami di dalam folder org / display, jadi paketnya adalah org.display.

Kami mengimpor kelas fl.core.UIComponent, yang akan kami perpanjang. Ini akan menjadi basis dari komponen kami dan kelas Sprite akan menjadi topeng.


Langkah 14: Buat Kelas

Sekarang kita akan membuat Kelas, memperluas Kelas UIComponent.


Langkah 15: variabel

Selanjutnya, kami membuat variabel yang digunakan di RoundProgress

_Face dan _background akan menjadi kulit untuk wajah dan latar belakang; kami akan menggunakan Sprite untuk ini. The _mask akan menjadi Sprite kosong, const RAD hanyalah faktor konversi dari derajat ke radian, dan _ratio adalah nilai kemajuan saat ini, yang berkisar dari 0 hingga 1.


Langkah 16: Mengganti configUI ()

Fungsi configUI () yang dilindungi berasal dari kelas UIComponent; ini disebut ketika objek dibuat - hampir seperti fungsi konstruktor, tetapi ia menghapus semuanya dari atas panggung, jadi Anda harus membuat ulang semuanya.

Karena kita meng-override fungsi configUI (), kita perlu memanggilnya di kelas kita. Jika tidak, skrip kami akan berjalan tetapi tidak ada yang akan dihapus dari panggung, jadi Avatar kami akan ada di sana saat kami menggunakan komponen. Kami memanggil metode configUI () superclass dengan menggunakan super.configUI ():

Perhatikan bahwa karena fungsi addChild () mengembalikan DisplayObject, kita dapat membuat instance objek ketika kita membuatnya dan melemparkannya sebagai apa pun yang kita inginkan (dalam hal ini saya melemparkannya sebagai Sprite). Dalam satu baris saya membuat objek, melemparkannya sebagai Sprite dan menambahkan objek kami.


Langkah 17: Metode menggambar ()

Metode menggambar () juga dari komponen UIC; itu disebut ketika sebuah properti diubah dalam file FLA kami dan memperbarui pratinjau langsung dari komponen. Ini memungkinkan pengguna melihat bagaimana komponen akan berubah di panggung, daripada harus mengkompilasi SWF. Kita akan menimpanya sehingga ketika kita mengubah nilai metode draw akan dipanggil.

Jangan terlalu khawatir tentang kode ini. Seperti yang saya katakan sebelumnya, ini bukan fokus dari tutorial.


Langkah 18: Membuat Properti Rasio

Nah, di sini kita buat properti rasio. Ini seperti variabel, tetapi ini adalah fungsi: kami menggunakan tag [Inspectable] segera sebelum definisi fungsi sehingga properti ini dapat diubah menggunakan "Component Inspector" ketika kami menggunakannya dalam Flash.

Mari kita mulai dengan [Inspectable]. Kami memiliki beberapa parameter yang dapat digunakan, seperti defaultValue, nama, dan beberapa lainnya. Jika menggunakan defaultValue maka Flash akan menggunakannya sebagai nilai default di inspektur komponen (di mana kita dapat mengubah parameter); parameter nama menentukan bagaimana akan muncul di inspektur komponen, tetapi tidak perlu. Jika Anda ingin menetapkan nama lain untuk ini, misalnya Anda dapat menggunakan [Inspectable (name = "MyCustomName", defaultValue = 0)]. Anda juga dapat mengatur Type (Number, String), tetapi seperti yang diatur dalam properti rasio kami ini tidak diperlukan.


Langkah 19: Fungsi setProgress()

Mari menambahkan fungsi untuk mengatur kemajuan, Anda dapat menggunakan nilai saat ini dan nilai maksimal.


Langkah 20: Persen Properti

Properti persen seperti properti rasio, tetapi alih-alih nilai antara 0 dan 1 Anda akan menggunakan 0 hingga 100. Ini adalah perhitungan persentase, ini juga mengembalikan nilai float antara 0 dan 100:

Simpan dokumen Anda (ingat, di /org/display/RoundProgress.as jika Anda belum menyimpannya).


Langkah 21: Pratinjau Langsung

Tidak, ini belum selesai. Jika kita menyeret komponen kita ke panggung sekarang, itu akan muncul sebagai kotak putih dengan garis hitam, tetapi jika kita menguji film kita itu akan menampilkan komponen. Ini karena kami belum membuat "pratinjau langsung" - pratinjau langsung dapat memvisualisasikan SWF dari komponen, dan ketika kami mengatur properti itu akan menyesuaikan dan memperbarui secara visual juga. Jika kami tidak memiliki pratinjau langsung, hanya avatar yang akan ditampilkan.

Mari buat pratinjau langsung kami; ada dua cara yang saya tahu untuk membuat pratinjau langsung, jadi saya akan menjelaskan satu yang berfungsi dengan baik untuk saya.

Di perpustakaan RoundProgress.fla, klik kanan atas komponen RoundProgress, klik "Ekspor SWC" dan ekspor di folder yang sama dari file RoundProgress.fla. File .swc adalah file zip, jadi Anda bisa membukanya dengan WinRAR atau yang serupa. Atau, Anda dapat mengganti nama ekstensi menjadi ".zip" dan membukanya seperti itu.

Buka .swc seperti di atas dan Anda akan melihat beberapa file. Salah satunya adalah library.swf; ekstrak library.swf ke folder yang sama dengan file .fla.


Langkah 22: Menerapkan Pratinjau Langsung

Kembali ke lingkungan pembuat Flash. Dalam file RoundProgress.fla, buka perpustakaan, klik kanan pada komponen RoundProgress dan klik opsi "Definisi Komponen".

Dalam Definisi Komponen, perhatikan bahwa dalam Parameter sekarang kita memiliki rasio parameter, yang merupakan variabel "rasio" dan nilai "0" - ini adalah [Inspectable] yang telah kita tentukan dengan defaultValue = 0 (parameter lain berasal dari Kelas komponen UIC). Mungkin belum dikonfigurasi; jika tidak, Anda perlu membuka panel Component Definition dan klik OK untuk memperbarui ini, setiap kali Anda membuat perubahan pada file .as.

Sekarang klik tombol "Set ..." di bagian Live Preview.

Di jendela ini yang terbuka, pilih opsi "Pratinjau langsung dengan .swf tertanam dalam file .fla", dan klik Browse:

... lalu pilih library.swf yang kami ekstrak dari file .swc.

Jika Anda menyeret komponen RoundProgress ke atas panggung, Anda seharusnya dapat melihat "pratinjau langsung". Coba ubah nilai "rasio" di Inspektur Komponen.


Langkah 23: ComponentShim

Sejauh ini, kami telah membuat komponen dan itu sudah bekerja dengan pratinjau langsung, tetapi jika Anda ingin mendistribusikan komponen Anda sebagai file .mxp, Anda harus mengirim file .as dalam file .mxp. Mungkin Anda tidak ingin orang memiliki akses ke file .as Anda, atau, jika Anda memiliki banyak file .as, mungkin Anda akan merasa bosan untuk membuat file .mxi (penjelasan nanti). Hal terbaik yang dapat Anda lakukan adalah menyematkan file .as di dalam file .fla dalam klip yang dikompilasi, yang kita sebut ComponentShim.

Perhatikan bahwa jika Anda menyeret komponen Antarmuka Pengguna apa pun ke atas panggung akan ada objek ComponentShim. Sebagai contoh, lihat di perpustakaan di Komponen Aset / _private - yang merupakan klip dikompilasi, tetapi kami tidak akan menggunakan ini, kami akan membuat milik kami.

Alasan lain yang baik untuk menggunakan shim compile clip adalah karena sudah dikompilasi, jadi ketika Anda mengkompilasi .swf Anda hanya akan ditambahkan, tidak dikompilasi ulang, memberikan kompilasi yang lebih cepat.

Mari kita mulai dengan membuat file .fla lain dan menyimpannya dengan nama "RoundProgressShim.fla" di folder yang sama dengan "RoundProgress.fla."

Dalam dokumen RoundProgressShim.fla, buka perpustakaan.

Untuk setiap komponen yang memiliki file .as eksternal Anda dapat membuat objek baru di RoundProgressShim.fla. Karena kita hanya memiliki satu komponen dengan satu file .as, kita akan membuat shim untuk komponen ini saja.

Buat Simbol baru di perpustakaan, itu harus bertipe Movie Clip dan untuk namanya pilih nama yang sama dengan komponen kami (dalam hal ini RoundProgress). Periksa opsi "Ekspor untuk ActionScript" dan "Ekspor dalam bingkai 1"; untuk kelas kita akan menggunakan nama komponen, jadi gunakan "org.display.RoundProgress."

OK, ini adalah referensi kami untuk objek org.display.RoundProgress (kami membutuhkan satu referensi untuk setiap komponen).

Sekarang kita buat sumber shim. Buka pustaka lagi di RoundProgressShim.fla, dan buat Simbol baru bernama "Sumber RoundProgressShim". Periksa opsi "Ekspor untuk ActionScript" dan "Ekspor dalam bingkai 1"; untuk kelasnya gunakan org.display.RoundProgressShim (ini tidak relevan); untuk kelas dasarnya menggunakan flash.display.Sprite. Perhatikan bahwa nama dan kelas tidak ada, sungguh, tetapi ini akan menjadi klip kompilasi kami, jadi untuk menghindari konflik, nama dan kelasnya tidak sama dengan komponen kami ...

Sekarang di perpustakaan, klik kanan pada "sumber RoundProgressShim" dan pilih "Konversi ke Klip Terkompilasi"; sekarang kita akan memiliki satu objek lagi di perpustakaan yang disebut "sumber RoundProgressShim SWF". Ubah nama menjadi "RoundProgressShim".

OK, ComponentShim kustom kami dibuat, simpan saja RoundProgressShim.fla di folder yang sama dengan RoundProgress.fla, dan tutup RoundProgressShim.fla.


Langkah 24: Menggunakan RoundProgressShim

Kembali ke dokumen RoundProgress.fla kami, klik File> Impor dan klik "Buka perpustakaan eksternal" (Ctrl + Shift + O), cari dan pilih RoundProgressShim.fla dan buka sebagai perpustakaan.

Letakkan dua pustaka berdampingan, pustaka RoundProgress.fla dan pustaka RoundProgressShim.fla.

Sekarang seret objek RoundProgressShim dari pustaka RoundProgressShim.fla ke folder RoundProgress Asset / _private di pustaka RoundProgress.fla.

... dan sekarang Anda dapat menutup perpustakaan RoundProgressShim.fla.

Masuk ke mode edit komponen RoundProgress lagi (klik dua kali pada objek RoundProgress di perpustakaan), pilih layer Shim, dan pergi ke Frame 2.

Sekarang cukup seret RoundProgressShim dari RoundProgress Assets / _private di perpustakaan ke atas panggung.

OKE, sekarang komponen kami siap digunakan. Simpan dan mari pelajari cara mengemasnya menjadi file .mxp, siap didistribusikan.


Langkah 25: Buat File XML .mxi

Buat file XML baru di luar Flash, Anda dapat menggunakan Dreamweaver untuk ini, atau bahkan notepad. Saya akan menggunakan Dreamweaver.

Simpan sebagai "RoundProgress.mxi" di folder yang sama dengan RoundProgress.as. Sangat penting Anda mendefinisikan jenis (.mxi), atau Anda akan menyimpan hanya sebagai file .xml yang tidak baik bagi kami.

Salin XML yang saya buat untuk tutorial ini dan rekatkan ke RoundProgress.mxi Anda:

Mari kita uraikan file XML: baris pertama adalah di mana kita menetapkan nama komponen kita (ini hanya untuk Manajer Ekstensi Adobe, bukan untuk Flash) versi dan jenisnya (yaitu Library; untuk tipe lain periksa Ekstensi Adobe Manual manajer).

Tag penulis adalah untuk menentukan pembuat paket. Sekali lagi, ini hanya untuk manajer ekstensi.

Tag produk menentukan produk untuk komponen Anda. Dalam kasus kami ini untuk Flash CS3 atau CS4, jadi untuk nama kami menggunakan "Flash", versi menjadi "9" (CS3).

Tag deskripsi untuk deskripsi di Adobe Extension Manager. Tidak boleh nol, tetapi Anda dapat menulis apa pun di sana. Tag CDATA memberi tahu kita bahwa kita dapat memiliki kode HTML di dalamnya sehingga tidak akan mencoba untuk dibaca sebagai xml.

Di dalam tag akses ui Anda dapat menentukan cara menggunakan komponen Anda, cara mengaksesnya di alat pembuat Flash.

Tag file berisi daftar file yang akan disalin ke folder konfigurasi Flash. Dalam kasus kami, kami hanya akan menyalin RoundProgress.fla, karena kami membuat RoundProgressShim, kami tidak perlu menyalin org / display / RoundProgress.as juga. Jika Anda memiliki lebih banyak file untuk disalin, Anda dapat menentukannya di dalam tag file (karenanya mengapa memiliki banyak file AS dapat membuat langkah ini membosankan!)


Langkah 26: Kemas MXI ke dalam MXP

File .mxi hanya memberikan instruksi tentang bagaimana Adobe Extension Manager harus membuat file .mxp. File .mxp seperti file zip, tetapi jika Anda mencoba membukanya di aplikasi zip apa pun atau mengganti nama, itu akan mengembalikan kesalahan. Ini karena algoritma kompresinya berbeda dengan algoritma zip. Namun, Manajer Ekstensi Adobe dapat membaca konten file mxp dan instruksi file mxi, dan akan menggunakan informasi ini untuk menginstal komponen Anda.

Ketika Anda menginstal file MXP dengan Adobe Extension Manager, file MXI juga disalin untuk kemudian menghapus komponen; itu akan berada di folder konfigurasi Flash di dalam folder Extension.

Jika semuanya OK, Anda sekarang dapat menemukan file .mxi yang baru saja Anda buat dan klik dua kali untuk membuka dengan Adobe Extension Manager.

Saat pengelola ekstensi terbuka, ia akan menanyakan di mana Anda ingin menyimpan paket ekstensi Anda. Mari kita pilih folder yang sama dengan RoundProgress.fla, meskipun itu bisa di mana saja karena RoundProgress.fla ada di dalam file MXP sekarang.

Ini kemudian akan menghasilkan dan menyimpan file MXP Anda.


Langkah 27: Menggunakan Ekstensi .mxp

Penting bahwa Anda melakukan ini dengan Flash jika bahasa Adobe Flash Anda tidak sama dengan bahasa komputer (ini adalah bug di manajer ekstensi CS4: katakanlah komputer Anda dalam bahasa Portugis, tetapi Flash diinstal dalam bahasa Inggris ; jika Anda hanya mengklik dua kali file .mxp dan menambahkannya, manajer ekstensi akan memahami bahwa bahasa yang harus diinstal adalah dalam bahasa Portugis, bukan bahasa Inggris, jadi dalam folder konfigurasi Flash, daripada menggunakan folder / en itu akan membuat folder / pt baru dan menyalin file di sana sebagai gantinya. Jika Anda membuka Flash, klik Bantuan dan pilih opsi "Kelola ekstensi" itu akan membuka pengelola ekstensi dalam bahasa yang sama dengan Flash, jadi apa pun yang Anda tambahkan di sini akan berada di tempat yang benar.)

Buka Manajer Ekstensi melalui Flash (Bantuan> Kelola ekstensi).

Di Extension Manager klik "instal" di bagian atas aplikasi.

Temukan file .mxp, dan sepakati apa pun yang Anda perlukan. Oke, sudah terpasang; Anda sekarang dapat menutup Extension Manager. Anda juga harus menutup dan membuka kembali Flash agar perubahan ini diterapkan.


Langkah 28: Uji Komponen Anda

Buat file Actionscript 3.0 baru dan simpan di mana saja, misalnya dalam c: \ test \ RoundProgressTest.fla

Atur ukuran panggung ke 170x170px kemudian buka Window> Components.

Perhatikan bahwa komponen kita ada dalam daftar sekarang, seperti di RoundProgress.fla, komponen itu akan muncul di folder RoundProgress dengan nama komponen di dalamnya. Jika kita menginginkannya di folder User Interface, kita perlu menyimpan .fla sebagai "User Interface.fla", tetapi ini bukan praktik yang baik karena file dapat menimpa orang lain.

Sekarang seret komponen RoundProgress ke atas panggung. Anda dapat melihat bahwa pratinjau langsung akan berfungsi sekarang, itu akan menunjukkan komponen kami dengan kulit, dll.

Atur posisi komponen menjadi x: 10 dan y: 10, hanya untuk menempatkan komponen di tengah panggung. Buka inspektur komponen ("Window -> Component Inspector"), dan dengan komponen kami dipilih pada tahap tampilan pada tab parameter. Di sana Anda dapat melihat parameter komponen kami, jadi ubah nilai rasio menjadi 0,3 dan Anda akan melihat pembaruan pratinjau langsung.

Anda dapat mengklik dua kali untuk mengedit skinnya dan Anda dapat meletakkan label teks di sebelah setiap skin untuk mengidentifikasi mereka (komponen UIC akan menghapus semuanya). Selain itu, Anda dapat membuka perpustakaan dan di RoundProgress Asset / Skins Anda dapat mengklik dua kali setiap kulit untuk mengeditnya - tetapi ingat: ukuran lingkaran tidak boleh diubah saat mengedit kulit, jika Anda ingin ukurannya lebih besar atau lebih kecil komponen pada tahap.

Penting: Jika Anda menetapkan nilai rasio dalam file ActionScript, biarkan parameter di Komponen pergi ke nilai default (0 dalam kasus kami).

Parameter yang dapat kita atur dan dapatkan adalah rasio dan persen: rentang rasio dari 0 hingga 1, dan rentang persen dari 0 hingga 100. Keduanya melakukan hal yang sama tetapi rentangnya berbeda. Kami juga memiliki metode setProgress (), dengan 2 parameter: yang pertama adalah nilai saat ini dan yang kedua adalah nilai maximun.


Kesimpulan

Sekarang Anda telah belajar cara membuat komponen Flash, Anda dapat mulai membuat komponen Anda sendiri, menjual kemudian pada ActiveDen, atau membuat beberapa barang gratis untuk kami di sini. Saya harap Anda menyukainya dan jika Anda memiliki pertanyaan, tanyakan di komentar.

Satu hal terakhir: jika Anda ingin menggunakan Tween pada contoh di atas, Anda dapat: mari kita asumsikan nama instance dari komponen kita adalah progressbar, dan mesin tween kita adalah TweenLite; Anda dapat mengatur rasio ke 0 pada inspektur komponen lalu memutarnya dengan nilai lebih besar dari 0 dan lebih kecil dari 1. Sebagai contoh:

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.