Paulus Harsadi S.Kom...

[email protected] paulusharsadi.com

1

BAHAN AJAR

KURIKULUM 2013

PRAKTIKUM ANIMASI

OLEH :

PAULUS HARSADI, S.Kom, M.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

SINAR NUSANTARA

SURAKARTA

2015


2

HALAMAN PENGESAHAN

BAHAN AJAR PRAKTIKUM ANIMASI

STMIK SINAR NUSANTARA

Digunakan Pada Mata Kuliah Praktikum Animasi

Surakarta, 1 Maret 2015

Penyusun,

PAULUS HARSDI, S.Kom, M.Kom

Mengetahui dan Menyetujui :

Ketua Jurusan

Bebas Widada, S.Si, M.Kom


3

KATA PENGANTAR

Puji syukur kami panjatkan kehadiran Tuhan Yang Maha Esa atas terselesaikannya modul

praktikum Animasi ini. Modul ini disusun berdasarkan rancangan pembelajaran yang telah

ada, dengan harapan modul ini bermanfaat sebagai penunjang kelancaran proses

pembelajaran.. Akhir kata penulis dengan senang hati menerima koreksi dari pembaca dalam

penyempurnaan modul praktikum ini.

Penulis


4

PRAKTIKUM I

OBJEK FLASH

Langkah Praktikum

1. Buka lembar kerja baru FILE NEW. Buatlah gambar seperti dibawah ini !

2. Atur properties animasi tersebut dengan mengubah parameter menekan tombol

Size pada Properties.

Setelah itu akan muncul tampilan berikut :

3. Ubah dimensi menjadi ukuran yang anda inginkan misalkan 400 x 300 dimana 400

adalah lebar dan 300 adalah tinggi. Kemudian ubah Background dengan warna putih

dengan cara mengklik segitiga kecil kemudian pilih warnanya. Ubah pula Frame Rate

menjadi 15 fps.

4. Pilih Rectangle Tool kemudian di propertis ganti nilai corner radius menjadi 25


5

5. Dengan Rectangle Tool pada toolbar buatlah segi empat bertumpukan. ganti nilai

corner radius menjadi 0 kembali untuk membuat 1 kotak kecil. Clik and drag mouse

dari titik kiri atas ke titik kiri bawah Kemudian lakukan hal yang sama untuk segi empat

di bawahnya

6. Buatlah tempat roda dengan oval tool dalam mode marge drawing. Hingga menjadi

seperti gambar dibawah ini, kemudian hapus gambar oval tersebut.

7. Buatlah roda dengan oval tool dalam mode object drawing dan atur nilai inner

radius menjadi 30 seperti gambar di bawah ini, dengan menekan mode terlebih

dahulu. Untuk mendapatkan bentuk yang sama maka copy roda dengan menekan

alt+klik kiri

8. Percantik dengan teknik perwanaan dan bentuk yang telah dipelajari.

9. Simpan dengan nama Objek_nama.fla


6

PRAKTIKUM II

IMAGE, TEKS DAN LAYER

Langkah Praktikum

1. Buka lembar kerja baru FILE NEW Flash File (ActionScript 2.0), dan kemudian

atur properties stage sesuai kebutuhan.

2. Buka kembali file Objek_nama.fla kemudian save as dengan nama Layer_nama.fla

3. Rename nama layer pertama dalam timeline dengan cara klik dua kali dang anti

dengan nama Mobil

4. Kemudian buat 3 layer baru dengan nama jalan, reklame dan Pohon dengan cara

klik kanan pada layer kemudian pilih Insert Layer

5. Buatlah masing-masing bagian dengan cara mengaktifkan fungsi show/hide layer

untuk memudahkan pengeditan


7

6. Untuk reklame, buat papan reklame dengan rectangle tool, seperti dibawah ini

dengan properties : fill color kosong dan stroke height nilai 4. Untuk tiang bisa

dicopy agar bentuk sama.

7. Pilih File Import Import to Stage, pilih gambar yang akan dijadikan reklame

kemudian Open. Perkecil dan sesuai kan gambar dengan area yang ada dengan Free

Transform tool.

8. Convert file bitmap menjadi vector dengan klik Modify Bitmap Trace Bitmap,

kemudian akan muncul properties dan beri nilai 30 untuk properties Color

