Aneka Kreasi Animasi Dengan Adobe Flash CS3

27
65 Aneka Kreasi Animasi Teks Animasi teks sangat banyak digunakan dan diperlukan dalam berbagai keperluan, seperti pada aplikasi presentasi, aplikasi web, banner iklan, dan sebagainya. Animasi teks sangat berperan penting sekali untuk menampilkan materi yang akan dipresentasikan. Pada latihan bab ini, Anda akan belajar membuat aneka teknik animasi teks dilengkapi dengan efek yang menarik. 3.1 Membuat Animasi Teks Berputar Pada latihan ini Anda akan dibimbing untuk membuat animasi Teks Berputar, yaitu ketika animasi dijalankan, huruf-huruf pada teks tersebut akan berputar secara bergantian sampai pada huruf urutan yang terakhir. Supaya lebih jelas, ikutilah langkah latihan berikut: 1. Buat dokumen baru dari menu File > New (Ctrl+N). 2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px, dan Frame rate: 28 fps. Gambar 3.1 Pengaturan stage pada document properties

description

Animasi

Transcript of Aneka Kreasi Animasi Dengan Adobe Flash CS3

Page 1: Aneka Kreasi Animasi Dengan Adobe Flash CS3

65

Aneka Kreasi Animasi Teks

Animasi teks sangat banyak digunakan dan diperlukan dalam berbagai keperluan, seperti pada aplikasi presentasi, aplikasi web, banner iklan, dan sebagainya. Animasi teks sangat berperan penting sekali untuk menampilkan materi yang akan dipresentasikan.

Pada latihan bab ini, Anda akan belajar membuat aneka teknik animasi teks dilengkapi dengan efek yang menarik.

3.1 Membuat Animasi Teks Berputar Pada latihan ini Anda akan dibimbing untuk membuat animasi Teks Berputar, yaitu ketika animasi dijalankan, huruf-huruf pada teks tersebut akan berputar secara bergantian sampai pada huruf urutan yang terakhir. Supaya lebih jelas, ikutilah langkah latihan berikut:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px, dan Frame rate: 28 fps.

Gambar 3.1 Pengaturan stage pada document properties

Page 2: Aneka Kreasi Animasi Dengan Adobe Flash CS3

66

3. Klik pada posisi Frame 1 dari Layer 1, kemudian klik Text Tool

( ) dan ketik tulisan “Animasi Teks” pada stage.

Gambar 3.2 Tulisan Animasi Teks di stage

4. Pilih teks yang akan dibuat animasi, kemudian Break Apart (Ctrl+B). Maka hasilnya sebagai berikut.

Gambar 3.3 Break apart tulisan Animasi Teks

5. Klik pada posisi Frame 1 dari Layer 1, kemudian klik menu Modify > Timeline > Distribute to Layers (Ctrl+Shift+D). Berikut hasilnya.

Gambar 3.4 Hasil distribute layer

Page 3: Aneka Kreasi Animasi Dengan Adobe Flash CS3

67

6. Klik pada posisi Frame 5 dari Layer A, kemudian tekan tombol F6 (Insert Keyframe).

Gambar 3.5 Insert keyframe pada posisi frame 5

7. Blok posisi Frame 1 sampai Frame 5 dari Layer A (caranya klik dua kali pada salah satu frame antara 1 sampai dengan 5). Kemudian pada Panel Properties (Ctrl+F3), atur pada bagian Tween: Motion dan Rotate: CW.

Gambar 3.6 Pengaturan Tween dan Rotate pada panel properties

8. Maka hasilnya seperti gambar berikut.

Gambar 3.7 Hasil create motion tween frame 1 sampai 5

9. Tekan tombol F6 (Insert Keyframe) di posisi Frame 3 dan Frame 8 dari Layer N.

Gambar 3.8 Insert keyframe pada frame 3 dan 8

Page 4: Aneka Kreasi Animasi Dengan Adobe Flash CS3

68

10. Blok posisi Frame 3 sampai Frame 8 dari Layer N. Kemudian pada Panel Properties (Ctrl+F3), atur pada bagian Tween: Motion dan Rotate: CW.

