Cenadep.org - Dasar Visual Efek Dan Animasi Firemonkey Part 1 * Dasar Efek Visual * Dasar Animasi 2D * Disertai contoh program Lengkap di http://cenadep.org

1. ce nade p.o rg
http://www.cenadep.o rg/2013/09/14/dasar-visual-effect-dan-animasi-firemo nkey-part-1/all/1/
Dasar Visual Effect Dan Animasi Firemonkey [Part 1]

Mengenal Firemonkey
Firemonkey adalah teknologi yang diperkenalkan oleh Embarcadero pada rilis RAD Studio XE2, Delphi XE2
dan C++ Builder XE2. Firemonkey adalah GUI f ramework yang mirip dengan VCL, tapi Firemonkey bersif at
cross platf orm yang saat ini (rilis Delphi XE4) telah mendukung pengembangan aplikasi pada Macintosh OS
X 10.7 (Lion) ke atas, iOS 5 ke atas (baik iPhone, iPad maupun iPod Touch), serta mendukung
pengembangan Windows 8 Metropolis UI.
Firemonkey awalnya dikembangkan oleh developer Rusia, Eugene Kryukov, di bawah perusahaan KSDev,
sebagai generasi baru GUI f ramework berbasis vektor – dengan nama VGScene.
Tahun 2011, VGScene dibeli oleh Embarcadero dan menjadi f ramework utama selain VCL.
Dengan Firemonkey, developer Delphi saat ini dapat mengembangkan di platf orm Windows yang kemudian
dapat dikompilasi ke sistem operasi lain yang didukung. Firemonkey memanf aatkan Direct2D di Windows
Vista dan Windows 7, OpenGL di Mac OS X, OpenGL ES di iOS, dan menggunakan library GDI+ pada
Windows yang belum mendukung Direct2D (misalnya Windows XP).
Secara garis besar, berikut f itur-f itur yang diusung Firemonkey:
Kompatibilitas Cross-platf orm
Elemen GUI berbasis vektor
Hybrid Components, di mana sebuah komponen visual dapat menjadi child dari komponen visual
lainnya. Contohnya, sebuah T Label dapat menjadi child dari sebuah T Image, dan sebuah T Button
dapat menjadi child dari sebuah T Image. Dengan f itur Hybrid Components ini, mengubah posisi

2. (misalnya) dari sebuah parent akan otomatis mengubah posisi children-nya, yang kemudian
memudahkan dalam pengembangan komponen-komponen turunan seperti widgetset dan sebagainya.
Dukungan styling built-in. Seperti VCL generasi baru yang telah mendukung VCL Styles, Firemonkey
juga memiliki f itur serupa yang dapat secara dinamik didef inisikan pada satu komponen visual dan
dipakai oleh komponen visual lainnya.
Contoh beragam style pada T Button dan T Edit di antaranya:
Dukungan visual ef f ects (misalnyaGlow, Inner Glow, Blur) dan dukungan animasi pada komponen
visual.
Catatan
Saya menggunakan Delphi XE4 dalam tutorial ini. Silahkan disesuaikan. Delphi XE2 dan XE3 dapat juga
digunakan. Sedangkan Delphi versi di bawah XE2 tidak menyertakan f itur Firemonkey.
Ef ek-Ef ek Dasar Pada Komponen Firemonkey
Berikut adalah tampilan beragam ef ek visual pada Firemonkey. Dan pada sub topik ini, kita akan mempelajari
cara menggunakan ef ek visul Firemonkey tersebut.
Saya tidak akan membahas semuanya, silahkan Anda coba sendiri dengan ef ek-ef ek yang tidak saya bahas.
Ef ek-Ef ek visual yang tersedia di Firemonkey antara lain:
T ShadowEf f ect, yaitu ef ek bayangan dari suatu komponen
visual
T BlurEf f ect, yaitu ef ek blur (kabur/buram)
T GlowEf f ect yaitu ef ek pendar atau menyala
T InnerGlowEf f ect mirip dengan T GlowEf f ect, hanyansanya
T InnerGlow memiliki ef ek pendar ke dalam sedangkan
T GlowEf f ect berpendar ke luar
T BevelEf f ect memberikan kesan timbul
T Ref lectionEf f ect memberikan ef ek pantulan seperti pada
cermin, atau seperti objek di permukaan air
T RippleEf f ect adalah ef ek gelombang seperti riak air
T SwirlEf f ect adalah ef ek pusaran air, yaitu riak air yang
perputar mengelilingi sebuah komponen.

