MATERI 1OPERASI DASAR DALAM FLASH

PendahuluanFlash adalah produk perangkat lunak yang sudah cukup populer sebagai alat bantu untuk membangun aplikasi yang berbasis multimedia. Tidak hanya kepopulerannya yang membuat Flash dipilih sebagai alat bantu utama dalam praktikum ini, tetapi juga karena banyak hal lain, terutama karena kemudahannya (setidaknya, lebih mudah dibandingkan perangkat lunak alat bantu pengembangan lain, terutama bahasa pemrograman murni yang tidak dibuat secara khusus untuk pengembangan aplikasi multimedia dengan cepat). Untuk dapat menggunakannya sebagai alat bantu utama dalam membangun aplikasi CAI, maka diperlukan pemahaman terhadap beberapa hal mendasar dalam Flash.

Tujuan Mengetahui dan memahami obyek beserta sifatnya dalam Flash. Dapat memanfaatkan prinsip penggunaan layer dalam Flash. Mendapatkan pemahaman tentang pewarnaan suatu obyek. Mencoba membuat beberapa sampel animasi sederhana. Menggabungkan beberapa animasi dalam suatu urutan tampilan.

Tool yang digunakanMacromedia Flash 8

KonsepSetelah Anda mengetahui antarmuka utama Flash (dalam istilah teknis bahasa pemrograman umumnya disebut dengan IDE atau Integrated Development Environment), maka perlu dipahami bagaimana cara Flash dapat dimanfaatkan agar mendapatkan hasil berupa suatu aplikasi siap pakai yang menggunakan berbagai elemen multimedia untuk meningkatkan kualitas visualisasi dari isi aplikasi yang hendak disampaikan (misalnya materi dalam aplikasi CAI). Karena antarmuka utama Flash sendiri memungkinkan pengguna untuk dapat membuat aplikasi dan elemen aplikasi dengan cepat menggunakan klik dan dobel klik mouse serta sedikit keyboard, maka hasilnya selain cepat didapat juga tidak memaksa pengguna untuk menuliskan baris-baris kode dalam jumlah banyak yang terkadang membuat pengguna langsung surut keinginannya untuk mempelajari.

Praktikum kali ini akan memperlihatkan kepada Anda apa saja hal mendasar yang perlu diketahui saat menggunakan Flash. Dimulai dari obyek serta beberapa atributnya, bagaimana layer dapat mempermudah dan mempercepat pembuatan obyek, ragam cara memberikan pewarnaan pada obyek dalam Flash, serta beberapa bentuk animasi dasar yang dapat dibangun dengan cepat menggunakan Flash.

1. Sifat Obyek Dasar FlashDidalam Flash terdapat berbagai macam obyek yang sangat unik diantaranya yaitu oval tool (yang sering digunakan untuk menggambar sebuah lingkaran) dan rectangle tool (yang sering digunakan untuk menggambar sebuah bujur sangkar atau persegi panjang). Kedua tool tersebut bersifat paten yakni sudah menjadi bawaan Flash itu sendiri.

1

Kedua obyek tool tersebut (oval tool & rectangle tool) terdiri dari dua bagian yaitu: Outline dan fill. Outline merupakan bagian terluar dari obyek tersebut, sedangkan fill merupakan bagian terdalam dari obyek tersebut yang dapat diisi dengan warna. Untuk lebih jelas kita lakukan percobaan. Langkah pertama, kita membuat obyek pada stage dengan menggunakan

rectangle tool.

Gambar 1

Setelah kita membuat obyek pada stage. Lalu double klik pada obyek apabila ingin menggeser atau memindahkannya.

Jika kita mengklik sekali pada obyek, maka bagian fill obyek akan terpisah dari outline nya.

Gambar 2

Outline & Fill dapat disatukan dengan cara membuatnya menjadi satu grup, yaitu dengan perintah: Group (dapat dipilih melalui menu Modify > Group)

2

atau dengan cara menekan tombol Ctrl+G secara bersamaan. Tetapi sebelum Anda menjadikan Outline & Fill menjadi satu grup yang harus Anda lakukan adalah memblok seluruh bagian Outline & Fill hingga terlihat seperti gambar 3.1. Jika telah diblok maka Anda harus membuatnya menjadi satu grup dengan cara yang telah dijelaskan diatas.

Gambar 3.1 fill ungrouped Gambar 3.1 fill grouped

Selanjutnya yaitu penggunaan free transform jika kita ingin memperbesar atau memperkecil obyek, caranya kita pilih obyek dengan klik dua kali lalu klik kanan pada obyek maka akan muncul pilihan dan kita pilih free transform.

Hasilnya obyek akan berubah menjadi pada gambar 4.1 yaitu gabungan antara scale dan rotate sekaligus. Setelah selesai kita bisa memperbesar dan memperkecil obyek.

Pada gambar 4.2 adalah contoh apabila kita ingin memutar obyek. Caranya yaitu dengan meletakan cursor pada sisi obyek sehingga cursor berubah menjadi obyek.

Gambar 4.1 Gambar 4.2

Selanjutnya apabila kita ingin menyalin obyek, maka tekan alt pada tombol keybord lalu objectnya. Kemudian digeser ke sebelah obyek yang kita buat.

2. Penggunaan Obyek dan Layer Pada pembahasan obyek dan layer. Kita buat dulu 2 obyek yaitu bulat dan

kotak seperti gambar 5. jangan lupa beri warna yang berbeda pada obyek.

Gambar 5

3

Setelah selesai membuat obyek, coba klik dua kali pada obyek bulat dan geser ke obyek kotak. Dan hasilnya obyek kotak tidak akan terjadi perubahan selama obyek bulat tadi masih aktif. Hasilnya pada gambar 6.1 dan gambar 6.2.

Gambar 6.1 Gambar 6.2

Gambar kotak akan berubah apabila pada obyek bulat diatas obyek kotak tidak aktif dan apa di aktifkan kembali pada obyek bulat, maka akan terjadi obyek bulat akan meninggalkan bekas pada obyek kotak. Seperti gambar 7.1 dan gambar 7.2

Gambar 7.1 Gambar 7.2

‘Kerusakan’ obyek diatas terjadi karena kedua obyek tersebut dalam satu layer dan akan berbeda apabila salah satu obyek berada di layer yang berbeda.

Agar dapat berada pada layer berbeda, kita Cut pada obyek gambar kotak lalu kita buat layer baru dengan memilih insert layer.

Setelah selesai, kita klik kanan pada layer baru atau layer 2 dan pilih paste in place. Maka akan tampil hasil pada gambar 8 dimana paste in place berguna sebagai hasil pastenya akan memposisikan obyek dimana kita cut tadi.

Gambar 8

4

Sekarang posisi obyek bulat dan obyek kotak berada di layer yang berbeda. Dan sekarang bebas melakukan pemindahan obyek tanpa harus meninggalkan bekas apabila salah satu obyek tidak aktif.

3. Dasar – Dasar Pewarnaan Obect Pada FlashUntuk memberikan efek yang baik pada suatu animasi adakalanya kita harus mengatur warna suatu obyek agar terlihat menarik. Dalam pewarnaan suatu obyek pada Flash kita dapat menggunakan berbagai macam tools, diantaranya yaitu:a. Color Mixer.b. Color Swatches.c. Paint Bucket Tools.d. Ink Bottle Tools.e. Brush Tools.f. Fill Transform Tools. (Untuk mengatur efek warna radial)Jika Anda menginginkan animasi yang Anda buat mempunyai tampilan menarik dan indah, maka Anda harus memberi efek warna yang baik pula. Oleh karena itu kali ini kita akan belajar bagaimana memberikan efek warna pada suatu obyek agar terlihat lebih sesuai keinginan.

Memberi warna dengan Color Mixer & Color SwatchesUntuk memberi efek warna pada obyek pada Flash hanya membutuhkan 2 color tool, yaitu: Color Mixer & Color Swatches. Saat ini kita akan membahas tentang bagaimana cara menggunakan tools tersebut.

Gambar 9. color mixer

Didalam Color mixer terdapat 5 macam type fill:1. None – tidak memberi warna apapun pada fill.2. Solid – memberi warna padat pada fill.3. Linier – memberi warna berbentuk linier pada fill.4. Radial – memberi efek warna radial pada fill.5. Bitmap – memberi image pada fill. (untuk mengimpor file gambar

gunakan import to library pada file menu).Untuk memberi warna pada obyek yang ditentukan, Anda harus menggunakan tools yang bernama paint bucket tool. Biasanya yang diberi warna pada obyek

5

ialah fill-nya saja. Untuk memberi warna pada outline, Anda harus menggunakan ink bottle tool.Pada pojok kanan window color mixer terdapat R, G, B (yang biasa disebut sebagai penentu warna). R(Red) digunakan untuk memberi nilai seberapa besar kemerahan warna obyek tersebut. G(Green) digunakan untuk memberi nilai seberapa besar kehijauan warna obyek tersebut. B(Blue) digunakan untuk memberi nilai seberapa besar kedalaman warna biru pada obyek tersebut. Alpha memberi efek warna transparan pada obyek yang dituju.

Gambar 10.

Pada color swatches untuk memberi warna pada obyek prinsipnya sama saja dengan color mixer, yang membedakannya yaitu kalau pada color mixer Anda dapat mencampurkan berbagai warna sekaligus memodifikasinya menjadi suatu efek warna sesuai dengan keinginan Anda. Tetapi kalau pada color swatches efek warna sudah ditentukan oleh system. Melalui color mixer Anda dapat membuat warna baru di color swatches.

Mengatur Tata letak warna pada ObyekUntuk mengatur tata letak warna pada obyek dapat menggunakan tool yang bernama Fill Transform tolls. Cara menggunakannya yaitu :1. Pilih seluruh area dari obyek tersebut. Kemudian pilih Fill Transform Tool

dari Tools Box.2. Setelah itu klik kembali obyek yang akan diatur warnanya. Maka hasilnya

akan seperti gambar dibawah ini.

Gambar 10.

Selain cara-cara diatas Anda masih dapat mengontrol warna lewat tools box. Hanya saja warna pilihan untuk outline beserta fill bersifat solid. Kunci kesuksesan dalam membuat suatu animasi bersifat interaktif terletak dalam pengaturan warnanya. Jika Anda memberikan warna yang solid saja pada animasi Anda maka animasi yang Anda buat tersebut akan terlihat kurang menarik. Karena itu efek warna sangat diperhitungkan dalam pembuatan suatu animasi.

6

4. Latihan: membuat obyek ‘pesawat antariksa’ Pada materi membuat pesawat antariksa, disini tidak di jelaskan cara

pembuatan pesawat antariksa namun di materi ini di tuntut untuk membuat pesawat antariksa dengan sendiri dan sesuai imaginasi masing-masing.

Dalam membuat obyek pesawat antariksa bisa menggunakan alat-alat yang ada di tool box.

Contoh pesawat antariksa di tampilkan pada gambar 11

Gambar 11.

5. Fungsi Penting Symbol Setelah proses membuat pesawat antariksa selesai, lalu kita kita jadikan

sebagai obyek symbol. Langkah pertama yang dilakukan adalah drag pada obyek seluruhnya lalu klik

kanan pada obyek dan pilih convert to symbol. Maka akan muncul window seperti pada gambar 12.

Gambar 12.

Setelah muncul window convert to symbol, pada pilihan behavior pilih graphic dan pada nama diganti dengan kapal lalu klik tombol ok, dan obyek secara otomatis akan masuk ke panel library.

Untuk membuktikannya, pada stage kita clear dan kita buka panel library dengan cara. Pilih window pada tool bar dan cari library lalu klik. Maka akan muncul window libray seperti pada gambar 13.

Gambar 13.

7

Keuntungan kita memakai obyek symbol yaitu kita bisa melakukan drag apabila menginginkan obyek lebih dari satu. Contoh akan tampak pada gambar 14.

Gambar 14

Selanjutnya apabila ingin mengedit obyek pesawat seluruhnya kita dapat mengedit cukup dengan satu pesawat.

Caranya klik kanan pada obyek yang bernama kapal di panel library dan pilih edit. Lalu setelah selesai mengedit, untuk kembali kita pilih scene seperti gambar 15.

Gambar 15

Jangan lupa untuk mengganti warna background. Misalnya seperti gambar 16.

Gambar 16

8

6. Efek Warna Dengan Motion Shape Pada bagian materi ini ialah kita bisa menggantikan warna obyek symbol yang

di letakan pada scene utama. Dengan cara kita drag semua obyek dan akan muncul properties lalu pada color kita pilih advanced seperti pada gambar 17.

Gambar 17 Setelah selesai memilih advanced lalu klik settings dan muncul window

properties advanced effect. Seperti gambar 18.

Gambar 18.

Dan kita bisa menggantikan warna pada obyek. Namun yang perlu diingat fungsi ini berlaku pada obyek yang telah diijadikan symbol.

Setelah pemberian efek warna pada obyek selesai, lalu kita coba membuat tampilan efek animasi.

Pertama kali kita display di frame 35 kemudian kita klik lalu klik kanan dan pilih insert frame. Hasilnya akan seperti gambar 19

Gambar 19

9

Kegunaan frame ini ialah untuk menampilkan panjangnya waktu dalam display tampilan.

Lalu pada layer kita gantikan dengan nama kapal. Dengan cara klik dua kali lalu kita ketikan kapal. Tampak seperti pada gambar 20.

Gambar 20

Selanjutnya buat layer baru, yang berfungsi sebagai tampilan background dan ganti layer tersebut dengan nama bgn jangan lupa layer bgn di drag lalu letakkan di bawah layer kapal. Keterangan pada gambar 21

Gambar 21

Sebelum kita buat tampilan backgroundnya, kita lock dulu kapal. Keterangannya pada gambar 21.

Lalu kita buat background dan pilih rectangle tool kemudian buat kotak yang menutupi background. Jangan lupa kotak tersebut kita beri warna gradasi.

Stage selanjutnya pada layer bgn yaitu timeline 35 klik dan klik kanan lalu pilih insert keyframe.

Fungsi keyframe disini sebagai membuat tampilan animasi. Selanjutnya kita menerapkan animasi motion shape, yaitu klik antara dua

keyframe, misalnya di 15 dan pada properties pilih shape lalu arahkan pointer pada keyframe pertama.

Dan atur pewarnaan gradasi dengan fill transform lalu hasilnya akan pada gambar 22.

10

Gambar 22

Lalu kita drag ke depan dan kita klik 35 lalu kita drag ke belakang. Hasilnya pada gambar 23.1 dan gambar 23.2

Gambar 23.1 gambar 23.2

Setelah selesai untuk uji coba, bisa dilakukan dengan cara pilih control pada tool bar lalu pilih test movie.

Dalam animasi seperti ini yang bergerak sebenarnya hanya background saja.

7. Menggunakan Scene Pada selanjutnya kita mempelajari scene atau teknik frame by frame. Pertama kali kita memunculkan panel scene, yaitu dengan memilih Window

Design Panel Scene. Dan akan muncul gambar 24.

Gambar 24

11

Pada gambar 24, scene bisa dikatakan sebagai bagian-bagian dari episode sebuah movie dan dikatakan episode dikarenakan dalam satu scene dapat ditampilkan begitu banyak animasi dengan multi obyek.

Pada langkah selanjutnya kita masukkan scene baru, dan yang akan muncul 2 buah scene, diamana pada scene pertama yaitu menampilakan animasi kapal yang kita buat. Dan scene kedua masih kosong.

Lalu untuk membedakan agar lebih mudah, pada scene pertama kita ganti nama dengan main dan scene yang kedua kita ganti dengan intro. Dengan cara kita klik dua kali pada scene pertama.

Yang perlu diingat, scene intro diposisikan sebagai yang pertama dan dibawahnya main.

Selanjutnya kita klik intro dan akan diterapkan teknik animasi frame by frame. Yaitu dengan mengklik text dan kita letakan pada stage. Dan kita beri warna pada font warna putih lalu tebalkan font dengan memilih Bold pada properties text, Setelah selesai kita ketikan angka 0. Perlu diingat atur besar kecilnya font.

Gambar 25

Setelah kita mengatur posisi font, lalu klik pada frame 10 dan klik kanan lalu pilih Insert Keyframe.

Selanjutnya letakan Cursor kita di tengah antara frame 1 dan frame 10, lalu klik dua kali dan klik kanan kemudian pilih Convert To Keyframe. Dan hasilnya akan tampak pada gambar 26.

12

Gambar 26

Lalu kita masukkan angka sesuai urutan antara 0 - 9 dimulai dari key frame 1 sampai key frame 10.

Setelah selesai kita rubah nama layer degan nama angka. Untuk mengetes pilih letakan cursor pada key frame 1 dan pili Control play.

Untuk langkah terakhir kita jadikan dengan file movie. Yaitu memilih File Export Movie dan kita beri nama movie.swf.

13

MATERI 2SPLASH

PendahuluanPada saat ini kebanyakan program saat dijalankan akan memunculkan tampilan awal sebelum memasuki tampilan antarmuka utamanya. Tampilan awal yang dalam pemrograman disebut dengan Splash ini memiliki berbagai macam tujuan/kegunaan, dan dapat ditampilkan dalam berbagai cara. Sekalipun terlihat bukan sebagai hal penting, tetapi Splash ternyata telah menjadi bagian yang hampir tidak terpisahkan dari kebanyakan program modern terutama yang telah menerapkan prinsip multimedia.

Tujuan Membuat sebuah sampel Splash menggunakan Flash. Membentuk Splash dinamis yang memanfaatkan kemampuan animasi dari

Flash.

Tool yang digunakanMacromedia Flash 8

KonsepSplash adalah bagian terintegrasi dari kebanyakan program modern saat ini. Dalam dunia perancangan antarmuka ke pengguna (UID, User Interface design), Splash telah menjadi bagian penting yang perlu dibicarakan secara khusus. Arti pentingnya semakin menonjol mengingat Splash adalah tampilan pertama yang muncul saat program dijalankan, sehingga menjadi obyek pertama yang dilihat oleh pengguna dan memberitahukan kepada mereka bahwa program telah merespon perintah kerja yang diberikan oleh pengguna.Dalam penggunaannya, Splash dapat dirancang dan dibuat untuk hanya muncul sebentar saja di awal eksekusi program, atau dibuat untuk menunggu respon pengguna (misalnya klik tombol mouse atau penekanan tombol pada keyboard oleh pengguna), atau dibuat supaya memiliki kombinasi sifat tersebut (Splash hanya muncul sebentar dan dapat hilang sendiri dari pandangan, tetapi dapat juga dipercepat hilangnya dari layar oleh respon pengguna). Bentuk ketiga sering dipilih manakala Splash membawa banyak informasi sehingga perlu ditampilkan cukup panjang, tetapi memungkinkan untuk dipercepat tatkala pengguna telah sering melihatnya (sehingga memunculkan efek bosan) atau informasinya tidak dirasa menarik/penting oleh pengguna. Manapun metode yang dipilih untuk digunakan, pada dasarnya semua memiliki fungsi yang sama yang menjadi tujuan dibuatnya Splash.Saat ini Splash banyak digunakan untuk beragam keperluan, diantaranya:

1) memperkenalkan program tersebut kepada pengguna, 2) memberi gambaran singkat tentang program, 3) membuat kesan awal agar pengguna tahu akan mendapatkan apa, menjadi