Gambar 3.9 Pengaturan Tween dan Rotate pada panel properties

11. Maka hasilnya sebagai berikut.

Gambar 3.10 Hasil create motion tween frame 3 sampai 8

12. Klik pada posisi Frame 8 dari Layer A, kemudian tekan tombol F5 (Insert Frame).

Gambar 3.11 Hasil insert frame pada frame 8

13. Kemudian untuk layer berikutnya, lakukan dengan cara yang sama seperti Layer A dan Layer N di atas, hingga hasil akhir kondisi Layer dan Frame seperti berikut.

Page 5: Aneka Kreasi Animasi Dengan Adobe Flash CS3

69

Gambar 3.12 Hasil akhir tampilan semua layer

14. Simpan dengan nama animasi teks putar.fla.

15. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.13 Hasil animasi teks berputar

3.2 Membuat Animasi Teks Blur Pada latihan kali ini Anda akan dibimbing untuk membuat animasi Teks Blur, yaitu pada saat dijalankan, teks yang Anda buat memudar warnanya sampai tak terbentuk. Berikut langkah pembuatannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

Page 6: Aneka Kreasi Animasi Dengan Adobe Flash CS3

70

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Gambar 3.14 Pengaturan ukuran stage pada document properties

3. Klik pada posisi Frame 1 dari Layer 1, kemudian klik Text Tool

( ) dan ketikkan tulisan pada stage seperti gambar berikut.

Gambar 3.15 Tulisan Animasi Teks di stage

4. Klik tulisan “Animasi Teks”, kemudian pilih dan klik menu Insert Effects > Effects > Blur. Maka akan muncul jendela pengaturan Blur dan klik tombol OK.

Gambar 3.16 Jendela pengaturan Blur

Page 7: Aneka Kreasi Animasi Dengan Adobe Flash CS3

71

5. Hasil akhir layer seperti berikut.

Gambar 3.17 Hasil akhir tampilan layer

6. Simpan dengan nama animasi teks blur.fla.

7. Untuk melihat hasilnya, tekan tombol Ctrl+Enter.

Gambar 3.18 Hasil animasi teks blur

3.3 Membuat Animasi Teks Expand Pada latihan ini Anda akan dibimbing untuk membuat animasi Teks Expand, yaitu animasi teks yang pada saat dijalankan teks akan melebar atau memperbesar jarak spasi antarhurufnya. Berikut langkahnya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Page 8: Aneka Kreasi Animasi Dengan Adobe Flash CS3

72

Gambar 3.19 Pengaturan ukuran stage pada document properties

3. Klik pada posisi Frame 1 dari Layer 1, lalu klik Text Tool ( ) dan ketikkan tulisan “Animasi Teks” atau yang lain pada stage.

4. Klik tulisan Animasi Teks, kemudian pilih dan klik menu Insert Effects > Effects > Expand. Maka akan muncul jendela peng-aturan Expland dan klik tombol OK.

Gambar 3.20 Kotak pengaturan expand

5. Hasil langkah di atas, akan menghasilkan bentuk layer seperti berikut.

Page 9: Aneka Kreasi Animasi Dengan Adobe Flash CS3

73

Gambar 3.21 Hasil akhir tampilan layer dan frame

6. Simpan dengan nama animasi teks expand.fla.

7. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.22 Hasil animasi teks expand

3.4 Membuat Animasi Teks Loncat Pada latihan kali ini Anda akan dibimbing untuk membuat animasi teks loncat-loncat, yaitu pada saat dijalankan, masing-masing huruf dari teks akan loncat atau bergerak ke atas secara bergantian. Be-rikut langkah latihannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Page 10: Aneka Kreasi Animasi Dengan Adobe Flash CS3

74

Gambar 3.23 Pengaturan ukuran stage pada document properties

3. Klik pada posisi Frame 1 dari Layer 1, lalu klik Text Tool ( ) dan ketikkan tulisan “Animasi Teks” pada stage.

Gambar 3.24 Tulisan Animasi Teks di stage