Threshold


8

Setelah selesai kemudian langsung klik Modify Group, atau anda bisa

mengeditnya terlebih dahulu baru di-group

9. Masukkan teks dan atur properties sesuai keinginan untuk dimasukkan ke reklame

10. Buatlah komponen yang lain seperti pohon dan background. Jika posisi tidak sesuai

dengan yang diharapkan bisa ubah posisi layer dengan cara geser layer ke atas atau

bawah layer yang lain.


9

11. Simpan ulang hasil.


10

PRAKTIKUM III

FRAME BY FRAME ANIMATION

Langkah Praktikum

1. Persiapkan 2 photo yang digunakan dan kurangi ukuran pixel dengan software

editing photo.


atur properties stage.

3. Masukkan photo melalui File Import Import to Library

4. Masukkan file image pertama ke stage dari library dengan drag dan drop. kemudian

dengan Free Transform Tool sesuaikan ukuran file.

5. Convert file ke vector kemudian edit.

6. Kemudian di Bar Time Line, di frame 20 anda klik kanan pilih Insert Key Frame


11

7. Pada frame ke 20 ini image pertama yang ada di stage di hapus kemudian ganti dengan

image kedua dari library. Edit image sesuai kebutuhan. Kemudian Insert Key Frame

kembali di posisi frame 30.

8. Buat Layer “Tulisan 1”, pindahkan playhead ke posisi awal dan gunakan text tool

kemudian atur properties sesuai kebutuhan. Berurutan mulai frame 5, 10, 15, 20, 25,

30 buat key frame baru dan ganti warna tulisan setiap perubahan key frame


12

9. Buat Layer “Tulisan 2”, pindahkan playhead ke posisi awal dan gunakan text tool

kemudian atur properties sesuai kebutuhan.

10. Pilih Modify Break APart untuk Layer “Tulisan 2” kemudian ulangi sekali lagi dan

sesuaikan dengan tampilan

11. Ubah ukuran “50jt” dari kecil kebesar dengan menambahkan Insert key Frame mulai

dari frame 5, 10, 15, 20, 25 dan 30

12. Buat Layer “Tulisan 3” dan tambahkan seperti di bawah ini, kemudian Insert

keyframe pada frame ke 30. Keyframe di frame 1 dihapus dan layer “Tulisan 2”

diperkecil. Tambahkan warna background


13

13. Tambahkan lagi Insert Keyframe pada frame ke 50 disetiap layer agar durasi dibagian

akhir lebih lama.

14. Test untuk dijalankan dengan Control test Movie kemudian simpan dengan nama

FrameByFrame_nama.fla

Tugas Praktikum III :

Buatlah iklan untuk diri anda sendiri sebagai calon legislatif dari salah satu partai peserta

pemilu ! nama partai dan logo partai ditentukan dan dibuat oleh mahasiswa dan tidak boleh

sama dengan nama partai peserta pemilu sesungguhnya !

Pelajari dan gunakan Timeline Effects pada salah satu objek, dengan klik kanan objek pilih

Timeline Effects Effect / Transform


14

PRAKTIKUM IV

TWEENED ANIMATION

Langkah Praktikum



2. Buat sebuah papan meja bilyard seperti dibawah ini, dang anti nama layer dengan

“meja”. Untuk lubang gunakan oval tool dengan mengatur properties dibagian start

angle

3. Buat Layer yang lain yaitu “tongkat”, dan “Bola” sebanyak 10 buah dengan warna

yang berbeda


15

4. Tempatkan bola seperti posisi di bawah ini

5. Lakukan Insert frame pada tongkat di posisi frame ke 40. Pada keyframe ke 1 kilk

kanan kemudian pilih Create Motion Tween.

6. Lakukan Insert Frame diseluruh layer ke frame 40. Pada layer “tongkat” Insert

Keyframe pada frame 40 kemudian rubah posisi tongkat agak kebelakang untuk

keyframe 1


16

7. Insert Keyframe pada frame ke 41 untuk semua bola kemudian buat motion tween

sampai frame ke 52 dan atur pergerakan sehingga terlihat natural.

8. Atur atau tambahkan frame atau motion tween pada layer yang dibutuhkan agar

terlihat natural kemudian simpan dengan nama tween_nama.fla


