1

Flash Dasar & Presentasi

Modul 1 Pengenalan Dan Pengaturan

1.1 Menjalankan Flash Berikut adalah langkah langkah untuk menjalankan flash: Klik Start > Program > Macromedia > Macromedia Flash 8 Kemudian Klik Flash Document Untuk membuat Project baru

1.2

Interface (Tampilan)

Flash Dasar & Presentasi

Berikut adalah keterangan dari interface Flash Stage : Tempat untuk membuat Project (animasi, presentasi, dll). Jika keluar dari area background (yang berwarna putih), maka tidak akan tampil pada saat di eksekusi. Timeline : Garis waktu yang di lewati untuk menjalankan animasi. Panel ini digunakan untuk menentukan property (bentuk, ukuran, dll) dan/atau posisi objek dari waktu ke waktu yang telah di tentukan Tools : Kumpulan alat yang akan di gunakan untuk mengolah atau membuat objek ColorMixer : Tempat mengolah warna (pallet) yang digunakan untuk mewarnai shape Library : Tempat menyimpan File gambar, suara, atau video dari luar, yang akan disisipkan kedalam dokumen flash Property : Panel tempat mengatur objek atau lembar kerja

Pengaturan Stage

Sebelum memulai, kita harus setting terlebih dahulu stage kita agar sesuai dengan kebutuhan Project kita. Berikut keterangan setting pada property: Size Publish : Untuk menentukan ukuran stage : Untuk mengatur bentuk dan lokasi Publish/ hasil akhir Project Device : Untuk mengatur perangkat yang akan digunakan (hanya berlaku di Flash lite) Background : Mengatur warna stage

Flash Dasar & Presentasi

Frame Rate : Setting gerakan animasi yang di hitung dengan cara: berapa frame yang dilalui selama satu detik. (12 fps, berarti dalam waktu 1 detik, akan melalui 12 frame)

Pengaturan Publish Untuk bisa dijalankan secara terpisah, maka project kita harus di-publish. *setting ini digunakan untuk menympan hasil akhir Project Klik Stage (area yang berwarna putih atau abu) Pada panel Properties, klik tombol Setting pada Publish

Kemudian klik tab Format, check opsi Windows Projector dan klik Tombol Folder berwarna kuning

Flash Dasar & Presentasi

Tentukan Folder yang akan digunakan untuk menympan hasil akhir Project kita, Ganti nama di kolom FILE NAME, lalu klik Save

1.3 Shape

Untuk membuat hasil akhir/publish, tekan Publish

Shape pada intinya adalah sebuah gambar yang kita buat dengan menggunakan tools yang tersedia pada flash seperti Rectangle Tools, atau Oval tools. cara membuatnya, Pilih rectangle tools atau oval tools Klik dan drag pada stage

Flash Dasar & Presentasi

1.4

Frame Frame adalah satuan tampilan yang ada di stage. Isi Stage di frame pertama bisa berbeda dengan frame kedua, dan perbedaan itu bisa di buat animasi dari gambar-gambar yang berbeda dari setiap frame sehingga akan membentuk sebuah animasi.

Contoh: Membuat Animasi Gerakan tangan Beikut carauntuk membuatnya: Kita buat sebuah gambar di Frame 1, Lalu klik kanan di Frame 2, pilih insert Keyframe, lalu ubah posisi tangan nya Klik kanan lagi di Frame ke 3 lalu pilih Insert Keyframe, lalu ubah lagi posisi tangannya Tekan enter untuk melihat animasinya Frame 1 Frame 2 Frame 3

Animasi ini masih terbilang kasar karena hanya menggunkan frame (frame by frame) tanpa motion, untuk perubahan gerakan yang lebih halur, akan dibahas dalam bagian Motion Tween

Tentang Penggunaan Frame dan Keyframe Jika ingin membuat suatu perubahan gambar/animasi (gerakan atau posisi) pada frame berikutnya, maka gunakan Keyframe (Insert KeyFrame). Jika pada frame selanjutnya tidak akan di buat perubahan gambar/animasi, maka gunakan Frame (Insert Frame)

Flash Dasar & Presentasi

Modul 2 Symbol dan Motion

