DZ PROJECT
Would you like to react to this message? Create an account in a few clicks or log in to continue.



 
HomeSearchLatest imagesRegisterLog in

 

 [TUT] OM 6 SKIN EDITING

Go down 
AuthorMessage
dZ
Admin
dZ


Posts : 44
Join date : 2011-01-23
Age : 35
Location : Outerspace

[TUT] OM 6 SKIN EDITING Empty
PostSubject: [TUT] OM 6 SKIN EDITING   [TUT] OM 6 SKIN EDITING EmptyThu Jul 07, 2011 6:25 pm

Ahmmm . . . Ok , so dahil sa isa ko sa pinakatamad na modder , tinamad na akong gumawa ng sarili kong tutorial bout sa pagedit ng skin ng opera mini 6, kaya copy na lang natin yung kay clipper cloude ng sb, here it is :p

Una gusto ko munang magpasalamat sa mga sumusunod..
sa kapatid kong si ayahko na kasama ko sa pag-aaral ng hex location ng mga png image at sa S60 Help Team Moders (S60HTM) sa walang sawang suporta sa mga thread at mga kaalamang ibinabahagi ko sa Symbianize
Sana poh kung ilalabas nio ang tuitorial na ito ay isama nio na rin ang mga taong nasa likod nito..
.
Sa ibang mga member isang hit ng thanks lang poh pwede nang pampatanggal pagod.. Kahit poh hit and run lang, hehehe... wag nio naman katamaran o ipagdamot.. Give and take ika nga......
.
Ang tuitorial na ito ay para lamang sa pag embed ng image o pagpapalit ng image sa operamini 6 skin file (skin-hqvga-multi.rsc), wala po itong kinalaman sa pagdrawing ng mga images, o pagdedesign.. My only concern is to teach you how can you put your own design or image into skin-hqvga-multi.rsc file.. So kailangan na may kaalaman kana sa pagedit ng image by your own..
.
Ang skin-hqvga-multi.rsc ay ang main skin ng om6, meron itong 70 images(in png format) sa loob, ang bawat images ay may kanya kanyang papel na ginagampanan sa skin ng om6.. Ngunit sa kasamaan palad iilan lamang ang alam ko ang papel, ngunit sapat na ang mga yon para mapaganda nio ang inyong om6, pero lahat po ng 70 images na iyon ay maeedit natin ayon sa gusto nio basta intindihin lamang ninyong mabuti
.
May iaattach ako package ng mga images na nasa loob ng skin-hqvga-multi.rsc file, para hindi na kayo mahirapan kumuha o maglabas pa ng mga na nasa loob nun.. Bali ang gagawin nio nalang ay iedit ang mga image na yun ayon sa gusto niong kulay at design..
.
Tulad ng sinabi ko ang bawat image ay may kanya kanyang papel.. So eto ang mga description nila.. Ipopost ko ayon sa pagkakasunod sunod ng mga images.. Nasa package po lahat ng mga image na yan.. Ganian din sila nakaarrange sa loob ng skin-hqvga-multi.rsc file
............................................
01.png
url and search bar
............................................
02.png
............................................
03.png
............................................
04.png
url & search highlight bar
............................................
05.png
javascript msg box
............................................
06.png
javascript separator line

............................................
07.png
function bar
............................................
08.png
javascript selectable button
............................................
09.png
javascript unselectable button
............................................
10.png
javascript highlighted button
............................................
11.png
dialog box
............................................
12.png
dialog item highlight bar
............................................
13.png
zoom lens in desktop view
............................................
14.png
............................................
15.png
dialog box seperator line
............................................
16.png
download progress box
............................................
17.png
download progress bar
............................................
18.png
download bar pause mode
............................................
19.png
url box
............................................
20.png
tex box, when full up selection/item is active

............................................
21.png
tex box, when full down selection/item is active
............................................
22.png
pull up selection box
(ganito din yun sa selection kapag namimili ng location for download)

