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

Tip Cepat: Cara Berkomunikasi Antara Flash dan JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

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

Di Tip Cepat ini, kita akan melihat cara menggunakan kelas ExternalInterface. Ini memungkinkan kita untuk menulis AS3 yang dapat menjalankan kode JavaScript, dan sebaliknya. Itu berarti Anda dapat menggunakan Flash untuk mengubah bagian-bagian dari halaman web dimana ia berjalan!


Langkah 1: Siapkan Dokumen Flash

Buat dokumen Flash ActionScript 3 baru. Ubah ukuran panggung menjadi 600x300. Dengan alat persegi panjang, gambar persegi panjang yang merupakan ukuran panggung. Beri warna #CCCCCC. Juga, beri stroke hitam 2px.


Langkah 2: Siapkan UI Flash

Berikut tata letaknya yang akan kita kerjakan:

Buka Components Panel (Window > Components) dan, dari folder User Interface, seret komponen ColorPicker ke atas panggung. Berikan nama instance 'cp'.

Selanjutnya buat field teks dinamis yang disebut 'resizeText'; tempatkan dan ukur sesuka Anda (Anda tidak bisa melihat yang ada di gambar saya; itu kosong, dan di kanan atas panggung.)

Sekarang, buat field teks dinamis lainnya. Berikan nama instance 'jsText'. Kemudian buat simbol tombol dan berikan nama instance 'prompt'. Setelah itu, buat tombol lain dan berikan nama instance 'change'.

Akhirnya, buat dua field masukan teks. Tempatkan satu di sebelah tombol 'prompt' Anda, dan beri nama 'promptText'. Ambil field teks kedua, pindahkan di sebelah tombol 'change' dan beri nama 'changeText'.

Juga, tambahkan label apa pun yang Anda inginkan; lihat gambar saya untuk melihat bagaimana saya mengaturnya.


Langkah 3: Siapkan UI HTML

Agar ExternalInterface bekerja, dokumen harus berada di internet. Pertama, buat file teks baru, dan simpan sebagai 'externalInterface.html'. Selanjutnya, buka editor teks dan tambahkan semua kode di bawah ini. Simpan file HTML.

Area utamanya adalah:

  • Bagian <object>, yang menyematkan SWF yang akan Anda buat dari file Flash.
  • <div> dan <textarea>, yang memiliki properti id sehingga kita dapat mengaksesnya dari SWF.

HTML Anda akan muncul seperti di bawah ini:

Ketika kode telah diganti, unggah file ke server web Anda, sehingga kita bisa memulai dengan ActionScript.


Langkah 4: Siapkan Kelas Document

Buat kelas dokumen untuk file Flash Anda; sebut saja Main.as. Jika Anda tidak akrab dengan kelas dokumen, baca Tip Cepat ini.


Langkah 5: Memanggil Fungsi JavaScript dari Flash

Hal pertama yang akan kita lakukan dengan ExternalInterface adalah memanggil fungsi JavaScript yang akan mengubah warna latar belakang halaman web kita. Jadi, lampirkan listener event ke komponen ColorPicker kita. Ketika warnanya berubah, ia akan mengirim nilai hex ke fungsi javascript yang disebut receiveColor():

Sekarang kita harus menulis fungsi receiveColor() ini. Di head dokumen HTML kita, kita memulai javascript dengan mendefinisikan fungsi ini. Ini hanya mengambil nilai yang dikirim kepadanya dari Flash dan mengubah warna latar belakang.

Letakkan itu tepat setelah di <head> file HTML Anda. Jika semuanya baik-baik saja, ketika Anda menjalankan halaman HTML di browser dan mengubah warna di ColorPicker, itu harus mengubah warna latar belakang halaman web. yang Anda tambahkan di langkah terakhir:


Langkah 6: Memanggil Fungsi ActionScript dari JavaScript

Contoh selanjutnya adalah mengirim data dari JavaScript ke Flash. Dalam dokumen HTML, tempel kode berikut dalam tag <script> yang Anda tambahkan di langkah terakhir:

Inilah yang terjadi: setelah dokumen dimuat, kita mendapatkan tombol 'sender' dan melampirkan listener event ke sana. Ketika tombol 'sender' diklik, itu akan memanggil fungsi receiveText() dalam Flash yang akan kita atur sekarang.

Kembali ke Flash, kita memberi tahu ExternalInterface untuk mendaftarkan fungsi ActionScript sehingga bisa dipanggil dari JavaScript. Kemudian kita mengatur fungsi receiveText():

(Baris baru adalah 5, 9 dan 16-19.)


Langkah 7: Memanggil Alert, Confirm dan Prompt JavaScript dari ActionScript

Kita juga dapat memanggil peringatan dengan sangat mudah dari ActionScript. Di sini kita hanya memberitahu ExternalInterface untuk memanggil 'prompt'. Kita juga bisa menggunakan ExternalInterface untuk mengirimkan parameter ke fungsi. Di sini kita memberi tahu fungsi 'prompt' untuk menanyakan nama penggunanya. Ketika pengguna kita memasukkan infonya, itu diteruskan kembali ke field teks 'promptText'.

(Baris baru adalah 10 dan 21-24.)


Langkah 8: Memanggil Fungsi JavaScript Anonim

Hal lain yang bisa kita lakukan adalah menulis fungsi JavaScript kita sendiri sebagai string, kemudian memanggilnya dari ExternalInterface. Di sini kita membuat fungsi JavaScript yang menerima parameter. Kita mengambil parameter itu dan menetapkan nilainya ke atribut innerHTML dari div 'textChange' kita di dokumen HTML. Anda akan melihat bahwa tidak ada fungsi JavaScript eksternal yang dipanggil - semuanya ada dalam ActionScript.

(Baris baru adalah 11 dan 26-30.)


Langkah 9: Memanggil Fungsi JavaScript dan ActionScript Anonim

Akhirnya, kita dapat memanggil fungsi anonim di kedua sisi. Dalam fungsi 'anonim', kita mendaftarkan fungsi ActionScript anonim dengan ExternalInterface. Fungsinya mengisi beberapa teks, lalu memulai pengatur waktu. Selanjutnya, kita panggil fungsi JavaScript anonim. Fungsi ini memberitahu jendela, ketika sudah diubah ukurannya, itu harus memanggil kembali fungsi ActionScript anonim kita.

(Baris baru adalah 13-17 dan 37-52.)


Kesimpulan

ExternalInterface adalah kelas yang sangat kuat dan berguna. Dengannya, Anda dapat menerima nilai dan event, semua di luar SWF. Bersenang-senanglah dengan itu dan terima kasih telah membaca!

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.