pengalih perhatian saat menunggu (biasanya ditambahi meteran persentase proses, semisal dalam bentuk progress bar),

4) ataupun hanya untuk memberitahukan bahwa program telah mulai bekerja seperti diperintahkan oleh pengguna.

14

Berbagai macam informasi dapat diletakkan pada Splash, sehingga Splash dapat berisi keterangan tertentu, atau bahkan hanya judul program saja yang disertai beberapa informasi penyerta. Tetapi sebaiknya informasi tersebut dibuat agar nampak ringkas/singkat karena seperti namanya, Splash seharusnya hanya muncul sesaat saja, sehingga bilamana terlalu banyak informasi dalam Splash maka dikhawatirkan tidak akan sempat dibaca oleh pengguna. Setidaknya yang umumnya perlu muncul adalah judul aplikasi, disertai nomor versi, serta pembuat dan waktu pembuatan. Informasi lain hanyalah tambahan, dan dapat diletakkan sebagai pilihan tersendiri, baik pada Splash tersebut ataupun bagian lain dari aplikasi.

Tampilan dari hasil latihan yang akan dikerjakan

Langkah PengerjaanPembuatan sampel splash untuk calon aplikasi CAI ini akan dilakukan dalam beberapa tahapan langkah sebagai berikut:A. Persiapan

1. Jalankan Flash 2. Pilih dokumen Flash baru3. Atur tampilan untuk memudahkan pandangan saat pembuatan4. Untuk saat ini gunakan ukuran antarmuka aplikasi sesuai default dari Flash,

tidak perlu diubah menjadi lebih besar atau lebih kecil.B. Pembuatan obyek awal tampilan

Splash yang akan dibuat merupakan kombinasi beberapa animasi sederhana, oleh karena itu harap diingat kembali teknik-teknik sederhana yang disampaikan dalam pertemuan sebelumnya sebagai dasar Anda membuat splash dalam praktikum kali ini. Sebagai animasi pertama yang digunakan dalam splash adalah teknik animasi Motion Shape. 1. Untuk awalnya, ubah dulu warna latar dari stage aplikasi Anda.

Perhatikan pada bagian property inspector, ubahlah warna tersebut, misalnya menjadi biru muda

2. Kemudian klik pada Oval Tool (O)Sebelum mulai menggambar suatu bulatan, ubah dulu propertinya agar sesuai keinginan. Dalam contoh ini bulatan tersebut akan diberi warna (Fill Color) orange, dan tidak memiliki garis tepi (Stroke Color)

15

3. Klik pada Stroke Color

4. Perhatikan pada bagian sudut kanan atas pilihan warna, terdapat 2 tombol, klik tombol kiri sehingga memunculkan garis menyilang diagonal yang menandakan tidak akan menggunakan warna

5. Kemudian klik pada Fill Color

6. Pilih warna merah muda atau warna apapun yang Anda inginkan7. Buatlah bulatan tersebut, posisi kiri tengah dari tampilan aplikasi8. Klik pada Selection Tool (V)9. Pilih bulatan tersebut dengan drag ataupun klik dobel pada bulatan10. Klik kanan pada bulatan11. Klik pada item menu Copy 12. Klik pada Insert Layer untuk menambahkan layer baru

13. Klik kanan pada tampilan aplikasi

16

14. Klik pada item menu Paste in Place 15. Sebelum dilanjutkan, akan lebih baik bila kedua layer diberi nama

khusus untuk memudahkan mengingatnya. Klik dobel pada layer pertama16. Beri nama bintang kemudian tekan tombol Enter17. Klik dobel pada layer ke-dua18. Beri nama bulatan kemudian tekan tombol Enter

19. Klik pada titik dalam layer bulatan di bawah gembok untuk mengunci layer ini

20. Klik pada layer bintang 21. Klik pada obyek bulatan yang Anda buat22. Beri warna berbeda pada obyek tersebut, misalnya kuning23. Ubahlah bentuk bulatan kuning tersebut menjadi bentuk lain, misalnya

menjadi berbentuk seperti bintang (atau bentuk apapun, terserah Anda)

C. Animasi obyek awal tampilan1. Klik dan drag pada frame ke-20 pada kedua layer untuk

menyeleksinya2. Klik kanan pada seleksi frame kedua layer tersebut3. Klik pada pilihan Insert Frame

4. Kemudian pilih juga frame ke-10 pada kedua layer5. Klik kanan pada pilihan frame tersebut6. Klik pada item menu Insert Keyframe

17

7. Kemudian drag pada frame ke-1 s/d frame ke-10 kedua layer

8. Perhatikan ke bagian bawah (property inspector), klik pada pilihan Tween

9. Pada pilihan yang ada, klik pada item Shape

10. Perhatikan tampilan frame pada Timeline di bagian atas Flash, terjadi perubahan menjadi seperti di bawah ini:

11. Tukarkan posisi layer dengan men-drag layer bulatan ke bawah12. Kunci layer bintang dan hilangkan dari pandangan

18

13. Klik pada layer bulatan 14. Klik pada obyek bulatan orange di tampilan aplikasi

Hal yang ingin dilakukan adalah membuat bulatan menjadi lebih kecil tetapi tetap di tempatnya. Salah satu cara adalah dengan menggunakan perubahan skala

15. Klik kanan pada obyek bulatan16. Klik pada pilihan Copy 17. Klik pada frame pertama layer bulatan ini18. Klik kanan pada sembarang tempat pada stage 19. Klik pada pilihan Paste in Place 20. Lihat pada property inspector, ubah warna Fill Color obyek bulatan

menjadi berbeda, misalnya kuning21. Klik pada Free Transform Tool (Q)

22. Klik pada tombol pilihan Scale pada bagian Options yang ada di bagian bawah Tools Box (tombol pilihan ini hanya muncul bila Free Transform Tool aktif)

23. Pada bingkai penanda fungsi transformasi bebas telah aktif, drag pada salah satu titik di sudut untuk mengecilkan ukuran bulatan tersebut. Bila saat Anda memperbesar atau memperkecil bulatan sepertinya titik tengah bulatan bergeser (berarti bulatan berpindah posisi), maka saat men-drag bulatan dapat sambil menekan tombol Alt pada keyboard agar titik tengah obyek bulatan tidak bergerak kemana-mana

19

24. Kunci layer bulatan dan hilangkan dari pandangan25. Kali ini buka kunci layer bintang serta munculkan

Agar animasi terlihat lebih bervariasi, maka obyek bintang juga akan dibuat memiliki animasi tersendiri

26. Klik pada frame pertama layer bintang27. Klik pada obyek bintang28. Klik kanan pada obyek tersebut29. Klik pada item menu Copy 30. Kemudian klik kanan pada bagian lain tampilan splash Anda ini31. Klik pada pilihan Paste in Place 32. Klik pada Free Transform Tool (Q) 33. Putar sedikit obyek bintang (kira-kira 45°) searah jarum jam 34. Klik pada sembarang area aplikasi/splash Anda 35. Lakukan percobaan, klik pada menu Control 36. Klik pilihan Test Movie

Rangkaian animasi seperti di bawah ini mungkin akan Anda dapatkan, kecuali Anda melakukan perubahan sendiri yang membuatnya menjadi berbeda

D. Memberikan efek animasi tambahan pada obyek Selanjutnya akan ditambahkan animasi yang akan terlihat memindahkan obyek yang telah dibuat ke sisi lain tampilan untuk kemudian kembali lagi. Frame yang tidak diperlukan hendaknya dihapus terlebih dahulu. Kali ini animasi yang akan digunakan adalah dari jenis Motion Tween.1. Drag pada frame ke-11 s/d 20 pada layer bulatan dan bintang 2. Klik kanan pada seleksi yang baru dibuat3. Klik pada item menu Remove Frames

4. Tambahkan sebuah layer baru, biarkan pada posisi paling atas dari semuanya

20

5. Klik dobel pada nama layer paling atas6. Beri nama layer tersebut sebagai perpindahan 7. Klik pada frame ke-11 layer perpindahan 8. Klik kanan pada frame tersebut9. Klik pada pilihan Insert Keyframe

10. Buka kunci dan tampakkan layer bintang dan bulatan 11. Klik pada Timeline ke-10 12. Lakukan drag untuk menyeleksi semua obyek pada layer bintang dan

bulatan yang nampak pada frame tersebut13. Klik kanan pada seleksi14. Klik pada pilihan Copy

15. Klik pada frame ke-11 layer perpindahan 16. Klik kanan pada ruang kosong area aplikasi17. Klik pada pilihan Paste in Place 18. Selanjutnya, kunci dulu layer bulatan dan bintang, hilangkan

sementara dari tampilan bila diperlukan19. Klik pada frame ke-30 dari layer perpindahan 20. Klik kanan pada frame tersebut21. Klik pada pilihan Insert Keyframe 22. Klik pada sembarang frame antara frame 12 s/d 3023. Klik kanan pada frame yang dipilih24. Klik pada item menu Create Motion Tween 25. Klik pada frame ke-3026. Klik kanan pada frame tersebut27. Klik pada pilihan Create Motion Tween 28. Perhatikan perubahan tampilan frame ke-11 s/d 30 pada Timeline.

Pastikan Anda masih berada pada frame ke-30 layer perpindahan

21

29. Klik pada obyek kombinasi bulatan dan bintang yang telah menyatu (otomatis menyatu dan dimasukkan ke pustaka aplikasi setelah dikonversi menjadi simbol karena memilih metode animasi Motion Tween)

30. Geser obyek tersebut ke sisi kanan tampilan splash31. Klik pada tombol Free Transform Tool (Q)32. Pada bagian Options, klik pada Scale 33. Perkecil ukuran obyek dengan men-drag pada salah satu titik pada

sudut bingkai34. Klik kembali Selection Tool (V)

Agar perubahannya nampak memiliki waktu tunda, maka posisi awal obyek akan diperlama dengan menyalin frame awal animasi ke bagian lain dari Timeline pada layer

35. Klik pada frame ke-1136. Klik kanan pada frame tersebut37. Klik pada item menu Copy Frames 38. Klik pada frame ke-1839. Klik kanan pada frame tersebut40. Klik pada pilihan Paste Frames 41. Klik pada frame ke-3042. Tambahkan jumlah frame layer perpindahan dengan men-drag

Timeline terakhir dari frame ke-30 ke frame ke-35

Kemudian agar obyek tidak nampak memantul, maka perlu dihentikan sesaat di sisi kanan layar. Hal ini dapat dilakukan dengan menambahkan keyframe baru.

43. Klik pada frame ke-4044. Klik kanan pada frame tersebut45. Klik pada pilihan Insert Keyframe 46. Klik pada frame ke-45 47. Klik kanan pada frame tersebut48. Klik pada pilihan Insert Keyframe

22

49. Masih tetap di frame ke-45, klik pada obyek di dalam tampilan aplikasi

50. Lihat ke property inspector, klik pada panah di samping pilihan Color 51. Klik pada pilihan Brightness

52. Akan muncul sebuah pilihan lain di samping kanannya. Klik pada panah tersebut

53. Bila muncul sebuah slider bar kecil, geser slider sampai ke puncak hingga angka di sampingnya menjadi 100%

54. Kemudian klik lagi frame ke-4055. Klik kanan pada frame tersebut56. Klik pada item menu Copy Frames 57. Klik pada frame ke-5058. Klik kanan pada frame tersebut59. Klik pada pilihan Paste Frames

E. Membuat animasi selanjutnya1. Klik pada frame ke-902. Klik kanan pada frame tersebut3. Klik pada pilihan Insert Keyframe 4. Klik pada obyek di frame ke-90 tersebut5. Geser obyek kembali ke kanan dengan men-drag obyek tersebut.

Untuk menjaga agar tetap lurus, pergeseran dapat dilakukan menggunakan keyboard, atau drag dengan mouse sembari menekan tombol Shift pada keyboard

6. Klik pada frame ke-507. Pada bagian property inspector, beri nilai pada Ease yaitu 100 (juga

bisa dilakukan dengan menggeser slider vertikal ke puncak)

23

8. Kemudian di bawahnya, klik pada panah disamping pilihan Rotate 9. Klik pada pilihan CW 10. Kemudian isikan nilai 4 ke bagian isian times

11. Coba dengan Test Movie

F. Membuat teks1. Klik pada frame ke-1302. Klik kanan pada frame tersebut3. Klik pada pilihan Insert Frame 4. Kunci layer perpindahan ini5. Klik pada Insert Layer di bagian daftar nama layer6. Klik dobel pada nama layer baru7. Beri nama pengganti yaitu teks 8. Klik pada frame ke-100 layer teks 9. Klik kanan pada frame tersebut10. Klik pada item menu Insert Keyframe 11. Masih pada frame ke-100, klik pada Text Tool (T)

12. Ubah properti teks pada Property Inspector di bagian bawah Flash, mulai dari ukuran font, berikan suatu nilai misalnya 20

13. Kemudian ubah warnanya agar cukup kontras dengan warna latar sehingga menonjol, semisal warna kuning

14. Kemudian agar teks ini terlihat semakin mengemuka, ubahlah jarak antar karakternya menjadi lebih renggang, misalnya diberi nilai 2 pada isian yang bertuliskan A V

15. Ketikkan suatu teks, misalnya “CAI Operasi Dasar Matematika”, ubah lagi propertinya bila perlu

24

16. Klik pada Selection Tool (V) 17. Sesuaikan letak teks dengan posisi logo serta teks itu sendiri secara

keseluruhan18. Klik pada menu Modify19. Klik pada pilihan Break Apart (Ctrl B)

20. Anda baru saja memisahkan tiap komponen teks menjadi elemen terpisah seperti gambar di bawah ini. Tetapi sekali Break Apart belum cukup, Anda harus melakukannya sekali lagi. Kembali lakukan langkah nomor 18 dan 19 di atas

21. Setelah 2x Break Apart, klik pada sembarang tempat di stage 22. Klik pada frame ke-11023. Klik kanan pada frame tersebut24. Klik pada item menu Insert Keyframe

25. Klik pada sembarang frame antara 101 s/d 10926. Klik pada panah di samping pilihan Motion 27. Klik pada pilihan Shape 28. Klik pada frame ke-110

25

29. Lakukan langkah nomor 26 & 27 di atas30. Klik pada frame ke-10031. Lakukan seleksi pada keseluruhan teks32. Hapus teks tersebut33. Klik pada Rectangle Tool (R) 34. Pada bagian Colors di panel Tools, hilangkan Stroke Color 35. Berikan Fill Color sesuai warna teks yang tadi dihilangkan36. Buat kotak di tempat yang sebelumnya berisi teks

37. Bila ingin mencocokkan agar kotak berada persis di tempat yang sebelumnya berisi teks, gunakan fasilitas Rulers. Klik pada menu View

38. Klik pada item menu Rulers (Ctrl-Alt-Shift-R)39. Klik pada Free Transform Tool (Q)40. Klik pada frame ke-11041. Klik dan drag pada penggaris vertikal di sisi kiri stage ke sisi kanan

teks42. Klik pada frame ke-10043. Ubah ukuran kotak agar ujung kanannya berada pada garis dari

penggaris vertikal44. Lakukan hal yang sama seperti langkah nomor 40 s/d 43 tetapi untuk

sisi kiri kotak45. Klik pada frame ke-11046. Lakukan drag pada penggaris horisontal di sisi atas stage ke sisi atas

teks 47. Klik pada frame ke-10048. Ubah ujung atas kotak agar sesuai garis dari penggaris vertikal49. Lakukan langkah nomor 45 s/d 48 untuk sisi bawah kotak

50. Bila ukuran kotak sudah sesuai teks, drag garis vertikal kembali ke penggaris vertikal di sisi kiri layar

51. Lakukan hal yang sama untuk garis vertikal52. Kembali klik menu View 53. Klik pada item menu Rulers untuk menghilangkan penggaris54. Klik pada Selection Tool (V) 55. Klik pada frame ke-10056. Agar animasi tidak terlihat kasar, lakukan pemotongan pada kotak.

Lakukan seleksi dengan men-drag pointer mouse untuk membelah kotak

26

57. Lakukan pembelahan secukupnya agar sebuah kotak panjang terbelah menjadi beberapa kotak kecil. Bila diperlukan, pemotongan dapat dilakukan untuk membuat supaya jumlah kotak sesuai jumlah huruf pada obyek teks. Gunakan pula Rulers bila perlu

58. Klik menu Control 59. Klik pada pilihan Test Movie

G. Memberikan latar belakang1. Drag pada frame ke-150 layer teks dan perpindahan 2. Klik kanan pada seleksi frame tersebut3. Klik pada pilihan Insert Frame 4. Kunci layer teks 5. Klik pada icon Insert Layer di bawah daftar frame6. Drag layer baru agar berada di posisi paling bawah7. Klik dobel pada layer baru, beri nama latarblkg 8. Klik pada frame ke-112 layer latarblkg 9. Klik kanan pada frame tersebut10. Klik pada pilihan Insert Keyframe 11. Klik pada Rectangle Tool (R) 12. Dari properti ataupun kotak Tools atau dari Color Mixer, hilangkan

Stroke Color 13. Dari Color Mixer, buatlah supaya kotak memiliki Fill Color

berbentuk warna gradasi, dengan warna dasar sesuai latar belakang aplikasi

27

14. Agar memberikan efek gerakan yang mulus, maka titik warna terang digeser ke tengah

15. Tambahkan titik warna baru di awal gradasi, dengan warna sesuai titik akhir gradasi

16. Buatlah kotak tersebut yang melingkupi sebagian tengah vertikal tampilan splash

28

17. Kemudian klik pada frame ke-12518. Klik kanan pada frame tersebut19. Klik pada pilihan Insert Keyframe 20. Klik antara frame ke-113 s/d 12421. Klik panah di samping bagian Motion dalam property inspector 22. Klik pada pilihan Shape 23. Klik pada frame ke-11824. Lakukan langkah nomor 21 & 22 di atas25. Klik pada frame ke-11226. Klik pada Gradient Transform Tool (F)27. Geser kotak gradasi ke samping kiri (seperti saat Anda berlatih dalam

praktikum sesi ke-2 ketika membuat animasi roket)28. Klik pada frame ke-12529. Geser kotak gradasi ke samping kanan30. Klik pada Selection Tool (V)31. Klik pada frame ke-11232. Klik kanan pada frame tersebut33. Klik pada item menu Copy Frames 34. Klik pada frame ke-13835. Klik kanan pada frame tersebut36. Klik pada pilihan Paste Frames 37. Klik pada frame ke-190 pada layer latarblkg, sekaligus seleksi pula

frame yang sama pada layer perpindahan dan teks 38. Klik kanan pada seleksi frame tersebut39. Klik Insert Frame 40. Klik pada layer latarblkg 41. Selanjutnya drag untuk menyeleksi antara frame ke-112 s/d 138

29

42. Klik kanan pada seleksi frame43. Klik pada item menu Copy Frames 44. Klik pada frame ke-138 layer latarblkg 45. Klik kanan pada frame tersebut46. Klik pada pilihan Paste Frames 47. Dapat dilihat bahwa layer latarblkg memiliki frame terbanyak (215),

ratakan dengan frame perpindahan dan teks terlebih dahulu. Klik dan drag pada frame ke-215 layer perpindahan dan teks

48. Klik kanan pada seleksi49. Klik pada item menu Insert Frame

