Belajar Macromedia Flash 8.0

1. Membuat Animasi Tombol Rollover
Tombol rollover adalah tombol dengan animasi pada saat tombol di sorot maka tombol akan berubah, sehingga akan lebih menarik dari tombol biasa. Yang kita butuhkan disini adalah dua gambar yang berbeda. Gambar satu digunakan untuk tombol normal (belum disorot) dan gambar yang satunya lagi digunakan untuk tombol hover (setelah disorot).


untuk tombol normal (belum disorot) dan gambar yang satunya lagi digunakan untuk tombol hover (setelah disorot).

Kita dapat membuat tombol dengan efek rollover atau biasa disebut rollover button dengan menggunakan Macromedia Flash. Dalam tutorial ini, saya menggunakan Macromedia Flash versi8.0. Langkah pertama, atur dokumen dengan

panjang 150px, lebar 75px dan background warna hitam

Buat objek rounded rectangle hingga memenuhi canvas. Ubah menjadi symbol graphic. Dengan cara seleksi objek > klik kanan > Convert to Symbol... > graphic, pada kotak Name beri nama "normal" > OK.


Objek yang akan kita gunakan sebagai tombol normal telah selesai kita buat. Sekarang kita akan membuat objek hover yang akan digunakan sebagai efek pada saat tombol disorot. Duplikatkan saja symbol graphic dengan nama normal yang telah kita buat tadi. Buka panel Lybrary dengan cara klik menu Window > Lybrary. Atau tekan tombol CTRL + L. Dalam panel Lybrary terdapat symbol graphic dengan nama normal. Klik kanan symbol graphic "normal" > Duplicate. Pada kotak name ketikkan hover, type: Graphic.


Lakukan beberapa modifikasi pada symbol graphic "hover". Pada panel lybrary, klik kanan symbol graphic "hover" > Edit. Ubah warna gradasi di dalam garis berwarna putih dengan diseleksi terlebih dahulu, pada panel color lakukan pengaturan seperti berikut. Jika panel color belum muncul, tekan tombol SHIFT+F9.



Sekarang kita akan menggunakan 2 symbol graphic sebagai bagian dari tombol. Buat symbol baru berupa tombol dengan cara tekan tombol CTRL+F8. Maka akan muncul kotak dialog Create New Symbol. Pada kotak name ketikkan "tombol hover" dan pada type pilih Button. Pada panel Lybrary bertambah satu objek dengan tipe button. Drag objek button dengan nama "tombol hover" ke pojok kiri atas dokumen/kanvas. Kemudian double klik lingkaran kecil di pojok kiri atas tersebut.



Terdapat 4 frame utama pada symbol button "tombol hover" yaitu: UP, OVER, DOWN dan HIT. Frame yang dibutuhkan dalam membuat tombol rollover adalah UP dan OVER. UP mendeskripsikan tombol pada saat tidak tersorot, sedangkan OVER mendeskripsikan tombol pada saat disorot. Isi frame UP dengan symbol graphic "normal", dengan cara: pastikan frame UP terseleksi kemudian drag symbol graphic "normal" ke dokumen/kanvas.



Masukkan symbol graphic "hover" ke dalam frame Over. Caranya: seleksi/klik frame Over (dibawah tulisan Over), tekan tombol F7 untuk membuat key frame kosong kemudian drag symbol graphic "hover" ke dokumen/kanvas.



Terakhir, tambahkan teks pada tombol. Caranya adalah dengan menambahkan layer baru diatas layer pertama, klik menu Insert > Timeline > Layer. Beri nama layer baru dengan nama "teks". Gunakan teks tool untuk menuliskan teks, misalnya "klick here".


Tombol rollover telah selesai dibuat
2. Membuat Animasi Roda Berputar

Langkah-langkah membuat animasi roda berputar sangatlah mudah. Kita hanya memerlukan satu buah layer yang berisi objek roda yang telah dibuat sebelumnya.

