15
Tutorial Membuat Simbol Transisi Animasi dengan Adobe Flash 1 Tutorial Membuat Simbol Transisi Animasi 1. Buka Adobe Flash dan pilih “ActionScript 2.0” 2. Setelah itu, klik “Insert” “New Symbol” 3. Kemudian berikan nama pada simbol. Sebagai contoh, berikan nama “transisianimasi” (tanpa spasi). Buat “type” menjadi “Movie Clip”. Dan klik OK.

Tutorial Membuat Simbol

Embed Size (px)

DESCRIPTION

tutorial untuk membuat simbol dengan Adobe Flash (CS 6.0)

Citation preview

Page 1: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  1

Tutorial Membuat Simbol Transisi Animasi

1. Buka Adobe Flash dan pilih “ActionScript 2.0”

2. Setelah itu, klik “Insert” ⇒ “New Symbol”

3. Kemudian berikan nama pada simbol. Sebagai contoh, berikan nama

“transisianimasi” (tanpa spasi). Buat “type” menjadi “Movie Clip”. Dan klik OK.

Page 2: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  2

4. Setelah langkah 2 & 3 dibuat, akan muncul tampilan seperti berikut.

kita akan membuat efek animasi pada “transisianimasi”.

5. Pada layer 1 di “transisianimasi”, klik kanan pada frame 10 ⇒ “Insert Frame”.

Tampilan layer 1 akan menjadi sebagai berikut.

6. Pada layer 1, klik diantara frame 1 sampai 10. Dan buatlah objek kotak

menggunakan “Rectangel Tool”.

Page 3: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  3

7. Buat kotak berwarna hitam dengan cara atur pada “Fill Color”. Berikut langkah-

langkahnya.

Tapi tidak menggunakan “Stroke Color”.

8. Setelah warna selesai diatur, buat bentuk kotak pada lembar kerja. Tampilannya

seperti berikut.

9. Setelah selesai dengan warna, klik pada kotak. Klik pada “Properties” ⇒

“Position and Size” dan atur ukuran dan posisi kotak seperti berikut.

Selesai dengan setingan ukuran dan posisi, tampilan kotak menjadi seperti

berikut.

Page 4: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  4

10. Pada layer 1, klik kanan ⇒ “Insert Motion Tween”.

11. Klik kanan kemudian tambahkan keyframe pada frame 5 dan 10. Dan tampilannya

akan menjadi seperti berikut.

12. Klik pada frame 1 kemudian klik pada objek kotak yang berada dilembar kerja.

Selanjutnya, masuk pada “Properties” ⇒ “Color Effect” ubah nilai “Alpha”

menjadi 0%.

13. Lakukan langkah yang sama seperti langkah 12 pada frame 10. Untuk keyframe

yang ada diframe 5, pastikan “Color Effect” tetap pada Style “None”.

14. Setelah selesai dengan pembuatan simbol “transisianimasi”, klik “Scene 1”.

Page 5: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  5

15. Setelah “Scene 1” diklik, tampilan lembar kerja menjadi seperti berikut.

16. Simbol “transisianimasi” yang telah dibuat tadi, tersimpan pada “Library”.

17. Klik pada simbol tersebut dan drag pada lembar kerja.

Page 6: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  6

18. Pada layer 1, klik kanan ⇒ “Insert Frame” pada frame 15.

19. Ubah nama “Layer 1” menjadi “Transisi”.

20. Pada layer “Transisi”. Klik pada objek simbol “transisianimasi” yang ada pada

lembar kerja. Pada “Instance Name” berikan nama “animasi” (sebagai contoh,

semuanya gunakan huruf kecil).

21. Kunci layer “Transisi” dengan cara klik pada simbol titik berwarna putih. Tanda

jika layer sudah terkunci adalah ketika titik putih itu menjadi simbol gembok.

Langkah ini berfungsi untuk menghentikan editan yang ada pada layer ini.

22. Tambahkan layer baru dan bernama layer “Tombol”.

Untuk menambahkan layer baru, klik “New Layer”.

Page 7: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  7

23. Pada layer “Tombol”. klik “Window” ⇒ “Common Libraries” ⇒ “Buttons”.

Langkah ini berfungsi untuk menampilkan kumpulan tombol yang disediakan

Adobe Flash.

24. Setelah itu, buka folder tombol “buttons bubble 2”. Sebagai contoh, dari banya