17

PRAKTIKUM V

SHAPE ANIMATION

Langkah Praktikum



2. Buatlah objek “ice cream” seperti di bawah ini

3. Membuat Objek dapat menggunakan Rectangle Tool dengan mengubah Properties

corner radius. Untuk stik gunakan mode Objek Drawing dan untuk Ice cream

menggunakan Merge drawing dan buat dalam layer yang berbeda.

4. Buatlah Keyframe pada frame ke 10 di layer “Ice cream” kemudian pada frame 1 klik

kanan pilih Create Shape Tween


18

5. Kunci layer “Stik”. Kemudian hapus sebagian objek ice cream dengan Erase tool pada

frame ke 10.

6. Insert Frame pada layer “stik” sampai frame ke 50

7. Insert Keyframe kembali pada frame 20, 30, 40, dan 50 pada layer “Ice cream” dan

Create Shape Tween pada setiap keyframe dan hapus sebagian objek ice cream

sampai tertinggal sebagian.

8. Lakukan test movie dan simpan dengan nama shape_nama.fla

Tugas Praktikum V :

Dengan menggunakan Shape tween pada Adobe flash CS3, buatlah animasi perubahan

bentuk objek yang realistis dari bentuk semula !


19

PRAKTIKUM VI

MOTION GUIDE

Langkah Praktikum



2. Ubah nama layer 1 menjadi “sinus” dan Import ke stage logo STMI SINAR NUSANTARA

3. Buat Layer baru kemudian gunakan text tool untuk menulis “SINAR NUSANTARA” dan

Break Apart tulisan tersebut kemudian beri warna sesuai keinginan.

4. Buat motion tweening pada layer “tulisan” sampai frame ke 42

5. Pada layer “tulisan” klik tombol kanan mouse, pilih Add Motion Guide


20

6. Gambar dengan Pen, Pencil, Line, Circle, Rectangle tool path yang diinginkan.

7. Snap center dari teks pada awal path, kemudian pada akhir path

Awal Path Akhir Path

8. Lakukan Test Movie dan perbaiki jika kurang dalam pergerakannya baik dari teks atau

guide linenya

9. Simpan dengan nama Guide_nama.fla


21

PRAKTIKUM VII

MASKING

Langkah Praktikum



2. Buatlah bentuk oval dengan warna rainbow pada fill

3. Insert Keyframe pada frame ke 40 dan buat animasi tween dengan perubahan bentuk

melebar.

4. Buat layer “text” kemudian buat tulisan “STMIK SINAR NUSANTARA” dan atur

properties yang sesuai.


22

5. Klik kanan pada layer “text” kemudian pilih “mask”

6. Test Movie dan lihat hasil. Jika ingin mengedit maka buka kunci layer dan lakukan

pengeditan, jika sudah selesai layer di kunci kembali.

7. Simpan dengan nama Masking_nama.fla


23

PRAKTIKUM VIII

BUTTON DAN ACTION SCRIPT DASAR (1)

Langkah Praktikum



2. Buka kembali hasil praktikum ke-4 yaitu tween_nama.fla kemudian simpan ulang

menjadi script_nama.fla

3. Buat layer “tombol” kemudian buat objek seperti di bawah ini.

To_Start Prev_Frame Stop_Animasi Play_Animasi Next_Frame To_End

4. Seleksi setiap objek kemudian klik kanan pilih Convert to Symbol. Dalam properties

symbol pilih Button dan berikan nama tombol sesuai fungsinya.


24

5. Pada seluruh Layer animasi di frame 1 klik kanan pilih Actions kemudian isi dengan :

Stop();

6. Klik kanan pada tombol yang telah dibentuk kemudian pilih Actions. Dalam Action

script tulis script di bawah ini sesuai fungsi tombolnya :

Button Play_Animasi :

on(release){

play();

}

Button Stop_Animasi : on(release){

stop();

}


25

Button To_Start : on(release){

gotoAndPlay(1);

}

Button To_End : on(release){

gotoAndStop(75);

}

Button Next_Frame : on(press) {

nextFrame();

}

Atau :

Klik kanan ActionGlobal FunctionsMovie Clip ControlonPress

Global Functions Timeline Control nextFrame()

Button Prev_Frame : on(press) {

prevFrame();

}

