P. 1
Membuat Media Interaktif Dengan Flash

Membuat Media Interaktif Dengan Flash

|Views: 23|Likes:

More info:

Published by: Tri Wahyu Supriyanto on May 04, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

12/18/2013

pdf

text

original

Membuat Media Interaktif dengan Flash

19Jun07
Perhatian: latihan ini khusus bagi pemula (seperti Saya 8) ), bagi yang sudah expert diharapkan untuk memberikan yang lebih dari ini. Pernah liat program/animasi yang menarik, interaktif, keren? Saya 68% yakin itu dibuat menggunakan flash. Tidak percaya? memang itu hanya dugaan Saya saja . Tapi bukan tanpa alasan, boleh dikatakan flash menawarkan kemudahan dalam pembuatan bermacam media interaktif, kali ini kita ambil contoh membuat company profile. perlu dicatat, bahwa company profile disini dapat anda ganti dengan CD interaktif, CV (curriculum vitae), portfolio, presentasi, atau apapun namanya. Prinsipnya kita akan membuat sebuah media/aplikasi yang interaktif seperti web tetapi lebih banyak animasinya. Buat yang masih bingung seperti apakah media interaktif itu, silahkan lihat aplikasi tour windows XP: klik start menu>all programs>accessories>tour windows xp (pilih yang animated tour!). Sesudah animasi berjalan beberapa lama dan sudah puas mengklik sana-sini, cobalah iseng-iseng klik kanan, akan kita dapati keterangan yang menyatakan bahwa aplikasi tour windows XP ini dibuat dengan flash. (yang ga punya windows XP, silakan coba di kompie teman masing-masing). Nah, bagaimana sekarang, tertarik untuk bisa membuat yang seperti itu? mudah… Pertama-tama pastikan pada komputer anda telah terinstall aplikasi flash (ya iyalah…) boleh Flash MX (Flash 6), Flash MX 2004 (Flash 7), Flash 8, Flash CS3 (Flash 9), dan sebagainya. Kita akan lebih banyak teknik animasi dengan script yang sederhana saja, karena ini untuk umum.

Siapa yg perlu membuat media interaktif?
Siapapun yg baru kenal flash, dan ingin membuat sesuatu yang berguna, yg sedang mencari aplikasi presentasi yg lebih bisa diutak-atik daripada PowerPoint, yg sedang mencari aplikasi pembuat aplikasi yg mudah membuat desain yg menarik, akademisi/praktisi yg ingin membuat publikasinya dalam bentuk aplikasi media interaktif, siswa SMP/SMA atau mahasiswa yg ingin membuat aplikasi/presentasi dengan desain yg menarik, guru2 yg ingin mencoba metoda baru, mengajar interaktif (halah. dimana-mana mah ngajar pasti interaktif)…bukan..maksudnya ingin membuat metoda penyampaian yg berbeda dari sekadar menulis di papan tulis, perusahaan maupun personal yg ingin meningkatkan brand imagenya dengan membuat profile interaktifnya yg didistribusikan ke berbagai tujuan, Anda…ya… Anda!, atau siapapunlah yg sedang iseng-iseng aja Baiklah, langsung kita mulai saja…..

1) Tentukan konsep desain
Jangan sampai terjadi ketika sudah berhadapan dengan komputer kemudian bengong, eeuu…. (dengan gaya patrick ). Jadi buat dulu konsepnya! sebenarnya kita mau buat apa, apa saja content yang akan disajikan, kemudian bagaimana menampilkannya pada user, dan seterusnya. pikirkan halhal ini kalau perlu dicatat, kemudian susun rancangan menu-menunya menjadi semacam hierarki. semua digambarkan dalam bentuk sketsa di kertas (rileks, bebaskan pikiran, kemudian buat sketsa sebebas-bebasnya, sekali-kali selingi dengan minum supaya kita tetap fresh), akhirnya simpanlah kertas sketsa kita, inilah yang akan menjadi rujukan pembuatan company profile yang akan kita buat. Adapun untuk latihan sekarang kita pakai rancangan Saya dulu, seperti apa? mari ikuti…

