Laporan Praktikum

Modul 6 – Macromedia Flash 8

Mata kuliah :

CF 1310 | Pengantar Teknologi Informasi

Disusun oleh :

Nama Route Gemilang 5208 100 073

Semester Ganjil 2008/2009

Jurusan Sistem Informasi

Fakultas Teknologi Informasi

Institut Teknologi Sepuluh Nopember

Surabaya

Laporan Pendahuluan

Tugas Pendahuluan 6 mengenai Macromedia Flash 8

Laporan Praktikum adalah laporan yang dibuat setelah melakukan praktikum,

laporan itu dibuat dalam bentuk file PDF, tujuan dibuatnya Laporan Praktikum adalah

sebagai bahan evaluasi dan laporan kita setelah melakukan praktikum. Isi dari Laporan

Praktikum sendiri adalah mengenai modul yang dipersentasikan oleh Tutor yang

mendapatkan tugas untuk mempersentasikan.

Tugas Pendahuluan 6 adalah Tugas yang diberikan kepada para Praktikkan sebelum

melakukan praktikum. Tugas Pendahuluan 6 merupakan kelanjutan dari Tugas-tugas

Pendahuluan sebelumnya, tetapi Tugas Pendahuluan 6 ini mengenai Macromedia Flash 8,

soal-soal yang diberikan pun mengenai Macromedia Flash 8. Soal-soal itu diberikan dalam

bentuk soft copy yang dapat dilihat di websi.its-sby.edu/elearning.

Soal-soal Tugas Pendahuluan 6 adalah

1. Apa yang bisa anda hasilkan dengan menggunakan aplikasi Flash. Berikan

referensi yang mendukung jawaban anda?

2. Jelaskan fungsi dari salah satu fasilitas Flash pada gambar ini?

3. Berikan penjelasan pada masing masing toolbar dibawah ini?

4. Berikan penjelasan mengenai :

o Motion Tween

o Motion Shape

o Motion Guide

o Scene

o Masking

o Action Script

Tujuan diberikannya soal-soal Tugas Pendahuluan ini adalah untuk memudahkan

dalam memahami modul yang dibawakan oleh Tutor mengenai Macromedia Flash 8. Soal-

soal ini dikumpulkan sehari sebelum melakukan Praktikum dan dikumpulkan dalam bentuk

file PDF.

Cara mengumpulkan Tugas Pendahuluan 6 ini dapat dikumpulkan dengan cara

mengirimkan hasil Tugas Pendahuluan ke alamat email para Asisten masing-masing

kelompok atau dapat dikumpulkan langsung ke para Asistensi masing-masing dalam bentuk

soft copy.

Tutor yang mempersentasikan modul mengenai Macromedia Flash 8 ini adalah

Tutor kelompok 6 dari masing-masing shift. Tutor kelompok 6 shift 1 mempersentasikan

modul mengenai Macromedia Flash 8. Tutor kelompok 6 ini mempersentasikan mengenai

modul Macromedia Flash 8 ini pada tanggal 2 Desember 2008 . Persentasi dan Praktikum ini

dilakukan di Lab Sistem Informasi Jurusan Sistem Informasi. Anggota dari Tutor kelompok 6

shift 1 sendiri adalah Chanif, Nila, Annisa, Wiga, Cherry, Ika, Lika, Yulia, Tata.

Tutor kelompok 6 mempersentasikan modul mengenai Macromedia Flash 8 ini

dengan bahan materi persentasi yaitu mengenai pengertian atau fungsi dari Macromedia

Flash 8, Membuat Animation Motion Tween, Animation Motion Shape, Animation Motion

Guide

Materi yang dibawakan oleh Tutor kelompok 6 shift 1

Materi-materi yang dibawakan oleh Tutor kelompok 6 shift 1 ini mengenai

Macromedia Flash 8, antara lain :

1. Pengertian Motion Tween

Motion Tween adalah keadaan dimana kita dapat mengatur property seperti

ukuran, posisi, dan rotasi untuk sebuah instance, grup atau text block dalam

satu waktu.

2. Cara Membuat Motion Tween

Langkah-langkah :

a. Klik file > new

b. Setelah muncul halaman utama. Kita dapat mengaturnya ukuran stagenya

di properties. contoh:

Keterangan : Width :550 px

Heigth :400 px

Bacground : #0000FF

Frame Rate : 12

Ruler Units : pixels

c. Pembuatan Obyeknya

• Pembuatan objek dapat dilakukan dengan mengklik Polysar Tool

pada tool panel

• Pada properties inspector klik tombol option untuk menampilkan Tool

Setting

• Lalu pada Style: star, number of sides: 5, Star point size: 0.00

Seperti gambar dibawah ini :

d. Setelah selesai diatur Drag objek yang sudah ditentukan pada stage. Maka

akan tampak seperti dibawah ini :

e. Selanjutnya klik kanan pada frame ke 40 lalu pilih Insert Frame

f. Klik kanan pada salah satu Frame dari ke 40 Frame yang tadi. Lalu pilih

Create Motion Tween. Maka dalam Frame akan terdapat garis putus-putus.

Seperti gambar di bawah ini :

g. Klik kanan pada Frame yang paling akhir, lau pilih Insert Keyframe. Maka

timeline akan berubah seperti dibawah ini :

h. Pada saat Frame 40 pindahkan objek ke tempat lain misalnya disudut kanan

bawah. Lalu klik menu Modify > Transform > Scale and Rotate. Kemudian

atur scale dan rotate yang kita inginkan

Pada Scale kita atur 150% dan pada rotate kita atur 90 degree. Lalu klik OK

Untuk melihat hasil akhir dari apa yang kita buat cukup tekan Enter atau

Ctrl+enter. Untuk melihat tampilan Browsernya tekan F12. tapi simpan

terlebih dahulu file tersebut

3. Cara Membuat Motion Tween Efek Berputar

Langkah-langkah :

a. Membuat bentuk sembarang ( misal : kotak )

b. Meng-klik kanan frame 30 dan memilih Insert Frame

Maka muncul tampilan seperti ini :

c. Meng-klik kanan pada frame 15, lalu pilih Create Motion Tween

Terlihat garis putus-putus pada frame

d. Meng-klik Kanan pada frame 30 dan memilih Insert KeyFrame

Terlihat tanda panah dari frame 1 sampai frame 30

e. Meng-klik kanan frame 15, pilih Insert Keyframe

f. Membuka panel Properties

g. Meng-klik Frame 1 untuk memilihnya pada Panel Properties, tentukan

rotate = CCW untuk memilih berputar berlawanan dengan jarum jam.

h. Menentukan Times = 3 untuk memutar objek 3 kali selama bergerak dari

frame 1 sampai frame 15.

i. Meng-klik frame 15 untuk memilihnya

j. Pada panel Properties, tentukan Rotate = CW untuk memutar objek searah

jarum jam.

k. Tentukan Times = 2 untuk memutar objek 2 kali selama bergerak dari

frame 15 sampai frame 30.

Menekan Enter untuk melihat hasilnya.

4. Pengertian Motion Shape

Adalah Animasi yang digunakan untuk membuat animasi obyek yang dapat

berubah bentuk dan juga mengubah tempat.

5. Cara Membuat Motion Shape

Langkah-langkah :

a. Pilih Oval Tool dan buat lingkaran pada frame ke 1 Timeline Layer 1

b. Pilih Rectangular Tool , buat lingkaran pada frame ke 25 Timeline Layer 1

dgn insert keyframe terlebih dahulu dan delete obyek oval yg sebelumnya.

c. Klik di sembarang frame antara frame 1-25 . Lalu mengubah tween pada

properties menjadi shape.

d. Perhatikan frame 1-25 pada timeline , muncul Arrow , background

berwarna hijau muda (ciri motion shape)

6. Pengertian Motion Guide

adalah animasi yang bergerak menyusuri sebuah lintasan atau alur.

7. Cara Membuat Motion Guide

Langkah-langkah :

• Buat lembar kerja baru.

• Buat objek lingkaran pada lembar kerja.

• Klik kanan pada keyframe lalu pilih Create Motion Tween.

• Klik icon Add Motion Guide.

• Pilih panjang frame yang diinginkan kan lalu buat lintasan yang akan

dilewati oleh objek.

• Pilih frame paling awal, lalu letakkan objek pada lintasan awal.

• Kemudian, tentukan pula letak objek pada lintasan akhir, dengan memilih

frame yang paling akhir.

• Pilih frame paling awal, lalu letakkan objek pada lintasan awal.

• Kemudian, tentukan pula letak objek pada lintasan akhir, dengan memilih

frame yang paling akhir.

8. Cara Membuat Symbol Button

Langkah-langkah :

• Siapkan Lembar kerja baru

• Klik Insert F lalu New SymboL, sehingga muncul dialog box sebagai berikut

:

• Ketikkan nama button yang akan dibuat, semisal HOME.

• Pada pilihan behavior, pilih Button, Akhiri dengan OK.

Maka akan muncul tampilan sebagai berikut :

• Klik pada frame “Up” dan buat objek teks HOME dengan warna ungu tua.

• Selanjutnya, klik kanan pada frame over F Insert Keyframe, ubah warna

teks.

• Klik kanan pada frame Down F Insert Key Frame, ubah warna teks.

• Klik kanan pada frame Hit F Insert Keyframe, ubah warna teks.

• Setelah selesai membuat tombol, klik Scene 1 untuk kembali ke lembar

utama movie.

• Drag and Drop tombol Home yang telah kita buat, letakkan sesuai

keinginan.

• Untuk preview, tekan tombol F12 pada keyboard

9. Cara Membuat Banner

Langkah-langkah :

• Membuka Macromedia Flash 8, kemudian pada panel Create new kita

memilih flash document.

• Mengatur Panjang Lebar dari Stage, klik menu Modify à Document, ubah

