Tutorial Dasar AIMP Skin – Latar Belakang (BG)

Now Reading
Tutorial Dasar AIMP Skin – Latar Belakang (BG)

    Hai. Kembali lagi bersama SMIOTAKU di Tutorial AIMP. Dan akhirnya setelah beberapa bulan tidak memberikan tutorial, kali ini SMIOTAKU akan memberikan tutorial dasar nih. Cek dibawah ini..

Untuk latar belakang putih bisa baca catatan ini di Evernote

Membuat Latar Dasar/ Belakang (BG)

    Yang pertama yaitu tentang Latar Dasar/ Belakang (BG). Kalian pasti sudah tau kan latar belakang di AIMP itu yang mana ? Ya, seperti yang sering di posting oleh SMIOTAKU yaitu gambar animasi di belakang Playlist (PL) atau Music Library (ML).
Untuk BG ini sebenarnya ada macam-macamnya tergantung fitur yang kalian buat dan kalian inginkan.

BG Sederhana

    Untuk BG Sederhana, kalian bisa menggunakan fitur bawaan dari AIMP, yaitu dengan menambahkan Warna pada Component:Container. Contohnya seperti pada gambar dibawah ini:
1 tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 1
Pada gambar diatas, kalian tinggal merubah Properties:Color dengan memilih warna yang kalian inginkan dan hasilnya akan menyesuaikan dengan warna yang kalian pilih.

BG dengan 2 Keadaan

    Untuk BG yang ke-2, ini adalah BG yang sering digunakan oleh SMIOTAKU. Dengan menggunakan BG ini, kalian bisa mempercantik tampilan skin kalian dengan cara membedakan latar belakang ketika AIMP aktif dan tidak aktif.
    Kita ambil contoh latar belakang dengan 2 Frame ( tanpa & dengan shadow ).
Background White 0 tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) background white 0
    Untuk mengaturnya, kalian tinggal double click pada Component:Container yang ingin kalian ubah (untuk 2 Frame ( tanpa & dengan shadow ) direkomendasikan disimpan pada Component:Container paling atas pada stuktur skin).
Contoh:
2d tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 2d
Jika ada 2 Component:Container seperti pada gambar diatas, maka lebih baik menyimpan tekstur pada Container:liMain
Kemudian atur dan sesuaikan, contoh pada gambar dibawah ini:
2 tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 2
Pada gambar diatas, ada Frames dan Sizing Parameters. Kalian tinggal sesuaikan dengan gambar yang kalian buat saja.
  • Untuk Frame Order, gambar kalian urutannya dari Atas kebawah (Order: Vertical) atau Dari samping kiri ke kanan (Order: Horizontal).
  • Untuk Frame Count, jumlah frame dari gambar.
Kemudian untuk Sizing Parameters
  • 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
  • Size Mode Ada 2 pilihan pada Method
  1. Margins
  2. Tile Areas – Memungkinkan membuat dua area dan mengatur koordinat serta lebar tertentu untuk masing-masing area.
Pada Sizing Parameters kenapa memasukan 5,5,5,5 ? Perhatikan pada gambar dibawah ini
2a.PNG tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 2a
    Karena pada Sizing Parameters saya mengatur Stretch Mode:Stretch dan Size Mode:Margins, yang artinya “Gambar yang ada didalam garis merah akan merengang jika AIMP berubah ukuran”. Jadi, maksud 5,5,5,5 itu adalah menentukan tekstur mana yang bisa merengang atau mengisi Component:Container.
    Jika sudah mengatur teksturnya, kita tinggal atur Bindings(F5)-nya. Pilih Add kemudian cari Windows tempat dimana Component:Container itu disimpan.
    Contoh:
2c tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 2c
Karena Container:liMain berada pada Windows:AIMPMainForm, maka untuk Bindings-nya seperti pada gambar dibawah ini:
2b tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 2b
Itulah contoh 2 Frame ( tanpa & dengan shadow ).
Q: Lalu bagaimana jika bukan shadow ? contohnya berbeda warna ?
A: Bisa, silahkan dicoba saja.
Nah kedua pembahasan diatas cocok digunakan untuk Component:Container paling atas dalam sebuah struktur. Pembahasan selanjutnya adalah Latar Belakang yang bisa berubah-ubah baik Warna maupun Gambar.

BG yang bisa berubah-ubah

Untuk BG yang bisa berubah-ubah juga banyak macam-macamnya.
Contoh yang akan dijelaskan disini yaitu:
  1. Menggunakan Album Art
  2. Menggunakan Gambar
  3. Merubah Warna