2.1 Symbol Jenis jenis Symbol Ada 3 jenis symbol dalam flash 1. Movie Clip Adalah symbol yang digunakan untuk membuat animasi secara terpisah dari scene. Kebanyakan, jika kita ingin membuat suatu animasi di luar scene dalam flash, Movie clip adalah symbol yang tepat untuk mengemas suatu animasi.

Cara membuat Movie Clip a. Klik Insert > New Symbol

b. Berikan nama sesuai kebutuhan, lalu pilih opsi Movie Clip, lalu tekan OK

c. Akan muncul sebuah stage baru, dan akan Muncul icon dan judul baru di samping Scene 1

Flash Dasar & Presentasi

Icon baru. Menandakan kita sedang mengolah Movie Clip MC01

Stage baru yang kosong

d. Buat sebuah shape bebas, dengan tanda + sebagai titik tengahnya

e. Dengan begitu, kita sudah memiliki sebuah Movie Clip, yang bisa dilihat pada Library

Flash Dasar & Presentasi

2. Button Button adalah symbol yang digunakan untuk membuat perintah navigasi. Sederhananya, button adalah tombol, yang digunakan sebagai navigasi dalam flash.

Cara membuat Movie Clip a. Klik Insert > New Symbol

b. Berikan nama sesuai kebutuhan, lalu pilih opsi Movie Clip, lalu tekan OK

c. Akan muncul sebuah stage baru, dan akan Muncul icon dan judul baru di samping Scene 1 Icon baru. Menandakan kita sedang mengolah Button BTN01

Stage baru yang kosong

Flash Dasar & Presentasi

d. Terdapat sedikit perbedaan antara Button dan MovieClip, yaitu pada frame nya.

Dalam button, terdapat 4 frame UP Over : Akan menampilkan Tampilan default button : Frame yang akan tampil pada saat cursor mouse

menyorot(menempel) pada button Down : Frame yang akan tampil pada saat kita klik button nya Hit : mengindikasikan Area yang dapat di klik pada

button(kosongkan jika ingin frame yang lain sebagai area yang bisa di klik)

e. Buatlah Shape pada tiap tiap frame dengan warna atau bentuk yang berbeda, hingga nanti button akan terdapat dalam Library seperti halnya MovieClip

3. Graphic Graphic adalah sebuah symbol yang prioritaskan untuk membuat sebuah gamabr/grafis. Biasanya Symbol ini digunakan untuk membuat background, dengan cara pembuatan sama dengan MovieClip atau button. Convert to Symbol Adalah cara untuk membuat Symbol dari objek yang telah kita buat sebelumnya.

Contoh: 1. Buatlah sebuah shape dalam stage

10

Flash Dasar & Presentasi

2. Double klik shape yang telah di buat, lalu klik kanan shape, pilih Convert to symbol

3. Berikan nama sesuai kebutuhan, lalu pilih Type sesuai kebutuhan. Untuk Registration, klik kotak yang paling tengah, sehingga kotak yang dipilih jadi berwarna hitam,

4. Klik Ok

11

Flash Dasar & Presentasi

2.2

Motion Motion Tween Berikut adalah cara untuk membuat motion tween. Kli ini kita akan membuat sebuah persegi panjang yang jatuh. 1. Klik Rectangle Tool, lalu buatlah sebuah persegi panjang di luar stage

2. Klik kanan pada frame 1, lalu pilih Create Motion Tween

3. Klik kanan pada frame 20 lalu pilih Insert Key Frame

12

Flash Dasar & Presentasi

Tampilan frame nya akan menjadi seperti berikut

4. Klik Frame 20 pada layer 1, lalu Drag kedalam stage sambil menekan tombol shift.

Drag kedalam stage sambil tekan shift

5. Lalu klik kanan Frame 20, pilih Action, lalu ketikan syntax stop(); tanpa tanda petik,, agar animasinya tidak mengulang. 6. Lihat animasinya dengan cara menekan tombol Enter atau CTRL + Enter.

Motion Shape Adalah animasi perubahan bentuk. Berikut cara untuk membuat Motion Shape: 1. Buatlah shape berbentuk persegi panjang berwarna biru di dalam stage, dengan cara seperti langkah 1 pembuatan Motion tween

13

Flash Dasar & Presentasi

2. Klik Frame 1, lalu pada window Property, ubah opsi Tween : dari none menjadi SHAPE,