1. Buat sebuah objek roda dalam area kerja Macromedia Flash 8. Anggap saja gambar dibawah merupakan sebuah roda.




2. Klik kanan pada frame 30 kemudian pilih Insert Keyframe atau klik frame 30 kemudian tekan tombol F6. Panjangnya frame berkaitan dengan durasi animasi, anda dapat menentukannya sendiri sesuai dengan keinginan anda. Entah itu frame 10, 15, 20, 21, 23 atau 100, yang penting hasilnya nanti sesuai dengan keinginan anda.




3. Klik kanan pada frame antara frame 1 dan frame 30 (keyframe paling kanan) kemudian klik Create Motion Tween. Pada gambar berikut, saya melakukannya tepat ditengah-tengah yaitu pada frame 15.



4. Tekan tombol CTRL+F3 untuk membuka panel Properties (Window > Properties > Properties). Kemudian arahkan mouse anda ke titik kecil berwarna hitam pada frame 1 dan klik titik tersebut. Sehingga panel Properties akan berubah seperti ini.



5. Perhatikan pada bagian properti Rotate. Secara defauld properti rotate berisi Auto. Ubah menjadi CW untuk menganimasikan objek roda berputar searah jarum jam.



Anda dapat menaikkan kecepatan putaran dengan menaikkan slider Ease keatas.


Animasi roda berputar telah dibuat. Tekan tombol CTRL + ENTER untuk melihah hasilnya.

3. Membuat Animasi Masking Pada Teks


Dalam pembuatan animasi masking, paling sedikit dibutuhkan sebanyak 3 layer yaitu layer pertama berisi teks, layer kedua berisi objek yang di-mask, dan layer ketiga berisi mask. Susunan layer harus kita perhatikan dengan baik. Jika layer-layer disusun dengan berantakan maka hasilnya akan tidak sesuai dengan yang kita inginkan.





Hal pertama yang wajib anda lakukan adalah meluncurkan aplikasi Macromedia Flash. Dalam tutorial ini, yang saya gunakan adalah Macromedia Flash 8. Setelah aplikai berjalan dengan baik, maka selanjutnya adalah:

1. Beri nama layer pertama dengan nama "TEKS", kemudian buat sebuah teks pada dokumen.

2. Buat dua layer baru diatas layer "TEKS" dan beri nama "MASK" dan "MASKED".


3. Copy-kan teks yang terdapat pada layer "TEKS" ke layer "MASK" Caranya: Klik frame 1 pada layer "TEKS" kemudian tekan tombol CTRL+C > Klik frame 1 kemudian tekan tombol CTRL+SHIFT+V. Sehingga teks akan bertumpukan.

4. Buat sebuah objek jajar genjang pada layer "MASKED" dan turunkan nilai transparansinya dengan menurunkan slider alpha pada panel Color Mixer. Jika panel Color Mixer belum muncul, klik menu Window > Color Mixer.



Letakkan objek jajar genjang yang sudah anda buat di ujung kiri teks. Sampai pada tahap ini, saya memiliki hasil sebagai berikut.

5. Seleksi frame 20 pada semua layer, klik kanan > Insert Frame atau tekan tombol F5. Selanjutnya kita akan menganimasikan objek jajar genjang bergerak dari kiri ke kanan. Klik kanan frame 20 pada layer "MASKED" kemudian tekan tombol F6, Klik kanan diantara frame 1 - frame 20 pada layer "MASKED" kemudian klik Create Motion Tween.

6. Masih aktif pada leyer "MASKED", klik frame 20, geser objek jajar genjang ke ujung kanan teks.

7. Dan langkah terakhir klik kanan layer "MASK" > Mask. Jangan lupa simpan hasil pekerjaan anda dan untuk melihat hasilnya tekan tombol CTRL+ENTER.







4. Membuat Animasi Blur

