gakho209
New Member
Phần hướng dẫn này là mình (dân vọc IT) tự nghiên cứu và share với anh em (chứ không phải của 1 lập trình viên), nếu có gì sai sót trong từ ngữ chuyên môn mong các chuyên gia IT thông cảm bỏ qua cho =D>
Cấu trúc của một skin ttpod bao gồm 2 file:
- File xxx.ttb là file chứa tất cả các hình ảnh tạo nên skin, cái mà ttpod cho phép bạn chỉnh sửa trong khuôn khổ 1 skin.
- File xxx.xml là file text có nhiệm vụ khai báo file .ttb chứa hình ảnh và sắp xếp các file hình ảnh, các mục, để tạo nên giao diện.
Để chỉnh sửa một skin bạn phải làm trên PC (trừ khi bạn chỉ điều chỉnh một vài thông số mà không thay đổi hình ảnh trong file .ttb).
Dù là mod skin hay là tạo skin mới bạn cũng nên chọn một skin chuẩn (skin gốc là tốt nhất, hoặc một skin bạn thích), sau đó chỉnh sửa hoặc thêm bớt hình ảnh theo thiết kế của mình. OK bắt đầu nhé:
1. Trước tiên, bạn phải chuyển file .ttb thành .mbm bằng phần mềm TtbConverter. (Đính kèm)
2. Mở file .mbm bằng phần mềm MBM Tool. (Đính kèm)
3. Xử lý hình ảnh ở đây: xóa, thêm, chọn mức màu (colour),...
Các bạn sẽ thấy tất cả hình ảnh ở đây đều có định dạng .bmp, được sắp xếp theo thứ tự 000, 001, 002. Tốt nhất các bạn design hình xong thì đặt tên theo thứ tự 000.bmp, 001.bmp và khi add vào thì hình phải đúng thứ tự (để ý đấy nhé)
4. Xử lý file .xml.
File .xml có định dạng như sau (mở bằng notepad hoặc wordpad,...)
***Các dòng đầu tiên:
- Ver="4.1": là version, tốt nhất nên đặt là 4.0 tất (dùng cho tất cả v4.x luôn)
- File = "Winamp.ttb": là tên file .ttb, khai báo không đúng thì khi chọn skin, ttpod sẽ đứng luôn (vì tìm hoài sao ko thấy, ơ ờ
).
***Tiếp theo, cấu trúc của mỗi dòng lệnh cơ bản sẽ có dạng như sau:
Ví dụ:
- ID="xyz": với xyz, một số cái là chuẩn (ko thay đổi được), một số cái mình tự đặt tên gì cũng được (trường hợp này nè).
- Position="a b c d":
+ a b - tọa độ (pixel) của đối tượng, tính từ gốc tọa độ (0,0) là góc phái trên trái màn hình.
+ c d - kích thước của đối tượng
- Icon="x" - trong dấu ngoặc là số thứ tự của đối tượng trong file .ttb (hoặc .mbm), ví dụ trên nhìn ở bước 3 bạn sẽ thấy hình này là 009.bmp
Nếu Icon="x y" thì y sẽ là nền của x, tức là hai cái này thường sẽ nằm trùng lên nhau và sẽ tạo nên một hình duy nhất theo ý đồ tác giả
Còn nhiều trường hợp nữa, các bạn tự tìm hiểu sẽ biết.
- ZOrder="x" - Lớp (layer) của đối tượng, số layer thì không giới hạn, đối tượng có ZOrder lớn hơn sẽ nằm trên (nếu đụng nhau thì sẽ che cái phía dưới luôn)
Kết luận: Dòng lệnh này sẽ hiển thị hình 009.bmp có vị trí là 0 548, độ lớn 360x92 pixel trên màn hình. Yeah!=D>
Tương tự, ví dụ dòng này:
<Text ID="Artist" Position="157 62 185 30" FontName="Sans MT SC 936_S60C" FontStyle="20 0" FontColor="250 250 250" ZOrder="2" />
Sẽ hiển thị tên Artist (ca sĩ) ở vị trí như vậy đó, font gì, cỡ chữ 20, màu gần gần trắng, thứ tự lớp là 2,...OK
***Cuối cùng, cấu trúc của file .xml:
Các dòng đầu tiên là khai báo.
Các phần tiếp theo sẽ nằm trong tag <Panel ID="xyz"> ...</Panel>. Theo đó thì:
zyz= "common": tất cả đối tượng chung, hiển thị mọi lúc.
zyz= "Visual": các đối tượng hiển thị trong phần Hiệu ứng đó.
zyz= "Main": các đối tượng hiển thị trong phần có hình album đó.
zyz= "Lyrics": các đối tượng hiển thị trong phần Lời bài hát đó.
zyz= "Miniplayer": phần thu nhỏ ngoài màn hình chính
zyz= "Minilyric": phần thu nhỏ khi đang ở menu.
Xong tất cả các phần quan trọng rồi.
5. Lưu lại file .xml, .mbm.
6. Dùng TtbConverter chuyển .mbm trở lại thành .ttb.
7. Copy hai file .ttb và .xml vào thư mục X:\TTpod\Skin và test thử.
8. Test xong thấy đẹp thì share lên đây cho anh em Pdaviet cùng thưởng thức.
Hết.
Một số skin mình đã mod hoặc tự thiết kế nằm trong ....chữ ký, mời các bạn tham khảo.;
;
;
Cấu trúc của một skin ttpod bao gồm 2 file:
- File xxx.ttb là file chứa tất cả các hình ảnh tạo nên skin, cái mà ttpod cho phép bạn chỉnh sửa trong khuôn khổ 1 skin.
- File xxx.xml là file text có nhiệm vụ khai báo file .ttb chứa hình ảnh và sắp xếp các file hình ảnh, các mục, để tạo nên giao diện.
Để chỉnh sửa một skin bạn phải làm trên PC (trừ khi bạn chỉ điều chỉnh một vài thông số mà không thay đổi hình ảnh trong file .ttb).
Dù là mod skin hay là tạo skin mới bạn cũng nên chọn một skin chuẩn (skin gốc là tốt nhất, hoặc một skin bạn thích), sau đó chỉnh sửa hoặc thêm bớt hình ảnh theo thiết kế của mình. OK bắt đầu nhé:
1. Trước tiên, bạn phải chuyển file .ttb thành .mbm bằng phần mềm TtbConverter. (Đính kèm)

2. Mở file .mbm bằng phần mềm MBM Tool. (Đính kèm)
3. Xử lý hình ảnh ở đây: xóa, thêm, chọn mức màu (colour),...

Các bạn sẽ thấy tất cả hình ảnh ở đây đều có định dạng .bmp, được sắp xếp theo thứ tự 000, 001, 002. Tốt nhất các bạn design hình xong thì đặt tên theo thứ tự 000.bmp, 001.bmp và khi add vào thì hình phải đúng thứ tự (để ý đấy nhé)
4. Xử lý file .xml.
File .xml có định dạng như sau (mở bằng notepad hoặc wordpad,...)
***Các dòng đầu tiên:
Trong các dòng đầu tiên này bạn chú ý:<?xml version="1.0" encoding="UTF-8"?>
<Theme Name="Winamp" Author="TTPod" Ver="4.1" Size="360 640" EMail="support@ttpod.com" WebPage="http://www.ttpod.com">
<Bitmap ID="BackGround" File="winamp.ttb" />
- Ver="4.1": là version, tốt nhất nên đặt là 4.0 tất (dùng cho tất cả v4.x luôn)
- File = "Winamp.ttb": là tên file .ttb, khai báo không đúng thì khi chọn skin, ttpod sẽ đứng luôn (vì tìm hoài sao ko thấy, ơ ờ
***Tiếp theo, cấu trúc của mỗi dòng lệnh cơ bản sẽ có dạng như sau:
Ví dụ:
<Icon ID="BottomBkg" Position="0 548 360 92" Icon="9" ZOrder="2"/>
- ID="xyz": với xyz, một số cái là chuẩn (ko thay đổi được), một số cái mình tự đặt tên gì cũng được (trường hợp này nè).
- Position="a b c d":
+ a b - tọa độ (pixel) của đối tượng, tính từ gốc tọa độ (0,0) là góc phái trên trái màn hình.
+ c d - kích thước của đối tượng
- Icon="x" - trong dấu ngoặc là số thứ tự của đối tượng trong file .ttb (hoặc .mbm), ví dụ trên nhìn ở bước 3 bạn sẽ thấy hình này là 009.bmp
Nếu Icon="x y" thì y sẽ là nền của x, tức là hai cái này thường sẽ nằm trùng lên nhau và sẽ tạo nên một hình duy nhất theo ý đồ tác giả
Còn nhiều trường hợp nữa, các bạn tự tìm hiểu sẽ biết.
- ZOrder="x" - Lớp (layer) của đối tượng, số layer thì không giới hạn, đối tượng có ZOrder lớn hơn sẽ nằm trên (nếu đụng nhau thì sẽ che cái phía dưới luôn)
Kết luận: Dòng lệnh này sẽ hiển thị hình 009.bmp có vị trí là 0 548, độ lớn 360x92 pixel trên màn hình. Yeah!=D>
Tương tự, ví dụ dòng này:
<Text ID="Artist" Position="157 62 185 30" FontName="Sans MT SC 936_S60C" FontStyle="20 0" FontColor="250 250 250" ZOrder="2" />
Sẽ hiển thị tên Artist (ca sĩ) ở vị trí như vậy đó, font gì, cỡ chữ 20, màu gần gần trắng, thứ tự lớp là 2,...OK
***Cuối cùng, cấu trúc của file .xml:
Các dòng đầu tiên là khai báo.
Các phần tiếp theo sẽ nằm trong tag <Panel ID="xyz"> ...</Panel>. Theo đó thì:
zyz= "common": tất cả đối tượng chung, hiển thị mọi lúc.
zyz= "Visual": các đối tượng hiển thị trong phần Hiệu ứng đó.
zyz= "Main": các đối tượng hiển thị trong phần có hình album đó.
zyz= "Lyrics": các đối tượng hiển thị trong phần Lời bài hát đó.
zyz= "Miniplayer": phần thu nhỏ ngoài màn hình chính
zyz= "Minilyric": phần thu nhỏ khi đang ở menu.
Xong tất cả các phần quan trọng rồi.
5. Lưu lại file .xml, .mbm.
6. Dùng TtbConverter chuyển .mbm trở lại thành .ttb.
7. Copy hai file .ttb và .xml vào thư mục X:\TTpod\Skin và test thử.
8. Test xong thấy đẹp thì share lên đây cho anh em Pdaviet cùng thưởng thức.
Hết.
Một số skin mình đã mod hoặc tự thiết kế nằm trong ....chữ ký, mời các bạn tham khảo.;