3. Klik kanan Frame 20 lalu pilih Insert keyframe 4. Klik Frame 20, lalu ubah bentuk (dengan Free Transform tool (Q) ) dan warna (di window properti) shape yang telah kita buat tadi

Pada Frame 1

Pada Frame 20

Bentuk : Persegi panjang Warna : Biru

Bentuk : Kotak Warna : Hijau

7. Lihat animasinya dengan cara menekan tombol Enter atau CTRL + Enter.

14

Flash Dasar & Presentasi

Motion Guide Adalah salah satu cara untuk membuat motion tween dengan gerakan sesuai keinginan kita. Motion kali ini bergerak secara dinamis mengikuti lintasan yang ada, lintasan tersebut disebut Guide.

Contoh: Membuat Animasi Bola jatuh Berikut cara untuk membuatnya: 1. Buatlah shape berbentuk lingkaran di atas stage, pada Layer 1 2. Klik kanan Layer 1 pilih Add Motion Guide, lalu buat sebuah lintasan dengan menggunakan Pen tool(P) pada Layer guide Layer Guide Linatasan

3. Klik kanan frame 30 pada layer 1 lalu piliih Insert keyframe, lalu klik kanan pada frame 30 layer Guide, lalu pilih Insert Frame 4. Atur Property Frame 1 layer 1 seperti berikut

5. Tekan enter / CTRL+Enter untuk melihat hasilnya Mask Masking adalah teknik untuk membuat suatu objek menjadi tidak terlihat karena di sembunyikan di balik Mask tersebut. Biasanya, masking bertuk MovieClip

15

Flash Dasar & Presentasi

Contoh: membuat button animasi 1. Buatlah sebuah kotak kecil, lalu convert menjadi Button, lalu convertlagi menjadi MovieClip.

2. Double klik kotak tersebut, lalu buat layer baru, pindahkan layer 2 menjadi dibawah layer 1.

3. Buat Sebuah kotak background pada layer2 4. Buat layer baru, tempatkan diatas layer2, lalu isi dengan text

16

Flash Dasar & Presentasi

5. Buat sebuah layer baru lagi, dan tempatkan di atas layer 3, lalu isi dengan kotak yang menutupi area teks dan backgroundnya

6. Klik kanan layer 4, pilih Mask, lalu atur posisi layer 2, hingga terlihat seperti berikut

7. Klik kanan pada layer1 frame 1, lalu pilih Create Motion tween, lakukan sekali lagi pada layer 4 frame1.

17

Flash Dasar & Presentasi

8. Klik kanan pada layer 1 frame 15, lalu pilih insert Keyframe, lakukan hal yang sama pada layer 4 frame 15

9. Klik kanan pada layer yang lainnya pada frame 15 di masing2 layer, lalu pilih Insert Frame, sehingga akan Nampak seperti berikut

10. Klik layer 1 frame 15, lalu pindahkan posisi kotak kecil, pada ujung kanan kotak besar

18

Flash Dasar & Presentasi

11. Klik layer 4 frame 1, lalu pindahkan kotak besar ke ujung kiri

12. Klik layer 1 frame 1, klik kanan kotak kecil pada stage, lalu pilih action, lalu masukan script berikut

13. Klik kanan layer 1 frame 15, lalu pilih Action, lalu masukan script berikut, lakukan hal yang sama pada layer 1 frame1

14. Tekan CTRL + ENTER, untuk melihat hasilnya. Klik pada kotak kecil, untuk menampilkan animasinya

19

Flash Dasar & Presentasi

Modul 3 Gambar dan Suara

3.1 Gambar Menyisipkan Gambar Sebelum gambar disisipkan, kita harus meng-Import gambar yang akan kita sisipkan kedalam library, dan gambar yang ada dalam library, bias digunakan beberapa kali

Contoh: Membuat Background dengan gambar Berikut caranya: 1. Klik File>Import>Import to library

2. Lalu pilih file yang akan diimport, lalu tekan Open. Pada panel library akan tampak gambar yang telah diimport.

20

Flash Dasar & Presentasi

Gambar yang ada dalam library bias digunakan beberapakali, bisa di masukan ke atas stage berkali kali juga

3. Drag gambar dari library ke atas stage lalu sesuaikan ukurannya hingga memenuhi stage.

Drag ke Stage

