macro media flash

Modul Macromedia Flash 2005-2006 SMAN 1 Surabaya Fajar Oktobriarto, S. Kom

Macromedia Flash Macromedia Flash adalah program yang sangat popular digunakan oleh para pendesain untuk mendesain web ataupun animasi. Banyak alasan mengapa pendesain menggunakannya untuk menuangkan ide mereka, ukuran file project yang kecil membuat Flash menjadi salah satu program yang digemari programmer web. Adapun sifatnya yang atraktif dan mampu menginteraksi pengguna melalui tombol dengan perintah program sederhana menjadikan hasil karya yang dibuat dari Macromedia Flash menjadi tampak berkelas. Hanya dengan memperhatikan dan melakukan beberapa langkah sederhana dalam waktu singkat pengguna dapat mengerjakan desain luar biasa yang bisa menyaingi program desain kelas profesional. Asalkan bermodal inspirasi cemerlang, karya-karya yang dibuat dengan program ini mampu menyainginya. Untuk mempelajari Macromedia Flash tidak sesulit yang dibayangkan. Konsep alur cerita atau timeline, mengenali fungsi toolbar dan properties masing masing toolbar yang akan satu demi satu dipelajari lewat tugas-tugas project akan dimengerti pendesain dengan sendirinya. Adapun modul ini dibuat berdasarkan urutan project demi project yang masing-masing akan menggunakan fungsi dan kemampuan Macromedia Flash dari urutan yang paling sederhana dan mendasar menuju ke tingkatan yang berangsur-angsur menjadikan pengguna mempunyai pengetahuan yang advance(canggih) dalam menggunakannya.


Tugas I KEPALA MONYET Baiklah, modal dasar sebelum membuat animasi adalah menggambar. Nah, bagi sebagian orang menggambar menjadi masalah tersendiri, bahkan ada sebagian orang untuk menggambar bentuk lingkaran atau kotak sederhana saja harus mengulang dua atau beberapa kali untuk menghasilkan bentuk yang pas dihati. Macromedia Flash membuat kita untuk membuang pikiran itu. Luweskan dan seringlah memegang mouse niscaya apapun bentuknya, dengan mengenali basic shape(bentuk dasar) dan mampu menentukan tool yang sesuai, gambar yang dihasilkan akan menjadi menarik. Perhatikan langkah-langkah mudah membuat kepala monyet tersenyum berikut.

1. Dari gambar tersebut, secara garis besar kita bisa kenali jika bentuk dasarnya adalah oval. Dengan oval tool, dan fill color transparan buatlah bentuk bulatan seperti dibawah ini.


2. Lanjutkan langkah berikutnya dengan melengkungkan tepi atas kiri lingkaran dengan arrow tool hingga nampak bentuknya seperti dibawah ini

3. Pilihlah pencil tool dengan bentuk smooth, kemudian gambarlah raut wajah. Jangan

ragu untuk menggoreskan garis, sebab dengan ajaib Flash akan memperbaiki bentuk garis menjadi smooth.


4. Sejalan dengan cara nomor 3, lanjutkan mengambar kelengkapan kepala seperti mulut, hidung, rambut dan telinga sehingga nampak berbentuk seperti dibawah ini.

5. Jika kita perhatikan, perpotongan garis kepala dan garis yang membentuk rambut dan

telinga nampak sebagai bentuk yang tidak kita inginkan. Kita bisa saja menggunakan erase tool untuk menghapusnya, tapi coba perhatikan ada langkah mudah untuk menghilangkannya, pilih arrow tool, lalu klik shape yang tidak kita inginkan, contoh perpotongan telinga dan kepala, kemudian tekan delete, secara ajaib bentuk yang tidak kita inginkan akan terhapus.


6. Lanjutkan langkah nomor lima hingga gambar berbentuk seperti dibawah ini. 7. Untuk kelengkapan gambar selanjutnya, gambarkan lubang telinga yang menyerupai

huruf 6, juga bola mata dengan oval tool yang terdiri dari satu lingkaran luar dan satu lingkaran dalam sehingga mata nampak bercahaya.


8. Tahap selanjutnya pewarnaan, untuk menungkan warna pada bagian tertentu, gunakan saja paint bucket tool, pilih warna yang diinginkan, lalu tuangkan ke masing-masing lokasi sehingga menjadi seperti dibawah ini.