2) Beberapa cara umum, secara umum
ada banyak cara dalam menggabungkan kesemuanya, setidaknya ada 3 cara yang umum digunakan:

exe icon=mySalman. maka ketika menjalankannya pertama kali akan lebih berat disebabkan meskipun kita hanya menjalankan sebuah bagian (misalnya intronya saja). besar file berkisar antara 1-3 MB sehingga relatif mudah kita kirim atau e-mailkan kepada orang lain tanpa perlu khawatir apakah di komputer orang tersebut ada flash player atau tidak.exe . pabalatak-lah pokoknya.swf yg terpisah) berbeda dengan cara pertama tadi.inf (namanya harus autorun + ekstensinya harus inf.inf harus berada di root utama CD tersebut.exe. .pilih ‘save as type’-nya all files (jangan txt!) kemudian beri nama autorun. Pintar2 mengemasnya saja. belum tentu benar ] Cara 1: File flash dibuat dalam satu file saja dengan tipe projector –aplikasi . maka cara ini lebih ringan.ketik: [autorun] open=namaFile*.exe yg diautorun boleh setara dengannya atau di folder bawahnya) Cara 3: Menggunakan template. coba kalau semuanya digabung dalam 1 file.inf ke CD tersebut (perhatian: file autorun. jadi nyantai aja…) . yang perlu didownload hanya bagian swf yg berhubungan saja.klik save as . Karena file yang perlu dibaca oleh komputer hanya bagian yang diload (ingat tiap bagian mempunyai .copy-kan file autorun. Cara 2: File flash dibuat per bagian-bagiannya dengan 1 file induk yang menyatukan semuanya. time remaining 59 minutes Kekurangannya adalah dalam distribusi (CD misalnya) kita perlu mengemasnya sedemikian rupa agar orang yang melihat file-file tersebut tidak bingung (bayangkan: melihat banyak file . sedangkan file . Keuntungan dari cara ini adalah lebih praktis terutama jika contentnya hanya sedikit.swf atau file-file lain dari bagian project kita. 1% of 9MB.jpg.exeYangMauDiJalankanOtomatisPadaCDnya icon=namaFileIkon*. bikin template sendiri.swf tersendiri (begitu juga dengan file-file gambar seperti jpg dipisahkan sendiri) kemudian ditambah sebuah file ‘Loader’ –file inilah yang menjadi file utama yang kemudian memanggil file . .swf. tapi aturan penulisan windows tidak case-sensitive.swf-. sampai ke . kita bisa mendapatkannya dengan berbagai cara.icoYangMauDijadikanIkonPadaCDTersebut contoh: [autorun] open=mySalman.karena flash playernya sudah built-in sehingga untuk menjalankannya kita tidak perlu flash player.exe.buka notepad . ini juga prinsip kalau kita membuatnya di web. nanti di sebuah warnet yg lemot yg muncul tulisannya malah: now loading. ada tersedia berbagai macam template flash di dunia ini.[peringatan: cara-cara di bawah ini hanya subjektifitas penulis saja. Keuntungan menggunakan teknik ini adalah ketika kita membuat sebuah project dengan content yang kompleks. tetap saja kan kita perlu me-load 1 file utuh. melakukan reverse engineering seperti mendecompile sebuah file swf punya orang (jika yang didecompile sebenarnya berbayar. untuk CD biasanya Saya membuatnya autorun secara otomatis+petunjuk readme. mulai dari download yg gratisan. Jadi masing-masing bagian dan sub-sub bagian dipisah menjadi file .txt yang berisi penjelasan jika CD tidak berjalan otomatis bla…bla…bla… Tambahan cara membuat autorun di CD: . Sedangkan kekurangan dari cara ini adalah jika kita membuat aplikasi yang kompleks dengan content yang bermacam-macam. mana yang harus saya klik?) dan dengan mudah mengklik file ‘Loader’-nya. cara ini tidak begitu dianjurkan).

net/shared/5op0lm8cos bersambung…:) insyaAllah akan Saya update lagi…. sebelum memulai latihan ini ada baiknya jika Anda terlebih dahulu mempelajari apa yang akan kita buat dengan melihat file source . Namun.fla yang dapat diunduh dari http://tinyurl. . berikut adalah langkah-langkah untuk membuat aplikasi flash dengan cara pertama. . ———————————————– Media Interaktif dengan Flash #2 25Jun07 Seperti yang telah diceritakan pada tulisan Saya sebelumnya. bersambung… .meminta bantuan orang untuk membuatkannya (nah kalau ini sangat boleh. jangan lupa komisi-nya ya ). berikut ini screenshot dari latihan membuat media interaktif dengan flash Tidak diperlukan waktu yang lama untuk membuatnya. Bagi yang mau source fla-nya (cuman bisa dibuka minimal dari Flash 8…) bisa diunduh di http://www. ini yang mungkin akan Saya berikan step-by-stepnya.com/F4154LMAN-template-flash . aplikasi yg diperlukan pun hanya Flash saja. Update (20 Juni 2007): Tadi malam Saya sudah mencoba membuat prototypenya. . adapun untuk iconnya Saya buat dengan teknik tracing (cara ini Saya dapat dari Andre).box.

3. simpan di atas layer lain -> layer ‘bekgron’ tempatkan layer ini di paling bawah. Membuat background Pada latihan ini kita buat background yang sederhana saja yaitu dengan membuat garis abuabu vertikal yang berjejer (buat dengan line tool terus copy-paste yg banyak) supaya ada teksturnya. Kemudian di bawahnya tembahkan pula space berwarna oranye (buat dengan rectangle tool) dan untuk membuat sedikit efek berikan beberapa gradasi warna. catatan: buat semuanya di layer ‘bekgron’. Membuat ikon-ikon . supaya tidak saling menimpa jadikan garis-garis menjadi group tersendiri (ctrl+g) dengan begitu akan lebih mudah diedit. jadi layar kita tidak terlalu putih blank.1. Membuat layer-layer Buat 4 buah layer sebagai berikut : -> layer ‘eksyen’ actionscript akan kita tuliskan pada frame yang ada di layer ini -> layer ‘mupiklip’ tempat kita menyimpan movieclip yang merupakan content utama dari aplikasi kita -> layer ‘tombol’ layer ini tempat kita menyimpan tombol-tombol. kita pisah-pisahkan 2. karena ini adalah gambar background aplikasi kita sebenarnya tidak menjadi masalah kalaupun kita buat semuanya di 1 layer hanya untuk memudahkan pengeditan nantinya.

gambar aslinya 2. maka jadilah efek kartun gedung Labtek VI ITB .Pada aplikasi latihan ini. dan tanda belok] dibuat dengan menggunakan teknik tracing. Tempatkan ikon-ikon tersebut pada layer ‘bekgron’ atau ‘mupiklip’ yang penting dia berada di atas background yang kita buat. orang. surat. caranya mudah yaitu dengan membuat garis-garis kerangka dari sebuah gambar bitmap yang ingin dibut ikonnya. finishing hasil dengan menebalkan bagian tepi. Berikut Saya contohkan tracing gambar gedung Labtek VI ITB: 1.kita buat garis-garis yg kita anggap perlu dengan line tool 3. ikon-ikon yang ada [rumah.

jadi silakan beri nama yang khas untuk tiap button. instance name diisikan di bagian properties dari button tersebut caranya: klik button yg mau diberikan instance name kemudian pilih panel properties. nama ini nanti akan dipakai ketika kita membuat actionscript. Kemudian berikan instance name pada masing-masing button. Sehingga akhirnya hanya area hit saja yang berisi gambar kotak tersebut. Tombol akan berwarna biru muda transparan yang menandakan area hit dari tombol tersebut. . buat sebuah kotak>convert to symbol>button. Lihat contoh di bawah.selamat mencoba…! thanks to Andre 4 this great technique. kemudian klik kanan pada keyframe hit>pilih insert keyframe. Copy-paste tombol ini atau mudahnya drag saja langsung dari library. tombol yang menutupi ikon orang saya beri instance name ‘btn_jalmi’. Membuat tombol-tombol Kita hanya perlu membuat sebuah tombol. kemudian geser-geser sedemikian rupa dengan free transform (klik kanan>free transform) sehingga pas dengan ikon-ikon yang ada di bawahnya. 4. Kemudian masuk ke dalam tombol dengan doubleklik pada kotak. kemudian delete gambar kotak pada frame sebelumnya.

kemudian buat layer baru diatasnya. blok kemudian klik kanan>convert to keyframe. Memberikan actionscriptnya Logikanya ketika kita pindah halaman adalah sama dengan pindah dari satu frame ke frame lain dalam movieclip utama tersebut yang dapat dilakukan oleh user dengan mengklik sebuah tombol yang tentunya sudah kita beri script yaitu: apabila tombol home diklik maka movieclip utama akan pindah ke frame 1. sehingga pada layer ini isinya berbeda-beda untuk tiap frame. dan begitu seterusnya. jadi berikan nama yg khas untuk tiap movieclip yang berbeda. } //actionscript ini berarti jika tombol //dengan instance name ‘btn_jalmi’ //diklik (onPress=ketika ditekan) maka //movieclip berinstance name //‘mc_konten’ akan pindah . Jangan lupa untuk menuliskan actionscript pada frame di layer ‘ eksyen’. pada frame pertama supaya movieclip tidak berjalan sendiri. misalkan kita lihat untuk latihan ini pada frame 1 kita buat halaman home. frame 2 untuk halaman aboutme. Membuat movieclip utama Nah disini tempat movieclip yang akan ditampilkan. Movieclip ini disimpan di layer ‘mupiklip‘ dan berikan pula instance name-nya seperti pada tombol sebelumnya. apabila tombol aboutme diklik maka movieclip utama akan pindah ke frame 2 (yang tentu isinya halaman aboutme). 6. klik frame pada layer ‘eksyen‘ kemudian buka panel action dan ketikkan actionscript berikut. nantinya instance name akan dipakai pada actionscript. //misalkan untuk tombol aboutme //instance namenya adalah ‘btn_jalmi’ //kemudian instance name dari //movieclip utama adalah ‘mc_konten’ btn_jalmi. dan frame 3 berisi halaman kontak. seperti dapat dilihat pada latihan ini pertamatama buat kertas sebagai latar dari movieclip yang ada di semua frame pada movieclip tersebut. pada file latihan ini saya memberi instance name ‘mc_konten’.onPress=function(){ mc_konten. jangan lupa berikan action stop().gotoAndStop(2).5.

