Membuat Efek Live Gradasi di Form Delphi 7
West Borneo Blogger - Seperti pada artikel yang telah di posting oleh blog Tekno Borneo tentang “Cara Membuat Efek Gradasi di Delphi 7 Seperti Instagram”, maka artikel ini adalah pengembangan dari artikel tersebut.
Efek gradasi yang dihasilkan dari sebuah blok koding yang tertulis di blog tersebut, dapat manipulasi menjadi efek jenis lain. Adapun jenis efek gradasi ini penulis sebut sebagai Efek Live Gradasi.
Efek live Gradasi memungkinkan gradasi yang tampil pada form Delphi dapat berubah-ubah warnanya seiring perubahan waktu yang dihitung secara otomatis oleh komponen timer. Dengan kata lain efek ini layaknya seperti pada menu login aplikasi Instagram.
Berbicara tentang efek tampilan pada pembuatan program, artikel ini lebih merujuk kepada desain interface atau lebih akrab dikenal dengan sebutan GUI (Graphical User Interface). Adapun manfaat yang didapatkan saat membuat desain suatu program adalah bukan terhadap sistem program yang dibuat, namun lebih kepada User Experience (Pengalaman Pengguna saat menggunakan aplikasi yang dibuat).
 |
| Membuat Efek Live Gradasi di Form Delphi 7 |
Tujuan dari user interface design adalah membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna-apa yang sering disebut pengguna desain yang berpusat. User interface design yang bagus memfasilitasi dan menyelesaikan tugas di tangan pengguna tanpa menarik perhatian yang tidak perlu pada dirinya sendiri. Desain grafis dapat dimanfaatkan untuk mendukung kegunaan. Proses desain harus menyeimbangkan fungsi teknis dan elemen visual (misalnya, model mental) untuk menciptakan sebuah sistem yang tidak hanya operasional saja tetapi juga bermanfaat serta dapat disesuaikan dengan kebutuhan pengguna.
Interface design terlibat dalam berbagai proyek dari sistem komputer, untuk mobil, untuk pesawat komersial; semua proyek-proyek ini pada dasarnya melibatkan banyak interaksi sama manusia, namun juga membutuhkan beberapa keterampilan yang unik dan pengetahuan. Akibatnya, desainer cenderung mengkhususkan diri pada jenis proyek tertentu dan memiliki kemampuan berpusat di sekitar keahlian mereka, apakah itu perancangan perangkat lunak, penelitian pengguna atau desain tampilan.[1]
Sebelum mencoba mempraktikkan tutorial ini, pastikan bahwa komputer pembaca telah terinstall aplikasi Delphi 7, kemudian cek compability Delphi yang pembaca gunakan. Hal ini agar saat pengerjaan, semua pekerjaan dapat dijalankan secara lancar tanpa adanya bug-bug yang dapat memperlambat proses pembuatan yang sebenarnya sangat mudah ini.
Langkah-langkah Dalam Membuat Efek Live Gradasi di Delphi 7
1. Buka aplikasi Delphi 7, kemudian buat project baru dengan nama “prjlive_gradasi_teknoborneo”. Caranya klik File – New – Klik Applcation hingga terbuka form baru.2. Klik Form1 tersebut kemudian atur propertiesnya seperti tabel di bawah ini :
Properties
|
Value
|
Caption
|
Live Gradasi Tekno
Borneo
|
Name
|
prjlive_gradasi_teknoborneo
|
WindowState
|
wsMaximized
|
3. Jangan lupa di Save terlebih dahulu dengan cara klik File – Save. Lakukan save data secara rutin agar project yang dibuat telah tersimpan walaupun terjadi hal-hal yang tidak diinginkan seperti crash, debug atau error program.
4. Tambahkan dua buah komponen Timer dengan cara pilih tab System pada Component Palette.
 |
