Efek-Efek Dasar Pada Komponen Firemonkey

Efek-Efek Dasar Pada Komponen Firemonkey

Berikut adalah tampilan beragam efek visual pada Firemonkey. Dan pada sub topik ini, kita akan mempelajari cara menggunakan efek visul Firemonkey tersebut.
Saya tidak akan membahas semuanya, silahkan Anda coba sendiri dengan efek-efek yang tidak saya bahas.
Efek-Efek visual yang tersedia di Firemonkey antara lain:

• TShadowEffect, yaitu efek bayangan dari suatu komponen visual
• TBlurEffect, yaitu efek blur (kabur/buram)
• TGlowEffect yaitu efek pendar atau menyala
• TInnerGlowEffect mirip dengan TGlowEffect, hanyansanya TInnerGlow memiliki efek pendar ke dalam sedangkan TGlowEffect berpendar ke luar
• TBevelEffect memberikan kesan timbul
• TReflectionEffect memberikan efek pantulan seperti pada cermin, atau seperti objek di permukaan air
• TRippleEffect adalah efek gelombang seperti riak air
• TSwirlEffect adalah efek pusaran air, yaitu riak air yang perputar mengelilingi sebuah komponen.

Masih banyak efek-efek visual lain yang dapat Anda gunakan. Silahkan lihat di Component Palette seperti di samping.
Untuk memulai dengan efek visual Firemonkey, silahkan buka Delphi (XE2 atau lebih baru) dan buat projek baru, pilih Firemonkey Desktop Application – Delphi.

Firemonkey Desktop Application Wizard aan ditampilkan di layar. Pilih HD Firemonkey Application. Klik OK.

Informasi
Firemonkey mendukung projek visual 3D juga, namun saat ini kita batasi pada visual 2D saja dulu.

Setelah projek dibuat dan Form1 telah tampil di layar, tambahkan lima buah TLabel ke Form1, dengan nama default Label1, Label2 sampai Label5. Kemudian dari tab Effects di Component Palette, tambahkan sebuah TShadowEffect.

Tambahkan juga sebuah TBlurEffect, TGlowEffect, TReflectionEffect dan sebuah TWaveEffect. Keempat komponen efek visual ini berada pada tab yang sama di Component Palette. Bandingkan desain form Anda dengan punya saya:

Perlu diingat bahwa komponen-komponen efek visual ini bukanlah turunan dari TControl, sehingga tidak tampil di form. Komponen-komponen ini hanya memberikan efek pada komponen visual lainnya seperti TLabel dan TImage.
Bila Anda klik pada salah satu efek di Structure Window (gambar di atas, bagian kiri), Anda akan melihat property-property defaultnya di Object Inspector. Ini berarti bahwa efek-efek ini dapat langsung digunakan tanpa perlu disetting lagi property-propertynya, kecuali jika Anda memang ingin mengubah efek-efek ini sesuai kebutuhan Anda.
Kini kita mulai terapkan efek yang pertama, yaitu TShadowEffect ke Label1. Caranya? Kembali ke Structure Window, pilih TShadowEffect, drag dan drop komponen efek tersebut ke Label1.

Sehingga komposisi struktur desain projek menjadi seperti berikut:

Sekarang perhatikan di Form1, bahwa Label1 telah memiliki efek drop shadow (sesuai dengan efek yang diterapkan, yaitu TShadowEffect). Anda boleh memodifikasi property-property dari TShadowEffect ini sehingga memberikan hasil yang lebih sedap dipandang…

Lanjutkan dengan menerapkan efek-efek visual lainnya ke TLabel yang tersisa, dan atur propertynya sedemikian rupa agar terlihat menarik. Kemudian, bandingkan dengan punya saya:

Mungkin Anda sedikit kecewa dengan efek-efek yang dihasilkan. Kurang berasa, kan? Itu karena kita menerapkannya pada TLabel yang isinya teks. Coba buat projek baru dan gunakan TImage (dari tab Shapes di Component Palette). Tambahkan TImage ke Form1, lalu klik Image1 (nama default), klik property Bitmap dan pilih Edit… Pilih gambar yang sesuai keinginan Anda. Gandakan Image1 menjadi beberapa buah dan terapkan efek-efek yang berbeda pada tiap TImage. Hasilnya mungkin akan sesuai harapan Anda

Terlihat lebih menarik kan?
Tapi bagaimanapun, efek-efek ini akan lebih terasa saat dipadukan dengan animasi nanti…