PENDAHULUAN. blog.flashbegin.com

Transkripsi

1 PENDAHULUAN Dalam pembuatan E learning terdapat berbagai macam media yang dapat disampaikan. Media tersebut antara lain Media Teks, Media Gambar, Media Animasi, Media Suara, Media Photo dan lain-lain. Dari berbagai media yang ada, media yang sangat menonjol yang sering digunakan adalah media Animasi. Media animasi sangat penting karena selain berwujud gambar juga memiliki unsur gerak. Jadi untuk mengambarkan suatu materi akan lebih mudah. Format E learning yang sering digunakan adalah format Web yang didalamnya terdapat file animasi. Dalam E learning file web sebagai tempat dan sarana komunikasinya sedang file animasi sebagai materinya. Dari berbagai macam format animasi yang dapat di masukkan ke dalam web, animasi yang berformat swf-lah yang paling tepat. Selain memiliki file yang kecil swf juga memiliki banyak variasi tampilan. Program pembuat animasi dengan format swf salah satunya Adobe Flash. Dengan Adobe Flash kita dapat dengan leluasa membuat animasi swf, bahkan kita dapat menambahkan Action Script agar animasi lebih interaktif. Bahkan menggunakan Adobe Flash kita tidak sekedar membuat animasi tetapi mampu membuat simulasi. Simulasi adalah animasi yang interaktif dan dapat mendekati keadaan nyata. Dengan simulasi kita dapat membuat virtual lab. Dalam pembuatan media untuk E learning ada beberapa hal yang wajib kita perhatikan. Ada beberapa syarat penting yang harus di penuhi agar e learning lebih rasional. File media swf jangan terlalu besar karena untuk komunikasi di internet, bandwidh sangat dibatasi. Dalam ukuran internet file sebesar 500 Kb sudah sangat besar. Jadi dalam pembuatan materi Elearning jangan sampai sebesar ukuran tersebut. Untuk mengatasinya kita dapat memperkecil topik materi yang disajikan. Banyak sekali fasilitas yang terdapat dalam Adobe Flash. Dalam modul ini akan di terangkan materi-materi pembuatan animasi mengunakan Adobe Flash tingkat dasar. Meski hanya tingkat dasar, pembaca yang telah mempelajari modul ini diharapkan mampu membuat media animasi untuk keperluan pembuatan E learning. Semarang, Maret 2009 Penulis Toni Setyawan, ST Halaman - 1/48

2 TUJUAN Kompetensi Dasar Peserta mampu membuat animasi tingkat dasar mengunakan Adobe Flash. Peserta mampu membuat media animasi yang digunakan dalam Multimedia Pembelajaran Interaktif. Indikator Pencapaian Hasil Belajar Peserta dapat memahami fungsi bagian-bagian dalam tampilan Adobe Flash. Peserta dapat membuat bentuk dasar (shape) mengunakan Adobe Flash. Peserta dapat memahami, menggunakan dan membuat animasi frame by frame. Peserta dapat memahami, mengunakan dan membuat Motion Tween. Peserta dapat memahami, mengunakan dan membuat Shape Tween. Peserta dapat memahami, mengunakan dan membuat Motion Guide. Peserta dapat memahami dan mengunakan Masking. Peserta dapat melakukan Import media dan export menjadi media lain untuk keperluan pembuatan Multimedia pembelajaran Interaktif. Peserta dapat mengimport dan mengunakan media suara. Peserta dapat memahami, mengunakan dan membuat button. Peserta dapat memahami, mengunakan dan membuat scene. Petunjuk Belajar Bacalah dengan seksama dan pahamilah uraian pada masing-masing modul agar anda dapat memahami masing-masing perintah dan petunjuk dalam latihan. Cobalah mengerjakan latihan dalam masing-masing modul langsung mengunakan computer dan ikuti petunjuk yang ada dalam modul. Pelajarilah modul secara berurutan karena setiap modul saling berkaitan. Halaman - 2/48

3 Modul 1 PENGENALAN ADOBE FLASH INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami fungsi bagian-bagian dalam tampilan Adobe Flash. Peserta dapat membuat bentuk dasar (shape) mengunakan Adobe Flash. URAIAN Pada saat kita menjalankan Adobe Flash atau Macromedia Flash akan muncul tampilan seperti gambar berikut. Pada tampilan diatas dapat dikelompokkan menjadi beberapa bagian yaitu menu pulldown, command bar, tool bar, time line, state, properties dan docker. Dari kelompok kelompok tersebut ada perintah perintah yang pokok dan paling sering digunakan. Selain itu ada juga kelompok yang sama artinya dengan program lainnya. : Halaman - 3/48

4 Pull down Menu Menu Pull down adalah kumpulan perintah-perintah yang terdapat pada Adobe Flash. Kelompok File terdapat perintah : Publish Seting : mengatur bentuk publish yang diinginkan Publish : mempubilsh animasi ke bentuk akhir Export Movie : mengubah file animasi menjadi file video Kelompok Edit terdapat untuk mengedit mis copy, paste Copy Frame : Copy seluruh object yang ada dalam frame Paste Frame : pengeluarkan hasil copy frame Kelompok Insert terdapat perintah : Convert to symbol : mengkonversi object menjadi symbol. New symbol : membuat object baru. Kelompok Modify terdapat perintah group yang berfungsi mengelompokkan object. Kelompok Windows terdapat perintah untuk mengeluarkan macam-macam docker. Command Bar Command Bar adalah icon perintah yang umum. Merataka object : Align Redo : mengulang perintah yg di undo Undo : membatalkan perintah Paste : mengeluarkan memory clipboard Copy : mengisi memory clipboard Cut : menghapus objek tepilih Preview : melihat hasil yang akan dicetak Print : mencetak tampilan Save : menyimpan data fla Open : membuka data fla New : membuat data baru Halaman - 4/48

