Macromedia flash

Apa itu Flash?

Sejak diperkenalkan pada tahun 1996, Flash atau Macromedia Flash menjadi sangat populer dan langsung mendapat tempat di hati masyarakat dunia web karena dapat membuat menampilkan animasi dan interaksi di web. Tetapi sejak bulan Desember 2005, perusahaan Macromedia dibeli oleh Adobe dan kini berganti nama menjadi Adobe Flash sejak versi 9 atau CS3.

Demo Karya Flash
Di mana saya bisa mendapatkan hasil karya yang dibuat dengan Flash? Di Babaflash.com sendiri banyak hasil karya orang Indonesia yang dibuat dengan Flash seperti:

• Ecards atau Kartu Ucapan Elektronik
• Coolsites atau Situs Bagus
• Game atau Permainan
• Animasi Kartun

Kelebihan dan Kemampuan Flash

• Merupakan teknologi animasi web yang paling populer saat ini sehingga banyak didukung oleh berbagai pihak.
• Ukuran file yang kecil dengan kualitas yang baik
• Kebutuhan Hardware yang tidak tinggi
• Dapat membuat website, cd-interaktif, animasi web, animasi kartun, kartu elektronik, iklan TV, banner di web, presentasi cantik, membuat permainan (game), aplikasi web dan handphone.
• Dapat ditampilkan di banyak media seperti Web, CD-ROM, VCD, DVD, Televisi, Handphone dan PDA.

Teknologi Flash
Flash sekarang bukan hanya sebagai software saja dengan nama Adobe Flash, tetapi juga merupakan suatu teknologi animasi di web. Jadi untuk membuat animasi web dengan format Flash (SWF) kita tidak harus menggunakan software Adobe Flash, tetapi bisa menggunakan software lain seperti SwishMax, Vecta 3D, Swift 3D, Amara, Kool Moves dan masih banyak lagi.

Versi Macromedia atau Adobe Flash

• Macromedia Flash 2 (1997)
• Macromedia Flash 3 (1998)
• Macromedia Flash 4 (1999)
• Macromedia Flash 5 (2000)
• Macromedia Flash 6 (2002) atau Macromedia Flash MX
• Macromedia Flash 7 (2003) atau Macromedia Flash MX 2004
• Macromedia Flash 8 (2005)
• Adobe Flash 9 (2007) atau Adobe Flash CS3

Anda tidak usah bingung untuk menggunakan versi yang mana, kalau hanya untuk keperluan menggambar atau animasi, Flash versi 4 atau 5 pun lebih dari cukup kalau komputer Anda Pentium 3. Jadi silahkan menggunakan versi yang tidak memberatkan komputer Anda, tidak usah memaksa harus menggunakan versi terbaru.

Kini adalah suatu kebutuhan atau keharusan (seperti menulis) untuk belajar suatu software perkantoran. Minimal bisa mengoperasikan produk Microsoft seperti Windows, Microsoft Word, Excel dan Power Point. Atau produk Open Source seperti Linux, Star Office.

Jadi setelah itu, silahkan memilih Flash untuk pilihan selanjutnya :)

Lebih lengkapnya di http://en.wikipedia.org/wiki/Adobe_Flash

Dasar Actionscript Flash (Bag. 1)

Actionscript adalah bahasa pemrograman yang ada di Flash. Jadi selain bisa menggambar dan animasi, Flash juga mempunyai kemampuan untuk pemrograman.
Jadi sebelum mendownload eBook atau Tutorial ini, pastikan Anda sudah mempunyai dasar menggambar dan animasi Flash. Bila belum, silahkan terlebih dahulu mempelajarinya.

[ Klik di Sini untuk mempelajari Dasar Animasi Flash ]

Kalau sudah mempunyai dasar menggambar dan animasi Flash. Silahkan lanjut ke bawah...

-oO0-

Berikut ini adalah Preview Bab 1 tentang Actionscript dari buku "123 Tip & Trik Actionscript Flash MX 2004" karangan Zeembry.

Sengaja tidak dipublish semuanya karena penulis masih terikat kontrak dengan Penerbit. Dan buku tersebut masih beredar di toko-toko buku.

