Bekerja dengan te

an Pembelajaran 6 Produk Multim Interaktif

3. Bekerja dengan te

Teks digunakan un bentuk tulisan, pe keterangan untuk mempunyai peranan dimanipulasi atau d yang dihasilkan mem

Teks dalam Adobe F

pada Toolbox. T

menggunakan Prop

ama_tombol:String = e.currentTarget.name; ma_tombol == "satu"){

ndStop(2); // ke frame 1 jika tombol_1 ditekan

ma_tombol == "dua"){

ndStop(3); // ke frame 2 jika tombol_2 ditekan

a_tombol== "keluar"){ mand("quit");

da frame 40 layer action klik kanan pilih insert f

Gambar 50 Memperpanjang durasi tampilan layer

gan menekan CTRL+ENTER, maka tampilan -ubah sesuai tombol yang ditekan.

text

untuk menerangkan atau menjelaskan sesua pembuatan judul, komponen animasi, ke k movie interaktif. Teks merupakan bag an cukup besar dalam pembuatan animasi. T dimodifikasi sesuai dengan kebutuhan sehin empunyai banyak variasi.

e Flash ditulis dengan memggunakan bantuan Teks yang dihasilkan dapat di setting

ropetiesPanel. Propeties Panels untuk teks be

an

an

rt frame.

Gambar 50 Memperpanjang durasi tampilan layer

ilan gambar suatu dalam keterangan- agian yang . Teks dapat hingga teks anText Tool ng dengan berisi menu

Adobe flash fungsi yang be a. Static sepe b. Dyna teks perta perol bursa c. Input user mene

Gambar 51 Properti teks

Berikut ini di interaktif. Jeni text. a. Buat tulisa mengguna untuk men name-nya mengekse

sh mempunyai tiga tipe teks yang masing-masi berbeda. Tipe teks tersebut adalah sebagai be atic Textadalah jenis teks yang mempunyai ka

perti teks biasa pada umumnya.

namic Textadalah jenis teks yang dapat me ks yang dinamis dan bisa dikontrol, co

rtandingan olah raga yang yang dapat bergant rolehan nilai dari pertandingan, nilai kurs ma rsa efek, dll.

put Textadalah jenis teks yang dapat diisi oleh ser dalam sebuah form isian atau Input Text d

enerima berbagai input dari user.

Gambar 51 Properti teks

diuraikan contoh penggunaan teks dalam nis teks yang digunakan adalahstaticdaninp

lisan data diri dan tempat untuk mengi nakan text tool. Data diri menggunakan static t enuliskan jawaban menggunakan input text, ya menjadi input. Tambahkan sebuah

sekusi jawaban. Beri nama enter_btn

asing mempunyai berikut :

i karakter-karakter

menampilkan sifat contohnya skor nti sesuai dengan mata uang dalam

eh pengguna atau t digunakan untuk

Gambar 51 Properti teks

m aplikasi media input dan dynamic

ngisikan jawaban ic text. Sedangkan t, ganti instances h tombol untuk

Gambar 52 Pembuatan obyek teks dan tombol

b. Berikan insert k seperti di bawah untuk jawaban m menjadi output.

Gambar 52 Pembuatan obyek teks dan tombol

t keyframe di frame 5 pada layer 1. Rubahlah ah ini. Data diri menggunakan static text. S n menggunakan dynamic text,ganti instances

t.

Gambar 52 Pembuatan obyek teks dan tombol

lah tampilan Sedangkan s name-nya

Gambar 53 Pengaturan obyek pada frame 5 c. Tambahka

d.

Pada laye scriptnya

.

imp stop var var ente funct a } e. Kemudian f. Tuliskan d outp outp g. Pada saat maka tamp

Gambar 53 Pengaturan obyek pada frame 5

kan layer baru dengan cara klik insert layer. yer 2 ini tuliskan script dengan menekan a

.