3. Masih banyak ef ek-ef ek visual lain yang dapat Anda gunakan. Silahkan lihat di Component Palette seperti di
samping.
Untuk memulai dengan ef ek 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 T Label ke Form1, dengan nama
def ault Label1, Label2 sampai Label5. Kemudian dari tab Ef f ects di Component Palette, tambahkan sebuah
T ShadowEf f ect.
Tambahkan juga sebuah T BlurEf f ect, T GlowEf f ect,
T Ref lectionEf f ect dan sebuah T WaveEf f ect. Keempat
komponen ef ek visual ini berada pada tab yang sama di
Component Palette. Bandingkan desain f orm Anda dengan
punya saya:

4. Perlu diingat bahwa komponen-komponen ef ek visual ini bukanlah turunan dari T Control, sehingga tidak
tampil di f orm. Komponen-komponen ini hanya memberikan ef ek pada komponen visual lainnya seperti
T Label dan T Image.
Bila Anda klik pada salah satu ef ek di Structure Window (gambar di atas, bagian kiri), Anda akan melihat
property-property def aultnya di Object Inspector. Ini berarti bahwa ef ek-ef ek ini dapat langsung digunakan
tanpa perlu disetting lagi property-propertynya, kecuali jika Anda memang ingin mengubah ef ek-ef ek ini
sesuai kebutuhan Anda.
Kini kita mulai terapkan ef ek yang pertama, yaitu T ShadowEf f ect ke Label1. Caranya? Kembali ke Structure
Window, pilih T ShadowEf f ect, drag dan drop komponen ef ek tersebut ke Label1.
Sehingga komposisi struktur desain projek menjadi seperti
berikut:
Sekarang perhatikan di Form1, bahwa Label1 telah memiliki ef ek
drop shadow (sesuai dengan ef ek yang diterapkan, yaitu
T ShadowEf f ect). Anda boleh memodif ikasi property-property dari
T ShadowEf f ect ini sehingga memberikan hasil yang lebih sedap
dipandang…

5. Lanjutkan dengan menerapkan ef ek-ef ek visual lainnya ke T Label yang tersisa, dan atur propertynya
sedemikian rupa agar terlihat menarik. Kemudian, bandingkan dengan punya saya:

6. Mungkin Anda sedikit kecewa dengan ef ek-ef ek yang dihasilkan. Kurang berasa, kan? Itu karena kita
menerapkannya pada T Label yang isinya teks. Coba buat projek baru dan gunakan T Image (dari tab Shapes
di Component Palette). Tambahkan T Image ke Form1, lalu klik Image1 (nama def ault), klik property Bitmap
dan pilih Edit… Pilih gambar yang sesuai keinginan Anda. Gandakan Image1 menjadi beberapa buah dan
terapkan ef ek-ef ek yang berbeda pada tiap T Image. Hasilnya mungkin akan sesuai harapan Anda
Terlihat lebih menarik kan?
Tapi bagaimanapun, ef ek-ef ek ini akan lebih terasa saat
dipadukan dengan animasi nanti…
–~~~~~~~~~~~~–
Membuat Animasi Dasar Di Delphi Dengan
Firemonkey
Perhatikan kembali ef ek-ef ek visual statis di atas.
Kemudian buatlah sebuah projek baru, tambahkan sebuah
T Image dan set property Align menjadi alClient. Kemudian klik
property Bitmap, Edit dan pilih gambar yang cukup besar agar
menutupi keseluruhan tampilan f orm. Kemudian tambahkan
sebuah T Magnif yEf f ect ke f orm. T Magnif yEf f ect adalah ef ek
lup atau kaca pembesar (lensa).
Terapkan T Magnif yEf f ect ini ke Image1. Kemudian klik
Magnif yEf f ect1 di Structure Window, atur property AspectRatio
= 1.2, Magnif ication = 1.5 dan Radius = 1.15.
Radius adalah lebar ef ek (lebar kaca pembesar), sedangkan Magnif ication adalah kekuatan pembesaran
dan AspectRation adalah proporsi antara lebar dan tinggi ef ek. Silahkan utak-atik property-property ini agar
lebih mudah mengingatnya.
Kesulitan Cari Gambar?
Pakai saja gambar yang bertebaran di google, di Facebook atau coba yang ini.

