Tugas 3 , (Materi) Peng. Animasi & Desain Grafis

Peng. Animasi dan Desain Grafis

Continuous Action , Konsep Dynamic Text Field dan , Modifikasi Button dan menambah navigasi

Kelompok 9

Muhammad Fauzan ( 17114239)   M. Finan Iskandar ( 1D114014 )   Thio Andhika S. ( 1A114731 )

Continuous Action

Pada Continous Action animasi dibuat secara step by step atau berurutan , salah satu contohnya adalah animasi dari stop motion. Pada filem-filem yang kita lihat ditelevisi juga ada beberapa filem animasi yang menggunakan stop motion , seperti yang kita ketahui diantaranya adalah “Shaun the sheep” . Jadi proses pembuatannya animasinya itu terdiri dari beberapa gambar , terdapat kumpulan gambar yang diantara gambar yang satu dengan yang lain saling berkaitan, Sehingga ketika gambar disatukan dan berurut, gambar akan terlihat menjadi seperti bergerak.

Disini saya akan memberikan contoh proses pembuatan animasi sederhana “Continuous Action” dengan menggunakan aplikasi “Pivot Animator” .

Untuk membuat animasi menggunakan “Pivot Animator” sebenarnya cukup mudah , karena pada software tersebut sudah disediakan karakter utama , hanya saja kita bisa mengatur arah gerak sesuai dengan yang kita mau melalui titik” yang sudah disediakan. Dapat dilihat pada gambar diatas terdapat 1 buah karakter yaitu orang . dan pada gambar di atas juga terdapat beberapa frame yang tiap-tiap gambar pada frame nya berbeda satu sama lain.

Apabila kita sudah memastikan posisi karakter yang kita inginkan dan ingin melanjutkan untuk mengubah posisi karakter tersebut ke posisi selanjutnya kita bisa mengklik tulisan “Tambahkan Frame” dan nanti akan begini hasilnya

Terdapat siluet / bayangan gerakan sebelumnya ,ini lah yang dapat memudahkan kita dalam membuat animasi yang diinginkan, jadi tidak perlu memperkirakan gerakan atau dimana posisi yang pas pada animasi yang kita buat. Apabila semua gerakan sudah dibuat pada tiap-tiap frame maka untuk melihat apakah pergerakan atau gambar yang kita buat di tiap”tiap frame nya sudah pas atau belum maka dapat dilihat dengan cara mengklik button “Jalan” , disitu nantinya akan menampilkan pergerakan yang ada pada tiap-tiap frame secara berurut. Dan jika sudah yakin dengan gambar yang dibuat maka kita bisa mengubah kumpulan gambar didalam frame tersebut menjadi animasi. Caranya kita tinggal klik saja “file” , lalu klik tulisan “Buat Animasinya”

Jika sudah di klik nanti kita akan diminta untuk menamai animasi tersebut , dan juga kita bisa memilih ekstensi dari animasi tersebut , ada 2 pilihan ekstensi file pada aplikasi “Pivot Animator” yaitu Gif & Avi

Jika sudah kita bisa memilih tempat yang akan menyimpan file animasi yang sudah kita buat.

Kurang lebih begitu contoh dari proses atau cara pembuatan animasi “Continuous Action”

Konsep Dynamic Text Field

Dynamic Text biasanya digunakan untuk menampilkan kata / kalimat yang dapat berubah sewaktu-waktu sesuai dengan masukkan perintah yang diberikan. Untuk mengubah bentuk dan isinya bisa menggunakan action script. Contohnya adalah , teks yang menampilkan score pada papan score hasil pertandingan olahraga , jadwal kedatabgab pesawat , tampilan jam digital , dll .

Modifikasi Button dan menambah navigasi

Navigasi berfungsi untuk membawa pengunjung menjelajah dari satu halaman ke halaman lainnya melalui media link, tombol, atau menu.Sedangkan button berfungsi sebagai media atau alat perantara dari navigasinya.

Selanjutnya saya akan menjelaskan bagaimana cara membuat navigasi button pada flash

