Tip dan Trik 2

Pada tutorial sebelumnya sudah dibahas, bagaimana “menampilkan” file Flash menggunakan perintah loadMovieNum. Kelemahan dari perintah loadMovieNum adalah file yang di-load akan “mengambil alih” file “yang menampilkan”. Dengan demikian, Anda perlu mengatur agar kedua file tidak saling menumpuk.

Ada perintah lain yang memungkinkan Anda mengatur “letak” file yang ditampilkan, yaitu menggunakan perintah loadMovie.

Pertama, siapkan dua animasi Flash berupa file berekstensi swf, misalnya: animasi1.swf dan animasi2.swf.

Kedua, buat file kerja baru Flash, beri nama: loadMovie.fla. Untuk memudahkan pengalamatan, letakkan ketiga file di folder yang sama.

Ketiga, buat klip movie kosong, dengan cara klik menu Insert | New Symbol atau tekan Ctrl + F8. Beri nama Name: target dan Type: Movie clip. Biarkan klip movie kosong. Buka panel Library, klik, seret dan letakkan klip movie target ke stage. Letaknya akan menentukan kiri atas klip movie yang akan ditampilkan. Pada panel Properties, ganti <Instance Name> menjadi target.

Ketiga, impor dua tombol dari Window | Common Libraries | Buttons. Satu tombol untuk menampilkan animasi1, lainnya untuk menampilkan animasi2.

Keempat, klik tombol pertama, di jendela Actions – Button, ketik:

on (press){

        loadMovie(“animasi1.swf”, “target”);

}

Kelima, klik tombol kedua, di jendela Actions – Button, ketik:

on (press){

       loadMovie(“animasi2.swf”, “target”);

}

Keenam, publish dengan menekan Ctrl + Enter atau tekan Control | Test Movie.

Tip dan Trik

Salah satu “kelemahan” animasi Flash, terutama jika ditampilkan secara online, adalah waktu loading yang relatif lama. Ini disebabkan, biasanya, karena ukuran file yang relatif besar. Untuk itu, diperlukan suatu kiat “memperkecil” ukuran file dengan “memecah menjadi beberapa file berukuran kecil”, kemudian menampilkan file yang dianggap perlu saja.  Hal ini bisa dilakukan dengan menggunakan “fitur”: loadMovie dan loadMovieNum.

Pertama, siapkan animasi Flash berupa file berekstensi swf, misalnya: animasi.swf.

Kedua, buat file kerja baru Flash, beri nama: loadMovieNum.fla. Untuk memudahkan pengalamatan, letakkan kedua file di folder yang sama.

Ketiga, impor dua tombol dari Window | Common Libraries | Buttons. Satu tombol untuk menampilkan, lainnya untuk “menghapus” animasi.

Keempat, klik tombol pertama, di jendela Actions – Button, ketik:

on (press){

          loadMovieNum(“animasi.swf”, 1);

}

Kelima, klik tombol kedua, di jendela Actions – Button, ketik:

on (press){

          unloadMovieNum(1);

}

Keenam, publish dengan menekan Ctrl + Enter atau tekan Control | Test Movie.

Menampilkan Teks

 

Tutorial ini membahas materi pembuatan teks dinamis untuk menampilkan teks yang terdiri atas lebih dari satu baris. Anda dapat menerapkannya untuk menampilkan uraian/paparan materi pembelajaran.

  1. Aktifkan Flash. Buat file baru, beri nama scrollText.fla.

  2. Buat kotak teks dinamis. Di panel properties, atur lebar (W) 300 dan tinggi (H) 150. Beri nama myText_txt. Atur jenis font dan ukurannya. Pastikan warna font tidak sama dengan warna background. Pilih multiline, untuk menampilkan teks lebih dari satu baris. Non aktifkan opsi Show border around text.

clip_image002

  1. Klik Windows | Components. Pilih UIScrollBar. Klik, tahan, geser lalu sisipkan tepat di sisi kanan kotak teks dinamis.

clip_image004

  1. Klik panel Action, salin skrip berikut:

myData = new LoadVars();

myData.onLoad = function() {

myText_txt.text = this.myVar;

};

myData.load(“contents.txt”);

clip_image006

  1. Letakkan komponen scrollbar, teks dan script di layer secara terpisah. Lakukan dengan mengklik Insert layer.

clip_image008

  1. Aktifkan Notepad. Buat file baru. Ketikkan teks yang akan dimuat, awali dengan “myVar=”

myVar=PakarTI adalah sekelompok pakar di bidang TI (Teknologi Informasi) atau para pemerhaTI.

Kami berkonsentrasi mengembangkan pakarTI (perangkat pembelajaran berbasis Teknologi Informasi). Sejumlah pakarTI telah dikembangkan, antara lain: game matematika, tts matematika dll. Jika anda tertarik, kunjungi blog http://pakarti.wordpress.com.

Kami juga membahas seputar matematika di situs http://matemania.wordpress.com.

 