pilihan tombol warna yang tersedia, pilih 3 tombol saja dengan warna biru, hijau,

dan abu-abu.

25. Drag ketiga tombol yang dipilih pada lembar kerja. Pastikan posisi 3 tombol tidak

menimpa atau berada tepat diatas simbol “transisianimasi”.

Page 8: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  8

26. Kunci layer tombol. Caranya lakukan seperti pada langkah 21.

27. Buat layer baru dan beri nama layer “Label”. Untuk tambah layer, lakukan seperti

yang ada dilangkah 22.

28. Pada layer “Label”. Klik kanan ⇒ “Insert Keyframe” pada frame 6 & 11.

Setelah langkah tersebut dilakukan, tampilan layer “Label” menjadi seperti

berikut.

29. Pada layer “Label”. Klik pada frame 1 dan masuk pada “Properties” ⇒ “Label”

⇒ “Name”, masukan huruf “a”.

Page 9: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  9

Lakukan langkah ini pada frame 5 dan 11. Tapi nama labelnya berbeda. Frame 5

nama labelnya “b”. dan 11 adalah “c”. Jika selesai memberikan nama label,

tampilan layer “Label” menjadi seperti berikut.

Pada layer, muncul simbol dan huruf seperti berikut.

30. Pada layer “Label”. Klik frame 1 ⇒ “Window” ⇒ “Actions”.

31. Diframe 1, setelah masuk pada jendela “Action”, masukan perintah seperti

berikut. Untuk frame 1 (“a”)

Lakukan langkah ini pada frame-frame selanjutnya. Tampilannya seperti berikut. Untuk frame 6 (“b”)

Untuk frame 11 (“c”)

Page 10: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  10

32. Pada simbol “transisianimasi” yang ada di “Library”, klik 2 kali.

Lembar kerja akan menjadi seperti berikut.

33. Kemudian tambahkan layer baru.

34. Pada layer 2. Klik pada frame 10 dan masuk pada “Actions” kemudian ketikan

perintah “Stop ();”.

Jika perintah sudah diberika, tampilan layer 2 menjadi seperti berikut.

Page 11: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  11

35. Setelah itu, kembali pada scene 1. Caranya, klik pada “Scene 1” seperti yang

dilakukan pada langkah 14.

36. Kunci layer label.

37. Buat layer baru dan beri nama layer “Text”.

38. Pada layer “Text”. Tambahkan keyframe pada frame 6 dan 11. Tampilan layer

akan jadi seperti berikut.

39. Pada layer “Text”. Klik diantara frame 1 sampai 5.

40. Setelah itu, pilih “Text Tool”.

Page 12: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  12

41. Pada layer “Text”. Tuliskan pada lembar kerja “a. biru”. Posisikan teks diatas

simbol “transisianimasi” yang ada dilembar kerja.

Untuk frame 1 sampai 5 “a. biru”

Lakukan langkah ini pada frame selanjutnya. Klik diantara frame 6 sampai 10 dan

frame 11 sampai 15.

Untuk frame 6 sampai 10 “b. hijau”

Untuk frame 11 sampai 15 “c. abu-abu”

42. Kunci layer “Text”.

Page 13: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  13

43. Buka layer “Tombol”.

44. Pada layer “Tombol”. Klik pada tombol biru yang ada dilembar kerja.

45. Pada layer “Tombol”. Masuk pada “Actions”. Dan ketikan perintah berikut.

Lakukan langkah ini pada tombol-tombol yang lain yang ada dilembar kerja.

Tombol diklik dan masukan perintah. Tapi perhatikan ada bagian dari perintah

yang perlu diubah.

Perintah pada tombol hijau

Perintah pada tombol abu-abu.

Page 14: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  14

46. Kunci layer “Tombol”.

47. Buat layer baru dan dan beri nama layer “Script”.

48. Pada layer “Script”. Masuk pada “Actions”. Dan masukan perintah berikut.

49. Setelah itu, klik “Control” ⇒ “Test Movie” ⇒ “Test”

Page 15: Tutorial Membuat Simbol

Tutorial  Membuat  Simbol  Transisi  Animasi  dengan  Adobe  Flash  

  15

Langkah ini berfungsi untuk memunculkan file flash dengan format “.swf”

File “.swf” akan muncul dan tersimpan dengan file flash “.fla”.