9. Paling akhir, mirip dengan cara nomor lima, gunakan arrow tool dan tombol delete untuk

menghapus garis yang tidak kita inginkan, seperti lengkung garis mata dan muka.


Tugas II Bola Memantul Untuk membuat animasi, pertama kita harus mempelajari dan mengerti bagaimana animasi bekerja. Animasi umumnya didapat dengan cara membuat beberapa sketsa gambar yang melakukan proses perubahan posisi atau bentuk. Semakin banyak sketsa gambar yang digunakan untuk menggambarkan proses, semakin halus gerakan animasi. Pada Flash, masing masing sketsa gambar disebut juga dengan frame, sedang panjang animasi yang tersusun dari sketsa-sketsa gambar atau frame-frame disebut Timeline. Lebih lanjut tentang hal ini, kita akan membuat animasi mudah tentang bola yang memantul pada dinding persegi panjang. 1. Buatlah project baru, namakan layer dengan nama bola(cara rename-nya dobel klik saja),

kemudian dengan oval tool gambarkan bola, warna boleh apa saja.


2. Karena animasi disusun dari beberapa gambar, maka dalam Flash ada trik tersendiri yang disebut dengan tweening. Untuk membuat bola mental, cukup tentukan titik tujuan bola dan jumlah frame untuk setiap titik tersebut, contohnya gerakan bola dari bawah ke tepi kanan melibatkan 10 frame, maka tentukan titik 10 pada timeline bola sebagai keyframe dari arah gerakan tersebut.

3. Selanjutnya, untuk masing masing frame 20, 30,40 tentukan juga sebagai keyframe untuk

gerakan berikutnya, yaitu gerakan bola ke tepi atas, kiri dan kembali lagi kebawah.


4. Di tahap berikutnya, tentukan posisi bola masing masing keyframe, caranya klik pada keyframe 10 yang dibuat, dengan arrow tool, tarik posisi bola ke tepi kanan. Demikian juga dengan keyframe 20 dan 30 dengan arrow tool tarik ke tepi atas dan kiri.


5. Spesial untuk keyframe 40, posisi bola dititik ini kita identikkan dengan posisi bola pada keyframe pertama. Cara pintar yang bisa kita lakukan, cukup copy keyframe 1 dan paste ke keyframe 40. Caranya klik kanan di keyframe 1, pilih copy kemudian klik kanan di keyframe 40 pilih paste.


6. Langkah terakhir, klik (kiri) pada tulisan bola, tampak pada jendela timeline seluruh bagian frame terblok hitam. Klik kanan pada bagian hitam tersebut, pilih create motion tween. Bila semua langkah diatas telah dilakukan dengan benar, saat tombol enter ditekan, bola akan bergerak beranimasi memantul dari tepi bawah, kanan, atas, kiri dan kembali ke bawah.


Tugas III Anak Panah Pada tugas II sebelumnya kita mengetahui betapa mudahnya animasi dibuat. Hanya dengan menentukan posisi awal dan akhir, secara otomatis bola dianimasikan oleh flash untuk bergerak dari titik awal menuju titik akhir. Pada animasi bola ini asal bola bergerak pada lintasan yang kita tentukan, maka tujuan animasi berakhir. Tetapi bagaimanakah dengan animasi anak panah yang melintasi garis seperti dibawah ini. Langkah-langkah membuat animasi anak panah:

1. Buatlah project baru, rename layer 1 dengan nama anak panah. Dengan line tool gambarlah sebuah anak panah.


2. Klik kanan pada tulisan anak panah pada timeline, pilih add motion guide. 3. Gambarkan lintasan pada layer Guide:Anak Panah.


4. Tambahkan keyframe untuk layer Anak Panah di frame 35 dan frame untuk layer Guide:Anak Panah di frame 35.

5. Klik pada tulisan anak panah, setelah semua frame Anak Panah terblok, klik kanan pada

posisi blok tersebut, pilih create motion tween.


6. Tentukan posisi akhir animasi. Klik pada keyframe akhir anak panah(frame 35), kemudian dengan arrow tool tentukan posisi akhir anak panah. Setelah itu coba test animasi dengan menekan tombol enter.

7. Saat di jalankan akan ada kejanggalan yang terjadi, gerakan panah yang posisinya

menurun seharusnya akan diikuti arah panah yang menuju kebawah, sebaliknya juga untuk keatas. Perhatikan gambar berikut.


