tutorial animasi looping

11
Program Studi Teknik Informatika Fakultas Teknik Universitas Katolik De La Salle Kairagi I Kombos Manado 95000 Dosen : Yori Montolalu, ST Mata Kuliah : Praktikum Sistem Multimedia Kode MK : IF3256 Tahun Ajaran : 2013/2014 Kontak Dosen: Tugas (lingkari): a. Individual b. Kelompok Mahasiswa: Marvel Rondonuwu 12013091 [email protected] TUGAS Membuat Animasi Looping

Upload: marvel-rondonuwu

Post on 23-Dec-2015

155 views

Category:

Documents


1 download

DESCRIPTION

tugas matakuliah praktikum sistem multimedia. tutorial membuat animasi looping menggunakan adobe flash professional cs6.

TRANSCRIPT

Page 1: Tutorial Animasi Looping

Program Studi Teknik Informatika Fakultas Teknik Universitas Katolik De La Salle Kairagi I Kombos Manado 95000

Dosen : Yori Montolalu, ST Mata Kuliah : Praktikum Sistem Multimedia

Kode MK : IF3256 Tahun Ajaran : 2013/2014

Kontak Dosen: Tugas (lingkari): a. Individual b. Kelompok

Mahasiswa: Marvel Rondonuwu 12013091 [email protected]

TUGAS Membuat Animasi Looping

Page 2: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

1

1. Buka Adobe Flash Professional CS6 ⇒ ActionScript 2.0.

2. Setelah itu, pada bagian properties ⇒ ubah ukuran stage menjadi 800x600 piksel

(px). FPS: 24,00.

3. Import semua file gambar yang diperlukan untuk membuat animasi looping

kedalam library Adobe Flash. Caranya, temukan file kemudian drag & drop di

bagian library.

Page 3: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

2

Jika langkah berhasil dilakukan, tampilan library akan seperti gambar dibawah.

4. Ubah nama “layer 1” menjadi “sky” dengan cara klik 2x pada teks nama “layer

1”. Kemudian drag ke stage gambar dengan latar langit yang berada di library.

Setelah itu, atur ukuran gambar dengan free transform tool (Q) dan posisikan

gambar sesuai dengan kebutuhan. Berikut adalah tampilan stage jika langkah ini

berhasil dibuat.

Page 4: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

3

5. Layer “sky”. Klik kanan pada gambar ⇒ Convert to Symbol.

6. Setelah itu akan muncul jendela baru. Berikan nama “sky”, type: movie clip,

registration: pilih titik paling tengah. Kemudian tekan tombol OK. Secara

otomatis, objek movie clip “sky” akan ditambahkan ke library.

7. Layer “sky”. Klik 2x pada gambar. Setelah itu akan masuk pada simbol “sky” itu.

Berikut tampilannya pada stage.

Page 5: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

4

8. Pada simbol “sky” ⇒ layer 1 ⇒ frame 100 ⇒ klik kanan ⇒ insert keyframe.

jika berhasil, berikut tampilan pada timeline.

9. Pada layer 1 ⇒ klik kanan ⇒ duplicate layers.

jika berhasil, berikut tampilan timeline.

Page 6: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

5

10. Sekarang pada simbol “sky” telah ada 2 buah gambar langit. Kunci “layer 1 copy”

dengan cara klik simbol titik dibawah ini.

langkah ini berfungsi untuk mengunci layer yang tersebut agar tidak ada aktifitas

yang dapat dilakukan pada layer itu.

11. Berpindah ke “layer 1”. Pada timeline ⇒ klik diantara frame 1 – 99 kemudian

geser gambar ke arah kanan menggunakan selection tool (V). Untuk

memudahkan, geser sambil tekan tombol shift pada keyboard.

12. Untuk membuat hasil menarik, pastikan bagian kiri dari gambar di “layer 1” tepat

bersentuhan dengan bagian kanan dari gambar pada “layer 1 copy”. Berikut

tampilannya.

Page 7: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

6

13. Pada layer 1. Diantara frame 1 – 99 ⇒ klik kanan ⇒ Create Classic Tween.

jika berhasil, berikut tampilannya.

14. Kunci layer 1, dan buka layer 1 copy. Berikut tampilannya jika langkah berhasil

dibuat.

15. Pada layer 1 copy, klik pada frame 100 dan lakukan penggeseran gambar sama

seperti langkah 11 & 12. Tapi, bedanya dengan langkah ini adalah geser ke arah

kiri. Berikut tampilannya.

Page 8: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

7

16. Layer 1 copy ⇒ create classic tween. Lakukan seperti langkah 13.

17. Klik “Scene 1” untuk kembali ke scene utama.

setelah langkah-langkah sebelumnya telah berhasil dibuat, berikut adalah tampilan

dari stage pada scene 1, layer “sky”.

18. Tambahkan layer baru bernama “ground”. Pada langkah 3 telah di import gambar

dengan nama “ground”. Drag gambar tersebut pada stage di layer ground. Pada

layer ini akan dilakukan proses yang sama seperti yang telah dilakukan pada

langkah-langkah sebelumnya (langkah 4 – 17).

Untuk simbol “ground”. Berbeda dengan proses yang ada dilangkah 8 dimana

penggunaan frame adalah sampai 100, simbol “ground” hanya perlu

menggunakan 65 frame.

19. Setelah selesai, tambahkan layer baru lagi bernama layer “buildings” pada Scene

1. Prosesnya lakukan seperti langkah 18. Simbol “buildings” hanya perlu 45

frame.

Page 9: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

8

20. Jika langkah-langkah diatas berhasil dilakukan, tampilan stage pada scene 1 akan

menjadi seperti berikut.

21. Tambahkan layer baru bernama “car” dan drag gambar car dari library. Atur

posisi dan sesuaikan ukuran. Berikut tampilannya.

22. layer car. Klik gambar car pada stage dan convert to symbol. Beri nama simbol

“car”.

23. Klik 2x pada simbol car. Tambahkan 2 layer baru dan beri nama masing-masing

layer dengan nama “wheel depan” & “wheel belakang”. Jika langkah berhasil

dilakukan, berikut tampilan timeline.

Page 10: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

9

24. Di-library ada gambar dengan nama “wheel”. Drag gambar tersebut pada 2 layer

yang baru ditambahkan.

25. Untuk 3 layer yang ada, insert keyframe pada frame 50. Berikut tampilan pada

timeline.

26. Create classic tween pada 2 layer yang baru ditambahkan. Berikut tampilannya.

27. Setelah itu, klik diantara frame 1 – 49 ⇒ pada tweening ⇒ rotate: CW x 5.

Tampilan seperti berikut.

Page 11: Tutorial Animasi Looping

12013091 http://rondonuwumarvel.blogspot.com/

10

28. Kembali lagi pada scene 1, scene utama. Berikut adalah tampilan pada stage jika

langkah-langkah sebelumnya berhasil dibuat.

29. Pada keyboard, tekan ctrl + enter untuk menjalankan file .swf.

Pada file .swf ini, tampak animasi dari mobil yang seakan-akan berjalan melewati

perkotaan.