Flash for Presentation

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

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.

BAB

Sekilas Macromedia Flash 8

Menjalankan Macromedia Flash 8

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

Membuat Dokumen Baru

Pilih File, New

Muncul jendela New Document

Pilih General, Flash Document,
Ok

Mengatur Dokumen Flash

Digunakan untuk untuk mengatur tayangan, background.

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

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.

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.

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.

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.

BAB

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

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

2
Pada stage,
Klik kanan,
Paste in Place

17

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

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.

Pilih Frame 25,

Klik kanan mouse, pilih insert keyframe,

Geser kotak ke kanan (panjang sesuai keinginan).

20

1
2

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

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

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

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