Modul Tutorial Flash MX

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS

TTrraaiinniinngg

Target: Pemula

Trainer :

Dewanto Harjunowibowo

Pendidikan Fisika PMIPA Universitas Sebelas Maret

2014


PENGANTAR

Modul ini dibuat sedemikian rupa sehingga diharapkan para pengguna (user)

bisa dengan lebih mudah mengikuti bagaimana belajar dengan menggunakan software Flash MX. Modul ini memberikan urutan cara pembuatan bagian-bagian presentasi seperti cara pembuatan movieClip untuk animasi. Satu saran dari kami adalah Cermatilah tiap-tiap langkah yang Anda tempuh untuk mengerti cara pembuatan suatu produk movie karena tata cara tersebut akan digunakan sama bila mempunyai fungsi simbol yang serupa hanya saja dengan batasan kekreatifitasan Anda sendiri. Jangan lupa simpan pekerjaan Anda sewaktu-waktu agar AMAN. Selamat menikmati! SHAPE TWEEN Menganimasikan/menggerakkan benda (shape) berubah bentuk menjadi bentuk yang lain (dari bola ke kotak, dan bisa yang lain). Pada Shape Tween ini properties obyek adalah shape. Langkah: 1. Buat bulatan/lingkaran dengan oval tool di stage.

Klik Oval Tool klik di stage, tahan, geser kanan/kiri hingga berbentuk lingkaran, lepaskan.

Gambar 1. Membuat lingkaran.

2. Seleksi lingkaran tersebut Klik Arrow Tool Klik 2x pada obyek lingkaran

3. Klik kanan di frame 15 klik Insert Keyframe

1


Frame 15 4. Hapus lingkaran ganti dengan kotak

Gambar 2. Menduplikat obyek dengan Insert Keyframe.

Gambar 3. Mengganti obyek lingkaran dengan kotak

5. Klik di frame antara frame 1 – 15 buka panel Properties sebelah bawah stage

ganti option Tween dengan Shape. Gambar 4. Memberi aksi Tween Shape

2

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS 6. Jalankan movie Anda, tekan Ctrl+Enter pada keyboard Sekarang Anda dapatkan movie dengan sebuah lingkaran berubah menjadi kotak, cobalah mengubah bentuk lain, misalnya huruf yang berubah-ubah gunakan falisilas Break Apart (ctrl+b) MOTION TWEEN Menganimasikan/menggerakkan benda (Movie Clip). Pada Motion Tween, properties obyek harus berupa “graphic atau movie clip”. Langkah: 1. Buka dokumen Flash baru (File > New). Buat lingkaran lalu ubah menjadi Movie

Clip. Klik Oval Tool di stage, klik, tahan, geser, lepaskan klik 2x lingkaran klik kanan lingkaran klik Convert to Symbol beri nama “bola” pilih movie clip Ok.

2. Buat gerakan parabola Klik kanan frame 20 Insert Keyframe geser bola ke posisi puncak parabola

Gambar 5. Mengonversi obyek ke simbol “movie clip”.

Gambar 6. mengkopi obyek bola

3


Gambar 7. Memberi aksi Tween Motion

3. Klik kanan frame 40 Insert Keyframe geser bola ke posisi akhir parabola Berikan aksi Tween Motion pada bagian Properties. 4. Jalankan movie Anda, tekan Ctrl+Enter pada keyboard Sekarang Anda dapatkan animasi berbentuk parabola dari sebuah bola, meskipun masih kasar lintasannya. Cobalah menggunakan lintasan lain dengan fasilitas Guide Layer. Jangan lupa simpan pekerjaan Anda. 5. Lanjutkan latihan sebelumnya. Klik titik di bawah gambar mata pada Timeline agar latihan sebelumnya tak kelihatan. Buat bola kecil seperti langkah gambar 5, pada layer baru. Perhatikan! Buatlah Insert Keyframe pada frame ke 40 (untuk keperluan lain bisa Anda ganti).

