Tutorial Flash Fix

23
Tu utorial Ma “Pelatihan Muham acromedia n BEM FMIPA Oleh mmad Irfan,S a Flash 8 2010” S.Si

Transcript of Tutorial Flash Fix

Page 1: Tutorial Flash Fix

Tuutorial Ma

“Pelatihan

Muham

 

acromedia

n BEM FMIPA 

 

 

 

 

 

 

 

 

 

 

 

 

Oleh 

mmad Irfan,S

 

 

a Flash 8

2010” 

S.Si 

Page 2: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

I. PENGENALAN ADOBE FLASH 

Kenalan Yuk dengan Adobe Flash.. 

Perangkat  lunak  (software)  Adobe  Flash  (sebut:  Flash)  dulunya  bernama  “Macromedia  Flash” 

merupakan  software  multimedia  unggulan  yang  dulunya  dikembangkan  oleh  Macromedia  sebelum 

pindah tangan oleh Adobe System.  

Flash 1.0 diluncurkan pada tahun 1996 setelah Macromedia membeli program animasi vektor bernama 

“FutureSplash”.  Versi  terakhir  yang  diluncurkan  oleh  Macromedia  dengan  menggunakan  nama 

Macromedia  Flash  adalah  “Macromedia  Flash  8”.  Pada  Desember  2005,  Adobe  System mengakuisi 

seluruh produk macromedia sehingga berubah nama mendasi “Adobe Flash”. Sejak  tahun 1996, Flash 

menjadi  pilihan  terdepan  untuk membuat  animasi multimedia  baik  website,  hiburan,  dan  berbagai 

media pembelajaran. Flash dapat dikompilasi ke dalam format *.swf (ShockWave Flash) dan juga *.exe 

(EXEcutable). 

Flash  dapat  digunakan  untuk  memanipulasi  vektor  dan  citra  raster  dan  mendukung  bidirectional 

streaming audio and video yang banyak digunakan untuk membuat iklan, media pembelajaran, dll. Flash 

juga berisikan bahasa pemrograman  yang disebut  “action  script”. Beberapa produk  software,  system 

and  device  dapat membuat  dan menampilkan  isi  Flash.  Flash  dapat  dijalankan  dengan  Adobe  Flash 

Player yang dapat ditanam pada browser, HP, atau software lain. 

Berikut ini adalah Start Page pada Macromedia Flash 8. 

 

Klik Flash Document dari kolom Create New pada Start Page untuk membuat dokumen baru. Tampilan 

Interface Development Environment (IDE) Flash 8 adalah sebaggai berikut: 

Page 3: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

Tools Panel 

Tools  Panel pada  IDE  terletak di  sebelah  kiri, berisikan  alat untuk menggambar objek  yang 

berbentuk vektor. Tool yang dipakai tergantung dari objek yang akan digambar. 

Properties Panel 

Properties Panel menyediakan bentuk pilihan dari item yang terseleksi di Stage atau tool yang 

terseleksi. Isinya tergantung dari item atau tools yang diseleksi. 

 

Timeline 

Timeline  pada  Flash merupakan  navigasi  utama.  Timeline mampu menambahkan  isi  dan mengubah 

dalam bentuk visual.  

Page 4: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

Library Panel 

Digunakan  untuk  mengorganisasikan  komponen  –  komponen  yang  digunakan  untuk  membangun 

aplikasi. Jika akan menggunakan komponen (library) tersebut, maka tinggal melakukan drag and drop ke 

Stage. 

Action Panel 

Action  Panel  dapat  ditampilkan  dengan memilih  frame  atau  objek  yang  diinginkan  kemudian  tekan 

tombol F9 atau klik kanan kemudian pilih Action. Action Panel berisikan tiga bagian, antara lain: 

a. Action Toolbox digunakan untuk melihat daftar kategori elemen action script seperti  function, 

class, type dan kemudian dimasukkan ke script pane dengan cara men‐drag atau double klik. 

b. Script navigator digunakan untuk menampilkan hierarki  elemen  Flash  (movie  clip,  frame, dan 

button)yang terkandung di dalam script. 

c. Script Pane digunakan untuk mengetikkan ActionScript. 

ActionScript 