50. Klik pada frame ke-180 layer latarblkg 51. Klik kanan pada frame tersebut52. Klik pada item menu Insert Keyframe 53. Klik pada Gradient Transform Tool (F)54. Klik kotak gradasi sampai terseleksi55. Geser kotak gradasi ke tengah tampilan splash56. Klik pada frame ke-19057. Klik kanan pada frame tersebut58. Klik pada pilihan Insert Keyframe 59. Klik pada kotak gradasi60. Klik pada bagian Fill Color di panel kiri Flash

61. Pilih warna biru muda untuk membuat jenis warna gradasi berubah menjadi Solid biru muda

30

62. Pada saat ini, bila dicoba, maka warna teks dan warna latar di belakangnya kurang kontras. Maka perlu dibuat menjadi kontras agar lebih jelas. Klik pada icon Insert Layer di bawah daftar layer

63. Klik dobel pada nama layer baru64. Beri nama layer baru sebagai teksmerah 65. Kunci layer latarblkg 66. Klik pada frame ke-190 layer teksmerah 67. Klik kanan pada frame tersebut68. Klik pada item menu Insert Keyframe 69. Klik pada frame ke-110 layer teks 70. Klik kanan pada frame tersebut71. Klik pada pilihan Copy Frames 72. Klik pada sembarang frame sebelum frame ke-19073. Klik kanan pada frame yang dipilih74. Klik pada item menu Paste Keyframes 75. Semua frame ini hanya sementara, nantinya akan dihilangkan kembali.

Pada frame tempat dilakukan paste, klik kanan mouse76. Klik pada pilihan Remove Tween 77. Seleksi teks yang ada78. Klik kanan pada seleksi teks79. Klik pada item menu Copy

Sampai disini, Anda boleh meng-undo langkah sampai ke langkah nomor 69 (Anda akan meneruskan langkah nomor 68) sehingga frame hasil paste akan hilang dari layer teksmerah.

80. Klik pada frame ke-190 layer teksmerah 81. Klik pada tampilan splash82. Klik kanan pada tampilan tersebut83. Klik pada pilihan Paste in Place 84. Klik pada frame ke-200 layer teksmerah 85. Klik kanan pada frame tersebut86. Klik pada pilihan Insert Keyframe 87. Klik pada sembarang frame antara 191 s/d 19988. Klik kanan pada frame yang dipilih89. Klik pada panah disamping properti Motion 90. Klik pada pilihan Shape 91. Klik pada frame ke-20092. Lakukan lagi langkah nomor 87 s/d 9093. Klik pada frame ke-20094. Klik pada obyek teks95. Ubah warnanya menjadi merah96. Klik pada frame ke-200 kembali97. Klik kanan pada frame tersebut98. Klik pada pilihan Copy Frames 99. Klik pada frame ke-201100. Klik kanan pada frame tersebut101. Klik pada pilihan Paste Frames 102. Lakukan seleksi pada frame ke-202 sampai dengan frame terakhir

(215)103. Klik kanan pada seleksi104. Klik pada pilihan Remove Frames

31

105. Klik pada frame ke-201106. Drag frame tersebut sampai ke-216107. Klik di tengah antara frame ke-203 s/d 214108. Klik kanan pada frame yang dipilih109. Klik pada Remove Tween 110. Klik pada frame ke-215111. Lakukan langkah nomor 108 & 109112. Klik pada frame ke-215113. Klik kanan pada frame tersebut114. Klik pada pilihan Actions 115. Pada pilihan Global Functions >> Timeline Control, klik dobel stop 116. Tutup bagian penulisan skrip117. Lakukan Test Movie

H. Latihan Tambahkan animasi lain yang diperlukan seperti yang telah Anda pelajari dalam pertemuan sebelumnya untuk membuatnya semakin bervariasi. hanya saja perlu diingat bahwa splash janganlah terlalu lama, agar pengguna tidak merasa terlalu lama menunggu. Bila perlu, dapat ditambahkan tombol untuk mem-bypass tampilan splash, tetapi cara seperti ini akan disampaikan dalam sesi praktikum lain.

MATERI 3MEMBUAT TAMPILAN MENU

PendahuluanDalam sebagian besar aplikasi terutama yang telah memanfaatkan elemen-elemen multimedia, termasuk CAI, menu adalah elemen interaktivitas primer yang menjadi penghubung pengguna ke semua isi aplikasi. Menu memiliki arti penting karena merupakan jembatan bagi bagian-bagian dalam aplikasi agar dapat diakses dan memunculkan hasilnya kepada pengguna. Dengan menu, pengguna dapat memilih apa yang akan dilakukannya dan dapat melihat hasil pilihannya dengan segera.

32

Tujuan Mencoba membuat sebuah sampel menu sederhana menggunakan Flash. Menu yang akan dibuat bersifat dinamis, karena memberikan respon saat

hendak dipilih oleh pengguna. Menyiapkan model interaktivitas dasar ke program yang akan dibangun.

Tool yang digunakanMacromedia Flash 8

KonsepMenu yang akan dibuat adalah menu sederhana yang memungkinkan pengguna program dapat mengakses apapun fasilitas/fitur yang ditawarkan oleh suatu program. Dalam sebuah program CAI berbasis multimedia, menu memegang peranan sangat penting karena selain sebagai jalur penghubung antara fungsionalitas sebenarnya dari program dengan keinginan pengguna, menu juga memperlihatkan apa saja yang mungkin dapat dilakukan pengguna dalam program tersebut, sekaligus dapat memberikan gambaran tentang apa yang akan diperoleh pengguna setelah menggunakan program tersebut.Perlu diketahui bahwa dalam dunia pemrograman komputer, menu sebenarnya merupakan sebuah istilah spesifik untuk menunjukkan daftar pilihan yang pada umumnya bersifat tekstual (sekalipun ada juga yang menggunakan visualisasi bergaya iconic). Menu dalam implementasi spesifik umumnya berbentuk suatu elemen tampilan yang bersifat drop-down, kombinasi/combo, daftar/list yang tampilannya bersifat tetap, ataupun bentuk lain yang biasa dijumpai dalam suatu program komputer dimana menu sering diletakkan pada lokasi tertentu yang disebut dengan menu bar. Setiap isi menu disebut dengan menu item, yang dapat mengarah ke suatu tampilan tertentu atau memunculkan submenu (daftar sekelompok menu item yang muncul setelah suatu menu item dipilih). Dalam materi praktikum ini, yang disebut menu bukanlah obyek teknis seperti yang disebut di atas, melainkan sebuah tampilan utama yang berisi suatu pilihan-pilihan yang dapat diambil oleh pengguna dengan mudah.Bentuk menu yang akan dibuat kali ini menggunakan model interaktivitas dasar yang meng-emulasi bagaimana metode yang umum digunakan manusia saat berinteraksi dengan suatu peralatan/perangkat di dunia nyata, dalam hal ini memanfaatkan obyek tombol. Pilihan-pilihan yang dapat diambil pengguna akan dibentuk dalam suatu tombol, dan kelompok tombol yang dibuat dapat merupakan penghubung langsung ke suatu fitur tertentu, ataupun menjadi pembuka untuk menuju kelompok tombol lain yang bersifat pilihan menu tingkat selanjutnya. Sampel yang akan dibuat merupakan sebuah contoh yang diharapkan membuka pandangan awal tentang bentuk menu dari tugas pembuatan program yang telah diberikan dalam perkuliahan. Diharapkan bahwa setelah mengetahui cara membuat sampel menu ini, maka dapat dibuat sebuah menu berdasar kreativitas sendiri baik dengan memodifikasi sampel praktikum ataupun membuat yang sama sekali berbeda, tetapi dengan tujuan pembuatan yang serupa.

Tampilan dari hasil latihan yang akan dikerjakan

33

Langkah PengerjaanPembuatan sampel menu di atas akan dilakukan dalam beberapa tahapan langkah sebagai berikut:I. Persiapan

5. Jalankan Flash 6. Pilih dokumen Flash baru7. Atur tampilan untuk memudahkan pandangan saat pembuatan8. Untuk saat ini gunakan ukuran antarmuka frame default dari Flash, tidak perlu

diubah menjadi lebih besar atau lebih kecil.J. Membuat logo aplikasi

Tahapan ini adalah langkah-langkah untuk menyiapkan logo yang akan diletakkan pada window program yang dibuat, sebagai suatu identifikasi utama yang dapat juga berfungsi sebagai asesori tampilan untuk memberikan suatu ciri tertentu. Logo aplikasi dapat diletakkan pada berbagai tempat di dalam window program sesuai kebutuhan, tetapi dalam praktikum kali ini akan diletakkan pada sisi atas dari window agar lebih terlihat/nampak menonjol dalam pandangan pengguna tanpa harus mengalihkan perhatiannya dari tampilan utama program ini.

34

Tahapan ini akan banyak menggunakan fungsionalitas modifikasi teks dari Flash, sekalipun demikian, bila diinginkan (terutama untuk variasi pengembangan) dapat pula menggunakan elemen-elemen lain, semisal gambar, animasi, ataupun elemen multimedia lainnya yang dapat dibentuk dari dalam Flash ataupun menggunakan obyek siap pakai.

1. Klik pada tombol Text Tool (T)2. Ubahlah propertinya terlebih dahulu supaya sesuai kebutuhan, semisal font

menjadi Arial, ukurannya 24, dan warnanya biru

3. Klik & drag di bagian atas Work Area, dalam ukuran secukupnya4. Tuliskan suatu teks, semisal “CAI Operasi Dasar Matematika”5. Ubah sedikit tampilannya, dengan men-drag kotak teks agar sesuai keinginan6. Bila diperlukan, ubah propertinya, semisal ukurannya diperkecil atau

diperbesar, warna sebagian teks diganti, atau yang lain, lewat window properti di bagian bawah tampilan Flash

7. Modifikasi sedikit logo tersebut, misal dengan memberinya frame. Klik pada tombol Rectangle Tool (R)

8. Kemudian beri warna pada Stroke Color, misal hijau

9. Pada bagian Fill Color, karena yang diinginkan adalah frame, maka harus dikosongkan. Klik pada tombol kecil bergambar silang merah diagonal yang berada di sudut kanan atas pilihan warna pada Fill Color (di samping tombol bergambar bulatan warna). Setelah warna pengisi dihilangkan, maka tampilan pada bagian Colours akan memunculkan hasil pengubahan tersebut

35

10. Berikan frame pada teks, dalam ukuran sesuai keinginan, dengan cara meng-klik & drag di Work Area di bagian teks logo aplikasi.

11. Bila diinginkan, ubah properti frame tersebut agar sesuai keinginan12. Berikan tambahan seperlunya pada logo, tidak usah terlalu banyak13. Pilih keseluruhan obyek logo ini menjadi simbol, klik menu Modify14. Klik pada item menu Convert to Symbol, atau tekan F815. Ubah nama pada simbol tersebut, misal menjadi “Logo”16. Klik pada pilihan Graphic17. Klik tombol OK

K. Membuat bagian tampilan menu dan keluarannya 1. Bentuk bagian khusus menu dengan membuat kotak2. Klik pada Rectangle Tool (R)3. Hilangkan warna pada Stroke Color dengan klik pada tombol kecil

bergambar silang merah4. Beri warna pada Fill Color, misalnya biru muda5. Buatlah kotak pada Work Area yang melingkupi bagian di bawah logo6. Rapikan kotak dengan menggunakan Free Transform Tool (Q) dan

menggeser kotak dengan keyboard agar lebih presisi bila perluL. Membuat bagian keluaran menu

1. Klik pada Rectangle Tool (R)2. Klik pada Set Corner Radius yang berada di bagian Options di bagian

bawah toolbar

3. Isikan suatu nilai, misalkan 30, agar sudut-sudut kotak yang akan dibuat terlihat membulat dan tidak runcing

36

4. Ubah warna Stroke Color sesuai keinginan, misalnya biru tua5. Naikkan nilai garis Stroke, misalnya 56. Ubah warna Fill Color sesuai keinginan, misalnya abu-abu7. Buat kotak di sebagian dari bagian keluaran menu, jangan memenuhi semua,

sisakan sebagian kecil di bagian kiri untuk meletakkan tombol-tombol yang menjadi pilihan menu untuk pengguna

Setelah menyelesaikan langkah-langkah dalam tahapan pengerjaan di atas, seharusnya Anda telah mendapatkan hasil kurang lebih seperti di bawah ini (sesuaikan dengan yang Anda buat):

M. Membuat tombol pilihan menu1. Terlebih dahulu ganti nama Layer 1 menjadi nama yang mudah dimengerti,

misalnya “Menu”2. Tambahkan layer dengan klik pada tombol kecil Insert Layer di sudut kiri

bawah pada bagian tampilan daftar layer (di bagian kiri atas tampilan Flash)3. Ganti namanya menjadi “Tombol”, karena layer ini akan berisi tombol-tombol

pilihan menu yang dapat dipilih pengguna4. Pastikan Anda berada di layer “Tombol” ini sebelum melanjutkan

37

5. Klik pada Rectangle Tool (R)6. Ubah warna Stroke Color sesuai keinginan, semisal merah7. Ubah warna Fill Color sesuai keinginan, semisal kuning8. Turunkan nilai Stroke dengan men-drag scroll pada properti Stroke di bagian

bawah tampilan Flash, misal menjadi 29. Bila perlu, kurangi atau tambahi bentuk bulatan pada sudut calon tombol,

dengan klik pada Set Corner Radius10. Berikan suatu nilai pada kotak teks, misal 10, lalu klik OK11. Mulai membuat sebuah kotak tombol pada bagian kiri tampilan pekerjaan di

Work Area, ukuran secukupnya12. Klik pada tombol Selection Tool (V)13. Pilih kotak tombol tersebut dengan memberikan dobel-klik14. Klik pada menu Modify15. Klik item menu Convert to Symbol (F8)16. Klik pada pilihan Button17. Ganti nama menjadi “Tombol” 18. Klik tombol OK19. Karena telah menjadi simbol, memperbanyak obyek yang seragam seperti ini

menjadi mudah. Sambil menekan tombol Alt pada keyboard, klik pada kotak tombol yang baru saja dibuat

20. Drag ke bagian bawah tombol tersebut21. Lakukan hal ini 3x sampai didapatkan keseluruhan 4 kotak tombol di bagian

kiri tampilan aplikasi Anda22. Klik pada tombol Text Tool (T) dari Flash23. Atur propertinya, diantaranya warna, jenis, dan ukuran font (misal 18)24. Klik pada salah satu kotak tombol dari aplikasi Anda25. Tuliskan suatu kata, misalnya “Penjumlahan”26. Atur supaya kata tersebut berada di dalam kotak dengan baik27. Salin kata tersebut ke semua kotak tombol lain, tekan tombol Alt atau Alt-

Shift di keyboard sebelum men-drag ke kotak tombol lain28. Ganti tiap kata pada kotak tombol, misalnya kotak tombol ke-2 mejnadi

“Pengurangan”, kotak ke-3 menjadi “Perkalian”, dan kotak ke-4 menjadi “Pembagian”. Klik pada tombol Text Tool (T) terlebih dahulu

29. Kemudian klik pada teks pada masing-masing kotak tombol yang akan diubah30. Ganti teks masing-masing31. Bila ada yang terlalu panjang, kurangi jarak antar huruf dengan klik pada

pilihan Letter Spacing di window properti pada bagian bawah Flash32. Kurangi nilainya (default 0) agar teks dapat tersusun dengan baik di atas kotak

tombol.

38

Setelah langkah-langkah dalam tahapan di atas diselesaikan, seharusnya tampilan secara keseluruhan akan menjadi seperti di bawah ini:

N. Menjadikan tombol pilihan menu dapat berinteraksiUntuk dapat memunculkan efek interaktivitas sederhana pada obyek yang dibuat dalam program, maka harus diperlihatkan apabila obyek dalam program mampu mengetahui adanya aksi dari pengguna, kemudian memunculkan reaksi yang sesuai. Dalam praktikum ini akan diperlihatkan contoh interaktivitas sederhana pada salah satu elemen tampilan yaitu tombol menu, dimana tombol akan memunculkan tampilan yang berbeda berupa perubahan warna secara gradual tatkala pengguna menggerakkan pointer mouse di atas tombol tersebut (dalam

39

pemrograman, event berdasarkan mouse ini umumnya disebut mouse over atau terkadang juga disebut hovering). Langkah-langkah berikut ini akan menambahkan efek Roll-over pada tombol dalam tampilan program. Seperti disebutkan di atas, efek Roll-over tersebut bukanlah pergantian warna singkat berdasar event, melainkan pergantian beberapa warna sampai didapat warna akhir, sehingga membutuhkan lebih dari 1 frame dalam Timeline.1. Klik kanan pada salah satu kotak tombol pada program Anda 2. Klik item menu Edit in Place3. Tampilan Timeline di bagian atas Flash akan berubah. Klik kanan pada kotak

di bagian bawah tulisan Over di tempat yang biasanya berisi Timeline.

4. Klik pada item menu Insert Keyframe5. Setelah itu pilih kotak tombol tersebut dengan dobel-klik pada kotak tombol6. Klik pada menu Modify 7. Klik pada item menu Convert to Symbol (F8)8. Klik pada pilihan Movie Clip9. Ganti namanya menjadi “EfekTombol”10. Klik tombol OK11. Klik kanan pada kotak tombol yang telah dikonversi12. Klik item menu Edit in Place13. Klik pada frame nomor 5 pada Timeline14. Klik kanan pada frame nomor 5 tersebut15. Klik pada item menu Insert Keyframe16. Kemudian klik kanan pada frame ke-1017. Kembali klik pada item menu Insert Keyframe18. Kemudian berikan blok pada frame pertama sampai frame ke-1019. Di bagian properti akan terdapat perubahan tampilan. Klik pada pilihan

Tween20. Klik pada item Shape

21. Kemudian lepaskan seleksi dengan klik pada sembarang tempat di luar Work Area

22. Klik pada frame ke-5 23. Klik kotak tombol pertama24. Klik pada pilihan Fill Color

40

25. Pilih warna yang berbeda, misalnya hijau muda26. Klik pada frame ke-1027. Klik pada pilihan Fill Color28. Pilih warna yang berbeda, misalnya merah muda29. Kembali klik frame-1030. Klik kanan frame ke-10 tersebut31. Klik pada item menu Actions yang berada di paling bawah pilihan menu32. Muncul pilihan untuk modifikasi ActionScript. Klik pada pilihan Global

Functions33. Klik pada pilihan Timeline Control34. Dobel-klik pada pilihan Stop

(Pada dasarnya Anda dapat langsung menuliskan perintah stop(); pada bagian penulisan ActionScript. Tetapi karena Flash telah menyediakan kemampuan untuk membuat kode lewat pilihan perintah yang ada, maka agar lebih cepat, mudah, dan mengurangi kemungkinan terjadi kesalahan, Anda dapat menggunakan pilihan lewat klik dan klik dobel seperti pada langkah-langkah di atas.)

35. Klik pada panah ke bawah di samping nama properti Actions di bawah Work Area agar tampilan Work Area kembali membesar

36. Klik pada Scene 1 yang berada di atas tampilan timeline

37. Cobalah apa yang baru saja dibuat, klik pada menu Commands38. Klik pada item menu Test Movie (Ctrl+Enter)

Antarmuka program yang siap menerima respon pengguna ini akan dikembangkan dalam praktikum berikutnya. Silakan disimpan di tempat yang