Gambar 8. Mengopi bola dengan Insert Keyframe

4

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS 6. Tekan Guide Layer lalu buat oval di tengah stage. Klik tengah oval tersebut lalu tekan delete. 7. Beri garis seperti gambar 10 dengan fitur line tool. Tekan Shift, tahan lalu klik sekali pada garis lengkung bagian bawah

Klik di tengah, lalu tekan delete.

Gambar 9. Membuat lintasan dari lingkaran

dan garis lalu delete. 8. Anda akan dapatkan lintasan parabola. Ubahlah ukurannya dengan mengklik parabola tersebut lalu mengklik Free Transform Tool.

Gambar 10. Membuat lintasan parabola

Gambar 11. Mengubah ukuran parabola

5

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS 9. Klik frame 1 bola, pindahkan bola ke ujung kiri parabola hingga titik center tepat pada ujung parabola. Klik frame terakhir, geser bola ke ujung parabola kanan hingga titik center tepat di ujung. Lalu berikan aksi Motion Tween di frame tengah. Tes movie (ctrl + enter). MEMBUAT TOMBOL UNTUK NAVIGASI Tombol dipakai untuk melakukan eksekusi suatu perintah yang kita berikan. 1. Lanjutkan latihan sebelumnya. Tambahkan layer baru (Add layer) 2. Buat lingkaran kecil di stage, beri warna biru. Klik dua kali pada lingkaran tersebut dan klik kanan. 3. Pada dialog yang terbuka, klik convert to Symbol.

4. Beri nama bola, centang Button, tekan ok. 5. Pada lingkaran yang telah menjadi tombol di stage, klik dua kali untuk mengeditnya. Maka muncullah tampilan berikut: 6. Pada frame di bawah Over, copy lingkaran dengan meng-klik kanan dan pilih insert Keyframe. Lalu ubah warna biru menjadi merah. Lakukan hal serupa pada frame di bahaw Down, dan beri warna hitam. Setelah itu klik Scene 1, untuk kembali ke stage awal. Simpan pekerjaan Anda. 7. Tes movie (ctrl+enter). Cobalah klik pada tombol yang Anda buat, perhatikan yang terjadi.

Gambar 12. Menempatkan bola ke ujung-ujung parabola

6

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS ACTIONSCRIPT Memberi perintah pada tombol yang Anda buat untuk melakukan sesuatu. 1. Klik tombol yang sudah Anda buat pada latihan sebelumnya. Seleksi dialog Action. 2. Tuliskan actionscript berikut: on (release) { perintah saat tombol dilepaskan maka stop () ; hentikan semua animasi yang sedang berjalan } 3. Buatlah tulisan dan tiga tombol seperti gambar berikut (gunakan copy paste) 4. Isikan actionscript pada tombol play: on (release) { perintah saat tombol dilepaskan maka play () ; mainkan semua animasi yang sedang berjalan } 5. Isikan actionscript pada tombol gotoAndplay:

on (release) { perintah saat tombol dilepaskan maka gotoAndPlay (35) ; melompat ke frame 35 dan mainkan semua

animasi yang sedang berjalan } 6. Tes movie dan cobalah tiap-tiap tombol yang Anda buat. MENAMBAHKAN SUARA Pada sesion ini kita akan mencoba menambahkan sound/suara pada project. 1. Pilih File > Import > Import to Library. Cari dan pilih jenis musik yang Anda suka. 2. Buka Library (tekan F11). Library adalah tempat untuk menyimpan berbagai simbol dan aset Flash yang kita gunakan dalam project. 3. Pada timeline utama buat layer baru dengan nama “suara”.

7