ActionScript  menunjukkan  koleksi  set  dari  action,  function,  event  dan  event  handler  yang 

memungkinkan dikembangkan oleh para developer untuk membuat Flash movie yang  lebih kompleks 

dan  lebih  interaktif. Actionscript mempunyai evolusi yaitu versi 1, versi 2, dan versi 3. Pada modul  ini 

digunakan versi 2 karena lebih mudah untuk memahami dasar pemrograman dalam ActionScript. 

Berikut ini adalah fungsi dasar dari ActionScript. 

a. Animation 

Script dapat membantu membuat animasi yang kompleks. Sebagai  contoh  sebuah bola dapat 

memantul  pada  layer  di  sekeliling  layer  yang mengabaikan  prinsip  fisika.  Tetapi  jika  bola  itu 

memantul  ke  lantai maka  akan memerlukan  prinsip  gravitasi.  Tanpa  ActionScript,  kita  akan 

membuat animasi  tersebut dengan membutuhkan  ratusan  frame. Namun dengan ActionScript 

dapat dilakukan hanya dengan satu frame. 

b. Navigation 

Page 5: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

c. User Input 

d. Memperoleh Data 

e. Calculation 

f. Graphic 

g. Mengenali Environment 

h. Memutar Music 

   

Page 6: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

II. DASAR ANIMASI FLASH 

Animasi dalam Flash dapat dilakukan dengan tiga cara, yaitu: 

a. Keyframe to keyframe 

Animasi ini menghasilkan ukuran file yang besar. Metode ini sering dipakai untuk membuat 

kartun. Perhatikan contoh berikut. 

Kita akan membuat animasi bola memantul. Langkah‐langkahnya sebagai berikut: 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Pada  layer  1  frame  1,  kita  akan membuat  objek  lingkaran  dengan 

menggunakan oval tool  

3. Buatlah objek lingkaran seperti gambar berikut: 

 

 

 

 

4. Buatlah keyframe pada frame kedua pada layer yang sama. Klik kanan pada frame ke‐2 

kemudian pilih Insert Keyframe. Kemudian pindahkan objek lingkaran kebawah. 

 

 

 

 

5. Ulangi langkah diatas hingga frame ke‐10. 

 

 

 

 

 

 

 

 

6. Jalankan animasi dengan menekan Ctrl+Enter 

 

Page 7: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

b. Tweening 

Animasi  dengan  menggunakan  tweening  lebih  mudah  dilakukan.  Langkahnya  adalah 

menentukan  frame  awal  dan  frame  akhir.  Tweening  dibagi  menjadi  dua,  yaitu: Motion 

Tween dan Shape Tween. 

 

Motion Tween 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Pada  layer  1  frame  1,  kita  akan membuat  objek  lingkaran  dengan 

menggunakan oval tool  

 

 

 

3. Buatlah keyframe pada frame ke‐10 pada layer yang sama. Klik kanan pada frame ke‐10 

kemudian pilih Insert Keyframe.  

 

 

 

 

 

4. Drag and drop objek lingkaran ke bawah dengan posisi berada pada frame 10. 

5. Klik diantara frame 1 dengan frame 10 kemudian klik kanan pilih Create Motion Tween. 

 

6. Lakukan Tes Movie, Ctrl+Enter. 

 

Shape Tween 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Pada  layer 1  frame 1,  kita akan membuat objek  lingkaran dengan menggunakan oval 

tool  

 

Page 8: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

 

3. Buatlah objek kotak pada frame ke‐20 pada layer yang sama. Klik kanan pada frame ke‐

20 kemudian pilih Insert Blank Keyframe.  

 

 

 

 

4. Pada frame 20, kita akan membuat objek kotak dengan menggunakan rectangle tool  

 

5. Klik diantara frame 1 dengan frame 20. Pada Panel Properties pada bagian Tween, pilih 

Shape. 

 

 

6. Hasilnya 

 

7. Lakukan Tes Movie, Ctrl+Enter. 

 

c. Menggunakan Action Script 

Animasi menggunakan  ActionScript  berarti menggerakkan  objek  dengan memakai  action 

script. Beberapa contoh animasi menggunakan actionscript adalah: 

1. Load External Image 