41

memungkinkan bagi Anda untuk dengan cepat dan mudah mengambilnya kembali untuk keperluan praktikum selanjutnya.

O. LatihanSetelah menyelesaikan langkah-langkah dalam tahapan terakhir ini, maka seharusnya akan didapat sebuah tampilan antarmuka program yang telah memiliki tombol-tombol pilihan fasilitas/fitur yang dapat memunculkan reaksi saat pengguna menggerakkan pointer mouse di atasnya. Selain event mouse Over, terdapat juga event mouse Down (apa yang terlihat pada obyek saat tombol mouse di-klik) dan mouse Hit (mendefinisikan area yang dapat merespon adanya klik tombol mouse pada obyek tersebut). Silakan bereksperimen untuk menambahkan reaksi lain pada event tersebut agar respon tampilan program dapat lebih bervariasi.

MATERI 4MEMBUAT ISI MENU

PendahuluanSetelah menu berhasil dibangun, selanjutnya adalah mengisinya. Ingat bahwa menu berlaku seperti suatu daftar isi dalam sebuah buku, yang memperlihatkan secara garis besar keseluruhan isi buku tersebut. Hanya saja dalam suatu aplikasi, menu tidak hanya memperlihatkan isi, tetapi yang memungkinkan pengguna untuk mengakses fitur-fitur yang ada dalam aplikasi. Disini menu tersebut akan dihubungkan dengan contoh isi yang dapat dimunculkan saat salah satu item menu dipilih oleh pengguna.

Tujuan

42

Mencoba membuat sampel isi menu menggunakan Flash Menghubungkan isi tersebut dengan sampel menu dinamis sederhana yang

telah dibuat sebelumnya.

Tool yang digunakanMacromedia Flash 8

KonsepSetiap program memiliki berbagai macam cara akses ke pilihan fitur/fasilitas yang ada dalam program tersebut. Dalam latihan yang dilakukan dalam praktikum ini, cara akses ke pilihan tersebut dilakukan dengan menggunakan tombol yang difungsikan juga sebagai menu dalam tampilan antarmuka utama program. Menu tersebut tidak akan menghasilkan apa-apa apabila tidak disambung dengan fungsionalitas yang diinginkan. Dengan demikian harus ada cara untuk menghubungkan antara menu dengan semua fungsionalitas tersebut.

Selain penghubungan, tentu saja hal paling penting yang perlu dilakukan adalah membangun isi/fungsionalitas/fitur/fasilitas yang ingin didapatkan pengguna saat mereka mengakses menu tersebut. Suatu isi dari menu dapat dibuat baik secara terpisah maupun terintegrasi dengan bagian utama program. Dalam Flash, membuatnya menjadi terintegrasi adalah cara paling mudah. Hal ini dikarenakan semua obyek yang nampak dibuat langsung dalam Flash, sehingga hampir dapat selalu dipastikan bahwa yang ditampilkan akan sesuai dengan yang dibuat selama masa pengerjaan.

Saat dibuat secara terintegrasi, berbagai macam efek serta tambahan lain dapat langsung diberikan dan diberlakukan seperti halnya semua elemen Flash lain. Dengan demikian, apapun reaksi tiap obyek dibuat dengan mengikuti struktur maupun rangkaian kerja dari proses yang dibuat dalam Flash, termasuk dalam hal Timeline. Pembuatan isi menu secara langsung dari Flash juga memungkinkan pembuat untuk menjadikannya memiliki konektivitas secara langsung dengan berbagai elemen Flash lain, bahkan termasuk isi menu ataupun fungsionalitas lain yang ada.

Pembuatan isi menu secara terintegrasi umumnya memerlukan penambahan layer baru yang dikhususkan untuk menampilkan apapun isi menu yang ingin ditampilkan (termasuk bila yang menjadi isi menu tersebut ternyata adalah submenu yang akan menghubungkan ke isi yang sebenarnya). Layer baru digunakan untuk memastikan agar layer yang ada tidak rusak, sekaligus memudahkan dalam pembuatan karena sekalipun sebagai bagian dari program utama, pada dasarnya isi menu tersebut terpisah karena berada pada layer berbeda. Manipulasi apapun tidak mempengaruhi layer lain manapun, dan layer terpisah ini dapat dikendalikan dengan mudah melalui penggunaan Timeline dengan penempatan nomor frame yang tepat.

Tampilan dari hasil latihan yang akan dikerjakan

43

Langkah PengerjaanPembuatan sampel isi menu di atas akan dilakukan dalam beberapa tahapan langkah sebagai berikut:

P. Persiapan9. Jalankan Flash 10. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya11. Buka file Flash tersebut sampai muncul tampilan utama sampel menu

Q. Menambahkan gambar di area utama menuSampel menu yang telah dibuat sebelumnya nampak kosong melompong saat belum ada materi yang ditampilkan. Diperlukan adanya pengisi sementara yang selain menghilangkan kesan kosong, juga sebagai variasi, serta memperkuat kesan tampilan yang dibuat telah didesain dengan baik. Dalam langkah-langkah di bawah ini, Anda akan menambahkan sebuah gambar ke bagian yang digunakan untuk memunculkan materi.

Gambar tersebut haruslah gambar yang dapat mengisi kekosongan, tetapi tidak mengalihkan perhatian pengguna. Oleh karena itu, gambar haruslah dibuat supaya tidak terlalu menonjol, misalnya gambar yang memiliki variasi warna sedikit (monokrom akan lebih baik), dan ditambahkan efek blur pada gambar (gunakan program pengolah gambar tersendiri di luar Flash, misalnya Photoshop).

Dalam praktikum ini, untuk memudahkan Anda, gunakan saja gambar yang telah tersedia dalam folder Windows\System32 (diasumsikan Anda menggunakan sistem operasi Windows XP seperti yang terdapat dalam komputer di laboratorium komputer). Gambar yang dimaksud adalah gambar dalam file ntimage.gif, seperti di bawah ini:

44

Anda boleh saja mengambil gambar lain, tetapi ada kemungkinan Anda harus memanipulasinya dulu agar memenuhi persyaratan sebagai gambar latar belakang untuk sebuah aplikasi. Disarankan untuk saat ini gunakan saja gambar dari Windows tersebut.

18. Tambahkan sebuah layer baru dengan klik pada tombol Insert Layer19. Dobel klik pada nama layer, gantilah dengan nama lain, misalnya “isimenu”

20. Kunci semua layer lain agar tidak rusak, dengan meng-gembok layer lain21. Aktifkan layer teratas yang masih baru dengan klik pada layer tersebut22. Klik pada tombol Rectangle Tool (R) pada toolbar23. Buatlah sebuah kotak di tengah area utama menu24. Untuk memunculkan gambar, klik pada link Color di sebelah kanan tampilan

untuk menampilkan pilihan properti pewarnaan25. Pada bagian Type, pilih (klik) pada bitmap

26. Bila dialog pemilihan gambar muncul, silakan pilih gambar yang diinginkan27. Untuk memunculkan gambar pada kotak yang sebelumnya dibuat, klik pada

Paint Bucket Tool (K)28. Kemudian klik pada kotak yang tadi dibuat untuk menampilkan gambarnya

45

29. Bila gambar terlihat mengalami tiling, ubahlah supaya gambar terlihat memenuhi kotak dengan klik pada Gradient Transform Tool (F)

30. Bentuklah supaya penuh kotak, dengan men-drag pada sisi-sisi gambar tersebut

31. Agar gambar tersebut dapat dengan mudah diakses kembali, ubahlah menjadi simbol grafis. Klik kanan pada gambar tersebut

32. Klik pada item menu Convert to Symbol. Dapat juga dilakukan dari menu Modify

33. Beri nama simbol tersebut, misalnya “gambartengah”34. Klik pada jenis symbol tersebut yaitu Graphic

35. Klik OK

R. Mempersiapkan isi area utama1. Buatlah supaya semua layer memiliki 40 frame. Klik pada frame ke 40

pada setiap layer pada timeline, kemudian klik kanan pada frame ke-402. Klik pada item menu Insert Frame

3. Lakukan hal yang sama hingga semua layer memiliki 40 frame

S. Membuat isi menu1. Klik pada frame ke-11 pada layer teratas (misalnya layer isimenu)2. Klik kanan pada frame tersebut3. Klik pada item menu Insert Blank Keyframe4. Kemudian tambahkan sebuah layer lagi, klik pada tombol Insert

Layer

46

5. Beri nama layer sesuai isi pertama yang akan dimunculkan, misalnya “Penjumlahan”

6. Klik pada frame ke-15 di layer Penjumlahan7. Klik kanan pada frame tersebut8. Klik pada item menu Insert Keyframe9. Klik pada frame ke-2510. Klik kanan pada frame tersebut11. Klik item menu Insert Keyframe

12. Kunci semua layer lain yang belum terkunci, kecuali layer teratas13. Klik pada frame ke-15 di layer teratas14. Tambahkan teks pada layer teratas, sebagai judul isi materi. Klik pada

Text Tool (T)15. Sesuaikan ukuran, font, dan warna lewat bagian Properties di bagian

bawah layar16. Ketikkan judul teks17. Tambahkan teks isi materi. Lakukan hal yang serupa seperti pada

langkah 14 s/d 16 di atas

18. Klik pada frame ke-15 layer Penjumlahan tersebut19. Pada bagian Properties di bawah layar, isikan nama frame tersebut,

misalnya Penjumlahan. Nama itu akan muncul di layer teratas

47

T. Menganimasikan keluarnya isi teksUntuk menambah kuatnya kesan penggunaan elemen multimedia serta memperhalus transisi saat materi mulai ditampilkan, teks yang akan ditampilkan pertama kali dapat pula diberi animasi. Efek animasi yang memenuhi kebutuhan ini diantaranya adalah memunculkan teks secara perlahan, dalam hal ini akan memanfaatkan kemampuan Motion Tween dari Flash yang dikombinasikan dengan penggunaan efek transparansi pada obyek teks. Dipilih efek transparansi karena cara ini yang paling mudah untuk membuat sebuah obyek (dalam hal ini adalah teks materi) muncul secara gradual dari keadaan tranparansi 100% (tidak terlihat) sampai transparansi 0% (terlihat jelas dan solid), dan dapat pula dibuat sebaliknya bila diinginkan.

1. Klik pada frame ke-24 layer Penjumlahan2. Klik kanan pada frame tersebut3. Klik pada item menu Insert Keyframe4. Kemudian klik pada sembarang frame antara 15 s/d 245. Klik kanan pada frame tersebut6. Klik pada item menu Create Motion Tween7. Klik pada frame ke-248. Klik kanan pada frame tersebut9. Klik pada item menu Create Motion Tween

10. Klik kanan lagi pada frame ke-2411. Klik pada item menu Actions12. Tuliskan stop();13. Klik pada frame pertama layer teratas ini14. Klik kanan pada frame tersebut15. Klik pada item menu Actions16. Kembali tuliskan stop();

17. Klik pada frame ke-15

48

18. Klik pada teks di tampilan area utama19. Lihat ke bagian bawah (Properties), terdapat pilihan Color, pilih

Alpha20. Lihat ke kotak di samping kanannya, turunkan nilainya sampai 0%

dengan cara langsung mengetikkannya melalui keyboard, atau dengan menggeser slider vertikal menggunakan mouse (muncul saat tombol panah di samping angka persentase di-klik) hingga sampai ke bagian paling bawah

21. Buka kunci layer tombol dengan menghilangkan gembok pada layer tersebut

22. Klik pada tombol Penjumlahan, jangan klik pada teks-nya (klik pada posisi mendekati area terluar dari tombol)

23. Klik kanan pada tombol tersebut24. Klik item menu Actions25. Klik pada tombol Script Assist pada bagian Actions untuk

memudahkan membuat skrip

26. Dobel klik pada pilihan Goto27. Biarkan pilihan default tetap pada Go to and play. Gantikan saja

pilihan Frame Number pada isian Type dengan Frame Label28. Ganti isi pada Frame dengan nama frame yang kita buat tadi,

misalnya Penjumlahan (label nama frame tinggal dipilih dari yang sudah ada, tidak perlu ditulis sendiri secara manual)

49

29. Tutup panel Actions30. Coba hasilnya dengan test movie

Apabila langkah-langkah terakhir di atas telah diselesaikan, maka akan didapat sebuah tampilan teks isi menu yang muncul secara gradual setelah menu yang bersesuaian diakses oleh pengguna. Dalam contoh untuk praktikum yang baru saja Anda lakukan, hasilnya dapat ditampilkan seperti pada rangkaian gambar di bawah ini. Gambar yang pertama muncul di bawah ini memperlihatkan tampilan menu sebelum tombol “Penjumlahan” di-klik oleh pengguna.

Kemudian tombol “Penjumlahan” di-klik, maka gambar latar belakang pada bagian tampilan utama program akan hilang dan mulai digantikan secara perlahan oleh teks materi seperti di bawah ini.

50

Kemudian akhirnya menjadi tampilan seperti di bawah ini saat teks yang menjadi isi menu telah muncul sepenuhnya di bagian utama tampilan.

Lama waktu pemunculan dapat diatur melalui jumlah frame dalam animasi Motion Tween, tetapi perlu diingat bahwa animasi yang terlalu panjang untuk memunculkan suatu kandungan isi teks akan membuat program nampaknya

51

bekerja lambat dan malah akan menimbulkan kesan tidak menyenangkan oleh pengguna.

U. LatihanSilakan menambahkan teks dan elemen kandungan isi lain agar isi materi terlihat memenuhi bagian tampilan utama aplikasi. Selain itu, tambahkan teks isi menu untuk setiap penekanan tombol yang ada dalam menu program tersebut, dengan memunculkan efek animasi yang serupa seperti yang dimunculkan oleh hasil penekanan tombol pertama pada contoh di atas. Anda tidak dilarang untuk membuat agar animasi keluaran teks materi tiap tombol menjadi berbeda, silakan saja bereksperimen untuk mencoba hal ini. Tetapi cara itu tidak disarankan karena akan mengurangi unsur uniformity (keseragaman) dalam rancangan tampilan serta menghilangkan poin konsistensi yang diharapkan dari program Anda.

MATERI 5MEMBUAT CONTENTS DARI FILE TEKS

PendahuluanContents (kandungan isi) adalah bagian utama dari aplikasi multimedia yang sedang kita bangun. Disinilah diletakkan semua yang menjadi material utama dari CAI yang akan diberikan kepada pengguna untuk dipelajari. Contents mencakup semua/sebagian besar aktivitas yang ada dalam aplikasi ini, dan disusun oleh frame-frame (pola tampilan) sesuai dengan rancangan materi yang ingin disampaikan. Contents akan lebih baik bila dapat diubah isinya tanpa harus menggunakan Flash.

Tujuan Membuat beberapa model contents dalam Flash Membuat sebuah aplikasi yang dapat memunculkan contents terintegrasi

maupun terpisah Mendapatkan pengetahuan tentang cara menghubungkan contents yang

terpisah ke dalam Flash dan menampilkannya.

Tool yang digunakan Macromedia Flash 8 Windows Notepad

KonsepPengisian kandungan isi merupakan tahap berikutnya dalam pengembangan aplikasi CAI. Kandungan isi merupakan materi yang hendak disampaikan kepada pengguna,

52

dan umumnya diletakkan pada bagian fungsional utama dari program CAI tersebut. Kandungan isi dapat merupakan penerapan dari pemilihan aktivitas Tutorial, dapat pula berupa suatu latihan, evaluasi, ataupun suatu simulasi baik yang bersifat interaktif ataupun tidak. Beberapa jenis kandungan dapat dibuat hanya berisi teks saja dengan berbagai variasinya, kandungan isi lain harus dilengkapi dengan efek, animasi, ataupun elemen lain agar lebih berhasil dalam menyampaikan isinya kepada pengguna. Manapun aktivitas yang menjadi kandungan isi aplikasi CAI tersebut haruslah sesuai dengan tema utama yang dipilih oleh pembuat untuk program.

Pada saat pembuat ingin memasukkan kandungan isi, harus dipertimbangkan bahwa materi/isi CAI tersebut akan bersifat dapat diubah oleh pengguna atau tidak. Pertimbangan ini diperlukan karena beberapa kandungan isi tertentu memerlukan update secara periodik untuk memastikan bahwa isinya tetap aktual dan dapat terus dipakai. Kandungan isi lain mungkin memerlukan kemampuan untuk dapat diubah manakala pihak institusi pendidikan ingin memasukkan hal-hal tertentu ataupun mengubah yang telah ada untuk suatu keperluan spesifik. Hal-hal seperti ini pada dasarnya mengarah ke suatu kebutuhan yaitu kandungan isi dalam aplikasi CAI yang memungkinkan untuk diubah oleh pengguna

Beberapa cara dapat ditempuh untuk dapat memenuhi kebutuhan di atas. Salah satu cara yang sesuai untuk kebutuhan ini adalah membuat supaya kandungan isi tidak diletakkan di dalam aplikasi tersebut. Karena tidak diletakkan dalam aplikasi, pengguna tidak perlu belajar Flash secara khusus, ataupun harus mendatangkan lagi pembuat program untuk meng-update kandungan isi dari aplikasi. Dengan diletakkan di luar program, diharapkan pengguna dapat mengubah sendiri materi atau kandungan isi dari aplikasi CAI. Tentu saja kandungan isi tersebut harus dibuat dalam bentuk yang mudah dikenali pengguna serta mudah pula bagi mereka untuk membuka dan mengganti isinya. Diantara yang paling umum digunakan adalah meletakkannya ke dalam suatu file teks, dimana aplikasi akan mengacu ke file teks tersebut setiap kali hendak menuliskan isinya. File teks dapat diedit dengan Notepad atau pengolah kata apapun, sehingga cara ini menjadi alternatif yang paling banyak digunakan tatkala program dan kandungan isi harus dipisahkan, terutama karena alasan kemudahan mengganti tanpa harus melakukannya dari editor Flash.

Tampilan dari hasil latihan yang akan dikerjakan

53

Langkah PengerjaanPembuatan contents untuk mengisi menu di atas akan dilakukan dalam beberapa tahapan langkah sebagai berikut:

V. Persiapan12. Jalankan Flash 13. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya14. Perhatikan path tempat Anda menyimpan file latihan tersebut, harap diingat

baik-baik15. Pastikan bahwa masih ada setidaknya 1 tombol yang belum memunculkan isi

di area utama bila tombol tersebut ditekan16. Pastikan pula bahwa terdapat editor teks (misal Windows Notepad) ataupun

pengolah kata yang dapat menyimpan dalam format teks (Windows Wordpad, MS Word, dll.) di komputer tempat Anda bekerja

17. Jalankan editor teks tersebut (diasumsikan adalah Notepad). Untuk saat ini jangan tuliskan apa-apa ke dalam editor teks Anda (biarkan saja kosong)

54

18. Sekalipun belum menuliskan apapun dalam Notepad, segera lakukan penyimpanan file Anda. Simpanlah dengan nama file teks.txt (perhatikan: ekstensi file harus txt apabila Anda menyimpannya sebagai teks biasa), dan letakkan dalam folder dimana Anda menyimpan file latihan Flash yang akan Anda pakai sekarang.

W. Menambahkan frame36. Apabila dari latihan sebelumnya frame masih terbatas hanya 40 frame,

