Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Membuat LivePath Effect dengan Inkscape

LivePath effect merupakan sebuah effect dari paduan banyak path sehingga menghasilkan garis-garis halus yang berjajar. Salah satu contoh LivePath effect seperti pada gambar berikut

image

Kita dapat membuat effect tersebut dengan berbagai macam tools pembuat graphic vector seperti Corel Draw. Dalam hal ini saya akan gunakan tools gratis yaitu InkScape (www.inkscape.org). InkScape sebenarnya adalah sebuah tool untuk menggambar graphic vektor SVG. Selain SVG dokumen yang dibuat dengan tool ini juga dapat disimpan dalam format XAML (Silverlight), PostScript, Enhanced Metafile (EMF), OpenDocument Drawing (ODG), dll.

Untuk membuat gambar seperti di atas, langkah pertama adalah membuat background. Background terdiri dari dua persegi empat dengan degradasi kuning keemasan. Kita buat kotak pertama dengan ukuran 620px x 70px. Isi kotak warna gradient dari atas ke bawah dengan gradient stop #fbf49eff (atas) dan #e0a71dff (bawah).

image

Kotak kedua dibuat dengan ukuran 620px x 15px yang diletakkan persis di bawah kotak pertama. Gradient untuk kotak kedua terdiri dari tiga gradient stop dari atas ke bawah #edcd5dff (posisi 0% / atas), #eddd5dff (posisi 20% / tengah) dan #fbf49eff (posisi 100% / bawah). Untuk membuat pemisah tipis antara kedua kotak, dibuat stroke thickness sebesar 0.5px dengan warna putih. Hasil dari kedua kotak tersebut seperti terlihat pada gambar berikut.

image

Langkah berikutnya adalah membuat livepath effect itu sendiri. Untuk pemisahkan antara background dengan livepath effect dibuat layer baru di atas background dengan nama LifePath. Selanjutnya buat dua garis sinus menggunakan freehand line tool dengan warna merah dan putih yang saling memotong satu sama lain. Buat tebal stroke untuk dua garis ini sebesar 0.5px dan opacity 0.5.

image 

Langkah terakhir membuat effect livepath dengan menggunakan efek interpolasi path. Pilih (select) kedua path, pada menu Effect, Generate from Path, pilih Interpolate.

image

Pada jendela Interpolate, isi Exponent = 0.0, Interpolation steps = 128, Interpolation method = 2, Duplicate endpaths = unchecked, Interpolate style = checked. Setelah semua nilai diisi, tekan tombol Apply.

image

Hasil akhir dari langkah-langkah di atas adalah seperti terlihat pada gambar berikut.

image

Anda bisa menggunakan metode ini untuk membuat header sebuah halaman web atau untuk pemanis di dalam halaman.

Source file Inkscape SVG dari tutorial ini dapat didownload di merdeka.zip (28.49 kb).

Semoga bermanfaat.


Permalink | Comments (5) | Post RSSRSS comment feed

Mengkombinasikan Silverlight dengan HTML

Silverlight memang sangat tangguh untuk menampilkan antar muka pengguna (user interface) yang interaktif dan menarik. Pada silverlight 1.0 fasilitas yang tersedia masih sangat terbatas, hanya dapat digunakan untuk menggambar vektor, animasi dan multimedia. Pada Silverlight 1.0 belum dikenal istilah kontrol termasuk kontrol sederhana seperti input textbox, combobox, dll. Pada Silverlight 2.0 baru akan ada kontrol baik yang out of the box telah tersedia maupun kontrol yang dibuat sendiri.

Permasalahan saat ini adalah kontrol HTML (contoh: Ajax Control Toolkit, Rich Text Editor, dll) jumlahnya sangat banyak dan tidak mungkin semua diubah menjadi kontrol Silverlight. Satu lagi permasalahan adalah jika menggunakan kontrol Silverlight 2.0, kesulitannya adalah mengkomunikasikan antara code-behind C# dengan Javascript.

Untuk memenuhi keterbatasan ini, dapat digunakan kombinasi antara Silverlight dan kontrol HTML yang sudah ada. Dengan mengkombinasikan keduanya, tidak perlu lagi mengubah semua kontrol yang sudah stabil di HTML menjadi objek Silverlight.

Penggabungan antara HTML dan Silverlight diperlukan pengaturan atribut isWindowless: 'true' pada waktu create object Silverlight. Jika isWindowless: 'false' maka kontrol HTML akan selalu berada di bawah Silverlight.

createSilverlight = function()
{
    var scene = new LayeredPage();
    Silverlight.createObjectEx({
        source: 'scene.xaml',
        parentElement: document.getElementById('SilverlightPlugInHost'),
        id: 'SilverlightPlugIn',
        properties: {
            width: '800',
            height: '600',
            background: 'transparent',
            isWindowless: 'true',
            version: '1.0',
            framerate: "25"
        },
        events: {
            onError: null,
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
        },       
        context: null
    });

}

Dengan mengeset isWindowsless menjadi 'true' ada sesuatu yang harus dibayar yaitu tiap ada perubahan, semua element XAML akan dirender ulang. Jika isWindowless diset 'false', hanya elemen yang berubah saja yang akan dirender. Jika elemen tidak terlalu banyak animasi, hal tersebut bukan masalah. Jika banyak animasi, performance dapat ditingkatkan dengan menurunkan framerate dari default-nya 60pfs menjadi 25-30fps.


Categories: Silverlight
Permalink | Comments (1) | Post RSSRSS comment feed