Cara membuat aplikasi flash di flash editor. Aplikasi Flash DIY Belajar Bahasa AS3

Flash adalah platform yang digunakan untuk mengembangkan aplikasi dan konten multimedia seperti banner, animasi, dan game. Untuk berinteraksi dengan lingkungan, beberapa program telah dibuat yang memungkinkan Anda membuat materi yang disebutkan di atas. Mereka akan dibahas dalam ulasan ini.

Program ini, yang dikembangkan oleh Adobe, mungkin merupakan alat paling terkenal untuk membuat aplikasi flash, kartun, dan objek web animasi. Ini memiliki sejumlah besar fungsi, salah satunya adalah kemampuan untuk memprogram perintah dalam bahasa Action Script.

Adobe Flash Builder

Flash Builder adalah editor kode sumber aplikasi yang kuat dengan fitur debugging. Ini dapat berfungsi sebagai alat mandiri untuk mengembangkan program, dan sebagai alat bantu untuk mengedit proyek yang dibuat dalam Adobe Flash Professional.

KoolMoves

Gagasan pengembang Amerika Lucky Monkey Designs dirancang untuk bersaing dengan produk Adobe. Dengan fungsi dasar yang sama - produksi animasi dan pemrograman aksi - program ini memiliki antarmuka yang lebih ramah dan tidak terlalu sulit untuk dipelajari.

Kami meninjau beberapa perwakilan perangkat lunak yang dirancang untuk membantu mengembangkan aplikasi multimedia. Dua produk pertama saling melengkapi dan, dengan pendekatan dan keterampilan yang tepat, dapat mengatasi tugas apa pun, tetapi keduanya sangat kompleks. KoolMoves adalah alat yang lebih ringkas dan mudah digunakan.

Bahasa ActionScript 3.0 dapat digunakan di beberapa lingkungan pengembangan aplikasi, termasuk alat Flash Professional dan Flash Builder, dan editor teks apa pun.

Contoh ini memandu Anda melalui langkah-langkah untuk membuat dan memodernisasi aplikasi ActionScript 3.0 sederhana menggunakan Flash Professional atau Flash Builder. Aplikasi yang Anda buat adalah model sederhana untuk menggunakan file kelas ActionScript 3.0 eksternal di Flash Professional dan alat Flex.

Mendesain aplikasi ActionScript

Contoh ini menunjukkan aplikasi ActionScript standar yang disebut "Hello World" yang memiliki struktur sederhana.

Aplikasi tersebut bernama HelloWorld.

Ini menampilkan satu bidang teks dengan kata-kata "Halo Dunia!"

Aplikasi ini menggunakan satu kelas berorientasi objek Greeter. Struktur ini memungkinkan kelas untuk digunakan dalam proyek Flash Professional atau Flex.

Contoh ini pertama-tama membuat versi dasar aplikasi. Fungsi kemudian ditambahkan sehingga pengguna dapat memasukkan nama mereka dan aplikasi memeriksa apakah nama tersebut ada dalam daftar pengguna yang dikenal.

Setelah definisi singkat ini, Anda dapat mulai membuat aplikasi.

Membuat Proyek HelloWorld dan Kelas Penyambut

Ringkasan desain untuk aplikasi Hello World menyatakan bahwa kodenya harus mudah digunakan kembali. Untuk mencapai tujuan ini, aplikasi menggunakan satu kelas berorientasi objek Greeter. Kelas ini digunakan dalam aplikasi yang dibuat di Flash Builder atau Flash Professional.

Membuat proyek HelloWorld dan kelas Penyambut di Flex

Di alat Pembuat Flash, pilih File > Baru > Proyek Flex.

Masukkan HelloWorld di bidang Nama Proyek. Pastikan Jenis Aplikasi diatur ke Web (Berjalan di Adobe Flash Player) lalu klik Selesai.

Flash Builder membuat proyek dan menampilkannya di jendela penjelajah paket. Secara default, proyek berisi file bernama HelloWorld.mxml, yang terbuka di editor.

Sekarang, untuk membuat file kelas ActionScript kustom di Flash Builder, pilih File > New > ActionScript Class.

Di kotak dialog Kelas ActionScript Baru, di bidang Nama, masukkan penyambut sebagai nama kelas dan klik Selesai.

Untuk membuat kelas Greeter di alat Flash Professional, lakukan hal berikut:

Di alat Flash Professional, pilih File > Baru.

Di kotak dialog Dokumen Baru, pilih file ActionScript dan klik OK.

Jendela untuk mengedit file ActionScript baru sekarang akan muncul.