import flash.events.MouseEvent stop(); var nama:String; var alamat:String; nter_btn.addEventListener(MouseEvent.CLICK unction database(e:MouseEvent):void { nama= input.text; alamat = input2.text; gotoAndStop(5);

an pada frame 5 layer 2 klik kanan pilih insert k di frame 5 layer 2,script seperti di bawah ini. utput.text = nama;

utput2.text = alamat;

at dijalankan dan kita isikan jawaban nama da mpilannya adalah sebagai berikut

Gambar 53 Pengaturan obyek pada frame 5

an f9. Berikut ini

CK, database);

rt keyframe. i.

Gambar 54 Tampilan pengisian data

h. Setelah itu kita e

Gambar 55 Tampilan data

D.Aktivitas Pembelaja

Dalam bagian ini, aka multimedia pembelajar dibuat pada kegiatan be

Untuk memudahkan nav Setiap scene memiliki penempatan tombolny Berdasarkan stoyboard pembelajaran interaktif - Scene 1 untuk ope - Scene 2 untuk sta - Scene 3 untuk sej - Scene 4 untuk pet - Scene 5 untuk ma - Scene 6 untuk kui Aplikasi yang digunaka ini adalah adobe flash C

Gambar 54 Tampilan pengisian data

a enterhasilnya seperti dibawah ini.

Gambar 55 Tampilan data

mbelajaran

akan dijelaskan tahapan dalam membua jaran interaktif berdasarkan rancangan yan belajar sebelumnya.

navigasi, maka setiap bagian dibuatkan scene iki desain tampilan yang sama untuk backgr lnya sehingga tidak membingungkan p rd yang ada, dibutuhkan 6 scene untuk aplik tif program linear, yaitu :

pening standar kompetensi sejarah matematika etunjuk ateri kuis

kan dalam membuat multimedia interaktif dala sh CS 3 dengan action script 3.0.

Gambar 54 Tampilan pengisian data

Gambar 55 Tampilan data

uat aplikasi yang sudah e tersendiri. kground dan pengguna. likasi media alam modul

Untuk menambah 

Gambar 56 Menambahkan Scene

Lakukan penamba buah scene. Scen scene.

Gambar 57 Jumlah scene dalam file

Untuk memudahka

nama halaman/m 

other panelssce

ahkan scene, klik menu insertScene

Gambar 56 Menambahkan Scene

bahan scene sebanyak 5 kali, sehingga akan cene yang sedang aktif, ditandai dengan chek d

Gambar 57 Jumlah scene dalam file

hkan pengerjaan, sebaiknya nama scene dise

/menu. Untuk mengubah nama scene, klik m  scene



Gambar 56 Menambahkan Scene

n di dapatkan 6 k di depan nama

Gambar 57 Jumlah scene dalam file

sesuaikan dengan menu window  

Gambar 58 Langkah mengubah nama scene

Double klik nama sc menu/halaman yang ak

Gambar 58 Langkah mengubah nama scene

scene, lalu ganti namanya sesuai deng akan Anda buat

Gambar 58 Langkah mengubah nama scene

Gambar 59 Mengganti nama scene 1) Membuat openin a. Aktifkan scen background. animasi tulisa tombol enter. pengorganisasi

Gambar 60 Menyiapkan layer untuk membuat opening

b. Seleksi layer w

Gambar 59 Mengganti nama scene

ing

scene opening, buatlah empat buah layer. . Layer 2 untuk hitungan waktu mundur. isan ucapan selamat datang. Layer 4 untuk er. Layer 5 untuk menuliskan script. Agar sasian, ganti nama layer sesuai peruntukannya

Gambar 60 Menyiapkan layer untuk membuat opening

r waktu. Pada frame 1 buatlah tulisan angka 9

Gambar 59 Mengganti nama scene

r. Layer 1 untuk r. Layer 3 untuk tuk menempatkan gar memudahkan

ya.

Gambar 60 Menyiapkan layer untuk membuat opening

Gambar 61 Awal hitungan waktu mundur c. Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram Tambahkan keyfram

Gambar 61 Awal hitungan waktu mundur

rame pada frame 3. Ubah tulisannya menjadi rame pada frame 5. Ubah tulisannya menjadi ame pada frame 7. Ubah tulisannya menjadi an rame pada frame 9. Ubah tulisannya menjadi

ame pada frame 11. Ubah tulisannya menjadi ame pada frame 13 Ubah tulisannya menjadi a ame pada frame 17. Ubah tulisannya menjadi a ame pada frame 19. Ubah tulisannya menjadi a

