Media Interaktif dengan Flash #2

Seperti yang telah diceritakan pada tulisan Saya sebelumnya, berikut adalah langkah-langkah untuk membuat aplikasi flash dengan cara pertama.
Namun, sebelum memulai latihan ini ada baiknya jika Anda terlebih dahulu mempelajari apa yang akan kita buat dengan melihat file source .fla yang dapat diunduh
dari http://tinyurl.com/F4154LMAN-template-flash

1. Membuat layer-layer
fl01.jpg

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, simpan di atas layer lain

-> layer ‘bekgron’

tempatkan layer ini di paling bawah, karena ini adalah gambar background aplikasi kita

sebenarnya tidak menjadi masalah kalaupun kita buat semuanya di 1 layer hanya untuk memudahkan pengeditan nantinya, kita pisah-pisahkan

2. Membuat background

fl02.jpg

Pada latihan ini kita buat background yang sederhana saja yaitu dengan membuat garis abu-abu vertikal yang berjejer (buat dengan line tool terus copy-paste yg banyak) supaya ada teksturnya, jadi layar kita tidak terlalu putih blank.

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’. supaya tidak saling menimpa jadikan garis-garis menjadi group tersendiri (ctrl+g) dengan begitu akan lebih mudah diedit.

3. Membuat ikon-ikon

fl03.jpg

Pada aplikasi latihan ini, ikon-ikon yang ada [rumah, orang, surat, dan tanda belok] dibuat dengan menggunakan teknik tracing, caranya mudah yaitu dengan membuat garis-garis kerangka dari sebuah gambar bitmap yang ingin dibut ikonnya.

Tempatkan ikon-ikon tersebut pada layer ‘bekgron’ atau ‘mupiklip’ yang penting dia berada di atas background yang kita buat.

Berikut Saya contohkan tracing gambar gedung Labtek VI ITB:

1. gambar aslinya

fl04.jpg

2.kita buat garis-garis yg kita anggap perlu dengan line tool

fl05.jpg

3. finishing hasil dengan menebalkan bagian tepi, maka jadilah efek kartun gedung Labtek VI ITB

fl06.jpg

selamat mencoba…!

thanks to Andre 4 this great technique.

4. Membuat tombol-tombol

Kita hanya perlu membuat sebuah tombol, buat sebuah kotak>convert to symbol>button. Kemudian masuk ke dalam tombol dengan doubleklik pada kotak. kemudian klik kanan pada keyframe hit>pilih insert keyframe. kemudian delete gambar kotak pada frame sebelumnya. Sehingga akhirnya hanya area hit saja yang berisi gambar kotak tersebut. Tombol akan berwarna biru muda transparan yang menandakan area hit dari tombol tersebut.

Copy-paste tombol ini atau mudahnya drag saja langsung dari library, kemudian geser-geser sedemikian rupa dengan free transform (klik kanan>free transform) sehingga pas dengan ikon-ikon yang ada di bawahnya.

fl07.jpg

Kemudian berikan instance name pada masing-masing button. instance name diisikan di bagian properties dari button tersebut caranya: klik button yg mau diberikan instance name kemudian pilih panel properties.

Lihat contoh di bawah, tombol yang menutupi ikon orang saya beri instance name ‘btn_jalmi’. nama ini nanti akan dipakai ketika kita membuat actionscript, jadi silakan beri nama yang khas untuk tiap button.

fl08.jpg

5. Membuat movieclip utama

Nah disini tempat movieclip yang akan ditampilkan. seperti dapat dilihat pada latihan ini pertama-tama buat kertas sebagai latar dari movieclip yang ada di semua frame pada movieclip tersebut. kemudian buat layer baru diatasnya. blok kemudian klik kanan>convert to keyframe, sehingga pada layer ini isinya berbeda-beda untuk tiap frame. misalkan kita lihat untuk latihan ini pada frame 1 kita buat halaman home, frame 2 untuk halaman aboutme, dan frame 3 berisi halaman kontak. jangan lupa berikan action stop(); pada frame pertama supaya movieclip tidak berjalan sendiri.

Movieclip ini disimpan di layer ‘mupiklip‘ dan berikan pula instance name-nya seperti pada tombol sebelumnya. pada file latihan ini saya memberi instance name ‘mc_konten’, nantinya instance name akan dipakai pada actionscript, jadi berikan nama yg khas untuk tiap movieclip yang berbeda.

