Animasi Tombol di Director - repository.stmik-tasikmalaya...

Modul Praktikum Multimedia Animasi

STMIK Tasikmalaya @2014 Deny Erwandi,S.Kom

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 harusmempersiapkan bahan-bahan nya... diantaranya kita harus membuat object tombolsendiri yang kita buat di Adobe Photosop.

1. Atur bidang/ukuran dalam pembuatan tombol di photosop yang berukuran200 x 60 pixel dan contents :Transparent seperti pada gambar berikut :



2. Buat object tombol seperti pada gambar dibawah:

Gunakan Rounded Rectangle Tooluntuk membuat object tombolnya

Beri warna abu-abu pada objectnya

3. Tambahkan Effect pada object tombolnya dengan memilih Bevel andEmboss. LayerLayer StyleBlending Option, atur pengaturan padaBevel and Emboss seperti pada gambar dibawah ini :

4. Tambahkan bentuk lingkaran pada object tombolnya dengan menggunakanEllipse Tool



5. Kemudian tambahkan lagi Effect pada lingkarannya.LayerLayerStyleBlending Option, dengan pengaturan seperti pada gambar dibawahini :

Bevel and Emboss

Color Overlay

Catatan : untuk warna awal beri dengan warna abu-abu

6. Kemudian hasil akhir simpan dalam format (.psd), sehingga menghasilkan 3object tombol (seperti gambar dibawah)yang akan kita gunakan/ kita importke Director

T-awal.psd T-On.psd T-Off.psd



Import File Photosop ke DirectorSetelah kita membuat object tombol di photosop tadi barulah kita import kedalam Director, terlebih dahulu silahkan anda buka file director latihan.diryang sudah kita buat pada pertemuan sebelumnya. Setelah file latihan.dirterbuka maka kita import object tombol (T-awal.psd, T-On.psd, T-Off.psd)ke Director

1. Import File PhotosopFileImport, 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 Imagesapabila memasukan lebih dari satu object gambar denga pengaturan yangsama



Setelah proses import maka objecttombol akan masuk ke dalamCast :Internal

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

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



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 1a. Pengaturan awal pada object tombol T-awal, kita atur perubahan pada

bagian blend yang sebelumnya dalam kondisi 100 % diubah menjadi50 % pada Property Inspector, akan terlihat perbedaan pada objecttombol T-awal agak redup.

b. Pilih kembali object tombol tadi kemudian kita akan memasukanperintah pada Scriptnya, klik kanan pada object tombolnya kemudianpilih Script



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

Animasi Tombol Submenu 2a. Pada tombol Submenu 2 kita akan membuat animasinya berdasarkan

perubahan pada member object tombolnya, disini pengaturan padaProperty Inspectornya tidak dirubah.

b. Pilih object tombol T-awal karena kita akan memasukan perintah padaScriptnya seperti gambar dibawah ini :



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

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



Animasi Tombol Lanjutan

Untuk animasi tombol berikut ini akan dibuat secara terpisah dahulu sebelumnantinya kita pakai pada pembuatan Submenu 3, Submenu 4, dst.

Disini kita memerlukan beberapa buah file movie(.dir) untuk kondisi cursor didalam tombol, masuk tombol/mouseenter dan keluar tombol/mouseleave

Tombol Kondisi 1 (T-diam)1. Atur bidang kerja/ movie baru dengan ukuran kecil. FileNewMovie

Klik di Stage yang kosong, di Property Inspector pastikan Stage Size :200 x 60 pixel.

2. Import object tombol. Klik menu FileImport :T-awal.psd, T-On.psd, T-Off.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 dalamtombol. Tidak ada animasi di movie ini.



4. Simpan movienya, klik menu FileSave 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 menuFileSave As dengan nama T-in.dir.

2. Disini kita akan membuat animasi posisi. Klik tool arraw, klik unjung SpriteT-awal. Di Stage, geser posisi ujung sprite ke kanan.

Catatan : Agar presisi gunakan Shift atau tombol panah di keyboarduntuk mengeserkan

3. Play Movie, object akan bergerak dari kiri ke kanan4. Namun pergerakan nya tidak lembut karena tidak ada

perlambatan/percepatan. Oleh karena itu klik kanan pada object tombollalu pilih menu Tweening… atur parameternya seperti pada gambar berikut:

Klik



5. Play Movie, kini animasi terlihat lebih lembut bukan ? :D6. Simpan pekerjaan anda, klik menu FileSave : T-in.dir

Tombol Kondisi 3 (T-Out.dir)

1. Melanjutkan pekerjaan movie (T-in.dir), kita akan membuat movie untukkondisi cursor akan keluar tombol. Simpan pekerjaan sebelumnya dengannama lain, Klik menu FileSave As : T-out.dir

2. Animasi tombol kondisi ini merupakan kebalikan dari T-in. Untuk membuatanimasi terbalik kita tinggal mengaktifkan Sprite object Tombol, lalu klikmenu ModifyReverse Sequence

3. Play Movie, kini animasi tombol bergerak dari kanan ke kiri4. Simpan pekerjaan anda, klik menu FileSave :T-out.dir

Import File Movie(.dir) ke Director

1. Buka kembali file latihan.dir yang tadi2. Klik FileImprort ketiga file *.dir tsb. Aktifkan media:Link To External

File agar jika kita ingin memperbaiki animasi tombol cukup edit filetersebut saja tidak perlu import lagi.



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

Behaviour & Script untuk tombol

1. Ini saatnya member perintah pada tombol tersebut. Klik kanan di tombollalu pilih menu Behaviour.

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

Klik kanan



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

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

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



6. Di Panel Action, kli icon New Action bertanda ‘+’. Klik menu SpriteChange 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.



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

9. Play Movie .Jika cursor masuk tombol tersebut maka akan ada animasiposisi kiri ke kanan. Jika keluar tombol akan ada animasi kebalikannyadari kanan ke kiri. Beres!

Catatan: Sebenarnya untuk membuat tombol animasi tersebut, tidak usahmenggunakan Behaviour. Klik kanan saja tombol tombol tersebut lalu pilihmenu Script…, lalu ketik sebagai berikut pada tombol.

Loop & Tempo

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



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.

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

Dengan demikian anda sudah mengerti cara tombol yang mempunyai kondisianimasi. Selanjutnya anda hanya menambahkan banyak objek backgrounddan tombol.

Double Click

Animasi Tombol di Director - repository.stmik-tasikmalaya...

Documents

Transcript of Animasi Tombol di Director - repository.stmik-tasikmalaya...