8. Agar anak panah mengikuti gerakan naik dan turun, klik pada layer anak panah(sampai semua frame anak panah terblok), pada jendela properties bawah beri tanda cawang pada pilihan orient to path. Cobalah kembali animasi tersebut dan perhatikan apa yang terjadi.


Tugas IV Pisau VS Semangka Pada tugas IV ini, kita akan mempergunakan fungsi motion guide untuk membuat animasi sederhana tentang pisau yang bergerak menuju sebuah semangka. Pada ujung animasi nampak pisau akan tertancap pada semangka. Langkah-langkahnya: 1. Buatlah project baru, buatlah masing masing gambar pisau dan semangka di dua buah

layer yang berbeda.


2. Tambahkan layer pisau sebuah motion guide, masih ingat, klik kanan pada tulisan layer pisau kemudian add motion guide.

3. Pada layer Guide:pisau, dengan pencil tool, gambarlah dengan smooth sebuah garis

lintasan pisau yang terdiri atas dua buah rotasi melingkar.


4. Untuk masing masing frame 30 pada layer pisau dan semangka tambahkan keyframe, sedang Guide:pisau cukup tambahkan frame. Kemudian klik pada tulisan pisau, klik kanan pada bagian yang terblok, pilih create motion tween. Tentukan posisi awal dan akhir pisau, untuk kali ini, pada jendela properties jangan pilih orient to path. Pilih rotate di posisi CCW dan pilih 10 Times.

5. Yang terakhir, pada posisi keyframe 30 semangka dengan pencil tool tambahkan efek merah saat pisau tertancap, cobalah animasi dengan menekan tombol enter


Tugas V Anak Panah, Busur VS Target Untuk menyelesaikan project ini dibutuhkan pengertian tentang konsep layer dan pemanfaatan penentuan posisi frame dan keyframe pada timeline masing-masing layer. Selain itu kita akan mempelajari metode pembuatan animasi yang digenerate (dibentuk) secara otomatis oleh Macromedia Flash melalui fungsi tween shape. Tugas V bercerita tentang animasi anak panah yang akan melesat bergerak dari posisi awal ketika tali busur terentang kemudian terlepas bergerak menuju target disisi lawan. Untuk arah gerakan anak panah kita akan menggunakan konsep motion guide. Pada saat melesat meninggalkan busur, perhatikan tali busur dari posisi terentang menjadi lurus. Untuk menganimasikan gerakan terentangnya tali menjadi lurus kembali kita akan menggunakan metode tween shape. Nah, untuk mengakhiri animasi saat anak panah menancap pada target, sama halnya dengan animasi pisau vs semangka sebelumnya, tambahkan efek seperti gambar.


Langkah-langkahnya: 1. Dalam menyelesaikan project V ini masing-masing target, anak panah, busur dan tali

terletak pada layer yang berbeda. Untuk itu gambarlah keempat obyek tersebut seperti gambar dibawah ini. Sedikit tips, untuk menggambar obyek yang agak rumit seperti anak panah, buatnya dengan ukuran yang besar, setelah itu resiaze dengan free transform tool. Jangan lupa dengan tool itu juga sedikit miringkan obyek yang digambar.

2. Pada layer anak panah tambahkan motion guide(caranya klik tombol mouse kanan pilih Add Motion Guide)


2. Nah, setelah itu dengan line tool buatlah lintasan anak panah. Sedikit lengkungan pada

lintasan akan membuat animasi tampak menarik, lakukan dengan arrow tool untuk membentuk lengkungannya.

3. Tahap selanjutnya adalah penentuan frame dan keyframe masing masing layer. Untuk target dan anak panah tetapkan frame 30 sebagai keyframe. Pada layer lainnya tetapkan frame 30 sebagai frame.


4. Mulailah beranimasi dengan meng-create motion tween pada layer anak panah. Setelah itu tentukan posisi awal anak panah tersebut bergerak hingga posisi terakhir saat menancap.

5. Saat anak panah menancap, dengan free transform tool ubahlah posisi kemiringan anak

panah hingga posisi menancapnya seperti nampak pada gambar dibawah ini.


6. Marilah mulai merapikan detail animasi, jika diperhatikan, saat anak panah menancap bentuk tali busur masih tetap lengkung.

7. Dengan perlahan-lahan menarik tanda merah yang berada di barisan angka-angka frame