4. Pilih tulisan “Animasi Teks” tersebut, kemudian lakukan Break Apart (Ctrl+B). Maka hasilnya sebagai berikut.

Gambar 3.25 Hasil break apart tulisan animasi teks

5. Klik pada posisi Frame 1 dari Layer 1, kemudian klik menu Modify > Timeline > Distribute to Layers (Ctrl+Shift+D). Maka hasilnya seperti gambar berikut.

Page 11: Aneka Kreasi Animasi Dengan Adobe Flash CS3

75

Gambar 3.26 Hasil distribute ke layer

6. Klik pada posisi Frame 5 dan 10 pada Layer A, kemudian tekan tombol F6 (Insert Keyframe).

Gambar 3.27 Hasil Insert keyframe pada posisi frame 5 dan 10

7. Klik pada posisi Frame 5 dari Layer A, kemudian teks “A” pada stage dipindah posisinya ke atas.

Gambar 3.28 Pindah posisi teks A ke atas

Page 12: Aneka Kreasi Animasi Dengan Adobe Flash CS3

76

8. Blok posisi Frame 1 sampai dengan Frame 10 dari Layer A, kemudian pada Panel Properties bagian Tween pilih Motion.

9. Maka hasilnya seperti berikut.

Gambar 3.29 Hasil create motion tween pada frame 1 sampai 10

10. Tekan tombol F6 (Insert Keyframe) di posisi Frame 5, Frame 10, dan Frame 15 pada Layer n.

Gambar 3.30 Hasil insert keyframe pada posisi frame 5, 10, dan 15

11. Klik pada posisi Frame 10 dari Layer n, pindahkan teks n me-nuju bagian atas seperti langkah nomor 7.

12. Blok posisi Frame 5 sampai Frame 15 dari Layer n, kemudian pada Panel Properties (Ctrl+F3) bagian Tween pilih Motion.

13. Maka hasilnya seperti berikut.

Gambar 3.31 Hasil create motion tween pada frame 5 sampai 15

14. Lakukan juga langkah di atas terhadap teks i, m, a, s, i. Sehingga, hasil akhir dari setiap layer akan tampak seperti gambar berikut.

Page 13: Aneka Kreasi Animasi Dengan Adobe Flash CS3

77

Gambar 3.32 Hasil akhir tampilan layer

15. Simpan dengan nama animasi teks loncat.fla.

16. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.33 Hasil animasi teks loncat

3.5 Membuat Animasi Teks Explode Pada latihan kali ini Anda akan dibimbing untuk membuat animasi Teks Explode, yaitu animasi yang pada saat dijalankan teks akan beterbangan secara bersama-sama, kemudian di ujung jalannya animasi teks tersebut perlahan-lahan menghilang. Berikut latihannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

Page 14: Aneka Kreasi Animasi Dengan Adobe Flash CS3

78

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H 150 px.

Gambar 3.34 Pengaturan ukuran stage pada Document Properties

3. Klik Text Tool ( ), lalu buat tulisan “Animasi Teks” pada stage.

Gambar 3.35 Tulisan Animasi Teks di stage

4. Pilih tulisan Animasi Teks yang telah dibuat, kemudian klik menu Insert > Timeline Effects > Effects > Explode. Maka akan muncul jendela pengaturan Explode, kemudian klik tombol OK untuk mengakhirinya.

Page 15: Aneka Kreasi Animasi Dengan Adobe Flash CS3

79

Gambar 3.36 Jendela pengaturan Explode

5. Pada Layer 1 akan berubah namanya menjadi Explode 1, berikut contohnya.

Gambar 3.37 Hasil akhir tampilan layer

6. Simpan dengan nama animasi teks explode.fla.

7. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.38 Hasil animasi teks explode

Page 16: Aneka Kreasi Animasi Dengan Adobe Flash CS3

80

3.6 Membuat Animasi Teks Drop Shadow Pada latihan ini Anda akan dibimbing untuk membuat animasi Teks dengan efek Drop Shadow, yaitu animasi teks dengan efek memiliki bayangan. Berikut langkah pembuatannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Gambar 3.39 Pengaturan ukuran stage pada Document Properties