kadang kesalahan kecil seperti ini akan cukup merepotkan kita jika sudah membuat aplikasi yang kompleks. berikut contoh actionscript pada file latihan yang sudah dimodifikasi dengan beberapa efek tambahan: adapun efek-efek tambahan yang ada adalah: -ikon beranimasi jika dirollover maupun rollout -muncul balon teks ketika rollover -efek transisi pada perpindahan antar menu -dll Saya sengaja tidak memberikan langkah-langkahnya secara lengkap agar Anda mempelajari sendiri caranya dengan melihat dari file . . karena penulisan actionscript bersifat case-sensitive yang berarti kata ‘gotoAndStop’ akan dianggap berbeda dengan ‘goToAndStop.//ke frame 2.fla yang disediakan. Karena dengan mencoba sendiri akan menjadi lebih paham bahkan bisa juga mengembangkan teknik-teknik sendiri yang jauh lebih efektif daripada yang sekarang ini Saya buat. Catatan: jangan salah dalam penulisan huruf besar dan kecil. dalam hal ini //yang berisi halaman aboutme begitu pula untuk tombol-tombol lainnya. sama saja scriptnya hanya berbeda nama instance-nya dan frame tujuannya. Jangan lupa untuk selalu memberi masukan terhadap perbaikan-perbaikan aplikasi ini sehingga diharapkan untuk versi berikutnya bisa lebih baik lagi.

kemudian. bagi para pembajak artikel saya.note: bagi Anda yg sudah membaca artikel ini Saya persilakan untuk memberi comment di bawah. harap cantumkan juga link kesini! .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->