Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri

Now Reading
Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri

PERINGATAN!
TUTORIAL INI BERLAKU UNTUK SKIN EDITOR DIBAWAH VERSI 4.50.
UNTUK SKIN EDITOR VERSI 4.50 AGAK BERBEDA.

Mungkin kalian pernah bertanya-tanya, bagaimana cara membuat skin untuk aimp ? atau lainnya. Nah kali ini saya akan membahas bagaimana cara membuat aimp skin sendiri! Disini kita akan membahas dari mulai mendesain gambar untuk aimp hingga di implementasikan menjadi skin untuk aimp.

Pendahuluan

AIMP atau Artem Izmaylov Media Player adalah pemutar audio gratis untuk Windows dan Android, yang awalnya dikembangkan oleh pengembang Rusia Artem Izmaylov. Versi pertama AIMP, yang dijuluki “AIMP Classic”, dirilis pada tanggal 8 Agustus 2006. AIMP pada awalnya didasarkan pada perpustakaan audio BASS. Versi 3 menambahkan mesin audio baru dan dukungan penuh untuk ReplayGain, dan mengubah efek transparansi antarmuka perpustakaan musik. (read more ‘wikipedia’)

Alat dan Bahan

Proses Kerja

Bahwa dalam tahapan membuat sebuah skin yaitu ada 2 :

  1. Membuat desain dan implementasikan di editor grafis manapun.
  2. Memisahkan unsur dan rakit skin di editor.

TAHAP PERTAMA
Membuat desain dan implementasikan di editor grafis manapun.

Kita ambil desain untuk tutorial kali ini yaitu AIMP 4 SKIN v2.0 

Note: Sebelumnya AIMP 4 SaeSkin diganti menjadi AIMP 4 SKIN v2.0 karena kita belajar dasarnya dulu. Jadi kita buat dari yang termudah dulu ^_^ Untuk SaeSkin setelah ini ya ^_^

TAHAP KEDUA
Memisahkan unsur dan rakit skin di editor.

Pada tahap kedua ini, ada dua tugas yang harus kita buat. Yang pertama yaitu memisahkan unsur dari skin tersebut kemudian rakit di skin editor. Kita lihat desain di tahap pertama kira-kira apa saja unsur yang ada ? Yang pasti:

  • Ada gambar untuk latar belakang dan atau dasar
    • Tentu setiap skin mempunyai dasar yang berbeda-beda baik itu dari warna, maupun dari tampilannya.
  • Ada tombol-tombol
    • Dan tentu saja tombol-tombol.
  • Dan lain-lain

Setelah kalian mengetahui unsur apa saja yang ada pada desain kalian, maka kalian tinggal buat di editor grafis apa-apa saja yang sudah disebutkan diatas.

Sebelum melanjutkan, saya harap kalian pernah membaca Buku Panduan untuk AIMP Skin Editor (Buka AIMP Skin Editor > F1 (Help) )

Saya anggap kalian bisa membuat unsur-unsur yang sudah saya sebutkan diatas tadi.
Lanjut ke merakit skin di skin editor.

Mulai dari membuat proyek baru dengan cara pilih “File > New Project > Blank”.

baru.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri baru

Pilih Project

Tiap proyek diatas berbeda-beda, disini alasan saya menggunakan proyek Blank karena kita akan membuat dari awal sehingga akan lebih mudah jika belum ada apa-apa.

2 blank.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 2 blank

Project Blank

Langkah pertama yang saya lakukan disini adalah mengatur ukuran minimal dari skin ini. Pilih Container:liMain kemudian ubah ukuran Property:SizeMinimal pada Properties:liMain dengan ukuran yang kalian iniginkan. Jika skin kalian ingin bisa di Maximize, maka pada Property:SizeMaximal biarkan 0,0 saja.

3 mengatur ukuran.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 3 mengatur ukuran

Ubah Ukuran

Selanjutnya yaitu memberikan Texture pada liMain dengan cara double click pada liMain.

4 mengatur latar belakang.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 4 mengatur latar belakang

Texture (liMain)

Texture disini adalah sebuah gambar yang digunakan sebagai gambar dasar dari skin ini. Saya menggunakan gambar dengan 2 Frame, frame pertama jika jendela AIMP tidak aktif dan frame kedua jika jendela AIMP aktif. Pergantian frame ini akan terlihat dengan jelas karena ada perbedaan antara keduanya yaitu ada bayangan dan tidak ada bayangan.

