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 [Link]
(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 Menggambar Obyek (Object
2
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 ( ) untuk mengganti warna

arsir, dan stroke color ( ) 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
3
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 3
Pada stage,
Klik kanan,
Paste in Place

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 Animasi Tweening
4

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.
Muncul jendela convert to symbol, isikan name: kotak 1 dan pilih type graphic,
2
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

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
5

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 [Link] 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
6

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
7
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