Dimensions menjadi width = 500px dan height = 150px (sesuai dengan

ukuran gambar) dan background hitam (#000000).

• Membuat 2 layer, yaitu masked dan tulisan.

• Pada layer tulisan frame ke-1, membuat sebuah tulisan “KOMUNITAS

PECINTA WEB” dengan warna putih di tengah stage, atur posisi sesuai

dengan keinginan anda, kemudian pada frame ke-50 insertkan frame.

• Pada layer masked frame ke-1, membuat sebuah lingkaran berbentuk elips

berwarna hitam, letakkan di samping kiri dari stage

• Pada layer masked frame ke-50, kita insertkan KeyFrame. Lalu mengubah

posisi lingkaran elips ke samping kanan stage.

• Pada layer masked frame ke-1, Create Motion Tween.

• Pada layer masked, klik kananà mask.

• Menjalankan movie dengan cara mengklik menu ColtrolàPlay (enter) untuk

melihat jalannya frame. Atau dengan ColtrolàTest Movie (ctrl+enter) untuk

melihat jalannya Movie pada Flash Player.

Selain mempersentasikan Modul 6 Tutor kelompok 6 shift 1 juga memberikan soal

Post Test, soal Post Test itu adalah

Buatlah web menggunakan flash dengan ketentuan:

o Font Verdana 10

o button berupa object (telah tersedia)

o banner sesuai dengan contoh (banner.swf)

Penyelesaian :

1. Membuka Macromedia Flash

klik start all program macromedia macromedia flash 8.

2. Pembuatan Website

Pilihlah Flash document pada Create New pilih flash document pada General klik

ok.

Aturlah Panjang dan Lebar dari Stage dengan cara meng-klik menu Modify

Document, kemudian ubahlah Dimensions menjadi width = 550 px dan height =

400px dan background hitam (#000000) atau langsung dari kotak properties.

Pembuatan banner

Pada pembuatan banner, kita akan membuat banner secara eksternal, yaitu pada

dokumen flash yang lain.

Buka dokumen flash baru, kemudian buatlah layer baru.

Pada layer 1 ganti namanya menjadi banner dengan mengklik 2 kali pada layer

name.

Klik file import import to stage pilih image banner ok

Kemudian akan muncul image banner, atur ukurannya dengan mengklik icon free

transform tool.

Klik kanan pada frame 40 layer banner insert keyframe

Klik icon insert new layer ubah nama layer menjadi masking klik frame 1 pada

layer masking klik icon oval tool buat lingkaran letakkan disamping kiri dari

stage.

klik kanan pada layer masking frame 40 insert keyframe ubah posisi lingkaran

kesamping kanan stage klik kanan pada frame 8 layer masking create motion

tween klik kanan pada layer masking mask.

Untuk melihat hasilnya tekan CTRL+ENTER

Pembuatan halaman utama

Pilih Flash Document dan klik. Kemudian muncul jendela Flash seperti berikut.

Kembali ke soal post test, pada lembar kerja warna backgroundnya adalah hitam jadi

beri warna background hitam dengan memilih warna Background dalam Properties.

Sehingga warna background akan berubah seperti gambar di bawah.

Setelah itu kita akan men\mbuat tombol tombol dengan cara :

Insert new layer rename menjadi home pilih menu insert new symbol pada

kotak create new symbol ketik home pada name pilih button pada type ok.

Lalu klik pada frame up pilih file import import to stage pilih image home

ok

Pada frame over klik kanan insert blank keyframe pilih file import

import to stage pilih image home over ok

Pada frame down klik kanan insert blank keyframe pilih file import

import to stage pilih image home down ok

Klik scene drag button ke stage atur posisinya

Lakukan langkah yang sama untuk membuat tombol – tombol laiinya, seperti profile,

archives, dll.

Kliklah pada tombol home, kemudian pada menu actions ketikkan actions scrip

On (press) {

gotoAndStop (1)

}

Ket. Angka 1 pada script diatas merupakan tempat dimana tombol – tombol tersebut

terletak pada time line

Misal : 1 pada home, 10 pada profile, dst.

Pada layer profil, forum, archive dan diary, lakukan hal yang sama seperti pada

tombol home untuk mebuat link.

Klik ctrl + enter.

NB. Agar lebih mudah membedakannya, buatlah layer yang berbeda untuk setiap

tombol, konten serta banner.

Tulislah untuk konten masing-masing button dengan isi sebagai berikut:

Kendala-kendala dalam pengerjaan posttest adalah soal posttest terbilang cukup sulit

dan terlalu banyak animasi yang harus dibuat sedangkan waktu yang disediakan masih

kurang. Tutor kurang menyinggung masalah pembuatan website.

Saran mungkin dapat dalam pembuatan soal post test jumlahnya soal seharusnya

diperhitungkan dengan waktu yang diberikan untuk mengerjakan. Tapi selebihnya, Tutor

sudah cukup baik, ini terbukti dalam pembagian tugas antar anggota dalam

mempersentasikan sudah terorganisir.