Untuk membuat animasi blur cukup memanfaatkan fitur Timeline Effect yang dimiliki Macromedia Flash 8. Dengan efek tersebut tidak usah repot-repot membuat animasi tiap frame. Sebenarnya jika kreatifitas anda sangat tinggi, anda bisa membuatnya tiap frame. Itupun jika anda memiliki banyak waktu.




Berikut langkah-langkah bagaimana membuat animasi efek blur dengan menggunakan Macromedia Flash 8.0

Pertama buatlah kotak berdimensi 200 X 200
Properti: fill color merah, stroke weight hitam berketebalan 5px dengan menggunakan Rectangle Tool seperti ini:



Tips:
Untuk membuat sebuah objek kotak dengan sisi-sisi yang sama panjang (persegi) ketika anda men-drag mouse, tekan tombol SHIFT. Atau anda bisa atur dimensinya dengan mengetikkan angka setelah selesai membuat objek. Caranya: Seleksi objek terlebih dahulu > Tekan tombol CTRL+I atau klik menu Window > Info > Pada kotak Weight dan Height isikan nilai yang sama sesuai keinginan anda.

Langkah kedua, seleksi objek kemudian klik Menu Insert > Timeline Effect > Effect > Blur. Kemudian akan muncul kotak dialog blur yang berisi blur setting dan jendela preview.


Tinggal mengklik tombol OK karena settingan default sudah cocok’

Tips:
Hal yang paling penting dalam blur setting adalah Effect Duration. Effect Duration merupakan durasi waktu efek blur yang kita terapkan pada objek. Nah, yang perlu kita ketahui adalah frame rate dokumen yang dipakai. Kita dapat mengetahui dan menentukan frame rate dengan cara klik kanan pada dokumen kemudian pilih Dokumen Properties...



Jika frame rate yang digunakan adalah 12 fps maka angka yang harus diisikan pada Effect Duration dalam kotak dialog Blur adalah 12 agar durasi efek blur berjalan dalam waktu 1 detik. Jika diinginkan 2 detik maka frame rate harus dikalikan dengan 2 (12 x 2 = 24 frame).

Sebuah animasi efek blur telah selesai dibuat. Untuk melihat hasilnya, tinggal menyimpannya dan akhiri dengan menekan tombol CTRL+ENTER.



5. Membuat Slide Presentation
Pada tutorial ini kita hanya akan membuat 2 slide presentasi, kemudian Anda dapat mengembangkan sendiri. Frame 1 berisi slide 1 dan frame 2 berisi slide 2.
Langkah 1:
Buat layer dengan susunan sebagai berikut:


Beri warna hitam pada background dan tambahkan teks pada layer teks_1 “Cara Membuat Tempe”. Ubah teks menjadi movie clip (F8) agar dapat dikontrol dengan mudah. Insert frame pada frame 2 layer background.
Langkah 2:
Buat tulisan “next” kemudian ubah menjadi buttons (F8). Contoh posisi teks dan tombol:

Langkah 3:
Klik kanan frame 1 layer actions ataun tekan F9, kemudian tambahkan script stop.

Langkah 4:
Klik kanan tombol next –> Actions (F9), tambahkan script berikut ini:
on (release) {gotoAndPlay(2);
}
Angka 2 menjelaskan frame 2, karena kalau tombol ini di klik, maka akan menuju ke frame 2.
Langkah 5:
Tambahkan satu layer dengan nama teks_2.
Langkah 6:
Insert keyframe (F6) pada frame 2 layer teks_2, kemudian tuliskan “Berikut langkah-langkah membuat tempe: dst”. Ubah teks menjadi movie clip.
Langkah 7:
Insert keyframe (F6) pada frame 2 layer next, agar tombol next masuk ke frame 2. kemudian ubah script nya menjadi:
on (release) {gotoAndPlay(3);
}
Angka 3 menjelaskan frame 3, karena kalau tombol ini di klik, maka akan menuju ke frame 3.

