Aneka Kreasi Animasi Dengan Adobe Flash CS3

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
65
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
66
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
67
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.
68
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:
69
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.
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
70
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

Expand, yaitu animasi teks yang pada saat dijalankan teks akan
melebar atau memperbesar jarak spasi antarhurufnya. Berikut
langkahnya:
W: 400 px, H: 150 px.
71
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.
72
Gambar 3.21 Hasil akhir tampilan layer dan frame
6. Simpan dengan nama animasi teks expand.fla.

Gambar 3.22 Hasil animasi teks expand
3.4 Membuat Animasi Teks Loncat

teks loncat-loncat, yaitu pada saat dijalankan, masing-masing huruf
dari teks akan loncat atau bergerak ke atas secara bergantian. Be-
rikut langkah latihannya:
W: 400 px, H: 150 px.
73
3. Klik pada posisi Frame 1 dari Layer 1, lalu klik Text Tool ( )
dan ketikkan tulisan “Animasi Teks” pada 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.
74
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
75
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.
76
15. Simpan dengan nama animasi teks loncat.fla.

Gambar 3.33 Hasil animasi teks loncat
3.5 Membuat Animasi Teks Explode

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:
77
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.
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.
78
Gambar 3.36 Jendela pengaturan Explode
5. Pada Layer 1 akan berubah namanya menjadi Explode 1, berikut

contohnya.
6. Simpan dengan nama animasi teks explode.fla.

Gambar 3.38 Hasil animasi teks explode
79
3.6 Membuat Animasi Teks Drop Shadow
dengan efek Drop Shadow, yaitu animasi teks dengan efek memiliki
bayangan. Berikut langkah pembuatannya:
W: 400 px, H: 150 px.
3. Klik Text Tool ( ), kemudian buat tulisan “Animasi Teks” pada

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.
80
Gambar 3.41 Jendela pengaturan drop shadow
5. Maka tampilan di layer seperti gambar berikut.
6. Simpan dengan nama animasi teks drop shadow.fla.

Gambar 3.43 Hasil animasi teks drop shadow
81
3.7 Membuat Animasi Teks Transform
Teks Transform, yang pada saat dijalankan teks tersebut berputar
dengan arah yang kita inginkan. Untuk membuat animasi transform
(berputar) langkah-langkahnya sebagai berikut:
W: 400 px, H: 150 px.
3. Klik Text Tool ( ), lalu buat tulisan “Animasi Teks” pada 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.
82
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
83
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.
10. Simpan dengan nama animasi teks transform.fla.

Gambar 3.51 Hasil animasi teks transform
84
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:
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.
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
85
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.
8. Simpan dengan nama animasi teks blur berjalan.fla.

86
Gambar 3.58 Hasil animasi teks blur berjalan
3.9 Membuat Animasi Teks Berkedip

teks berkedip-kedip, yaitu pada saat dijalankan teks akan tampil dan
menghilang. Berikut langkah pembuatannya:
W: 400 px, H: 150 px.
3. Klik Text Tool ( ), kemudian ketik tulisan “Animasi Teks” pada

stage di posisi Frame 1 dari Layer 1.
87
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.

Gambar 3.63 Hasil animasi teks berkedip
88
3.10 Membuat Animasi Teks Melayang
teks melayang-layang pada arah yang telah kita tentukan. Berikut
langkah pembuatannya:
W: 400 px, H: 150 px.
3. Klik Text Tool ( ), kemudian ketikkan tulisan “Animasi Teks”

pada posisi Frame 1 dari Layer 1.
4. Klik pada posisi Frame 50 dari Layer 1, lalu pilih objek teks yang
bertuliskan Animsi Teks, pindahkan posisinya ke bagian atas.
89
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.
6. Klik pada posisi Frame 150 dari Layer 1, kemudian pilih objek
tulisan Animasi Teks dan pindahkan posisinya ke bagian bawah
kiri. Berikut contohnya.
90
7. Simpan dengan nama animasi teks melayang.fla.

Gambar 3.70 Hasil animasi teks melayang
oooOooo
91

Aneka Kreasi Animasi Dengan Adobe Flash CS3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aneka Kreasi Animasi Dengan Adobe Flash CS3

Diunggah oleh

Hak Cipta:

Format Tersedia

Aneka Kreasi Animasi Teks

Animasi teks sangat banyak digunakan dan diperlukan dalam

3.1 Membuat Animasi Teks Berputar

Gambar 3.1 Pengaturan stage pada document properties

Gambar 3.2 Tulisan Animasi Teks di stage

4. Pilih teks yang akan dibuat animasi, kemudian Break Apart

Gambar 3.3 Break apart tulisan Animasi Teks

5. Klik pada posisi Frame 1 dari Layer 1, kemudian klik menu

Gambar 3.4 Hasil distribute layer

Gambar 3.5 Insert keyframe pada posisi frame 5

7. Blok posisi Frame 1 sampai Frame 5 dari Layer A (caranya klik

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

Gambar 3.8 Insert keyframe pada frame 3 dan 8

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

Gambar 3.11 Hasil insert frame pada frame 8

13. Kemudian untuk layer berikutnya, lakukan dengan cara yang

14. Simpan dengan nama animasi teks putar.fla.

Gambar 3.13 Hasil animasi teks berputar

3.2 Membuat Animasi Teks Blur

Gambar 3.14 Pengaturan ukuran stage pada document properties

Gambar 3.15 Tulisan Animasi Teks di stage

Gambar 3.16 Jendela pengaturan Blur

Gambar 3.17 Hasil akhir tampilan layer

6. Simpan dengan nama animasi teks blur.fla.

Gambar 3.18 Hasil animasi teks blur

3.3 Membuat Animasi Teks Expand

Gambar 3.20 Kotak pengaturan expand

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

6. Simpan dengan nama animasi teks expand.fla.

Gambar 3.22 Hasil animasi teks expand

3.4 Membuat Animasi Teks Loncat

Gambar 3.24 Tulisan Animasi Teks di stage

4. Pilih tulisan “Animasi Teks” tersebut, kemudian lakukan Break

Gambar 3.25 Hasil break apart tulisan animasi teks

5. Klik pada posisi Frame 1 dari Layer 1, kemudian klik menu

6. Klik pada posisi Frame 5 dan 10 pada Layer A, kemudian tekan

Gambar 3.27 Hasil Insert keyframe pada posisi frame 5 dan 10

Gambar 3.28 Pindah posisi teks A ke atas

Gambar 3.29 Hasil create motion tween pada frame 1 sampai 10

10. Tekan tombol F6 (Insert Keyframe) di posisi Frame 5, Frame

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.

15. Simpan dengan nama animasi teks loncat.fla.

Gambar 3.33 Hasil animasi teks loncat

3.5 Membuat Animasi Teks Explode

Gambar 3.34 Pengaturan ukuran stage pada Document Properties

Gambar 3.35 Tulisan Animasi Teks di stage

4. Pilih tulisan Animasi Teks yang telah dibuat, kemudian klik

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

Gambar 3.37 Hasil akhir tampilan layer

6. Simpan dengan nama animasi teks explode.fla.

Gambar 3.38 Hasil animasi teks explode

Gambar 3.39 Pengaturan ukuran stage pada Document Properties

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

Gambar 3.40 Tulisan Animasi Teks di stage

5. Maka tampilan di layer seperti gambar berikut.

Gambar 3.42 Hasil akhir tampilan layer

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