Gambar 61 Awal hitungan waktu mundur

di angka 8. di angka 7. i angka 6. di angka 5. adi angka 4. i angka 3. di angka 2. di angka 1.

Gambar 62 Susunan frame pada layer waktu

d. Langkah sela datang. Kini k frame 21. Bu stage

Gambar 63 Frame awal animasi tulisan berjalan Gambar 62 Susunan frame pada layer waktu

lanjutnya adalah membuat animasi tulisan u i kita bekerja pada layer sambutan. Berikan Buat tulisan selamat datang dan tempatkan

Gambar 63 Frame awal animasi tulisan berjalan Gambar 62 Susunan frame pada layer waktu

ucapan selamat n keyframe pada an di sebelah kiri

e. Berikan keyframe pa

Gambar 64 Frame akhir animasi tulisan berjalan

f. Pilih salah satu fram kananCreate mo

Gambar 63 Memberikan motion tween pada tulisan

g. Akan muncul garis y akhir(40) dan Namp

pada frame 40. Geser tulisan ke tengah stage

Gambar 64 Frame akhir animasi tulisan berjalan

ame diantara frame 19 dan 40 (missal frame 25  motion tween.

Gambar 63 Memberikan motion tween pada tulisan

s yang menghubungkan frame awal (21) denga pak tulisan bergerak ke kanan

ge

Gambar 64 Frame akhir animasi tulisan berjalan

25). Klik 

Gambar 63 Memberikan motion tween pada tulisan

Gambar 64 Animasi motion tween pada tulisan

h. Selanjutnya ki 

insert keyfram

Gambar 65 Menambahkan tombol enter

i. Seleksi tombo instance name

Gambar 64 Animasi motion tween pada tulisan

kita bekerja pada layer tombol. Klik frame 41.  me. Lalu tambahkan tombol enter

Gambar 65 Menambahkan tombol enter

bol enter, pada bagian propertiesnya beri nama me

Gambar 64 Animasi motion tween pada tulisan

1. Klik kanan

Gambar 65 Menambahkan tombol enter

Gambar 66 Memberi nama tombol enter

j. Selanjutnya adalah tampilan akan menu Berikan keyframe menampilkan jendel

Gambar 67 Script untuk tombol enter

Penjelasan dari scrip

- stop(); berfungsi un yang diberi a 41 - enter.addEve menambahka klik makan a - function klik_ membuat fun - var nama_to

Gambar 66 Memberi nama tombol enter

ah memberikan script. Jika tombol enter di k nuju halaman judul. Halaman judul berada di e pada frame 41 layer script. Tekan F dela action, lalu tuliskan kode berikut

Gambar 67 Script untuk tombol enter

script tersebut adalah sebagai berikut.

untuk menghentikan tampilan layar berada ri action. Jadi tampilan layar akan berhenti pa

EventListener(MouseEvent.CLICK, klik_tombol) hkan even pada tombol enter, yaitu jika tombo

akan menjalankan fungsi klik_tombol klik_tombol(e:MouseEvent):void

fungsi klik_tombol

_tombol:String = e.currentTarget.name;

Gambar 66 Memberi nama tombol enter

i klik, maka di frame 45. F9 untuk

Gambar 67 Script untuk tombol enter

da di frame pada frame

ol);

- if(nama

Jika tombol en Preview hasiln tampil hitunga selamat datan

Gambar 68 tampilan preview halaman opening

Setelah tombo halaman judul pada layer tom

Gambar 69 Halaman judul pada frame 45

ma_tombol == "enter"){ gotoAndStop(45); }

enter di klik, maka tampilan akan menuju ke fra silnya dengan menekan tombol CTRL+ENTE gan waktu mundur dari 9 menuju 1, dilanjutkan ang dan di akhiri dengan kemunculan tombol e

Gambar 68 tampilan preview halaman opening

bol enter di klik, maka akan tampil isi frame dul. Halaman judul ini terdiri dari 6 buah tombo tombol. Sementara tulisan judul dibuat pada lay

Gambar 69 Halaman judul pada frame 45

frame 45

TER. Maka akan an animasi tulisan l enter

Gambar 68 tampilan preview halaman opening

e 45 yang berisi bol dan diletakkan layer sambutan.