5 Tools Bar Tools Bar adalah icon perintah untuk mengambar Selection tool memilih object Line tool membuat garis Pen tool membuat garis secara vector Oval tool membuat lingkaran atau elips Pencil tool membuat garis bebas Free Transform merubah ukuran secara bebas Ink bottle tool memberi garis tepi pada object Eye dropper tool mengambil sample warna Hand tool mengubah posisi stage Stroke color warna garis tepi (stroke) Fill color warna object Subselection tool mengedit line object Lasso tool memblock sebuah area Teks tool membuat tulisan Rectangle tool membuat segi empat Brush tool membuat sebuah area bebas Gradient Transform tool mengubah property gradien Paint bucket tool memberi warna pada area Eraser tool menghapus Zoom tool membesarkan posisi stage Time Line Time line adalah tempat frame yang akan bergantian tampil berdasarkan time rate yang telah kita atur. Layer Frame Show/hide layer Lock layer Keyframe Delete layer Tambah layer folder Add motion guide Tambah layer Halaman - 5/48

6 Stage Stage adalah layer tempat kita untuk mengambar dan membuat animasi. Nama scene yang ditampilkan Posisi Zoom View Mengubah scene yang ditampilkan Mengubah symbol yang tampilkan Properties Properties akan selalu berubah tergantung object yang dipilih, karena yang ditampilkan adalah properties dari object yang dipilih. Pada tampilan berikut ini adalah properties movie yang terdiri dari Size (ukuran) Publish (type publish yang dipilih) Background (warna latar belakang) Frame rate (tampilan frame per detik) Halaman - 6/48

7 Pada tampilan berikut ini adalah properties text yang terdiri dari mode teks jenis huruf warna huruf bold ukuran huruf Lebar Tinggi Justify italic koordinat x koordiant y Pada tampilan berikut ini adalah properties shape yang terdiri dari Warna garis tepi ukuran garis tepi motif garis tepi Warna shape Lebar Tinggi koordinat x koordiant y Docker Docker adalah kumpulan icon tool sebagai perintah untuk melakukan sesuatu. Docker yang ditampilkan bisa di atur sesuai perintah yang sering kita lakukan. Docker bisa ditampilkan pada layer lebih dari satu, hal ini akan memudahkan kita untuk mengunakan Adobe Flash, karena tinggal menklik icon untuk memerintah. Sebagai contoh tampilan di atas adalah docker Align dan transform yang sering digunakan. Docker align berisi perintah yang terdapat pada kelompok Align seperti rata kiri, rata kanan, center dan lain-lainnya. Sedangkan Docker Transform berisi ukuran objek dalam persen, rotate Halaman - 7/48

8 untuk memutar objeck dalam satuan derajat dan skew untuk memiringkan objeck dalam satuan derajat. LATIHAN Buatlah gambar seperti gambar dibawah ini mengunakan perintah-perintah yang telah diuraikan diatas. 1. Buatlah data baru dengan mengklik new pada command bar. 2. Atur properties animasi tersebut dengan mengubah parameter menekan tombol Size pada Properties. Setelah itu akan muncul tampilan berikut : Ubah dimensi menjadi ukuran yang anda inginkan misalkan 400 x 300 dimana 400 adalah lebar dan 300 adalah tinggi. Kemudian ubah background dengan warna putih dengan cara mengklik segitiga kecil kemudian pilih warnanya. Ubah pula Frame Rate menjadi 15 fps. Halaman - 8/48

9 3. Dengan Rectangle Tool pada toolbar buatlah segiempat bertumpukan seperti gambar di bawah ini. Clik and drag mouse dari titik kiri atas ke titik kiri bawah Kemudian lakukan hal yang sama untuk segi empat di bawahnya Tip : sebelum mengambar dan setelah memilih Rectangle Tool pada toolbar, lihat dulu warnanya, apakah sudah sesuai dengan keinginan anda? Warna putih dengan garis merah diagonal berarti tidak memakai warna atau tidak memakai bagian itu. Dalam contoh disamping object yang dibuat tidak memakai garis tepi (stroke). 4. Editlah sudut sudutnya dengan mengunakan subselection tool pada toolbar. Kemudian klik object yang akan diedit sudutnya dengan mengklik bagian tepi object tersebut. Bila berhasil akan muncul garis hijau di bagian tepi dan segi empat di tiap sudutnya. Untuk merubah posisi sudutnya, clik and drag segi empat tersebut ke tempat yang anda inginkan. Setelah sesuai dengan bentuk yang diinginkan click ke tempat kosong, maka garis hijau akan hilang. 5. Buatlah tempat roda dengan menghapus gambar mengunakan erase pada tool bar. Hingga menjadi seperti gambar dibawah ini Halaman - 9/48