clip_image010

  1. Simpan file dan beri nama contents.txt. Agar file teks tidak berubah, beri atribut read only. Klik kanan file contents.txt, klik Properties. Pada Attributes, centang pilihan Read-only, lalu klik Apply.

clip_image012

  1. Jalankan. Tekan Ctrl + Enter atau klik menu Control | Test Movie.

clip_image014

  1. Scroll (gulung) bar di sisi kanan.

clip_image016

PakarTI dari Flash

Praktikum matakuliah PBKom (Pembelajaran Berbantuan Komputer), Selasa (1/5) ditiadakan, karena bertepatan dengan jadwal ujian tengah semester (UTS). Praktikum dimulai lagi pada Selasa (15/5).

Selama dua minggu, Anda tetap bisa mempelajari materi praktikum, dengan mengakses panduan praktikum #1: berbincang dengan ActionScript.

Berikut juga saya lampirkan contoh PakarTI (Perangkat Ajar Berbasis TI), komponen kubus, yang dikembangkan menggunakan Flash.

DotNet5

Note: Jika tautan error (tidak berfungsi), karena WordPress mempermasalahkan redirect page, silahkan akses blog alternatif di Blogspot: http://matemania2.blogspot.com/2012/04/pakarti-dari-flash.html.

Selamat belajar.

Kode Keyboard

ActionScript
ActionScript

Saya menerima pertanyaan, melalui email dan Facebook, dari sejumlah mahasiswa yang akan mengembangkan pakarTI (paket ajar berbasis Teknologi Informasi) menggunakan Adobe Flash. Salah satu pertanyaan yang mengemuka, “Bagaimana mengontrol animasi Flash menggunakan keyboard?”.

Diantaranya dari mahasiswa yang akan mengembangkan pakarTI bagi siswa tunanetra. Terus terang saya salut akan ke’peduli’annya, sehingga saya merelakan diri menjawabnya, dengan menulis tutorial ini, segera setelah menerima pesan sekalipun sudah tengah malam.

Disamping itu, ini merupakan suatu bentuk kepedulian saya karena telah “mengompori” (baca: memotivasi) mereka ketika mengajar matakuliah Algoritma Pemrograman dan Pembelajaran Berbantuan Komputer untuk membuat aplikasi menggunakan Flash. Pada sisi lain, saat ini saya tidak bisa membimbing mereka karena sedang tugas belajar.

Pada intinya, mengontrol animasi menggunakan keyboard, dapat dilakukan menggunakan: Key Event (Key Press Event) dan Key Object.

Key Press Event

Pertama, buat instance tombol. Anda dapat meletakkannya di dalam atau di luar stage, karena tombol ini hanya sebagai perantara.

Kedua, konversi menjadi simbol. Klik Insert | Convert to Symbol. Beri nama dan pastikan behavior-nya tombol (button).

Katiga, buka Windows | Library. Drag simbol tombol ke (dalam atau luar) stage.

Keempat, seleksi tombol, beri ActionScript, misal:

on (keyPress) "<Left>"){
    prevFrame ();
}

Kelima, Test Movie.

Key Object

Metode yang sering digunakan adalah isDown. Format skripnya:

Key.isDown(KodeKeyboard)

Penulisan kode keyboard dapat dilakukan dengan dua cara, yaitu:

Key.isDown(Key.ENTER)

atau

Key.isDown(13)
Sebagai contoh, ketika pengguna (user) mengklik tombol Enter, agar animasi dimainkan, gunakan skrip:
if (Key.isDown(Key.ENTER)){
    play();
}
Demikian tutorial mengontrol animasi menggunakan keyboard. Semoga bermanfaat.
Sebagai lampiran, berikut saya sertakan ringkasan kode  keyboard
Kode 

8

9

12

13

16

17

18

20

27

32

33

34

35

36

37

38

39

40

45

46

47

Tombol 

Backspace

Tab

Clear

Enter

Shift

Control

Alt

Caps Lock

Esc

Spacebar

Page Up

Page Down

End

Home

Left Arrow

Up Arrow

Right Arrow

Down Arrow

Insert

Delete

Help

[tweetmeme only_single=”false”]
Enhanced by Zemanta

Kartu Tebak Bilangan

Kartu

Pada panduan praktikum 3:berMAIN dengan ActionScript, saya telah membahas bagaimana membuat kartu tebak bilangan 1 s.d 7.  Berdasarkan tutorial tersebut, sebenarnya anda dapat mengembangkannya menjadi kartu tebak bilangan 1 s.d 15 atau kartu tebak bilangan 1 s.d 31 atau lebih banyak lagi.

Aplikasinya, anda dapat menebak tanggal dan bulan kelahiran seseorang tanpa menyebutkannya terlebih dulu.

Pertama, petakan bilangan 1 s.d 31 menjadi penjumlahan 20, 21, 22, 23, dan 24 seperti nampak pada tabel berikut.

