Tutorial Flash

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

Pilih properties, size: 550 x 400 pixels Muncul jendelaDocument properties. 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 Ok untuk mengakhiri. Lihatlah perubahan background

Menyimpan Dokumen Flash Pilih File, Save As

5

Simpan di D: Prak TI beri nama dasar-daar flash, pilih save untuk mengakhiri.

Mengimpor Media Digunakan untuk mengambil gambar dari tempat/folder lain yang sudah jadi seperti foto atau hasil scan. Pilih File, Import, Import to Stage.

Muncul Jendela Import, pilih misal gambar picture1.wmf (atau ekstensi lain seperti jpg, bmp), Pilih open untuk membuka gambar.

6

Gunakan View, Zoom Out untuk menampakkan seluruh gambar (memperkecil gambar). Untuk memperbesar gambar gunakan menu View, Zoom In.

Gunakan Scroll horizontal atau vertikal di sebelah stage untuk memposisikan gambar.

Import dapat dilakukan langsung ke library (disimpan di program Flash) dengan cara Pilih File, Import, Import library.

7

Agar gambar yang dipilih tersedia/muncul di library, pilih menu Window, Library

.

Gambar muncul di kotak library seperti berikut ini.

Mengorganisir Layer Double klik pada layer1 ganti tulisan dengan mengetikkan kata foto, lakukan double enter untuk mengakhiri.

8

Membuat layer baru Pilih insert layer (

), double klik layer 2, ketik tulisan teks. Maka terbentuk layer

baru.

Membuat Teks Pilih Text tool (T)

, tekan dan geser pointer pada gambar (stage) sampai berbentuk

kotak, ketik Kampus Unissula sehingga menjadi bentuk seperti berikut. Klik sebarang lokasi untuk mengakhiri tulisan.

9

BAB

2