4. Kunci layer agar tidak bias di ubah

Menggunakan Gambar Sebagai Button Gambar juga bisa di ubah menjadi button Berikut caranya: 1. Klik File>Import>Import to library

21

Flash Dasar & Presentasi

2. Buka gambar button lalu tekan Open. Gambar Button bisa dicari di internet atau bisa buat sendiri menggunakan Photoshop,corel, AI, paint, atau aplikasi grafis lainnya

3. Drag gambar button dari library ke stage, lalu kilk kanan gambarnya, pilih convet to symbol, lalu pilih opsi button dan tekan ok

4. Double klik buttonnya, lalu atur agar jadi seperti seperti dibawah ini

Gambar 1 Warna huruf HOME Putih

Gambar 2 Warna huruf HOME Biru

Pada Frame UP,DOWN,dan HIT, isi seperti Gambar 1, dan pada Frame Over, isi seperti Gambar 2. 5. Jalankan Animasi untukmelihat hasilnya

22

Flash Dasar & Presentasi

3.2

Suara Menyisipkan Sound Sama seperti halnya gambar, sound juga harus kita import terlebih dahulu kedalam library dengan cara yang sama. Untuk memakai sound sebagai back sound, berikut caranya: 1. Klik layer yang akan di masukan back sound. Jadi, ketika animasi melewati frame tersebut, maka sound akan berbunyi 2. Pada panel Property, Ganti combobox Sound:, yang tadinya none, menjadi Sound yang telah kita import ke library tadi (pada kasus ini, nama File yang di Import adalah Sharlock Holmes)

Keterangan: Sound Effect = nama file sound yang akan di jalankan = Effect sound yang akan di pakai (seprti fade in, fade out

dan semacamnya) Sync = adalah singkronisasi sound event. Pilih Start atau

biarkan default (Evnet) untuk memulai sound, dan bila ingin menghentikan sound, buat keyframe baru dengan Sound yang sama, tetapi Sync modenya Stop Repeat = Pengulangan berapa kali sound akan di putar, angka 1

di sampingnya menunjukan berapa banyak pengulangannya. Ganti pilihan Repeat dengan Loop jika ingin soundnya terus berulang.

23

Flash Dasar & Presentasi

Sound pada Button Untuk membuat button yang telah kita buat berbunyi, kita bisa memasang sound pada button sesuai perintahnya (pada saat over, atau down). Berikut caranya: 1. Pertama, import sound untuk button. Ditutorial ini, ada dua sound yang di pakai, untuk RollOver dan untuk Down. Button sound bisa di cari di internet, ataukita buat sendiri, atau bisa ditemukan pada directory game yang sudah di install.

Format yang bisa di pakai .MP3 dan .WAV

2. Buatlah layer baru, dan berinama Sound agar tidak tertukar dengan layer lain.

3. Klik kanan pada frame Over layer Sound lalu pilih Insert Blank keyframe, dan lakukan juga pada frame Down dan Hit di layer Sound sehingga menjadi seperti berikut:

24

Flash Dasar & Presentasi

4. Klik Frame over layer Sound, pada panel Property, ganti property Sound dari none menjadi nama file sound yang akan di pakai, lalu ubah juga frame Down

Pada Frame Over

Pada Frame Down

5. Tekan CTRL+ENTER untuk melihat hasilnya

25

Flash Dasar & Presentasi

Modul 4 Action
4.1 Action pada Button (advance) Kali ini akan dibahas cara membuat button dasarnya berupa movieclip, dan menggunakan masking

Contoh: Membuat Button menu seperti web Berikut caranya:

1. Import image kedalam library yang akan digunakan sebagai button 2. Lalu, drag satu button ke atas stage, Convert menjadi button lalu convert lagi menjadi movieclip 3. Double klik movieclipnya sehingga kita masuk kedalam editing movieclipnya

4. Didalam movieclip, buat 1 layer dan berinama Buttons, buatlah beberapa button di dalamnya

26

Flash Dasar & Presentasi

5. Buat lagi layer baru dan beri nama Mask, lalu buat sebuah shape yang menutupi button yang di bawah dan convert menjadi Graphic.

6. Pindahkan layer 1 ke posisi paling atas

7. Pindahkan Graphic yang menutupi button keatas button