Bilangan 20 21 22 23 24 25
1 1 0 0 0 0 0
2 0 1 0 0 0 0
3 1 0 1 0 0 0
4 0 0 1 0 0 0
5 1 0 1 0 0 0
6 0 1 1 0 0 0
7 1 1 1 0 0 0
8 0 0 0 1 0 0
9 1 0 0 1 0 0
10 0 1 0 1 0 0
11 1 1 0 1 0 0
12 0 0 1 1 0 0
13 1 0 1 1 0 0
14 0 1 1 1 0 0
15 1 1 1 1 0 0
16 0 0 0 0 1 0
17 1 0 0 0 1 0
18 0 1 0 0 1 0
19 1 1 0 0 1 0
20 0 0 1 0 1 0
21 1 0 1 0 1 0
22 0 1 1 0 1 0
23 1 1 1 0 1 0
24 0 0 0 1 1 0
25 1 0 0 1 1 0
26 0 1 0 1 1 0
27 1 1 0 1 1 0
28 0 0 1 1 1 0
29 1 0 1 1 1 0
30 0 1 1 1 1 0
31 1 1 1 1 1 0

Kartu

Kedua, pilah bilangan yang merupakan 20, 21, 22, 23, dan 24

Kartu 20

1 3 5 7
9 11 13 15
17 19 21 23
25 27 29 31

Kartu 21

2 3 6 7
10 11 14 15
18 19 22 23
26 27 30 31

Kartu 22

4 5 6 7
12 13 14 15
20 21 22 23
28 29 30 31

Kartu 23

8 9 10 11
12 13 14 15
24 25 26 27
28 29 30 31

Kartu 24

16 17 18 19
20 21 22 23
24 25 26 27
28 29 30 31

Flash Video Tutorial

Panduan praktikum

Berikut merupakan tutorial video dalam format file SWF. Klik link berikut untuk memainkan. Kecepatan memainkan tergantung spesifikasi komputer dan bandwidth Internet. So, sabar ya. Jangan lupa, berikan komentar terbaik anda untuk kesempurnaan tutorial video ini.

  1. Panduan membuat klip bola mengikuti alur, unduh
  2. Panduan membuat klip memulai Flash, unduh
  3. Panduan membuat klip bola menggelinding, unduh
  4. Panduan membuat klip garis dinamis, unduh
  5. Panduan membuat klip lampu disko, unduh
  6. Panduan menulis teks unduh

Agendakan berkunjung secara periodik untuk memastikan anda tidak ketinggalan sesuatu yang lebih menarik

Membuat Jam dan Kalender

Tutorial ini merupakan pelengkap Panduan Praktikum 1: beKERJA dengan TEKS

Membuat Jam Digital

  1. Buat teks dinamis. Pada panel Properties, beri nama var = arloji.
  2. Seleksi teks dinamis, kemudian Convert to Symbol beri nama arloji_mc dan behavior movie clip.
  3. Pada panel Actions | Movie Clip, tuliskan skrip berikut:
// -- membuat jam digital --
// -- http://edywihardjo.blog.unej.ac.id --
onClipEvent (enterFrame) {
     myDate = new Date();
          jam = myDate.getHours();
          menit = myDate.getMinutes();
          detik = myDate.getSeconds();
          if (jam == 0) {
               jam = 12;
          } else if (jam>12) {
          jam = jam-12;
     }
     if (menit<10) {
          menit = "0"+menit;
     }
     if (detik<10) {
          detik = "0"+detik;
     }
     arloji = jam+" : "+menit+" : "+detik;
}

Membuat Kalender

  1. Pada panel Actions | Frame di frame 1, tuliskan skrip berikut:
  2. // -- membuat jam digital --
    // -- http://edywihardjo.blog.unej.ac.id --
    // -- nama hari --
    hari = new Array();
    hari[0] = "Minggu";
    hari[1] = "Senin";
    hari[2] = "Selasa";
    hari[3] = "Rabu";
    hari[4] = "Kamis";
    hari[5] = "Jum'at";
    hari[6] = "Sabtu";
    // -- nama bulan --
    bulan = new Array();
    bulan[0] = "Januari";
    bulan[1] = "Februari";
    bulan[2] = "Maret";
    bulan[3] = "April";
    bulan[4] = "Mei";
    bulan[5] = "Juni";
    bulan[6] = "Juli";
    bulan[7] = "Agustus";
    bulan[8] = "September";
    bulan[9] = "Oktober";
    bulan[10] = "November";
    bulan[11] = "Desember";
  3. Buat teks dinamis. Pada panel Properties, var = kalender.
  4. Seleksi teks dinamis, kemudian Convert to Symbol dengan nama kalender_mc dan behavior movie clip.
  5. Pada panel Actions, tuliskan skrip berikut:
onClipEvent (enterFrame) {
     myCalender = new Date();
     tanggal = myCalender.getDate();
     hari = myCalender.getDay();
     bulan = myCalender.getMonth();
     tahun = myCalender.getFullYear();
     kalender = _root.hari[hari]+", "+tanggal+" "+_root.bulan[bulan]+" "+tahun;
}