Kelas Greeter mendefinisikan objek Greeter yang digunakan dalam aplikasi HelloWorld.

Menambahkan kode ke kelas Penyambut

Masukkan kode berikut di file baru (beberapa kode mungkin sudah ditambahkan):

Paket ( public class Greeter ( fungsi publik sayHello():String ( var salam:String; salam = "Halo Dunia!"; kembali salam; )))

Kelas Greeter menyertakan satu metode, sayHello() , yang mengembalikan string yang berisi frasa "Hello World!".

Untuk menyimpan file ActionScript ini, pilih File > Save.

Kelas Greeter sekarang siap digunakan dalam aplikasi.

Buat aplikasi menggunakan kode ActionScript

Kelas Greeter yang baru saja dibuat mendefinisikan seperangkat fungsi program yang berdiri sendiri, tetapi tidak mewakili aplikasi yang lengkap. Untuk menggunakan kelas, Anda harus membuat dokumen Flash Professional atau proyek Flex.

Saat membuat kode, Anda harus menggunakan instance kelas Greeter. Prosedur untuk menggunakan kelas Greeter dalam aplikasi dijelaskan di bawah ini.

Untuk membuat aplikasi ActionScript menggunakan alat Flash Professional, ikuti langkah-langkah berikut:

Pilih File > Baru.

Pada kotak dialog New Document, pilih Flash File (ActionScript 3.0) dan klik OK.

Jendela Buat Dokumen terbuka.

Di palet alat Flash Professional, pilih alat Teks. Seret pada Stage untuk menentukan kotak teks baru dengan lebar sekitar 300 piksel dan tinggi 100 piksel.

Di panel Properties, dengan kotak teks masih dipilih di Stage, atur jenis teks ke Dynamic Text dan ketik teks utama sebagai nama instance bidang teks.

Klik bingkai pertama dari garis waktu. Buka panel Actions dengan memilih Window > Actions.

Di panel Tindakan, masukkan skrip berikut:

Var mySambut:Sambut = Penyambut baru(); mainText.text = myGreeter.sayHello();

Simpan file.

Untuk membuat aplikasi ActionScript menggunakan alat Pembuat Flash, ikuti langkah-langkah berikut.

Buka file HelloWorld.mxml dan tambahkan kode sesuai printout berikut:

Proyek Flex ini mencakup empat tag MXML:

• Menandai mendefinisikan wadah aplikasi.

  Menandai mendefinisikan gaya tata letak (tata letak vertikal) untuk tag Aplikasi.

  Menandai menyertakan beberapa kode ActionScript.

  Menandai mendefinisikan bidang yang menampilkan pesan teks untuk pengguna.

Kode tag mendefinisikan metode initApp(), yang dipanggil saat aplikasi dimuat. Metode initApp() menyetel nilai teks dari area teks mainTxt ke string "Hello World!" yang dikembalikan oleh metode sayHello() dari kelas Greeter yang baru dibuat.

Untuk menyimpan aplikasi, pilih File > Simpan.

Menerbitkan dan memvalidasi aplikasi ActionScript

Pengembangan perangkat lunak adalah proses interaktif. Setelah menulis kode, itu harus dikompilasi dan diedit sampai sepenuhnya konsisten dengan tugas. Anda perlu menjalankan aplikasi yang dikompilasi dan memverifikasi bahwa itu melakukan tugas yang dijelaskan dalam pekerjaan. Jika tidak, Anda perlu mengedit kode sampai diperoleh hasil yang diinginkan. Lingkungan pengembangan Flash Professional dan Flash Builder menyediakan beberapa cara untuk memublikasikan, menguji, dan men-debug aplikasi.

Berikut ini adalah langkah-langkah utama untuk memvalidasi aplikasi HelloWorld di setiap lingkungan tersebut.

Untuk memublikasikan dan menguji aplikasi ActionScript menggunakan alat Flash Professional, ikuti langkah-langkah berikut:

Publikasikan aplikasi dan periksa kesalahan kompilasi. Di Flash Professional, pilih Manage > Test Movie untuk mengkompilasi kode ActionScript dan menjalankan aplikasi HelloWorld.

Jika Anda melihat kesalahan atau peringatan di jendela Output saat Anda menguji aplikasi Anda, perbaiki kesalahan tersebut di file HelloWorld.fla atau HelloWorld.as. Kemudian periksa kembali aplikasi.

Jika tidak ada kesalahan kompilasi, aplikasi Hello World akan muncul di jendela Flash Player.

