PART 1

MODUL PELATIHAN
MEDIA PEMBELAJARAN INTERAKTIF
Menggunakan
ADOBE FLASH CS3
Khoiru Nurfitri, M.Kom
Ismail Abdurroz
Abdurrozzaq Z. M.Kom
Fakultas Teknik, Universitas Muhammadiyah Ponorogo
 PART 1
Membuat Tampilan Menu Utama
Media pembelajaran sederhana (Wujud Benda)
A. Alat dan bahan
 Aplikasi Adobe Flash Sudah terinstal di laptop/komputer
 Logo Sekolah
 Materi dan Soal pilihan Ganda
 Gambar Background
 Alur Program
 Rancangan Tampilan-tampilan

1. Buka program Adobe Flash CS3 pada desktop dengan cara klik 2X. Jika program
tidak tampil pada desktop anda bisa mencari di Start - All Program

2. Berikut adalah tampilah awal Adobe Flash CS3 ketika berhasil terbuka, pilih Flash
File (ActionScript 2.0) untuk memulai kerja
 3. Secara otomatis tampilan lembar kerja flash AS 2 (ActionScript 2.0) akan terbuka
seperti berikut:

4. Simpan pekerjaan anda terlebih dahulu sebelum memulai pembuatan projek. Simpan
dengan langkah berikut:
a. Klik menu file – pilih save As
 b. Pilih lokasi penyimpanan. Sebaiknya simpan jadi satu folder dengan alat dan
bahan yang sudah disiapkan seperti materi, logo, dll.

c. Tuliskan nama file dengan Media Pembelajaran Sederhana

d. Klik Save

5. Untuk tahap pembuatan media pembelajaran pertama yaitu dimulai dari pembuatan
tampilan Intro dan Menu Utama
a. Membuat background Media
1) Tentukan ukuran background dengan cara klik stage (area kerja) kemudian
lihat propertis. Klik menu size.

Atur ukuran menjadi 800 x 600

Klik OK.
2) Arahkan pointer (mouse) ke layer 1. Ganti namanya menjadi”BG” dengan
cara klik 2X.

Ganti menjadi
BG

Biasakan tekan enter jika sudah selesai memberi nama layer.

3) Klik layer BG pada frame 1

Pastikan frame 1 berwarna hitam

4) Klik Menu File – pilih Import – import to stage

5) Cari gambar yang akan dijadikan background atau gambar latar dari media
pembelajaran

Kalau sudah ketemu klik Open

6) Maka akan gambar akan tampil di lembar kerja

Untuk mengubah ukuran gambar anda bisa klik free transform tool

Silahkan diubah ukurannya dengan cara tekan shift pada keyboard dan klik
pojok gambar bukan tepi gambar untuk menghindari perubahan ukuran
gambar yang tidak proporsi.
Jika objek terlalu besar dan menutupi area kerja anda bisa mengecilkan layar
dengan klik menu pilihan ukuran tampilan yang berada di pojok kanan atas
lembar kerja – pilih show all

Sesuaikan objek gambar dengan ukuran lembar kerja.

 Background media sudah jadi, selanjutnya kunci layer background dengan klik
menu kunci pada layer supaya tidak mengganggu langkah selanjutnya

b. Membuat judul media pembelajaran

1) Klik insert layer
2) Ganti namanya menjadi “judul”

Sekarang kita mempunya 2 layer. Pastika layer BG masih terkunci

3) Klik text tool untuk memulai membuat judul

4) Arahkan pointer ke layar kerja dan mulailah menulis judul.

Kita akan membuat animasi text yang berjalan dari kiri lembar kerja menuju
tengah lembar kerja, maka tuliskan text di sebelah kiri lembar kerja, seperti
berikut:
5) Atur ukuran dan warna text pada propertis di bagian bawah lembar kerja

Biasakan klik selection tool setelah menulis text supaya text terkunci
6) Sekarang kita akan mulai membuat animasi, klik kanan frame 20 pada layer
judul

7) Pilih insert keyframe

8) Tampil frame seperti berikut

9) Pada frame 20 ini geser posisi text judul ke tengah area kerja dengan
menggunakan selection tool

10) Blok frame 1 sampai frame 20 pada layer judul

11) Pastikan frame 1 sampai frame 20 berwarna hitam, Klik kanan di area hitam
dan pilih motion tween

12) Maka frame akan berubah seperti berikut

13) Judul sudah jadi, sekarang kita akan membuat nama mata pelajaran. Kali ini
kita juga akan membuat animasi pada text nama mata pelajaran, tetapi animasi
akan berjalan dari kiri lembar kerja menuju lembar kerja.
14) Tambahkan layer baru seperti cara diatas (menambahkan layer judul), klik
new layer, ganti nama layer menjadi “MP”

Sekarang kita mempunyai 3 layer

15) Aktifkan layer MP frame 1, dengan klik 1X pada frame 1

16) Tuliskan text (nama mata pelajaran masing-masing) dengan menggunakan text
tool di sebelah kanan lembar kerja.

Atur posisinya agak kebawah, jangan sejajar dengan dengan text Media
Pembelajaran Interaktif, supaya nanti tidak terjadi tabrakan ketika
dianimasikan. Lihat contoh pada gambar di atas.
17) Klik kanan di frame 20 (masih di layer MP). Pilih insert keyframe

18) Geser text menggunakan text tool menuju ke tengah lembar kerja
 19) Blok frame 1 sampai frame 20. Kemudian klik kanan pada area blok pilih
insert motion tween (seperti membuat animasi pada Media Pembelajaran
Interaktif)

Pembuatan judul sudah selesai

c. Menambahkan gambar pada menu utama

1) Tambahkan layer baru dan ganti namanya menjadi “gambar”

1) Klik frame 1 pada layer gambar

2) Klik menu file – import – import to stage untuk mengambil gambar. Pastikan
gambar dalam format gambar JPEG, JPG, atau PNG

Pilihlah gambar yang sesuai dengan materi pembahasan. Karena saya

membahas tentang wujud benda maka saya menggunakan gambar beriku:

Gambar berikut bisa didapatkan dengan cara download dari internet atau yang
lainnya.
 3) Sesuaikan ukuran menggunkan free transform tool
4) Posisikan letak objek sesuai selera menggunakan selection tool

5) Klik kanan frame 21 (layer gambar), pilih insert fram, supaya gambar tampil
terus

d. Membuat tombol/menu pada menu utama

Tombol yang akan kita buat ada 4 yaitu:
1) Tombol untuk materi
2) Tombol untuk soal
3) Tombol untuk info, dan
4) Tombol untuk keluar
Lakukan langkah berikut:
a) Tambahkan layer baru dan ganti namanya menjadi “tombol”

b) Klik kanan frame 20 pada layer tombol, pilih insert blank keyframe

c) Klik regtangle tool untuk memulai mebuat menu

Jika tidak tampil kotaknya, silahkan klik lama pada mouse supaya pilihan
bentuk muncul
Jika sudah klik rectangle tool silahkan gambar kotak pada layar

d) Copy gambar kotak dengan cara:

- Blok gambar kotak dengan selection tool
- Tekan ctrl+D (duplikat) pada keyboard
- Maka gambar akan terduplikat seperti berikut:
e) Geser posisi gambar kotak hasil duplikat ke bawah kotak pertama
Duplikat
f) lakukan duplikat gambar sampai 4, karena kita akan membuat 4 tombol,
seperti tampak pada gambar berikut:

g) klik text tool untuk memberikan nama pada masing-masing tombol,

berikut langkahnya:
- klik text tool

- tuliskan text “Materi” di atas gambar kotak yang paling atas terlebih
dahulu

Jangan lupa klik selection tool setelah selesai menulis text.

- Dengan langkah yang sama tuliskan nama tombol pada gambar kotak ke
dua dan seterusnya dengan nama seperti berikut:

- Sekarang kita akan mengubah gambar-gambar kotak tersebut menjadi

tombol, lakukan blok masing-masing kotak dengan menggunakan
selection tool
 Pastikan hasil blok tampak seperti berikut:

Kotak dan text

sama-sama
terseleksi

- Klik kanan pas di area blok, kemudian pilih convert to symbol

- Berikan nama pada Name yaitu “materi”, dan untuk type pilih Button

Klik OK
- Secara otomatis button yang baru saja dibuat akan tampil di library
 - Lakukan langkah yang sama untuk mengubah gambar kotak di bawah
materi menjadi tombol seperti membuat tombol materi, seperti berikut:

Gambar ini
sudah menjadi
tombol/menu

Untuk meyakinkan anda bisa lihat di library

e. Jika tombol sudah jadi, langkah selanjutnya adalah membuat tampilan berhenti,
untuk mencegah tampilan jalan terus
f. Klik kanan frame 20 pada layer tombol, pilih action

Tuliskan script berikut:

Tulis dengan huruf kecil semua

stop ();
 Klik silang pada action untuk menutup action

Test program dengan tekan ctrl+enter pada keyboard.

Note:
Mohon ditunggu . . . . Tutorial Part 2 sedang proses pembuatan ^_^