............................................
23.png
fulldown selection box
............................................
24.png
url & search highlight bar when fulldown item is active
............................................
25.png
............................................
26.png
background in Find in page

............................................
27.png
makikita nyo to sa Find in Page textbox..27.png appears if no words/phrases are found
............................................
28.png
makikita nyo to sa Find in Page textbox.. 28.png appears if all the searched words/phrases are found
............................................
29.png
color of all header

............................................
30.png
full down menu highlight
............................................
31.png
............................................
32.png
............................................
33.png
............................................
34.png
............................................
35.png
title & url bar seperator line
............................................
36.png
title bar in option area
............................................
37.png
page editor line, line separator between each row in text and selection
............................................
[url=http://
symbianize.com/showpost.php?p=6303350&postcount=173]38.png
Item highlight when dialog box is active[/url]
............................................
39.png
............................................
40.png
............................................
41.png
............................................
42.png
............................................
43.png
editor up scroll button
............................................
44.png
editor down scroll button
............................................
45.png
horizontal scroll bar (page and item selection)
............................................
46.png
editor midle scroll bar design
............................................
47.png
vertical scroll bar (page and item selection)

............................................
48.png
editor scroll bar
............................................
49.png
search url box
............................................
50.png
search url box when selecting seach engine
............................................
51.png
............................................
52.png
shortcut box
............................................
53.png
highlight on function bar when keypress
............................................
54.png
speed dial highlight
............................................
55.png
............................................
56.png
Speed Dial top and botton background (dapat transparent ang mga ito para makita yung speed dials natin)

............................................
57.png
first and last speed dial highlight on loading state.
(nakikita lang sya kapag
napress yung first and last speed dial) ..partial nga lang
sya.. Parang yung 56.png
............................................
58.png
Speed dials midle background (dapat transparent ang mga ito para makita yung speed dials natin)

............................................
59.png
2-8 speed dial highlight on loading state. (nakikita lang sya kapag napress yung 2 to 8 speed dial) ..partial nga lang
sya.. Parang yung 58.png
............................................
60.png
............................................
61.png
Inactive window tab

............................................
62.png
window tab highlight bar
............................................
63.png
active window tab
............................................
64.png
window tab background
............................................
65.png
title bar
............................................
66.png
............................................
67.png
settings small boxes
............................................
68.png
fulldown menu box
............................................
69.png
............................................
70.png
web page text editor box
............................................
.
Pasensya na yan palang ang nakita ko eventhough alam ko iedit lahat ng yan, diko makita changes sa iba, kaya walang description yung iba.. Iuupdate ko nalang kapag may natuklasang bago.. Pero nandian na ang mga main skin ng om6..
.
I want to give credit sa mga taong tumulong para maupdate ko ang mga png list description
.
Ayahko
Besafe
Jinchuurik1817
Joel24manalo
Tuya
Khin
.
(cont. Cp lang at Om mod lang kasi naghahang text editor ng cp ko sa mahabang txt..)
.



---


.......................................................
Embedding images
.......................................................
Kapag naedit nio na ang mga images na gusto niong palitan umpisahan nio nang iembed o palitan ang nasa loob ng skin-hqvga-multi.rsc file..
.
Unahin nating palitan ang 1st image sa loob ng skin-hqvga-multi.rsc file which is the url & search bar ng om6..