Setelah Anda berhasil membuat aplikasi berorientasi objek ActionScript 3.0 yang sederhana namun lengkap, Anda siap untuk memulai .

Untuk memublikasikan dan menguji aplikasi ActionScript menggunakan alat Pembuat Flash, ikuti langkah-langkah berikut.

Pilih Jalankan > Jalankan HelloWorld.

Aplikasi HelloWorld akan diluncurkan.

• Jika Anda melihat kesalahan atau peringatan di jendela Output saat menguji aplikasi Anda, perbaiki kesalahan tersebut di file HelloWorld.mxml atau Greeter.as. Kemudian periksa kembali aplikasi.

  Jika tidak ada kesalahan kompilasi, aplikasi Hello World akan muncul di jendela browser yang terbuka. Layar akan menampilkan teks "Hello World!"

Setelah Anda berhasil membuat aplikasi ActionScript 3.0 berorientasi objek yang sederhana namun lengkap, Anda dapat melanjutkan dengan Memodernisasi aplikasi HelloWorld.

Modernisasi Aplikasi HelloWorld

Untuk membuat aplikasi lebih menarik, Anda dapat memasukkan konfirmasi nama pengguna ke dalamnya setelah memeriksa daftar nama yang diberikan.

Pertama-tama, kita perlu memperbarui kelas Greeter dengan memperluas fungsinya. Maka Anda harus memperbarui aplikasi agar dapat menggunakan fitur-fitur baru.

Perbarui file Greeter.as

Buka file Greeter.as.

Ubah konten file sebagai berikut (baris baru dan yang diubah dicetak tebal):

Paket (Penyapa kelas publik ( /** * Mendefinisikan nama-nama yang menerima salam yang tepat. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * Membangun string ucapan menggunakan nama yang diberikan. */ fungsi publik sayHello( namapengguna:String = ""):String ( var salam:String; jika (namapengguna == "") { salam = "Halo. Silakan ketik nama pengguna Anda, lalu tekan " + "tombol Enter."; } lain jika (validName(namapengguna)) { salam = "Halo, " + namapengguna + "."; } kalau tidak { salam = "Maaf " + nama pengguna + ", Anda tidak ada dalam daftar."; } salam kembali; ) /** * Memeriksa apakah sebuah nama ada dalam daftar validNames. */ fungsi statis publik validName(inputName:String = ""):Boolean { if (validNames.indexOf(inputName) > -1) { kembali benar; } kalau tidak { kembali salah; } } } }

Kelas Greeter sekarang memiliki properti baru:

Array validNames berisi daftar nama pengguna yang diizinkan. Ketika kelas Greeter dimuat, array diatur ke daftar tiga nama.

Metode sayHello() mengambil nama pengguna dan mengubah salam tergantung pada kondisi tertentu. Jika nama pengguna namapengguna disetel ke string kosong (""), properti ucapan diatur untuk meminta nama pengguna. Jika username diterima, maka akan muncul sapaan seperti ini: "Halo, nama belakang." Dan terakhir, jika dua kondisi sebelumnya tidak terpenuhi, variabel sapaan diatur seperti ini: "Maaf nama belakang, Anda tidak ada dalam daftar." ("Maaf, [nama pengguna], Anda tidak ada dalam daftar").

Metode validName() mengembalikan true true jika inputName yang dimasukkan ditemukan dalam larik validNames, dan mengembalikan false false jika nama tidak ditemukan. Pernyataan validNames.indexOf(inputName) memeriksa setiap baris dari array validNames terhadap string inputName dari inputName . Metode Array.indexOf() mengembalikan posisi pointer dari instance objek pertama dalam array. Ini mengembalikan -1 jika objek tidak ditemukan dalam array.

Anda kemudian perlu memodifikasi file aplikasi yang mereferensikan kelas ActionScript ini.

Untuk memodifikasi aplikasi menggunakan alat Flash Professional, ikuti langkah-langkah berikut:

Buka file HelloWorld.fla.

Ubah skrip di Frame 1 sehingga string kosong ("") diteruskan ke metode sayHello() kelas Greeter:

Var mySambut:Sambut = Penyambut baru(); mainText.text = myGreeter.sayHello("");

Pilih alat Teks dari palet alat. Buat dua bidang teks baru di ruang kerja. Posisikan mereka bersebelahan di bawah bidang teks mainText yang ada.

Di bidang teks baru pertama, yang merupakan label, masukkan teks Nama belakang:.

Pilih bidang teks lain dan atur jenisnya di inspektur Properti ke Teks Input. Pilih baris tunggal sebagai jenis baris. Memasuki teksIn sebagai nama instance.

