Создание скинов Поделиться Опции

[DeshFXs]

Постепенно тема стала местом обсуждения не самих скинов, а той их части, которые выводятся на дисплей с помощью Scalable Vector Graphics.
SVG в zn5. Где и что...
Дополнительные режимы отображения Главного и Подменю.
Анимация фона Главного меню и SVG-подменю.
Цвет и размер надписей в Главном и svg-Подменю. Размер и прозрачность софт-клавиш. Смотрим colors.css

Вот это должно помочь всем кто создает скины
1) .ini файлы скинов, подробное описание
2)

ini_files.rar   ( 47.5 килобайт ) Кол-во скачиваний: 872

3)

Making_skins.rar   ( 657.48 килобайт ) Кол-во скачиваний: 1328

Программное обеспечение для упаковки и распаковки файлов ICONRES:
MotoLinux iconres composer 1.1.1


Сообщение отредактировал AstaRoth - 5.4.2011, 8:29

[Karaban]

V!iT, Спасибо.
Все классно пашет, два файла : софт клавишы main_view.svg и softkeys.svg из поста №440
Желательно папки свои default и mainmenu удалить, а потом новые закачать,а не заменять их.

Сообщение отредактировал Karaban - 5.1.2010, 8:27

[TiM_22R]

Хотя уже не раз обсуждалось на страницах темы, решил ещё раз вернуться к colors.css
Итак, colors.css (таблица стилей) - аналог ini-файлов для элементов Главного и его svg-подменю.
В большинстве стоковых прошивок и только для загружаемых скинов он находится в /usr/data_resource/icon/colors.css. Для стоковых скинов, в зависимости от скина /usr/data_resource/skin/default*/.
Для примера прикрелён файл с некоторыми комментариями .
В качестве значения цвета можно использовать именованные значения (black, orange и т.д), а также код в шестнадцатеричной форме (#fff, #a1b2c3).
Если параметры в svg-коде и colors.css совпадают, то их значения берутся из colors.css. Т.е., если в svg стоит font-size="22", а в colors.css в соответствующем классе стоит font-size: 18; , то шрифт будет 18. Это правило справедливо для всех параметров. Кстати, многие параметры, общепринятые в svg в нашей реализации не работают, или работают со значениями "по умолчанию". Итак...

ЦВЕТА
fill - цвет шрифта или заливки замкнутой фигуры. По умолчанию (равнозначно отсутствию параметра) выводится чёрным цветом с прозрачностью 1. Если вам не нужна заливка, то лучше применить данный параметр со значением "none" {fill:none;}.
Дополнительный параметр fill-opacity - прозрачность шрифта/заливки. В качестве значения - любое число от 0 до 1 {fill-opacity: .75;}
stroke контур шрифта или замкнутой фигуры, линии. По умолчанию не выводится.
Доп.параметры те же, что и для fill, плюс stroke-width - толщина контура в пикс.
ШРИФТ
font-size - размер шрифта. {font-size: 16.5;}
font-style - курсив. normal/italic/oblique. По умолчанию (так же при отсутствии параметра) - normal. {font-style: italic;}
font-weight - "жирность" шрифта. Значения lighter(тонкий), normal (норма), bolder (утолщённый), bolder (толстый) или цифровые значения 100, 200, 300, 400, 500, 600, 700, 800, 900 {font-weight: 100;}
text-decoration оформление текста underline(подчёркивание), overline (надчёркивание), line-through (перечёркивание). По умолчанию - "none" {text-decoration: underline;}
Это далеко не полный список, но для основных параметров вполне достаточно.

СОФТ-КЛАВИШИ.
Многим не нравится тот факт, что высота клавиш в Главном меню отличается от высоты в других местах. Всё дело в main_view.svg, в котором выделяется область для клавиш. В начале была просто изменена высота клавиш в svg. Потом мне пришла идея привязать этот параметр к colors.css, что после небольших изменений в main_view удалось реализовать. Почти все main_view.svg, выкладываемые в этой теме поддерживают изменения высоты и прозрачности через colors.css Для этого нужно найти в нём (colors)

Код

****************************************************
Softkeys
AIA
PopUp Header & Midlet Screen header
****************************************************/
.textSftkySel { fill: #E5EFFA; font-weight: light; font-size: 19; opacity: .8;}
.textSftkyStd { fill: #FFF; font-weight: light; font-size: 20; height: 30;opacity: .8;}

Высота ВСЕХ клавиш одновременно зависит от значения параметра height в классе .textSftkyStd . А вот параметры шрифта можно устанавливать для НОРМАЛЬНАЯ/НАЖАТА по отдельности. Параметр opacity отвечает за прозрачность самих софт-клавиш (не текста!).
ВАЖНО! На стандартном (из коробки) main_view.svg это не работает. Не устанавливать height меньше 1 - пропадёт само меню ФУНКЦИИ.
Тем, кто не пользуется всякими часиками, анимацией фона и т.д., прикреплён "обычный" файл без всего этого, но с "нормальным" размером фона 240х320, а не 4шт 60х160 и с включённой регулировкой софт-клавиш.

main_view_std_1_.svg.rar   ( 2.06 килобайт ) Кол-во скачиваний: 303

colors.css.rar   ( 4.92 килобайт ) Кол-во скачиваний: 349

Сообщение отредактировал TiM_22R - 5.1.2010, 10:18

[TiM_22R]

Вариации на тему Списка list/iconList.svg

iconList.svg.rar   ( 7.03 килобайт ) Кол-во скачиваний: 356

[swansea]

Скажите пожалуйста как убрать СОФТ-КЛАВИШИ как на sim4.

прошивка Ево 0.6

Заранее спасибо

Сообщение отредактировал swansea - 9.1.2010, 13:34

[Entom]

Я убирал в main_view.svg. Причем их тогда не видно вообще.

[TiM_22R]

Сделав пару вариантов Сетки для скина Aero (см.тему Скинов), соорудил ещё один, "обычный". Из-за увеличившегося кол-ва элементов подтормаживает, особенно в Подменю...

[swansea]

Всем привет...

Тим спасибо за твои труды все что ты делаешь, все супер!

что отвечает за анимацию при в ходе в главное меню(иконки выезжают с разных сторон:)?и как сделать как на стоке просто без анимации?

заранее спасибо..

[TiM_22R]

Смотря в каком grid'е. В некоторых на эту анимацию "завязаны" ёще процессы. Если в последнем, то можно вот так:
................
<handler type="application/ecmascript" ev:event="focus"><![CDATA[
var nx = 0;
var nx = dm.flow.folderNavLevel;
document.getElementById("NavLevel").setFloatTrait("x", nx);
if (nx<1) {document.getElementById("enter").beginElement();
old=dm.view.tags.MainMenuList.focusedIndex;}
..........................................................
Удалить из кода выделенное.
А ещё можно поставить mainmenu.js без перезагрузки меню - не так давно выкладывал...

[TiM_22R]

По спецзаказу main_view.svg с часами без секунд, с одним фоном. Параметры шрифта часов привязаны к colors.css textMMGridStd. Если не нужна "тень", то в строке

Код

<textArea id="FullBg" width="174" transform="translate(33 7) scale(.98 1)" text-align="center" fill="#000" stroke="none" font-size="19" font-weight="100">TIM</textArea>

fill="none"

[TiM_22R]

Просто так, для пробы ;) Практически, "полноценный" скроллбар, т.е. включены "заглушки" на ползунок и дорожку.

[policarp]

Вот нечто подобное я и хотел! Огромнейшее Спасибо Тим!

[TiM_22R]

Ещё вариация Сетки 3х3 с "резиновым" курсором...

[Bogd@n]

примонтировал папку дефаулт из поста номер 241 ,теперь у меня в подменюшках 2 скролбара,как от одного избавится?)

[TiM_22R]

примонтировал папку дефаулт из поста номер 241 ,теперь у меня в подменюшках 2 скролбара,как от одного избавится?)

Там ещё на выбор два архива для Подменю. Один для режима Сетка по умолчанию при входе в Подменю, другой - Список соответственно. Без их монтирования будет дубляж скроллбара в Списке.

Добавлено позже (24.1.2010, 15:42):
В отличие от предыдущего файла, в котором "резиновый" курсор рисовался в самом файле, в этом используется картинка фона иконки по стандартному пути shadow_24bit.png . Какую хотите, такую и ставте....

[V!iT]

Тим.......круто сделал!!!!!!!
Но не забудь,для 3х4 сделать!

[Entom]

Tim, мог бы ты сделать сетку 3х3 с резиновым курсором, но без вращения и отражения иконки? И ту сетку, где встроен фон иконки курсора. Может тогда и значки больше.
А вообще говоря, то это лучшее, что я когда либо видел!

[TiM_22R]

Tim, мог бы ты сделать сетку 3х3 с резиновым курсором, но без вращения и отражения иконки?

Мне тоже как-то это вращение показалось несовсем к месту ;)

Независимо от исходного размера, shadow_24bit.png будет масштабирован в 74х74.


Сообщение отредактировал TiM_22R - 25.1.2010, 6:00

[Entom]

TiM_22R, классно. Спасибо.
Но вот опять просьба: может опустить иконки (меню без софт-клавиш)?

[TiM_22R]

TiM_22R, классно. Спасибо.
Но вот опять просьба: может опустить иконки (меню без софт-клавиш)?

Ох, ребята, ребята! :)