Load  external  image  adalah memanggil  image  dari  luar  project  untuk  ditampilkan  pada 

animasi.  Yang  dibutuhkan  adalah  gambar  yang  hendak  ditampilkan  dimasukkan  kedalam 

satu folder bersama dengan file Load External Image.fla dan Load External Image.swf. 

Page 9: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

Langkah – langkahnya sebagai berikut: 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Buat  dua  layer    dengan  cara  mengeklik  .Kemudian  diberi  nama 

“Action” dan “Interface”. 

3. Kemudian  buat  simbol  baru,  klik  Insert  ‐>  New  Symbol  (ctrl+f8).  Beri  nama  “foto” 

dengan type = movie clip. 

4. Kembali  ke  scene,  drag  and  drop  symbol  foto  dari  library  ke  stage  (layer  interface). 

Setelah itu, pada frame pertama layer action dituliskan script berikut: 

 

5. Save and test movie 

 

Membuat Digital Clock 

Animasi  ini merupakan  pemanfaatan  dari  action  script  yang  ada  pada  flash.  Animasi  ini 

menampilkan  jam  yang ada pada  system  (komputer/laptop)  kemudian ditampilkan dalam 

bentuk digital.  

Langkah – langkah untuk membuat digital clock yaitu: 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Buat  tiga  layer    dengan  cara  mengeklik  .Kemudian  diberi  nama 

“Action”, “Jam” dan “Background”. 

3. Pada  layer background, buatlah  sebuah objek  segi empat dengan menggunakan  rectangle 

tool  (R).  Kemudian  aturlah  fill  dan  line 

sesuai selera.  

4. Designlah pada layer jam seperti pada gambar berikut: 

 

5. A.  Klik  tool  text  pada  toolbar  dan  drag  and  drop  untuk  membuat  desain  seperti  pada 

gambar. Instance Name: txtjam, type teks: dynamic 

text, size: 30 

B.  Klik  tool  text  pada  toolbar  dan  drag  and  drop  untuk  membuat  desain  seperti  pada 

gambar. Instance Name: txtmenit, type teks: dynamic text, size: 30 

: :A B C

loadMovie("foto.jpg",_root.foto); 

Page 10: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

C.  Klik  tool  text  pada  toolbar  dan  drag  and  drop  untuk  membuat  desain  seperti  pada 

gambar. Instance Name: txtdetik, type teks: dynamic text, size: 30 

6. Kemudian pilih layer action kemudian tekan F9, lalu tuliskan action sebagai berikut: 

 

 

 

 

 

 

 

7. Lakukan Test Movie. 

 

Load External Movie (*.swf) 

Untuk membuat animasi ini, beberapa hal yang dibutuhkan adalah menyiapkan movie yang akan di‐load. 

Misalnya saja Digital Clock.swf yang telah dibuat. Copy file tersebut kedalam satu folder dengan file load 

external movie.fla, tentu saja dengan file swf‐nya juga. Langkah – langkah untuk membuat load external 

movie adalah: 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Buat  dua  layer    dengan  cara mengeklik  .Kemudian  diberi  nama  “Action”  dan 

“Interface”. 

3. Kemudian  buat  simbol  baru,  klik  Insert  ‐>  New  Symbol  (ctrl+f8).  Beri  nama  “mc_animasi” 

dengan type = movie clip. Sehingga di Library Panel  

 

4. Aktifkan Scene 1. Aktifkan  layer  interface kemudian buatlah tombol “load” dan “unload”. Pilih 

Insert ‐>New ‐>Symbol beri nama btn_loadmovie, klik OK atau bisa juga mengedit dari Library 

Button.  

 

var tgl, timeint; function timer(){   tgl = new Date()     txtjam.text = tgl.getHours();     txtmenit.text = tgl.getMinutes();     txtdetik.text = tgl.getSeconds();   }   timeint = setInterval(timer, 1000); 

Page 11: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

5. Selanjutnya buat  tombol  “unload”. Pilih  Insert  ‐>New  ‐>Symbol beri nama btn_unloadmovie, 

klik OK atau bisa juga mengedit dari Library Button.  

 

6. Kemudian aktifkan  scene 1 pada  layer  interface. Lakukan drag and drop objek “mc_animasi”, 