6. 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, apabila tombol aboutme diklik maka movieclip utama akan pindah ke frame 2 (yang tentu isinya halaman aboutme), dan begitu seterusnya.

Jangan lupa untuk menuliskan actionscript pada frame di layer ‘eksyen’. klik frame pada layer ‘eksyen‘ kemudian buka panel action dan ketikkan actionscript berikut.

//misalkan untuk tombol aboutme
//instance namenya adalah ‘btn_jalmi’
//kemudian instance name dari
//movieclip utama adalah ‘mc_konten’

btn_jalmi.onPress=function(){
mc_konten.gotoAndStop(2);
}

//actionscript ini berarti jika tombol
//dengan instance name ‘btn_jalmi’
//diklik (onPress=ketika ditekan) maka
//movieclip berinstance name
//‘mc_konten’ akan pindah
//ke frame 2, dalam hal ini
//yang berisi halaman aboutme

begitu pula untuk tombol-tombol lainnya, sama saja scriptnya hanya berbeda nama instance-nya dan frame tujuannya.

Catatan: jangan salah dalam penulisan huruf besar dan kecil, karena penulisan actionscript bersifat case-sensitive yang berarti kata ‘gotoAndStop’ akan dianggap berbeda dengan ‘goToAndStop, 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:

fl09.jpg

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 .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.

Jangan lupa untuk selalu memberi masukan terhadap perbaikan-perbaikan aplikasi ini sehingga diharapkan untuk versi berikutnya bisa lebih baik lagi.


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

Iklan