| Membuat Efek Live Gradasi di Form Delphi 7 |
5. Atur properties timer 1 seperti tabel di bawah ini :
Properties
|
Value
|
Enabled
|
True
|
Interval
|
30
|
Name
|
tmrperubahan
|
6. Atur properties timer 2 seperti tabel di bawah ini :
Properties
|
Value
|
Enabled
|
False
|
Interval
|
30
|
Name
|
tmrdefault
|
7. Tambahkan sebuah variabel integer dengan nama nilai pada deklarasi global. Hal ini dimaksudkan agar nilai dari variabel tersebut dapat dipakai oleh kedua komponen timer. Caranya klik 2x pada form delphi – scroll keatas. Pembaca dapat melihat teks berwarna merah dibawah ini sebagai contoh.
unit Unit1;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, ExtCtrls;
type
Tprjlive_gradasi_teknoborneo = class(TForm)
Timer1: TTimer;
Timer2: TTimer;
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
prjlive_gradasi_teknoborneo: Tprjlive_gradasi_teknoborneo;
nilai : integer;
implementation
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, ExtCtrls;
type
Tprjlive_gradasi_teknoborneo = class(TForm)
Timer1: TTimer;
Timer2: TTimer;
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
prjlive_gradasi_teknoborneo: Tprjlive_gradasi_teknoborneo;
nilai : integer;
implementation
8. Inisialisasi variabel nilai tersebut pada event form create, caranya adalah klik 2x pada form – Tulis koding seperti dibawah ini. Inisialisasi ini bertujuan untuk memberikan value = 0 pada variabel nilai.
procedure Tprjlive_gradasi_teknoborneo.FormCreate(Sender: TObject);
begin
nilai := 0;
end;
9. Kembali ke form, klik 2x pada komponen tmrperubahan – Lalu masukkan koding dibawah ini. Koding ini gunanya untuk membuat perubahan warna gradasi di form. Perubahan warna ini bersifat mutlak dari penulis, jika pembaca ingin membuat perubahan warna yang lain, maka pembaca dapat melakukan eksperimen sendiri. Jangan lupa, warna teks yang merah adalah koding yang dituliskan.begin
nilai := 0;
end;
procedure Tprjlive_gradasi_teknoborneo.tmrperubahanTimer(Sender: TObject);
var Row, Ht: Word;
IX: Integer;
begin
//gradient abstract animation
iX :=200 ;
Ht:=(ClientHeight + 512) div 256;
for Row := 0 to 512 do
begin
with Canvas do begin
Brush.Color := RGB(Ix,nilai,230);
FillRect(Rect(0, Row * Ht, ClientWidth, (Row + 1) * Ht));
IX :=(IX-1);
end;
end;
if (nilai >= 255) then
begin
tmrdefault.Enabled := True;
tmrperubahan.Enabled := False;
end
else
inc(nilai);
end;
var Row, Ht: Word;
IX: Integer;
begin
//gradient abstract animation
iX :=200 ;
Ht:=(ClientHeight + 512) div 256;
for Row := 0 to 512 do
begin
with Canvas do begin
Brush.Color := RGB(Ix,nilai,230);
FillRect(Rect(0, Row * Ht, ClientWidth, (Row + 1) * Ht));
IX :=(IX-1);
end;
end;
if (nilai >= 255) then
begin
tmrdefault.Enabled := True;
tmrperubahan.Enabled := False;
end
else
inc(nilai);
end;
10. Kembali lagi ke form, klik 2x pada tmrdefault – lalu tuliskan koding seperti dibawah ini. Koding ini bertujuan untuk mengembalikan gradasi form ke asalnya, kemudian jangan lupa teks berwarna merah adalah yang dituliskan.
procedure Tprjlive_gradasi_teknoborneo.tmrdefaultTimer(Sender: TObject);
var Row, Ht: Word;
IX: Integer;
begin
//gradient abstract animation
iX :=200 ;
Ht:=(ClientHeight + 512) div 256;
for Row := 0 to 512 do
begin
with Canvas do begin
Brush.Color := RGB(Ix,nilai,230);
FillRect(Rect(0, Row * Ht, ClientWidth, (Row + 1) * Ht));
IX :=(IX-1);
end;
end;
if (nilai <= 0) then
begin
tmrdefault.Enabled := False;
tmrperubahan.Enabled := True;
end
else
dec(nilai);
end;
var Row, Ht: Word;
IX: Integer;
begin
//gradient abstract animation
iX :=200 ;
Ht:=(ClientHeight + 512) div 256;
for Row := 0 to 512 do
begin
with Canvas do begin
Brush.Color := RGB(Ix,nilai,230);
FillRect(Rect(0, Row * Ht, ClientWidth, (Row + 1) * Ht));
IX :=(IX-1);
end;
end;
if (nilai <= 0) then
begin
tmrdefault.Enabled := False;
tmrperubahan.Enabled := True;
end
else
dec(nilai);
end;
11. Terakhir jalankan aplikasi ini dengan cara klik icon Run atau tekan F9 pada keyboard.
Lanjut Membaca :
2. Desain Form Delphi 7 Modern, Cantik, Keren dan Menarik << Artikel Sebelumnya
3. Belum Tersedia >> Artikel Selanjutnya
3. Belum Tersedia >> Artikel Selanjutnya
(Video Belum Tersedia)
Blog West Borneo Blogger tidak menyediakan project seperti gambar di atas untuk disebarkan, namun jika pembaca ingin, maka dapat menghubungi penulis dengan kontak yang telah tertera di akhir artikel atau masuk ke dalam menu Contact.
Follow blog ini jika ingin mendapatkan informasi yang lainnya. West Borneo Blogger #YourPartnerToBeAMaster.
My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108
My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108
Referensi :
[1] https://defikristiana.wordpress.com/2016/02/11/antar-muka-pengguna-user-interface/
