Tweening

Materi untuk Semester 2

Tujuan Pembelajaran:

3.1. Memahami teknik animasi tweening4.1. Membuat animasi 2 dimensi menggunakan teknik tweening3.2. Memahami teknik pembuatan obyek pada aplikasi animasi 2 dimensi4.2. Membuat obyek pada aplikasi 2 dimensi

Apa sih Tweening itu?

Pada dasarnya tweening adalah merubah. Dalam pelajaran animasi ini pada aplikasi adobe flash/animate, tween terbagi menjadi dua jenis yaitu:

Motion tween

Motion tween merubah sebuah gerakan objek. Menggerakan satu objek dari satu ke arah yang lain. Dari titik 1 menuju titik 2 ke-3 dan seterusnya. Setiap pergerakan dapat disebut juga motion tween dalam dunia animasi.

Shape tweening

Shape tween adalah sebuah perubahan bentuk dari suatu objek. Dari persegi menjadi lingkaran menjadi segilima dan sebagainya. Setiap perubahan bentuk objek dalam dunia animasi disebut dengan Shape tween

Perhatikan contoh animasi berikut ini....

Pada gambar ini, motion tweening terjadi pada saat gambar persegi berubah arah menuju koordinat lingkaran. Sementara Shape tween terjadi saat gambar persegi berubah menjadi lingkaran dan lingkaran berubah menjadi segi lima.

Begitulah sedikit gambaran tentang tweening.

Perkenalan Adobe Flash/Animate

Salah satu aplikasi komputer yang berfungsi untuk membuat animasi sederhana adalah Adobe Flash/Animate. Sejak tahun 2016 Adobe Flash berubah nama menjadi Adobe Animate, fitur masih sama hanya rebranding dan beberapa upgrade saja. Aplikasi ini cukup populer karena memang salah satu aplikasi yang sering dipakai oleh para animator khususnya untuk web. Saat ini yang akan kita gunakan adalah Adobe Animate CC.

Ini adalah tampilan awal ketika anda membuka aplikasi Adobe Animate CC. Ketika ingin memulai membuat ada beberapa jenis project yang akan kita pilih dan akan kita bahas satu per satu.

HTML5 Canvas

HTML5 sendiri memiliki kepanjangan Hyper-Text Markup Language versi ke-5. HTML itu merupakan bahasa pemrograman yang disusun dengan sebuah tag/marka </> yang mengkonstruksi sebuah website yang dirancang sedemikian rupa sehingga bisa menjadi tampilan yang biasa kita lihat.

HyperText: adalah istilah teks aktif, yang apabila diklik akan meloncat atau menuju halaman lain. Ini merupakan kemampuan dari sebuah halaman web yang dapat saling berhubungan antara halaman satu dengan lainnya.
Markup: Merupakan tag-tag yang biasanya diawali dengan tag pembuka (opening tag) dan tag penutup (closing tag) yang memberi kemampuan untuk menata layout atau memformat struktur halaman web pada sebuah konten teks sederhana didalam file HTML itu sendiri.
Language: yaitu bahasa yang digunakan oleh HTML itu sendiri. Perintah-perintah tag menggunakan bahasa yang dapat dimengerti oleh browser atau interpreter lainnya.

Jadi kalo kamu ingin membuat animasi sederhana, minimalis, dan terbuka (bisa dilihat dari berbagai platform) gunakan pilihan HTML5 ini untuk memulai project

WebGL

WebGL memiliki kepanjangan Web Graphics Library yang berfungsi untuk memproses bangunan 2D dan 3D secara kompleks. Jadi jika kamu ingin membangun visual website yang high spec (karena hanya bisa dibuka pada kartu grafis tinggi) dan animatif (pergerakan lebih bebas) gunakan project ini.

Action Script 3.0

Merupakan bahasa yang memungkinkan interaksi antara aplikasi dan penggunanya. Interaksi bisa dengan tampilan visual maupun auditori sehingga memungkinkan pengguna untuk memiliki pengalaman berselancar internet yang lebih memuaskan. Jadi jika kamu ingin membuat tampilan animasi yang memungkinkan kita untuk berinteraksi secara maksimal dengan pengguna, buatlah project dengan basis actionscript ini.

Itu tadi adalah bahasan singkat dan sederhana tentang bagaimana kamu memulai project dengan Adobe Animate. Jika ingin mengetahui lebih jauh silahkan cari referensi lain.