tambahkan frame baru sehingga setiap layer memiliki 60 frame. Dapat dilakukan satu-satu yaitu klik kanan di frame ke 60 tiap layer kemudian klik item menu Insert Frame, atau bila diinginkan dapat dibuat bersama-sama sekaligus dengan cara sebagai berikut

37. Klik pada frame ke-60 pada layer paling atas38. Tekan tombol Shift pada keyboard39. Klik pada frame ke-60 pada layer paling bawah40. Keseluruhan frame ke-60 tiap layer telah terseleksi, kemudian klik kanan pada

salah satu frame terseleksi.41. Klik pada item menu Insert Frame sehingga semua layer menjadi memiliki

60 frame.

X. Memberikan contents berupa teks dari suatu file teks1. Buatlah layer baru, misalnya diberi nama Perkalian2. Drag layer baru ke paling atas

55

3. Klik pada frame ke-37 di layer tersebut4. Klik kanan pada frame tersebut5. Klik pada item menu Insert Keyframe6. Klik pada frame ke-467. Klik kanan pada frame tersebut8. Klik item menu Insert Keyframe9. Kunci semua layer lain yang belum terkunci, kecuali layer teratas10. Klik pada frame ke-37 di layer teratas

11. Tambahkan elemen teks pada layer teratas, sebagai judul isi materi. Klik pada Text Tool (T)

12. Jangan lupa mengunci layer yang lain untuk mengamankannya13. Bawa pointer mouse ke area utama yang menjadi isi dari layer

Perkalian. Klik pada tempat yang akan anda beri teks.14. Jangan tuliskan apa-apa dulu, melainkan lihatlah pada bagian

Properties, klik pada panah drop-down yang berada di samping tulisan Static Text

15. Klik pada pilihan Dynamic Text16. Pada kotak di bawahnya, ketikkan suatu nama instance, misalnya

“dynatext”

17. Kemudian berikan nama variabel, misalnya “realtext”. Carilah Var: di Properties (agak ke tengah), isikan nama variabel dalam kotak di samping Var: tersebut

56

18. Pada kotak dropdown bertuliskan Singleline, silakan klik kemudian pilih Multiline

19. Besarkan ukuran kotak teks agar dapat menampung lebih dari 1 baris, klik pada salah satu titik hitam kotak pada kotak teks (biasanya tengah bawah), drag ke bawah agar kotak membesar

20. Berhenti dulu menggunakan Flash. Silakan berpindah ke Notepad sekarang.

21. Ketikkan contoh teks seperti ini: realtext=isi teks ini ... (silakan tambahi sendiri seperlunya)

22. Simpanlah file teks tersebut, ingat: nama file adalah teks.txt, dalam folder yang sama dengan folder tempat anda menyimpan file latihan Flash Anda saat ini

23. Kembali ke Flash. Klik pada frame ke-37 dari layer Perkalian 24. Beri nama label frame ke 37 s/d 46 sebagai Perkalian (frame yang

memunculkan teks)

57

25. Klik kanan lagi pada frame ke-4526. Klik pada item menu Actions27. Tuliskan stop();28. Klik pada frame pertama layer teratas ini29. Klik kanan pada frame tersebut30. Klik pada item menu Actions31. Kembali tuliskan stop();

32. Klik pada frame ke-3733. Buka panel Actions di bagian bawah layar Flash34. Lihat ke bagian kiri, pilih Global Functions35. Kemudian pilih Browser/Network36. Dobel klik pada loadVariables37. Mungkin yang muncul adalah loadVariablesNum..., agar yang

muncul hanya loadVariables, klik pada panah drop-down di samping tulisan Location (dalam pilihan Script Assist) yang bertuliskan Level

38. Pilih (klik) Target, maka seharusnya sekarang berubah menjadi loadVariables

39. Gantilah 0 dengan this (tuliskan menggantikan bilangan 0)

58

40. Klik pada kotak cek Expression

41. Ketikkan nama file teks anda pada bagian URL (disini misalnya teks.txt)

42. Klik pada frame 4543. Klik kanan, pilih Actions44. Berikan stop(); atau lewat Script Assist dobel klik pada pilihan stop

Y. Membuat tombol menu Perkalian bekerja1. Kunci semua layer terlebih dahulu, kecuali layer Tombol2. Klik pada tombol Perkalian, jangan pada teks-nya

3. Klik kanan pada tombol tersebut4. Klik item menu Actions5. Klik pada tombol Script Assist pada bagian Actions untuk memudahkan

membuat skrip

59

6. Dobel klik pada pilihan Goto7. Ganti Frame Number pada Type dengan Frame Label8. Ganti isi pada Frame dengan nama frame yang kita buat tadi, misalnya

Perkalian

9. Tutup panel Actions10. Lakukan Test Movie (Ctrl+Enter) untuk melihat hasilnya.

Bila semua langkah telah dijalankan dengan benar, silakan tekan pada tombol menu untuk memunculkan isi file teks (dalam hal ini tombol menu “Perkalian”), sehingga tampilan di bawah ini kemudian muncul.

60

Perhatikan bahwa karena Anda tidak menambahkan efek atau animasi apapun, maka keluarnya teks setelah tombol menu ditekan nampak tiba-tiba. Untuk saat ini yang penting dapat memunculkan teks terlebih dahulu, efek transisi dapat dicobakan dalam latihan selanjutnya.

Z. LatihanLakukan hal yang serupa pada menu-menu lain, sehingga masing-masing menu dapat memunculkan isi suatu file teks ke dalam tampilan program CAI yang dibuat.

61

MATERI 6RANGKAIAN TAMPILAN TUTORIAL

PendahuluanDalam suatu CAI, tutorial merupakan bagian utama apabila termasuk dalam salah satu penyusun dari CAI tersebut. Dengan tutorial maka aplikasi CAI dapat menyajikan materi yang dibawanya kepada pengguna, sehingga pengguna mendapatkan dasar pengetahuan dari apa yang ingin dipelajarinya. Tutorial CAI memegang peranan penting sebab bagian inilah yang berusaha memberikan pemahaman awal pada pengguna/siswa, sebelum mereka beranjak ke bagian berikutnya untuk lebih menguasai materi yang sedang mereka pelajari.

Tujuan Membangun sebuah contoh rangkaian tutorial sederhana yang

menggambarkan penyampaian inti suatu materi Membuat suatu cara untuk menghubungkan antara suatu tampilan tutorial

dengan tutorial lain.

Tool yang digunakan Macromedia Flash 8 Windows Notepad

KonsepPenyampaian suatu materi yang harus dikuasai oleh siswa umumnya tidak dapat dilakukan secara singkat, apalagi bila siswa baru pertama kali bersentuhan dengan materi tersebut. Bahkan untuk materi yang nampaknya terlihat sedikit sekalipun, pengajar akan mencoba menyampaikannya dalam suatu rangkaian dari awal sampai dengan akhir agar terlihat jelas dan mudah dipahami oleh siswa. Medium apapun yang digunakan juga akan dibuat agar apa yang disampaikan sesuai, sedikit demi sedikit dimunculkan sembari pengajar menerangkan kepada siswa. Cara seperti ini sebaiknya juga digunakan dalam suatu produk CAI yang memiliki kemampuan untuk menyampaikan materi layaknya pengajar yang menyampaikannya, agar siswa mampu mencerna pengetahuan tersebut dalam tahapan yang memungkinkannya untuk memahami keseluruhan materi yang disajikan. Perlu diingat bahwa CAI haruslah sedapat mungkin mengadaptasi cara terbaik dalam penyampaian materi, agar dapat setidaknya memberikan pemahaman dengan kualitas yang sama atau lebih baik dibandingkan cara pengajaran konvensional. Hal ini sangat dimungkinkan karena kemampuan komputer yang sedemikian besar, serta banyaknya elemen multimedia yang dapat dimanfaatkan dengan segala variasinya, sehingga dapat digunakan untuk keperluan penyampaian materi dalam cara-cara yang lebih baik.Dalam suatu aplikasi CAI berbasis multimedia, untuk setiap elemen materi yang menjadi kandungan isi sebaiknya diperlihatkan dalam beberapa tampilan dan tidak langsung semuanya diperlihatkan dalam sebuah tampilan, apalagi bila hanya berisi teks saja. Setiap tampilan materi harus memiliki suatu urutan yang jelas dan terstruktur, sekalipun pengguna diberi fasilitas untuk dapat mengendalikan sepenuhnya materi yang ingin diterimanya (ingat karakteristik individual &

62

pengendalian penuh). Dengan penyampaian sedikit demi sedikit, atau lebih baik lagi dalam langkah per langkah, maka materi akan terlihat lebih fokus pada topik. Selain itu visualisasi juga harus mendapat perhatian besar oleh pembuatnya, agar menghasilkan tampilan yang tidak memunculkan rasa malas di sisi pengguna. Oleh karena itu perlu diatur gaya tampilan tiap kandungan isi termasuk font, pewarnaan, unsur penyerta tampilan lain, dan seberapa banyak yang akan diperlihatkan per tampilan. Agar lebih efektif, umumnya pembuat CAI mencampurkan elemen lain misalnya gambar atau animasi, hanya saja perlu diingat bahwa tambahan apapun harus sesua konteks kandungan isi yang sedang diperlihatkan kepada pengguna.

Tampilan dari hasil latihan yang akan dikerjakan

Langkah PengerjaanPembuatan sampel rangkaian tampilan tutorial seperti yang disebutkan di atas akan dilakukan dalam beberapa tahapan langkah sebagai berikut:

AA. Persiapan19. Jalankan Flash 20. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya21. Pastikan bahwa masih terdapat tombol yang sudah memunculkan isi di area

utama bila tombol tersebut ditekan, bila tidak ada maka harus membuat sebuah tombol terlebih dahulu beserta isinya yang dimunculkan di area utama. Silakan melihat pada latihan-latihan sebelumnya untuk mengetahui cara membuat tombol dan membuat content dari tombol tersebut

63

22. Pastikan pula telah terdapat jumlah frame yang cukup pada layer yang menjadi tujuan pemunculan tutorial apabila tombol tersebut ditekan. Sekali lagi lihat pada latihan sebelumnya untuk menambahkan frame yang diperlukan

23. Jalankan editor file teks (misalkan Notepad), biarkan kosong dulu saat ini

BB. Menambahkan halaman tutorial baruDalam sesi ini sebaiknya menggunakan tombol Penjumlahan sebagai pilihan menu yang akan diberi rangkaian materi karena contoh tutorial yang akan dibangun dalam sesi-sesi praktikum selanjutnya adalah tutorial untuk operasi penjumlahan. 42. Klik pada frame penjumlahan untuk menjadikannya frame aktif43. Kunci semua layer lain terlebih dahulu, biarkan hanya layer Penjumlahan

yang tidak dikunci44. Klik pada frame ke-47 di layer Penjumlahan (atau pada frame pertama

setelah frame penutup dari kelompok frame terakhir yang dimunculkan ke area utama tampilan, misalnya dalam contoh ini frame terakhir adalah frame 46 pada layer Perkalian)

45. Klik kanan pada frame tersebut46. Klik pada item menu Insert Keyframe47. Klik pada frame ke-5548. Klik kanan pada frame tersebut49. Klik item menu Insert Keyframe50. Klik pada frame ke-47 di layer Penjumlahan51. Beri nama label frame ke 47 s/d 55 sebagai Navigator (frame yang

memunculkan tutorial selanjutnya)

CC. Membuat tombol navigasi tutorialTombol navigasi tutorial diperlukan agar pengguna dapat bergerak ke bagian materi tutorial selanjutnya atau sebelumnya. Tombol-tombol navigasi ini dapat diletakkan secara terintegrasi dalam tampilan tutorial, ataupun diletakkan terpisah di bagian lain tergantung kebutuhan serta pertimbangan saat pengembangan. Dalam sampel praktikum ini, tombol-tombol navigasi akan dibuat di dalam tampilan utama kandungan isi (tutorial).Karena rangkaian materi dimulai dari tampilan yang berasal dari frame Penjumlahan, maka akan terlebih dahulu dibuat tombol “Lanjut” pada frame Penjumlahan yang akan melanjutkan penyampaian materi ke frame Navigator.1. Agar tidak berlama-lama, kita copy saja tombol yang sudah ada. Klik

pada layer Tombol2. Buka kunci layer Tombol

64

3. Pastikan Selection Tool (V) masih aktif, bila tidak maka klik pada tombol tersebut pada toolbar kiri Flash untuk mengaktifkannya

4. Pilih salah satu tombol saja dengan men-drag ke sekeliling tombol yang dipilih (misalnya tombol Pembagian)

5. Klik kanan pada tombol tersebut6. Klik Copy 7. Kunci kembali layer Tombol 8. Klik pada frame terakhir dari rangkaian frame berlabel Penjumlahan

(misalnya frame ke-24)

9. Klik kanan di area utama aplikasi10. Bila Anda melihat pilihan untuk melakukan paste yang ada pada menu

pop-up tidak dapat diakses, maka Anda belum membuka kunci layer Penjumlahan. Bukalah kunci layer Penjumlahan terlebih dahulu

65

11. Setelah kunci dibuka, kembali klik kanan di area utama aplikasi (tempat menampilkan tutorial)

12. Klik pada pilihan Paste atau Paste in Place sehingga muncul salinan tombol yang tadi telah di-copy

13. Posisikan tombol ke tengah bawah area utama aplikasi (geser dengan drag & drop)

14. Klik pada Text Tool (T) yang terdapat di samping kiri Flash (pilihan tombol Tools bergambar huruf A)

15. Kemudian klik pada teks yang ada dalam tombol yang baru saja Anda paste

16. Ubahlah teks di dalamnya, misalnya menjadi Lanjut

17. Klik pada Selection Tool (V)18. Klik pada sembarang tempat di luar aplikasi (masih dalam stage)19. Klik kanan pada tombol Lanjut. Ingat, jangan klik kanan pada teks

dalam tombol, karena tidak akan memunculkan item menu yang dibutuhkan20. Klik pada item menu Actions 21. Klik dobel pada goto di bagian pilihan skrip di sisi kiri22. Klik tombol Script Assist untuk membantu memudahkan pembuatan

skrip23. Ubah isian Type menjadi Frame Label24. Di bagian Frame, pilih Navigator

66

DD. Membuat tombol navigasi bolak-balikSelanjutnya kita akan membuat 2 tombol navigasi pada frame Navigator. Tombol-tombol navigasi ini diperlukan agar pengguna dapat bergerak ke tampilan selanjutnya setelah memasuki frame Navigator (tampilan pada frame lain yang memiliki urutan tampilan tutorial selanjutnya), ataupun untuk kembali ke frame sebelumnya (frame Penjumlahan).1. Kembali klik frame Penjumlahan dimana terdapat tombol Lanjut

(dalam sampel ini, tombol lanjut ada pada frame ke-24)

2. Klik kembali pada tombol Selection Tool (V)3. Pilih tombol Lanjut dengan melingkupinya4. Klik kanan tombol mouse di atas tombol tersebut, ingat: bukan pada

teks yang ada dalam tombol5. Klik pada pilihan item menu Copy

6. Pilih layer Penjumlahan dengan meng-klik nama layer tersebut untuk memastikan bahwa Anda akan meletakkan di tempat yang tepat

7. Pastikan juga Anda telah membuka kunci layer Penjumlahan dengan meng-klik pada gembok di layer tersebut bila masih terlihat

67

8. Klik pada frame ke-47 (frame awal untuk rangkaian frame Navigator)

9. Klik kanan pada area utama aplikasi10. Klik pada pilihan Paste 11. Tombol hasil pengkopian akan muncul. Seretlah supaya terletak di

bagian bawah area utama12. Kecilkan ukurannya, klik pada tombol Free Transform Tool (Q) pada

toolbar Flash di sebelah kiri window

13. Buatlah agar ukurannya lebih kecil. Drag seperlunya sampai bentuk yang diinginkan didapatkan

14. Klik pada tombol Text Tool (T) di toolbar15. Klik pada teks di atas tombol, gantilah dengan suatu kata, misalnya

Kembali

16. Klik pada tombol Selection Tool (V) pada toolbar17. Klik pada teks dalam tombol (hanya bilamana fokus telah lepas dari

teks)18. Drag pada salah satu sudut bingkai yang melingkupi teks di dalam

tombol untuk mengubah kesesuaian tampilan teks dalam tombol19. Properti teks akan muncul di bawah window20. Lakukan perubahan seperlunya bila diinginkan pada gaya tampilan

teks tersebut

68

21. Lakukan drag pada sekeliling tombol untuk menyeleksi secara keseluruhan bersama teks di atasnya

22. Tekan tombol Alt pada keyboard23. Lakukan drag tombol tersebut ke sebelah kanan atau tempat lain untuk

menduplikasinya, ingat jangan lepas tombol Alt sebelum melepas tombol mouse

24. Klik pada Text Tool (T) pada toolbar25. Ubahlah teks menjadi Lanjut

Setelah kedua tombol navigasi disiapkan, selanjutnya tinggal memberikan skrip agar tombol memunculkan aksi yang diinginkan. Dalam sampel ini, baru tombol Kembali yang akan diberi skrip, tombol Lanjut belum diberikan skrip karena belum membuat tampilan materi selanjutnya yang akan ditampilkan

26. Klik kanan pada tombol Kembali27. Klik pada Actions 28. Klik dobel pada goto di bagian pilihan skrip di sisi kiri29. Ubah isian Type menjadi Frame Label30. Di bagian Frame, pilih Penjumlahan

EE. Membuat kelanjutan isi tutorial dari file teks1. Pada rangkaian frame Navigator buatlah 2 kotak teks kosong yang

berfungsi memunculkan teks dari suatu file berekstensi .txt (file teks) dimana kotak pertama akan menjadi tempat memunculkan judul, sedangkan kotak kedua memunculkan teks isi tutorial yang akan ditampilkan.

2. Ubahlah properti masing-masing kotak teks seperlunya agar sesuai keinginan Anda saat isi file teks ditampilkan dalam aplikasi anda

69

3. Pindah ke Notepad, tuliskan suatu teks, misalnya seperti di bawah ini

4. Simpanlah dengan nama file “content.txt”, dalam folder yang sama dengan file latihan Flash anda

5. Lakukan rangkaian langkah yang pernah disampaikan di latihan pada sesi sebelumnya untuk membuat tampilan content yang mengambil isi suatu file teks. Perhatikan nama-nama variabel pada contoh file teks di atas, atau buatlah nama variabel sendiri yang Anda kehendaki

Langkah-langkah membuat tampilan kandungan isi dari file eksternal tidak akan dituliskan secara khusus disini agar menghemat penulisan, silakan berlatih dengan mengadaptasi langkah-langkah dalam sesi sebelumnya untuk digunakan pada latihan sesi ini.Apabila Anda telah selesai membuat tampilan halaman tutorial selanjutnya yang berasal dari file teks, Anda dapat melakukan pemberian skrip untuk tombol Lanjut dalam halaman tersebut, dengan tujuan yaitu rangkaian frame tutorial selanjutnya apabila Anda telah membuatnya. Gunakan langkah-langkah pada bagian awal sesi praktikum ini untuk memberikan skrip tersebut

FF.Membuat tombol untuk kembali ke menu utamaBagian ini menunjukkan cara untuk membuat tombol yang memungkinkan pengguna dapat langsung kembali ke menu utama dari halaman tutorial penjumlahan atau dari manapun tampilan kandungan isi yang sedang ditampilkan.

