Your SlideShare is downloading. ×
Cenadep.org - Dasar Visual Efek Dan Animasi Firemonkey Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Cenadep.org - Dasar Visual Efek Dan Animasi Firemonkey Part 1

750
views

Published on

Cenadep.org - Dasar Visual Efek Dan Animasi Firemonkey Part 1 …

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

Published in: Self Improvement

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
750
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.