“btn_loadmovie”, dan ” btn_unloadmovie” ke stage. 

 

 

 

 

 

7. Aktifkan movie dengan  cara mengeklik objek pada  stage. Kemudian beri nama pada  instance 

name “mc_animasi”. 

8. Aktifkan  button  “load”  dengan  cara mengeklik  objek  pada  stage.  Kemudian  beri  nama  pada 

instance name “btn_load”. 

9. Aktifkan button “unload” dengan cara mengeklik objek pada stage. Kemudian beri nama pada 

instance name “btn_unload”. 

10. Aktifkan layer action kemudian klik frame 1 kemudian klik kanan pilih action. Lalu tuliskan action 

script berikut: 

 

 

 

 

 

 

 

11. Lakukan test movie 

 

Loading External Teks 

A. Load Document Text 

Pada bagian ini, kita akan menampilkan data dari sebuah file *.txt kedalam flash movie. Kita 

dapat menggunakan text editor biasa seperti Notepad, Wordpad,Notepad++. 

btn_load.onRelease = function(){   loadMovie("digital clock.swf", mc_animasi); }; btn_unload.onRelease = function(){   unloadMovie(mc_animasi); }; stop(); 

Page 12: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

Bentuk data yang didefinisikan pada file ini adalah: 

namavariabel = nilaivariabel 

Untuk membuat load external text, berikut adalah langkah – langkahnya: 

1. Buat dokumen baru File ‐> New ‐> Flash Document ‐> OK.  

2. Ganti nama layer menjadi “action”. 

3. Pilih frame 1, lalu klik text tool (T). Setting property: “dynamic text”, size=18, var=”datatxt” 

 

4. Pilih frame 1 kemudian tekan F9, lalu tuliskan script berikut: 

 

 

 

 

 

 

 

 

 

 

 

 

5. Jalankan movie dengan mengetest movie. 

 

   

loadText = new LoadVars();

loadText.load("data.txt");

loadText.onLoad = function(success){

if (success){

datatxt = +this.latihan;

}else{

trace("error loading data");

}

};

Page 13: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

MOTION GUIDE 

Merupakan  sebuah model  dari  tweening  di mana  objek  akan  bergerak  sesuai  dengan  alur  yang  kita 

tentukan. Langkah‐langkah dalam membuat motion guide: 

1. Buatlah motion  tween  seperti  sebelumnya,  tapi  sekarang  framenya diperpanjang  (bukan di  frame 

10, tapi di frame 40). 

2. Klik  layer  tempat objek berada,  lalu klik  tombol add motion guide di bagian  layer, atau klik kanan 

pada layer tempat objek berada, lalu pilih add motion guide. 

 

 

 

 

 

 

 

 

3. Klik pada  frame 1 guide, pilih  tool pensil  (atau  tekan  tombol Y), dan gambarlah  sembarang garis. 

Perlu  diingat  bahwa  garis  tersebut  tidak  boleh  terputus.  Untuk  membuat  garis  tidak  harus 

menggunakan tool pensil, dapat juga menggunakan tool line, pen, dan brush. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Page 14: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

4. Pilih tool panah, dan klik pada objek, lalu drag objek sampai lingkaran pusatnya berada di titik awal 

jalur guide yang telah kita buat. 

5. Klik pada  frame 40, klik objek  lalu drag objek sampai  lingkaran pusatnya berada di titik akhir  jalur 

guide yang telah kita buat. 

 

6. Lakukan test Movie. 

 

MASKING 

Merupakan cara menyembunyikan sebagian objek atau teks. Dapat digunakan untuk berbagai macam efek. Langkah‐langkah dalam membuatnya: 1. Buatlah motion tween lingkaran seperti sebelumnya. 2. Klik tombol insert layer pada panel timeline. 

 

3. Klik pada frame 1 di layer yang baru, pilih tool kotak atau tekan R, lalu gambarlah kotak yang berada di jalur tween dari lingkaran. 

Page 15: Tutorial Flash Fix

Diklat  Tutorial Macromedia Flash 8  

 

4. Klik kanan pada layer baru tersebut, dan pilih Mask. 5. Pilih Control > Test Movie dari menu untuk menjalankan, atau tekan Ctrl +Enter, dan objek terlihat 