[Entom]

Ой, спасибо огромное!

[TiM_22R]

Ой, спасибо огромное!

Пожалуйста! И что б уж закрыть (надеюсь) "резино-техническую" тему: 3x4 обычная и для без софт-клавиш.

[syberside]

Тим, ну ты просто мастер, опять всех порадовал

[TiM_22R]

Вобщем, не всё так, как хотелось бы ;) Почему-то не получилось патчи прописывать через JS, пришлось прописывать напрямую - 64 дорожки. Не знаю, стоило это того...

[policarp]

Не знаю, стоило это того...

Безусловно стоило!

[TiM_22R]

И всё-таки, к "резиновому" курсору пришлось вернуться - некоторые косяки радражали. Добавил почти все возможные направления перемещения. Теперь вот даже Сетка с некратным 3 количеством приложений (4,5,7,11,13) обрабатывается более-менее нормально. ;) Сразу всё до кучи...
Тим

Сообщение отредактировал TiM_22R - 29.1.2010, 10:52

[Entom]

Вот теперь вообще супер!
Спасибо огромнейшее.

[policarp]

Тим,вот бы ещё анимацию курсора добавить...
в архиве раскадровка.

Moneta.rar   ( 98.81 килобайт ) Кол-во скачиваний: 120

Сообщение отредактировал policarp - 31.1.2010, 7:06

