Animasi Tombol di Director

Modul Praktikum Multimedia Animasi

Animasi Tombol di Director Kali ini kita akan mencoba membuat animasi tombol di Director

 Membuat Object Tombol Sebelum kita membuat animasi tombol di Director terlebih dahulu kita harus mempersiapkan bahan-bahan nya... diantaranya kita harus membuat object tombol sendiri yang kita buat di Adobe Photosop. 1. Atur bidang/ukuran dalam pembuatan tombol di photosop yang berukuran 200 x 60 pixel dan contents :Transparent seperti pada gambar berikut :

STMIK Tasikmalaya @2014

Deny Erwandi,S.Kom


2. Buat object tombol seperti pada gambar dibawah:  

Gunakan Rounded Rectangle Tool untuk membuat object tombolnya Beri warna abu-abu pada objectnya

3. Tambahkan Effect pada object tombolnya dengan memilih Bevel and Emboss. LayerLayer StyleBlending Option, atur pengaturan pada Bevel and Emboss seperti pada gambar dibawah ini :

4. Tambahkan bentuk lingkaran pada object tombolnya dengan menggunakan Ellipse Tool


Deny Erwandi,S.Kom


5. Kemudian tambahkan lagi Effect pada lingkarannya.LayerLayer StyleBlending Option, dengan pengaturan seperti pada gambar dibawah ini : 

Bevel and Emboss



Color Overlay

Catatan : untuk warna awal beri dengan warna abu-abu 6. Kemudian hasil akhir simpan dalam format (.psd), sehingga menghasilkan 3 object tombol (seperti gambar dibawah)yang akan kita gunakan/ kita import ke Director

T-awal.psd


T-On.psd

T-Off.psd

Deny Erwandi,S.Kom


 Import File Photosop ke Director Setelah kita membuat object tombol di photosop tadi barulah kita import ke dalam Director, terlebih dahulu silahkan anda buka file director latihan.dir yang sudah kita buat pada pertemuan sebelumnya. Setelah file latihan.dir terbuka maka kita import object tombol (T-awal.psd, T-On.psd, T-Off.psd) ke Director 1. Import File Photosop FileImport, pilih T-awal.psd, T-On.psd, T-Off.psd kemudian klik Import

Karena object tombol tersebut mempunyai transparency, maka pilih Image (32 bit). Beri tanda chkelis pada Same Setting for Remaining Images apabila memasukan lebih dari satu object gambar denga pengaturan yang sama


Deny Erwandi,S.Kom


Setelah proses import maka object tombol akan masuk ke dalam Cast :Internal

2. Atur tampilan pada bagian Main Menu seperti gambar dibawah ini :

3. Pilih object tombol T-awal yang terdapat pada Cast kemudian atur posisinya seperti pada gambar dibawah ini :


Deny Erwandi,S.Kom


4. Buat text pada masing-masing object tombol yang sudah diatur posisinya. Buat text Submenu 1 dan Submenu 2 atur posisinya seperti berikut :

 Animasi Tombol Submenu 1 a. Pengaturan awal pada object tombol T-awal, kita atur perubahan pada bagian blend yang sebelumnya dalam kondisi 100 % diubah menjadi 50 % pada Property Inspector, akan terlihat perbedaan pada object tombol T-awal agak redup.

b. Pilih kembali object tombol tadi kemudian kita akan memasukan perintah pada Scriptnya, klik kanan pada object tombolnya kemudian pilih Script


Deny Erwandi,S.Kom


c. Ketik sebagai berikut agar Jika mouse masuk/ lewat tombol, maka nilai transparansi object nya (blend) yang ditunjuk menjadi 100, dan ketika mouse keluar dari tombol maka nilai transparansi objectnya menjadi 30. Play Movie lihat hasilnya

 Animasi Tombol Submenu 2 a. Pada tombol Submenu 2 kita akan membuat animasinya berdasarkan perubahan pada member object tombolnya, disini pengaturan pada Property Inspectornya tidak dirubah. b. Pilih object tombol T-awal karena kita akan memasukan perintah pada Scriptnya seperti gambar dibawah ini :


Deny Erwandi,S.Kom


c. Ketikan perintah berikut agar Jika mouse masuk/lewat tombol, maka object tombolnya akan berubah warna dikarenakan kita melakukan perubahan pada membernya yang sebelumnya nama member dari object tombol tersebut adalah T-awal, kita ganti dengan object tombol lain dengan nama member T-On. Kemudian Play Movie lihat hasilnya

d. Dan ketikan perintah berikut Jika mouse keluar tombol maka akan kita gantikan dengan object tombol lain yang bernama member nya T-Off


Deny Erwandi,S.Kom


 Animasi Tombol Lanjutan Untuk animasi tombol berikut ini akan dibuat secara terpisah dahulu sebelum nantinya kita pakai pada pembuatan Submenu 3, Submenu 4, dst. Disini kita memerlukan beberapa buah file movie(.dir) untuk kondisi cursor di dalam tombol, masuk tombol/mouseenter dan keluar tombol/mouseleave

Tombol Kondisi 1 (T-diam) 1. Atur bidang kerja/ movie baru dengan ukuran kecil. FileNewMovie Klik di Stage yang kosong, di Property Inspector pastikan Stage Size : 200 x 60 pixel.

