tommynguyen1961
New Member
Cách thiết kế 1 skin cho Walkman 2.0
Mình làm bài hướng dẫn này riêng cho các bạn dễ tham khảo và trao đổi thắc mắc hoặc post những sản phẩm tử Walkman 2.0 mà các bạn đã làm riêng.
Hướng dẫn:
Muốn có một cái SKIN theo ý muốn cho Walkman2.0
Thì về mặt kỹ thuật khá dễ.
Khó là chỉ khó về mặt mỹ thuật, tạo hình, màu sắc và vị trí sao cho bắt mắt và dễ dùng nhất....
Về mặt mỹ thuật thì mình dốt đặt... nên không dám bàn.
Còn mặt kỹ thuật làm sao để đưa một cái objects (bất kỳ) với một cái hình (bất kỳ) lên vị trí (bất kỳ) trên màn hình và chọt vào nó thì nó sẽ chạy một chức năng (bất kỳ).
Sau đây, tranh thủ mình nói sơ lược (vì khá dễ nên hy vọng các bạn sẽ hiểu ngay).
Như các bạn đã biết skin cho walkman 2.0 chỉ bao gồm hai files.
Trong thư mục C:\private\200011FD
- images_skt.png
- playview_skt.xml
File images_skt.png là MỘT file hình trong đó sẽ chứa toàn bộ các hình ảnh mà bạn muốn gắn lên màn hình khi chạy. Nhớ là file PNG là có sẵn mask (hay còn gọi là ALPHA CHANNEL).
File playview_skt.xml : đây chính là file mà bạn định nghĩa cho skin đây.
Nào bây giờ ta cùng mở file playview_skt.xml này ra nhen (mở bằng wordpad hoặc notepad)
Đầu tiên là cách ghi chú thích....
Bạn muốn chú thích phần sau này là sẽ làm gì đó... để sau này mở lại bạn có thể dễ dàng nhớ. Thì ghi chú thích bạn phải bắt đầu bằng <!-- và kết thúc bằng -->
ví dụ ở đầu file bạn thấy
<!--
File: playview_skt.xml
Copyright: Sony Ericsson Mobile Communications Ltd
Description:
This file defines the play view for the Walkman Media Player on Nina.
-->
Bạn bỏ qua 3 dòng kế là định nghĩ ViewSkin và Layout (chả cần quan tâm làm gì cứ lấy mặc định của nó cho xong)
<viewSkin>
<layout>
<root-layout width="0" height = "0" backgroundImage ="background" />
Kế tiếp là phần định nghĩa MAP (cái này quan trọng đây)
phần này mở đầu bằng <map image="ten file" và kết thúc bằng </map>
ví dụ:
<map image="images_skt.png">
<coord ....
<coord ....
...
...
</map>
Tức là bạn sẽ cắt từng phần (map) trong file chỉ định (ở đây là file images_skt.png - bạn có thể tạo file mới bất kỳ và thay tên file thoải mái)
và gán chúng vào một biến bằng <coord ... />
Lấy ví dụ:
<coord id="Play" left="247" top="64" width="17" height="13" />
Tức là bạn cắt phần hình tại ví trí TRÁI TRÊN 247, 64 với rộng 17 và cao 13
(tính bằng PIXEL) bên trong file hình images_skt.png và gán cho biến "Play" hay nói một cách khác là bạn MAP khung hình của "Play" tại ví trí đó trong hình.
Bạn thoải mái map bất kỳ bao nhiêu biến với tên gọi bất kỳ nào mà bạn thích.. miễn sao dễ nhớ cho bạn mà thui.
Xong phần MAP rồi thì bắt đầu bạn gắn nó lên màn hình khi chạy walkman2.0
Muốn định nghĩa một nút bấm trên màn hình bạn dùng <button .... /button>
Lấy ví dụ:
<button id="Play" left="112" top="182" zorder="5">
<buttonState id="Paused" cmd="Play" image="Play" width="40" height="40" />
<buttonState id="Playing" cmd="Pause" image="Pause" width="40" height="40" />
</button>
Tức là nút Play sẽ được gán tại ví trí TRÁI TRÊN 112,182 (zorder không thèm quan tâm)
và nếu nút này cần hiển thị n trạng thái thì bạn định nghĩa n trạng thái của nó.
trạng thái sẽ luân phiên thay đổi sau mỗi lần nhấn.
với ví dụ trên thì nút "Play" sẽ có hai trạng thái - trạng thái Paused sẽ hiện hình "Play" và nếu chọt thì thực thi (cmd) là Play và đổi sang trạng thái Playing có hình là Pause (đã được MAP ở trên) và nếu chọt thì thực thi cmd = Pause.
Chú ý: id Bạn có thể thoải mái đặt tên - miễn sao dễ nhớ cho riêng bạn.
Còn cmd thì bắt buộc phải ghi đúng các lệnh mà walkman đã định nghĩ sẵn (danh sách các lệnh này mình không có - đành phải tham khảo mấy cái file xml của các cao thủ đi trước).
Kế đến là <label ..... /> tương tự y như button nhưng không có chọt để chạy tức không có cmd
Phần cuối cùng là K e y <k e y .... / k e y>
các bạn có thể định nghĩa thoải mái, nhấn phím nào thì sẽ thực thi lệnh (cmd) nào tùy thích.
Lấy ví dụ:
<k e y id="Space" code="#0005" cmd="PlayPause" />
Định nghĩa phím space bar khi nhấn sẽ chạy lệnh PlayPause. Trong đó code là số thập lục phân (hex) trong bảng mã unicode của phím.
.....
Phần trên, chỉ nói về map, button, k e y cơ bản nhất, để cho bất kỳ ai cũng có thể bắt đầu thực hiện và hoàn toàn có thể thực hiện một skin hoàn chỉnh chỉ với những cái cơ bản đó.
Nếu thực hiện trên một xml đã có.. có dòng nào khác cái cơ bản trên thì nếu không hiểu bạn cứ để yên (sau này tìm hiểu kỹ sau), hoặc xóa bỏ (nếu không cần).
Khá là dễ phải không các bạn...
Nếu không thì đành phải cầu cứu và hy vọng các bạn trong giới võ lâm cao thủ CongVoi, Caohieu88, P3600i, Tommynguyen1961, AT007, Son_Do, v.v.... Thực hiện lại bài viết này bằng hình ảnh có mình họa và bổ sung nhiều cái còn thiếu.
(Bận quá.... nên hơi luộm thuộm và thiếu hình ảnh mong các bạn thông cảm.)
CHÚ Ý:
Walkman2.0 được xây dựng không cho P990i nên thỉnh thoảng sẽ bị mất phần đầu (nguyên do là P990i đặc biệt có cái phần tiêu đề có “tam giác ngược” để xổ menu – cái phần này các dòng W và P1i không có), do vậy phần này sẽ làm cho walkman2.0 hơi bị “lúng túng” khi hiển thị….
Theo kinh nghiệm của mình trên P990i, walkman2.0 có 3 loại hiển thị:
1. Mất phần đầu – thường thấy khi mới mở walkman2.0 (màn hình bị đẩy xuống dưới do đó mất đi các nút ở phần dưới)
2. Hiện lên được phần đầu (phần tiêu đề và “tam giác ngược” để xổ menu) – ngay sau khi bạn tăng giảm volumn hoặc khóa/ mở khóa (màn hình bị đẩy xuống dưới giống 1)
3. Full screen – đầy màn hình đúng chuẩn của dòng w (không có phần tiêu đề) – khi bạn lăn con lăn để chọn bài. (màn hình đẩy lên trên và hiển thị đầy đủ).
Do vậy bạn thiết kế sau cho mọi nút của bạn không nằm phần phía dưới là ổn cho P990i.
Chúc các bạn thành công.=D>=D>=D>
Tác giả : doananhtai
Mình làm bài hướng dẫn này riêng cho các bạn dễ tham khảo và trao đổi thắc mắc hoặc post những sản phẩm tử Walkman 2.0 mà các bạn đã làm riêng.
Hướng dẫn:
Muốn có một cái SKIN theo ý muốn cho Walkman2.0
Thì về mặt kỹ thuật khá dễ.
Khó là chỉ khó về mặt mỹ thuật, tạo hình, màu sắc và vị trí sao cho bắt mắt và dễ dùng nhất....
Về mặt mỹ thuật thì mình dốt đặt... nên không dám bàn.
Còn mặt kỹ thuật làm sao để đưa một cái objects (bất kỳ) với một cái hình (bất kỳ) lên vị trí (bất kỳ) trên màn hình và chọt vào nó thì nó sẽ chạy một chức năng (bất kỳ).
Sau đây, tranh thủ mình nói sơ lược (vì khá dễ nên hy vọng các bạn sẽ hiểu ngay).
Như các bạn đã biết skin cho walkman 2.0 chỉ bao gồm hai files.
Trong thư mục C:\private\200011FD
- images_skt.png
- playview_skt.xml
File images_skt.png là MỘT file hình trong đó sẽ chứa toàn bộ các hình ảnh mà bạn muốn gắn lên màn hình khi chạy. Nhớ là file PNG là có sẵn mask (hay còn gọi là ALPHA CHANNEL).
File playview_skt.xml : đây chính là file mà bạn định nghĩa cho skin đây.
Nào bây giờ ta cùng mở file playview_skt.xml này ra nhen (mở bằng wordpad hoặc notepad)
Đầu tiên là cách ghi chú thích....
Bạn muốn chú thích phần sau này là sẽ làm gì đó... để sau này mở lại bạn có thể dễ dàng nhớ. Thì ghi chú thích bạn phải bắt đầu bằng <!-- và kết thúc bằng -->
ví dụ ở đầu file bạn thấy
<!--
File: playview_skt.xml
Copyright: Sony Ericsson Mobile Communications Ltd
Description:
This file defines the play view for the Walkman Media Player on Nina.
-->
Bạn bỏ qua 3 dòng kế là định nghĩ ViewSkin và Layout (chả cần quan tâm làm gì cứ lấy mặc định của nó cho xong)
<viewSkin>
<layout>
<root-layout width="0" height = "0" backgroundImage ="background" />
Kế tiếp là phần định nghĩa MAP (cái này quan trọng đây)
phần này mở đầu bằng <map image="ten file" và kết thúc bằng </map>
ví dụ:
<map image="images_skt.png">
<coord ....
<coord ....
...
...
</map>
Tức là bạn sẽ cắt từng phần (map) trong file chỉ định (ở đây là file images_skt.png - bạn có thể tạo file mới bất kỳ và thay tên file thoải mái)
và gán chúng vào một biến bằng <coord ... />
Lấy ví dụ:
<coord id="Play" left="247" top="64" width="17" height="13" />
Tức là bạn cắt phần hình tại ví trí TRÁI TRÊN 247, 64 với rộng 17 và cao 13
(tính bằng PIXEL) bên trong file hình images_skt.png và gán cho biến "Play" hay nói một cách khác là bạn MAP khung hình của "Play" tại ví trí đó trong hình.
Bạn thoải mái map bất kỳ bao nhiêu biến với tên gọi bất kỳ nào mà bạn thích.. miễn sao dễ nhớ cho bạn mà thui.
Xong phần MAP rồi thì bắt đầu bạn gắn nó lên màn hình khi chạy walkman2.0
Muốn định nghĩa một nút bấm trên màn hình bạn dùng <button .... /button>
Lấy ví dụ:
<button id="Play" left="112" top="182" zorder="5">
<buttonState id="Paused" cmd="Play" image="Play" width="40" height="40" />
<buttonState id="Playing" cmd="Pause" image="Pause" width="40" height="40" />
</button>
Tức là nút Play sẽ được gán tại ví trí TRÁI TRÊN 112,182 (zorder không thèm quan tâm)
và nếu nút này cần hiển thị n trạng thái thì bạn định nghĩa n trạng thái của nó.
trạng thái sẽ luân phiên thay đổi sau mỗi lần nhấn.
với ví dụ trên thì nút "Play" sẽ có hai trạng thái - trạng thái Paused sẽ hiện hình "Play" và nếu chọt thì thực thi (cmd) là Play và đổi sang trạng thái Playing có hình là Pause (đã được MAP ở trên) và nếu chọt thì thực thi cmd = Pause.
Chú ý: id Bạn có thể thoải mái đặt tên - miễn sao dễ nhớ cho riêng bạn.
Còn cmd thì bắt buộc phải ghi đúng các lệnh mà walkman đã định nghĩ sẵn (danh sách các lệnh này mình không có - đành phải tham khảo mấy cái file xml của các cao thủ đi trước).
Kế đến là <label ..... /> tương tự y như button nhưng không có chọt để chạy tức không có cmd
Phần cuối cùng là K e y <k e y .... / k e y>
các bạn có thể định nghĩa thoải mái, nhấn phím nào thì sẽ thực thi lệnh (cmd) nào tùy thích.
Lấy ví dụ:
<k e y id="Space" code="#0005" cmd="PlayPause" />
Định nghĩa phím space bar khi nhấn sẽ chạy lệnh PlayPause. Trong đó code là số thập lục phân (hex) trong bảng mã unicode của phím.
.....
Phần trên, chỉ nói về map, button, k e y cơ bản nhất, để cho bất kỳ ai cũng có thể bắt đầu thực hiện và hoàn toàn có thể thực hiện một skin hoàn chỉnh chỉ với những cái cơ bản đó.
Nếu thực hiện trên một xml đã có.. có dòng nào khác cái cơ bản trên thì nếu không hiểu bạn cứ để yên (sau này tìm hiểu kỹ sau), hoặc xóa bỏ (nếu không cần).
Khá là dễ phải không các bạn...
Nếu không thì đành phải cầu cứu và hy vọng các bạn trong giới võ lâm cao thủ CongVoi, Caohieu88, P3600i, Tommynguyen1961, AT007, Son_Do, v.v.... Thực hiện lại bài viết này bằng hình ảnh có mình họa và bổ sung nhiều cái còn thiếu.
(Bận quá.... nên hơi luộm thuộm và thiếu hình ảnh mong các bạn thông cảm.)
CHÚ Ý:
Walkman2.0 được xây dựng không cho P990i nên thỉnh thoảng sẽ bị mất phần đầu (nguyên do là P990i đặc biệt có cái phần tiêu đề có “tam giác ngược” để xổ menu – cái phần này các dòng W và P1i không có), do vậy phần này sẽ làm cho walkman2.0 hơi bị “lúng túng” khi hiển thị….
Theo kinh nghiệm của mình trên P990i, walkman2.0 có 3 loại hiển thị:
1. Mất phần đầu – thường thấy khi mới mở walkman2.0 (màn hình bị đẩy xuống dưới do đó mất đi các nút ở phần dưới)
2. Hiện lên được phần đầu (phần tiêu đề và “tam giác ngược” để xổ menu) – ngay sau khi bạn tăng giảm volumn hoặc khóa/ mở khóa (màn hình bị đẩy xuống dưới giống 1)
3. Full screen – đầy màn hình đúng chuẩn của dòng w (không có phần tiêu đề) – khi bạn lăn con lăn để chọn bài. (màn hình đẩy lên trên và hiển thị đầy đủ).
Do vậy bạn thiết kế sau cho mọi nút của bạn không nằm phần phía dưới là ổn cho P990i.
Chúc các bạn thành công.=D>=D>=D>