hanya ketika berada di dalam kotak. 

    

Referensi Andi Sunyoto.2010,Adobe Flash+XML=Rich Multimedia Application, Andi Offset:Yogyakarta http://www.w3schools.com/Flash/ http://id.wikipedia.org/wiki/Adobe_Flash heribertus heri istiyanto.2008,Presentasi dengan Flash   

Page 16: Tutorial Flash Fix

1

MODUL 4

PRESENTASI DENGAN FLASH copyright@heribertus heri istiyanto 2008 email: [email protected], [email protected] phone: +6281578706171/+6281392116123

Membuat Slide Presentasi

Meskipun membuat slide presentasi dengan Macromedia Flash Pro 8 lebih susah dibandingkan dengan Microsoft Power Point, namun membuat slide presentasi dengan Macromedia Flash Pro 8 dapat menghasilkan slide presentasi yang lebih menarik dan lebih dapat memberikan banyak manfaat. Dengan Macromedia Flash Pro 8 kita dapat menggunakan dasar pembuatan slide presentasi ini untuk membuat jenis presentasi-presentasi lain yang dapat ditambahkan animasi yang lebih lengkap dan menarik. Dalam pembuatan slide presentasi dengan Macromedia Flash Pro 8, objek-objek seperti tombol atau button, background dan teks sebaiknya diletakkan dalam layer yang berbeda. Hal ini dimaksudkan agar objek dapat dikontrol dengan baik. Tutorial kali ini membahas pembuatan slide presentasi dengan dokumen slide-slide kosong yang sudah disediakan oleh Macromedia Flash Pro 8. Kita hanya perlu menambahkan efek-efek animasi teks atau gambar dan tombol navigasi antarslide. Sebelum membuat slide presentasi sebaiknya Anda siapkan isi dari slide presentasi, teks atau gambar yang ingin dimasukkan ke dalam slide, tombol-tombol dan suara/musik yang mendukung presentasi (jika diperlukan). Kali ini kita akan berlatih membuat 6 slide presentasi. Berikut ini contoh teks yang akan ditampilkan pada slide presentasi:

Slide ke- Isi

1 TRIK BELAJAR MEMBUAT ANIMASI DENGAN FLASH 8

2 Untuk membuat animasi dengan Flash 8, Anda harus berlatih terlebih dahulu: Animasi Dasar, Membuat Tombol, Mengontrol Movie Clip

3 Animasi Dasar. Animasi dasar terdiri dari: animasi Motion Tween, Shape Tween dan Motion Guide

4

Membuat Tombol. Untuk membuat tombol Anda dapat menggunakan teks, gambar ataupun gabungan antara teks dan gambar. Selain itu Anda juga dapat menggunakan tombol yang ada di Library Flash

5

Mengontrol Movie Clip. Movie Clip memiliki peran penting dalam pembuatan animasi. Dengan Movie Clip objek-objek dalam flash dapat dikontrol dengan baik dan dapat dibuat animasi yang menarik dan interaktif

6 Trik lebih lanjut: banyak berlatih, mencari tutorial-tutorial di internet dan mengikuti forum-forum tentang animasi flash

Berikut contoh langkah-langkah pembuatan slide presentasi dengan Macromedia Flash Pro 8:

1. Ketika Anda pertama kali masuk Macromedia Flash Pro 8, pilih Create New � Flash Slide Presentation.

Page 17: Tutorial Flash Fix

2

Gambar 4.1: Tampilan awal Macromedia Flash Pro 8

2. Pada tampilan awal secara otomatis di sebelah kiri stage sudah terdapat 1 slide. Karena kita akan membuat 6 slide presentasi, maka kita tambahkan 5 slide lagi dengan mengeklik tanda (+) atau klik kanan pada slide1 kemudian Insert Screen.

Gambar 4.2: Menambahkan Screen (slide presentasi)

3. Jika ingin digunakan background yang sama untuk semua slide, maka Anda gunakan background pada panel Properties dan tidak perlu menggunakan layer khusus background.

Gambar 4.3: Mengganti warna background