2. Import object tombol. Klik menu FileImport :T-awal.psd, T-On.psd, TOff.psd (pengaturan hampir sama pada Import File Photosop diatas)

3. Atur posisi agar di Stage dan Score tampil sebagai berikut. Rencananya movie ini untuk tombol kondisi cursor berada di dalam tombol. Tidak ada animasi di movie ini.


Deny Erwandi,S.Kom


4. Simpan movienya, klik menu FileSave dengan nama T-diam.dir

Tombol Kondisi 2 (T-in) Kita akan membuat movie untuk kondisi cursor akan masuk tombol. 1. Simpan pekerjaan sebelumnya (T-diam.dir) dengan nama lain, klik menu FileSave As dengan nama T-in.dir. 2. Disini kita akan membuat animasi posisi. Klik tool arraw, klik unjung Sprite T-awal. Di Stage, geser posisi ujung sprite ke kanan.

Klik

Catatan : Agar presisi gunakan Shift atau tombol panah di keyboard untuk mengeserkan 3. Play Movie, object akan bergerak dari kiri ke kanan 4. Namun pergerakan nya tidak lembut karena tidak ada perlambatan/percepatan. Oleh karena itu klik kanan pada object tombol lalu pilih menu Tweening… atur parameternya seperti pada gambar berikut :


Deny Erwandi,S.Kom


5. Play Movie, kini animasi terlihat lebih lembut bukan ? :D 6. Simpan pekerjaan anda, klik menu FileSave : T-in.dir

Tombol Kondisi 3 (T-Out.dir) 1. Melanjutkan pekerjaan movie (T-in.dir), kita akan membuat movie untuk kondisi cursor akan keluar tombol. Simpan pekerjaan sebelumnya dengan nama lain, Klik menu FileSave As : T-out.dir 2. Animasi tombol kondisi ini merupakan kebalikan dari T-in. Untuk membuat animasi terbalik kita tinggal mengaktifkan Sprite object Tombol, lalu klik menu ModifyReverse Sequence

3. Play Movie, kini animasi tombol bergerak dari kanan ke kiri 4. Simpan pekerjaan anda, klik menu FileSave :T-out.dir

Import File Movie(.dir) ke Director 1. Buka kembali file latihan.dir yang tadi 2. Klik FileImprort ketiga file *.dir tsb. Aktifkan media:Link To External File agar jika kita ingin memperbaiki animasi tombol cukup edit file tersebut saja tidak perlu import lagi.


Deny Erwandi,S.Kom


3. Drag t-diam dari Cast Member ke Stage atau Score sehingga tampil sebagai berikut. Jangan lupa buat juga Frame Script go the frame di akhir movie.

Behaviour & Script untuk tombol 1. Ini saatnya member perintah pada tombol tersebut. Klik kanan di tombol lalu pilih menu Behaviour.

Klik kanan

2. Klik icon New Behavour bertanda ‘+’ , beri nama misal tombol.


Deny Erwandi,S.Kom


3. Di Panel Event, Klik icon New Event bertanda ‘+’, klik menu Mouse Enter.

4. Di Panel Action, klik icon New Action (‘+’),klik menu Sprite  Chage Cast Member. Pilih Cast Member t-in.dir.

5. Jika mouse keluar tombol akan ke gambar semula. Di Panel Event, Klik icon New Event (‘+’), klik menu Mouse Leave.


Deny Erwandi,S.Kom


6. Di Panel Action, kli icon New Action bertanda ‘+’. Klik menu Sprite  Change Cast Member. Pilih Cast Member t-out.dir.

7. Di Cast Member maka akan ada behavior tombol. Drag ke Sprite t-diam, agar ada animasi di tombol tsb.


Deny Erwandi,S.Kom


8. Jika anda periksa di Property Inspector tombol tersebut kini akan ada Behaviour tombol.

9. Play Movie .Jika cursor masuk tombol tersebut maka akan ada animasi posisi kiri ke kanan. Jika keluar tombol akan ada animasi kebalikannya dari kanan ke kiri. Beres! Catatan: Sebenarnya untuk membuat tombol animasi tersebut, tidak usah menggunakan Behaviour. Klik kanan saja tombol tombol tersebut lalu pilih menu Script…, lalu ketik sebagai berikut pada tombol.

Loop & Tempo 1. Tetapi animasi tersebut berulang terus menerus tanpa akhir bukan? Untuk memperbaikinya aktifkan member t-in.dir dan t-out.dir di Cast Member. Catatan: Tekan tombol Ctrl untuk banyak member. Di Property Inspector matikan Loop. Beres!


Deny Erwandi,S.Kom


2. Play Movie , kini animasi tombol tidak lagi berulang. 3. Namun rasanya animasi tombol terlalu lambat. Untuk mempercepatnya doble klik di Frame tempo di awal movie.

Double Click

4. Lalu atur Tempo = 60 fps. Biasanya kita menggunakan 25 atau 30 fps saja. Play Movie, kini animasi tombol jauh lebih cepat dan halus.

Dengan demikian anda sudah mengerti cara tombol yang mempunyai kondisi animasi. Selanjutnya anda hanya menambahkan banyak objek background dan tombol.


Deny Erwandi,S.Kom

Animasi Tombol di Director

Recommend Documents