pada jendela timeline, nampak pada saat frame ke-5 tali semestinya harus lurus, NAH kita bentuk tali beranimasi menjadi lurus.


8. Tambahkan keyframe pada frame 5 tali(klik kanan di frame 5 tali kemudian pilih insert keyframe)

9. Dengan arrow tool luruskan kembali bentuk tali yang melengkung pada posisi keyframe

5 tali.


10. Blok keyframe 1 sampai 5 layer tali, kemudian pilih tween-nya kearah shape. Setelah itu coba tekan enter untuk menjalankan animasi.

11. Yang terakhir, tambahkan efek pada keyframe ke 30(terakhir) layer target saat anak

panah menancap.


Tugas VI Nyala Obor Animasi nyala obor merupakan animasi dengan cara pembuatan paling sederhana tetapi dengan hasil yang sangat menarik. Animasi ini merupakan kelanjutan dalam mempelajari animasi perubahan bentuk yang secara otomatis dilakukan oleh program Macromedia Flash. Langkah-langkahnya: 1. Dengan tools yang telah kita pelajari gambarlah bambu sebaik mungkin dan bentuk dasar

api, oval (perhatikan gambar) pada dua buah layer yang berbeda. Untuk cahaya api buatlah bentuk oval dengan garis tepi berwarna merah dan warna dalamnya transparan(putih dicoret diagonal)


2. Tambahkan untuk layer api di frame 10,20,30 dan 40 masing masing sebuah keyframe.

3. Pada keyframe 1 api dengan arrow tool buatlah cahaya meliuk kekanan.


4. Dengan cara yang sama, lakukan untuk keyframe api pada frame 10, hanya saja kali ini meliuk kekiri. Lakukan hal ini saling belawan lawanan arah untuk masing masing keyframe 20 dan 30. Abaikan dahulu untuk keyframe 40.

Untuk bentuk meliuknya api seperti terlihat pada gambar dibawah ini. Layer Timeline 1 20 403010

Abaikan dahulu utk

Api keyframe 40 api

1 40

Bambu


5. Nah untuk pewarnaan api, gunakan paint bucket tool. Gunakan type pewarnaan radial untuk memberi cahaya api agar menarik. Tuangkan warna pada api di keyframe 1, 10, 20 dan 30. Untuk 40 abaikan dulu. Untuk teknik pewarnaan gunakan pewarnaan radial dengan warna tengah merah, lewat jendela color mixer ubah warna tepinya kekuning. Fokus warna merah untuk keyframe 1 dibawah, keyframe 10 diatas, seterusnya saling berlawanan dengan sebelumnya untuk 20 dan 30, abaikan keframe 40 dahulu.

Kurang lebih, pewarnaan dasar api seperti terlihat pada gambar dibawah.

Layer Timeline 1 20 403010

Abaikan dahulu utk Api keyframe 40 api

1 40

Bambu


6. Nah, kali ini untuk keyframe 40 dari api cukup kita copy dari keyframe 1, caranya klik kanan pada keyframe 1 kemudian paste pada keyframe 40.

Untuk membuat identik sama persis antara keyframe pertama dan terakhir, cara copy

paste adalah yang paling mujarab. Dengan mengidentikkannya, saat animasi di loop(diulang-ulang) perpindahan dari keyframe terakhir ke yang pertama tidak akan nampak(seamless).

Layer Timeline 1 20 403010

Lewat copy paste Api salin keyframe 1 api ke keyframe 40

1 40

Bambu


7. Blok seluruh frame api dengan mengklik tulisan layer api, setelah itu pilih tween shape. Coba jalankan animasi.

8. Untuk membuat background yang mengikuti nyala cahaya api, tambahkan sebuah layer dan gambarlah sebuah kotak dengan warna transparan.


9. Sama halnya dengan teknik cahaya api, tambahkan di layer background sebuah keyframe pada frame 10,20,30,40. Dengan teknik pewarnaan paint bucket, buatlah pewarnaan cahaya berubah dari atas menuju kebawah berlawan-lawanan dari keyframe 1, 10, 20 dan 30. Seperti biasa, copykan untuk keyframe 40 identik dengan keyframe 1. Gunakan kembali metode tween shape untuk membuat cahaya background berubah-ubah. Cobalah animasi dengan menekan tombol enter.