Langkah 8:
Tambahkan layer previous –> Insert Keyframe (F6) di frame 2 –> buat tulisan previous –> Convert to Symbol (F8) –> Buttons
Langkah 9:
Klik kanan tombol previous –> Actions (F9), tambahkan script berikut ini:
on (release) {gotoAndPlay(1);
}
Angka 1 menjelaskan frame 1, karena kalau tombol ini di klik, maka akan menuju ke frame 1.
Langkah 10:
Insert keyframe (F6) pada frame 2 layer acttions, kemudian tambahkan script: stop();
Tekan Ctrl + Enter (Test Movie) atau Enter (Play)
Berikut posisi akhir layer:



6. Membuat Animasi Tombol Play



Tombol Play digunakan untuk memberikan sentuhan pada animasi yang kita buat agar lebih interaktif, artinya terjadi sebuah komunikasi antara animasi dengan pengguna. Animasi tidak akan berjalan sebelum pengguna menekan tombol play. Ada 3 komponen utama yang dibutuhkan dalam membuat kontrol tombol play pada animasi yaitu Movie Clip, Button dan Action Script. Agar komponen Button (tombol) dapat berkomunikasi dengan Movie Clip (animasi) maka sebuah Movie Clip diberi sebuah Instance Name yang digunakan sebagai nama panggil dalam sebuah action script yang mengatur kontrol animasi tersebut. Software yang saya gunakan adalah Macromedia Flash 8.


Berikut langkah-langkah membuat kontrol animasi tombol play:

1. Buat sebuah Movie Clip yang didalamnya terdapat objek yang dianimasikan terdiri dari beberapa frame. Contoh: saya membuat sebuah Movie Clip bernama Bola Pantul yang didalamnya terdapat animasi bola pantul.



