DISCLAIMERSeluruh dokumen E-Trik di dalam CD ini dapat digunakan dan disebarkan secara bebas untuk tujuan belajar bukan komersial (non-profit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin tertulis terlebih dahulu dari Penerbit Maxikom.

E-Trik Flash MX 2004

Membuat Latar Belakang

Sudirman

MEMBUAT LATAR BELAKANG (BACKGROUND)A. Membuat Background.Selain membuat karakter sederhana, yang tidak kalah penting ialah pembuatan backround. Background ialah latar belakang dari tokoh atau karakter yang sedang aktif. Kali ini kita akan mencoba menngambar background seperi gambar di bawah ini.

Gambar 2. 2 contoh background.

1. Dengan Brush Tool gambarlah bentuk kotak untuk membentuk gedung seperti gambar 2. 3buat bentik kotak

Gambar 2. 3 membuat background 1.

2. Lanjutkan menggambar bentuk gedung, mainkan imajinasi anda, buatlah gambar seperti di bawah ini.

sempurnakan gambar

Gambar 2. 4 membuat background 2.

2

3. Gambar gedung telah selesai, sekarang kita akan menggambar bentuk bagian atap rumah dangan cara yang sangat sederhana sekali, lihat gambar di bawah ini.bentuk segitiga segitiga ke 2 lebih besar

Gambar 2. 5 membuat background 3.

4. Untuk melengkapi bagian-bagian bentuk rumah, kita harus membuat garis-garis pendukung seperti gambar di bawah ini.buat garis horizontal buat garis vertical

Gambar 2. 6 membuat background 4.

5. Buat juga bentuk pintu dan jendela, seperti di bawah ini.buat gambar pintu buat gambar jendela

Gambar 2. 7 membuat background 5 .

6. Gambar gedung dan rumah telah selesai, sekarang kita akan menggambar bagian-bagian pendukung lainnyaseperi bentuk pohon, jalan, pagar, rumput, dan awan. lihat gambar 2. 8.

3

gambar awan gambar pagar gambar pohon

gambar rumput

gambar jalanan

Gambar 2. 8 membuat background 6.

B. Pewarnaan.Setelah selesai membuat pola gambar background, kini kita akan mencoba memberikan pewarnaan pada background. Bayangkan saja, ada pola gambar, tapi belum berwarna, pastinya kurang klop bukan. Oleh karena itu warna juga gak bisa terlepas dalam pembutaan satu animasi yang bagus. Kali ini kita akan mencoba bagaimana cara mewarnai animasi dalam Flash. Lihat gambar di bawah ini.

Gambar 2. 9 background berwarna

1. Sebelum mulai menggambar klik tombol Layer, untuk memisahkan antara garis-garis background dengan warna.

klik Layer

Gambar 2. 10 klik layer

2. Beri nama Layer baru dengan nama WARNA, drag Layer warna dan letakkan di bawah Layer background. lihat gambar 2. 11

4

drag ke bawah

Gambar 2. 11 Layer warna letakkan di bawah Layer background

3. Klik Fill Color maka akan tampil menu warna, lalu pilih warna abuabu. Lihat gambar 2. 12pilih abu-abu

Gambar 2. 12 menu warna, pilih warna abu-abu.

4. Dengan Brush Tool , mulailah mewarnai gambar jalanan dengan warna abu-abu, seperti pada gambar 2. 13. 5. Untuk mengatur besar kecilnya Brush yang di gunakan, klik Brush size drag Brush secara horizontal, lakukan dengan perlahan.

drag di sini

Gambar 2. 13 mewarnai gambar jalanan.

6. Ubah lagi Fill Color , pilih warna hijau muda untuk mewarnai gambar rumput. lihat gambar 2. 14

5

pilih hijau muda

Gambar 2. 14 pilih warna hijau muda

7. Mulailah mewarnai bagian rumput, seperti gambar 2. 15

drag di sini

Gambar 2. 15 mewarnai gambar rumput

8. Ubah lagi Fill Color , pilih warna orange untuk mewarnai gambar gedung. lihat gambar 2. 16

pilih warna orange

Gambar 2. 16 pilih warna orange

9. Mulailah mewarnai bagian gedung, seperti gambar di bawah ini.

drag gambar gedung

Gambar 2. 17 mewarnai gambar gedung

6

10. Bagian gedung belum sepenuhnya di warnai, oleh karena itu ubah Fill Color warna orange, menjadi warna orange yang lebih tua. Lihat gambar 2. 18.

pilih orange tua

Gambar 2. 18 pilih warna orange

11. Mulailah mewarnai bagian samping gedung, seperti gambar 2. 19

warnai pada bagian ini

Gambar 2. 19 mewarnai gambar gedung

12. Setelah selesai mewarnai gedung, kini warnai juga gambar rumah, ubah Fill Color dengan warna biru seperti pada gambar 2. 20

pilih warna biru

Gambar 2. 20 pilih warna biru

13. Warnai gambar sisi samping rumah, seperti gambar di bawah ini.warna sisi rumah

Gambar 2. 21 mewarnai gambar rumput

7

14. Setelah selesai mewarnai sisi rumah, kini warnai juga bagian depan rumah dengan warna biru muda, seperti pada gambar 2. 22pilih biru muda

Gambar 2. 22 pilih warna biru

15. Mulailah mewarnai bagian depan rumah seperti gambar di bawah ini.

warnai gambar rumah

Gambar 2. 23 mewarnai bagian depan rumah

16. Selesai mewarnai bagian dinding rumah, sekarang warnai juga bagian atap rumah 1 dengan warna ungu, seperti gambar di bawah ini.pilih warna ungu

Gambar 2. 24 pilih warna ungu

17. Mulailah mewarnai atap rumah 1 seperti gambar di bawah ini.warna atap 1

Gambar 2. 25 mewarnai atap rumah 1

8

18. Setelah selesai mewarnai bagian atap 1, kini warnai juga bagian atap 2 dengan warna ungu muda, seperti pada gambar di bawah ini.

pilih ungu muda

Gambar 2. 26 pilih ungu muda

19. Mulailah mewarnai atap rumah 2 seperti berikut.warnai bagian ini

Gambar 2. 27 mewarnai atap rumah 2

20. Masih dengan cara yang sama warnai juga background pohon dengan warna hijau tua. Lihat Fill warna berikut.pilih warna hijau tua

Gambar 2. 28 pilih hijau tua.

21. warnai pohon seperti gambar berikutwarnai bentuk pohon

Gambar 2. 29 mewarnai pohon

22. Lanjutkan lagi pewarnaan, sekarang kita warnai gambar langit. Untuk warna langit pilih warna biru muda, Lihat Fill warna pada gambar 2. 30

9

pilih warna ini

Gambar 2. 30 pilih warna biru muda.

23. Mulailah mewarnai gambar langit seperti pada gambar berikut.blok gambar langit

Gambar 2. 31 mewarnai pohon

24. Pewarnan hampir selesai, warnai juga gambar pagar, pintu, dan gedung yang ada di belakang dengan satu warna, yaitu pilih warna abu-abu muda, lihat Fill warna berikut.pilih warna abu-abu

Gambar 2. 32 pilih warna abu-abu muda

25. Sebagai Finishing, warnai gambar yang belum berwarna dengan satu warna abu-abu kecuali gambar awan, sepert gambar 2. 33warnai bagian bawah awan warnai gedung warnai jendela warnai pintu

warnai pagar

Gambar 2. 33 Finishing gambar Flash.

10

26. Sekarang kita telah selesai membuat background berwarna dengan Flash MX 2004, simpan file dengan menekan Ctrl+ S.

C. Membuat Ide Cerita BaruKali ini kita akan membuat ide cerita baru. Animasi ini menceritakan tentang asyiknya bermain sepeda mengelilingi komplek, pertama-tama kita akan menyorot satu karakter pemain sepeda melintasi blok perumahan. Lalu setelah ia berbalik arah ternyata semakin banyak yang mengikutinya bersepeda. semakin lama ia bermain sepeda semakin banyak pesepeda yang mengikutinya.Untuk lebih memudahkan kita dalam menuangkan ide cerita, kita harus membuat storyboard terlebih dahulu.

D. Membuat StoryboardSeperti yang telah di jelaskan sebelumnya, storyboard adalah sebuah penggambaran jalan cerita sesuai dengan ide cerita berisi tentang pengambilan sudut gambar, pengisian suara, serta efek-efek khusus. Penggambaran jalan cerita berbentuk potongan gambar atau komik yang di sertai penjelasan alur cerita yang di buat dengan kertas dan alat tulis manual. Lihat contoh storyboard yang berjudul sepeda Asyiknya bersepeda berikut ini.

Gambar 2. 34 contoh storyboard Asyiknya bersepeda

11

E. Membuat Animasi.

Sekarang kita akan menuangkan cerita dalam storyboard tersebut ke dalam satu animasi. 1. Untuk pertama-tama kita akan membuat judul animasi terlebih dahulu, klik Text tool kemudian drag pada Stage seperti pada gambar di bawah ini.

Gambar 2. 35 kolom teks

2. Pada tabel Properties pilih Font Cooper std black, Font size ukuran 33, Text Color dengan Fill Black.Klik properties pilih Font Font size Klik text color

Gambar 2. 36 panel properties

3. Kemudian tuliskan judul Asyiknya bersepeda pada kolom Font yang masih kosong seperti pada gambar di bawah ini.

Gambar 2. 37 tulisan judul

4. Klik Free Tansfrom Tool

, secara otomatis teks judul akan terseleksi.

5. Setelah itu geser judul ke luar area Stage, dengan menekan tanda panah kiri pada Keyboard. Seperti pada gambar 2. 38

12

stage

geser ke luar stage

Gambar 2. 38 menggeser judul ke luar Stage

6. Pada Timeline sorot Frame 17 klik kanan dan pilih Insert keyframe. Seperti pada gambar 2. 39pilih ini

Gambar 2. 39 menggeser judul ke luar Stage

7. Selanjutnya pada Frame 1 pilih Create motion tween, lihat gambar di bawah ini.

Gambar 2. 40 Timeline, pilih Insert keyframe

8. Ulangi hal yang sama pada Frame 17, pilih Create motion tween, Maka pada Frame akan tampak seperti gambar di bawah ini.

Gambar 2. 41 Frame yang telah di Create motion tween

9. Sorot Frame 17, lalu geser tulisan judul ke tengah-tengah area Stage dengan menekan tanda panah arah kanan pada Keyboard. Lihat gambar 2. 42

13

Gambar 2. 42 judul di geser ke tengah area Stage

10. Klik kanan pada Frame 30 dan Frame 44 berikan Insert keyframe lihat gambar 2. 43

Gambar 2. 43 Frame 18, 30 dan 44 yang di Insert keyframe

11. Sorot Frame 44, lalu geser tulisan judul ke luar Stage sebelah kanan dengan menekan tanda panah arah kanan pada Keyboard. lihat gambar 2. 44

Gambar 2. 44 menggeser judul ke luar Stage

12. Klik kanan pada Frame 45, lalu pilih Convert to Blank Keyframes. 13. Animasi judul sudah selesai kita buat. beri nama judul pada layer. 14. Mungkin anda ingin melihat hasil sementara pembuatan animasi judul. tekan Enter pada Keyboard. 15. Klik Insert Layer yang ada pada sudut kiri Timeline. beri nama Background untuk layer yang baru. 16. Letakkan Layer Background di bawah Layer judul. Lihat gambar 2. 45

14

17. Klik kanan pada Frame 45 lalu pilih Convert to Blank Keyframes

Gambar 2. 45 contoh Layer

18. Ambil gambar Background pada File bahan animasi. caranya pilih File + Import + Import to Library, lalu pada file bahan animasi asyiknya bersepeda pilih pemandangan background. 19. Tekan Ctrl+L pada Keyboard. 20. Maka pada Libray Panel akan tampil nama judul gambar yang kita ambil, lihat gambar di bawah ini.drag nama background,pindahkan ke tengah area stage

Gambar 2. 46 contoh Library Panel

21. Tempatkan gambar di tengah-tengah area Stage, seperti pada gambar 2. 47

Gambar 2. 47 gambar background

15

22. Klik kanan pada Frame 214 lalu pilih Insert Frame. 23. Kembali klik Insert Layer gah Layer yang lain. Pastikan Layer yang baru, berada di ten-

24. Beri nama Layer baru dengan nama pesepeda 1. Lihat gambar 2. 48.

Gambar 2. 48 contoh Layer

25. Sekarang mainkan Layer pesepeda 1, klik kanan pada Frame 45 lalu pilih Insert Blank Keyfremes. 26. klik Frame 45. Seperti pada gambar 2. 49klik di sini

Gambar 2. 49 klik Frame 45

27. Ambil gambar karakter pesepeda 1 pada File bahan, caranya sama seperti mengambil gambar background. 28. Letakkan pesepeda 1 di luar area Stage sebelah kiri, seperti pada gambar 2. 30

letakkan di luar stage

Gambar 2. 50 pesepeda 1 di kiri luar stage.

16

29. Sorot Frame 80 lalu pilih Insert Keyframe. 30. Klik kanan pada Frame 45 dan Frame 80 lalu pilih Create motion Tween. 31. Sorot kembali Frame 80, majukan pesepeda 1 dari luar area Stage ke sebelah kanan luar area Stage sebelah kanan. lihat gambar 2. 51

Gambar 2. 51 pesepeda 1 di kluar stage.

32. Klik kanan pada Frame 81 lalu pilih Convert to Blank keyframe 33. Klik Insert Layer helly beri nama layer baru tersebut dengan nama

34. Letakkan posisi Layer helly di atas Layer pesepeda 1 35. Klik kanan pada Frame 45 lalu pilih Convert to Blank keyframe

Gambar 2. 52 Timeline.

36. Ambil gambar helly pada File bahan animasi. 37. Letakkan gambar Helly di luar Stage berdekatan dengan gambar pesepeda 1. Lihat gambar 2. 53

17

letakkan di sini.

Gambar 2. 53 posisi helly pada arae Stage

38. Klik kanan pada Frame 46 lalu pilih Insert keyframe 39. Majukan helly ke depan dengan mengklik Shift + tanda panah kanan pada Keyboard sebanyak 3 kali. 40. Klik kanan pada Frame 48 lalu pilih Insert keyframe 41. Majukan helly ke depan dengan meng-klik Shift + tanda panah kanan pada Keyboard sebanyak 4 kali. 42. Klik kanan pada Frame 49 lalu pilih Insert keyframe 43. Klik kanan pada Frame 60 lalu pilih Insert keyframe 44. Klik kanan pada Frame 83 lalu pilih Insert keyframe 45. Klik kanan pada Frame 60 dan Frame 83 lalu pilih Create motion Tween. 46. Sorot Frame 83. 47. Pindahkan helly ke luar area Stage bagian kanan, seperti pada gambar 2. 34

18

letakkan di sini

Gambar 2. 54 posisi helly pada area Stage

48. Klik kanan pada Frame 84 dan Frame 95 lalu pilih Inser Keyfreme. 49. Sorot Frame 95. 50. Klik Free Transform tool masih ditransform. lalu putar balik gambar helly pada saat

51. klik kanan pada Frame 95 lalu pilih Copy Frames. 52. klik kanan pada Frame 105 lalu pilih Paste Frames. 53. klik Frame 105 lalu pindahkan kembali gambar helly ke luar area Stage sebelah kiri, lihat gambar 2. 55

pindahkan ke sini

Gambar 2. 55 posisi helly pada arae Stage

54. Kembali ke layer pesepeda 1, klik kanan pada Frame 96 lalu pilih Insert keyframe.

19

55. Pada Frame 96 Klik Free Transform tool lalu putar balik gambar pesepeda 1 pada saat dalam keadaan masih di Transform. 56. Masukkan Insert keyframe pada Frame 97 dan 102, beri Create motion Tween pada setiap Frame tersebut. 57. Sorot Frame 102, majukan pesepeda 1 ke tengah area Stage seperi gambar berikut.

Gambar 2. 56 posisi helly pada arae Stage

58. Masukkan Insert keyframe Pada Frame 103, lalu klik Free Transform tool , 59. Dengan gambar yang masih di transform angkat bagian depan pesepeda 1 seolah-olah ia sedang melakukan atraksi. lihat gambar di bawah ini.

Gambar 2. 57 atraksi pesepeda

60. Berikan Insert keyframe pada Frame 104 dengan gambar yang masih di Transform, tekan Shift + tanda panah 4 kali arah kanan pada Keyboard.

20

61. Berikan lagi Insert keyframe pada Frame 105 dengan gambar yang masih di Transform, tekan Shift + tanda panah 4 kali arah kiri pada Keyboard. 62. Berikan lagi Insert keyframe pada Frame 106, namun kali ini turunkan posisi pesepeda 1 seperti semula. seperti gambar di bawah ini.

Gambar 2. 58 posisi pesepeda

63. Klik kanan pada Frame 106, lalu pilih Copy Frames. 64. Masukkan Paste Frames juga pada Frame 111. 65. Sorot Frame 111, lalu tekan tanda panah arah kanan pada Keyboard, hingga pesepeda 1 keluar dari area Stage. 66. Buat Layer baru dengan meng-klik Insert Layer kiri Timeline. beri nama pesepeda 2. yang ada pada sudut

67. Klik kanan pada Frame 112, lalu pilih Convert to blank keyframes. Sorot Frame tersebut. 68. Ambil file pesepeda 2 seperti sebelumnya. 69. Letakkan pesepeda 2 di luar area Stage, seperti pada gambar 2. 59letakkan di luar stage

Gambar 2. 59 posisi pesepeda 2

21

70. Klik kanan pada Frame 130 lalu pilih Insert keyframe 71. Klik kanan pada Frame 112 dan Frame 130 lalu pilih Create Motion Tween. 72. Klik Frame 130, lalu klik Free Transform tool ,

73. Tekan tanda panah arah kiri pada Keyboard, sehinnga gambar pesepeda 2 keluar dari area stage Atau anda juga bisa memindahkannya dengan menggunakan Selection Tool 74. Klik Insert Layer pesepeda 3. yang ada pada sudut kiri Timeline. beri nama

75. Letakkan Layer tersebut di atas Layer background. 76. Klik kanan pada Frame 140, lalu pilih Convert to blank keyframes. 77. Ambil gambar pesepeda 3 pada File bahan 78. Letakkan pesepeda 3 di luar area Stage, seperti pada gambar 2. 60letakkan di luar area stage

Gambar 2. 60 posisi pesepeda 3

79. Klik kanan pada Frame 180 lalu pilih Insert keyframes. 80. Klik kanan pada Frame 140 dan Frame 180 lalu pilih Create Motion Tween. 81. Klik Frame 180, lalu klik Free Transform tool

22

82. Ketika gambar pesepeda 3 masih di Transfrorm, keluarkan gambar pesepeda 3 keluar area Stage sebelah kanan, seperti pada gambar 2. 61letakkan di sini

Gambar 2. 61 posisi pesepeda 3

83. Kembali di layer pesepeda 1, klik kanan pada Frame 185 pilih Insert keyframe. 84. Masih pada Frame 185, drag gambar pesepeda 1 ke kiri luar area Stage, seperti gambar di bawah ini.letakkan di sini

Gambar 2. 62 posisi pesepeda 1

85. Dengan menekan Free Transform tool 214 pilih Insert keyframe.

, lalu klik kanan pada Frame

86. Sorot Frame 214, lalu keluarkan pesepeda 1 ke luar area Stage seperti pada gambar 2. 63

23

letakkan di sini

Gambar 2. 63 posisi pesepeda 1

87. Kembali ke Layer judul. 88. Klik kanan pada Frame 215 lalu pilih Convert to blank keyframes. 89. Untuk selanjutnya kita akan membuat kata-kata penutup animasi Asyiknya bersepeda klik Text tool kemudian drag pada Stage. 90. Pada tabel Properties pilih Font Cooper std black, Font size ukuran 33, Text Color warna hitam. 91. Kemudian tuliskan the end pada kolom Font yang masih kosong seperti pada gambar di bawah ini.

Gambar 2. 64 tulisan the end

92. Klik kanan pada Frame 240 lalu pilih Insert Frame. 93. Untuk menjalankan hasil animasi tekan Ctrl+ Enter. pada Keyboard.

24