e-sinaukomputer: BAB 6 | ANIMASI TEKS DENGAN SHAPE TWEEN - Membuat animasi teks dengan shape tween

Jumat, 12 Juni 2020

BAB 6 | ANIMASI TEKS DENGAN SHAPE TWEEN - Membuat animasi teks dengan shape tween

Indikator Hasil Belajar
  1. Siswa memahami fungsi break a part.
  2. Siswa mampu membuat animasi shape tween.
  3. Siswa mampu membuat animasi teks dengan shape tween.



URAIAN MATERI
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  lakukan pengaturan di Properties Family: Tahoma, Size:100pt lalu ketikkan huruf i di stage.
  • Gambar 6.4, untuk memperbesar teks klik Free Transform Tool  lalu aturlah seperti gambar dibawah, untuk mengatur supaya teks ditengah, klik Align: klik Align Horizontal Center  dan klik Align Vertical Center  lihat gambar.
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  lakukan pengaturan di Properties Family: Times New Roman, Size:100pt lalu ketikkan huruf i di stage. Jika di klik frame 1 dan frame 10 maka kedua frame terdapat teks sama yaitu huruf i namun beda font.
  • 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  aturlah warna Stroke: None  dan Fill: #FF0000  kemudian buatlah lingkaran bulat seperti pada gambar.
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  lalu atur dengan mengeser lingkaran ke kanan buat kedua lingkaran sejajar.
Gambar 6.11 Duplicate object bulat

Gambar 6.12 Atur object supaya sejajar
  • Gambar 6.13, klik Selection Tool  hilangkan seleksi lihat gambar lalu atur object sampai terlihat seperti digambar.
  • 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  lakukan pengaturan di Properties Family: Times New Roman, Size:100pt lalu ketikkan huruf U di stage.
  • Gambar 6.20, aturlah dengan Free Transform Tool letak teks dengan Align: Align Horizontal Center  dan Align Vertical Center  supaya teks ditengah stage.
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
  1. Apakah yang dimaksud dengan Shape Tween?
  2. Apakah dari Fungsi Break Apart?
  3. Jelaskan cara teks bisa diberi animasi!
  4. Apakah fungsi dari Ctrl+Enter?
  5. Apa fungsi Free Transfor Tool?
  6. Jelaskan fungsi dari Selection Tool!

Tidak ada komentar:

Posting Komentar

Postingan Terakhir

BAB 12 | PROJECT 2 | MANIPULASI VIDEO MENGGUNAKAN FITUR GREEN SCREEN (CHROMA KEY)

Indikator Hasil Belajar Dapat mengetahui fungsi green screen. Dapat mengaplikasikan fitur green screen pada Kinemaster.

Postingan Populer