Klik bingkai pertama dari garis waktu.

Di panel Tindakan, tambahkan baris berikut di akhir skrip yang ada:

MainText.border = benar; textIn.border = benar; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Kode baru menambahkan fungsionalitas berikut:

• Dua baris pertama cukup mengatur batas untuk dua bidang teks.

  Bidang teks input, seperti textIn , memiliki serangkaian peristiwa yang dapat dikirim. Metode addEventListener() memungkinkan Anda untuk menentukan fungsi yang dijalankan ketika suatu peristiwa jenis tertentu terjadi. Dalam hal ini, acara itu akan menjadi penekanan tombol pada keyboard.

  Fungsi custom keyPressed() memeriksa untuk melihat apakah tombol Enter akan ditekan. Jika tombol yang diperlukan ditekan, metode sayHello() objek myGreeter akan meneruskan teks dari bidang teks textIn sebagai parameter. Metode ini mengembalikan string ucapan berdasarkan nilai yang diteruskan ke sana. String yang dikembalikan kemudian ditetapkan ke properti teks dari bidang teks mainText.

Script lengkap untuk Frame 1 terlihat seperti ini:

Var mySambut:Sambut = Penyambut baru(); mainText.text = myGreeter.sayHello(""); mainText.border = benar; textIn.border = benar; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Simpan file.

Untuk meluncurkan aplikasi, pilih Kelola > Uji Film.

Saat Anda menjalankan aplikasi, Anda akan diminta untuk memasukkan nama pengguna. Jika nama tersebut diterima oleh program, pesan konfirmasi "halo" akan muncul.

Untuk memodifikasi aplikasi menggunakan alat Pembuat Flash, ikuti langkah-langkah berikut:

Buka file HelloWorld.mxml.

Lalu ganti tagnya untuk menunjukkan kepada pengguna bahwa teks hanya untuk tujuan tampilan. Ubah warna latar belakang menjadi abu-abu muda dan atur atribut yang dapat diedit ke false:

Sekarang tambahkan baris berikut langsung setelah tag penutup . Baris-baris ini membuat komponen TextInput yang memungkinkan pengguna memasukkan nilai nama pengguna:

Atribut enter mendefinisikan tindakan yang dilakukan saat pengguna menekan tombol Enter di bidang userNameTxt. Dalam contoh ini, kode meneruskan teks yang dimasukkan dalam bidang ke metode Greeter.sayHello(). Salam di bidang mainTxt berubah sesuai.

File HelloWorld.mxml terlihat seperti ini:

Simpan file HelloWorld.mxml yang telah diedit. Pilih Run > Run HelloWorld untuk menjalankan aplikasi.

Saat Anda menjalankan aplikasi, Anda akan diminta untuk memasukkan nama pengguna. Jika nama (Sammy, Frank atau Dean) diterima oleh program, pesan konfirmasi "Halo, nama belakang».

03.12.2009

Artikel ini dikhususkan untuk pengembangan cepat aplikasi untuk Flash, dan menggunakan produk unggulan Adobe Flex Builder 3. Perlu dicatat bahwa lingkungan tradisional untuk Flash adalah Adobe Flash, tetapi terutama ditujukan untuk menggambar dan membuat animasi. Pemrograman jauh lebih mudah dengan Flex Builder.

Artikel ini akan menunjukkan cara membuat aplikasi khas yang cukup sederhana dan sekaligus - katalog produk dengan kemampuan untuk menghitung biaya pesanan dan mempertimbangkan opsi tambahan. Program semacam itu dirancang untuk restoran: pengguna akan memiliki akses ke katalog hidangan yang dibagi ke dalam kategori, serta opsi "pengiriman" dan indikasi jumlah porsi yang dipesan.

Harus diakui bahwa menginstal bahkan sistem pendukung toko online sederhana di situs akan menyelesaikan masalah ini dan lainnya (khususnya, membuat keranjang pesanan atau mengirimnya melalui email). Namun, kita tidak boleh lupa bahwa ini hanya akan menjadi demonstrasi dari fitur-fitur berikut:

Perhitungan ulang biaya dengan cepat, tanpa memuat ulang halaman. Saat menggunakan HTML, seseorang harus menggunakan bantuan JavaScript, yang tidak selalu mudah. Selain itu, perlu untuk menyimpan opsi yang dipilih oleh pengguna secara permanen.

Menggunakan efek animasi saat mengunggah foto.

Implementasi katalog produk melalui 40 baris kode program.