Atau :

Klik kanan ActionGlobal FunctionsMovie Clip ControlonPress

Global Functions Timeline Control prevFrame()


26

PRAKTIKUM IX

ACTION SCRIPT DASAR (1) : ACTION BUTTON

Langkah Praktikum


atur properties stage dengan ukuran 300 x 400 pixel

2. Buat layer “gambar” dan buat 5 keyframe pada 5 frame pertama, kemudian buat

objek seperti di bawah ini disetiap keyframe-nya.

Keyframe 2 Keyframe 3

Keyframe 1 Keyframe 4 Keyframe 5

3. Buatlah layer “button” dan objek yang akan menjadi “button” seperti dibawah ini,

kemudian seleksi setiap objek klik kanan pilih Convert to Symbol. Dalam properties

symbol pilih Button dan berikan nama tombol sesuai fungsinya.

Tampilan pada Library

4. Pada seluruh button lakukan pengeditan dengan menambahkan animasi pada “Over”

dengan menggeser objek bawah sedikit sehingga ketika di klik akan terlihat animasi


27

seperti tombol di tekan.

5. Pada layer “button” insert Keyframe di frame ke 5 dan Layer “gambar” di semua

Keyframe klik kanan pilih Actions kemudian isi dengan :

Stop();

6. Pada setiap button berikan actionscript seperti di bawah ini :

a. Button “A”

on (press) {

gotoAndStop(2);

}

Press artinya perintah dijalankan saat button ditekan/diklik

b. Button “B”

on (release) {

gotoAndStop(3);

}

Release artinya perintah dijalankan saat klik dilepas

c. Button “C”

on (releaseOutside) {

gotoAndStop(4);

}


28

Release Outside artinya perintah dijalankan saat klik dilepas di luar button

d. Button “D”

on (rollOver) {

gotoAndStop(5);

}

Roll Over artinya perintah dijalankan saat mouse berada di atas button

Note : even yang lain yang bisa digunakan pada button adalah :

Roll Out (artinya perintah dijalankan saat mouse berada di luar button)

Drag Out (artinya perintah dijalankan saat mouse melakukan drag di luar button)

Drag Over (artinya perintah dijalankan saat mouse melakukan drag di atas button)

Key Press (artinya perintah dijalankan saat tombol keybort yang tertulis ditekan)

7. Setelah selesai kemudian simpan dengan nama button_nama.fla


29

PRAKTIKUM X

ACTION SCRIPT DASAR (1) : ACTION BUTTON LANJUT

Langkah Praktikum

rollOver & rollOut



2. Buat teks dengan tulisan “STMIK Sinar Nusantara”

3. Convert teks tersebut kedalam button

4. pada teks diberi script :

on (rollOver) {

stop();

}

on (rollOut) {

play();

}

5. Insert key frame di frame 10 dan 20.

6. pada frame 10 geser tulisan menjadi di ujung kanan stage.

7. blok frame 1-20 sisipkan motion tween

8. simpan dengan nama Roll_nama.fla kemudian jalankan dengan Ctrl+Enter

startDrag dan starDrop

1. Buat Movie Clip yang ditambahkan dengan tween-motion

2. Klik kanan Movie Clip yang baru saja dibuat Edittekan F8 Button pada bagian

propertiespada Instance Name diberi nama bola

3. Kembali ke Scene Klik kanan Actions

4. Buat script sehingga diperoleh script seperti berikut: on (press) {

startDrag("bola");

}

on (release) {

stopDrag();

}

5. Simpan dengan nama StartDragDrop_nama.fla kemudian jalankan dengan Ctrl+Enter


30

PRAKTIKUM XI

ACTION SCRIPT DASAR (2) : LOAD MOVIE

Langkah Praktikum


atur properties stage dengan ukuran 800 x 600 pixel.

2. Buatlah layer “background” kemudian buat tampilan seperti dibawah ini

3. Buatlah layer “Menu” kemudian buatlah kotak (object drawing, warna fill bebas /

stroke color tidak diisi ) didalam tampilan kotak hitam lalu convert to symbol pilih

movie clip dan beri nama dengan nama “Kotak_mc”


31

4. Lakukan editing pada Movie Clip “Kotak_mc” dengan mengubah tingkat Alpha pada

