- Siswa memahami fungsi break a part.
- Siswa mampu membuat animasi shape tween.
- Siswa mampu membuat animasi teks dengan shape tween.
Pada materi kali ini kita akan mempelejari
animasi teks dengan shape tween, ada
cara tersendiri untuk memberikan animasi pada teks, untuk memberikan animasi
pada teks maka teks tersebut harus di break
apart terlebih dahulu atau teks tersebut dijadikan simbol. yang dimaksud
animasi teks dengan shape tween adalah penggabungan antara keduanya berupa teks
dan object sehingga menghasilkan sebuah animasi yang cukup menarik.
ANIMASI TEKS DAN SHAPE TWEEN
Supaya lebih jelas berikut gambaran cara
pembuatan animasi teks dengan shape tween yang akan kita pelajari.
- Gambar 1, buka adobe flash klik menu>File>New...>ActionScript 2.0>klik OK.
- Gambar 2, lembar kerja adobe flash cs6.
Gambar 6.1 Membuat Dokumen Baru
Gambar 6.2 Lembar kerja adobe flash CS6
- Gambar 6.3, klik Text Tool
- Gambar 6.4, untuk memperbesar teks klik Free
Transform Tool
Gambar 6.3 Menambahkan Teks i di Stage
Gambar 6.4 Mengatur teks dengan Align dan Free Transform
T
- Gambar 6.5, klik frame 10 klik Insert Blank Keyframe, gunanya untuk menambahkan keyframe kosong baru di frame 10.
- Gambar 6.6, keyframe baru terbantuk di frame 10.
Gambar 6.5 Menambahkan Keyframe Baru di Frame 10
Gambar 6.6 Keyframe baru terbentuk di frame 10
- Gambar 6.7, klik Text Tool
- Gambar 6.8, klik frame 20 klik Insert Blank Keyframe, gunanya untuk menambahkan keyframe kosong baru di frame 20.
Gambar 6.7 Keyframe baru terbentuk
Gambar 6.8 Menambahkan frame baru di frame 20
- Gambar 6.9, keyframe baru terbantuk di frame 10. Lalu aturlah Stroke:None Fill:#FF0000.
- Gambar 6.10, Klik Oval Tool
Gambar 6.9 Keyframe baru terbentuk di frame 20
Gambar 6.10 Buat Object Lingkaran
- Gambar 6.11, posisi di Frame 20 klik menu Edit>Duplicate(Ctrl+D) untuk duplicate object.
- Gambar 6.12, klik Free Transform Tool
Gambar 6.11 Duplicate object bulat
Gambar 6.12 Atur object supaya sejajar
- Gambar 6.13, klik Selection Tool
- Gambar 6.14, klik frame 30 klik Insert Keyframe, gunanya untuk menambahkan keyframe baru di frame 30.
Gambar 6.13 Edit Object dengan Selection Tool
Gambar 6.14 Menambahkan Keyframe baru di Frame
30
- Gambar 6.15, hasil dari insert keyframe baru di frame 30.
- Gambar 6.16, menambahkan keyframe baru di frame 40.
Gambar 6.15 Hasil Insert keyframe di frame 30
Gambar 6.16 Menambakan Keyframe di Frame 40
- Gambar 6.17, hasil insert keyframe di frame 40.
- Gambar 6.18, Insert Blank Keyframe di frame 50.
Gambar 6.17 Hasil Insert Keyframe di Frame 40
Gambar 6.18 Menambahkan Insert Blank Keyframe
- Gambar 6.19, klik Text Tool
- Gambar 6.20, aturlah dengan Free Transform Tool
letak teks dengan Align: Align Horizontal Center
Gambar 6.19 Pengaturan Properties
Text Tool
Gambar 6.20 Membasarkan Teks
dengan Free Transform Tool
- Gambar 6.21 menambahkan Insert Keyframe di Frame 59.
- Gambar 6.22, hasil Insert Keyframe di frame 59.
Gambar 6.21 Menambahkan Insert Keyframe di Frame
59
Gambar 6.22 Hasil Insert Keyframe di Frame 59
- Gambar 6.23, posisi di Frame 1 klik kanan Copy Frames.
- Gambar 6.24, posisi di Frame 60 klik kanan Paste Frames.
Gambar 6.23 Copy Frames dari Frames 1
Gambar 6.24 Paste Frame di Frame 60
- Gambar 6.25, hasil copy frames.
- Gambar 6.26, posisi di Frame 1 lalu klik menu Modify>Break Apart (Ctrl+B). Fungsinya supaya teks bisa diberikan animasi shape tween.
Gambar 6.25 Hasil Copy Frames
Gambar 6.26 Break Apart Frame 10
- Gambar 6.27, hasil break apart teks.
- Gambar 6.28, klik di frame 10, klik Modify>Break Apart (Ctrl+B). Lakukan break apart dua kali.
Gambar 6.27 Hasil Break Apart Teks di frame 1
Gambar 6.28 Break Apart di Frame 10
- Gambar 6.29, hasil Break Apart frame 10.
- Gambar 6.30, Break Apart Frame 20.
Gambar 6.29 Hasil break apart frame 10
Gambar 6.30 Break Apart Frame 20
- Gambar 6.31, Break Apart Frame 30.
- Gambar 6.32, Break Apart Frame 40.
Gambar 6.31 Break Apart Frame 30
Gambar 6.32 Break Apart Frame 40
- Gambar 6.33, Break Apart Frame 50.
- Gambar 6.34, Break Apart Frame 59.
Gambar 6.33 Break Apart Frame 50
Gambar 6.34 Break Apart Frame 59
- Gambar 6.35, Break Apart Frame 60.
- Gambar 6.36, klik frame 10, klik kanan pilih Create Shape Tween.
Gambar 6.35 Break Apart Frame 60
Gambar 6.36 Create Shape Tween Frame 10
- Gambar 6.37, klik frame 30, klik kanan pilih Create Shape Tween.
- Gambar 6.38, klik frame 50, klik kanan pilih Create Shape Tween.
Gambar 6.37 Create Shape Tween Frame 30
Gambar 6.38 Create Shape Tween Frame 50
- Gambar 6.39, Create Shape Tween Selesai, panah hijau tanda ada animasi.
- Gambar 6.40, tekan Enter atau Ctrl+Enter untuk melihat hasilnya.
Gambar 6.39 Panah hijau tanda ada animasi
Gambar 6.40 Hasil Akhir Teks dengan Shaoe Tween
Catatan:
Supaya hasil teratur, gunakan Align Horizontal
Center dan Align Vertical Center untuk mengatur setiap keyframe.
PERTANYAAN
- Apakah yang dimaksud dengan Shape Tween?
- Apakah dari Fungsi Break Apart?
- Jelaskan cara teks bisa diberi animasi!
- Apakah fungsi dari Ctrl+Enter?
- Apa fungsi Free Transfor Tool?
- Jelaskan fungsi dari Selection Tool!
Tidak ada komentar:
Posting Komentar