Semoga dengan sedikit tutorial di bawah ini bisa membuka wawasan pemula tentang Actionscript yang kalau dipelajari dan dipahami dengan benar tidak begitu sulit. Dan setelah itu bisa didiskusikan di forum dan milis Babaflash supaya pengetahuan ini bisa berkembang.

[ Download Ebook ]

Dasar Animasi Flash (Bag. 1)

Tutorial ini akan mengawali Anda untuk mempelajari Flash. Konsep dan teknik dasar dijelaskan secara mendetail sehingga dapat dengan mudah dimengerti, dicoba dan dipahami.

Tutorial ini menggunakan Macromedia Flash MX. Tetapi tidak menutup kemungkinan Anda juga bisa menggunakan Macromedia Flash MX 2004 karena konsepnya hampir sama.

Pembahasan dalam Tutorial ini adalah:
- Lingkungan Flash MX
- Shape, Stroke, Fill & Object
- Property Inspector
- Arrow & Sub Selection Tool
- Merubah Objek menjadi Symbol
- Melihat Symbol di Library
- Membuat Symbol Baru
- Merubah Master Symbol
- Merubah Instance
- Animasi
- Insert Blank Keyframe
- Insert Keyframe
- Motion Tweening
- Membuat Bola Memantul
- Movieclip

Tutorial ini dalam bentuk PDF yang dikompresi dengan format ZIP. Jadi Anda harus mempunyai Winzip untuk membuka kompresi tersebut dan Adobe Acrobat Reader untuk melihat tutorialnya.

BELAJAR MACROMEDIA FLASH UNTUK PEMULA

Kali ini kita akan membahas mengenai Animasi sederhana di macromedia flash. Kebetulan di komputer saya yang terinstal adalah macromedia flash 8 nih. Anda bisa mengikuti langkah-langkahnya sebagai berikut.

1. Ubahlah layer 1 dengan nama Bola. caranya klik 2 kali pada nama layer. tampilannya adalah sebagai berikut
2. Selanjutnya, pada ToolBox, pilih Oval Tool
3. Drag and Drop, sesuai dengan keinginan anda pada area kerja. anda perhatikan, pada Layer Bola pada frame 1, ada bulatan hitam. Untuk selanjutnya, ini disebut dengan Keyframe. artinya pada frame 1 terdapat objek. kali ini pada frame 1, objeknya adalah Oval Tool tadi.
4. Selanjutnya, agar objek lingkaran (bola) tersebut dapat dianimasikan, anda harus mengubahnya kedalam bentuk simbol. Di flash, obyek dapat di ubah ke dalam 3 macam bentuk simbol yaitu Movie Clip, Button, dan Graphic. Untuk kali ini, obyek lingkaran kita ubah menjadi Movie Clip. klik kanan pada objek lingkaran >> pilih convert to symbol
5. Selanjutnya akan ada kotak dialog seperti dibawah ini. Berikan nama untuk simbol yang akan dibuat, lalu pilih Movie Clip, Setelah itu kliklah tombol OK
6. Saat ini objek lingkaran sudah bersimbol Movie Clip. lalu kliklah frame 10 Lalu klik kanan pada frame tersebut lalu klik Insert keyframe
7. selanjutnya, klik frame 10 terlebih dahulu, lalu seret (drag) lingkaran ke sebelah kanan
8. kembali klik frame 1, lalu klik kanan >> pilih Create Motion
9. Sehingga tampilan akhir pada frame adalah sebagai berikut

Anda bisa mencoba latihan ini dengan cara menekan tombol CTRL+ENTER atau dengan cara klik menu control >>play 

 

Membuat Slide Presentasi dengan Macromedia Flash

