Animasi Delphi Firemonkey

Tulisan ini cukup panjang dan telah dibagi dalam beberapa halaman.

« Prev. PageNext Page »

Print Friendly
Informasi
Karena cukup panjang, tulisan ini telah dibagi ke dalam beberapa halaman. Silahkan gunakan navigasi di atas untuk berpindah ke halaman lainnya.

Navigasi juga berada di akhir halaman, yaitu di atas form komentar.

Animasi Delphi Firemonkey

Mengenal Firemonkey

Firemonkey adalah teknologi yang diperkenalkan oleh Embarcadero pada rilis RAD Studio XE2, Delphi XE2 dan C++ Builder XE2. Firemonkey adalah GUI framework yang mirip dengan VCL, tapi Firemonkey bersifat cross platform 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 framework berbasis vektor – dengan nama VGScene.

Tahun 2011, VGScene dibeli oleh Embarcadero dan menjadi framework utama selain VCL.

Dengan Firemonkey, developer Delphi saat ini dapat mengembangkan di platform Windows yang kemudian dapat dikompilasi ke sistem operasi lain yang didukung. Firemonkey memanfaatkan 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 fitur-fitur yang diusung Firemonkey:

  • Kompatibilitas Cross-platform
  • Elemen GUI berbasis vektor
  • Hybrid Components, di mana sebuah komponen visual dapat menjadi child dari komponen visual lainnya. Contohnya, sebuah TLabel dapat menjadi child dari sebuah TImage, dan sebuah TButton dapat menjadi child dari sebuah TImage. Dengan fitur Hybrid Components ini, mengubah posisi (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 fitur serupa yang dapat secara dinamik didefinisikan pada satu komponen visual dan dipakai oleh komponen visual lainnya.
    Contoh beragam style pada TButton dan TEdit di antaranya:
    Cenadep.org-Delphi-Tutorial-2013-09-08 01_20_25-Project1 - Delphi XE4 - Unit1
  • Dukungan visual effects (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 fitur 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.

Cenadep.org-Delphi-Tutorial-2013-09-09 03_12_18-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.

Cenadep.org-Delphi-Tutorial-2013-09-09 05_22_11-Delphi XE4

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.

Cenadep.org-Delphi-Tutorial-2013-09-09 05_29_18-Project1 - Delphi XE4 - Unit1

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:

Cenadep.org-Delphi-Tutorial-2013-09-09 05_32_34-Project1 - Delphi XE4 - Unit1

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.

Cenadep.org-Delphi-Tutorial-2013-09-09 05_38_38-Project1 - Delphi XE4 - Unit1

Sehingga komposisi struktur desain projek menjadi seperti berikut:

Cenadep.org-Delphi-Tutorial-2013-09-09 05_40_35-Project1 - Delphi XE4 - Unit1

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…

Cenadep.org-Delphi-Tutorial-2013-09-09 05_42_51-Project1 - Delphi XE4 - Unit1

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

Cenadep.org-Delphi-Tutorial-2013-09-09 05_46_22-Project1 - Delphi XE4 - Unit1

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 :)

Cenadep.org-Delphi-Tutorial-2013-09-09 05_52_10-Form1

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

 

Page : 1 2 ALL

Comments

comments

Powered by Facebook Comments

Pages: 1 2