.Open class editor
[TUT] OM 6 SKIN EDITING Om6skin01
.
Open your edited image na ipapalit sa unang image na nasa loob ng skin-hqvga-multi.rsc file
[TUT] OM 6 SKIN EDITING Om6skin02
[TUT] OM 6 SKIN EDITING Om6skin03
.
.Press * para magchange ang editor sa highlight mode..
Malalaman nio na nakahighlight mode kayo kapag nakalitaw ang red status bar sa ilalim
.
Normal mode
[TUT] OM 6 SKIN EDITING Om6skin03
Highlight mode
[TUT] OM 6 SKIN EDITING Om6skin04
.
Note : ang navigation ng class editor ay ganito
up = 2
down = 8
left = 4 or left arrow
right = 6 or right arrow
page up = up arrow
page down = down arrow
.
.Now ihighlight nio lahat..
[TUT] OM 6 SKIN EDITING Om6skin05
.
.Kapag nakahighlight na lahat, makikita nio sa status bar ang bytes ng inyong image
[TUT] OM 6 SKIN EDITING Om6skin06
.
Write down nio yung bytes or tandaan nio nalang.. Dahil icoconvert natin yan sa hex later..
.
After nio makuha ang bytes, press center key habang nakahighlight..
.
May lalabas na option sa ilalim.. (note: kapag walang lumabas na option sa ilalim, just press anykey para lumabas..) then select copy
[TUT] OM 6 SKIN EDITING Om6skin07
.
After maselect ang copy babalik na ang editor sa normal mode..
[TUT] OM 6 SKIN EDITING Om6skin03
.
Ngayon nasa clipboard na ng phone ang contents ng file dahil nacopy na.. Pwede na natin siya iinsert sa skin-hqvga-multi.rsc file. But before that minimize nio muna ang class editor..
.
Icoconvert muna natin yung bytes na niwrite down natin
.
Open cCalc
Now ienter nio yung bytes na niwrite down nio kanina..
[TUT] OM 6 SKIN EDITING Om6skin20
.
After nio maenter ang bytes press pencil key 3 times para mapalitan ang function ng mga keypad..
[TUT] OM 6 SKIN EDITING Om6skin21
.
Kung mapapansin nio may HEX na sa keypad.... Press 0 para maging hex yung inenter niong bytes..
[TUT] OM 6 SKIN EDITING Om6skin22
.
Tandaan nio yung output hex or iwrite down nio.. Yan ang ipapalit natin sa hex value ng 1st image mamaya..
Now you can exit cCalc
(you can use any converter na alam nio para maconvert ang decimal to hex)
.
.Now balikan natin yung class editor
.
.Now press right navigation key, at iopen naman natin ang skin-hqvga-multi.rsc file
[TUT] OM 6 SKIN EDITING Om6skin08
[TUT] OM 6 SKIN EDITING Om6skin09
.
.Since na ang 1st image ang ieedit natin, kailangan nating mailocate ang kinalalagyan nito..
.
Press 9(shorcut for search)
Then lagay nio sa text ay PNG all in capital letters..
[TUT] OM 6 SKIN EDITING Om6skin10
.
Then press option and select ok
[TUT] OM 6 SKIN EDITING Om6skin11
.
Pagbalik nia sa editor hindi sya pupunta sa png na sinearch natin.. Just press any key para marefresh.. And pupunta na sya sa 1st png..
[TUT] OM 6 SKIN EDITING Om6skin12
.
Now lagay nio yung cursor sa character before ang word na PNG.. Yung square sa unahan ng PNG
[TUT] OM 6 SKIN EDITING Om6skin13
.
Now press * para maging highlight mode ulit tayo
[TUT] OM 6 SKIN EDITING Om6skin14
.
Now ihighlight natin pababa by pressing 8 repeatedly and 6 to move it right, hanggang sa makita nio yung word na END.. Ihighlight nio hanggang END[]B'[]
(note: [] = means yung square na character)
[TUT] OM 6 SKIN EDITING Om6skin15
.
Habang nakahighlight ang 1st image, press center key, mag aapear ulit yung option sa ilalim,(pag di nagappear yung option just press arrow keys) then select insert..
[TUT] OM 6 SKIN EDITING Om6skin16
.
That time napalitan na natin yung 1st image sa skin-hqvga-multi.rsc,
.
Ngayon naman kailangan nating palitan yung hex value nung 1st image..
.
After nio mainsert yung image, just press 0, para lumabas ang mga hex..
[TUT] OM 6 SKIN EDITING Om6skin17
.
Pagnakalabas na mga hex, ilolocate na natin yung hex value ng 1st image..
.
Press 7 (shortcut for goto address)..
Delete nio yung hex address na nakalagay at iEnter nio 771 and press ok
(note: yung 771 ang address ng hex value ng 1st image)
[TUT] OM 6 SKIN EDITING Om6skin18
.
Di sya agad pupunta sa address na nilagay natin.. Just press anykey.. At pupunta na sya sa address..
[TUT] OM 6 SKIN EDITING Om6skin19
.
Iedit nio yung 58 sa hex dun sa pinuntahan niang address.. Yun ang hex value ng 1st image.. Ang ipapalit nio ay yung bytes na niwrite down nio kanina.. Remember
.
Now para maedit nio ang hex na 58, itapat lang ang cursor sa 58 and press 3, at ienter ang hex na niwrite down natin and press ok
[TUT] OM 6 SKIN EDITING Om6skin23
.
Pagbalik sa editor hindi pa sya napapalitan agad, just refresh by pressing any key
[TUT] OM 6 SKIN EDITING Om6skin24
.
Now press left navigation and save.. Wait until lumabas yung overwrite,
.
Now pwede nio na itest kung ok ang ginawa nio..
..
If everythings ok... Move na tayo sa next images..
.
(cont...)