3. Klik Text Tool ( ), kemudian buat tulisan “Animasi Teks” pada stage.

Gambar 3.40 Tulisan Animasi Teks di stage

4. Klik tulisan Animasi Teks pada stage, kemudian pilih dan klik menu Insert > Timeline Effects > Effects > Drop Shadow. Maka akan muncul jendela pengaturan Drop Shadow, kemudian klik tombol OK untuk mengakhirinya.

Page 17: Aneka Kreasi Animasi Dengan Adobe Flash CS3

81

Gambar 3.41 Jendela pengaturan drop shadow

5. Maka tampilan di layer seperti gambar berikut.

Gambar 3.42 Hasil akhir tampilan layer

6. Simpan dengan nama animasi teks drop shadow.fla.

7. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.43 Hasil animasi teks drop shadow

Page 18: Aneka Kreasi Animasi Dengan Adobe Flash CS3

82

3.7 Membuat Animasi Teks Transform Pada latihan kali ini Anda akan dibimbing untuk membuat animasi Teks Transform, yang pada saat dijalankan teks tersebut berputar dengan arah yang kita inginkan. Untuk membuat animasi transform (berputar) langkah-langkahnya sebagai berikut:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Gambar 3.44 Pengaturan ukuran stage pada Document Properties

3. Klik Text Tool ( ), lalu buat tulisan “Animasi Teks” pada stage.

Gambar 3.45 Tulisan Animasi Teks di stage

4. Klik tulisan Animasi Teks yang baru saja dibuat, kemudian klik menu Insert > Timeline Effects > Transform/Transition > Transform. Maka akan muncul jendela pengaturan Transform.

Page 19: Aneka Kreasi Animasi Dengan Adobe Flash CS3

83

Gambar 3.46 Jendela pengaturan transform

5. Pada jendela pengaturan Transform, klik tanda putar ke kanan ( ) atau ke kiri ( ), sedangkan pada bagian spin berikan nilai 30.

Gambar 3.47 Pengaturan putar kiri atau kanan pada jendela pengaturan transform

6. Aktifkan pada bagian Change color, tentukan juga warna pada bagian Final color. Pengaturan warna ini dimaksudkan supaya pada akhir berjalannya animasi tulisan Animasi Teks akan ber-ubah warna menjadi biru.

Gambar 3.48 Pengaturan warna pada jendela pengaturan transform

Page 20: Aneka Kreasi Animasi Dengan Adobe Flash CS3

84

7. Isikan nilai terkecil pada bagian Final Alpha. Pengaturan ini dimaksudkan supaya pada akhir berjalannya animasi, tulisan Animasi Teks akan menghilang.

Gambar 3.49 Pengaturan nilai transparan pada jendela pengaturan transform

8. Untuk mengakhirinya klik tombol OK pada jendela Transform.

9. Maka hasil akhir pada layer seperti gambar berikut.

Gambar 3.50 Hasil akhir tampilan layer

10. Simpan dengan nama animasi teks transform.fla.

11. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.51 Hasil animasi teks transform

Page 21: Aneka Kreasi Animasi Dengan Adobe Flash CS3

85

3.8 Membuat Animasi Teks Blur Berjalan Tujuan akhir latihan ini adalah membuat animasi teks yang akan berjalan dari arah kiri ke kanan, kemudian pada saat di ujung jalannya animasi, maka teks tersebut memudar (blur). Berikut langkah pembuatannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px, Frame rate: 22 fps.

Gambar 3.52 Pengaturan stage pada Document Properties

3. Klik Text Tool ( ), kemudian buat tulisan “Animasi Teks” pada stage di posisi Frame 1 dari Layer 1.

Gambar 3.53 Tulisan Animasi Teks di stage

4. Tekan tombol F6 (Insert Keyframe) pada posisi Frame 20 dan Frame 21 dari Layer 1.

Gambar 3.54 Insert keyframe pada posisi frame 20 dan 21

Page 22: Aneka Kreasi Animasi Dengan Adobe Flash CS3