7. Kemudian klik Image1 di f orm, klik ganda event OnMouseMove dan isikan kode seperti berikut:
0001
0002
0003
0004
0005
procedure TForm1.Image4MouseMove(Sender: TObject ; Shift : TShift St at e; X,
Y:Single);
begin
MagnifyEffect 1.Cent er := Point F(x,y)
end;
Nah kode di atas akan mengubah posisi tengah (center) dari ef ek lensa setiap mouse digerakkan, sehingga
memberi kesan animasi lensa. Perlu dicatat, karena ini adalah animasi, hasil ef ek tersebut akan sulit
digambarkan. Sehingga saya pikir sebaiknya Anda download source code berikut dan jalankan sendiri di
komputer Anda:
Download Cenadep.org – Animasi Lensa Dengan Delphi Dan Firemonkey
Contoh projek animasi dengan Delphi dan Firemonkey f ramework. Projek dibuat dengan Delphi XE4
dengan build mode Release.
Bila suka, Anda dapat mencoba ef ek-ef ek lainnya. Dan perlu diingat bahwa tidak semua ef ek memiliki
property Center seperti T Magnif yEf f ect di atas, jadi silahkan eksplorasi pada property-property yang lain.
Selain animasi pada ef ek-ef ek visual dasar yang telah kita bahas, ada lagi komponen-komponen animasi
yang lain yang lebih kompleks. Sebelum lebih jauh berdiskusi, saya sampaikan dulu bahwa di Firemonkey
terdapat 3 kelompok animasi:
Two Points Interpolation
Series Of Points Interpolation
Non Interpolation
Merupakan animasi yang dibentuk dari interpolasi antara dua titik, yaitu titik awal dan akhir.

8. Yang termasuk dalam kelompok animasi ini adalah T FloatAnimation (animasi sebuah titik, misalnya posisi
top atau lef t dari sebuah button, atau animasi rotasi pada sebuah gambar), T RectAnimation (yaitu
animasi posisi lef t, top, right dan bottom sekaligus), T ColorAnimation (yang merupakan animasi
perubahan warna dari warna satu ke warna lain), T GradientAnimation (adalah animasi gradasi warna
misalnya dari gradasi biru-kuning ke merah-putih) serta T BitmapAnimation (yaitu animasi dari sebuah
gambar ke gambar lain dengan ef ek tertentu seperti crossf ading).
Animasi yang dibentuk dari interpolasi antara beberapa titik. Dimulai dari interpolasi titik satu ke titik dua, titik
dua ke titik tiga, dan selanjutnya sampai titik terakhir.
Termasuk dalam kelompok ini adalah T FloatKeyAnimation yaitu animasi antara beberapa titik secara
berurutan, T ColorKeyAnimation yaitu animasi pada sederatan nilai warna dan T PathAnimation yang
membuat animasi pada sebuah objek mengikuti path/jalur secara 2 dimensi (2D) dan bila diperlukan,
sekaligus juga menganimasian perputaran gambar dengan mengubah property Rotation.
Tipe animasi ini dibentuk dari beberapa bitmap/gambar yang ditampilkan bergantian mulai pertama sampai
terakhir tanpa interpolasi. Hasil dari animasi ini mirip dengan animasi pada f ile GIF atau pada video.
Barulah kita lanjut dengan membuat animasi-animasi sesuai kelompok di atas.
Animasi Dengan Two Point s Int erpolat ion
Animasi dalam kelompok ini adalah – sekali lagi – animasi antara dua titik (dua kondisi) yang kemudian
diinterpolasikan sehingga membentuk beragam bentuk animasi. Saya tidak akan menjelaskan jenis-jenis
interpolasi ini, karena bakal keriting jari saya mengetik.
Anda dapat mencoba sendiri nantinya, apa saja jenis-jenis interpolasi (perubahan/pertukaran) antara dua
titik selama animasi berlangsung. Sebagai contoh, interpolasi linier adalah interpolasi langsung/lurus dari
titik A ke titik B, sedangkan interpolasi bounce adalah interpolasi maju mundur secara alternatif ,
membangkitkan animasi seperti bola karet yang dijatuhkan, memantul, jatuh lagi, memantul dan jatuh lagi,
sampai akhirnya diam (anggap titik awal adalah titik saat bola dijatuhkan dan titik akhir adalah lantai).
Sudah ah, jangan panjang-panjang, di menu help ada kok…
1. Animasi Menggunakan T FloatAnimation
T FloatAnimation merupakan animasi antara dua titik bertipe f loat (pecahan). Tipe f loat memungkinkan
interpolasi yang lebih panjang dibandingkan tipe bilangan bulat, sehingga animasi menjadi lebih halus,
sekalian juga sebagai penyesuaian standar animasi pada engine-engine animasi yang ada (OpenGL,
OpenGLES, DirectX, dll) yang akhirnya menyebabkan animasi-animasi dalam Firemonkey juga menggunakan
tipe f loat (pecahan).
Dalam contoh, kita akan membuat animasi sebuah ellipse yang muncul saat mouse melewatinya. Kita akan
menganimasikan property Opacity (transparansi) dalam contoh ini.
Buat sebuah projek baru (Firmonkey HD Application), tambahkan sebuah T Ellipse ke f orm. T Ellipse berada
pada tab Shapes di Component Palette.
Lihat gambar…