Note: Sebenarnya di Skin Editor 4 ini kita bisa saja tidak membuat Texture, karena sekarang LayoutContainer mempunyai Property:Color yang bisa kita ubah sesuai keinginan kita. Tapi, jika kita menggunakan Property:Color, ketika AIMP aktif dan tidak aktif maka tidak akan ada perubahan sama sekali.

Selanjutnya kita atur Texture tersebut.

  • Jika Texture yang Kalian buat memiliki warna, dan Kalian ingin ketika AIMP dirubah Hue/Sat-nya maka warna Texture ikut berubah juga, maka ceklist pada Allow change hue.
  • Tentukan banyak Frame yang Kalian buat.
  • Frame tersebut ke bawah atau ke samping
4 mengatur latar belakang 2 Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 4 mengatur latar belakang 2

Mengatur > Texture (liMain)

Selanjutnya atur Sizing parameters.

Note: Filling parameters are intended for setting of a filling method and specifying of texture areas which will be extended at resizing of a player window.

  • Stretch Mode: Ada 3 pilihan pada Strech Mode ini
    1. Stretch – Peregangan lokasi tekstur yang dipilih
    2. Tile – Menyalin lokasi tekstur yang dipilih
    3. Center – Memusatkan tekstur yang dipotong menurut batas
  • Method: Ada 2 pilihan pada Method
    1. Margins
    2. Tile Params – Memungkinkan membuat dua area yang mengatur koordinat dan lebar tertentu untuk masing-masing area.

Jika sudah pilih Apply

4 mengatur latar belakang 2.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 4 mengatur latar belakang 2

Mengatur > Sizing parameters (liMain)

Maka hasilnya akan seperti gambar dibawah ini.
Namun, masih ada warna abu-abu dibelakang Texture yang sudah kita buat.

5 hasil 4.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 5 hasil 4

Texture (liMain)

Cara mengahapus warna tersebut pilih liMain (1) > Property:Color (2) > gunakan #00000000 lalu Ok.

6 hapus warna.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 6 hapus warna

Menghilangkan Warna

Maka akan terlihat seperti gambar dibawah ini

7 hasil 6 Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 7 hasil 6

Warna hilang

Seperti yang sudah saya katakan sebelumnya, bahwa disini menggunakan 2 frame untuk aktif dan tidak aktifnya AIMP, bagaimana cara menggunakan frame tersebut ?

  1. Klik Kanan pada liMain
  2. Pilih Bindings (atau menggunakan F5 juga bisa)
  3. Pilih Add kemudian cari AIMPMainForm
  4. Sambungkan antara Active (AIMPMainForm) dengan State (liMain)
    • Note: Jika dibaca, fungsi ini berbunyi kurang lebih: Jika AIMPMainForm Aktif, maka liMain berubah Keadaan (State)

  5. Kemudian Ok
8 aktif bindings.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 8 aktif bindings

Bindings AIMPMainForm -> liMain

Sebelum membuat isi dari AIMP, kita atur terlebih dahulu MagnetRectOffsets pada AIMPMainForm, ini adalah sesuatu yang tidak boleh kita abaikan.

  1. Pilih AIMPMainForm.
  2. Pada Properties AIMPMainForm pilih MagnetRectOffsets dan isi sesuai dengan skin yang kalian buat.
9 MagnetRectOffsets.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 9 magnetrectoffsets

MagnetRectOffsets AIMPMainForm

Sekarang waktunya kita membuat Content untuk Skin AIMP yang kita buat. Klik Kanan pada liMain kemudian pilih NewItem: Container

10 add content Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 10 add content

Menambahkan container pada liMain

Buat beberapa Item Container seperti pada gambar

11 content main Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 11 content main1

Content Main

Pertama-tama kita atur Container:MainContent . Pilih MainContent kemudian pilih Property:Aligment dan atur menjadi laClientSelanjutnya sesuaikan Property:AligmentMargins ( garis putus-putus ) dengan Texture dasar yang kalian buat.

12 maincontent settings Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 12 maincontent settings

Container:MainContent

Lanjut, kita atur Container:Header. Container:Header disini saya gunakan sebagai tempat untuk tombol seperti AIMP Menu, Minimize, Maximize dan Exit/Close.

Pilih Container:Header kemudian pada Property:Aligment pilih laTop (Karena akan di simpan di atas) dan pada Property:SizeMinimal atur ukuran sesuai dengan yang kalian inginkan.

13 header settings Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 13 header settings

Container:Header

Selanjutnya mengatur Container:Content. Container:Content di sini saya gunakan sebagai tempat untuk Playlist/MusicLibrary

Pilih Content kemudian pada Property:Aligment pilih laClient. Karena ini liClient maka kita tidak perlu mengatur ukurannya.

14 content settings.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 14 content settings

