Transcript
Page 1: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

277

Latihan 45

Teks dengan Efek Zoom In pada Setiap Huruf

Pada latihan ini kita akan membuat animasi teks dengan efek Zoom In di setiap huruf penyusunnya. Metode animasinya dimulai dari kiri ke kanan secara lambat, kemudian secara cepat dari kanan ke kiri. Untuk lebih mudahnya, ikutilah langkah pembuatan berikut.

Langkah 1: Mempersiapkan Area Kerja

1. Buatlah dokumen baru. klik menu File > New (Ctrl+N).

2. Dalam jendela New Document, klik tab General dan pilih Flash File (ActionScript 2.0). Kemudian klik tombol OK.

3. Dari menu bar, klik menu Modify > Document (Ctrl+J) atau klik

tombol Size yang ada pada panel Properties.

4. Dari jendela Document Properties, ubahlah ukuran Stage dengan ketentuan, width 250 px, height 70 px, background color putih standar dan frame rate 35 fps.

Gambar 45.1 Pengaturan halaman Stage

Page 2: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

278

Langkah 2: Membuat Huruf dalam Bentuk Layer

1. Klik ikon Text Tool pada toolbox, kemudian klik di dalam area Stage.

2. Di dalam kotak teks yang muncul, ketikkan “Cantik”. Berikut contoh hasilnya.

Gambar 45.2 Membuat teks di dalam Stage

3. Klik ikon Selection Tool yang ada pada toolbox.

Kondisi teks terpilih, klik menu Modify > Break Apart (Ctrl + B). Dengan cara ini, teks akan terpecah menjadi perhuruf.

Gambar 45.3 Teks telah terpecah perhuruf

4. Kondisi semua huruf terpilih (Ctrl+A), klik menu Modify > Timeline > Distribute to Layer atau dari klik kanan.

Gambar 45.4 Hasil pembuatan layer dari huruf Cantik

Page 3: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

279

5. Hapus Layer 1 yang sudah tidak dipakai lagi. Caranya, klik kanan pada Layer 1, kemudian pilih menu Delete Layer.

Langkah 3: Membuat Efek Zoom In Pada Huruf C

1. Klik Frame 10 Layer C (huruf pertama), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.5 Membuat keyframe pada Frame 10 Layer C

2. Klik kanan pada salah satu frame Layer C (antara Frame 1 sampai dengan Frame 10), kemudian klik menu Create Motion Tween.

Gambar 45.6 Mengaktifkan Motion Tween

3. Klik Frame 5 Layer C (huruf pertama), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

4. Klik ikon Free Transform Tool yang ada pada toolbox.

5. Masih pada Frame 5 Layer C, perbesar ukuran huruf C (tekan Shift+tarik ke atas). Berikut ini contohnya.

Gambar 45.7 Memperbesar ukuran huruf C

Langkah 4: Membuat Efek Zoom In pada Huruf a

1. Klik Frame 5 Layer a (huruf kedua), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Page 4: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

280

Gambar 45.8 Membuat keyframe pada Frame 5 Layer a

2. Klik Frame 15 Layer a (huruf kedua), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.9 Membuat keyframe pada Frame 15 Layer a

3. Klik kanan pada salah satu frame Layer A (antara Frame 5 sampai dengan Frame 15), kemudian klik menu Create Motion Tween.

4. Klik Frame 10 Layer a (huruf kedua), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

5. Klik ikon Free Transform Tool pada toolbox.

6. Perbesar ukuran huruf a (tekan Shift+tarik ke atas). Berikut contoh dan hasilnya.

Gambar 45.10 Memperbesar ukuran huruf a

7. Kembali lagi pada Frame 1 Layer a, kemudian tekan tombol Delete dari keyboard untuk menghapus nilai frame awal.

Gambar 45.11 Menghapus nilai pada frame 1 dari layer a

Page 5: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

281

Langkah 5: Membuat Efek Zoom In pada Huruf n

1. Klik Frame 10 Layer n (huruf ketiga), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.12 Membuat keyframe pada Frame 10 Layer n

2. Klik Frame 20 Layer n (huruf ketiga), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.13 Membuat keyframe pada Frame 20 Layer n

3. Klik kanan pada salah satu frame Layer n (antara Frame 10 sampai dengan Frame 20), kemudian klik menu Create Motion Tween.