9. Kemudian klik Ellipse1 yang baru ditambahkan di f orm dan klik property Opacity. Di situ berisi nilai 1, yang
artinya Ellipse1 sepenuhnya tampil (transparansi = 0). Bila Opacity diubah menjadi 0 (transparansi = 255),
maka Ellpise1 akan hilang dari tampilan.
Oke, masih di property Opacity, klik drop down dan pilih Create New T FloatAnimation. Jangan sampai salah
klik!
Coba cek di Structure Window, di situ terlihat bahwa sebuah
T FloatAnimation (dengan nama FloatAnimation1) telah dibuat dan
di-assign sebagai child dari Ellipse1. Berarti sudah sesuai
harapan.
Klik pada FloatAnimation1. Lihat property PropertyName, di situ
sudah berisi Opacity sesuai di mana kita membuat
FloatAnimation di atas. Isi property StartValue dengan 0 (def ault)
dan EndValue dengan 1. Ini berarti bahwa kita akan membuat
animasi pada property Opacity antara nilai 0 dan 1 (hilang dan
tampil).
Kemudian, isi property Trigger dengan “IsMouseOver=True”. Ini
akan membuat animasi dijalankan apabila mouse melewati
Ellipse1. Terus isi property TiggerInverse dengan
“IsMouseOver=False” yang berarti animasi akan dibalik dari
EndValue ke StartValue (1 ke 0) saat mouse meninggalkan Ellipse1.
Kemudian jalankan projek dan coba lewatkan mouse di atas Ellipse1. Bila langkah-langkah di atas Anda ikuti
dengan benar, maka Anda akan melihat animasi tampil-hilang pada Ellipse1 saat mouse dilewatkan di
atasnya….
Download contoh projek Animasi Fade In dan Fade Out Pada Shape Menggunakan Delphi dan Firemonkey
(tanpa EXE).
Dari contoh di atas, silahkan bermain-main dengan property Interpolation pada FloatAnimation1.

10. Anda juga telah berkenalan dengan animation trigger, yaitu pada property Trigger dan TriggerInverse di
mana aplikasi dimulai dan dikembalikan. Beragam objek memiliki beragam animation trigger, sehingga untuk
lebih jauh, perlu diluangkan waktu untuk bereksperimen dengan property ini.
Sampai di sini, saya percaya bahwa Anda sependapat dengan saya, “Animasi di Delphi itu mudah.” Tapi
belum berakhir, masih ada serangkan contoh lagi yang akan kita bahas.
Istirahat dulu
Fesbukan dulu sebentar biar gak bosan…
2. Animasi Menggunakan T RectAnimation
TrectAnimation memroses animasi pada property bertipe bounds (property yang berbentuk rectangle,
memiliki empat sub-property yaitu lef t, top, right dan bottom). Contoh property bertipe bounds adalah
Margins dan Padding.
Sekedar penyegaran, Margins adalah jarak antara spasi antara sebuah objek dengan objek di sekitarnya,
termasuk induknya. Sedangkan Padding adalah spasi antara border/pinggiran sebuah objek dengan objekobjek child di dalamnya. Secara umum, kita dapat mengingat kembali CellSpacing dan CellPadding pada tag
<TABLE> di HT ML.
Dalam contoh berikut, kita akan melihat sebuah T Panel dan sebuah T Rectangle sebagai child di dalamnya.
Dan kita akan menganimasikan property Margins dari T Rectangle terhadap induknya, yaitu T Panel. Dengan
animasi ini, T Rectangle akan terlihat mengecil saat mouse dilewatkan di atasnya dan kembali normal bila
mouse keluar dari wilayah T Rectangle tersebut.
Buatlah sebuah projek baru (Firmonkey HD Application), tambahkan sebuah T Panel ke f orm. Tambahkan
sebuah T Rectangle (dari tab Shapes) ke Panel1 (sebagai child) dan tambahkan juga sebuah
T RectAnimation ke f orm.
Drag RectAnimation1 yang baru dibuat ke Rectangle1. Sekalian, ubah property Align pada Rectangle1
menjadi alClient agar memenuhi wilayah induknya, yaitu Panel1.