8. Klik kanan frame 1 layer Mask, lalu pilih Create Motion Tween

27

Flash Dasar & Presentasi

9. Klik di frame 20 layer Mask, lalu pilih Insert KeyFrame, lalu sesuaikan posisi frame pada layer lain

10. Pada frame 20 layer Mask, atur kembali posisi Graphic sehingga menutupi kembali button seperti sebelumnya, sehingga jika dijalankan animasinya, Graphic akan bergerak dari atas ke bawah menutupi button

11. Klik kanan pada frame 1 layer Mask, lalu pilih action, tulis script stop(); Lakukan hal yang sama pada Frame 20 layer Mask

12. Klik kanan layer Mask, lalu pilih Mask

13. Buat layer baru berinama Release, lalu pindahkan keposisi paling bawah, tetapi jangan sampai berada di dalam mask, lalu hilangkan tanda kunci gembok pada layer mask dan button dengan cara mengkliknya agar button dan mask bisa di edit dan terlihat di layar

28

Flash Dasar & Presentasi

14. Pada layer Release, isi dengan sebuah shape dan beri warna berbeda, disini diberiwarna hijau, lalu convert shapenya menjadi button. Button ini digunkan untuk mengembalikan posisi pembacaan frame ke pada frame 1 saat roll over

15. Klik kanan button utama (Profile) lalu pilih action, dan masukan script berikut

29

Flash Dasar & Presentasi

16. Klik kanan pada button hijau (yang ada di layer Release) lalupilih action, masukan script berikut

17. Jalankan untuk melihat hasilnya. Tapi ketika dijalankan, akan terlihat sebuah button hijau, button tersebut jangan dihilangkan, karena menympan koding untuk kembali ke frame 1. Tetapi, button tersebut bisa di sembunyikan dengan cara: Keluar terlebih dahulu dari test programnya, dan kembali ke project Klik buttonnya hijaunya lalu

4.2

Action Action Kita akan membuat project yang didalamnya terdapat action yang akan di jelaskan dalam project ini. Berikut adalah contoh flash dengan penerapan Action. Contoh: Gallery 1. 2. Buatlah project ukuran 1024x768 dengan frame rate 36 fps Buatlah layer baru seperti berikut

30

Flash Dasar & Presentasi

3.

Buatlah background pada layer BG dan Buat 3 buah button pada layer Button, hingga tampilan stage menjadi seperti berikut

4.

Klik layer Pictures lalu buat keyframe di frame 15 dan 30. Insert frame pada pada frame 44, lalu berinama/berilabel frame 15 dan 30 pada kolom property. Label property Frame 15 Label property Frame 30

Dengan begini, kita memiliki nama baru untuk frame 15 yaitu frame foto1, dan untuk frame 30 yaitu frame foto2.

5.

Pasang sebuah foto yang berbeda pada frame foto1 dan foto2.

31

Flash Dasar & Presentasi

6. 7. 8.

Buat sebuah layerbaru, dan berinama home Buat blank keyframe pada layer home frame 15 Pada frame1 layer home, buatlah sebuah teks, lalu ubah teks tersebut menjadi movie clip.

9.

Klik kanan frame1 layer home lalu pilih Create Motion tween, lalu insert keyframe, sehingga Nampak seperti berikut

10.

Klik frame 1 layer Home lalu klik text yang telah dibuat, pada panel Property, ubah Color mode nya menjadi Alpha, dan ubah nilainya menjadi 0%

11.

Import-lah sebuah musik ke library, lalu pasang pada frame 1 layer home

Setelah semua perseiapan selesai, baru kita berikan Action yang kita butuhkan.

Langkah selanjutnya akan menjelaskan tentang Action dan fungsinya.

Action ini case sensitive, besar kecil nya huruf, berpengaruh pada coding Action.

32

Flash Dasar & Presentasi

Untuk membuka action, klik kanan frame atau symbol(movieclip/button) yang ingin diberi action, lalu pilih action. Untuk memberikan action, kita bisa mengetik nya sendiri, atau menambahkannya secara otomastis dengan cara mengklik tanda + pada panel action

12.

stop(); Action ini digunakan untuk menghentikan animasi. Tulis action ini pada frame 14 layer home,

13.