level 0%


32

5. Buatlah menu dengan objek seperti di bawah ini dan lakukan convert to symbol pilih

button dan beri nama dengan nama sesuai menu

Tampilan pada Library

6. Beri Instance Name : "target” dalam properties Movie Clip “Kotak_mc”

7. Tempatkan file SWF dari praktikum sebelumnya yang dibutuhkan dalam menu dalam

satu folder dengan menu.fla, kemudian tulis script di setiap menu sebagai berikut.

on (release) {

loadMovie("nama_file.swf","target");

}

8. Kemudian simpan dengan nama menu.fla dan lihat hasilnya


33

PRAKTIKUM XII

ACTION SCRIPT LANJUT (1) :

MULTIMEDIA PEMBELAJARAN MATEMATIKA

LANGKAH PRAKTIKUM

1. Buka lembar kerja baru FILE NEW Flash File (ActionScript 2.0), dan kemudian atur

properties stage dengan ukuran 900 x 800 pixel

2. Buatlah tampilan seperti storyboard di bawah ini dan kreasikan agar lebih menarik :

3. Langkah untuk mengkoneksikan / link antara scene melalui tombol

a. Tulis action script stop(); di seluruh frame 1 pada setiap layer di setiap scene


34

masing-masing

b. Tulis action script berikut untuk tombol yang digunakan untuk link antar scene :

on(release){

gotoAndPlay ("nama_scene",1);

}

4. Langkah untuk tampilan menu layang-layang

a. Gunakan rectangle tool untuk membuat kotak di dalam tampilan kemudian jadikan

movie clip dengan nama “target_layang” dan ubah color dengan alpha 0% dan beri

instance name dengan nama “target_layang”

b. Untuk menampilkan gambar atau movie swf dapat menggunakan script sebagai

berikut :

on(release) {

loadMovie("<nama_image.jpg/nama_movie.swf>",”target_layang”);

}

c. File bahan baik gambar maupun movie harus dalam satu folder dengan file project

5. Langkah untuk tampilan menu “Soal”

a. Setelah image soal telah di import ke stage dan jawaban telah di tulis disetiap opsi

maka langkah selanjutnya adalah buat symbol baru melalui menu Insert New

Symbol kemudian beri nama “inv_tombol” sebagai name dan typenya ubah


35

menjadi button

b. Pada frame Hit buat kotak yang cukup untuk menutupi opsi jawaban dan pada color

atur alpha menjadi 10%

c. Kembali ke scene “soalLayang” kemudian aktif di library dan drag tombol ke setiap

bagian opsi jawaban

Inv_tombol

d. Buatlah titik resgristation berada di tengah2 huruf

e. Edit kembali tombol dan geser posisi objek di Hit untuk menutupi opsi jawaban

kembali


36

f. Seleksi setiap tombol kemudian pada bagian instance name pada properties beri

nama opsi1, opsi2 dan opsi3

g. Klik tombol opsi1 kemudian masukkan script berikut :

//ketika tekanan mouse dilepaskan setelah ditekan

on (release) {

//jika tulis bernilai true

if (tulis) {

//posisi x silang1 sama dengan posisi x tombol ini

silang1._x = opsi1._x;

//posisi y silang1 sama dengan posisi y tombol ini

silang1._y = opsi1._y;

//nilai jawaban1 diubah menjadi false

jawaban1 = true;

}

}

h. Klik tombol opsi2 kemudian masukkan script berikut :


on (release) {


if (tulis) {






jawaban1 = false;

}

}

i. Klik tombol opsi3 kemudian masukkan script berikut :


on (release) {


if (tulis) {






jawaban1 = false;


37

}

}

j. Buat garis silang yang dapat menutupi huruf A,B dan C pada opsi jawaban dan

convert to symbol pilih tipe “movie clip”, beri nama “silang” dan pada instance

name beri tulisan “silang1”. Kemudian pindah posisi movie clip tersebut di luar area

stage

k. Buat lingkaran yang dapat menutupi huruf pada opsi jawaban yang benar dan

convert to symbol pilih tipe “movie clip”, beri nama “lingkaran” dan pada instance

name beri tulisan “lingkaran1” dan letakkan titik registration tepat di tengah – tengah

huruf

Titik registration