78 thoughts on “Media Interaktif dengan Flash #2

  1. @Mie
    Sama-sama, terima kasih diatas komentar-komentar yang telah saudara berikan

    @erwin
    wah… biar Saya tulis lewat blog aja 😀 Saya juga masih belajar… biasanya di internet banyak tutorial2nya

  2. bang… tulungin !! saya masih bingung dengan mupiklip itu??

    pas aku lihat di soure yang ada di lat 1, file mupi nya jadi banyak??? gimana caranya??

    maksudnya pas kita mau edit mupiklip itu edit nya dimana???

    contoh Mc_gulung, dan sebagainya itu??

    please help me.. contact ym : arayounk

    btw…..

    nice tutor n nice creative ideas..<– orang sunda baru makan roti!!

    nuhunn!!

  3. @esa
    :P.

    @madeinara
    1 frame emang bisa diisi macem2 movieclip… tinggal ubah aja semua objek di stage > insert to symbol > pilih movieclip
    mc_gulung itu nama movieclipnya (soalnya tiap bikin symbol mesti dikasi nama yg unik)

  4. @yumcatz
    haha.. 😀
    saya juga heran, koq pingbacknya telat… (padahal ini dibuatnya juni 2007)
    mungkin gara2 kemaren ku ngedit tulisan yg salah disini…

  5. Mau tanya sekalian, kalo buat Curiculum Vitae dengan Flash ada contohnya nggak?
    Kalo ada, kasih URL-nya ya?
    Makasih….lho

  6. salam kenal.. saya sangat butuh pengetahuan flash karena digunakan untuk pembelajran.. mohon bantuanya.. saya injin copy artikelnya..

  7. Wuiiss ini dah nyang gwa cari2 ? gwa mo blajar lebih banyak lagi ni mas ? Kerenz bangeetZ… bzok2 Update lagi yach ?

  8. @hengki
    nah ini apa? 😕

    @ipotes
    mangga silakan, jgn lupa untuk mencantumkan sumbernya juga ya..

    @wibisono
    sama2 mas

    @Cana
    Wuizz ok2, IA besok2 diupdate lagi..

    @Fazli Achmad Mauludi
    😕 hmm, masih kurang detail ya..

    @ilham
    T.H.X BGT dah…

    @rapid boy
    sami2 mas rapid

  9. salman bantuin 9w donk bkin CD Interaktif bwt kampuz 9w…..????
    Mohon bantuannya yach…(^_^)

  10. waduh….
    bgus bget materinya…
    pas bgt….
    awak lagi ada tugas semester pulak itu…
    thanks yowww…

  11. @jon
    weh tw aja saya pake sopwer asli bajakan :mrgreen:

    @harry
    Terimakasih banyak juga dah ngisi komen

    @sheilla
    kampuz mana boz?

    @indy
    yowww juga, asal materinya jgn diaku aje ye.. hehe

  12. oooooooooooooom leh tanya lw dapetin flash #2 duariii man oooom ???????????????????leh mt alamatnya wat donlot giiiiiiiiiituuuuu ooooom, please !!!!! oooom ntar kirim yau keee imail saayyyya alamatnya kkkkkkkkkkkkkeh bye bye bye …..

  13. @Mr.Z
    gpp, wajar, saya juga waktu pertama kali belajar bingungnya luar biasa 😯

    @atnan
    euweuh om-om didieu mah.. 👿
    kl mw tw alamatnya, coba baca lagi dari awal sampai akhir yg teliti okeh

  14. mantap mennn!!
    numpang download yaaa
    ada pertanyaan nihhh
    gimna ya kalok menyatukan scene 1 dgn scene 2 dalam satu scene?//
    thanks

  15. makasih banyak ilmunya mas..
    saya masih kuliah smester 5,,,insyaallah 2 bulan lagi mau ngambil skripsi…
    rencananya mau bikin ebook pelajaran sejarah untuk anak sma pake flash….

  16. kang buat tombol agr bza gerak gmana tuchh…..?

    sy teh udh nyobain tapi stelah di hpuz gmbar pada frame sbelumnya gambar di keyframe hit nya ko ga rubahnya…….
    “kmha nya kang “

  17. Bagus bgtz sgt ngbantu q ngrjaen tugaz bkin media interaktif. Thankx bgtz y maz
    tP q bgng ne gmn crx msukin script d bag. actionscript?!?!?! Q bngng ne maz,..

    HELp mE Please..,,,..!!!!!!!!

  18. makasih tutorialnya mas…
    sangat membantu,,,,,
    saya sedang mengerjakan tugas kantor dengan flash, saya disuruh buat peta interaktif untuk kantor saya, saya bekerja di instansi pemda ntb. mohon bantuan untuk cara membuat peta interaktif dengan flash…makaasih

  19. Aku masih bingung…….n gak link utk download flashnya ya??? trus kalo ikon nya pake gambar yg udah jd n d CoPas apa bisa???

  20. bang F4154LMAN,
    q mw tnya nih, kok kebanyakan tutorial ntu kalo ngetik scriptnya ga di objectnya. .
    kebanyakan caranya mirip kaya’ di tutorial ini,.
    sedangkan saya kebiasaan ngetik script di objectnya,.
    apa ada manfaat atau kegunaan khusus dalam penulisan script ntu ?

    mohon bimbingannya,.
    mf, sy msih newbie,.
    salam kenal
    ^_^

  21. wah… tengkyu perimas nih pelajarannya… tengkyu,,, tengkyu,,,,!!!! sya berharap bisa banyak dapet artikel mengenai flash di sini… kebetulan skripsi saya mengenai pembelajaran dengan multimedia interaktif… terima kasih banyak… !!!

  22. waaaahh,, keren..
    makasih bwt informasinya..
    selalu update info nya ya..
    ditunggu.
    🙂

  23. terimakasih mas faisal,dengan tutorial yang mas buat saya bisa membuat tugas flash kuliah saya

  24. Thanks to agan Faisal yg slalu menshare ilmunya tnpa dipungut biaya..hehehehehe ditunggu lagi ya gan karyanya 😀

  25. gan, itu yang dipake buat bikin gambar kartun gedungnya pake software apa ya? 😀
    jadi kepengen buat yang lain2, tolong dikasih tau ya gan+tutornya

  26. Klo ga salah ini dah pernah gw liat di video tutor Alan Becker ( The Master Of Stickfigure ) dia bikin ikon gerak – gerak semisal google chrome, mozilla firefox pake teknik tracing. Pake adobe flash tentunya.

  27. asslm. salam kenal. saya mw tanya. gimana actionscriptnya klo pada menu utama yg filenya berbentuk exe ingin memanggil file yg berbentuk swf, tapi posisinya file yg berbentuk swf tsb berada dalam sebuah folder khusus yg berbeda dari file menu utama.
    atas penjelasanny saya ucapkan terima kasih
    wassalam.

  28. makasih mas tutorialnya
    saya sudah ikuti langkah2nya dan berhasil cuman tolong pencerahannya mas pada movieclip_gulung bagaimana membuatnya dan membuatnya berfungsi

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s