DISCLAIMER

Seluruh 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 ge-

dung seperti gambar 2. 3

buat 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 gam-
bar 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, rum-
put, dan awan. lihat gambar 2. 8.

3
 gambar awan
gambar pohon
gambar pagar

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.

Gambar 2. 10 klik layer

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 abu-
abu. Lihat gambar 2. 12

pilih abu-abu

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

4. Dengan Brush Tool , mulailah mewarnai gambar jalanan dengan war-

na 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 gam-
bar 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 ru-
mah dengan warna biru muda, seperti pada gambar 2. 22

pilih 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 berikut

warnai 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. 33
warnai 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 Baru

Kali ini kita akan membuat ide cerita baru. Animasi ini menceritakan tentang
asyiknya bermain sepeda mengelilingi komplek, pertama-tama kita akan me-
nyorot satu karakter pemain sepeda melintasi blok perumahan. Lalu setelah
ia berbalik arah ternyata semakin banyak yang mengikutinya bersepeda. se-
makin lama ia bermain sepeda semakin banyak pesepeda yang mengikuti-
nya.Untuk lebih memudahkan kita dalam menuangkan ide cerita, kita harus
membuat storyboard terlebih dahulu.

D. Membuat Storyboard
Seperti yang telah di jelaskan sebelumnya, storyboard adalah sebuah peng-
gambaran 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 story-
board 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. 39

pilih 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 am-
bil, 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 Pastikan Layer yang baru, berada di ten-
gah Layer yang lain.

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. 49

klik 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 gam-
bar 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 beri nama layer baru tersebut dengan nama
“helly”

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 lalu putar balik gambar “helly” pada saat
masih ditransform.

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 mo-
tion 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 “pese-
peda 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 Key-
board.

20
61. Berikan lagi Insert keyframe pada Frame 105 dengan gambar yang
masih di Transform, tekan Shift + tanda panah 4 kali arah kiri pada Key-
board.

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 yang ada pada sudut
kiri Timeline. beri nama “pesepeda 2”.

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. 59

letakkan 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 “pese-
peda 2” keluar dari area stage Atau anda juga bisa memindahkannya den-
gan menggunakan Selection Tool

74. Klik Insert Layer yang ada pada sudut kiri Timeline. beri nama
“pesepeda 3”.

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. 60

letakkan 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.
61

letakkan 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 , lalu klik kanan pada Frame
214 pilih Insert keyframe.

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 sep-
erti 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