Beberapa hari ini saya mengajar TIK kelas X dengan materi membuat slide presentasi dengan Macromedia Flash. Kebanyakan dari mereka cukup merasakan betapa sulitnya membuat slide presentasi dengan flash. Memang ada document templates yang disediakan oleh flash untuk membuat slide presentasi, namun siswa saya suruh untuk mencoba membuat slide sendiri sesuai dengan kreativitas mereka. Manfaat dari belajar ini adalah melatih siswa untuk mengontrol objek, terutama movie clip, belajar action script dan dasar membuat profile pribadi dll.
Berbeda dengan Power Point, ketika kita membuat slide di Macromedia Flash, maka kita harus membuat sendiri animasi-animasinya, tombol-tombolnya dan lain-lain. Berikut ini saya jelaskan kembali teknik dasar membuat slide presentasi dengan flash.

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:

 Selamat Mencoba !!!

Membuat Animasi Ombak

1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam


2. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none

3. Klik rectangle tool   untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.



4. Klik kanan di frame 15 lalu  klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri
Gambarnya :



7. Klik di frame 1  lalu pilih tween shape

gambarnya


Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>



8. Klik Di frame 15 pilih tween shape


9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60


10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:

Selamat mencoba...(@_@)

Jika semua sudah selesai tinggal kita menekan ctrl + enter  dan nikmati hasilnya

Animasi Shine - Mobil Mengkilap Bercahaya

Langkah - Langkahnya:

1. Masukkan (import) gambar ke dalam stage


misalnya gambar mobil seperti gambar di bawah ini



2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height)



3. Ganti nama  layer1 menjadi mobil


4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.


5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini.



6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini


7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini


8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi



9. Masih di layer animasi kill icon Pen tool


10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.



11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask




12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe



13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween





14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan dari gambar mobil, seperti gambar di bawah ini


15. Tekan ctrl + enter untuk melihat hasilnya…
Preview in image mode


Preview in Animation Mode

Cling.. Cling.. Mobil Bersinar Mengkilap ^_^

Membuat Animasi Sederhana dengan Permainan Keyframe

Lalu pilih new... Flash Document

Langkah 2
Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)

Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK

Langkah 3

1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066

Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"


Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi

OK tekan sebanyak 5 X
Hasilnya:



lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage


Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH

tutorial Flash
OK!!!

Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
Hasilnya:

 

 

Mengganti Kursor Mouse di Flash

Kali ini kita akan membahas cara mengganti kursor/cursor mouse di flash. Seperti yang kita ketahui bersama biasanya kursor default pada komputer adalah berbentuk arah panah.

Namun di Adobe Flash anda dapat menggantinya sesuai dengan keinginan anda, semua file gambar dapat di import kok jadi gag usa hawatir, hanya dengan sedikit action script jadi dech mouse yang anda inginkan...

Langkah-langkahnya sebagai berikut :

Buka Program Adobe Flash anda, bila menggunakan Adobe Flash CS3 pilih Action Script 2.0.

1) Klik File > Import > Import to Library...

2) Pilihlah gambar yang akan dijadikan kursor mouse lalu Open.

3) Drag gambar yang ada di jendela Library ke canvas.
Bila jendela library tidak muncul di window flash anda, anda cukup menekan Ctrl + L.

4) Klik kanan pada Gambar lalu pilih Convert to Symbol....
5) Kotak dialog Convert to Symbol akan muncul, tuliskan sembarang nama pada bagian Name.
misalx : "dcc" lalu OK.
Lihat Gambar dibawah :


6) Klik gambar yang ada di canvas lalu tekan F9 untuk memunculkan window Action.
7) Copy Script dibawah ini ke dalam window Action.

onClipEvent (enterFrame) {
//kursor mouse asli akan disembunyikan
Mouse.hide();
//mengganti kursor mouse dengan movieclip ini
startDrag(this, true);
}

Lihat Gambar dibawah :

8) Lihat Hasil kerja anda dengan menekan Ctrl+Enter.

9) Untuk menjadikan file SWF pilih File> Export> Export Movie jangan lupa Save as type (Flash Movie(*.swf)).

10). Semoga Berhasil...lihat hasilnya di bawah ini...

 

Cara Membuat Animasi Lebah Terbang dengan Macromedia Flash

Tutorial ini saya buat untuk siswa saya yang ikut MUSE, semoga dengan tutorial ini bisa membantu belajar membuat animasi dengan macromedia flash. Materi ini baru saya berikan nanti setelah materi 2 selesai.