4. Pada tutorial ini, digunakan background yang berbeda untuk beberapa slide. Buat layer background, kemudian gunakan Rectangle Tool, pilih warna sesuai dengan keinginan Anda. Jangan lupa untuk mengunci layer background agar tidak bergerak ketika kita mengedit pada objek-objek yang terdapat pada slide. Untuk mengunci, Anda klik gambar di sebelah kanan teks background.

Gambar 4.4: Mengunci layer background

5. Tambahkan 2 layer dan beri nama: teks_1 dan teks_2, pada layer teks_1 buat teks: “TRIK MEMBUAT ANIMASI” sedangkan pada layer teks_2: “DENGAN FLASH 8”. Ubah masing-masing teks menjadi Movie Clip dan tambahkan animasi Motion Tween, sehingga bentuk layer menjadi seperti berikut:

Gambar 4.5: Susunan layer dan urutan animasi Motion Tween Keterangan:

a. Untuk layer background perlu ditambahkan frame sampai dengan frame 25. Sebaiknya Anda ubah background menjadi Graphic (F8).

b. Layer teks_1: frame 1 sampai dengan frame 15 digunakan untuk menggerakkan

teks_1 dari luar stage ke tengah-tengah stage dengan Motion Tween. Frame 15 sampai frame 25 adalah animasi Motion Tween dengan teks_1 berputar.

c. Layer teks_2: dimulai dari frame 15, setelah teks_1 sampai tengah-tengah stage dan

di tambahkan Motion Tween sampai frame 25.

Page 18: Tutorial Flash Fix

3

6. Tambahkan 1 layer dan beri nama action, Insert Keyframe (F6) pada frame terakhir (25) dan

tekan F9 untuk ke layar Actions dan tambahkan script stop(); untuk menghentikan animasi. 7. Tambahkan 1 layer dan beri nama tombol, kemudian buat atau masukkan tombol next dari

Library. Tombol ini digunakan untuk menuju ke slide berikutnya (slide 2). Anda juga dapat menambahkan efek suara pada tombol.

Gambar 4.6: Tombol next dan previous

8. Klik tombol, plih menu Window � Behaviours (Shift+F3). Setelah itu klik tanda (+) di kiri atas, pilih Screen dan klik Go to Slide.

Gambar 4.7: Behaviours Go to Slide

9. Pilih presentation dan klik slide2. Sebenarnya Anda dapat memilih submenu Screen � Go to Next Slide secara langsung. Namun tujuan agar tidak memilih langsung mengunakan Go to Next Slide adalah supaya Anda dapat memilih slide yang dituju tidak hanya slide berikutnya, karena hal ini untuk mengantisipasi jika Anda ingin menuju slide sembarang.

Gambar 4.8: Pilihan untuk menuju ke slide 2

10. Slide presentasi akan lebih menarik jika Anda berikan efek transisi, caranya: pilih slide 1 � klik menu Window � Behaviours (Shift+F3) � klik tanda (+) � Screen � Transition.

Page 19: Tutorial Flash Fix

4

Gambar 4.9: Efek transisi slide

11. Keluar kotak dialog dan pilih efek Fade.

Gambar 4.10: Jenis-jenis efek transisi slide

12. Untuk mengecek tombol yang dibuat berfungsi atau tidak, Anda dapat melakukan test movie (Ctrl+Enter).

13. Selanjutnya kita bekerja pada slide 2, dengan Rectangle Tool buat background yang berbeda

dengan background pada slide 1, kemudian kunci background.

14. Berikut ini adalah susunan layer dan urutan animasi pada slide 2:

Gambar 4.11: Susunan layer pada slide 2

Keterangan:

a. Layer background dibuat sampai dengan frame 20. b. Pada layer teks_1 buat teks: “Untuk membuat animasi dengan Flash 8, Anda harus

berlatih daluhu”. Ubah teks menjadi tombol atau Button (F8) dan beri efek pada tombol. Berikan efek Motion Tween sampai dengan frame 5, yang bergerak dari luar stage atas ke stage bagian atas. Setelah itu tambahkan frame sampai dengan frame 20.

c. Pada layer teks_2 buat teks: “Animasi Dasar”. Ubah teks menjadi tombol atau

Button (F8) dan beri efek pada tombol. Berikan efek Motion Tween dari frame 5