---

Ngayon naman ay papalitan natin ang ibang image
.
Mamili kayo ng next image na gusto nio palitan..
.
Lets say yung pang 4th image ang papalitan natin which is the url & search highlight..
.
Same procedure.. But this time bibilangin natin ang png image..
.
.Again open your class editor..
.
.Open nio yung edited image na ipapalit nio sa 4th image ng skin-hqvga-multi.rsc.
.
.Do the same thing na ginawa natin sa taas.. (Kunin nio yung bytes at iconvert sa hex like what we did before. Pati yung pagcopy ng content ng file..)
.
.After nio magawa ulit yung pagkuha ng hex at pagcopy ng contents ng image
.
.Open nio ulit yung skin-hqvga-multi.rsc
.
.Now press 9 ulit para isearch ang png.
.Write nio sa Search yung PNG all in capital letters like what we did before...
.Pagnapunta na sya sa 1st png, start counting the png..
.
.Pagtapat ng search sa 1st png, count it 1,
then press # (shortcut for next search)
.Pupunta na siya sa 2nd png, count it, 2
.Press # again, count it 3
.Once again press #, thats the 4th png.. Yun na ang ieedit natin..
.
.Highlight ulit natin yung png hanggang sa end tulad ng ginawa natin sa 1st png.. Then hit center key and select insert..
.
.Ngayon napalitan na natin yung 4th image..
.
.Ngayon papalitan naman natin yung hex value ng 4th image..
.
.Press 0 again para lumabas ang mga hex,
.
.Press 7 (goto address)
.At ienter natin ang address ng hex value ng 4th image
.
.807 po ang ienter nating address.. Yung po ang location ng hex value ng 4th image..
.B4 po ang hex na ieedit natin.. Ipalit natin yung nakuha nion hex ng 4th image nio..
.
.Basta ulitin nio lang ang tuitorial natin sa 1st image.. Same lang poh lahat.. Hanggang 70th image..
.
.Magkakaiba lamang ang hex value ng bawat image at ang location ng hex value..
.
Hindi naman pwedeng isa isahin ko lahat hanggang 70th image..
.
Ipopost ko nalang ang mga hex value nila at ang address..
...
Images = yung image na papalitan nio
.
Hex Value = ito yung hex value na papalitan nio ng bagong hex nakinonvert sa cCalc
.
Location = ito yung address na isesearch nio, ito yung address ng hex value ng image na ieedit nio
.
Images Hex Value Location
........................................................
01.png -------- 58 --------- 771
02.png -------- D2 -------- 777
03.png -------- F8 -------- 783
04.png -------- B4 -------- 807
05.png ------ 01 CE ------ 830
06.png -------- 4E -------- 837
07.png -------- 4D -------- 855
08.png -------- AA -------- 909
09.png -------- A4 -------- 915
10.png -------- FB -------- 921
11.png ------- 01 87 ------ 938
12.png -------- 4D -------- 945
13.png -------- E6 -------- 969
14.png -------- 51 --------- 981
15.png -------- 4E -------- 993
16.png -------- A8 -------- 1095
17.png -------- B7 -------- 1101
18.png -------- AA -------- 1107
19.png -------- EC -------- 1119
20.png -------- B2 -------- 1125
21.png -------- CA -------- 1131
22.png ----- 02 08 ------ 1136
23.png ----- 02 49 ------ 1142
24.png -------- EC ------- 1149
25.png -------- F9 ------- 1155
26.png -------- 54 ------- 1197
27.png -------- FF ------- 1203
28.png ----- 01 04 ------- 1208
29.png -------- 59 ------- 1245
30.png -------- 5E ------- 1263
31.png ----- 01 5D ------- 1268
32.png ------ 01 B4 ------ 1274
33.png -------- 48 ------- 1281
34.png -------- 4F ------- 1371
35.png -------- 47 ------- 1377
36.png -------- 48 ------- 1425
37.png -------- 4C ------- 1431
38.png -------- 53 ------- 1437
39.png -------- 5E ------- 1467
40.png -------- 63 ------- 1473
41.png -------- 4D -------- 1509
42.png -------- 4E -------- 1515
43.png ------ 01 58 ------ 1580
44.png ------ 01 44 ------ 1586
45.png -------- 85 -------- 1593
46.png -------- B2 -------- 1599
47.png -------- 9B -------- 1605
48.png ------ 01 35 ------ 1610
49.png ------ 01 83 ------ 1616
50.png ------ 01 AF ------ 1622
51.png ------ 02 19 ------- 1628
52.png -------- AB -------- 1713
53.png -------- 81 -------- 1725
54.png -------- 4D -------- 1743
55.png -------- F3 -------- 1755
56.png -------- A6 -------- 1761
57.png -------- 5B -------- 1767
58.png -------- 53 -------- 1773
59.png -------- 52 -------- 1779
60.png -------- EA -------- 2037
61.png -------- DB -------- 2049
62.png ----- 01 90 ------- 2054
63.png -------- E0 -------- 2061
64.png -------- 50 -------- 2067
65.png -------- CA -------- 2085
66.png -------- 4F -------- 2103
67.png -------- 6F -------- 2139
68.png ------ 01 24 ------ 2186
69.png -------- E0 -------- 2241
70.png ------ 01 55 ------ 2246
........................................................
Yan po mga hex value at location..
.
Basta tandaan lang po ang procedure.. Parepareho lang from 1st image to 70th images..
.
Basta bibilangin nio lang kung pang ilan png na kayo..
.
Sana naunawaan nio ang atin tuitor..
.



ayon , credits kay clipper cloude , adioz Smile

Back to top Go down
http://dz-project.betaboard.net
dZ
Admin
dZ


Posts : 44
Join date : 2011-01-23
Age : 35
Location : Outerspace

[TUT] OM 6 SKIN EDITING Empty
PostSubject: Re: [TUT] OM 6 SKIN EDITING   [TUT] OM 6 SKIN EDITING EmptyThu Jul 07, 2011 9:45 pm

DOWNLOAD ALL OF THIS FILES

CALC4M



CLASS EDITOR



IMAGES.ZIP Astig
Back to top Go down
http://dz-project.betaboard.net
 
[TUT] OM 6 SKIN EDITING
Back to top 
Page 1 of 1
 Similar topics
-
» OPERA MINI 5 . 1 SPLASH EDITING
» OPERA MINI 4.2 SPLASH EDITING

Permissions in this forum:You cannot reply to topics in this forum
DZ PROJECT :: MOBILE APPLICATIONS :: MODDING TUTORIALS-
Jump to: