8

BAB III

PERENCANAAN DAN PERANCANGAN

A. PERENCANAAN

1. Diagram Flowchart

Gambar 3.1 Diagram Flowchart

LOADING

HOME

INTRO

KI/KD

MATERI

LATIHAN

QUIZ

ENDING

9

2. Spesifikasi Alat dan Bahan

Spesifikasi alat dan bahan untuk membuat media

pembelajaran tentang pengertian dan manfaat

antropologi dengan Adobe Flash CS3 Professional

meliputi dua hal, yaitu hardware (perangkat keras)

dan software (perangkat lunak).

a. Hardware (perangkat keras)

Perangkat keras yang digunakan untuk

membuat media pembelajaran tentang pengertian

dan manfaat antropologi dengan Adobe Flash CS3

Professional adalah sebagai berikut:

1.) Laptop

2.) Flashdisk

b. Software (perangkat lunak)

Perangkat lunak yang digunakan untuk

membuat media pembelajaran tentang pengertian

dan manfaat antropologi dengan Adobe Flash CS3

Professional adalah sebagai berikut:

10

1.) Sistem Operasi Windows 10

Sistem operasi yang digunakan untuk

membuat media pembelajaran tentang

pengertian dan manfaat antropologi dengan

Adobe Flash CS3 Professional adalah Windows

10.

2.) Adobe Flash CS3 Professional

Adobe Flash CS3 Professional adalah

software yang digunakan untuk membuat

media pembelajaran tentang pengertian dan

manfaat antropologi berbasis multimedia.

3. Jadwal Penyusunan Tugas akhir

No Tanggal Kegiatan

1 28 Agustus 2018 Penentuan Judul TA

2 3 September 2018 Konsultasi makalah

bab 1

3 10 September 2018 Konsultasi loading &

outline font

4 29 Oktober 2018 Konsultasi projek +

11

Finish

5 29 Oktober 2018 Konsultai makalah

bab 2 , 3 & 4

6. 30 Oktober 2018 Konsultasi makalah

bab 5 + Finish

Gambar 3.2 jadwal kegiatan pembuatan projek

B. PERANCANGAN

1. Membuka program Adobe Flash CS3 Professional

a. Pastikan computer anda telah terinstal software

Adobe Flash CS3 Professional, kemudia jalankan

dengan cara double click icon Adobe Flash CS3

Professional pada desktop.

Gambar 3.3 Membuka aplikasi pada desktop

b. Jalankan aplikasi dengan cara langsung ke bagian

Create New, pilih Flash File (ActionScript2.0).

12

Gambar 3.4 Membuka Adobe Flash CS3 Professional

1. Langkah-langkah membuat media pembelajaran

Dalam pembuatan media pembelajaran dengan

menggunakan Adobe Flash CS3 Professional terdapat

langkah-langkah yang harus dilakukan, agar hasilnya bisa

seperti yang kita inginkan. Berikut langkah-langkahnya:

A. Membuat Loading

Loading ini dibuat dalam satu scene. Scene berada

pada kotak scene sebelah kanan lembar kerja. Kalau

kotak scene belum muncul anda bisa klik Shift+F2.

Setelah itu cara pembuatan loading adalah sebagai

berikut:

a. Membuka Adobe Flash CS3 Professional,

start> all programs> Adobe Master Collection

CS3> Adobe Flash CS3 Professional

13

b. Membuka lembar kerja baru, pada create

new> memilih ActionScript 2.0

Gambar 3.5 Membuka file baru

c. Ganti nama layer pertama menjadi background.

Gambar 3.6 Membuat Layer

d. Membuat layer background > import to stage >

memilih background

14

Gambar 3.7 Tampilan background

e. membuat layer baru dengan diberi nama kotak

loading. Pada layer kotak loading buat objek

menggunakan oval tool. Buat dua lingkaran yang

satu lebih kecil. Dan letakkan di tengahnya. Lalu

beri garis-garis pembagi untuk memberi warna

berbeda .

Gambar 3.8 Tampilan Loading

f. Animasi Loading dibuat berputar bergantian

dengan cara di insert keyframe gambar lingkaran

di potong lalu potongan tersebut dilanjut pada

Frame selanjutnya.

15

Gambar 3.9 Tampilan Pembuatan Loading.

g. Menambah layer berikan angka mulai dari frame

5 sampai frame 40 didalam lingkaran lalu insert

keyfrime beri prsentase 0%,20%, 40%, 60%, 80%,

100%.

Gambar 3.10 Tampilan Angka Didalam Loading

Gambar 3.11 Tampilan Hasil Loading

B. Membuat intro

a. Membuat layer background > import to stage

> memilih background

16

b. Menambah layer lalu memberi nama pada

layer “selamat datang” ˃ Insert keyframe.

c. Pada objek tulisan selamat datang dibuat

tulisan bergerak dengan > klik kanan >