on(){} Action on kebanyakan digunkan untuk fungsi pada tombol. Ada banyak fungsi dalam on, ada press, release, rollover, rollout dan lainnya. Yang kita pakai adalah release, agar ketika klik dan melepaskan klik-an, fungsi akan berjalan. Berikut cara penulisannya

33

Flash Dasar & Presentasi

14.

gotoAndPlay(); dan gotoAndStop(); Action gotoAndPlay(); digunakan untuk berpindah keframe lain lalu melanjutkan animasinya. Sedangkan action gotoAndStop(); digunakan untuk berpindah pada frame lain lalu menghentikan animasinya. Berikut cra penulisannya:

Angka satu pada gambar sebelah kiri menunjukan akan menuju frame 1, ditulis dengan angka tanpa tanda kutip Pada gambar sebelah kanan, kata foto1 menunjukan animasi akan menuju frame dengan label/nama foto1, jika ingin menggunakan cara sebelah kanan, harus memberinama layer terlebih dahulu seperti pada langkah 4, dan penulisannya pada actionnya menggunakan tanda kutip. Kita akan menggabungkan fungsi on dengan goto ini. Pada tombol Home, masukan action berikut:

15.

Pada tombol Foto1, masukan action berikut:

34

Flash Dasar & Presentasi

Pada tombol Foto3, masukan action berikut

16.

stopAllSounds(); Action ini digunakan untuk menghentikan suara yang sedang play. tulis action ini pada setiap button, tulis di bawah action goto

17.

jalankan untuk mencobanya.

35

Flash Dasar & Presentasi

Modul 5 Membuat Presentasi dan Publikasi Flash

5.1 Membuat Presentasi dengan Flash Berikut adalah contoh membuat sebuah presentasi dengan flash Contoh: Presentasi Makalah 1. Buat project dengan ukuran 1024x768 frame rate:24fps 2. Ganti nama layer pertama menjadi background dan isi dengan background yang di inginkan 3. Buatlah layer label dan isi dengan garis pembatas dan judul presentasi 4. Buatlah layer button dan isi dengan button bab1 sampai 3, dan tombol exit sehingga tampilannya akan jadi seperti berikut: Layer/frame

Stage

5. Buatlah 3 layer baru dan berinama subButton 1 sampai 3 dan buat satu layer lgai dengan nama materi dan biarkan layer materi kosong. Lalu sisipkan keyframe pada masing masing subButton di frame 5,20 dan

36

Flash Dasar & Presentasi

35. Namai frame labelnya frame 5,20 dan 35 lalu isi masing masing frame tersebut dengan button seperti berikut, Frame

subButton Frame 5

subButton2 Frame 20

subButton3 Frame 35

Tulisan tulisan di atas merupakan button yang ada dari layer subbutton untuk menampilkan submenu dari button button sebelumnya

37

Flash Dasar & Presentasi

6. Pada layer materi, buatlah keyframe - keyframe dengan ketentuan seperti berikut Keyframe di frame 5, frame label Bab1 Keyframe di frame 10, frame label LatarBelakang Keyframe di frame 15, frame label Tujuan Keyframe di frame 20, frame label Bab2 Keyframe di frame 25, frame label Pengertian Keyframe di frame 30, frame label Pembahasan Keyframe di frame 35, frame label bab3 Keyframe di frame 40, frame label Kesimpulan Keyframe di frame 45, frame label Penutup

7. Isilah layer materi dengan bahan materi presentasi kita

8. Pada layer bg frame 1, tulis action fscommand("fullscreen",true); stop(); 9. Tulis juga action action berikut: Button bab1 on(release){ gotoAndStop("Bab1"); } Button bab2 on(release){ gotoAndStop("Bab2"); } Button bab3

38

Flash Dasar & Presentasi

on(release){ gotoAndStop("Bab3"); } Button latar belakang on(release){ gotoAndStop("LatarBelakang"); } Button Tujuan on(release){ gotoAndStop("Tujuan"); } Button Pengertian on(release){ gotoAndStop("Pengertian"); } Button Pembahasan on(release){ gotoAndStop("Pembahasan"); } Button Kesimpulan on(release){ gotoAndStop("Kesimpulan"); } Button Penutup on(release){ gotoAndStop("Penutup"); } Button Exit on (release) { fscommand("quit"); }

39

Flash Dasar & Presentasi

40

Flash Dasar & Presentasi

41