Page 20: Tutorial Flash Fix

5

sampai dengan frame 10, yang bergerak dari sebelah kiri luar stage ke tengah-tengah stage.

d. Pada layer teks_3 buat teks: “Membuat Tombol”. Ubah teks menjadi tombol atau

Button (F8) dan beri efek pada tombol. Berikan efek Motion Tween dari frame 10 sampai dengan frame 15, yang bergerak dari sebelah kanan luar stage ke tengah-tengah stage.

e. Pada layer teks_4 buat teks: “Mengontrol Movie Clip”. Ubah teks menjadi tombol

atau Button (F8) dan beri efek pada tombol. Berikan efek Motion Tween dari frame 15 sampai dengan frame 20, yang bergerak dari sebelah kiri luar stage ke tengah-tengah stage.

f. Pada layer action, tambahkan keyframe (F6) pada frame 20, kemudian berisi scipt

stop(); pada frame 20 (F9).

g. Pada layer tombol, buat frame sampai dengan frame 20, kemudian masukkan tombol dari Library. Tombol ini digunakan untuk menuju ke slide slide sebelumnya (slide 1). Pilih tombol � klik menu Window � Behaviors (Shift+F3). Klik tanda (+) di kiri atas � Screen � Go to Slide. Pilih presentation � slide1.

Gambar 4.12: Pilihan untuk ke Slide 1

15. Klik pada tombol di layer teks_2 kemudian pilih menu Window � Behaviors (Shift+F3). Klik

tanda (+) di kiri atas � Screen � Go to Slide. Pilih presentation � slide3.

16. Berikut kotak dialog untuk tombol_1.

Gambar 4.13: Pilihan untuk ke slide 3

17. Dengan cara yang sama lakukan pula untuk tombol pada layer teks_3 dan teks_4. Hanya saja tombol pada layer teks_3 menuju ke slide 4 sedangkan tombol pada layer teks_4 menuju ke slide 5. Anda dapat melakukan test movie (Ctrl+Enter) untuk mengecek apakah tombol yang dibuat sudah dapat berfungsi atau belum.

18. Selanjutnya kita bekerja pada slide 3. Slide 3 merupakan submenu Animasi Dasar. Untuk

background pada slide 3 sampai dengan slide 5 sama dengan slide 2. Agar sama, maka kita Copy background yang ada pada slide 2. Buka terlebih dahulu kunci yang ada pada layer background slide 2. Kemudian klik layer background frame 1 pada slide 2 � Copy (Ctrl+C) � Paste (Ctrl+V) pada layer 1 frame 1 slide 3 atau Paste in Place (Ctrl+Shift+V) agar letak objek tidak berubah. Ubah nama layer menjadi background.

19. Berikut ini susunan layer pada slide 3:

Page 21: Tutorial Flash Fix

6

Gambar 4.14: Susunan awal layer slide 3

Keterangan:

a. Layer background dibuat satu frame saja dan kunci layer. b. Layer teks, berisi judul: “Animasi Dasar” dan isi: “Animasi dasar terdiri dari: animasi

Motion Tween, Shape Tween dan Motion Guide”.

c. Dalam layer tombol terdapat dua tombol yaitu tombol untuk menuju slide 2 dan tombol untuk menuju slide 4. Gunakan Behaviors pada langkah ini.

Gambar 4.15: Behaviors untuk tombol pada slide 3

d. Tambahkan efek Blinds pada slide 3. Caranya: Pilih slide 3 � Window � Behaviors � keluar kotak dialog dan pilih Blinds.

Gambar 4.16: Menambahkan efek Blinds pada slide 3

20. Selanjutnya kita bekerja pada slide 4. Susunan layer pada slide 4 sama dengan slide 3, yang berbeda hanya pada isi teks dan tombol. Berikut ini susunan layer pada slide 4:

Gambar 4.17: Susunan layer pada slide 4

Keterangan:

a. Background sama dengan slide 2 dan 3. b. Layer teks, judul: “Membuat Tombol” dan isi: “Untuk membuat tombol Anda dapat

menggunakan teks, gambar ataupun gabungan antara teks dan gambar”.