10 6. Dengan elips Tool pada toolbar buatlah dua buah lingkaran yang dipasang sebagai roda seperti gambar dibawah ini. Tip : Agar tidak mengganggu object yang sudah ada buatlah object baru di tempat kosong, kemudian baru dipindahkan ke tempat yang sesuai. Untuk roda ke dua gunakan fasilitas copy dan paste. Kemudian pindahkan ke tempat yang sesuai 7. Untuk merubah warna atau gradasinya, klik oject lalu ubah warnanya denganj menggunakan docker color mixer seperti dibawah ini. Model gradasi Solid Linier Radial Warna yang dipilih Transparansi Warna awal gradasi Warna akhir gradasi Untuk mengetahui perubahannya kita bisa mencobanya satu-persatu. 8. Dengan Texs Tool pada toolbar buatlah dua buah tulisan dengan mengklik posisi yang diinginkan. Untuk merubah ukuran, font dan warnanya gunkan texs properties seperti gambar dibawah ini. Jenis Font 9. Ukuran Warna Bold Italic Align Setelah selesai simpan pekerjaan anda dan publishlah dengan perintah shift - F12. Lihatlah pada direktori tempat menyimpan file, akan muncul dua file baru, 1 file fla (file data asli flash) dan file swf (file hasil publish yang siap digunakan. -0- Halaman - 10/48

11 Modul 2 FRAME BY FRAME INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, menggunakan dan membuat animasi frame by frame. URAIAN Frame by frame adalah animasi yang biasa digunakan pada berbagai aplikasi program pembuat film animasi atau kartun. Pemahaman konsep animasi ini sangat simple, dimana kita memiliki gambar yang banyak yang memiliki sedikit perubahan. Bila gambar ini kita tapilkan secara berurutan maka gambar yang tampak seolah-olah merupakan gambar yang bergerak. Konsep ini sama seperti konsep pembuatan filem kartun pada jaman dahulu. Meski konsepnya sangat sederhana dan sangat kuno, tapi konsep animasi frame by frame ini masih digunakan apabila semua type animasi yang ada dalam flash tidak dapat dilakukan. Dalam pembuatannya animasi frame by frame ini sangat rumit karena kita harus membuat gambar setiap frame yang berbeda agar animasi kelihatan bergerak, tetapi kita dapat membuat animasi dalam bentuk apapun. Coba perhatikan deretan gambar berikut Perhatikan gambar di atas, pada gambar diatas terdapat perbedaan pada masing masing gambar. Bila gambar tersebut ditampilkan secara berurutan maka gambar seolah-olang bergerak dan mengambarkan bunga yang tumbuh dan ada kupu-kupu terbang diatasnya Halaman - 11/48

12 LATIHAN 1. Buatlah Animasi frame by frame dengan ukuran width = 240 px dan height = 260 px. 2. Gambar seperti yang ditampilkan pada halaman sebelumnya mengunakan brush tool, jangan lupa atur dahulu warnanya (fill color) sebelum mengoreskan ke stage. Untuk lebih detailnya sesuaikan pula brush size dan brush shape. Brush Size Brush Shape 3. Buatlah gambar yang pertama dahulu. Bila contoh gambar diatas terlalu rumit buatlah gambar yang sederhana dahulu yang merupakan gambar berurutan.seperti gambar dibawah ini. Setelah selesai buatlah gambar pada frame selanjutnya. Untuk memudahkan proses copykan frame pertama dengan menekan tombol F5 (insert > frame), jika benar maka tampilan time line akan seperti gambar dibawah ini Halaman - 12/48

13 Perhatikan frame ini 4. Kemudian clik pada frame ke dua kemudian tekan F6 (confert to keyfarme), jika benar maka tampilan time line akan seperti gambar dibawah ini Perhatikan keyframe ini 5. Bila sudah seperti pada gambar diatas kemudian itu ubah gambar yang kita inginkan bergerak (perhatikan contoh gambar di halaman sebelumnya). Sedangkan objek yang akan kita jadikan gambar diam (contoh dalam gambar di atas adalah gambar pot) tidak usah kita ubah gambarnya. 6. Hal yang sama juga berlaku untuk membuat gambar pada frame 3, 4, 5 dan seterusnya. Bila ada mengambar sampai frame 15 maka tampilan time line akan seperti gambar dibawah. Perhatikan keyframe ini 7. Untuk mencoba animasi yang sudah kita buat, tekan Ctrl-Enter dan click tada silang merah untuk menutupnya. 8. Setelah selesai simpan pekerjaan anda dan publishlah dengan perintah shift - F12. Lihatlah pada direktori tempat menyimpan file, akan muncul dua file baru, 1 file fla (file data asli flash) dan file swf (file hasil publish yang siap digunakan. -0 Halaman - 13/48

14 Modul 3 MOTION TWEEN INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, menggunakan dan membuat Motion Tween. URAIAN Motion Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk menggerakkan object dalam satu layer. Agar object yang lain tidak ikut bergerak maka object tersebut harus diletakkan pada layer yang berbeda. Pada Motion Tween kita dapat menggerakkan object berdasar posisi maupun berputar, bahkan kita dapat mengubah warnanya. layer yang terdapat objeck yang akan digerakkan keyframe awal keyframe akhir akan muncul tanda panah dan background biru sebagai tanda kalau sudah berujut motion tween Posisi awal dan posisi akhir pada sebuah gerakan (tween) ditandai dengan adanya keyframe. Jadi keyframe ini memuat data objeck. Data object yang dimuat dalam keyframe adalah data posisi, warna, ukuran dan rotasi. Kita juga bisa memasang keyframe di tengahtengah tween bila kita menginginkan ada perubahan di tengah tween. LATIHAN 9. Buatlah Gambar seperti dibawah ini dan letakkan pada stage Tip : Agar garis jalan tidak ikut berputar, buatlah roda dan jalan pada layer yang berbeda. Halaman - 14/48

15 Panjangkan frame hingga frame 30 dengan cara mengklik kanan frame ke 30 pada layer tersebut kemudian pilih insert frame. Lihat gambar berikut 10. Kemudian buatlah motion tween pada layer roda dengan mengklik kanan keyframe roda (keyframe disimbolkan dengan frame yang ada titiknya) lalu pilih create motion tween. Jika benar maka time line menjadi biru dan terdapat garis putus-putus dan akan menjadi seperti gambar dibawah ini. 11. Kemudian buatlah keyframe pada frame terakhir dengan mengklik kanan frame terakhir roda lalu pilih insert keyframe. Jika benar maka time line akan menjadi seperti gambar dibawah ini. 12. Pada saat ini kita sudah memiliki dua posisi object ditandai dengan dua keyframe. Jadi keyframe adalah status motion tween. Untuk membuatnya bergerak kita tinggal merubah posisi pada keyframe yang lain. Caranya klik key frame yang belakang lalu ubah posisi roda ke sebelah kanan seperti gambar berikut. Halaman - 15/48

16 13. Tekan enter untuk melihat hasil tween. Bila motion tween berhasil maka roda akan bergerak dari kiri ke kanan. Untuk membuat rodanya berputar maka klik Tween Properties seperti gambar dibawah ini. Mode Tween Motion : posisi Shape : bentuk Ease : Linieritas Tween Rotate CW : Berputar searah jarum jam CCW : Berlawanan jarum jam 14. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang menguling dari kiri ke kanan. Untuk membuat perubahan warna atau transparansinya kita dapat mengklik posisi frame kemudian mengklik object yang akan kita ubah. Untuk parameternya dapat dilihat pada object properties berikut Color Brightness : Kecerahan Tint : Menganti warna Prosentasi pencampuran Warna penganti Alpha : Menganti transparansi Prosentasi transparansi Advance : Gabuangan dari semua parameter 15. Kalau semua telah selesai dan benar dikerjakan maka setelah ditekan enter akan terlihat roda yang menguling dari kiri ke kanan dan berubah warna -0 Halaman - 16/48

17 Modul 4 SHAPE TWEEN INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, menggunakan dan membuat Shape Tween. URAIAN Shape Tween adalah fasilitas pada Adobe Flash yang berfungsi untuk mengubah bentuk object dalam satu layer. Agar object yang lain tidak ikut berubah maka object tersebut harus diletakkan pada layer yang berbeda. layer yang terdapat objeck yang akan diubah bentuknya keyframe awal keyframe akhir akan muncul tanda panah dan background hijau sebagai tanda kalau sudah berujut shape tween Object yang dapat diubah bentuk adalah object shape. Bila object tersebut bukan sebuah shape maka kita harus mengubah object tersebut menjadi object shape dengan cara menekan Ctrl+B (Break Apart). Contoh objeck bukan object shape adalah object Teks. LATIHAN 1. Buatlah Gambar seperti dibawah ini pada stage. Gambar kuda dan kambing dibuat pada layer yang berbeda. Halaman - 17/48

18 2. Kemudian panjangkan frame kambing sesuai keinginan anda lalu letakkan frame kuda ada dibelakang frame kambing dengan cara click and drug. Kalau benar pada time line akan seperti gambar dibawah ini. 3. Untuk memasangkan shape tween kambing menjadi kuda click keyframe kambing lalu ubah frame properties seperti gambar dibawah ini. Tween Motion Shape Click panah lalu pilih shape 4. Kalau benar maka frame kambing berubah menjadi hijau dan ada gambar panahnya seperti gambar dibawah ini 5. Kalau kita jalankan dengan menekan enter maka akan tampak gambar kambing bergerak dan menjadi gambar kuda. Kalau menginginkan gambar hanya berubah tidak bergerak, kita bisa memindahkan kedua gambar pada posisi yang sama. Caranya klik keyframe kuda lalu gerser gambar sesuai posisi kambing. Halaman - 18/48

19 -0 Halaman - 19/48

20 Modul 5 MOTION GUIDE INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, menggunakan dan membuat Motion Guide. URAIAN Pembuatan Motion Tween telah dibahas pada modul 2. Motion Tween akan menggerakkan object dari satu posisi ke posisi yang lain dengan garis lurus. Kalau kita menginginkan gerakan objeck tersebut tidak lurus maka kita dapat memasangkan motion guide pada tween tersebut. Dengan kata lain kita dapat membuat jalur yang akan dilewati gerakan objeck tween mengunakan Motion Guide. layer motion guide layer object yang gerakannya diatur oleh layer motion guide. Layer ini ditandai dengan posisi icon agak menjorok ke dalam Dengan Motion Guide ini kita dapat membuat jalur pergerakan sesuai dengan garis yang kita buat pada layer motion guide. Isi dari layer motion guide ini adalah garis dalam bentuk apa saja, bisa lurus, belok, melengkung dan lain-lain. LATIHAN 1. Buatlah Gambar bola seperti dibawah ini pada kiri atas stage. Halaman - 20/48

21 2. Gerakkan ke arah kanan bola mengunakan motion tween. (pelajari lagi modul 2 jika anda lupa). 3. Lalu click kanan layer hingga muncul tulisan seperti gambar berikut Kemudian pilih add motion guide. Kalau benar layer akan bertambah seperti gambar berikut. 4. Buat garis pada layer guide dengan diawali mengclick keyframe layer guide lalu membuat garis mengunakan line tool pada toolbar. Buat garis tersebut di state yang menandakan jalur pergerakan tween. Lihat gambar dibawah ini 5. Rubah garis lurus menjadi melengkung dengan cara mendekatkan mouse pada garis hingga gambar mouse berubah seperti gambar dibawah ini, kemudian clik and drug ke bentuk lengkung sesuai keinginan anda. Halaman - 21/48

22 6. Bila proses benar maka akan dapat terbentuk gambar seperti dibawah ini. 7. Tekan enter untuk melihat hasil motion guide. Kalau gagal coba lakukan TIP berikut ini Tip : Posisikan awal object dan akhir object sesuai dengan awal dan akhri garis guide. Garis guide dapat dihilangkan dengan mengklik titik dibawah mata pada layer guide, kalau benar maka akan terlihat gambar seperti dibawah ini. Klik disini dan lihat hasilnya -0- Halaman - 22/48

23 Modul 6 MASKING Indikator Pencapaian Hasil Belajar Peserta dapat memahami dan menggunakan Masking. URAIAN Masking adalah fasilitas Adobe Flash yang berfungsi untuk menutup gambar atau object dan menampilkan gambar atau object sesuai dengan object mask yang kita buat. Misal object mask adalah lingkaran maka bila animasi dijalankan akan tampak objek yang asli tetapi yang terlihat hanya bentuk lingkaran. Masking ini juga dapat dilakukan terhadap tween dan kita juga dapat melakukan tween terhadap layer masking. Layer masking Layer objeck yang dimasking. Layer ini ditandai dengan menjorok ke dalam. Dengan metoda masking kita dapat mengatur objeck yang akan ditampilkan dalam sebuah animasi. Metoda masking akan terlihat dalam stage bila kedua layer dalam keadaan lock. Bila tidak dalam keadaan lock masking tidak dapat berpengaruh terhadap view stage, tetapi akan tetap berjalan bila animasi dijalankan dalam mode preview. LATIHAN 1. Buatlah tulisan pada layer 1 di tengah state seperti gambar dibawah ini Halaman - 23/48

24 2. Kemudian pada layer yang berbeda (buat layer baru) buatlah gambar lingkaran pada posisi di sebelah kiri tulisan seperti gambar dibawah ini 3. Buatlah semua layer menjadi 15 frame hingga timeline seperti gambar di bawah ini. 4. Buatlah tween pada layer dua (gambar lingkaran) dari kiri ke kanan tulisan. Hingga pada saat dijalankan lingkaran menutupi tulisan. 5. Agar Mask menjadi melakukan masking pada layer 1 maka klik kanan layer dua lalu pilih mask. Lihat gambar berikut. 6. Jika langkah ke 5 betul berarti timeline akan berubah menjadi seperti gambar berikut. Halaman - 24/48

25 7. Coba jalankan dengan menekan enter. Jika proses anda benar maka tulisan yang tampak adalah bentuk lingkaran seperti objeck mask yang menutup. Tip : Setelah layer diset sebagai mask mala layer tersebut akan secara otomatis dikunci (lock) pada posisi ini layer tak bisa diedit. Untuk mengedit terlebih dulu membuka kunci dengan mengclick gambar kunci pada layer yang akan anda edit. Setelah diedit jangan lupa mengkunci kembali layer, karena masking tidak dapat berjalan bila layer tidak terkunci. Meski masking seperti tidak berfungsi tetapi pada saat kita export (publish) masking tetap dapat berfungsi. Klik di sini untuk mengunci atau membuka kunci 8. Coba lakukan modifikasi pada animasi. Misalkan lingkaran sebagai masking yang diam tetapi tulisan sebagai yang dimasking justru yang bergerak. -0- Halaman - 25/48

26 Modul 7 IMPORT DAN EXPORT MEDIA INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat melakukan import media dan export menjadi media lain untuk keperluan pembuatan Multimedia Pembelajaran Interaktif. URAIAN Seperti halnya software-software yang lain Adobe Flash juga terdapat fasilitas export dan import. Fungsi import ini digunakan untuk memasukkan media lain misal gambar (jpg, gif, bmp dll), suara (wav, mp3 dll), vector (ai, wmf dll), animasi (swf, gif aminasi dll) atau movie (avi, mpg, mov, wmf dll). Terdapat dua metoda import yang terdapat dalam Adobe Flash yaitu Import dan Import to library. Kedua metoda ini memiliki maksud yang tersendiri, jadi kita harus menentukan metoda import apa yang akan kita gunakan. Import Fasilitas ini menghasilkan media yang kita import akan langsung ditampilkan dalam stage dan tersimpan pula dalam library. Jadi bila kita mengunakan fasilitas ini, kita harus mengatur dulu ke layer dan frame mana import kita lakukan. Metoda ini tidak dapat kita gunakan dalam import media suara. Meski kita melakukan import suara tetapi media suara tidak langsung masuk ke frame. Untuk suara kita tetap harus memasukkan ke frame dengan cara manual. Import to Library Fasilitas ini menghasilkan media yang kita import hanya masuk ke dalam library. Jadi bila kita akan mengunakan media tersebut, kita harus memasukkan melalui library. Jadi kita harus menampilkan docker library dengan cara menekan Ctrl+F11. Setelah muncul docker tersebut kita bisa mengunakan media tersebut dengan meng-click and drug media tersebut dan dimasukkan ke stage. Kita harus mengigat bahwa sebelum kita memasukkan media kita siapkan dahulu frame mana kita akan memasukkan media. Cara ini hanya diperuntukkan memasukkan media selain media suara. Untuk memasukkan media suara diperlukan cara tersendiri yang akan anda pelajari dalam latihan. Fungsi export digunakan untuk mengubah animasi Adobe Flash menjadi media lainnya, missal: swf, wav, avi, mov, gif animasi, exe, wmf, html dll. Export ini dalam Adobe Flash lazim diistilahkan dengan Publish. Memang dalam Adobe Flash terdapat berbagai macam export yang dapat dilakukan. Karena orientasi kita membuat animasi untuk Media Pembelajaran Interaktif Halaman - 26/48

27 maka modul ini hanya akan membahas export media berwujud swf. Kita memilih swf karena selain kompatibel dengan Macromedia Authorware (software programmer MPI) juga memiliki ukuran file yang kecil. LATIHAN IMPORT 1. Klik file pada pulldown menu kemudian akan terlihat seperti gambar berikut Import Media yang di import langsung masuk ke stage dan library Import to library Media yang diimport tidak masuk ke state tetapi hanya di library 2. Dengan memilih perintah Import maupun Import to library akan muncul tampilan seperti dibawah ini Direktori tempat file media Nama file media Type file media Halaman - 27/48

28 3. Bila tadi kita memilih import maka gambar langsung tampil di stage. Sebagai contoh dapat dilihat pada gambar berikut Tip : Gambar dengan format jpg atau bmp akan selalu memberi warna dan background segi emapat. Bila kita menginginkan gambar yang di import tidak mempunyai background atau background transparan kita sebaiknya mengunakan format gambar gif (gif mengenal warna transparan). Tentu saja saja saat membuat gambar dengan format gif backgrundnya harus dibuat transparan. 4. Bila kita ingin mengubah ukuran kita bisa mengunakan free transform tool pada tool bar. Bila kita menekan tombol tersebut maka gambar akan menjadi seperti dibawah ini. Click and drug pointer segi empat ini ke tempat yang anda inginkan untuk mengubah ukuran. Tip : Pada saat mouse mendekati garis atau pointer atribut mouse akan berubah. Ada 3 macam atribut mouse, temukan dan coba masing-masing fungsinya. Halaman - 28/48

29 5. Selain dengan cara diatas, kita bisa mengubah ukuran object dengan mengunakan docker transform dan info seperti gambar dibawah ini. Pembesaran lebar Pembesaran tinggi Pembesaran lebar dan tinggi dengan rasio yang sama atau tidak. Rotasi Gambar di ubah miring Posisi x gambar Posisi y gambar Ukuran tinggi dalam pixel Ukuran lebar dalam pixel 6. Kalau kita melakuan import to library maka gambar tidak tampak pada stage. Untuk menggunakan kita harus menampilkan library dengan F11 atau click window pull down lalu pilih library. Kalau perintah benar akan muncul library seperti pada gambit berikut Untuk menggunakan gambar ini click and drug icon lalu letakkan di stage 7. Untuk import suara prosesnya sama dengan import to library, sedang untuk pengunaannya akan dibahas pada modul selanjutnya. Halaman - 29/48

30 8. Untuk import video akan muncul setting seperti gambar berikut edia yang akan kita import impoernama file media Kualitas media yang akan kita masukkan dalam library Skala (pixel) media yang akan kita masukkan dalam library Parameter media dalam library Klik OK bila parameter telah sesuai menyamakan frame rate video dengan Adobe Flash mengikutkan suara dalam video Kalau kita ingin mengubah kita bisa melakukan click and drug slider pada parameter yang ingin kita ubah. 9. Dari tampilan diatas kita dapat membaca parameter media movie yang akan kita masukkan ke dalam library. Bila kita ubah maka kita akan mendapatkan parameter yang berubah pula pada media yang kita simpan dalam library. Kualitas Parameter kualitas media yang akan kita masukkan ke library. Semakin besar semakin bagus kualitasnya tetapi semakin besar filenya. Skala Parameter skala untuk mengubah ukuran pixel media yang akan kita masukkan ke library. Semakin besar semakin bagus detail tetapi semakin besar filenya. Halaman - 30/48

31 LATIHAN EXPORT Fasilitas export pada Adobe Flash lebih dikenal dengan nama publish. Ada juga export yang tidak terdapat pada publish yaitu export movie dan export image. Penjelasan tentang macammacam export dapat dijelaskan pada langkah-langkah berikut. 1. Sebelum kita melakukan publish sebaiknya kita melakukan publish settings dengan cara click File pada pull down menu lalu pilih publish settings. Maka akan muncul gambar berikut. Dari gambar diatas kita dapat menset file apa yang akan kita inginkan sebagai animasi hasil publish. Untuk Authorware biasa digunakan swf, maka tanda centang di HTML sebaiknya kita hilangkan saja dengan mengklik tanda tersebut. 2. Setelah kita klik OK maka pengaturan setting publish telah selesai. Untuk mem-publish kita bisa mengklik File pada pull down menu lalu pilih Publish. Kalau proses publish berhasil kita akan melihat tampilan animasi hasil Publish. Tip : Untuk membuat media animasi pada Authorware, kita check swf saja. Jadi file hasil publish hanya swf. Hal ini dilakukan agar proses publish lebih cepat. Halaman - 31/48

32 File hasil publish terletak di direktori tempat file Adobe Flash kita simpan. 3. Export movie digunakan untuk membuat animasi dengan format video. Caranya adalah mengklick File pada pull down menu lalu pilih export movie. Selanjutnya kita tinggal mengisi nama file dan format video yang akan kita buat. Dalam modul ini tidak memahas lebih lanjut export metoda ini, karena tidak digunakan dalam pembuatan MPI. 4. Export image digunakan apabila kita ingin meng-export frame by frame ke dalam format gambar. Dalam modul ini tidak memahas lebih lanjut export metoda ini, karena tidak digunakan dalam pembuatan MPI. Halaman - 32/48

33 -0- Halaman - 33/48

34 Modul 8 MEMASUKKAN MEDIA SUARA INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat mengimport dan menggunakan media suara. URAIAN Untuk memperindah dan menghidupkan sebuah animasi kita dapat memasukkan suara untuk sound effect maupun narasi. Dengan tambahan media suara kita mengharapkan animasi yang kita buat akan lebih bagus. Cara memasukkan suara ke dalam animasi didahului dengan meng-import file suara. Cara meng-import suara sama dengan cara meng-import media lain yang telah diuraikan pada modul sebelumnya. Sebelum kita mencoba memasukkan media suara sebaiknya kita pahami dahulu parameter yang berhubungan dengan suara. Pada saat kita mengklik keyframe maka dibagian bawah stage terdapat parameter keyframe seperti gambar dibawah ini. properties tween properties sound Properties tween telah dibahas pada modul sebelumnya. Properties sound berisi parameter suara yang berfungsi untuk mengatur pemunculan suara pada animasi yang kita buat. Parameter tersebut antara lain : Sound Parameter ini berisi nama file suara yang terdapat pada library. Kalau ingin diubah kita bisa mengklik panah di sebelah kanan tulisan dan kita pilih suara apa yang ingin kita tampilkan dalam frame tersebut. Bila dalam Library tidak terdapat media suara maka pada saat kita mengklik panah kita tidak mendapatkan nama file suara tetapi hanya tertulis none. Effect Parameter ini berfungsi agar kita dapat mengatur bagaimana suara itu muncul pada frame tersebut. Bisa muncul dari pelan terus keras, awalnya keras trus berakhir pelah, pindah canel Halaman - 34/48

35 kiri ke kanan dan lain lain. Bahkan kita dapat memilih custom dengan cara mengklik tombol Edit di sebelah kanannya. Setelah kita klik akan muncul tampilan dibawah ini Zooming view grafik suara Panjang suara yang akan kita munculkan Skala panjang suara dalam detik Garis Pan (volume) suara pada masing masing channel Titik Pan yang dapat diatur ketinggiannya. Right Channel Left Channel Tombol play untuk mencoba suara Tombol stop untuk menghentikan mencoba suara Untuk mengatur titik pan kita dapat melakukan klick and drug pada titik yang akan kita ubah ketinggiannya. Setelah kita ubah maka garis pan akan menyesuaikan dengan titiknya. Sync Mensinkronkan suara dengan frame. Loop Berapa kali suara akan muncul setelah frame dijalankan. Atau dengan kata lain jumlah pengulangan yang kita inginkan. Halaman - 35/48

36 Dengan mengatur parameter di atas kita dapat secara leluasa mengatur pemunculan suara seperti yang kita inginkan. Cara-cara memasukkan dan mengatur suara ke dalam frame dapat dilakukan dengan mencoba langkah-langkah dalam latihan berikut ini. LATIHAN Agar kita dapat leluasa mencoba memasukkan media suara, kita harus terlebih dahulu membuat animasi yang akan kita masuki media suara. Apa bila anda masih kesulitan membuat animasi yang terdapat dalam latihan ini sebaiknya anda membka kembali modul yang sebelumnya. 1. Buatlah animasi bola memantul seperti gambar dibawah ini Posisi bola pada frame 1 dan 30 melayang sedang pada frame 15 menyentuh lantai. Jadi saat animasi dijalankan bola memantul ke lantai. Halaman - 36/48

37 2. Lakukan import suara dengan cara menekan Ctrl+R lalu memilih file suara yang akan kita import dan tekan Open. Cara menimportnya sama dengan mengimport media lain dan telah diuraikan pada modul sebelumnya. 3. Bila prosedur import Anda benar maka dalam library akan muncul seperti gambar dibawah ini. Untuk memunculkan library Anda dapat menekan Ctrl+F11. File suara hasil import 4. Buat layer baru dengan nama suara (double click layer untuk menganti nama). Kemudian buat keyframe pada frame 15 (klik kanan pada frame 15 lalu pilih insert keyframe). Kalau benar akan terlihat seperti gambar dibawah ini. 5. Click keyframe 15 pad layer suara lalu ubah keyframe properties seperti gambar dibawah ini Clik panah lalu pilih suara yang akan dimasukkan Edit : mengedit suara Loop : Jumlah looping bila diinginkan looping suara Effect : memberikan effect pada suara Halaman - 37/48

38 6. Bila langkah anda benar maka time line akan berubah menjadi seperti gambar dibawah ini. File suara telah masuk ke dalam frame ditandai dengan munculnya grafik suara 7. Jalankan animasi dengan menekan enter. Untuk melihat hasil akhir animasi tekan Ctrl F12-0 Halaman - 38/48

39 TES AKHIR Buatlah animasi seperti gambar dibawah ini dengan ukuran 800 x 600 dan frame rate 15 fps, kemudian export ke dalam bentuk swf. Keterangan : 1. Tulisan Pelatihan Produksi Multimedia bergerak dari atas (ukuran lebih besar) kebawah dengan berubah warna. 2. Tulisan Adobe Flash bergerak dari kiri ke kanan dan setelah semua selesai diberi efek mengkilat. 3. Logo bergerak sesuai garis dan berputar dengan awal lebih besar. 4. Tulisan Balai dari keadaan transparan ke posisi solid. 5. Berilah efek suara biar menarik. 6. Untuk jelasnya bisa dilihat file TestAkhir swf. Halaman - 39/48

40 Modul 9 BUTTON INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, mengunakan dan membuat button. URAIAN Button adalah komponen yang penting dalam Adobe Flash. Karena dengan button kita dapat membuat animasi yang interaktif. Misalnya dengan mengunakan botton user dapat memerintah animasi untuk melaompak ke scene atau frame yang lain. Selain itu dapat digunakan membuat effek-effek yang lain. Di dalam button ada 2 macam keadaan yaitu Up, Over dan Down. Jadi untuk membuat button kita harus membuat tiga gambar. Bila kita mambuat button maka nomer frame akan berubah menjadi Up, Over, Down dan Hit. Up : bila krusor berada di luar Hit Over : bila krusor berada di area Hit Down : bila mouse di klik dan krusor berada di area hit Hit : area untuk mengaktifkan fungsi button. Bila kosong maka areanya sesuai dengan gambar yang ada. Dengan tiga keadaan di atas maka button akan menjadikan animasi yang dibuat interaktif. Agar button yang kita buat menjadi lebih dinamis kita dapat memasangkan movie clip pada salah satu keadaan. Misalkan pada frame down kita pasangkan movie clip dan pada frame up gambar statis maka bila button tersebut dijalankan dan mouse berada di posisi hit maka gambar button tersebut beergerak dinamis sesuai dengan movie clip yang dipasangkan. Ada dua cara untuk mengunakan button yaitu : 1. Mengunakan Common Libraries yang sudah tersedia. Untuk mengaktifkannya kita dapat mengambil Pulldown menu Windows > Common Libraries > Buttons. Dengan perintah ini akan muncul docker seperti gambat di sebelah kiri. Gambar tas emnunjukkan folder yang berisi bermacam-macam button dan icon segiepat dengan tangan menandakan symbol button yang disa digunakan. Sedangkan gambar diatas adalah bentuk button yang dipilih. Halaman - 40/48

41 2. Membuat sendiri dari awal, dengan memilih di pulldown menu Insert > New Symbol. Setelah itu akan muncul tampilan berikut ini : Nama adalah nama symbol yang akan tampil di library. Jenis symbol yang akan dibuat Jika sudah diberi nama dan jenis simbol (Button) yang akan dibuat maka clik OK dan tampilan akan menjadi seperti dibawah ini Posisi gambar saat ditampilkan Nama button yang sedang di edit Setelah tampilan Timeline berubah seperti gambar di atas maka kita bisa memulai mengambar pada stage. Untuk menjalankan interaktifnya button selalu mengunakan action scrip sebagai program bantunya. Dalam pengunaan action script pada button ada dua macam on(press) { perintah ; } on (release) { perintah ; } On (press) : Perintah dilakukan saat tombol mouse ditekan. On (release) : Perintah dilakukan saat tombol mouse dilepas. Perintah : perintah-perintah action sript yang dijalankan. Halaman - 41/48

42 LATIHAN Buatlah animasi interakrif seperti gambar dibawah ini. Keterangan : 1. Berisi tulisan seperti gambar diatas angka sesuai dengan nomer frame. 2. Animasi tidak bergerak otomatis, tapi menunggu respon tombol dibawahnya. 3. Tombol paling no 1 untuk melompat ke awal frame (frame 1) 4. Tombol paling no 2 untuk melompat ke frame sebelumnya (previous frame) 5. Tombol paling no 3 untuk melompat ke frame selanjutnya (next frame) 6. Tombol paling no 4 untuk melompat ke akhir frame (frame 15) Langkah kerja : 1. Buatlah tiga layer dan diberi nama seperti gambar diatas. 2. Buatlah scrip stop(); di semua frame pada layer action. 3. Buatlah tulisan frame dan angka dibawahnya seperti gambar diatas pada layer teks. 4. Copikan sampai frame ke 15, kemudian edit angkanya sesuai dengan nomer frame. Halaman - 42/48

43 5. Buatlah tombol mengunakan common libraries dalam map play back. 6. Jika tombol 1 dan 4 tidak ada, gunakan tombol gel Fast Forward dan gel Rewind kemudian diedit dengan mendoble klik tombol tersebut. 7. Buatkan action script pada masing masing tombol dengan cara mengklik kanan tombol lalu pilih action. Maka akan muncul tampilan seperti dibawah ini. Tempat untuk listing action script Tanda kalau action scriptnya untuk button 8. Untuk tombol no 1 isikan Action Script seperti list dibawah ini : on (release) { gotoandplay(1); } 9. Untuk tombol no 2 isikan Action Script seperti list dibawah ini : on (release) { prevframe(); } 10. Untuk tombol no 3 isikan Action Script seperti list dibawah ini : on (release) { nextframe(); } 11. Untuk tombol no 4 isikan Action Script seperti list dibawah ini : on (release) { gotoandplay(15); } Halaman - 43/48

44 Modul 10 SCENE INDIKATOR PENCAPAIAN HASIL BELAJAR Peserta dapat memahami, mengunakan dan membuat scene. URAIAN Scene adalah satu macam animasi yang berisi berbagai layer dan frame. Pada animasi yang telah kita bahas sebelumnya hanya memiliki 1 scene. Bila kita akan membuat satu file animasi dengan dua macam animasi yang berbeda dan kita akan memisahkannya kita bisa membuatnya dengan 2 scene. Dengan mengunakan 2 scene kita dengan mudah melakuka editing karena meskipun terdapat dalam satu file tetapi masing-masing animasi terpisah. Untuk mengatur scene kita dapat mengaturnya dalam docker seperti dibawah ini : Hapus scene Tambah scene Dupilkat scene Nama scene Dengan mengunakan dua scene kita lebih leluasa melakukan lompatan dari satu frame ke satu frame dalam scene yang lain. Dalam pengunaannya untuk elearning kita dapat memanfaatkan scene untuk memisahkan menu materinya. Jadi dalam pengeditannya kita lebih mudah. LATIHAN Buatlah animasi seperti modul 8 tetapi memilik dua scene. Keterangan 1. Scene pertama seperti modul 8 2. Scene kedua berisi seperti modul 8 tetapi tidak berisi angka melainkan huruf. 3. Tambahkan tombol huruf untuk scene angka dan tombol angka untuk scene huruf. Halaman - 44/48

45 Untuk lebih jelasnya dapat dilihat dalam tampilan gambar berikut. Langka Kerja 1. Buka file modul 8 lalu save as dengan nama modul 9 2. Pada layer tombol buat tulisan huruf dengan segi empat seperi gambar diatas 3. Ubah tulisan huruf dan kotak menjadi tombol dengan mengklik kanan dan pilih confert to symbol, lalu pilih button dan diberinama. 4. Tambahkan action script pada tombol huruf dengan list script dibawah ini on (release) { gotoandplay("huruf", 1); } 5. Duplikat scene dengan cara mengklik tombol duplikat pada docker scene 6. Ubah nama scene ke dua menjadi huruf ( ada dua scene yang satu bernama angka dan yang satu huruf) 7. Edit layer teks dari angka ke huruf berurutan dalam setiam frame 8. Buat tombol angka dan sciptnya seperti langkah 2, 3 dan 4. Tetapi mengunakan list script sebagai berikut : on (release) { gotoandplay("angka", 1); } 9. Coba animasi dengan menekan tombol Ctrl F12. Halaman - 45/48

46 TES AKHIR 2 Buatlah animasi seperti gambar dibawah ini dengan ukuran 400 x 300 dan frame rate 15 fps, kemudian export ke dalam bentuk swf. Keterangan : 1. Tulisan diatas dengan warna merah dan backgroun kuning adalah tombol yang digunkan untuk melompat ke menu lainnya. 2. Pada menu materi ada tombol untuk pindah ke isi materi yang lain tanpa pindah dari menu materi 3. Pada menu simulasi ada 2 simulasi yang bisa dipilih 4. Pada menu tes ada beberapa soal yang dikerjakan dan ada hasil test. 5. Untuk jelasnya bisa dilihat file TestAkhir2 swf. Halaman - 46/48

47 PENUTUP Terimakasih telah menggunakan modul ini untuk mempelajari cara pembuatan animasi dengan format swf. Bila Anda mempelajarinya dengan sungguh-sungguh pasti saat ini Anda sudah mampu membuat animasi dengan format swf untuk keperluan pembuatan Multimedia Pembelajaran Interaktif. Dalam pembuatan animasi, kita lebih kreatif bila memiliki jam terbang yang lama. Bila kita sering berlatih membuat animasi, maka semakin lama kita akan semakin tahu tip dan trik nya. Tip dan trik yang kita dapatkan dalam berlatih akan sangat berguna untuk membuat variasi animasi dan mempercepat proses pembuatan animasi yang sesuai dengan keinginan kita. Modul ini memang modul pembuatan animasi dengan format swf mengunakan Adobe Flash dalam tingkatan yang dasar. Masih banyak fasilitas-fasilitas dalam Adobe Flash yang belum dipelajari dalam modul ini. Selain itu dalam modul ini masih banyak kekurangan dan kelemahannya. Penulis akan sangat berterimakasih bila mendapat kritik dan saran yang membangun demi kesempurnaan modul ini. Halaman - 47/48

48 DAFTAR PUSTAKA 1. Help Program Adobe Flash. 2. Tutorial dalam help Program Adobe Flash. 3. Lessons dalam help Program Adobe Flash. 4. Artikel dan Troubel shoting mengunakan Adobe Flash di situs internet dengan alamat 5. Artikel dan Troubel shoting mengunakan Adobe Flash di situs resmi Macromedia dengan alamat Halaman - 48/48