[TiM_22R]

Тим,вот бы ещё анимацию курсора добавить...

Я как-то уже это делал... Не уверен, что эта фича будет востребована ;) Из-за иконки анимация просмотривается плохо... Впрочем...
Сделал по аналогии с анимацией фона меню по таймеру. Только maxframe=20. Так как папку images всё равно целиком монтировать, то для избежания путаницы кадры поместить в отдельную папку cursor, а уже её - в images. Хотя расширение у картинок должно быть png - сами они могут быть в любом формате. Пробуйте... :)

[policarp]

Я как-то уже это делал...

Помню!

Не уверен, что эта фича будет востребована

Востребована!

Из-за иконки анимация просмотривается плохо...

Анимация ведь не обязательно эта? К тому же всё равно видно её или нет, общая картинка неплохая!
Правда я думал что будет "резиновый" эффект...
И в подменю буквы сверху налезли на цифры... Уже разобрался... Извини что напрягаю.

Сообщение отредактировал policarp - 1.2.2010, 19:39

[syberside]

тим, можешь подправить файлы меню от скина AplleCZ? там на 12 пунктов, но ккрасиво... хотелось бы где нить 30

[TiM_22R]

Анимация ведь не обязательно эта? К тому же всё равно видно её или нет, общая картинка неплохая!
Правда я думал что будет "резиновый" эффект...
И в подменю буквы сверху налезли на цифры... Извини что напрягаю.

А я специально отключил "растяжку" ;) Впрочем, это исправляется за пару минут. Открой "резиновый" 3х3. Начиная со строки
<use xlink:href="#iconHighlight">
<animateTransform id="MoveR" type="scale" values="1 1;2 1;1 1" ......................
..................
..................
</use>
Скопируй весь этот блок и вставь вместо аналогичного в 3х3 с анимацией курсора.
На счёт подменю не понял - поподробнее или скрин.