Container:Content

Selanjutnya mengatur Container:FooterContainer:Footer ini akan saya gunakan sebagai tempat untuk playlist button, seekbar dan volume bar.

Pilih Container:Footer kemudian pada Property:Aligment pilih laBottom (Karena akan di simpan di bawah) dan pada Property:SizeMinimal atur ukuran sesuai dengan yang kalian inginkan.

15 bottom settings Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 15 bottom settings

Container:Footer

Selamat, Kalian sudah berhasil membuat skin dasar.

Selanjutnya kita akan menambahkan Playlist dan Music Library ke dalam  Container:Content. 

  • Untuk Container:ClientContent kalian atur pada bagian Property:Aligment saja, ubah ke liCient.
  • Untuk Container:LeftContent atur Property:Aligment menjadi liLeft dan sesuaikan ukuran Property:SizeMinimal dengan yang kalian inginkan.
16 left content.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 16 left content

LeftContent

Selanjutnya pindahkan Playlist kedalam Container:ClientContent dengan cara Drag&Drop.

17 drag and drop playlist Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 17 drag and drop playlist1

Drag and Drop Playlist

Note: Sebelum melanjutkan membaca, mohon maaf karena ada perubahaan penamaan yang terlambat pada Container-Container dibawah ini:

Container:RightContent menjadi ContainerClient
Container:ClientContent 
menjadi ContainerLeft

Jika Playlist tidak muncul maka Klik Kanan di Playlist. Kemudian pilih Placement (F6) lalu atur Element placement lalu OK

Note: Disini saya mengaturnya menjadi 0,0,0,0 yang artinya mengisi penuh ukuran dari Container:ClientContent

18 placement playlist.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 18 placement playlist

Placement Playlist

Hasilnya akan seperti ini

19 hasil 18.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 19 hasil 18

Hasil Placement

Karena latar belakang untuk skin ini akan menggunakan karakter animasi atau lainnya, jadi kita atur agar Playlist menjadi Transparant. Caranya pilih Playlist kemudian pada Property:ParentBackground ubah menjadi True dan pada Property:Resources(BackgroundColor) kosongkan warnanya.

20 transparant playlist.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 20 transparant playlist

Transparant Playlist

Maka hasilnya akan seperti ini

21 hasil 20.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 21 hasil 20

Playlist Transparant

Karena ini baru desain. Selanjutnya untuk tombol-tombol penting dll dari AIMP, kalian sebenarnya bisa gunakan perintah Copy Structure dari skin yang sudah ada seperti Bliss Compact, Bliss, dan Bliss (Dark Version) dengan cara Klik Kanan pada Tombol kemudian Paste Structure ke Tombol yang dibuat di skin Kalian.

22 copy paste.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 22 copy paste

Copy Paste

Note: Perintah Copy Properties dan Copy Structure berlaku atau bisa digunakan untuk semua Controls dan Background Objects.

Copy Structure semua Controls yang dibutuhkan untuk skin Kalian. Sederhananya seperti ini

23 copy paste.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 23 copy paste

Menambahkan tombol dll.

Terakhir pada bagian AIMPMainForm, yaitu menambahkan gambar untuk latar belakang dari skin yang kita buat.

Pertama-tama tambahkan TASEPanel pada Container:Content, kemudian atur Element placement.

24 tambah panel.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 24 tambah panel

Tambah TASEPanel

[Optional] Ubah warna TASEPanel agar menjadi Transparant

25 panel transparant.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 25 panel transparant

Panel Transparant

Selanjutnya siapkan gambar yang akan dijadikan sebagai latar belakang.

Lalu pasang sebagai Texture dari Panel tadi.

26 tambah gambar.png Cara Membuat AIMP SKIN 'Sederhana' Sendiri Cara Membuat AIMP SKIN ‘Sederhana’ Sendiri 26 tambah gambar

Pasang Latar Belakang

Sekarang kalian bisa mencoba skin yang sudah kalian buat dengan menekan CTRL+F9

Dan ini adalah tampilan sederhana dari skin yang sudah saya buat.

Kalian tinggal menggunakan imajinasi kalian untuk mengatur tampilan dan tata letak dari tombol-tombol skin yang sudah kalian buat.

Sukai dan Bagikan (b ‘-‘)b

  • Jika ada yang ingin ditanyakan kalian bisa:
    • Tinggalkan Komentar
    • Kirim Pesan Kepada Kami

Jika kurang faham bisa baca Tutorial Dasar

 

What's your reaction?
Thumbs
100%
Happy
0%
Cool
0%
Sad
0%
Angry
0%
About The Author
Shiro