Tentu saja, untuk pekerjaan lebih lanjut pada aplikasi, Anda harus memiliki gagasan tentang apa itu XML (ini adalah bahasa representasi data struktural, lihat http://ru.wikipedia.org/wiki/XML untuk informasi lebih lanjut detail), dan memiliki setidaknya sedikit pengalaman dalam mengembangkan aplikasi desktop (dalam Delphi atau Visual Studio).

Jadi, mari kita mulai. Agar berfungsi, Anda perlu menginstal Adobe Flex Builder 3.

Segera setelah peluncuran, Anda akan melihat jendela selamat datang di mana Anda diundang untuk berkenalan dengan tautan ke pelajaran tentang membuat aplikasi. Ini bisa dilakukan nanti - berguna bagi pemula untuk belajar. Untuk mulai mengimplementasikan proyek perangkat lunak, pertama-tama, Anda perlu memanggil perintah menu File New Flex Project. Di jendela untuk membuat proyek baru yang muncul, masukkan nama proyek dan lokasi di mana ia akan ditempatkan. Di antara opsi tambahan, pilih Aplikasi Web dan Server aplikasi: Tidak ada (karena kami belum berencana menggunakan interaksi kompleks dengan server), lalu klik tombol Selesai.

Seluruh ruang kerja Flex Builder dibagi menjadi empat bagian, yang berisi:

Jendela navigator proyek (Flex Navigator), mencerminkan struktur file;

Jendela garis besar yang menunjukkan struktur program atau komponen yang tersedia (saat beralih ke mode desain);

Jendela program utama dengan dua tab - Sumber (editor kode) dan Desain (mode desain visual);

Jendela Masalah, yang menampilkan pesan kompiler, informasi debug, dan pesan layanan lainnya.

Jika Anda mengubah desain aplikasi, Anda akan menemukan bahwa kodenya juga telah berubah. Ini benar, karena, pada kenyataannya, Anda bekerja dengan kode MXML. Bahasa MXML dirancang untuk menggambarkan antarmuka aplikasi (sejumlah komponen, mungkin bersarang satu sama lain) dalam format XML. Teknologi serupa yang disebut XAML digunakan oleh Microsoft untuk mengembangkan aplikasi Silverlight.

Sekarang sedikit tentang spesifikasi aplikasi yang dibuat:

Hidangan dalam katalog yang dibuat dibagi menjadi beberapa kategori (makanan pembuka, hidangan utama, hidangan penutup, minuman);

Setiap hidangan memiliki foto, nama, deskripsi, dan harga;

Dimungkinkan untuk memesan beberapa porsi dan pengiriman.

Anda akan membutuhkan gambar serta informasi tentang hidangan dengan cara yang terstruktur.

Untuk gambar, buat subfolder img di folder src proyek (folder utamanya) dan tambahkan objek yang diperlukan di sana. Setiap hidangan memiliki pengenal (misalnya, 53), dan foto hidangan besar diberi nama sesuai dengan template 53big.jpg, dan yang kecil - 53mini.jpg.

Data harus ditempatkan di file config.xml dan ditempatkan di folder src. File seperti itu ditunjukkan pada Listing 1.

File XML menentukan kelompok piring (grup). Masing-masing dapat mencakup beberapa hidangan (item), yang memiliki pengidentifikasi gambar (img), nama (nama), harga dalam rubel (harga) dan deskripsi multi-baris (desc). Di akhir file konfigurasi, elemen terpisah adalah biaya pengiriman dalam rubel (dostavka).

Sekarang langsung ke antarmuka aplikasi dan pertama-tama tentukan ukuran jendelanya: 800x500 piksel. Dimungkinkan untuk membuat aplikasi "peregangan" yang memenuhi seluruh layar, tetapi untuk saat ini lebih baik membatasi diri Anda pada aplikasi yang memiliki lebar dan tinggi tetap.

Kemudian tempatkan dua teks statis di atas panggung (komponen Label), daftar drop-down kategori (komponen ComboBox), galeri pemilihan hidangan (komponen HorizontalList), tiga elemen teks yang berubah - nama, harga, dan biaya akhir (juga komponen Label), komponen untuk mengubah jumlah porsi (NumericStepper), kotak centang pilihan pengiriman (CheckBox). Juga, berikan setiap komponen sebuah ID (ID di panel properti komponen).

Dan sekarang pemrograman perilaku aplikasi Flash akan dimulai. Untuk melakukannya, Anda perlu memahami dua konsep: sumber data (Penyedia data) dan pengikatan data (Data binding).

Sumber data

Mari kita ambil contoh daftar drop-down di mana Anda dapat memilih jenis hidangan ("Camilan", "Minuman", dll.). Sumber datanya adalah file XML yang dijelaskan di awal.

Lingkungan pemrograman Flex menyediakan alat otomatis untuk bekerja dengan sumber pengikatan data. Pertama, sebagian besar komponen yang bekerja dengan daftar, tabel, pohon memiliki properti dataProvider yang dapat merujuk ke data yang diperlukan. Kedua, ada konstruksi khusus yang memungkinkan Anda untuk merujuk ke daftar dalam dokumen XML, seperti daftar kelompok makanan yang dijelaskan oleh satu set tag dalam dokumen.

Untuk menerapkan konsep ini, lakukan hal berikut (lihat Daftar 2).

Tetapkan sumber data. Dalam hal ini, muat data dari file config.xml dan berikan pengenal configXML.

Tentukan sumber data untuk dropdown - dataProvider=?© (configXML.group)?©.

Tentukan properti XML mana yang harus digunakan untuk mengatur teks di dalam daftar dropdown. Misalkan Anda ingin (mengingat file XML yang Anda buat) memiliki atribut nama dari tag grup yang sesuai (yaitu nama - "Snacks", "Desserts", dll.) menjadi elemen daftar. Untuk melakukannya, atur properti labelField=?©@name?© (simbol @ berarti Anda berurusan dengan atribut, bukan subtag), dan grup Anda akan menjadi elemen dari daftar yang sesuai.

Pengikatan data

Mari kita asumsikan bahwa Anda telah mengubah kategori hidangan yang dipilih dalam daftar dropdown. Jelas, maka set mereka juga harus berubah. Arahan khusus, dilambangkan dengan kurung kurawal (()), dimaksudkan untuk ini. Ini menyiratkan hal berikut: "Jika sumber data telah berubah, maka tampilan data dalam komponen saat ini juga harus diubah."

Bagaimana mempraktekkannya? Anda memiliki komponen HorizontalList yang menampilkan sekumpulan foto hidangan dalam kategori saat ini (makanan ringan atau minuman), dan komponen ComboBox tempat Anda dapat memilih kategori menurut data XML. Dan yang hebat adalah bahwa ComboBox (serta sebagian besar komponen tipe daftar di Flex) memiliki properti selectedItem. Nilainya berubah bergantung pada item daftar mana yang dipilih oleh pengguna dan apakah item tersebut berisi bagian yang sesuai dari sumber data. Dalam kasus yang sedang dipertimbangkan, ketika sumber data adalah XML, properti ini akan menyertakan subpohon XML dari grup hidangan yang dipilih.

Pertimbangkan bagaimana konsep seperti itu diterapkan dalam praktik, dan daftar di bawah ini apa yang perlu diinstal untuk ini:

Dropdown ID: id=?©cmbGroup?©;

Sumber data untuk daftar hidangan adalah dataProvider=?©(cmbGroup.selectedItem.item)?©.

Omong-omong, perilaku ini juga harus diterapkan saat memilih hidangan individual - ubah gambar, nama, harga, dan deskripsinya. Untuk melakukannya, instal yang berikut ini:

ID daftar pilihan hidangan: id=?©lstProduct?©;

Sumber data untuk alamat gambar Anda: source=?©img/(lstProduct.selectedItem.img).big.jpg?© (Flex juga mendukung struktur kompleks untuk pengikatan data); sumber data untuk semua elemen teks, misalnya untuk harga (text=?©Harga: (lstProduct.selectedItem.price) p.?©).

Setelah menyelesaikan langkah-langkah ini, Anda akan menerima katalog produk yang berfungsi penuh yang mengubah daftar produk saat Anda memilih kategori lain, dan deskripsi berubah saat Anda mengubah produk. Perhatikan bahwa Anda belum menulis satu baris kode pun! Fakta ini saja menunjukkan bahwa pemrograman untuk Flash dengan bantuan alat Flex adalah pengalaman yang sangat menarik.

Anda hanya memerlukan kode program untuk menghitung jumlah pesanan. Kode ditulis di dalam tag khusus (lihat Daftar 2). Anda perlu mendefinisikan prosedur onChange(), dan prosedur itu akan dipanggil setiap kali pengguna melakukan salah satu dari tiga tindakan:

Akan memilih produk lain. Untuk setiap komponen, ketika pengecualian terjadi, sebuah peristiwa dihasilkan yang dapat ditangani secara terprogram. Dalam hal ini, Anda harus mengatur penanganan acara perubahan (perubahan hidangan yang dipilih) untuk daftar hidangan: change=?©onChange();?©

Mengubah status kotak centang "Aktifkan pengiriman". Mirip dengan change=?©onChange();?© untuk kotak centang "Pengiriman". 3. Akan mengubah jumlah porsi yang dipesan. Demikian pula, change=?©onChange();?© untuk kolom input untuk jumlah porsi.

Ini melengkapi bagian utama dari aplikasi Anda. Dan sekarang sesuatu tentang kemungkinan "memoles" penampilannya:

Untuk mencegah gambar utama terlihat sepi, ada baiknya menambahkan efek sorotan abu-abu menggunakan filter=?©()?©; selain itu, Anda dapat menerapkan efek grafis lainnya;

Sehingga saat mengganti piring, gambar tidak langsung berubah, tetapi mengapung dengan indah, telah ditambahkan efek tampilan: completeEffect=?©(Fade)?©. Omong-omong, dengan sedikit usaha ekstra, dimungkinkan untuk menyesuaikan durasinya, serta menerapkan efek zoom dan gerakan (Move) yang didukung di dalam Flex. Berikut adalah opsi paling sederhana.

Karena volume artikel yang terbatas, saya harus "menyembunyikan" satu fitur penting - pengaturan daftar gambar hidangan di komponen HorizontalList. Untuk melakukan ini, kita perlu membuat komponen ItemImg tambahan kecil (tiga baris kode lagi, tetapi deskripsi proses seperti itu akan memakan banyak ruang) dan mengatur properti itemRenderer=?©ItemImg?©.

Selain itu, saya sengaja menghilangkan aspek memuat file konfigurasi XML (menggunakan kode saat ini, "dijahit" ke dalam program), mengirim hidangan yang dipilih dan membuat keranjang, karena semua ini akan meningkatkan volume artikel karena untuk detail teknis yang tidak terlalu menarik.

Dalam artikel ini, saya mencoba menunjukkan efektivitas penggunaan Flash (dan Flex) menggunakan contoh, secara umum, bukan tugas termudah untuk membuat katalog produk. Solusi yang dihasilkan (termasuk antarmuka) cocok dengan 40 baris kode dan dapat dipublikasikan langsung di halaman majalah. Menurut saya, ini adalah bukti terbaik efektivitas pembuatan aplikasi di Flash dibandingkan dengan aplikasi di HTML dan JavaScript. Tentu saja, kesimpulan yang ditarik di sini tidak selalu benar. Namun, saya harap saya telah mengarahkan Anda pada gagasan bahwa tugas tertentu dapat diselesaikan dengan sederhana dan indah menggunakan Flash.

Aplikasi kerja yang digunakan di sini sebagai contoh ditunjukkan dengan sedikit perbaikan pada "World of the PC disk"

Saat membuat aplikasi di Flex Builder, Anda dapat memilih antara aplikasi Web dan opsi aplikasi Desktop. Dalam kasus kedua, aplikasi yang dibuat akan berjalan di mesin virtual yang disebut AIR (Adobe Integrated Runtime), berkat itu ia akan memiliki akses ke file, autorun, dan properti komputer lainnya. Mesin virtual AIR sekarang tersedia untuk Windows, Macintosh, dan beberapa sistem Linux, memungkinkan Anda membuat aplikasi desktop lintas platform secara efisien menggunakan kemampuan Flash standar. Secara pribadi, saya lebih menyukai fitur ini daripada pengembangan aplikasi Delphi.

Karena nama Flex membingungkan beberapa pelanggan, pengembang mengumumkan bahwa versi berikutnya dari program ini akan disebut Adobe Flash Builder 4. Saat ini dalam pengujian beta.

Omong-omong, Adobe Flex Builder secara resmi tersedia gratis untuk siswa dari segala usia, dari sarjana hingga mahasiswa pascasarjana. Untuk berkenalan dengan ini secara lebih rinci, Anda harus pergi ke http://habrahabr.ru/blogs/flex/41597/,

Mulai

Untuk membuat aplikasi flash, Anda harus memiliki ide khusus tentangnya. Anda harus memikirkan setidaknya skenario aplikasi kasar. Setelah itu, Anda dapat mulai bekerja langsung di editor flash.

Pertama, Anda perlu menentukan dimensi aplikasi masa depan. Misalnya, jika itu adalah spanduk standar, ukurannya akan menjadi 468 mm kali 60 mm. Tentukan parameter ini di bagian Properti Film di bidang Lebar dan Tinggi - masing-masing menunjukkan lebar dan tinggi. Kemudian pilih warna background utama aplikasi flash tersebut. Untuk menyelesaikan pengaturan, masukkan jumlah frame per detik di bidang Frame Rate.

Program khusus akan membantu Anda membuat aplikasi flash

Segera setelah menyelesaikan pengaturan, klik tombol kiri mouse pada tombol OK. Sekarang editor flash itu sendiri ikut bermain, yang akan membantu Anda membuat aplikasi flash.

Kami mulai membuat aplikasi animasi - misalnya, prasasti bergerak. Untuk melakukan ini, pilih alat Teks dan buka panel pengaturan - Karakter Panel Jendela. Pada menu Font yang muncul, klik panel Characters dan pilih font, seperti Times New Roman. Atur warna dan ukuran yang diinginkan, misalnya 26, tulis apa saja atau saran. Fondasi dasar aplikasi flash Anda sudah siap!

Anda dapat membuat aplikasi flash dalam bentuk animasi

Setelah itu, Anda dapat melakukan dan. Untuk melakukan ini, Anda perlu mengubah apa yang Anda tulis menjadi karakter. Gunakan perintah Insert Convert to Symbol untuk ini. Beri juga nama untuk kemudian disimpan ke hard drive Anda.

Setelah itu, pilih frame No. 20 pada Timeline dan masukkan yang pertama, yang disebut key frame, dengan perintah Insert Keyframe. Pada saat yang sama, di sisi kiri bingkai baru, Anda akan melihat garis abu-abu bergerak ke arah dari bingkai utama.

Sekarang Anda harus mengaktifkan aplikasi flash. Untuk melakukan ini, kembali ke bingkai pertama lagi dan pindahkan prasasti yang Anda buat di luar perbatasannya ke tempat sewenang-wenang di luar tepi kanan. Kemudian, tanpa membatalkan pilihan frame pertama, buka panel Window Panels Frame dan segera beralih ke tab Frame.

Yang harus Anda lakukan adalah memilih jenis animasi yang Anda butuhkan dari menu Tweening. Segera setelah itu, bilah abu-abu yang memisahkan bingkai utama akan berubah menjadi biru. Itu saja, aplikasi flash sederhana sudah siap!

Sebelum saya memulai posting itu sendiri, saya akan membaca disclaimer kecil:
Sebelum membuat aplikasi baru, Anda perlu memikirkan apa itu untuk Anda, untuk apa orang lain, itu akan berguna bagi orang lain, Anda bahkan dapat menghasilkan banyak uang di aplikasi! Lebih tentang - aturan penempatan aplikasi. Jika Anda yakin akan segalanya - kita bisa mulai!

pengantar

• Ini bukan pertama kalinya saya mengerjakannya, jadi saya bisa mengatakan dengan percaya diri, itu mudah untuk mendasarkan
• Tidak menetapkan ambang batas antara fungsionalitas dan desain
• Anda dapat membuat aplikasi bahkan untuk ponsel

Mulai dari mana? Menghubungkan bingkai.

Di jendela "Garis Waktu", buat "lapisan", simpan nama dan urutannya:


Setiap 5 frame kita tekan "F6", di akhir "F5". Seharusnya berubah seperti di layar.

Saya pikir tidak ada yang perlu dijelaskan di sini:
Lapisan "ActionScript" - di dalamnya kode akan ditemukan.
Lapisan "Tanda" - agar tidak melupakan bingkai, mereka akan diberi nomor, namun, hampir seperti lapisan tambahan.
Lapisan "Tombol" - berisi tombol yang akan berada di posisi yang sama di seluruh proyek, serta lapisan "Latar Belakang" dan "Bahan". Sekarang kita memberi nomor pada frame, tidak sia-sia layer “Marks” dibuat. Klik pada frame yang Anda buat pada layer "Labels", lihat jenis "Frame", masukkan nama untuk frame tersebut.


Lapisan "Tanda" tidak memiliki tujuan khusus, mereka dibuat hanya untuk bantuan. Jadi kami belajar cara membuat bingkai!

Simbol dan sumber daya

Aktivasi halaman

Impor flash.events.MouseEvent;
berhenti();
btn1.addEventListener(MouseEvent.CLICK,OnClickTwo);

Fungsi OnClickTwo(e:MouseEvent):void
{
gotoAndStop("Dua");
}

Saya pikir Anda akan mengerti apa apa! Catatan: ketika aplikasi diluncurkan, bingkai "Adyn" diluncurkan terlebih dahulu

Mengisi aplikasi dengan bahan

Kami menerima file terakhir dan memuat VKontakte