syberside, там стандартный grid, только на 12 иконок. Если другие мои варианты не устроют (от Аэро например), то переделаю какой-нибудь из своих ;)

Сообщение отредактировал TiM_22R - 1.2.2010, 3:31

[portapro]

Обьясните что я не так делаю ,пожалуйста.
скачал к примеру "grid_3x4_slider_aniCur.svg.rar"- дальше переименовал в main_view.svg ,
далее по фтп скинул по пути :/usr/SYSqtapp/xe/resource/skins/default/view/ с заменой,
закинул анимированный фон :/usr/SYSqtapp/xe/resource/skins/default/media/images/,
скачал в прикрепленных файлах Тима резинку и переименовал ее в shadow_24bit.png и закинул тоже по нужному пути,отсоеденился от фтп,рестарт тела и в меню у меня черный экран -сверху написано Мотофан.ру и две стрелочки справа с боку (все это белым цветом).
Кто может нормально обьяснить не для профи- очень прошу...чтобы не загромождать здесь можна в ПМ.

Сообщение отредактировал portapro - 1.2.2010, 14:38

[SanchoNT]

скачал к примеру "grid_3x4_slider_aniCur.svg.rar"- дальше переименовал в main_view.svg ,
далее по фтп скинул по пути :/usr/SYSqtapp/xe/resource/skins/default/view/ с заменой,

переименовывать надо в grid.svg ! ну и закидывать соответственно в другую папку, точный путь щас не скажу но думаю сам найдёшь где там grid.svg лежит

[syberside]

ну там оч красиво сделано... выбранный пункт и анимация. сделай какой тебе удобней плз, а я гляну [color=#FF6666] :) [/color]

[TiM_22R]

ну там оч красиво сделано. выбранный пункт и анимация. сделай какой тебе удобней плз, а я гляну :)

Ладно, но попозже ;)

Маленькие хитрости :)
"Самоцентрующийся" Список. Ко мне не раз обращались с просьбой подправить косяк в Списке, связанный с "обрезанием" нижней или верхней строки. Тут мне пришла запоздалая идея автоматизировать это дело. Задача оказалась простой, но невыполнимой :( Подставить вычисленное значение ширины строки с учётом размера шрифта и высоты софт-клавиш через JS во встроенную функцию прокрутки списка оказалось невозможным. НО! Нашёлся другой, более простой способ. Открываем list или iconList.svg, находим строку

Код

<rect id="bbox" visibility="hidden" width="100%" height="36"/>

height - высота строки. В стандартном файле там кажется стоит 36. Меняем его на 14.27%
ВСЁ. Теперь при изменении высоты софт-клавиш в colors.css (или их отсутствие) Список будет "отцентрован" по вертикали автоматически. Возможно, понадобится небольшая корректировка.
Тим.


Сообщение отредактировал TiM_22R - 3.2.2010, 5:39

[policarp]

Скопируй весь этот блок и вставь вместо аналогичного в 3х3 с анимацией курсора.

Только у меня ничего не работает? Вроде делаю по инструкции.
Но всё при всех попытках получаеться эта картинка.


Сообщение отредактировал policarp - 2.2.2010, 20:57

[TiM_22R]

policarp, видно операция по пересадке оказалась неудачной :) Держи.

syberside, я ничего не менял в плане внешности. Только работа с 1-50 приложениями.

[swansea]

Доброг времени суток.

Скажите пожалуйста как убрать софт клавиши на "рабочем столе" телефона, т.е сделать прозрачными?

так, как на Sim4



Заранее спасибо..

[TiM_22R]

Доброг времени суток.
Скажите пожалуйста как убрать софт клавиши на "рабочем столе" телефона, т.е сделать прозрачными?
так, как на Sim4 Заранее спасибо..

В папке скина в файле phone_p.ini или common.ini есть секции [ZSoftKey_Right], [ZSoftKey_Left]. В них параметр Bg_Opacity_Std =. Значение прозрачности от 0 до 100. 0 - полностью прозрачные. Два момента: клавиши будут прозрачными по всему телефону и в некоторых меню возможны наложения надписей.

[syberside]

а ка сделать, что бы фон меню и файлы .svg монтировались сами? как например на релоадед? поставил симбиоз, а в нем нет такой фичи...