Bagian 2 Animasi Movie Clip Dan Button

Embed Size (px)

DESCRIPTION

fdg

Text of Bagian 2 Animasi Movie Clip Dan Button

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    13

    BAGIAN 2 MEMBUAT ANIMASI, MOVIE CLIP DAN BUTTON

    Animasi Sederhana pada Flash Animasi Perpindahan Benda Menggunakan Flash, dengan mudah kita bisa membuat animasi sederhana yang nantinya bisa dikembangkan menjadi animasi yang lebih menarik. Sebagai contoh, kita akan membuat animasi perpindahan bola sebagai berikut: Pada Layer 1:

    1. Buatlah objek bola pada Frame 1 (bola tersebut akan menjadi posisi awal dalam animasi perpindahan).

    2. Klik kanan pada Frame 40, pilihlah insert KeyFrame.

    3. Blok pada frame 40 hingga frame 1, klik kanan, dan pilihlan Create MotionTween. Jika berhasil, maka terdapat tanda panah berwarna ungu dari frame 1 sampai frame 40.

    4. Klik pada frame 40, seleksi objek bola, dan pindahkan bola ke posisi lain (posisi tujuan). Klik frame 1, Jika posisi bola pada frame 1 berbeda dengan posisi bola

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    14

    pada frame 2 maka lakukanlah test movie dengan menekan Shift+enter pada Keyboard.

    Animasi Penghilangan Benda Animasi ini bisa digunakan untuk menghilangkan benda secara gradasi atau memunculkan benda secara gradasi.

    1. Buatlah objek lingkaran pada frame 1. 2. Lakukan Insert Key Frame pada frame 20 dan frame 40. 3. Blok seluruh frame, klik kanan, pilih Create Motion Tween.

    4. Klik objek yang berada pada frame 1. Pada Properties, atur nilai alpha menjadi 0% seperti berikut:

    Lakukan hal yang sama untuk objek pada frame 40.

    5. Lakukan Test Movie dengan menekan Ctrl+Enter. Gambar akan muncul secara perlahan dan hilang secara perlahan pula.

    Animasi Perpindahan Benda Menggunakan Motion Guide Motion Guide berfungsi untuk membuat lintasan sehingga benda yang akan dianimasikan bergerak sesuai dengan lintasan yang telah dibuat. Ikuti langkah berikut untuk menggerakkan bola sesuai dengan lintasan:

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    15

    1. Setelah dibuat animasi perpindahan bola seperti diatas, pilihlah Add Motion Guide seperti ditunjukkan pada gambar berikut:

    2. Klik frame 1 pada layer motion guide dan buatlah lintasan menggunakan Pencil Tool.

    3. Klik frame 1 layer 1 dan seleksilah objek bola. Posisikan bola tepat pada ujung atas lintasan (sebagai posisi awal).

    4. Klik frame 2 layer 1 dan seleksilah objek bola, posisikan tengah-tengah bola tepat pada ujung bawah lintasan.

    5. Lakukan test movie dengan menekan tombol enter. Perhatikan, animasi yang dihasilkan akan mengikuti lintasan yang sudah dibuat. Untuk menyembunyikan lintasan, silanglah pada tanda mata di Time Line.

    Animasi Perubahan Warna Sebagai contoh, kita akan menganimasikan perubahan warna pada indikator universal yang digunakan untuk mengetahui kadar pH pada pelajaran Kimia. Desain yang kita

    AddMotionGuide

    LintasanmenggunakanPencilTool

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    16

    buat adalah : warna pada kertas indikator akan berubah berdasarkan nilai pH, ditunjukkan seperti table berikut:

    pH Warna Indikator Universal 3 Merah 4 Merah jingga 5 Jingga 6 Kuning 7 Hijau Kekuningan 8 Biru Kehijauan 9 Biru 10 Ungu

    1. Buatlah dua layer, layer 1 untuk membuat animasi perubahan warna dan layer

    2 untuk memberikan keterangan nilai pH.

    2. Buat kotak pada layer 1 frame 1 dan berilah warna merah. Lakukan insertKeyFrame pada layer 30 dan berilah warna kuning. Lakukan hal yang sama pada frame 60 dan berilah warna biru. Pada layer 75, lakukan juga isertKeyFrame dan berilah warna ungu.

    3. Blok layer 1 dari frame 76 sampai frame 1 kemudian pilih Motion Shape pada Properties. Jika warna sudah terdapat panah dan kotak frame layer 1 sudah berwarna hijau berarti animasi perubahan warna sudah berhasil.

    4. Untuk membuat kererangan niai pH, buatlah menggunakan static text pada layer 2 dan tempatkan pada frame yang sesuai. Misalnya pH < 3 pada frame 1, pH = 4 pada frame 10, pH = 5 pada frame 20, dan seterusnya. Gambar diatas menunjukkan nilai pH = 4, menunjukkan tampilan pada frame 10.

    Animasi Perubahan Benda Selain animasi perpindahan, kita juga bisa membuat animasi perubahan benda seperti mengubah objek lingkaran menjadi segi empat. Ikuti langkah berikut: Pada Layer 1:

    1. Buatlah objek lingkaran pada frame 1.

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    17

    2. Klik kanan frame 40, pilihlah Insert Blank KeyFrame dan buatlah objek persegi. 3. Blok dari frame 40 hingga frame 1. Perhatikan kotak dialog Properties, pada

    kolom Tween pilihlah Shape Tween. Animasi berhasil jika pada frame 1hingga 40 terdapat tanda panah berwarna hijau.

    4. Lakukan test movie. Membuat Efek Masking Menggunakan MotionTween

    Efek masking adalah efek untuk menyembunyikan bagian obyek yang kita inginkan ketika animasi dijalankan. Perhatikan langkah berikut ini;

    1. Buatlah garis pada layer 1 dan kotak pada layer 2 seperti gambar dibawah ini;

    2. Buatlah motiontween pada layer 2 (kotak) dengan posisi; pada frame 1 berada pada sebelah kiri obyek garis (seperti di atas), posisi 2 (frame 20) menutup semua obyek garis, posisi 3 (frame 40) berada di sebelah kanan obyek garis.

    3. Tampilkan obyek garis (layer 1) hingga frame 40 dengan cara klik kanan pada layer 1 frame 40 kemudian insert frame.

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    18

    4. Click kanan pada layer 2 dan pilih mask sehingga tampilan pada layer berubah seperti dibawah ini;

    5. Cobalah efek yang sudah dibuat dengan menekan ctrl+enter. Movie Clip dan Button Jika seluruh tampilan pada Flash Player digambarkan sebagai sebuah movie, maka movie clip merupakan sub-movie. Dalam movie clip juga terdapat lembar kerja persis seperti pada lembar kerja flash induknya. Perhatikan ilustrasi dibawah ini:

    Tandabahwaefekmaskingtelahberhasil(kedualayerterkunci,terdapattandalingkaranpada

    layer2)

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    19

    Scene adalah lembar kerja utama. Didalam scene bisa dibuat MovieClip 1 yang didalamnya terdapat lembar kerja persis seperti lembar kerja utama. Dalam lembar kerja MovieClip 1 juga bisa dibuat MovieClip 2 yang didalamnya terdapat lembar kerja. Membuat Objek Movie Clip Sebagai contoh, kita akan membuat animasi pantulan bola yang dibuat didalam MovieClip. Ikuti langkah berikut:

    1. Buatlah objek bola pada frame 1. 2. Dobel Klik pada bola. Setelah terseleksi, klik kanan dan pilihlah Convert to

    Symbol maka akan muncul kotak dialog seperti berikut:

    3. Setelah muncul kotak dialog Convert to Symbol, pilihlah Movie Clip lalu OK.

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    20

    Seleksi gambar bola dan perhatikan kotak dialog pada Properties. Jika tampilan sudah seperti tampilan dibawah ini, maka Movie Clip sudah berhasil dibuat.

    Movie Clip Menunjukkan bahwa objek sudah dalam bentuk

    MovieClip Nama yang diisikan menunjukkan identitas MovieClip W Lebar gambar dalam pixel H Tinggi gambar dalam pixel X Posisi koordinat x (posisi horizontal) gambar dalam

    lebar kerja Y Posisi koordinat y (posisi vertikal) gambar dalam lebar

    kerja

    4. Dobel Klik pada bola, maka akan muncul lembar kerja Flash persis seperti lembar Flash utama.

    5. Di dalam MovieClip bola, buatlah animasi perpindahan sedemikian rupa sehingga seperti bola yang memantul-mantul.

    6. Klik Scene 1 seperti pada bagian yang dilingkari diatas untuk kembali pada lembar kerja utama. Perhatikan Time Line pada lembar kerja utama, maka hanya akan terlihat satu frame saja yang terisi objek namun ketika dilakukan test movie, akan terlihat animasi pantulan bola.

    7. Lakukan test movie dengan menekan Shift+enter. Menganimasikan Movie Clip Selanjutnya kita akan menganimasikan Movie Clip pantulan bola di atas sehingga menjadi pantulan bola yang bergerak. Jadi, selain bola akan bergerak memantul-mantul juga akan bergerak dari posisi 1 ke posisi 2. Ikuti langkah berikut:

    Untukmembuatanimasipantulanbola,buatlahmotiontweendenganposisiawalpadaframe1,posisikeduapadaframe5,danposisiketigapadaframe10.

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    21

    1. Klik pada frame 40 dan lakukan insert KeyFrame. 2. Buat MovieClip bola sedemikian rupa sehingga posisi tujuan berbeda dengan

    posisi asal. 3. Blok pada frame 1 hingga 40 dan masukkan MotionTween. 4. Lakukan test movie.

    Membuat Tombol (Button) Pada Macromedia Flash sebenarnya sudah disediakan button dengan berbagai macam desain. Untuk memasangnya pilih Windows >> Common Libraries >> Buttons sehingga akan muncul tampilan berikut:

    Seleksi frame pada layer yang akan anda berikan tombol kemudian tarik tombol yang anda pilih ke dalam lembar kerja, maka tombol tersebut sudah siap digunakan. Namun jika anda ingin membuat tombol sesuai keinginan anda, lakukan prosedur berikut:

    1. Buatlah desain tombol terlebih dahulu. Misalnya kita akan membuat tombol berbentuk oval. Pastikan desain yang kita buat berada pada layer dan frame yang sama. Misalnya kita akan membuat tombol dengan bentuk :

    2. Pilih Rectangle Tool dan klik pada bagian yang dilingkari:

  • MembuatMediaPembelajaranInteraktifDenganFlash

    Oleh:FaridSuryantofareed_surya@yahoo.com

    22

    3. S