Dengan konsep pewarnaan yang berpindah posisi seperti api, layer background akan nampak seperti dibawah ini.

1 10 20 30 40

TimelineLayer

Api

1 40

Bambu

Background

1 10 20 30 40

Lewat copy pastesalin keyframe 1 apike keyframe 40


Tugas VII Nyala Lilin Konsep tween shape dalam pembuatan nyala api yang telah kita pelajari yang sudah lalu tentu tidak akan menyulitkan jika bambu diganti dengan lilin. Perubahan tween shape hanya terjadi pada cahaya api dan bayangan. Dari tugas VI yang telah lalu lakukan perubahan layer bambu menjadi lilin, kemudian dengan prosedur yang sama dengan tugas VI buatlah animasi cahaya lilin lengkap dengan animasi cahaya backgroundnya. Tips untuk menggambar lilin:

Dengan

line danbentuk garis

tidakberaturan buat garis ygmenghubungkan tepi keduabentuk oval sebelumnya

Hapus garis oval yang tidak diinginkan dengan memanfaatkan arrow tool dan tombol delete

Denga

noval

bentuk garis tidakberaturan buat 2 bentukoval saling bertumpukan

dan

Tahap Selanjutnya buatlah bentuk lilin dengan memanfaatkan rectangle tool dan line tool untuk membuat batang lilin dan sumbunya. Untuk membuat lengkung lilin hingga nampak seperti batang bulat gunakan arrow tool(gambar kiri), lanjutkan pewarnaan dengan paint bucket tool, gunakan teknik pewarnaan radial hingga gambar kurang lebih seperti disebelah kanan bawah.


Geser lilin hingga terletak diatas gambar cawan, untuk melakukannya gunakan arrow tool.


Tugas VIII Halaman Huruf Selain untuk membuat gambar dan animasi, dengan kemampuan programmingnya membuat Macromedia Flash mampu untuk membuat animasi menjadi interaktif. Interaktif dalam beranimasi adalah konsep dimana saat animasi bergerak, user dapat mengontrol secara langsung jalannya animasi. Dengan menambahkan beberapa tombol yang telah diprogram sebelumnya pergerakan animasi satu ke yang berikutnya dapat kita atur sesuai dengan keinginan. Apakah sulit? Jawabannya adalah tidak. Banyak software lain yang memanfaatkan Flash untuk pengerjaanya, antara lain dalam pembuatan games sederhana dan program tutorial(pembuatan soal interaktif). Hanya memperhatikan dan mengerjakan project Halaman Huruf berikut akan membuat pendesain akan lebih memahami konsep ini. Langkah-langkah :

1. Project kali ini mudah saja, buatlah sebuah layer yang bernama halaman, dengan memberi jarak antara keyframe sebanyak 10-an frame buatlah tampilan halaman 1, 2, 3, 4, 5.


2. Selanjutnya sisipkan sebuah layer lagi dengan nama Tombol, untuk menambahkan tombol lewat menu windows, common libraries, buttons,dengan cara tarik tempel siapkan lima buah tombol pada layer Tombol.


3. Tombol yang kita siapkan tadi belum mempunyai perintah, untuk menambahkan perintah, gunakan fungsi action script. Caranya windows, action, setelah keluar jendela action, pilih warna Action for(No instance name assigned)(arcade button - blue).

4. Kemudian ketikkan script dibawah ini

Untuk warna biru(blue) On(release){gotoandstop(1);

} Untuk warna hijau(green)

On(release){gotoandstop(10); }

Untuk warna oranye(orange) On(release){gotoandstop(20);

} Untuk warna merah(red)


Untuk warna kuning(yellow)


Untuk Action for frame1 of layer name tombol Stop();


5. Setelah semua perintah script diketik dengan benar cobalah memainkan animasi dengan menekan tombol control + enter.


Tugas Akhir Menyelipkan Project Dalam Project Untuk menyelipkan project dalam project, gunakan fasilitas export movie. Saat di-export file mempunyai extension .swf file inilah yang nantinya bisa di-import kembali ke dalam project macromedia flash yang lainnya melalui fasilitas import to library.


Untuk menyelipkan project setelah diimport kedalam flash, gunakan menu windows, libraries atau tekan F11. Gunakan fasilitas tarik tempel (drag and drop) untuk menyelipkan project-project yang telah kamu buat.

macro media flash

Documents