Disini untuk membuat button dan navigasinya menggunakan Adobe Flash CS5 dengan ActionScript 3.0. Sama seperti kita menggunakannya pada Flash ActionSctipt 2.0, bedanya terdapat pada cara pemanggilan tombolnya jika pada ActionSctipt 3.0.

Yang pertama kita siapkan kurang lebih 4 buah frame yang kemudian pada tiap frame terdapat satu halaman informasi. Buka Flash CS5-nya (pilih yang ActionScript 3.0), lalu pilih Rectangle Tool (R) pada Toolbox. Buat objek persegi pada Frame 1, dengan pengaturan pada properties seperti gambar berikut:

 Atur posisi objek persegi pada Stage seperti ini

Kemudian klik di Frame 2, klik kanan pilih Insert Keyframe (F6). Lakukan Insert Keyframe juga pada Frame 3 dan Frame 4. Sekarang kita sudah mempunyai empat buah Frame pada Timeline.

  

Langkah berikutnya adalah, klik di Frame 1. Kemudian pilih Text Tool (T), lalu buat tulisan “SELAMAT DATANG” seperti gambar berikut ini.

Selanjutnya klik di Frame 2 lalu dengan Text Tool tuliskan “HALAMAN PROFIL”, begitu juga dengan Frame 3 dan 4. Frame 3 tuliskan “HALAMAN GALERI”, Frame 4 tuliskan “HALAMAN KONTAK”.

Sekarang kita sudah mempunyai empat buah halaman yang nantinya akan kita hubungkan satu dengan lainnya dengan menggunakan tombol sebagai navigatornya. Buat Layer baru terlebih dahulu dengan cara pilih menu Insert > Timeline > Layer. Buatlah empat buah tombol, yaitu: Tombol “HOME”, “PROFIL”, “GALERI”, dan “KONTAK” (untuk cara membuat tombolnya tidak akan dibahas disini, karena saya anggap itu sudah mengerti dan dasar). 

Tombol sudah siap untuk kita operasikan, berikut adalah contoh ke empat buah tombolnya. Posisikan seperti gambar berikut.

Tombol sudah selesai kita buat. Langkah selanjutnya adalah memberikan Action pada tombol-tombol tersebut. Pilih/klik tombol HOME, lalu pada Properties pada bagian Instance Name tuliskan dengan “tombol_home”.

Langkah selanjutnya adalah pemberian Action pada keempat tombol tersebut. Tambahkan Layer baru dengan cara pilih menu Insert > Timeline > Layer. Klik di Frame 1 lalu buka Action dengan cara menekan tombol F9 pada keyboard. Maka akan muncul panel Action, tuliskan script berikut ini pada panel Action:

import flash.events.MouseEvent;
stop();
tombol_home.addEventListener(MouseEvent.CLICK, home);
function home(event:MouseEvent):void{
gotoAndStop(1);
}
tombol_profil.addEventListener(MouseEvent.CLICK, profil);
function profil(event:MouseEvent):void{
gotoAndStop(2);
}
tombol_galeri.addEventListener(MouseEvent.CLICK, galeri);
function galeri(event:MouseEvent):void{
gotoAndStop(3);
}
tombol_kontak.addEventListener(MouseEvent.CLICK, kontak);
function kontak(event:MouseEvent):void{
gotoAndStop(4)

} 

Tekan CTRL+ENTER untuk melihat hasilnya.

Referensi

https://piyetoiki.wordpress.com/2011/11/09/membuat-navigasi-antar-frame-frame-label/ (Waktu Akses 30/05/2017 pukul 22.00 WIB)

https://gapra.wordpress.com/tutorial/flash-as-3/tombol-navigasi-antarframe-dengan-flash-cs-5-as-3/ (Waktu Akses 30/05/2017 pukul 22.10 WIB)

http://faat07.blogspot.co.id/2009/02/teks-istilah-dalam-flash-dikenal-dengan.html (Waktu Akses 30/05/2017 pukul 22.20 WIB)

http://warungflash.com/2009/06/text-tool/ (Waktu Akses 30/05/2017 pukul 22.30 WIB)

Peng. Animasi & Desain Grafis