l. Buatlah statistic text dengan tulisan “koreksi” tempatkan disebelah kiri dan convert

to symbol pilih button dan beri nama “koreksi_btn”


38

m. Buat Dinamic text di sebelah tombol koreksi dengan ukuran yang disesuaikan dan di

properties var beri tulisan “hasil”.

n. Pada koreksi_btn masukkan script berikut :


on (release) {

//jika cek bernilai true

if (!cek) {

//jika jawaban1 bernilai true

if (_root["jawaban1"]) {

hasil = " BENAR ";

//jika jawaban+i bernilai false

} else if (!_root["jawaban1"]) {

//salah ditambah 1

hasil = " SALAH ";

//lingkaran+i menjadi tidak transparan

_root["lingkaran1"]._alpha = 100;

}

}

cek = true;

tulis = false;

}

o. Pada frame 1 tulis script berikut :

stop();

hasil="";

//posisi x movie clip silang1 =- 100

_root["silang1"]._x = -100;

//posisi y movie clip silang1 =- 100

_root["silang1"]._y = -100;

//jawaban1 bernilai dengan false


39

_root["jawaban1"] = false;

//warna lingkaran1 transparan

_root["lingkaran1"]._alpha = 0;

cek = false;

tulis = true;


40

PRAKTIKUM XIII

ACTION SCRIPT LANJUT (2) :

GAME JIGSAW

LANGKAH PRAKTIKUM


atur properties stage dengan ukuran 700 x 400 pixel

2. Buatlah tampilan seperti dibawah ini beri nama layer “areagame” :

3. Buat layer baru beri nama “gambar” kemudian Import image dan convert menjadi

vector, kemudian beri line sehingga terpotong menjadi 4 bagian

4. Seleksi setiap bagian kemudian convert to symbol dan pilih movie clip kemudian

beri nama dengan bagian1, bagian2, bagian3, dan bagian4. Di setiap properties


41

movie clip dalam instance name beri nama sesuai dengan bagian masing-masing.

5. Hapus garis untuk membagi gambar tadi kemudian tempatkan gambar sesuai

tampilan di bawah ini :


42

6. Duplikasi gambar tadi pada kotak di sebelah kanan

7. Dari hasil duplikasi gambar ubah properties color menjadi alpha 10%

8. Seleksi setiap kepingan hasil duplikasi tadi kemudian ubah instance name dengan

menambahkan kata-kata “target” di depannya sehingga menjadi targetBagian1,

targetBagian2, targetBagian3, dan targetBagian4


43

9. Acak kepingan pada gambar awal/ sebelah kiri

10. Buatlah Dinamic text dengan mengubah properties text kemudian pada var beri

nama “pesan”.

11. Letakkan dynamic text seperti dibawah ini :


44

12. Klik frame 1 kemudian tekan F9, pada panel action ketik script berikut ini :

//jumlah kepingan puzzle

//sesuaikan nilai variable jumlahBagian dengan jumlah kepingan yang

anda buat

jumlahBagian = 4;

for (i=1; i<=jumlahBagian; i++) {

_root["bagian"+i].id = i;

//bila kepingan puzzle ditekan

_root["bagian"+i].onPress = function() {

//buat posisi kepingan berada di paling atas

this.swapDepths(_root.getNextHighestDepth());

//kepingan dapat didrag

startDrag(this);

};

//bila kepingan tidak ditekan

_root["bagian"+i].onRelease =

_root["bagian"+i].onReleaseOutside=function () {

//kepingan tidak dapat ditekan

stopDrag();

target_mc = _root["targetBagian"+this.id]

//jika kepingan berada di sekitar target

if (eval(this._droptarget) == target_mc) {

//letakan kepingan di target

this._x = target_mc._x;

this._y = target_mc._y;

//kepingan tidak bisa ditekan

this.enabled = false;

//kurangi variable jumlahBagian

jumlahBagian--

//jika variable jumlahBagian bernilai 0

if (jumlahBagian == 0) {

//tampilkan tulisan Puzzle Komplit

pada dynamic text pesan

pesan = "Puzzle Komplit";

}

}

};

}

13. Tekan ctrl + enter untuk melihat hasil

Paulus Harsadi S.Kom...

Documents

Transcript of Paulus Harsadi S.Kom...