Menggambar Obyek (Object Drawing

Diawali dengan membuka file baru, kali ini menggambar obyek kotak dan menulis teks. Menggambar Obyek Pilih file, New

Muncul kotak New Document, pada general pilih flash document, akhiri dengan Ok.

10

Pilih rectangle tool (

)

Lakukan penggambaran dengan tekan mouse, geser ke kanan dan bawah, lepaskan mouse.

11

Merubah Warna Pilih selection tool (

)

Pilih properties pada property panel, pilih fill color ( arsir, dan stroke color (

) untuk mengganti warna

) untuk perubahan warna garis.

12

Mengganti nama layer Double klik pada layer 1, ketik kotak.

Membuat Layer baru Pilih insert layer (

), double klik pada later 2, ketik teks akhiri dengan menekan

tombol enter pada keyboard. Pilih text tool (

), buatlah kotak untuk mengisi tulisan,

lakukan pengetikan menggambar akhiri dengan enter sehingga menghasilkan bentuk berikut ini.

13

Mengganti warna huruf Pilih teks, pada properties klik text fill color (

), pilih warna biru. Klik sembarang

tempat untuk mengakhiri.

Tugas 1: 1. Buatlah bentuk lingkaran dengan layer bernama lingkaran, beri warna merah. 2. Buatlah teks menggambar lingkaran dengan warna merah, layer teks 2. 3. Cek hasil anda seperti berikut ini.

Jika belum sama dengan yang tergambar, jangan segan untuk bertanya.

14

Tugas 2. 1. Lanjutkan membuat layer baru bernama garis, buatlah garis dengan menggunakan line tool (

) dengan warna biru.

2. Buatlah layer baru dengan nama teks 3, buatlah teks menggambar garis, warna biru. 3. Rubahlah ketebalan garis dengan memilih garis, klik stroke height pada properties (

), Rubah juga bentuk garis sesuai keinginan dengan klik stroke style

(

).

4. Cek dengan hasil berikut ini.

Simpanlah hasil kerja dengan nama drawing 2.

15

BAB

3

Animasi Frame to Frame

Berbagai model animasi yang ada, animasi frame to frame merupakan model yang paling sederhanan. Membuat Dokumen baru Pilih File, New, Flash Document, ok, maka muncul gambar seperti berikut.

Mengganti layer 1 menjadi garis Lakukan double klik pada layer 1, ganti dengan mengetikkan kata garis, akhiri dengan double klik.

Semula layer 1

menjadi garis

16

Membuat Garis Pilih line tool (

), buat garis vertikal, warna biru, dengan ketebalan 6,75 sehingga

menjadi gambar berikut.

Copy, Insert Blank Keyframe, paste in place. Pilih garis dengan menggunakan selection tool (

), klik garis, copy, insert blank

keyframe pada timeline, klik sembarang lokasi pada stage, klik kanan pilih paste in place, geser garisnya. Pointer di timeline 10, klik kanan, Insert Blank Keyfrane Pilih garis, Klik kanan, Copy

1

2 Pada stage, Klik kanan, Paste in Place

3

17

4

Titik 1

Titik 2

Menggeser garis dari titik 1 ke 2 Ulangi 4 kali hingga timeline ke 40, seperti berikut ini.

Menyimpan File, save beri nama frame2frame

18

Menjalankan Animasi Pilih menu Control, Test Movie. Lihatlah gerakan animasinya.

Close

Pilih Close Button untuk mengakhiri

19

BAB

4

Animasi Tweening

Animasi selain menggunakan frame toframe, juga dapat menggunakan tweening. Pembuatan animasi dengan metode tweening atau in betweening yaitu pengguna hanya perlu membuat adegan awal dan adegan akhir saja, kemudian computer akan menggenerate secara otomatis frame-frame antaranya yang disebut in between.

Membuat dokumen baru Pilih menu File, New, Flash Document, Ok.

Membuat Layer Lakukan double klik pada layer name (layer 1), ganti menjadi kotak, akhiri dengan menekan tombol keyboard enter.

Menggambar kotak Pilih rectangle tool (

), buatlah gambar kotak di stage.

Convert to Symbol 1

Pilih gambar kotak pada stage menggunakan selected tool (

), klik kanan,

pilih convert to symbol. 2

Muncul jendela convert to symbol, isikan name: kotak 1 dan pilih type graphic, pilih Ok untuk menutup jendela.

3

Pilih Frame 25,

4

Klik kanan mouse, pilih insert keyframe,

5

Geser kotak ke kanan (panjang sesuai keinginan).

20

1 2

3

4 5

Geser ke tempat baru Memberi efek Motion Tujuannya adalah agar gerakan kotak menjadi halus, caranya: Klik kanan pada timeline antar frame, pilih Creat motion tween.

21

Menyimpan Simpanlah hasil kerja dengan nama tweening, klik save.

Melihat Hasil Pilih menu control, test movie

Llihatlah gerakan kotak ke kanan, akhiri dengan menekan close (

).

22

BAB

5

Animasi Motion Guide

Motion guide artinya obyek akan bergerak sesuai garis panduan yang dibuat. Membuat Dokumen Baru Pilih menu File, New, Flash Document, Ok.

Membuat Motion Guide 1. Pilih ikon motion guide (

)

2. Membuat garis guide menggunakan pencil tool (

)

3. Merubah layer name layer 1 menjadi lingkaran, menggambar lingkaran menggunakan oval tool (

) menjadi bentuk berikut.

23

4. Memilih lingkaran, klik kanan, pilih convert to symbol, memberinya nama lingkaran, type graphic, akhiri dengan memilik Ok.

5. Pada time line 25, klik kanan, pilih insert keyframe.

24

Gambar guide menjadi tak tampak seperti berikut ini.

6. Klik pada time line 25 di guide, lakukan klik kanan time line 25, pilih insert frame.

Nampak ada perubahan di frame kotak putih kecil di time line, perubahan arsiran, dan garis guide terpilih.Bandingkan perintah keyframe yang berupa titik di timeline.

7. Memilih keyframe timeline 25,

25

geser lingkaran ke ujung lainnya.

8. Pilih keyframe lingkaran time line 1,

Pilih tween motion agar animasi berlangsung halus/tidak kaku

26

9. Lakukan pengetesan perjalanan lingkaran agar sesuai dengan garis guide (pandu) dengan menggeser kotak merah di time line.

10. Melihat hasil animasi, pilih menu Control, test Movie,

Tutup test movie dengan menekan close (

).

27

28

BAB

6

Simple Action Script

Action script merupakan bahasa script yang digunakan dalam pemrograman flash, dengan script ini animasi lebih menarik dan interaktif. 1. Membuat Dokumen baru, pilih menu File, New, Flash Document, Ok. 2. Merubah layer 1 menjadi bejana (karena cara sama dengan sebelum bab 6 maka penjelasan tidak diulang).

3. Menggambar kotak menggunakan rectangle tool (

) rubahlah warnanya sesuai

keinginan.

4. Merubah kotak menjadi symbol dengan klik kanan pada kotak, pilih convert to symbol.

29

Mengisi name bejana, dan type graphic, akhiri dengan Ok.

5. Membuat layer baru zat cair

6. Menggambar kotak, berikan warna berbeda.

30

7. Memasukkan frame dengan klik pada time line 30 layer bejana, klik kanan pilih insert frame. Artinya bejana akan bergerak hingga waktu ke-30.

8. Memasukkan keyframe layer zat cair pada timeline 30. Lakukan klik kanan pada time line 30 layer zat cair, pilih keyframe.

9. Free Transform Pilih kotak zat cair, klik kanan, free transform.

31

Geser ke atas kotak zat cair

10. Pilih time line 1, layer zat cair

Pada properties, pilih tween: Shape, klik sembaran lokasi di stage.

32

Lihat ada perubahan di time line.

Lihat juga hasil animasi dengan menggeser kota merah di time line. Gambar yang betul ketika bergeser, warna kuning juga bergerak.

Membuat Script Stop 1. Buat layer baru Stop, klik time line 1.

2. Pilih Action untuk memunculkan Action panel. Klik tanda add a new item to the script (

), pilih global function, timeline control,

stop.

33

3. Klik tanda minimize (

) untuk menutup Action panel.

Membuat Script Tombol Play 1. Membuat layer baru tombol Play

2. Memunculkan library button, dengan pilih window, commont library, button.

3. Geser ke kanan, pilih bentuk buttonnya. Pilih button circle flat, circle flat purple

34

4. Tekan dan geser ke stage,

5. ubah ukuran agar serasi dengan gambar menggunakan free transform tool (

).

Memberi Action pada tombol play 1. Pilih Action (

) untuk mengeluarkan Action panel

2. Pilih tanda add a new item to the script (

), pilih global functions, movie clip

control, on.

35

Pada jendela mucul script berikut

Pilih tanda show code hint (

) setelah tanda kurung buka, pilih release dengan cara

double klik muncul tambahan script.

Tekan enter setelah buka kurung kurawal

Pilih tanda

, pilih global functions, timeline control, play

36

Script akhir tombol play bertambah menjadi

Minimize kan action Lakukan Test Movie, jika enter dipilih maka animasi bergerak

37

Menutup layer dengan menekan tanda close (

)

Lakukan penyimpanan, pilih menu File, save as, beri nama action script, klik save.

Mengatur Lebar layer 1. Pilih Properties,

2. ubah ukuran (size) menjadi 250 x 300 agar tidak banyak halaman yang nampak kosong.

3. Lakukan penyimpanan kembali dengan menu File, save

38

BAB

7

Presentation Publishing

Melanjutkan praktek sebelumnya, agar mudah dibuka perlu dibuat format file publikasi. 1. Pilih Menu File, Publish Setting.

39

2. Keluar jendela pilih *.exe, pilih publish

3. Pilih OK

Hasil publish bisa dibuka dengan double klik.

40

Hasil seperti berikut ini.

41