70

Agar tidak mengganggu tampilan lain, akan lebih baik bila diletakkan pada suatu layer tersendiri.1. Pastikan semua layer lain terkunci dengan memberikan gembok pada

setiap layer2. Agar selanjutnya mudah, klik pada layer isimenu terlebih dahulu3. Tambahkan sebuah layer baru dengan meng-klik pada icon Insert

Layer

4. Klik dobel pada nama layer baru.5. Ganti namanya dengan Kembali

6. Tekan tombol Enter pada keyboard untuk menetapkan perubahan nama layer

7. Klik pada frame ke-12 dari layer baru ini untuk memastikan tombol mulai muncul pada saat yang tepat

8. Klik kanan pada posisi frame tersebut9. Dari pilihan yang muncul, klik pada Insert Keyframe10. Kemudian pilih Rectangle Tool dengan meng-klik pada tombol

tersebut di Toolbox (sisi kiri window Flash) atau dengan menekan tombol R di keyboard

11. Sebaiknya diubah dulu properti warna lewat Color Mixer di sisi kanan atas Flash agar tampilan warna kotak calon tombol menjadi sesuai keinginan. Pengubahan dapat juga dilakukan setelah kotak dibuat

71

12. Buatlah sebuah kotak di suatu tempat pada bagian utama tampilan aplikasi. Dalam contoh praktikum ini, kotak akan diletakkan pada sudut kanan atas tampilan utama

13. Buatlah sebentuk kotak, Anda dapat membuatnya sedemikian rupa agar terlihat dapat menyesuaikan diri dengan elemen antarmuka yang telah ada, seperti pada contoh dalam praktikum ini

14. Klik pada tombol Text Tool (T) pada Toolbox Flash15. Pastikan bahwa Anda akan membuat sebuah Static Text, bukan

Dynamic Text. Periksa pada bagian properti teks untuk mengetahuinya

16. Klik di atas kotak yang baru saja dibuat17. Ketikkan huruf x pada kotak tersebut18. Klik ke sembarang tempat pada stage di luar area tampilan aplikasi19. Klik pada Selection Tool (V)20. Klik pada huruf x yang baru saja dibuat21. Sesuaikan posisi huruf x dalam kotak yang ada dengan menggeser

huruf x tersebut seperlunya, menggunakan keyboard ataupun mouse

72

22. Kembali klik pada sembarang tempat di stage di luar tampilan aplikasi23. Pilih keseluruhan kotak dan huruf x di dalamnya24. Klik pada menu Modify pada menu bar, atau klik kanan pada seleksi

yang baru saja dilakukan25. Klik pada item menu Convert to Symbol (shortcut F8)26. Beri nama simbol baru sebagai “Tombolkembali”27. Klik pada pilihan Button untuk membuatnya menjadi tombol28. Klik tombol OK untuk menyimpan tombol baru ini ke pustaka/Library

aplikasi ini

29. Klik pada tombol baru ini untuk menyeleksinya30. Klik kanan pada tombol ini31. Klik pada item menu Actions32. Pilih Global Functions33. Pilih Timeline Control 34. Klik dobel pada sub pilihan goto35. Pastikan bahwa skrip yang muncul adalah gotoAndPlay(1); pada

event on (release) dalam bagian penulisan teks ActionScript. Bila belum seperti ini, lakukan pengubahan melalui Script Assist atau menuliskannya secara manual

73

36. Minimalkan kembali tampilan ActionScript37. Klik pada menu Control pada menu bar 38. Pilih item menu Test Movie untuk mencoba melihat hasilnya

Apabila semua langkah di atas telah dijalankan dengan benar, maka akan didapat hasil berupa rangkaian tampilan seperti di bawah ini. Pada awal sebelum dipilih menu Penjumlahan, maka tampilannya sebagai berikut:

Setelah menu Penjumlahan di-klik, maka tampilan isi menu muncul sekaligus semua tombol navigasi yang telah dibuat dalam praktikum ini. Bila tombol Lanjut di-klik, maka akan memunculkan bagian berikutnya dari kandungan isi yang telah diakses. Khusus tombol untuk kembali ke tampilan awal aplikasi (sudut kanan atas) akan selalu muncul saat tombol pilihan menu manapun di-klik oleh pengguna, dan akan hilang saat telah kembali ke tampilan awal.

74

GG. Membuat tombol untuk keluar dari aplikasiDalam suatu aplikasi, ada baiknya tersedia juga fasilitas untuk mematikan aplikasi tersebut, jadi tidak hanya mengandalkan pada tombol Close bawaan dari Windows. Dalam aplikasi ini, layanan tersebut akan dibuat dalam bentuk tombol.1. Kunci semua layer kecuali layer Tombol2. Klik pada Rectangle Tool (R)3. Klik pada Set Corner Radius 4. Berikan nilai 20 agar calon tombol nampak membulat

5. Klik OK 6. Pada bagian properti, berikan warna border yang serupa warna border

tombol utama lain di atasnya7. Tambahkan ketebalan border, misalnya beri nilai 28. Pilih bentuk border yang berbeda dari tombol di atasnya, dalam hal ini

misalnya berbentuk titik-titik9. Kemudian berikan warna fill serupa dengan warna latar belakang

tempat dimana tombol akan dibuat

10. Buatlah calon tombol di bagian kiri bawah aplikasi 11. Klik pada Text Tool (T)12. Karena warna latar menu cenderung gelap, beri warna yang cukup

kontras untuk calon teks, misalnya kuning13. Klik pada calon tombol untuk memulai menuliskan sesuatu di atas

calon tombol14. Ketikkan “KELUAR” diatas calon tombol15. Atur besarnya teks agar sesuai tombol16. Klik pada Selection Tool (V)17. Posisikan teks melalui drag dengan mouse atau tombol panah pada

keyboard agar letaknya tepat di atas calon tombol

75

18. Pilih teks dan kotak calon tombol dengan men-drag mouse untuk melingkupi keduanya

19. Klik kanan pada calon tombol tersebut20. Klik pada pilihan Convert to Symbol21. Beri nama tombolkeluar 22. Klik pada pilihan Button 23. Klik OK

24. Klik kanan pada tombol baru tersebut25. Klik pada pilihan Actions 26. Klik pada Script Assist untuk memunculkan bantuan penulisan skrip27. Dari pilihan Global Functions, pilih Browser/Network 28. Klik dobel pada fscommand 29. Pada bagian Commands for standalone player dari Script Assist,

pilih quit

30. Tutup kembali tempat penulisan skrip31. Coba hasilnya dengan Test Movie, seharusnya hasil akhir seperti di

bawah ini akan muncul

76

Bila Anda meng-klik tombol KELUAR saat Test Movie dan aplikasi tidak menutup, hal ini wajar karena perintah yang Anda berikan hanya akan berlaku apabila aplikasi dijalankan dalam player tersendiri. Agar dapat melihat hasilnya, jalankan aplikasi Anda yang telah dikompilasi menjadi swf pada folder tempat file aplikasi ini disimpan, kemudian coba klik kembali tombol KELUAR tersebut.

HH. Latihan Buatlah beberapa halaman tutorial baru, baik dengan contents dari dalam Flash secara langsung ataupun lewat file teks, lalu hubungkan dengan tombol navigasi seperti yang Anda buat di atas. Usahakan isi dalam tutorial mendekati apa yang biasa disampaikan dalam langkah-langkah untuk memahamkan suatu operasi penjumlahan sederhana kepada pengguna (yang diasumsikan siswa SD kelas 1 atau sebelumnya, tergantung kebutuhan dan/atau hasil analisis)

77

MATERI 7VARIASI TUTORIAL DARI FILE TEKS

PendahuluanTampilan tutorial terkadang menjadi kelemahan utama dari sebuah produk CAI apabila tidak dibangun sedemikian rupa agar memunculkan kekuatan dari produk berbasis komputer. Diantara kekuatan yang dapat dimanfaatkan adalah variabilitas dalam teks dari tutorial tersebut. Flash memungkinkan suatu teks dapat ditampilkan sedemikian rupa sehingga tidak hanya terlihat seperti tulisan biasa saja melainkan menjadi suatu barisan informasi yang terlihat menarik dan dapat menimbulkan minat untuk membacanya.

Tujuan Membentuk sebuah file teks eksternal agar memiliki variasi saat ditampilkan

sehingga tidak hanya mengandalkan pada konfigurasi preset dari Flash. Membuat sebuah sampel sederhana dari suatu tutorial yang memanfaatkan

elemen multimedia yaitu animasi untuk memperlihatkan efektivitas utilisasi multimedia dalam suatu aplikasi CAI.

Tool yang digunakan Macromedia Flash 8 Microsoft Notepad

78

KonsepTeks adalah bagian paling penting dalam suatu tutorial suatu materi edukasi. Tidak ada tutorial yang sukses tanpa adanya teks. Sekalipun tutorial tersebut menggunakan berbagai cara dalam menyampaikan informasinya, salah satu yang hampir pasti selalu digunakan apalagi untuk menyampaikan hal-hal penting adalah teks. Dengan kata lain, sesedikit apapun teks pada suatu kegiatan tutorial pastilah tetap ada dan digunakan sebagai salah satu bagian yang memerlukan perhatian dari pengguna/siswa. Teks sendiri merupakan suatu elemen multimedia dasar, dan seperti halnya citra serta grafis, telah disepakati sebagai bagian penting untuk penyampaian informasi multimedia yang bersifat umum dan masih dapat ditangani oleh elemen tersebut. Sebuah tutorial edukasi dalam berbagai jenis aktivitas hampir dapat dipastikan menggunakan elemen teks. Sekalipun telah menggunakan kemampuan multimedia dasar spesifik lain (misalnya animasi, audio, video, 3D, dan sebagainya), teks akan selalu muncul dan menjadi salah satu medium untuk memastikan tercapainya pemahaman pengguna terhadap materi yang disampaikan.Dalam Flash, teks dapat disajikan dengan berbagai variasinya karena teks termasuk dalam obyek yang dapat dimanipulasi oleh Flash. Setelah mendapatkan variasi berdasarkan properti dasarnya, sebagai salah satu obyek maka teks dapat diperlakukan seperti halnya obyek lain dalam Flash sehingga dapat diberikan berbagai efek ataupun fungsi yang memungkinkan dalam Flash, baik lewat editor obyek maupun lewat ActionScript. Teks dapat dijadikan sebagai obyek statis maupun dinamis melalui medium pembawanya yaitu kotak teks. Saat kotak teks dijadikan sebagai obyek statis, maka teks yang berada di dalamnya pada dasarnya dibuat supaya tidak dapat dimanipulasi oleh pengguna selama program yang menggunakannya berjalan. Kotak teks dijadikan obyek dinamis apabila diinginkan untuk dapat terjadi suatu modifikasi terhadapnya, semisal isi atau tampilannya dapat diubah oleh respon pengguna, atau untuk menerima teks dari luar Flash.Bila menggunakan teks dari file teks eksternal, selain dapat dimodifikasi berdasarkan preset konfigurasi pada kotak teks yang telah disiapkan, teks dapat dimodifikasi dengan menggunakan tag HTML. Tetapi manipulasi yang dapat dilakukan masing-masing sebenarnya terbatas. Pengubahan berdasarkan preset konfigurasi akan memodifikasi secara keseluruhan teks dalam kotak teks, sehingga semua teks dari file teks yang dimunculkan dalam kotak tersebut akan terkena efek konfigurasi ini. Agar dapat dilakukan modifikasi secara individual pada isi teks dari file teks eksternal, maka file teks harus menyertakan tag modifikasi HTML pada karakter/kata/kalimat yang perlu memiliki gaya tampilan khususBila menggunakan file teks, beberapa karakter tertentu mungkin tidak akan dapat ditampilkan pada kotak teks dalam aplikasi Flash. Agar karakter yang diinginkan dapat muncul dalam aplikasi, maka dilakukan pemecahan yaitu dengan menggunakan beberapa karakter yang akan merepresentasikan simbol tertentu. Sekalipun akan ditampilkan dalam berbagai frame yang berbeda, keseluruhan teks dapat disimpan dalam 1 file saja, jadi tidak memerlukan 1 file teks per tampilan kecuali memang bila diperlukan. Hal ini dapat dicapai dengan memanfaatkan penamaan variabel yang disesuaikan dengan properti kotak teks.

Tampilan dari hasil latihan yang akan dikerjakan

79

Langkah PengerjaanII. Persiapan

24. Jalankan Flash 25. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya26. Diasumsikan anda telah melalui sesi sebelumnya yang membicarakan tentang

rangkaian tutorial. Maka harus terdapat sebuah ‘halaman’ dari tutorial anda yang berisi tombol untuk melanjutkan ke ‘halaman’ lain, dan belum ada isinya. Kita akan melanjutkan dari tombol tersebut

27. Pastikan pula telah terdapat jumlah frame yang cukup pada layer yang menjadi tujuan pemunculan kelanjutan tutorial apabila tombol tersebut ditekan. Sekali lagi lihat pada latihan sebelumnya untuk menambahkan frame yang diperlukan

28. Carilah file teks terakhir yang Anda buat dalam sesi praktikum sebelumnya (misalnya dalam contoh ini adalah file “content.txt”)

JJ. Membuat teks kelanjutan tutorial52. Yang pertama akan dilakukan adalah membuat file teks dapat memunculkan

variasi individual saat ditampilkan dalam Flash. Bukalah file “content.txt” dengan Notepad

53. Anda dapat menambahkan variabel baru beserta nilainya ke dalam file teks tersebut. Untuk variabel pertama anda memang hanya perlu menuliskan namanya, diikuti equal sign (tanda sama dengan) atau “=”. Tetapi untuk

80

semua variabel selanjutnya harus dimulai dengan ampersand (tanda dan) atau “&”. Sebagai contoh, tuliskan &nextpagetitle= diikuti judul ‘halaman’ yang akan berisi tutorial berikutnya

54. Kemudian tuliskan &nextpagetext= diikuti teks yang dianggap menjadi teks tutorial pada halaman berikutnya tersebut

55. Simpanlah file teks anda. Jangan lupa bahwa untuk saat ini lokasi penyimpanan file teks (.txt) haruslah sama dengan lokasi penyimpanan file Flash (.fla) anda

KK. Menyiapkan tempat untuk memunculkan teks1. Kembali ke Flash. Lakukan langkah-langkah seperti latihan sebelumnya, yaitu

saat membuat rangkaian frame Navigator. Buatlah rangkaian frame baru pada layer yang sama dengan frame Navigator, tetapi dimulai dari frame kosong kedua atau ketiga setelah frame terakhir Navigator. Contoh, dalam sesi latihan sebelumnya, frame terakhir adalah frame ke-55, maka rangkaian frame ini baru akan dimulai dari rame ke-57

2. Jadikan frame ke-65 sebagai frame terakhir rangkaian frame baru ini (tempat keyframe terakhir)

3. Beri label rangkaian frame baru ini dengan nama nav2

81

4. Buatlah supaya rangkaian frame baru ini memuat isi dari file teks “content.txt”

5. Klik tombol Lanjut yang ada pada rangkaian frame navigator 6. Klik kanan tombol tersebut, pilih Actions 7. Klik dobel Goto pada pilihan skrip8. Ubah Frame Number menjadi Frame Label9. Pada pilihan di bawahnya, pilih label nav2

10. Kembali ke rangkaian frame baru. Dalam rangkaian frame tersebut, anda harus membuat 2 kotak teks kosong dan 2 buah tombol. Untuk membuat tombol, Copy saja 2 tombol dari rangkaian frame navigator agar lebih cepat, jangan lupa untuk memilih Paste in place, bukan Paste saja, pada frame ke-57

82

11. Klik pada tombol Kembali pada frame ke-57 tersebut12. Klik kanan tombol tersebut, pilih Actions

13. Klik dobel Goto pada pilihan skrip14. Pada Script Assist, ubah Frame Number menjadi Frame Label15. Pada pilihan di bawahnya, pilih label Navigator

16. Klik kembali pada frame ke-57 untuk memastikan Anda berada di frame ini

Seperti saat membuat rangkaian frame Navigator, buatlah kotak teks di rangkaian frame baru, hanya saja kali ini buatlah 3 kotak teks di layar tampilan tutorial baru ini. Masing-masing akan dihubungkan dengan variabel yang Anda telah buat dalam file teks di atas, sehingga masing-masing kotak teks akan menampilkan isi dari variabel tersebut.Setiap kotak teks akan diberi preset konfigurasi agar masing-masing memunculkan tampilan teks yang memiliki gaya berbeda. Perhatikan bahwa pengubahan properti lewat Flash akan mempengaruhi keseluruhan teks dalam kotak yang diubah propertinya.

83

17. Untuk membuat kotak teks, mulailah dengan klik pada Text Tool (T)18. Gambarkan kotak teks pertama, satu baris saja19. Kemudian gambarkan kotak teks ke-dua, buatlah agar dapat menerima banyak

baris20. Lakukan hal sama untuk kotak ke-tiga21. Kotak teks kosong pertama akan menjadi tempat memunculkan judul, jadikan

Dynamic Text22. Beri isian nama variabel sebagai nextpagetitle 23. Besarkan ukuran hurufnya (misalnya 16 point)24. Silakan ganti font bila diinginkan (misalnya jadikan sebagai Verdana)

25. Kotak kosong ke-dua akan menjadi tempat memunculkan teks isi tutorial. Seperti kotak teks judul, jadikan Dynamic Text

26. Kemudian berikan isian nama variabel sebagai nextpagetext 27. Berikan ukuran huruf kecil saja (misalnya 11)

28. Jadikan kotak ke-tiga juga sebagai Dynamic Text

84

29. Ubah properti dari Singleline menjadi Multiline30. Beri isian nama variabel kotak ke-tiga sebagai nextpagetext2 31. Berikan ukuran huruf berbeda (misalnya 12) 32. Agar terlihat perbedaannya, pilih font Times New Roman33. Beri pilihan warna biru pada calon teks yang akan dimunculkan34. Ubah properti dari Singleline menjadi Multiline

35. Bila semua elemen dalam rangkaian telah dibuat, mungkin akan ada kesulitan dalam memilihnya. Pada saat seperti inilah, anda dapat memanfaatkan Subselection Tool (A) untuk memilih salah satu elemen tampilan dengan cepat

Berikan tambahan untuk melengkapi teks materi, dalam hal ini adalah suatu gambar. Letakkan di dekat teks yang ada, diasumsikan gambar tersebut adalah obyek yang menjelaskan teks materi.36. Klik pada Rectangle Tool (R)37. Agar gambar tampil tanpa bingkai, maka klik pada Stroke color di bagian

properti

38. Kemudian hilangkan pilihan warna untuk Stroke Color tersebut

39. Pada Color Mixer di bagian kanan atas Flash, klik pada panah disamping pilihan Type

85

40. Klik pada pilihan Bitmap untuk memunculkan pilihan berdasar tipe pewarnaan bitmap pada obyek kotak (Rectangle) yang hendak digambarkan

41. Klik pada pilihan gambar yang ada di bagian bawah dari Color Mixer tersebut atau,

42. Klik pada tombol Import untuk mencari gambar lain dan memasukkannya sebagai bitmap siap pakai dalam aplikasi Anda

