Anda di halaman 1dari 41

Flash for Presentation

Mochamad Rosul
Jurusan Teknik Perencanaan Wilayah dan Kota
Fakultas Teknik Universitas Islam Sultan Agung
Semarang, 2007

1

Kata Pengantar

Seiring waktu, mahasiswa dituntut memiliki kemampuan dalam aplikasi komputer.
Program komputer Macromedia Flash 8 hadir untuk menambah kemampuan dan
keterampilan mahasiswa dalam animasi seperti animasi gambar, teks, dan aplikasi dengan
program lain. Harapannya agar materi yang disampaikan kepada orang lain dapat
dimengerti secara lebih atraaktif, menarik dan mudah.

Semoga buku ini memiliki arti bagi pengembangan ilmu.

Semarang, 9 Nopember 2007

Mochamad Rosul.

2

BAB

1 Sekilas Macromedia Flash 8

Menjalankan Macromedia Flash 8
Pilih Start, All Programs, Macromedia, Maromedia Flash 8.

3

Membuat Dokumen Baru
Pilih File, New

Muncul jendela New Document
Pilih General, Flash Document,
Ok

Mengatur Dokumen Flash
Digunakan untuk untuk mengatur tayangan, background.

4

size: 550 x 400 pixels Muncul jendelaDocument properties. Lihatlah perubahan background Menyimpan Dokumen Flash Pilih File. Isikan Title: ::: Dasar-dasar Flash Description: Dasar-dasar animasi menggunakan Macromedia Flash Dimention: 550 ppx (width x 500 px (height) Background color: ganti warna abu-abu.Pilih properties. Save As 5 . Pilih Ok untuk mengakhiri.

Import. Pilih open untuk membuka gambar. Import to Stage. Muncul Jendela Import. Mengimpor Media Digunakan untuk mengambil gambar dari tempat/folder lain yang sudah jadi seperti foto atau hasil scan.wmf (atau ekstensi lain seperti jpg. pilih misal gambar picture1. 6 . bmp). pilih save untuk mengakhiri.Simpan di D: Prak TI beri nama dasar-daar flash. Pilih File.

Gunakan Scroll horizontal atau vertikal di sebelah stage untuk memposisikan gambar. 7 . Import. Zoom Out untuk menampakkan seluruh gambar (memperkecil gambar). Import library.Gunakan View. Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan cara Pilih File. Untuk memperbesar gambar gunakan menu View. Zoom In.

lakukan double enter untuk mengakhiri. Mengorganisir Layer Double klik pada layer1 ganti tulisan dengan mengetikkan kata foto.Agar gambar yang dipilih tersedia/muncul di library. Gambar muncul di kotak library seperti berikut ini. pilih menu Window. 8 . Library .

Klik sebarang lokasi untuk mengakhiri tulisan. Membuat Teks Pilih Text tool (T) . 9 . tekan dan geser pointer pada gambar (stage) sampai berbentuk kotak.Membuat layer baru Pilih insert layer ( ). ketik Kampus Unissula sehingga menjadi bentuk seperti berikut. ketik tulisan teks. double klik layer 2. Maka terbentuk layer baru.

BAB Menggambar Obyek (Object 2 Drawing Diawali dengan membuka file baru. akhiri dengan Ok. New Muncul kotak New Document. Menggambar Obyek Pilih file. kali ini menggambar obyek kotak dan menulis teks. 10 . pada general pilih flash document.

lepaskan mouse.Pilih rectangle tool ( ) Lakukan penggambaran dengan tekan mouse. geser ke kanan dan bawah. 11 .

Merubah Warna Pilih selection tool ( ) Pilih properties pada property panel. 12 . pilih fill color ( ) untuk mengganti warna arsir. dan stroke color ( ) untuk perubahan warna garis.

13 . ketik kotak. Pilih text tool ( ). lakukan pengetikan menggambar akhiri dengan enter sehingga menghasilkan bentuk berikut ini. double klik pada later 2. ketik teks akhiri dengan menekan tombol enter pada keyboard.Mengganti nama layer Double klik pada layer 1. buatlah kotak untuk mengisi tulisan. Membuat Layer baru Pilih insert layer ( ).

Jika belum sama dengan yang tergambar. Buatlah bentuk lingkaran dengan layer bernama lingkaran.Mengganti warna huruf Pilih teks. Buatlah teks menggambar lingkaran dengan warna merah. pada properties klik text fill color ( ). 2. beri warna merah. 14 . Klik sembarang tempat untuk mengakhiri. layer teks 2. Tugas 1: 1. 3. jangan segan untuk bertanya. Cek hasil anda seperti berikut ini. pilih warna biru.

buatlah teks menggambar garis. Cek dengan hasil berikut ini. klik stroke height pada properties ( ). Simpanlah hasil kerja dengan nama drawing 2. 2.Tugas 2. 3. 4. Lanjutkan membuat layer baru bernama garis. buatlah garis dengan menggunakan line tool ( ) dengan warna biru. 15 . Rubah juga bentuk garis sesuai keinginan dengan klik stroke style ( ). Buatlah layer baru dengan nama teks 3. Rubahlah ketebalan garis dengan memilih garis. warna biru. 1.

akhiri dengan double klik. ok. Semula layer 1 menjadi garis 16 . Membuat Dokumen baru Pilih File. Mengganti layer 1 menjadi garis Lakukan double klik pada layer 1. maka muncul gambar seperti berikut. animasi frame to frame merupakan model yang paling sederhanan. ganti dengan mengetikkan kata garis.BAB Animasi Frame to Frame 3 Berbagai model animasi yang ada. New. Flash Document.

dengan ketebalan 6. Pointer di timeline 10. paste in place. geser garisnya.75 sehingga menjadi gambar berikut. copy. warna biru. buat garis vertikal. insert blank keyframe pada timeline. Insert Blank Keyframe.Membuat Garis Pilih line tool ( ). klik sembarang lokasi pada stage. 3 Klik kanan. Insert Blank Keyfrane Pilih garis. klik kanan pilih paste in place. Pilih garis dengan menggunakan selection tool ( ). klik garis. klik kanan. Copy. Copy 1 2 Pada stage. Paste in Place 17 . Klik kanan.

seperti berikut ini. save beri nama frame2frame 18 . Menyimpan File. 4 Titik 1 Titik 2 Menggeser garis dari titik 1 ke 2 Ulangi 4 kali hingga timeline ke 40.

Test Movie. Close Pilih Close Button untuk mengakhiri 19 .Menjalankan Animasi Pilih menu Control. Lihatlah gerakan animasinya.

Ok. Flash Document. Pembuatan animasi dengan metode tweening atau in betweening yaitu pengguna hanya perlu membuat adegan awal dan adegan akhir saja. 2 Muncul jendela convert to symbol. 20 . 4 Klik kanan mouse. pilih convert to symbol. pilih insert keyframe. New. buatlah gambar kotak di stage. 5 Geser kotak ke kanan (panjang sesuai keinginan). 3 Pilih Frame 25. Membuat dokumen baru Pilih menu File. kemudian computer akan menggenerate secara otomatis frame-frame antaranya yang disebut in between. juga dapat menggunakan tweening. klik kanan.BAB Animasi Tweening 4 Animasi selain menggunakan frame toframe. akhiri dengan menekan tombol keyboard enter. isikan name: kotak 1 dan pilih type graphic. pilih Ok untuk menutup jendela. Menggambar kotak Pilih rectangle tool ( ). Membuat Layer Lakukan double klik pada layer name (layer 1). ganti menjadi kotak. Convert to Symbol 1 Pilih gambar kotak pada stage menggunakan selected tool ( ).

caranya: Klik kanan pada timeline antar frame. pilih Creat motion tween. 21 . 1 2 3 4 5 Geser ke tempat baru Memberi efek Motion Tujuannya adalah agar gerakan kotak menjadi halus.

akhiri dengan menekan close ( ). klik save. Melihat Hasil Pilih menu control. 22 . test movie Llihatlah gerakan kotak ke kanan.Menyimpan Simpanlah hasil kerja dengan nama tweening.

New. menggambar lingkaran menggunakan oval tool ( ) menjadi bentuk berikut. Membuat Dokumen Baru Pilih menu File. Ok.BAB Animasi Motion Guide 5 Motion guide artinya obyek akan bergerak sesuai garis panduan yang dibuat. Flash Document. 23 . Pilih ikon motion guide ( ) 2. Merubah layer name layer 1 menjadi lingkaran. Membuat Motion Guide 1. Membuat garis guide menggunakan pencil tool ( ) 3.

24 . 5. type graphic.4. pilih convert to symbol. akhiri dengan memilik Ok. pilih insert keyframe. klik kanan. klik kanan. memberinya nama lingkaran. Pada time line 25. Memilih lingkaran.

Bandingkan perintah keyframe yang berupa titik di timeline. Klik pada time line 25 di guide. 7. pilih insert frame. Nampak ada perubahan di frame kotak putih kecil di time line. dan garis guide terpilih. Gambar guide menjadi tak tampak seperti berikut ini. 25 . 6. perubahan arsiran. Memilih keyframe timeline 25. lakukan klik kanan time line 25.

geser lingkaran ke ujung lainnya. Pilih tween motion agar animasi berlangsung halus/tidak kaku 26 . Pilih keyframe lingkaran time line 1. 8.

Tutup test movie dengan menekan close ( ). Lakukan pengetesan perjalanan lingkaran agar sesuai dengan garis guide (pandu) dengan menggeser kotak merah di time line. Melihat hasil animasi. 10. test Movie.9. pilih menu Control. 27 .

28 .

pilih convert to symbol. Flash Document. 2. Merubah layer 1 menjadi bejana (karena cara sama dengan sebelum bab 6 maka penjelasan tidak diulang). Membuat Dokumen baru. Merubah kotak menjadi symbol dengan klik kanan pada kotak. 1. New. Menggambar kotak menggunakan rectangle tool ( ) rubahlah warnanya sesuai keinginan. dengan script ini animasi lebih menarik dan interaktif. Ok. 29 .BAB Simple Action Script 6 Action script merupakan bahasa script yang digunakan dalam pemrograman flash. pilih menu File. 3. 4.

30 . Menggambar kotak. dan type graphic. Membuat layer baru zat cair 6. berikan warna berbeda.Mengisi name bejana. akhiri dengan Ok. 5.

Memasukkan keyframe layer zat cair pada timeline 30. 31 . klik kanan. free transform. Free Transform Pilih kotak zat cair. 9. Memasukkan frame dengan klik pada time line 30 layer bejana. klik kanan pilih insert frame. Lakukan klik kanan pada time line 30 layer zat cair. Artinya bejana akan bergerak hingga waktu ke-30. 8. 7. pilih keyframe.

pilih tween: Shape. 32 . Pilih time line 1. klik sembaran lokasi di stage.Geser ke atas kotak zat cair 10. layer zat cair Pada properties.

stop. klik time line 1. Lihat juga hasil animasi dengan menggeser kota merah di time line. warna kuning juga bergerak. Gambar yang betul ketika bergeser. Klik tanda add a new item to the script ( ). Pilih Action untuk memunculkan Action panel. Membuat Script Stop 1. 2. 33 .Lihat ada perubahan di time line. Buat layer baru Stop. timeline control. pilih global function.

Klik tanda minimize ( ) untuk menutup Action panel. button. 3. Memunculkan library button. Geser ke kanan. 3. pilih bentuk buttonnya. dengan pilih window. Membuat layer baru tombol Play 2. commont library. circle flat purple 34 . Membuat Script Tombol Play 1. Pilih button circle flat.

pilih global functions. Pilih Action ( ) untuk mengeluarkan Action panel 2. 5. 4. Tekan dan geser ke stage. ubah ukuran agar serasi dengan gambar menggunakan free transform tool ( ). Pilih tanda add a new item to the script ( ). 35 . on. movie clip control. Memberi Action pada tombol play 1.

pilih global functions. play 36 .Pada jendela mucul script berikut Pilih tanda show code hint ( ) setelah tanda kurung buka. Tekan enter setelah buka kurung kurawal Pilih tanda . pilih release dengan cara double klik muncul tambahan script. timeline control.

Script akhir tombol play bertambah menjadi Minimize kan action Lakukan Test Movie. jika enter dipilih maka animasi bergerak 37 .

klik save. 3. Mengatur Lebar layer 1. Lakukan penyimpanan kembali dengan menu File. Pilih Properties. ubah ukuran (size) menjadi 250 x 300 agar tidak banyak halaman yang nampak kosong. beri nama action script. save 38 . pilih menu File.Menutup layer dengan menekan tanda close ( ) Lakukan penyimpanan. save as. 2.

agar mudah dibuka perlu dibuat format file publikasi. Publish Setting.BAB Presentation Publishing 7 Melanjutkan praktek sebelumnya. Pilih Menu File. 39 . 1.

pilih publish 3.exe.2. 40 . Pilih OK Hasil publish bisa dibuka dengan double klik. Keluar jendela pilih *.

41 .Hasil seperti berikut ini.