c. Dalam layer tombol terdapat dua tombol yaitu tombol untuk menuju slide 3 dan tombol untuk menuju slide 5.

Page 22: Tutorial Flash Fix

7

d. Tambahkan efek transisi Photo pada slide 4. 21. Susunan layer pada slide 5 juga sama dengan slide 3 dan 4.

Gambar 4.18: Susunan layer pada slide 5

Keterangan:

a. Background sama dengan slide 2, 3 dan 4. b. Layer teks, judul: “Mengontrol Movie Clip” dan isi: “Movie Clip memiliki peran

penting dalam pembuatan animasi. Dengan Movie Clip objek-objek dalam flash dapat dikontrol dengan baik dan dapat dibuat animasi yang menarik dan interaktif”.

c. Dalam layer tombol terdapat dua tombol yaitu tombol untuk menuju slide 4 dan

tombol untuk menuju slide 6.

d. Tambahkan efek transisi Wipe pada slide 5. 22. Untuk slide 6, dibuat berbeda dengan slide-slide sebelumnya. Berikut susunan layer pada

slide 6:

Gambar 4.19: Susunan akhir layer pada slide 6

Keterangan:

a. Background pada layer 6 sama dengan background pada slide 1. Tambahkan frame (F5) sampai dengan frame 30.

b. Layer teks_1, isi teks: “Trik lebih lanjut”. Buat animasi Motion Tween, sampai

dengan frame 5, teks bergerak dari sebelah kiri stage ke sebelah kanan stage, dari frame 6 sampai dengan frame 15, teks bergerak dari sebelah kanan stage ke tengah-tengah stage dan dari frame 16 sampai dengan frame 30, teks kembali lagi ke posisi semula.

c. Layer teks_2, isi teks: “Banyak berlatih”. Tambahkan keyframe (F6) sampai dengan

frame 10. Setelah itu teks dihapus.

d. Layer teks_3, isi teks: “Mencari tutorial-tutorial di internet”. Tambahkan keyframe (F6) pada frame 11 sampai dengan frame 20.

e. Layer teks_4, isi teks: “Mengikuti forum-forum tentang animasi Flash”. Tambahkan

keyframe (F6) pada frame 21 sampai dengan frame 30.

f. Layer bintang: buat bintang di akhir presentasi dan letakkan di tengah stage. Tambahkan keyframe (F6) sampai dengan frame 11, setelah itu pilih bintang dan ganti warna menjadi biru. Tambahkan keyframe (F6) sampai dengan frame 21,

Page 23: Tutorial Flash Fix

8

kemudian pilih bintang dan ganti warna menjadi merah. Tambahkan keyframe (F6) kembali sampai dengan frame 30, kemudian pilih bintang dan ganti warna menjadi kuning (warna semula).

g. Layer tombol: berisi satu tombol saja, yaitu hanya tombol untuk menuju ke slide

sebelumnya. Tambahkan keyframe (F6) pada frame 30, agar tombol tidak berkedap-kedip saat dilakukan test movie.

h. Lakukan test movie (Ctrl+Enter) untuk melihat hasil slide presentasi yang Anda buat.

i. Jika Anda ingin menambahkan efek suara pada tombol, maka Anda klik dua kali

tombol yang ingin beri efek suara, setelah itu tambahkan satu layer dan beri nama layer suara. Drag file suara yang sudah ada pada Library ke stage. Pastikan bahwa Anda hanya menambahkan keyframe (F6) pada efek Down saja, yang mengakibatkan tombol berbunyi jika ditekan.

Gambar 4.20: Menambahkan suara pada tombol

j. Anda cukup menambahkan suara dua kali saja, yaitu pada tombol untuk menuju

slide sebelum dan sesudahnya. k. Lakukan test movie (Ctrl+Enter) untuk melihat hasil suara yang sudah Anda

tambahkan pada tombol.

Langkah-langkah pada tutorial ini hanyalah salah satu contoh saja. Kini Anda dapat

mengkreasi sendiri slide-slide presentasi yang Anda buat dengan menambahkan background, suara atau tombol yang menarik. Pemilihan warna berpengaruh terhadap slide presentasi yang Anda buat, sehingga perhatikan dengan baik ketika Anda akan memilih warna.