43. Buatlah kotak gambar yang diinginkan di dekat teks

44. Bila gambar nampak tidak seperti yang Anda inginkan, ubahlah ukurannya dengan Free Transform Tool (Q) atau bentuk dan orientasinya menggunakan Gradient Transform Tool (F)

45. Cobalah dengan Test Movie

LL. Memvariasikan teks secara individual dengan tag HTMLSaat Anda mencoba melihat hasilnya, terlihat bahwa teks pada setiap kelompok semuanya sama. Bila Anda mencoba mengutak-atik lewat Flash, Anda akan tahu bahwa Anda tidak dapat mengubah bagian individual dari teks pada setiap kotak karena preset konfigurasi berlaku untuk keseluruhan isi kotak teks. Anda

86

memerlukan penggunaan tag HTML agar atribut khusus dapat diterapkan kepada karakter, kata, atau kalimat tertentu saja secara individual.Selain itu, sepertinya ada yang kurang pada tampilan Anda (bila Anda mengikuti contoh yang diberikan praktikum ini). Benar, Flash tidak dapat begitu saja menampilkan karakter tertentu dari file teks, termasuk yang hendak Anda tampilkan. Beberapa karakter tertentu hanya dapat ditampilkan menggunakan suatu cara khusus yang merupakan representasi dari simbol tertentu.1. Kembali ke Notepad2. Agar tampilan teks tampil bervariasi secara individual, berikan beberapa tag

HTML. Contoh: untuk menebalkan teks, gunakan pasangan <b> dan </b>, untuk memberikan garis bawah, gunakan <u> dan </u>, atau untuk memberi efek italic, gunakan <i> dan </i>. Cobalah seperti yang disampaikan oleh instruktur, dan perhatikan contoh di layar proyeksi untuk melihat efek penambahan tag tersebut

3. Untuk memunculkan lambang + (plus sign, atau disebut juga simbol “tambah”), gantilah + pada karakter Anda dengan simbol khusus yaitu %2B

4. Simpanlah perubahan anda. Lihat hasilnya dengan Test Movie5. Saat Anda jalankan, Anda mungkin akan melihat bahwa pointer mouse akan

berubah bila berada di atas teks yang berasal dari file teks, menjadikan seolah-olah Anda dapat menyeleksi teks tersebut. Untuk menghilangkan masalah tampilan ini, matikan atribut Selectable pada properti teks dari kotak teks yang bersangkutan

6. Coba kembali dengan Test Movie untuk melihat hasilnya

MM. LatihanCobalah untuk membuat halaman tutorial yang menyertakan karakter-karakter lain, misalnya lambang >, <, dan &

87

MATERI 8TUTORIAL DENGAN ANIMASI SEDERHANA

PendahuluanAnimasi merupakan salah satu media yang dapat membuat visualisasi suatu materi menjadi nampak lebih dinamis, dengan beberapa efek yang diinginkan diantaranya adalah ketertarikan siswa untuk mau mempelajari materi tersebut, serta pemahaman yang lebih baik dan cepat manakala tampilan diperlihatkan dengan cara yang tidak statik seperti buku ataupun ketika harus membayangkan apa yang dikatakan oleh pengajar.

Tujuan Membuat sebuah sampel animasi sederhana dari suatu tutorial Memanfaatkan animasi dalam suatu metode gerakan sederhana baik pada teks

maupun obyek visual lain Memperlihatkan kemampuan memberikan tampilan dinamis dari suatu CAI.

Tool yang digunakan Macromedia Flash 8 Microsoft Notepad.

KonsepTidak semua medium dapat digunakan untuk menyampaikan suatu materi instruksional tertentu. Hal ini juga berlaku pada aplikasi instruksional berbasis komputer yang menggunakan prinsip multimedia. Tidak semua elemen multimedia dapat digunakan untuk menangani penyampaian materi instruksional. Pemilihan elemen multimedia yang tepat akan membuat penyampaian materi tertentu menjadi sangat efektif dan efisien, sehingga dapat memaksimalkan pemahaman pengguna.Salah satu elemen multimedia yang cukup sering digunakan adalah animasi. Dalam membangun aplikasi instruksional berbasis multimedia, animasi merupakan salah satu elemen yang paling banyak digunakan untuk menimbulkan efek tertentu yang

88

dapat memaksa pengguna untuk tetap memberikan perhatian ke tampilan materi yang disajikan. Hanya saja perlu diingat bahwa animasi sebaiknya tidak selalu digunakan pada setiap bagian aplikasi CAI, karena dapat pula mengalihkan perhatian bila digunakan secara sembarangan atau berlebihan. Sekalipun teks adalah salah satu elemen multimedia, teks juga merupakan elemen tampilan dasar, sehingga cukup beralasan apabila untuk membuatnya lebih efektif maka pada suatu teks kemudian dikenakan animasi. Dalam suatu aplikasi CAI multimedia, teks dapat merupakan salah satu tulang punggung penyaji utama materi. Perlu diingat bahwa agar tidak menimbulkan kesan aplikasi CAI adalah serupa e-book (buku versi elektronik), maka penggunaan teks harus dibatasi. Agar teks hanya sedikit tetapi efisien sebagai salah satu cara untuk menyampaikan materi, maka teks dapat dibuat sedemikian rupa agar tampil variatif (tentu saja dengan tidak melupakan aturan keseragaman dan konsistensi antarmuka). Selain itu, dapat pula diberikan animasi kepada teks sehingga membuatnya lebih menarik, meyakinkan, atau lebih berhasil dalam menonjolkan suatu informasi tertentu yang bersifat penting dan tidak boleh terlewatkan oleh pengguna.Animasi untuk teks dalam Flash dapat diberikan dalam berbagai jenis hampir tidak terbatas. Mulai dari animasi paling sederhana (misalnya memindahkan suatu karakter dengan Tweening, atau menggunakan model frame-by-frame), animasi yang sedikit lebih kompleks seperti motion guide, sampai dengan animasi yang merupakan kombinasi dari berbagai metode. Semuanya bertujuan untuk memanfaatkan animasi semaksimal mungkin untuk mencapai tujuan dari CAI secara keseluruhan.

Tampilan dari hasil latihan yang akan dikerjakan

Langkah PengerjaanNN. Persiapan

89

29. Jalankan Flash 30. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya31. Karena yang akan ditampilkan sebagai sampel adalah Penjumlahan, maka

siapkan pekerjaan anda untuk memperbolehkan editing pada layer Penjumlahan, sementara itu matikan/kunci akses ke semua layer lain

32. Pastikan pula telah terdapat jumlah frame yang cukup pada layer Penjumlahan. Sekali lagi lihat pada latihan sebelumnya untuk menambahkan frame yang diperlukan, setelah itu silakan klik pada frame berikutnya setelah frame terakhir yang menampilkan suatu materi di layer Penjumlahan

OO. Menambahkan teks di file teks56. Buka file teks utama anda dengan Notepad57. Tambahkan variabel baru, tuliskan &animatedtext di paling bawah 58. Kemudian tuliskan teks yang ingin anda tampilkan selanjutnya59. Bila diperlukan, gunakan gaya pemformatan lewat tag HTML seperti yang

telah disampaikan dalam pertemuan sebelumnya60. Simpan kembali file teks tersebut, biarkan Notepad tetap terbuka agar mudah

dilakukan modifikasi

PP.Menyiapkan halaman dengan animasi pada teksSalah satu usaha untuk menarik perhatian pengguna ataupun membuat pengguna tetap terfokus pada materi adalah memunculkan materi dengan suatu animasi. Animasi sebagai cara menampilkan suatu materi sebaiknya tidak terlalu lambat atau panjang agar pengguna tidak teralih perhatiannya ataupun cepat merasa bosan. Pertimbangkan pula variasi animasi, agar tidak terlihat minim tetapi juga tidak terlihat terlalu “meriah” (sesuai konteks, bervariasi tetapi menjaga keseragaman antarmuka agar mudah diidentifikasi).Teks sebagai materi instruksional juga dapat dianimasikan agar tidak tampil kaku ataupun agar dapat membuat pemunculan materi yang mampu menjaga semangat

90

siswa sebagai penggunanya. Animasi juga dapat diberlakukan pada teks yang berasal dari suatu file teks terpisah yang berada di luar aplikasi CAI yang dibuat dengan menggunakan Flash.1. Klik dan drag pada frame ke-85 dari keseluruhan layer2. Klik kanan pada frame ke-85 tersebut3. Klik pada Insert Layer

4. Apabila masih terdapat Keyframe di frame ke-70 dari latihan sebelumnya, silakan klik dan drag pada frame ke-70

5. Klik kanan pada frame ke-70 tersebut6. Klik pada Clear Keyframe

7. Diasumsikan rangkaian frame nav2 (latihan sebelum ini) berakhir pada frame 65, maka latihan ini akan mulai dari frame ke-67. Klik pada frame ke-67 pada layer Penjumlahan

8. Klik kanan pada frame ke-67 tersebut9. Klik Insert Keyframe

91

10. Klik Text Tool (T)11. Cek pada properti, bila masih bersifat Static Text, klik pada panah di samping

kanannya12. Klik pada Dynamic Text13. Berikan pilihan properti Multiline (masih di property inspector)14. Klik pada tombol di property inspector yang memunculkan tulisan Render

text as HTML bila pointer mouse berada di atasnya (tombol bergambar <>)

15. Buatlah sebuah kotak teks di tengah stage 16. Beri nama variabel kotak teks tersebut animatedtext

17. Klik pada frame ke-7618. Klik kanan pada frame tersebut19. Klik pada Insert Blank Keyframe

92

20. Klik pada frame ke-7521. Klik kanan pada frame ke-75 tersebut22. Klik Insert Keyframe 23. Klik di tengah antara frame ke-67 s/d frame ke-7524. Klik kanan saat masih di tengah rangkaian frame tersebut25. Klik Create Motion Tween

26. Klik pada frame ke-7527. Klik kanan di frame tersebut28. Klik Create Motion Tween 29. Klik pada frame ke-67 kembali30. Klik pada Free Transform Tool (Q)31. Klik pada kotak teks tersebut32. Ubahlah supaya ukuran lebar kotak teks mengecil dengan men-drag salah satu

sisi ke tengah

93

33. Klik pada bagian tengah dari rangkaian layer baru ini34. Beri nama label rangkaian tersebut sebagai animatednav

35. Klik pada frame ke-6536. Klik pada obyek tombol Lanjut (ingat, jangan pada teks)37. Klik kanan pada tombol tersebut38. Klik pada Actions

39. Masuk pada pilihan Global Functions40. Pilih Timeline Control 41. Klik dobel pada pilihan goto 42. Munculkan Script Assist untuk mempermudah pembuatan skrip43. Gantikan Frame Number dengan Frame Label 44. Kemudian isikan nama frame dengan animatednav

94

45. Klik pada frame ke-7546. Klik kanan pada frame tersebut47. Klik pada Actions48. Pastikan masih berada dalam Global Functions >> Timeline Control 49. Dobel klik pada pilihan stop 50. Klik pada menu Control 51. Coba dengan Test Movie (atau tekan saja kombinasi tombol Ctrl-Enter)

QQ. Membuat animasi sederhana dengan menggerakkan karakter (bagian 1)Setelah mencoba memvariasikan pemunculan tampilan teks ke layar, maka selanjutnya Anda perlu mencoba menggunakan animasi untuk suatu bagian kecil dari tampilan yang memang membutuhkan adanya animasi untuk mempermudah pengguna memahami suatu materi. Ingat bahwa penggunaan sebuah elemen multimedia yang tepat akan semakin memperlihatkan kekuatan dari CAI tersebut secara keseluruhan serta elemen multimedia secara khusus, dan semakin menyembunyikan kelemahan yang potensial muncul saat penyampaian materi yang menggunakan metode tersebut.Dalam praktikum kali ini, bagian penyampaian materi yang memanfaatkan animasi akan dibuat sebagai salah satu materi kelanjutan dari materi yang sebelumnya. 1. Tambahkan frame pada setiap layer sampai mencapai jumlah 95 frame

2. Klik pada layer Penjumlahan untuk memilih layer ini yang aktif3. Kunci semua layer yang lain terlebih dahulu agar tidak memunculkan masalah4. Klik pada frame ke-78 layer Penjumlahan5. Klik kanan pada frame tersebut6. Klik pada Insert Keyframe 7. Klik pada frame ke-80

95

8. Klik kanan pada frame tersebut9. Klik pada Insert Keyframe

10. Klik kembali pada frame ke-7811. Klik pada Text Tool (T)12. Ketikkan sebuah kalimat judul di bagian atas aplikasi13. Ketikkan teks di bagian utama aplikasi yaitu “18 + 16 = ??”, buatlah agar 5

karakter tersebut memiliki kotak teks terpisah untuk memudahkan dalam membuat karakter yang akan dianimasikan nanti. Lakukan penyalinan menggunakan kombinasi tombol Alt pada keyboard dan drag mouse pada teks operand pertama untuk menghasilkan teks yang serupa di samping kanannya

14. Beri nama frame pendek ini sebagai anitut1

15. Klik pada Selection Tool (V)16. Klik pada frame ke-75 layer Penjumlahan 17. Klik ke sembarang tempat di luar aplikasi pada stage 18. Klik pada tombol Lanjut 19. Klik kanan pada tombol tersebut20. Klik pada pilihan Actions

96

21. Pada bagian GotoandPlay, gantilah nama frame dengan anitut1

22. Kembali klik frame ke-75 layer Penjumlahan 23. Lakukan drag yang melingkupi tombol Kembali dan Lanjut untuk memilih

keduanya24. Klik kanan pada tombol tersebut25. Klik pada pilihan Copy 26. Klik pada frame ke-79 27. Klik pada sembarang tempat dalam bagian utama aplikasi28. Klik kanan pada bagian ini29. Klik pada pilihan Paste in Place 30. Tambahkan sebuah layer baru di atas layer Penjumlahan. Klik pada icon

Insert Layer di bawah daftar nama layer31. Beri nama AniBase 32. Klik pada frame ke-82 layer AniBase 33. Klik kanan pada frame tersebut34. Pilih Insert Keyframe 35. Klik pada frame ke-78 layer Penjumlahan 36. Drag mouse untuk melingkupi semua teks di bagian utama aplikasi37. Klik kanan pada salah satu teks terpilih38. Klik pada pilihan Copy

39. Kuncilah layer Penjumlahan dan anitut1 agar tidak merusak layer tersebut40. Klik pada layer AniBase 41. Klik pada frame ke-8242. Klik pada bagian utama aplikasi43. Klik kanan di bagian tersebut44. Pilih item Paste in Place 45. Klik pada frame ke-9346. Klik kanan pada frame tersebut

97

47. Pilih Insert Keyframe 48. Pilih frame ke-94 s/d 95 (frame terakhir) pada layer Penjumlahan tersebut49. Klik kanan pada frame yang terseleksi50. Pilih Clear Frames 51. Tambahkan 4 layer baru di atas layer AniBase 52. Beri nama masing-masing opn1, opr, opn2, equ

53. Klik pada frame ke-82 layer AniBase 54. Klik pada sembarang tempat di luar aplikasi (tetap dalam stage)55. Klik pada teks angka “18”56. Klik kanan pada teks tersebut57. Pilih item menu Copy 58. Kunci layer AniBase 59. Hilangkan layer AniBase dari pandangan60. Klik pada frame ke-82 layer opn161. Klik pada sembarang tempat di bagian utama aplikasi62. Klik kanan di bagian tersebut63. Pilih item menu Paste in Place 64. Klik pada frame ke-8765. Klik kanan pada frame tersebut66. Pilih Insert Keyframe 67. Pilih frame ke-88 s/d 95 (frame terakhir) pada layer opr1 tersebut68. Klik kanan pada frame yang terseleksi69. Pilih Clear Frames 70. Munculkan kembali layer AniBase 71. Lakukan kembali langkah 53 s/d 70, tetapi yang disalin adalah teks “+” untuk

layer opr, teks “16” untuk layer opn2, dan teks “=” untuk layer equ

72. Klik pada sembarang frame antara 82 s/d 87 layer opn1

98

73. Klik kanan pada frame pilihan Anda 74. Pilih Create Motion Tween 75. Klik pada frame ke-8776. Klik kanan pada frame tersebut77. Pilih Create Motion Tween 78. Klik pada frame ke-87 layer opn1 79. Pindahkan teks ke bagian kanan bawah area aplikasi utama80. Lakukan langkah ke 72 s/d 79 untuk teks pada layer opr, opn2, dan equ agar

teks yang sebelumnya nampak berjajar horisontal menjadi berjajar vertikal

81. Klik pada frame ke-87 layer opn182. Klik kanan pada frame tersebut83. Pilih item menu Actions 84. Dari pilihan Global Functions, pilih Timeline Control 85. Dobel klik pada stop 86. Lakukan hal serupa pada layer opr, opn2, dan equ

87. Buka kunci layer anitut1 88. Klik pada frame ke-79 layer anitut1 89. Klik ke sembarang tempat pada stage diluar aplikasi90. Pilih tombol Lanjut 91. Klik pada tombol tersebut92. Klik kanan masih pada tombol93. Pilih item menu Copy 94. Buka kunci dan tampakkan kembali layer AniBase 95. Klik pada frame ke-87 layer AniBase 96. Klik kanan pada frame tersebut

99

97. Klik pada pilihan Insert Keyframe 98. Klik pada bagian utama aplikasi99. Klik kanan pada bagian tersebut100. Klik pada item Paste in Place 101. Klik pada frame ke-88 layer AniBase 102. Klik kanan pada frame tersebut103. Klik pada pilihan Insert Keyframe

104. Bila tombol Lanjut masih terlihat pada frame ke-88 layer AniBase, hapus saja tombol tersebut

105. Untuk sementara kunci dan hilangkan lagi layer AniBase dari pandangan 106. Kembali klik pada frame ke-79 layer anitut1 107. Klik sembarang tempat pada stage di luar aplikasi108. Klik pada tombol Kembali pada aplikasi109. Klik kanan pada tombol tersebut110. Pilih item menu Actions 111. Keluarkan Script Assist112. Dobel klik pada goto 113. Pada bagian Type, bila telah terpilih Frame Label maka biarkan saja,

apabila masih terpilih Frame Number maka ubahlah menjadi Frame Label 114. Kemudian pada bagian Frame, pilihlah frame animatednav 115. Tutup kembali bagian penulisan skrip

116. Klik pada tombol Lanjut 117. Klik kanan pada tombol tersebut118. Pilih item menu Actions 119. Kembali dobel klik pada goto 120. Kali ini ubahlah kembali isi Type dari Frame Label menjadi Frame

Number 121. Isikan pada bagian Frame angka 82 yang menjadi awal dari rangkaian

animasi teks tersebut

100

122. Lakukan Test Movie untuk melihat gerakan yang memperlihatkan separuh dari keseluruhan animasi yang akan dibuat

123. Bila telah sesuai yang diinginkan, maka dapat dilakukan langkah pembuatan selanjutnya

RR. Kelanjutan pembuatan animasi sederhana (bagian 2) 1. Buka kunci layer AniBase dan tampakkan2. Kunci layer anitut1 3. Klik frame ke-87 pada Timeline 4. Pilih teks yang telah dibentuk dalam urutan vertikal 5. Klik kanan pada seleksi tersebut6. Klik pada item menu Copy