11. Di atas, Rectangle1 telah menutupi Panel1 – karena property Align diubah menjadi alClient.
Kemudian klik RectAnimation6 (lihat gambar di atas), ubah property PropertyName menjadi Margins,
StopValue menjadi [3,3,3,3], Trigger menjadi IsMouseOver=True dan TriggerInverse menjadi
IsMouseOver=False. Lihat gambar:
Bila sudah, selanjutnya tambahkan lagi sebuah T Label ke f orm
dan lewat Structur Window, drag Label1 tersebut ke Rectangle1
agar Label1 menjadi child dari Rectangle1.
Ingat
Sebagaimana telah saya tulis di awal-awal, bahwa salah satu
f itur Firemonkey adalah setiap komponen visual dapat menjadi
child atau parent dari komponen visual lainnya, dan pada contoh
ini T Rectangle menjadi parent dari T Label (atau T Label menjadi
child dari T Rectangle).
Klik Label1 tadi dan ubah property Align menjadi alClient dan ubah
property TextAlign menjadi taCenter. Lihat gambar:
Pilih Panel1 dan copy serta paste ke f orm untuk membuat beberapa Panel yang baru. Atur posisinya agar
sejajar seperti menu. Bandingkan dengan gambar berikut:

12. Nah, kini Anda sudah boleh menjalankan projek dan melihat hasilnya. Lewatkan mouse ke atas tiap-tiap
panel dan lihat animasinya.
Anda boleh mendownload source code T RectAnimation dengan Firemonkey dan Delphi di atas.
3. Animasi Menggunakan T ColorAnimation
T ColorAnimation adalah animasi antara dua warna. Dari namanya, tidak banyak yang perlu dibahas
mengenai jenis animasi ini. Cara pembuatan T ColorAnimation dengan Firemonkey juga tidak jauh beda dari
cara pembuatan animasi sebelumnya. Hanya perlu diperhatikan bahwa animasi ini hanya diterapkan ke
property yang bertipe TAlphaColors (tipe-tipe warna yang mirip dengan T Color).
Jadi, mari kita lihat contohnya. Buat sebuah projek baru dengan tipe Firemonkey Desktop (HD) Application.
Tambahkan sebuah T Rectangle ke f orm.
Klik Rectangle1. Klik property Fill.Color, dari dropdown box, pilih Create New T ColorAnimation.
Sebuah T ColorAnimation dengan nama ColorAnimation1 telah
dibuat. Klik pada ColorAnimation1 dan lihat property
PropertyName, di situ telah otomatis diisi dengan Fill.Color yang
merupakan property dari Rectangle1 yang akan dianimasikan.
Ubah property StopValue manjadi YellowGreen, property Trigger
menjadi IsMouseOver=True dan TriggerInverse menjadi
IsMouseOver=False.
Setting property-property ini akan membuat Rectangle1 berubah
warna menjadi YellowGreen saat mouse dilewatkan di atasnya
dan kembali normal jika mouse keluar dari wilayah Rectangle1.
Save dan jalankan projek Anda.
4. Animasi Menggunakan T GradientAnimation
Gradient animation pada dasarnya adalah color animation yang
digabungkan, yang kemudian menjadi def inisi sebuah gradient.
5. Animasi Menggunakan T BitmapAnimation

13. Animasi dengan bitmap sangat mirip dengan animasi
sebelumnya. Di sini kita akan menggunakan dua buah bitmap,
yang satu adalah bitmap grayscale dan satunya lagi bitmap
berwarna. Kita akan menggunakan f ile bertipe PNG yang
mendukung AlphaChannel agar animasi terlihat halus.
Silahkan download dua buah gambar ini (klik kanan > Save As):
Buatlah sebuah projek baru, Firemonkey Desktop (HD)
Application. Tambahkan sebuah T Image ke f orm. Klik property
Bitmap, dari dropdown box klik Edit dan pilih bitmap gray.
Kemudian kli property Bitmap sekali lagi, klik Create New
T BitmapAnimation.
Klik BitmapAnimation1 di Structure Window, klik roperty
StartValue, klik Edit dan pilih gambar gray.
Klik BitmapAnimation1 di Structure Window, klik roperty
EndValue, klik Edit dan pilih gambar berwarna.
Masih di BitmapAnimation1, set property Trigger ke
IsMouseOver=True dan TriggerInverse ke
IsMouseOver=False.

14. Kini jalankan projek dan Anda akan mendapatkan animasi antara dua gambar yang halus:
Silahkan download contoh projek Animasi Bitmap Dengan Firemonkey.