2. Berilah animasi Movie Clip tersebut 2 buah action frame (action script yang diletakkan pada frame. Action script yang pertama diletakkan pada frame paling awal dan action script yang kedua diletakkan pada frame paling akhir / belakang.
Caranya: Tambahkan sebuah layer baru dalam aniamsi Movie Clip yang akan dijadikan sebagai layer action script. Buka panel Action dengan menekan tombol F9 atau klik menu Window > Actions. Insertkan sebuah keyframe pada frame pertama layer action script, dan tulis action script stop(); pada panel Action - Frame. Insertkan sebuah keyframe pada frame paling belakang pada layer action script dan tulis action script gotoAndPlay(2); pada panel Action - Frame:



Kita telah selesai membuat sebuah Movie Clip dnegan action scrip untuk mengatur jalannya animasi. Ketika anda menekan tombol CTRL+ENTER maka animasi tidak akan berjalan karena pada frame pertama Movie Clip tadi telah diberi perintah stop (berhenti).

3. Beri sebuah Instance Name pada Movie Clip yang telah dibuat. Klik Scene 1 , seleksi Movie Clip yang ada di kanvas / area kerja kemudian buka panel Properties (CTRL + F3) ketikkan sebuah nama instance name pada kotak Instance Name, misalnya bola. Perhatikan gambar berikut:




4. Buat sebuah objek button yang akan dijadikan sebagai tombol play (Insert > New Symbol... > Pilih Button > Beri nama tombol play).



Setelah selesai, kita beri objek tombol tersebut sebuah action script yang mengatur Movie Clip yang telah dibuat sebelumnya. Klik objek tombol > buka panel Action (F9), kemudian ketikkan action script berikut pada pada panel Action - Button yang muncul.
on (release) {

bola.gotoAndPlay(2);

}


Selesai. Tekan tombol CTRL+ENTER untuk melihat hasilnya, dan coba anda klik tombol play. Jika langkah-langkah yang anda lakukan benar, maka animasi akan berjalan berulang-ulang.






7.Membuat Header Blog Animasi
Langkah pertama jalankan program macromedia flash 8. Kemudian klik File>New.

Kemudian klik File>Save As, pilih Folder di komputer kamu kemudian masukan nama pada kolom file name dengan nama “Header” lalu klik tombol Save.


Langkah selanjutnya adalah meng-Import gambar hasil editan kamu ke flas, Klik import>Import to stage.


Kemudian pilih gambar yang akan di import, lalu klik Ok


Gambar untuk Header berhasil di import

Langkah selanjutnya memasukan gambar kedalam Library, klikanan pada gambar kemudian pilihConvert to Symbol

Kemudian akan muncul jendela seperti ini. Isikan Name dengan “gambar 1, Type pilih Movie Clip, kemudian Klik OK.


Klik icon New Layer. Icon ini berfungsi untuk membuat layer baru pada frame.

Klik Window>Library, untuk memunculkan library.

Library berhasil di tampilkan, klik pada huruf library untuk memunculkan symbol yang tadi telah kita masukan.

Klik Frame/layer kemudian pindahkan symbol kedalam stage dengan cara klik kemudian tahan lalu geser ke stage

Frame masih dalam keadaan terpilih, kemudian geser gambar dengan menekan tanda panah pada keyboard kebawah, kesamping , dan keatas supaya gambar bertumpuk.


Gambar berhasil digeser, tetapi gambar bagian atas terlihat lebih menjorok kebawah di bandingkan gambar bagian bawah (tidak presisi dengan gambar yang di bawah)


Langkah selanjutnya adalah merubah ukuran layout/stage, klik size kemudain akan muncul jendela seperti gambar diatas, isi dimensions dengan width 525 dan height 120. Klik Ok

Kemudian Block kedua gambar, lalu geser dengan menekan tanda panah pada keyboard sampai pas dengan layout.

Gambar berhasil digeser.


Klik icon new layer/frame.


Sekarang kita akan membuat sebuah kotak yang nantinya di jadikan sebagai mask. Klik Rectangle tool

Buat sebuah kotak vertical disamping gambar dengan cara klik pada mouse kemudian tahan lalu geser kesamping dan kebawah. Ingat frame/layer yang terpilih harus layer 3

Seperti terlihat pada gambar, kotak berhasil kita buat. Langkah selanjutnya adalah memasukan kotak tadi kedalam library, caranya sama seperti pada langkah sebelumnya : Klik kanan pada kotak, kemudian akan muncul jendela seperti terlihat pada gambar. Kemudian isi kolom Name dengan 1, Type pilih Movie Clip, lalu klik Ok.

Selanjutnya kita akan menggerakkan/menganimasikan kotak tadi ke sebalah kanan. Caranya klik pada frame ke 100 pada layer 3 kemudian tekan shift pada keyboard dan tahan kemudian klik lagi layer 2, dan layer 1. Setelah itu kemudian tekan F5 pada keyboard.

Klik layer 3 kemudian pada frame layer 3 klik kanan pilih Create motion tween. Motion ini berfungsi agar animasi tadi bergerak halus.

Klik pada frame 40 kemudian tekan F6 pada keyboard.

Selanjutnya klik pada frame 100 kemudian tekan F6 pada keyboard, kemudian geser kotak kesebelah kanan.


Seperti terliahat pada gambar kotak tadi berhasil di geser kesebelah kanan.



Selanjutnya sekarang kita akan menjadikan kotak tadi menjadi mask. Caranya klik kanan pada layer 3 kemudian pilih Mask.


Terlihat pada layer muncul icon gembok, artinya kotak tadi sudah menjadi mask, munculkan lagi kotak tadi dengan mengklik icon gembok pada layer.

Selanjutnya sekarang kita akan melihat animasi yang telah kamu buat tadi. Caranya klik Control>Test Movie.

Animasi yang anda buat berhasil dimunculkan.


Selanjutnya sekarang kita akan mempublish animasi tadi menjadi file .swf, caranya klik File>publish settings

Setelah muncul jendela seperti pada gambar, kemudian pilih flash, pada JPEG quality geser slide ke angka 100, dan klik OK.
Sekarang Header animasi yang kamu buat sudah di publish menjadi .swf,untuk melihatnya kamu periksa folder tempat file ini kamu simpan, kemudian klik file Header.swf