86

5. Pilih objek Animasi Teks pada posisi Frame 1 dari Layer 1, kemudian pindahkan posisinya pada sebelah kiri stage.

Gambar 3.55 Teks di sebelah kiri stage

6. Blok posisi Frame 1 sampai Frame 20 dari Layer 1, kemudian pada frame yang telah diblok, klik kanan dan pilih Create Motion Tween.

Gambar 3.56 Hasil create motion tween pada frame 1 sampai frame 20

7. Pilih objek Animasi Teks yang ada pada posisi Frame 21 dari Layer 1, lalu klik menu Insert > Timeline Effects > Effects > Blur.

Gambar 3.57 Hasil akhir tampilan layer

8. Simpan dengan nama animasi teks blur berjalan.fla.

9. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Page 23: Aneka Kreasi Animasi Dengan Adobe Flash CS3

87

Gambar 3.58 Hasil animasi teks blur berjalan

3.9 Membuat Animasi Teks Berkedip Pada latihan kali ini Anda akan dibimbing untuk membuat animasi teks berkedip-kedip, yaitu pada saat dijalankan teks akan tampil dan menghilang. Berikut langkah pembuatannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Gambar 3.59 Pengaturan ukuran stage pada Document Properties

3. Klik Text Tool ( ), kemudian ketik tulisan “Animasi Teks” pada stage di posisi Frame 1 dari Layer 1.

Page 24: Aneka Kreasi Animasi Dengan Adobe Flash CS3

88

Gambar 3.60 Tulisan Animasi Teks di stage

4. Tekan tombol F6 (Insert Keyframe) di posisi Frame 10, Frame 12, Frame 14, Frame 25, Frame 27 dan Frame 29 dari Layer 1.

Gambar 3.61 Hasil insert keyframe pada frame

5. Tekan tombol F7 (Insert Blank Keyframe) di posisi Frame 11, Frame 13, Frame 26, dan Frame 28 dari Layer 1.

Gambar 3.62 Hasil inser blank keyframe pada frame

6. Simpan dan beri nama animasi teks berkedip.fla.

7. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.63 Hasil animasi teks berkedip

Page 25: Aneka Kreasi Animasi Dengan Adobe Flash CS3

89

3.10 Membuat Animasi Teks Melayang Pada latihan kali ini Anda akan dibimbing untuk membuat animasi teks melayang-layang pada arah yang telah kita tentukan. Berikut langkah pembuatannya:

1. Buat dokumen baru dari menu File > New (Ctrl+N).

2. Tampilkan Document Properties (Ctrl+J) dan atur ukuran stage. W: 400 px, H: 150 px.

Gambar 3.64 Pengaturan ukuran stage pada Document Properties

3. Klik Text Tool ( ), kemudian ketikkan tulisan “Animasi Teks” pada posisi Frame 1 dari Layer 1.

Gambar 3.65 Tulisan Animasi Teks di stage

4. Klik pada posisi Frame 50 dari Layer 1, lalu pilih objek teks yang bertuliskan Animsi Teks, pindahkan posisinya ke bagian atas.

Page 26: Aneka Kreasi Animasi Dengan Adobe Flash CS3

90

Gambar 3.67 Pindahkan posisi tulisan Animasi Teks

5. Klik pada posisi Frame 100 dari Layer 1, kemudian pilih objek tulisan Animasi Teks dan pindahkan posisinya ke bawah sebelah kanan.

Gambar 3.68 Pindahkan posisi tulisan Animasi Teks

6. Klik pada posisi Frame 150 dari Layer 1, kemudian pilih objek tulisan Animasi Teks dan pindahkan posisinya ke bagian bawah kiri. Berikut contohnya.

Page 27: Aneka Kreasi Animasi Dengan Adobe Flash CS3

91

Gambar 3.69 Pindahkan posisi tulisan Animasi Teks

7. Simpan dengan nama animasi teks melayang.fla.

8. Untuk melihat hasilnya tekan tombol Ctrl+Enter.

Gambar 3.70 Hasil animasi teks melayang

oooOooo