4. Klik Frame 15 Layer n (huruf ketiga), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

5. Klik ikon Free Transform Tool pada toolbox.

6. Perbesar ukuran huruf n (tekan Shift+tarik ke atas). Berikut contoh dan hasilnya.

Gambar 45.14 Memperbesar ukuran huruf n

7. Klik kembali Frame 1 Layer n, kemudian tekan tombol Delete dari keyboard untuk menghapus nilai frame awal.

Page 6: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

282

Gambar 45.15 Menghapus nilai pada Frame 1 Layer n

Langkah 6: Membuat Efek Zoom In pada Huruf t

1. Klik Frame 15 Layer t (huruf keempat), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.16 Membuat keyframe pada Frame 15 Layer t

2. Klik Frame 25 Layer t (huruf keempat), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.17 Membuat keyframe pada Frame 25 Layer t

3. Klik kanan pada salah satu frame Layer t (antara Frame 15 sampai dengan Frame 25), kemudian klik menu Create Motion Tween.

4. Klik Frame 20 Layer t (huruf keempat), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

5. Klik ikon Free Transform Tool pada toolbox.

6. Perbesar ukuran huruf t (tekan Shift+tarik ke atas). Berikut contoh dan hasilnya.

Gambar 45.18 Memperbesar ukuran huruf t

Page 7: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

283

7. Klik kembali Frame 1 Layer t, kemudian tekan tombol Delete dari keyboard untuk menghapus nilai frame awal.

Gambar 45.19 Menghapus nilai pada Frame 1 Layer t

Langkah 7: Membuat Efek Zoom In pada Huruf i

1. Klik Frame 20 Layer i (huruf kelima), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.20 Membuat keyframe pada Frame 20 Layer i

2. Klik Frame 30 Layer i (huruf kelima), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.21 Membuat keyframe pada Frame 30 Layer i

3. Klik kanan pada salah satu frame Layer i (antara Frame 20 sampai dengan Frame 30), kemudian klik menu Create Motion Tween.

4. Klik Frame 25 Layer i (huruf kelima), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

5. Klik ikon Free Transform Tool pada toolbox.

6. Perbesar ukuran huruf i (tekan Shift+tarik ke atas).

Page 8: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

284

Berikut ini contoh dan hasilnya.

Gambar 45.22 Memperbesar ukuran huruf i

7. Klik kembali Frame 1 Layer i, kemudian tekan tombol Delete dari keyboard untuk menghapus nilai frame awal.

Langkah 8: Membuat Efek Zoom In pada Huruf k

1. Klik Frame 25 Layer k (huruf terakhir), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.23 Membuat keyframe pada Frame 25 Layer k

2. Klik Frame 35 Layer k (huruf terakhir), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.24 Membuat keyframe pada Frame 35 Layer k

3. Klik kanan pada salah satu frame Layer k (antara Frame 25 sampai dengan Frame 35), kemudian klik menu Create Motion Tween.

4. Klik Frame 30 Layer k (huruf keempat), kemudian tekan tombol F6 untuk mengaktifkan Insert Keyframe.

5. Klik ikon Free Transform Tool pada toolbox.

6. Perbesar ukuran huruf k (tekan Shift+tarik ke atas).

Page 9: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

285

Berikut contoh dan hasilnya.

Gambar 45.25 Memperbesar ukuran huruf k

7. Klik kembali Frame 1 Layer k, kemudian tekan tombol Delete dari keyboard untuk menghapus nilai frame awal.

Langkah 9: Meratakan Keyframe dan Menyimpan

1. Klik Frame 35 Layer k (huruf terakhir), tekan tombol Shift pada keyboard, kemudian klik pada Frame 35 Layer C (huruf layer pertama).

Gambar 45.26 Memilih semua Frame 35

2. Setelah Frame 35 dari semua layer terpilih, tekan tombol F6 untuk mengaktifkan Insert Keyframe.

Gambar 45.27 Membuat keyframe pada Frame 35

Page 10: 50 Kreasi Efek Dan Animasi Teks Dengan Flash CS3

286

3. Dari menu File > Save, simpan latihan ini dengan nama Lat45_EfekHurufZoomIn.fla.

4. Untuk mengetahui hasilnya, tekan Ctrl+Enter.

Gambar 45.28 Contoh hasil efek zoom in


Recommended