f8(convert to syimbol) > movie clip > ok .

pada frame di layer selamat datang > klik

kanan > creat motion tween dengan jarak 5-

10 .lalu pindah tulisan ke tengah .

Gambar 3.12 Tampilan Teks Selamat Datang

d. membuat layer berisi lingkaran lalu klik kanan

> f8(convert to syimbol) > movie clip > ok >

pada frame lingkaran klik kanan > creat

motion tween lalu pindahkan lingkaran

tersebut ke lain tempat dalam frame (langkah-

langkahnya sama dengan membuat objek

tulisan bergerak.

17

Gambar 3.13 Tampilan Animasi Lingkaran

e. Membuat layer berisi kotak persegi panjang

lalu klik kanan creat motion tween sampai

frame 15. Pada gambar persegi panjang klik

kanan > f8(convert to syimbol) > movie clip >

ok > lalu pindahkan kotak tersebut ke lain

tempat.

Gambar 3.14 Tampilan Animasi Persegi Panjang

18

f. Menambah layer berisi tulisan skip dibawah

pojok kanan . lalu action tulisan skip on

(release) {gotoAndPlay("HOME",1);

}

Gambar 3.15 Tampilan Intro

C. Membuat Menu

a. Membuat layer background > import to

stage > memilih background

b. Membuat layer dengan nama home, ki/kd,

materi, latihan, kuis, dan profile,tombol

exit, kop, garis , garis tepi, logo man, its,

teks, profil, dan 1 layer untuk Action stop.

19

Gambar 3.16 Tampilan layer.

c. Pada layer garis buatlah garis menggunakan

line tool atur garis sesuai keinginan, pada

layer garis tepi juga masukkan garis sesuai

keinginan.

d. Pada layer logo ITS atau MAN import to stage

> masukkan gambar logo its dan man.

Tempatkan di atas garis, logo man sebelah

kiri , its sebelah kanan.

e. Pada layer kop masukkan teks di tengah logo

man dan its.

Gambar 3.17 Tampilan Kop

f. Pada layer home , ki/kd, materi, latihan dan

kuis buatlah kotak yang berguna sebagai

tombol setelah dibuat kotak agar lebih

20

bervariasi klik kanan > convert to syimbol

>button>ok . lalu klik dua kali pada kotak

tersebut Lalu, beri keyframe pada layer 1>

over. Kemudian rubah warnanya

menggunakan warna. Kemudian lakukan

langkah yang sama untuk pembuatan tombol

yang lain seperti ki/kd, materi, kuis, latihan,

dan profil. Buatlah masing-masing tombol

pada layer yang sudah ditentukan

Gambar 3.18 Tampilan Tombol.

g. Kemudian beri actions pada setiap tombol

dengan klik tombol F9 pada keyboard

anda. Lalu ketikkan rumus actions seperti

ini,

on(release){

gotoAndPlay("home",1);

Jika anda memberi actions pada tombol

home, ganti kodenya dengan “home”.

Jika memberi actions pada tombol ki/kd,

21

ganti kodenya dengan “ki/kd”. Lakukan

pemberian actions sampai tombol profil

Gambar 3.19 Tampilan actions pada tombol

h. Menambah layer diberi Animasi gambar

matahari , pada gambar matahari dibuat

bias berkedip . import to stage > gambar

matahari > klik dua kali > pada frame ke

5 insert keyframe > mport to stage >

gambar matahari tanpa mata> klik 2 kali

lagi untuk keluar dari frame .

Gambar 3.20 Tampilan Animasi Matahari

22

i. Kemudian duplicate scene ini untuk

scene ki/kd, materi, kuis, latihan.

Gambar 3.21 Tampilan scene.

j. pada layer teks di scene home masukkan

judul lalu create motion tween > perbesar

perkecil teks lalu insert keyframe

Gambar 3.22 Tampilan Home

k. Langkah terakhir klik pada layer tambahan

kemudian keyframe langsung pada frame

23

50, dengan menambahkan actions stop

untuk memberhentikan scene home

Gambar 3.23 Actions stop

D. Pembuatan KI/KD

Langkah untuk mengisi scene ki/kd ini sebagai

berikut:

a. Membuat layer dengan nama background

> import to stage > memilih background

b. Membuat leyer KI lalu tulis teks berisi

tentang kompetensi inti lalu create motion

tween >geser kekanan (sampai

ditengah)> insert key frime>.action >stop

( ).

24

Gambar 3.24 Tampilan KI

c. Membuat leyer KD lalu tulis teks berisi

tentang kompetensi dasar lalu create

motion tween >geser ke kiri (sampai

ditengah)> insert key frime>.

Gambar 3.25 Tampilan KD

d. Menambah layer terakhir insert

keyframe langsung pada frame yang

dituju untuk memberi action stop ()

E. Pembuatan Materi

25

Langkah untuk mengisi scene materi sebagai

berikut

a. Membuat layer dengan nama background >

import t o stage > memilih background

b. Menambahkan layer untuk mengisi teks

materi

c. Lalu menulis materi tentang pengertian dan

manfaat antropologi lalu insert keyframe lalu

beri Action stop ().

Gambar 3.26 Tampilan Teks Materi

d. Jika materi banyak maka beri tombol next

menuju leyer selanjutnya . dengan cara

import to stage (pilih gambar atau tombol

next) >convert to syimbol >button > action.

Seperti :

on (release) {gotoAndStop( );

26

}

e. Menambah layer terakhir insert keyframe

langsung pada frame yang dituju untuk

memberi action stop.

Gambar 3.27 Tampilan Action tombol Next

Gambar 3.28 Tampilan Materi

F. Membuat Latihan

Langkah membuat latihan adalah sebagai

berikut :

27

a. Membuat layer dengan nama background >

import to stage > memilih background

b. Tambahkan layer untuk menulis soal,

Ketikkan soal pertama pada layer kotak teks

frame 1 berserta jawaban pilihan ganda lalu

insert keyframe. Jawaban benar pada frame

2 dan jawaban salah pada frame 3, lakukan

sesuai jumlah soal yang di inginkan.

Jangan lupa untuk memberi keyframe pada

setiap frame anda agar soal dan jawaban

tidak tercampur.

Gambar 3.29 Tampilan Teks Latihan Soal

c. Selanjutnya jika jawaban benar action pada

pilihan ganda jawaban yang benar dengan

klik kanan> covert to syimbol > button > ok

> lalu action .

28

On (release) {gotoAndPlay(layer

selanjtunya);

}

maka akan menuju jawaban benar.

Gambar 3.30 Tampilan Action jawaban benar.

d. Jika menjawab salah maka action pada

pilihan ganda dengan klik kanan >convert to

syimbol > button > ok > action

on (release) {

gotoAndPlay (layer sebelumnya);

}

e. Menambah layer terakhir insert keyframe

langsung pada frame yang dituju untuk

memberi action stop

G. Membuat kuis

29

Langkah-langkah untuk membuat kuis hampir

sama dengan pembuatan latihan soal. Sebagai

berikut :

a. Membuat layer background > import to

stage > memilih background

b. Membuat layer untuk menu awal kuis

berisi nama dan tombol menuju quiz. Cara

membuat tombolnya menggunakan oval

tool > klik kanan > convert to syimbol >

button > ok > lalu action tombol dengan

skrip : on (release) {nextFrame();

}

Gambar 3.31 Tampilan Awal kuis

c. Menambah layer untuk membuat soal

beserta jawaban pilihan ganda , lalu insert

keyframe, lanjutkan seperti itu sampai soal

nomer 10 dan jangan lupa untuk

30

memberikan Action stop() pada setiap

frame.

d. Lalu Action jawabn benar dengan skrip :

on (release) {nextFrame();

skor++;

}

Gambar 3.32 Tampilan Action jawaban benar

e. Dan action juga pada jawaban salah

dengan srip :

on (release) {nextFrame();

}

31

Gambar 3.33 Tampilan action jawaban Salah

Sampai sepuluh soal.

f. Menambahkan layer berisi nama, benar ,

salah , dan skor juga membuat kotak untuk

tempat munculnya nama dan nilai. Lalu

Action pada frame dengan skrip :

stop()

penampil = nama;

benar = skor;

salah = 10-skor;

nilai = skor*(100/10);

pada kotak nama atur pada properties

untuk text gunakan dynamic text

variasi : jika pada kotak nama tulis nama

32

jika ada kotak benar salah dan skor

maka tulislah yang sesuai.

Gambar 3.34 Tampilan Properties kuis

g. Menambah layer terakhir insert

keyframe langsung pada frame yang

dituju untuk memberi action stop

Gambar 3.35 Tampilan Kuis

H. Membuat Profil

Langkah untuk membuat profil sebagai berikut :

a. Membuat layer background > import to

stage > memilih background

33

b. Import foto diri anda

> Isi biodata dibagian kiri foto.

c. Menambah layer terakhir insert

keyframe langsung pada frame yang

dituju untuk memberi action stop

Gambar 3.36 Tampilan Profil

I. Membuat ending

Langkah-langkah untuk membuat ending

sama dengan membuat intro. Namun pada ending

ada beberapa teks yang di alpha ( tulisan yang

muncul akan perlahan hilang) seperti pada teks

ucapan kepada Allah Nabi Muhammad , orang

tua dan kepala sekolah .

34

a. Membuat layer background > import to

stage > memilih background

b. Menambah layer > creat motion tween >

tulis teks > insert keyframe > pindah teks

ke arah lain sesuai dengan keinginan .

c. Menambah layer terakhir insert

keyframe langsung pada frame yang

dituju untuk memberi action stop

Gambar 3.37 Gambar Ending.