Karena kita ingin membuat animasi sederhana maka cukuplah kita menggunakan HTML5 pada Adobe Animate.

Menu Bar memiliki fungsi untuk menampilkan apa saja yang ingin lakukan untuk aplikasi ini
Monitor adalah tempat untuk melihat tampilan desain kita
Tool Bar adalah tempat untuk kita mengedit atau memodifikasi animasi yang akan kita buat
Timeline adalah tempat kita untuk melihat layer, durasi dan apa yang akan kita lakukan pada waktu dan layer tesebut.
Preview Bar digunakan untuk memulai dan menghentikan animasi.

Fungsi Toolbar

Dari atas kebawah:

Selection Tool (V): digunakan untuk memilih objek mana yang aktif untuk diedit

Subseletion Tool (A): digunakan untuk memilih koordinat suatu objek untuk diedit

Free Transform Tool (Q): digunakan untuk merubah ukuran objek secara bebas

3D Rotation Tool (W): digunakan untuk memutar objek secara 3 dimensi (hanya untuk Web GL)

Lasso Tool (L): digunakan untuk memotong objek secara bebas

Pen Tool (P): Digunakan untuk menghapus, menambah, atau merubah satu koordinat pada objek

Text Tool (T): Digunakan untuk menghapus, menambah, atau merubah teks

Line Tool (L): Digunakan untuk menambahkan garis lurus/lengkung

Rectangle Tool (R): Digunakan untuk menambah objek segi empat

Oval Tool (O): Digunakan untuk menambah objek lingkar

Poly Star Tool: Digunakan untuk menambah objek berbentuk lain/bebas

Pencil Tool (Shift+Y): Digunakan untuk menggambar bebas

Paint Brush Tool (Y) & Brush Tool (B): Digunakan untuk menggambar bebas dengan garis yang lebih besar dan tersebar.

Bone/Bind Tool (M): Digunakan untuk mengatur titik koordinat sumbu putar

Paint Bucket Tool (K): Digunakan untuk mewarnai keseluruhan objek

Paint Ink Tool (I): Digunakan untuk mewarnai dengan warna pilihan kita

Eyedropper Tool (I): Digunakan untuk mencari warna sesuai dengan yang kita tuju

Eraser Tool (E): Digunakan untuk menghapus bagian dari suatu objek

Bagaimana cara melakukan Tweening pada Adobe Animate

Klik kanan pada frame 1 Layer 1 pada timeline anda

2. Setelah klik kanan akan muncul banyak pilihan, Klik menu Insert Keyframe

3. Buatlah lingkaran dengan Oval Tool

4. Klik menu Insert Keyframe pada frame 20 (durasi frame bebas)

5. klik frame 20 (atau dimanapun keyframe kedua yang telah kamu buat) kemudian pindahkan lingkaran

6. Setelah memindahkan, kamu kembali ke timeline klik frame 1. Kemudian kamu pencet shift pada keyboard dari frame 1 hingga 20 ((atau dimanapun keyframe kedua yang telah kamu buat). Langkah terakhir klik kanan pada frame terakhirmu.

7. Setelah kamu klik kanan, pilih menu Create Classic Tween

8. Jika berhasil maka tampilan pada Timelinmu akan berbentuk seperti ini. Dan Lingkaran itu akan bergerak sepanjang 20 frame

9. Inilah Tampilan animasi yang tadi telah dibuat

Itulah tadi cara membuat sebuah motion tween dengan satu layer.

Berikutnya adalah mengenai cara pembuatan Shape tween

Bagaimana cara melakukan Shape Tweening pada Adobe Animate

Ikuti langkah 1-4 pada Motion Tween, Kita akan bermain dengan durasi yang sama yaitu 20 frame

5. Buatlah gambar persegi pada frame akhir, atau jika pada project yang saya buat frame 20.

6. Setelah membuat persegi, kamu kembali ke timeline klik frame 1. Kemudian kamu pencet shift pada keyboard dari frame 1 hingga 20 ((atau dimanapun keyframe kedua yang telah kamu buat). Langkah terakhir klik kanan pada frame terakhirmu.

7. Jika berhasil maka gambar akan bergerak seperti ini.

<< Kembali

Page updated

Google Sites

Report abuse