7. Untuk sementara kunci layer opn1, opr, opn2, dan equ 8. Klik pada frame ke-88 layer AniBase 9. Klik pada bagian utama aplikasi10. Klik kanan pada bagian tersebut11. Pilih item menu Paste in Place 12. Lakukan penyalinan juga (dengan Paste in Place) ke frame ke-93

layer AniBase 13. Klik pada frame ke-89 14. Klik pada Rectangle Tool (R)

101

15. Pilih Stroke Color warna biru16. Berikan pilihan kosong pada Fill Color agar tidak memunculkan

warna di tengah kotak yang akan dibuat17. Buatlah kotak yang melingkupi angka 6 dan 8 di bagian utama aplikasi 18. Klik pada Text Tool (T)19. Klik pada bagian bawah tampilan penjumlahan20. Ketikkan “4”

21. Kemudian kunci layer AniBase 22. Buka kembali kunci layer opn1 23. Klik pada frame ke-89 layer opn1 24. Klik kanan pada frame tersebut25. Pilih item menu Insert Keyframe 26. Klik pada frame ke-89 layer opn1 27. Klik Text Tool (T)28. Klik pada bagian bawah tampilan penjumlahan29. Ketikkan teks “1”

30. Klik pada frame ke-93 layer opn1 31. Klik kanan pada frame ini32. Klik pada pilihan Insert Keyframe 33. Klik dan drag frame ke-94 s/d 95

34. Klik kanan pada seleksi ini35. Pilih Clear Frames

102

36. Klik pada sembarang frame antara 89 s/d 9237. Klik kanan pada frame yang anda pilih38. Klik pada pilihan Create Motion Tween 39. Klik pada frame ke-93 40. Klik kanan pada frame tersebut41. Pilih item menu Create Motion Tween 42. Masih di frame ke-93 layer opn1, klik pada teks bertuliskan “1”43. Drag teks tersebut ke atas susunan teks vertikal (diatas teks “16”)

44. Coba dengan Test Movie

Bila anda berhasil membuat animasi sederhana dimana terlihat angka 1 bergerak naik ke atas (untuk menunjukkan adanya bilangan yang disimpan karena hasil penjumlahan lebih dari 1 digit), maka anda tinggal membuat kelanjutan langkah untuk melengkapkan animasi tersebut. Karena sepertinya masih diperlukan tambahan frame, ada baiknya dimulai dengan menambahkan frame baru di belakang frame yang telah ada.

45. Drag pada frame ke-105 semua layer46. Klik kanan pada seleksi47. Klik pada pilihan Insert Layer 48. Buka kunci layer AniBase 49. Klik pada frame ke-95 layer AniBase 50. Klik kanan pada frame tersebut51. Klik pada Insert Keyframe 52. Klik pada frame ke-93 pada Timeline 53. Lakukan drag untuk menyeleksi semua teks yang terlihat terakhir kali

di bagian utama aplikasi

103

54. Klik kanan pada hasil seleksi55. Klik pada pilihan Copy 56. Klik pada frame ke-95 layer AniBase 57. Klik kanan pada bagian utama aplikasi yang sekarang terlihat kosong58. Klik pada pilihan Paste in Place 59. Klik pada sembarang tempat di stage di luar aplikasi60. Dobel klik pada kotak biru yang melingkupi teks “6” dan “8” 61. Drag untuk menggeser kotak tersebut hingga melingkupi teks “1” dan

“1” yang berada di sisi kiri masing-masing teks “6” dan “8”62. Klik pada Free Transform Tool (Q)63. Ubah ukuran kotak biru agar melingkupi juga teks “1” yang berada di

baris paling atas

64. Klik pada Selection Tool (V)65. Karena harus ada penekanan pada penggunaan angka “1” yang berada

di bagian paling atas susunan teks vertikal, maka perlu ada penambahan frame. Drag pada frame ke-115 keseluruhan layer

66. Klik kanan pada seleksi67. Klik pada pilihan Insert Layer 68. Klik pada frame ke-100 layer opn1 69. Klik kanan pada frame tersebut70. Klik pada pilihan Insert Keyframe 71. Klik pada Text Tool (T)72. Klik pada area di depan teks “4”73. Ketikkan “3” sebagai teks tersebut74. Klik pada Selection Tool (V)75. Klik pada frame ke-105 layer opn1 76. Klik kanan pada frame tersebut77. Klik pada pilihan Insert Keyframe78. Klik pada frame ke 106 layer opn1

104

79. Klik kanan pada frame tersebut80. Klik pada pilihan Clear Frames81. Lakukan hal yang sama (langkah 75 s/d 80 di atas) tetapi untuk layer

AniBase 82. Klik salah satu frame antara 101 s/d 104 pada frame opn1 83. Klik kanan pada frame yang dipilih84. Pilih item menu Create Motion Tween 85. Klik pada frame ke-10586. Klik kanan pada frame tersebut87. Klik pada pilihan Create Motion Tween 88. Klik kanan kembali pada frame ini89. Klik pilihan Actions 90. Pada pilihan Global Functions >> Timeline, dobel klik pada stop

91. Tutup kembali tempat penulisan skrip

92. Klik pada frame ke-100 dari layer opn1 93. Klik pada sembarang tempat pada stage diluar tampilan aplikasi94. Klik pada teks bertuliskan “3”95. Klik pada Free Transform Tool (Q)96. Ubah ukuran kotak teks bertuliskan “3” agar menjadi lebih kecil

105

97. Klik kembali Selection Tool (V)98. Kunci layer opn1 99. Klik pada frame ke-93 layer AniBase 100. Klik ke sembarang tempat pada stage di luar aplikasi101. Pilih dengan drag pada tombol Lanjut di bagian utama aplikasi102. Klik kanan pada tombol tersebut103. Pilih item menu Copy104. Klik pada frame ke-105 layer AniBase 105. Klik kanan pada frame tersebut106. Klik pada pilihan Paste in Place 107. Klik pada sembarang tempat pada stage di luar aplikasi108. Klik pada tombol Lanjut (bukan pada teks di dalam tombol)109. Klik kanan pada tombol tersebut110. Pilih item menu Actions 111. Pastkan anda berada dalam pilihan Global Functions >> Timeline

Control, keluarkan Script Assist bila belum muncul112. Pada bagian Type, pastikan pilihan yang muncul adalah Frame Number 113. Isikan nomor frame pada bagian Frame dengan nilai 107 (sebagai frame

awal untuk menyelesaikan animasi)

114. Bagian terakhir animasi adalah memindahkan hasil penjumlahan ke soal. Tutup terlebih dahulu bagian penulisan skrip

115. Masih pada frame ke-105, pilih 2 baris isi tampilan pada bagian utama (gunakan kombinasi tombol keyboard Shift dan drag mouse untuk menyeleksi obyek tertentu saja)

116. Klik kanan pada seleksi yang dibuat117. Klik pada pilihan Copy

106

118. Klik pada frame ke-107119. Klik kanan pada frame tersebut120. Pilih item menu Insert Keyframe 121. Klik pada bagian utama aplikasi122. Klik kanan pada bagian tersebut123. Pilih item menu Paste in Place 124. Buka kunci layer opn1 125. Klik pada frame ke-105 layer AniBase126. Pilih obyek teks bertuliskan “3” dan “4” yang berada di paling bawah dari

tampilan penjumlahan

127. Klik kanan pada seleksi tersebut128. Pilih item menu Copy 129. Klik pada frame ke-107 layer opn1 130. Klik kanan pada frame tersebut131. Pilih item menu Insert Keyframe 132. Klik kanan pada sembarang tempat di bagian utama yang kosong (pastikan

Anda masih berada di layer opn1)133. Klik pada pilihan Paste in Place 134. Pilih frame ke-113 layer AniBase dan opn1 135. Klik kanan pada seleksi frame136. Klik pada pilihan Insert Keyframe

137. Pilih frame ke-114 s/d 115 layer AniBase dan opn1 138. Klik kanan pada seleksi frame139. Pilih item menu Clear Frames 140. Klik pada frame ke-107 layer AniBase 141. Klik pada obyek teks bertuliskan “??”142. Klik kanan pada teks tersebut143. Klik pada pilihan Cut 144. Klik pada frame ke-113 layer AniBase 145. Klik pada obyek teks bertuliskan “??”146. Hapus obyek teks tersebut147. Kunci layer AniBase148. Klik pada frame ke-107 layer opn1

107

149. Klik kanan pada bagian utama aplikasi150. Klik pada item menu Paste in Place 151. Klik pada frame ke-108 152. Klik kanan pada frame tersebut153. Klik pada pilihan Insert Keyframe 154. Klik pada teks “??”155. Hapus teks tersebut156. Klik sembarang frame antara frame ke-109 s/d 112 layer opn1 157. Klik kanan pada frame yang dipilih158. Klik pada pilihan Create Motion Tween 159. Klik pada frame ke-113160. Klik kanan pada frame tersebut161. Klik pada pilihan Create Motion Tween

162. Masih di frame ke-113, klik pada teks bertuliskan “34” di bagian utama aplikasi

163. Pindahkan teks “34” dengan drag ke tempat yang sebelumnya berisi teks “??” yang telah dihapus

164. Klik kanan kembali pada frame ke-113165. Klik pada pilihan Actions 166. Pada pilihan Global Functions >> Timeline Control, dobel klik pada

pilihan stop 167. Tutup tempat penulisan skrip168. Buka kunci layer Penjumlahan169. Klik sembarang tempat pada stage diluar aplikasi170. Pilih (seleksi dengan drag) tombol Kembali 171. Klik kanan pada tombol tersebut172. Klik pada pilihan Copy173. Kunci lagi layer Penjumlahan 174. Buka kunci layer AniBase 175. Klik pada frame ke-113 layer AniBase176. Klik kanan pada bagian utama aplikasi177. Pilih item menu Paste in Place 178. Klik ke sembarang tempat yang tidak terdapat obyek di atasnya179. Klik ke tombol Kembali 180. Klik kanan pada tombol tersebut181. Pilih item menu Actions 182. Pastikan pilihan masih Global Functions >> Timeline Control, ganti isi

pada Type menjadi Frame Label 183. Kemudian beri pilihan pada bagian Frame yaitu anitut1

108

184. Tutup bagian penulisan skrip185. Coba dengan Test Movie

SS. LatihanSampel animasi yang telah dibuat nampak bergerak terlalu cepat dan terlihat tidak mulus. Untuk membuat animasi nampak lebih halus, silakan memperbanyak jumlah frame yang digunakan, karena dalam praktikum ini hanya menyajikan contoh kasar untuk sekedar tambahan inspirasi atau ide contents saja. Agar animasi teks terlihat lebih rapi, gunakan animasi jenis motion guide pada teks yang digerakkan. Coba pula gaya animasi dasar lain yaitu frame by frame yang pada dasarnya lebih sederhana tetapi lebih memungkinkan variasi animasi.

109

MATERI 9PENGGUNAAN SUARA

PendahuluanSuara adalah salah satu elemen multimedia penting, bahkan terkadang istilah multimedia dapat dianggap tidak benar-benar diimplementasikan apabila tidak memanfaatkan elemen suara. Dengan suara maka suatu aplikasi multimedia dapat menyampaikan informasi kandungannya melalui medium alternatif yaitu audio, sehingga memberikan opsi penerimaan materi bukan hanya dari visual (tampilan) saja dan pada akhirnya memungkinkan karakteristik suatu CAI menjadi terlihat lebih kuat.

Tujuan Memanfaatkan elemen suara ke dalam CAI Membuat aplikasi CAI dapat memunculkan suara berdasar event, perintah,

atau yang lain

Tool yang digunakan Macromedia Flash 8 Windows Sound Recorder

KonsepTutorial dalam sebuah CAI hendaknya tidak hanya berupa teks, tetapi dapat menggunakan kombinasi medium kategori multimedia, misalnya grafis, animasi, video, audio, ataupun yang lain. Dengan memanfaatkan medium multimedia secara proporsional serta dalam bentuk rancangan dan interaktivitas yang sedemikian rupa, maka CAI dapat tampil lebih menonjol, dan tidak terlihat seperti sebuah e-book ataupun aplikasi non-interaktif.Bila Anda mencermati metode penyampaian materi instruksional secara konvensional/ klasikal, penggunaan elemen audio umumnya memperlihatkan porsi yang terbesar. Seorang pengajar selain menggunakan beragam alat bantu, hampir dapat dipastikan selalu menggunakan elemen audio yaitu suara (voice) baik untuk membantu mengarahkan ataupun sebagai cara utama dalam menyampaikan materi instruksional. Bukan berarti bahwa CAI yang akan dibuat harus terus menerus

110

memunculkan suara seperti suara pengajar, melainkan bagaimana cara meletakkan beragam efek audio ke tempat yang tepat termasuk apabila hendak menggunakan efek suara latar berupa narasi materi seperti yang dijumpai dalam metode klasikal.

Langkah PengerjaanTT. Persiapan

33. Jalankan Flash 34. Pilih dokumen Flash berisi sampel menu dari latihan sebelumnya35. Karena yang akan ditampilkan sebagai sampel adalah Penjumlahan, maka

siapkan pekerjaan anda untuk memperbolehkan editing pada layer Penjumlahan, sementara itu matikan/kunci akses ke semua layer lain

36. Pastikan pula telah terdapat jumlah frame yang cukup pada layer Penjumlahan. Sekali lagi lihat pada latihan sebelumnya untuk menambahkan frame yang diperlukan, setelah itu silakan klik pada frame berikutnya setelah frame terakhir yang menampilkan suatu materi di layer Penjumlahan

UU.Mengimpor suara61. Flash dapat memunculkan suara yang berasal dari file dengan format WAV,

AIFF, ataupun MP3. Kali ini kita akan mengimpor suara dari file WAV yang dapat dengan mudah dijumpai dalam instalasi Windows di komputer. Klik pada menu File.

62. Pilih item Import63. Klik pada pilihan Import to Library 64. Dalam window dialog yang muncul, masuklah dalam folder \Windows\Media65. Pilih file suara yang anda inginkan, usahakan mencari yang ukuran filenya

terbesar66. Klik tombol OK, maka file suara anda akan muncul pada daftar library di

pane kananVV.Menggunakan suara sendiri

Bila diinginkan, Anda dapat menggunakan suara Anda sendiri untuk digunakan dalam program yang Anda buat. Untuk itu diperlukan alat bantu tambahan, dalam hal ini agar mudah maka dapat menggunakan Windows Sound Recorder yang merupakan utilitas bawaan Windows. Selain itu, tentu saja diperlukan perangkat mikrofon sebagai penerima suara Anda. Tujuan penggunaan utilitas dan perangkat ini adalah untuk mendapatkan sebuah file suara yang nantinya dapat dimasukkan dalam program yang Anda buat.1. Jalankan Windows Sound Recorder2. Anda dapat mengkonfigurasi terlebih dahulu format suara untuk

merekam suara Anda sendiri3. Tekan tombol bergambar bulatan merah untuk mulai merekam suara4. Tekan tombol Stop untuk menghentikan perekaman5. Klik pada File >> Save As untuk menyimpan suara Anda ke tempat

dan nama file yang diinginkan

WW.Menyisipkan suara ke dokumen Flash yang sedang dibuat52. Klik pada Menu Insert 53. Pilih Timeline

111

54. Klik pada pilihan Layer55. Maka akan muncul layer baru, gantilah dengan nama SuaraLatar 56. Klik pada frame pertama dari layer suara ini57. Lihat pada Property Inspector (pane bawah, kalau saja anda lupa), terlihat

nama file audio yang tadi anda sisipkan, pada bagian pilihan Sound. Di bawahnya terdapat pilihan Effect. Untuk eksperimen, cobalah efek yang ada pada pilihan tersebut, misalnya Fade out

58. Di bawahnya terdapat pilihan Sync, yang menentukan kapan suara tersebut dimainkan. Untuk saat ini biarkan saja bernilai default (Event, Repeat, 1)

59. Coba dengan Test Movie

XX. Membuat tombol bersuara124. Cari tombol yang ingin diberi suara, misalnya tombol menu (tombol yang

bertuliskan Penjumlahan, Pengurangan, dll.), klik pada tombol tersebut di panel Library

125. Di samping kanan judul panel Library terdapat sebuah tombol yang tidak memunculkan keterangan apa-apa saat pointer mouse berada di atasnya. Tombol tersebut adalah tombol opsi/pilihan, klik pada tombol tersebut untuk memunculkan sebuah menu secara pop-up

126. Klik pada item menu Edit 127. Seharusnya tampilan timeline (di bagian atas stage) berubah. Pada layer

suara tersebut, klik pada frame di bawah timeline Down karena kita akan memberikan suara saat tombol di-klik

128. Klik kanan pada frame tersebut129. Pilih item menu Insert Keyframe 130. Lihat ke bagian Property Inspector di bawah. Pilih file suara yang akan

dibunyikan saat tombol tersebut di-klik (tentu saja anda harus mengimpornya dulu sebelum dipilih, cara mengimpor file suara lihat ke bagian atas modul ini)

131. Coba dengan Test Movie

YY.Membuat suatu bagian bersuaraKarena Flash mendasarkan diri pada event yang ada pada setiap frame, maka untuk menambahkan suara pada suatu bagian/kejadian tertentu dapat dilakukan dengan mudah. Cukup dengan memilih frame yang dikehendaki, kemudian pada bagian property inspector berikan suara yang diinginkan, tentunya apabila suara tersebut telah diimpor sebelumnya ke dalam library.

ZZ. Latihan Berikan efek suara pada aplikasi yang dibangun sehingga dapat memberikan variasi tampilan. Rekam suara Anda dan gunakan juga sebagai narasi suara latar belakang yang menyampaikan materi secara audio selain teks yang ada di layar.

112

MATERI 10MEMANGGIL FILE FLASH LAIN

PendahuluanTidak semua aplikasi yang dibuat dengan Flash sepenuhnya telah dipaket dalam sebuah file aplikasi tersebut. Terkadang beberapa bagian perlu dipisahkan menjadi file terpisah agar memudahkan dalam pembuatannya. Oleh karena itu diperlukan adanya fungsi dalam Flash Anda untuk memanggil file Flash lain.

TujuanDapat menggunakan file Flash dari luar aplikasi sehingga aplikasi yang dibangun menjadi bersifat modular.

Tool yang digunakanMacromedia Flash 8.

Langkah Pengerjaan & LatihanPada bagian ini sepenuhnya akan disampaikan oleh instruktur, silakan gunakan aplikasi yang telah Anda bangun dalam sesi-sesi sebelumnya sebagai bahan untuk dapat menggunakan file Flash yang terpisah. Tentu saja sebelumnya Anda harus membuat file Flash (sembarang, misalnya hanya berisi animasi sederhana) yang nantinya akan dipanggil dalam aplikasi utama Anda. Jangan lupa file Flash terpisah tersebut supaya diekspor/publish dulu menjadi SWF sebelum dipanggil oleh aplikasi, dan untuk memastikan bahwa paket aplikasi Anda tidak mengalami perubahan (kecuali Anda menginginkan bahwa file Flash terpisah dapat selalu di-modifikasi oleh penggunanya). Bila diperlukan, dapat pula dipublish dalam bentuk executable (*.exe) hanya bila memang diinginkan untuk menjadi aplikasi siap pakai yang tidak lagi perlu dimodifikasi oleh pembuatnya.

113