OK disini saya menggunakan 2 software, yaitu untuk menggambar lebah saya gunakan coreldraw 11 dan untuk animasi menggunakan macromedia flash MX Professional 2004 versi 7.0.1. Pertama gambar lebah dengan coreldraw, buat 3 gerakan lebah yang berbeda. Setelah itu export masing-masing gambar tadi.

gambar lebah 3 gerakan

Untuk export tiap-tiap gambar lebah tadi saya juga masih bingung harus memilih format apa, setelah mencoba-coba akhirnya saya memutuskan untuk mengexport tiap gambar tadi dengan format EPS (Encapsulated PostScript), mungkin nanti ada yang bisa memberikan masukan atau solusi kepada saya format apa yang tepat biar gambar tidak berubah sesuai aslinya pada saat masih di coreldraw.

Buka Macromedia Flash. Kemudian dari menu bar pilih insert, new symbol. Pada option nama saya beri nama “lebah terbang” dan behaviournya dipilih yang “movie clip”. Klik OK. Nah setelah di klik OK sekarang kita bekerja pada area symbol yang baru kita buat tadi. Langkah selanjutnya kita tinggal mengimport lebah yang sudah kita export dari coreldraw tadi ke library.

Dari menu bar pilih File kemudian pilih import, klik yang import to library. Kalau yang dipilih import to stage maka gambar nanti langsung tampil di stage. Pilih file gambar lebah 1.eps kemudian klik open, setelah itu akan tampil jendela option, pada “convert pages to” pilih keyframe kemudian klik OK. Lakukan dengan cara yang sama pada lebah2.eps dan lebah3.eps. Buka librarynya dengan cara klik windows pada menu bar kemudian pilih library, maka akan mumcul jendela library, dan gambar tadi berada di dalam library tadi.

Ok sekarang tinggal memasukkan lebah tadi ke frame di timeline. Klik frame pertama pada timeline, dari library klik gambar lebah1 kemudian klik dan drag ke stage. Setelah itu pada timeline klik kanan frame 2 pilih insert blank keyframe, kemudian dari library drag gambar lebah2 ke stage. Sekarang letakkan posisi lebah2 sama persis di posisi lebah1, tentunya tidak akan terlihat gambar lebah1 nya karena letaknya pada frame 1, untuk itu pada timeline klik “ Onion Skin” untuk menampilkan bayangan gambar dari lebah1 sehingga kita bisa menempatkan posisi lebah2 tepat pada lebah1. Dengan cara yang sama seperti diatas, lakukan pada gambar lebah3. Kalao sudah sekarang di timeline sudah ada tiga buah frame, tekan enter untuk melihat hasilnya.

masukan gambar lebah1 di frame 1 pada timeline

insert blank keyframe di frame 2

masukan gambar lebah2 di frame 2

Onion Skin

OK kalau sudah sekarang kembali ke scene awal (karena tadi kita bekerja pada movie clip) dengan cara klik scene di atas timeline. Tahap akhir tinggal memasukkan animasi yang sudah kita buat tadi (movie clip). Klik pada frame 1, dari library klik movie clip yang tadu kita buat dengan nama “lebah terbang” kemudian drag ke stage (posisikan diluar stage sebelah kiri, karena ceritanya nanti akan kita buat lebah tadi terbang dari kiri ke kanan). Kalau sudah sekarang pada timeline klik kanan pada frame 45 kemudian pilih insert keyframe. Lalu klik kanan diantara frame 1 – frame 45 pilih “create motion tween”. Klik pada frame terakhir yaitu di frame 45, lalu klik lebah tadi, tekan shift dan drag/geser lebah ke arah kanan sampai keluar stage.

motion tween

Nah akhirya selesai sudah, sekarang tes movie dengan cara menekan ctrl+enter pada keyboard atau dari menubar pilih control pilih test movie. Lebah akan terbang dari arah kiri ke kanan. Selamat mencoba, saya yakin tutorial ini masih jauh dari sempurna jadi saran dari para animator yang sudah punya jam terbang banyak sangat diharapkan.