Видео
Мувики Видео обзоры Видео уроки Киберспорт Видео приколы
Файлы
Gui Карты Карты CSS Конфиги Конфиги CSS Демки Демки CSS

Создание анимированного бэкграунда в css

24-09-2011
ReSource
Создание анимированного бэкграунда в css


Привет, IlsAnny! При создании анимационного бэкграунда я использую всего 3 программы. Хотя можно обойтись двумя или даже одной. Всё зависит от того, из чего мы его будем делать, из какого материала. Я использую мувики по CSS, поэтому рассмотрю этот вариант.

Итак нам понадобятся:
VTFEdit - для конвертации наших скринов в vtf вормат
FormatFactory - для обрезания видео и конвертации mp4 в avi.
Free Video to JPG Converter - для конвертации avi в jpeg

Вы можете использовать любые свои программы.

Берем любой мувик. Выбираем понравившийся нам момент в пределах такой зависимости:

4-5 сек 1Гб установленной оперативной памяти
5-10 сек - 1,5-2 Гб установленной оперативной памяти

При необходимости можете увеличить файл подкачки.

Это не конечная зависимость. Выводы основаны на тестах с пятью компьютерами. Так что возможно, что 10сек мувик будет хорошо работать с 1Гб опер. Но хочу заметить, что вы на сможете создать бэкграунд в 10 сек с 1Гб установленной оперативной памяти.

Ограничение: 1Гб = 120-130 фреймов(5-6 сек) и не более. Файл подкачки не поможет.
Вернемся к сути.

1. Выбрали понравившийся момент, обрезали и конвертировали программой FormatFactory в avi.
(в ней вы быстро разберетесь)

2. Переходим ко второму этапу.. конвертируем avi в jpeg. Ставим галочку Извлечь > Всего > выбираем
количество фреймов-скринов для видео.
Я придерживаюсь следующего соотношения:
20-25 кадров в секунду. Т.е. для 4 секундного видео я выставляю значение в пределах 80-100 кадров. Далее переходим в папку со скринами у удаляем лишние, мешающие цикличности кадры.

3. Здесь будьте внимательны. Открываем VTFEdit, далее File > Import > Выделяем все наши скрины (Сtrl+A) и жмем открыть. Появится следующее окно:

Создание анимированного бэкграунда в css


У вас всё должно быть как на скрине:

General Options:
Normal format DXT5
Alpha format DXT5

Maximum Width 512
Maximum Height 512


Нажимаем Ok и идем пить чай Весь процесс конвертации может занять от 5 до 15 мин в среднем. Это так же зависит от характеристик вашего компьютера.

Все готово. Можете там же просмотреть результат. Всё выглядит сжато и просто отстойно. Не волнуйтесь так и должно быть. Сохраните файл в предварительно созданную пупку, под любым именем (у меня res.vtf).
\Counter-Strike Source\cstrike\materials\res
Откройте блокнотом файл res.vmt и впишите следующее:

Код:

"UnlitGeneric"

{
"$basetexture" "res/res"
"Proxies"
{
"AnimatedTexture"
{
"animatedtexturevar" "$basetexture"
"animatedtextureframenumvar" "$frame"
"animatedtextureframerate" "17"
}
}
}


Сохраните.

4. Перейдите в папку \Counter-Strike Source\cstrike\materials\console и откройте или создайте файлы background01.vmt и background01_widescreen.vmt очистите и впишите следующее:

Код:

"Unlittwotexture"
{
"$basetexture" "res/res"
"$selfillum" 1
"$additive" "1"
"$texture2" "res/texres"


"Proxies"
{
"AnimatedTexture"
{
"animatedtexturevar" "$basetexture"
"animatedtextureframenumvar" "$frame"
"animatedtextureframerate" 22
}


}
}


5. Переходим к созданию файла texres.vtf - это фоновая текстура, без нее ничего у нас не заработает.
Открываем фотошоп и создаем файл разрешением 1024х512 и заливаем всё цветом #f0f9f0.
Сохраняем под именем texres.png

6. Открываем VTFEdit, далее File > Import > выбираем файл texres.png и жмем открыть.
Здесь всё то же самое, что и на скрине выше, за исключением: Maximum Width 1024

Код:

General Options:
Normal format DXT5
Alpha format DXT5

Maximum Width 1024
Maximum Height 512


Сохраняем как texres.vtf в ту же папку где и наш анимированный бэкграунд. Файл texres.vmt нужно удалить.

Теперь можете запустить контру и лицезреть своё творение.
Бэкграунд будет отлично работать и на обычных и на широкоформатных мониторах.
Потерь качества при сжатии в VTF в 512х512 я не заметил.

На этом всё.

Можете скачать 8 работ от меня







(c) ReSource special for ilsanny.ru
Комментарии (37)


 
форма отправки комментария
Комментарии могут писать только авторизированные пользователи

Продвижение - Garin Studio