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

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.

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;

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;

11. Terakhir jalankan aplikasi ini dengan cara klik icon Run atau tekan F9 pada keyboard.


Lanjut Membaca :

(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


Referensi :
[1] https://defikristiana.wordpress.com/2016/02/11/antar-muka-pengguna-user-interface/

Bagikan

Jangan lewatkan

Membuat Efek Live Gradasi di Form Delphi 7
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

Silahkan Tinggalkan Kritik dan Saran yang membangun dari Anda
1. Berkomentarlah yang baik dan sopan
2. Dilarang mengirim link aktif di CommentBox
3. Selebihnya anda bebas berekspresi :)

Gunakan kode Emoticon di sini >