Disini akan dijelaskan mengenai bagaimana cara merubah background secara bergantian, karena ini dasar jadi kita tidak akan memakai program/ script dulu ya ( Baca Juga: Tutorial Dasar: Texture ).
Sekarang kita akan belajar menggunakan Tabbed Group. Ternyata Tabbed Group, selain bisa digunakan untuk pergantian Component:Container ternyata bisa digunakan juga untuk merubah background. Caranya bagaimana ?
Diatas sudah dijelaskan bahwa background pertama itu adalah Album Art, kemudian Gambar dan terakhir adalah Warna. Oke berarti kita buat 1 Tabbed Group dengan 3 Component:Container didalamnya. Oh ya, sebelumnya karena Tabbed Group hanya digunakan sebagai perantara untuk mengganti background jadi ada baiknya disimpan dibeda Windows.
Contoh
3 tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3
Pada gambar diatas, membuat Windows:Bindings terlebih dahulu, kemudian membuat TabbedGroup:LatihanGroup kemudian membuat Container:AlbumArt, Container:Gambar dan Container:Warna.
Jika kalian sudah membuat seperti yang ada pada gambar diatas, maka kita lanjut ke proses selanjutnya.
Kembali ke Container:liMain, kita buat TASEPanel
3a tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3a
Kemudian atur Placement pada setiap TASEPanel dengan pengaturan seperti gambar dibawah ini
3b.PNG tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3b
Jika sudah, isi TASEPanel pertama dengan TASEAlbumArt dan sesuaikan juga Placement-nya
3b tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3b
Kemudian pada TASEPanel kedua ubah texture dengan gambar yang kalian inginkan, dan pada TASEPanel yang ketiga ubah Properties:Color dengan warna yang kalian inginkan.
Contoh ke-3 TASEPanel
3c tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3c
Jika sudah, terakhir kita tinggal menghubungkan TASEPanel yang sudah kalian tambahkan dan ubah ke 3 Component:Container yang ada pada TabbedGroup:LatihanGroup tadi.
Hubungkan (BindingsTASEPanel pertama dengan Container:AlbumArt
3d.PNG tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3d
Baca: Jika Container:AlbumArt terlihat (Visibility), maka TASEPanel:Panel akan ikut terlihat (Visibility)
Hubungkan (Bindings) TASEPanel kedua dengan Container:Gambar
3e tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3e1
Hubungkan (Bindings) TASEPanel ketiga dengan Container:Warna
3f.PNG tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3f
Maka otomatis visibilitas ketiga TASEPanel tadi akan berubah seperti pada gambar dibawah.
3g.PNG tutorial dasar aimp skin - latar belakang (bg) Tutorial Dasar AIMP Skin – Latar Belakang (BG) 3g
Sekarang coba check listContainer:Gambar atau Container:Warna, apakah TASEPanel:Panel1 atau TASEPanel:Panel2 juga akan ikut ter-check list otomatis ? Jika ia, maka “Selamat Anda Sudah Bisa Merubah Background” dan jika tidak, coba cek kembali Bindings setiap TASEPanel.
 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Q: Bagaimana jika semua gambar, akan tetapi berbeda-beda gambarnya ?
A: Tentu bisa.
 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Q: Bagaimana jika sesuai dengan tutorial, akan tetapi bada bagian gambar, gambarnya tidak hanya satu ?
A: Tentu bisa, kalian tinggal menambahkan TASEPanel lagi didalam TASEPanel:Panel1 jika ingin menambahkan gambar. Akan tetapi untuk TASEPanel:Panel1 jangan diberikan texture gambar atau biarkan polos saja. Dan kemudian membuat TabbedGroup lagi untuk pemilihan gambarnya. (Baca: Tutorial Dasar : Texture untuk cara mudahnya)
 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Q: Untuk tombolnya bagaimana ?
A: Untuk tombol Baca:Tutorial Dasar: Tombol
 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Ok, dirasa cukup untuk Latar Belakang. Sekian dan Terima Kasih.
Untuk latar belakang putih bisa baca catatan ini di Evernote

Sukai dan Bagikan (b ‘-‘)b

  • Jika ada yang ingin ditanyakan kalian bisa:
    • Tinggalkan Komentar
    • Kirim Pesan Kepada Kami
What's your reaction?
Thumbs
57%
Happy
14%
Cool
14%
Sad
0%
Angry
14%
About The Author
Shiro