4. Buat keyframe di frame ke 2 pada layer suara. Lalu drag and drop musik yang Anda pilih tadi di Library ke Stage. Gambar grafik suara akan muncul di timeline. Pada panel Properties ubah repeat menjadi 3. Hal ini mengakibatkan suara akan diulang terus menerus sampai 3 kali. 5. Seleksi frame 1 di layer action. Buka Action panel. Global Function > Timeline Control >stopAllSounds. Action ini akan mengakibatkan suara berhenti apabila playhead movie kembali ke frame 1. Hal ini bertujuan agar suara tidak bertumpuk.

6. Lakukan test Movie. MEMBUAT SCROLLING TEXT 1. Tambahkan layer baru dari latihan sebelumnya. Buat kotak teks secukupnya di dalam stage dengan Properties : Dynamic Text, Multiline, Var isikan ‘teks’. 2. Anda akan melihat kotak putih kecil yang disebut handle di kotak teks yang baru Anda buat tadi. 3. Ubahlah warna handle tersebut dengan menekan tombol SHIFT sembari mengklik ganda handle tersebut hingga berubah hitam, tanda teks bisa di scroll. 4. Silahkan isi tulisan sebanyak yang Anda mau. Lalu ambil tombol dari library (F11). Buat 2 tombol lihat gambar.

8

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS 5. Seleksi tombol atas dan isikan actionscript berikut:

on (press) { pressing = true; perubahan = -1; }

6. Seleksi tombol bawah dan isikan actionscript berikut:

on (press) { pressing = true; perubahan = 1; }

7. Seleksi kedua tombol dengan menekan tombol SHIFT sambil mengklik kedua tombol tersebut. Setelah terseleksi keduanya, klik kanan pada salah satu tombol dan pilih convert to Symbol dan pilih movieClip dan klik OK. 8. Buka dialog Action dan isikan:

onClipEvent (enterFrame) { if (pressing == true) { _root.teks.scroll = _root.teks.scroll+perubahan; } }

9. Tes Movie. Tekanlah tombol scroll yang baru saja Anda buat. Anda akan mendapatkan teks yang bergerak ke atas atau ke bawah dalam sekali tekan. Sekarang Anda akan membuat teks bergerak ke atas atau ke bawah satu baris tiap kali menekan tombol. 10. Actionscript pada langkah ke 5 diganti:

on (release){ _root.teks.scroll=_root.teks.scroll-1; }

11. Actionscript pada langkah ke 6 diganti:

on (release){ _root.teks.scroll=_root.teks.scroll+1; }

12. Actionscrip langkah ke 8, dihapus. Kemudian tes movie. MEMPUBLISH FLASH Anda akan berlatih membuat file application dari file animasi flash yang telah Anda simpan dan diberi nama. 1. Pada file fla yakni file animasi yang telah Anda kerjakan, buka File>Publish Setting maka muncullah dialog berikut:

9

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS 2. Centang seperti tampak pada gambar atas sebelah kanan, lalu klik Publish dan OK. 3. Silahkan buka folder yang terdapat file flash Anda tadi yang berekstensi exe. MEMBUAT AUTORUN CD Anda akan membuat CD yang secara otomatis akan menampilkan proyek animasi dalam CD setelah dimasukkan ke dalam CDROM. 1. Setelah dipublish ke exe, buka notepad pada windows (start>accessories>notepad) 2. Tuliskan skrip berikut

[AUTORUN] OPEN=NAMAFILE.EXE

3. Simpan file di folder yang sama dengan file exe Anda (File>save as) 4. Ganti Save as type dengan All files 5. Beri nama autorun.inf lalu SAVE. 6. Burning CD yang berisikan file exe dan swf yang digunakan serta autorun.inf tadi. BEBERAPA CONTOH PROJECT KECIL DAN SEDERHANA MEMBUAT KONVERSI CELCIUS KE FAHRENHEIT 1. Buat file movie Flash baru. 2. Buat teks statis dan input serta dynamic seperti gambar berikut. 3. Seleksi tombol dan beri action berikut:

on (release) { fahrenheit=((9/5)*celcius)+32; }

4. Tes movie

Static text Input text+border+var=celcius Dynamic text+border+var=fahrenheit

10

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS MEMBUAT GARIS DENGAN ACTIONSCRIPT Tutorial ini bertujuan untuk membuat garis dari satu koordinat ke koordinat lain. Anda dapat menggunakannya untuk membuat grafik atau yang lain dengan metode ini. 1. Buat file movie Flash baru. 2. Seleksi frame 1 dan buka Action Panel. Anda perlu membuat movie klip untuk menggambar garis dengan action createEmptyMovieClip.

3. Ketik script berikut untuk membuat movie klip secara otomatis

_root.createEmptyMovieClip (”sgtg”,1); 4. Buat karakter garis

_root.sgtg.lineStyle(5,0xff00ff,100); 5. Tentukan koordinat awal

_root.sgtg.moveTo(100,100); 6. Tentukan koordinat akhir

_root.sgtg.lineTo(100,200); 7. Ctrl+Enter Sebagai latihan, buat segitiga dan persegi dengan metode tersebut (tentukan koordinat yang akan dihubungkan terlebih dahulu). MEMBUAT LINGKARAN Lingkaran maupun garis lengkung dapat menggunakan perintah curveTo. Formatnya curveTo (X, Y, anchorX, anchorY). 1. Buat file movie Flash baru. 2. Seleksi frame 1 dan buka Action Panel. Anda perlu membuat movie klip untuk tujuan ini seperti tutorial garis. Ketikkan script berikut:

_root.createEmptyMovieClip("lingkaran",1); _root.lingkaran.lineStyle(5,0xff00ff,100); _root.lingkaran.moveTo(100,100); _root.lingkaran.curveTo(100,200,200,200);

11


Sebagai Latihan, buat lingkaran dengan menambahkan script:

_root.lingkaran.curveTo(300,200,300,100); _root.lingkaran.curveTo(300,0,200,0); _root.lingkaran.curveTo(100,0,100,100);

MEMBUAT GARIS YANG FLEKSIBEL Seringkali dalam melakukan analisa grafik praktikan disulitkan pada pemilihan titik-titik untuk mendapatkan garis yang akan menghasilkan perhitungan grafik yang baik. Untuk itu dalam simulasi akan sangat berguna jika penentuan garis pada grafik dapat berubah-ubah. 1. Buat sebuah bola kecil dan ubah menjadi Button dengan nama bola. Konversi lagi menjadi movie clip dan diberi nama bola1. 2. Klik dua kali pada movie clip bola1 untuk masuk pada mode Edit symbol. Seleksi obyek tombol bola dan berikan script berikut:

on(press){ startDrag(this,true); } on(release){ stopDrag(); }

3. Klik scene 1 agar keluar dari mode edit symbol. Tekan F11 untuk menampilkan Library. Klik movie klip bola1 dan taruh di stage. Beri nama bola2. Klik kanan frame 2, pilih Insert Frame.

4. Tambah Layer 2, seleksi frame 1, klik kanan pilih Insert Blank Keyframe dan buka Action Panel untuk menuliskan script berikut:

_root.createEmptyMovieClip("myLine",1); _root.myLine.lineStyle(5,0x0000ff,100); _root.myLine.moveTo(_root.bola1._x,_root.bola1._y); _root.myLine.lineTo(_root.bola2._x,_root.bola2._y);

5. Klik kanan frame 2. Berikan script: gotoAndPlay(1); 6. Ctrl+Enter.

12

Dewanto Harjunowibowo, M.Sc. PFisika PMIPA UNS MEMBUAT BENDA BERGERAK MELINGKAR 1. Buat film movie Flash baru. 2. Buat bola dalam instance movie klip. 3. Seleksi bola tersebut dan berikan script berikut untuk inisiasi awalnya:

onClipEvent(load){ centerX=275; centerY=200; radius=100; derajat=0; }

4. Rotasikan dengan script berikut: onClipEvent(enterFrame){ derajat=derajat+5; radian=derajat*(Math.PI/180); OA=radius*Math.cos(radian); OB=radius*Math.sin(radian); this._x=centerX+OA; this._y=centerY+OB; }

5. Ctrl+Enter Sebagai latihan, buat parameter-parameter nya sebagai masukan menggunakan text input. MEMBUAT TIMER UNTUK SIMULASI Timer disini adalah waktu yang diperoleh dari setting waktu di PC kita. Untuk simulasi, akan lebih mudah melakukan perhitungan dengan satuan detik, sehingga total waktu yang diperoleh akan ditetapkan/dikonversi ke satuan detik. 1. Buat parameter-parameter seperti pada gambar. Pastikan kotak kosong yang dibuat dari Text tool berproperties sebagai Dynamic text kecuali untuk kotak percepatan yang berproperties input text. 2. Isikan var dari waktu sebagai t, jarak sebagai s, kecepatan sebagai v, dan percepatan sebagai a. Seleksi semua obyek tersebut dan ubah menjadi movie clip.

3. Berikan script sebagai berikut pada movie clip tadi:

onClipEvent(enterFrame){ totalTime = getTimer()/1000;

hours = Math.floor(totalTime/3600); minutes = Math.floor((totalTime/3600-hours)*60); seconds = Math.floor(((totalTime/3600-hours)*60-minutes)*60); milli = Math.floor((totalTime-(seconds+(minutes*60)+(hours*3600)))*100); stopwatch = seconds+(milli/100)+(minutes*60)+(hours*3600); t= stopwatch;

13


} 4. Ctrl+enter 5. Untuk membuat simulasi GLBB maka tambahkan script berikut:

v=a*t; //v=at , vo=0 s=0.5*a*t*t; //s=1/2 at2

6. Ctrl+enter. Berikan masukan angka pada parameter percepatan dengan selain nol. MENDETEKSI TUMBUKAN ANTAR MOVIE CLIP Deteksi tumbukan ini dapat dimanfaatkan untuk simulasi tumbukan. 1. Buatlah sebuah kotak dan sebuah lingkaran dan ubah ke movie clip lalu berikan nama masing-masing kotak dan bola pada instance name nya. 2. Klik frame 1 layer 1, pada panel action masukkan script :

stop(); kotak.startDrag(true); //script agar movieclip kotak mengikuti gerakan mouse kotak.onEnterFrame = function() { //mendeteksi terjadinya tumbukan antara movieclip kotak dan bola if (this.hitTest(bola)) { //tampilan pada panel output ketika terjadi tumbukan gotoAndStop(2); } }

3. Klik kanan frame 2 pilih insert blank Keyframe. 4. Tekan Ctrl + Enter untuk test movie. MEMBUAT SUDUT 1. Buat Sebuah anak panah yang mengarah ke atas, ubah ke movieClip, registrasi di set ke center bawah.

2. Seleksi instance movieClip panah tersebut dan berikan perintah:

onClipEvent(enterFrame){ if(Key.isDown(Key.UP)){ this._rotation=0; } else if (Key.isDown(Key.DOWN)){ this._rotation=180; } }

3. Untuk arah kanan dan kiri Anda dapat menambahkan perintah else if selanjutnya dengan mengganti sedikit perintah, missal ke arah kanan:

else if (Key.isDown(Key.RIGHT)){ this._rotation=90; }

4. Untuk mengontrol rotasi dari tampilan maka berikan input nilai dengan text tool disetting ke input text. 5. Ubah perintahnya menjadi:

onClipEvent(enterFrame){ this._rotation=_root.sudut; }

6. Buat Text Input seperti gambar di bawah ini:

14


15

Modul Tutorial Flash MX

Documents

Transcript of Modul Tutorial Flash MX