• Страница 1 из 1
  • 1
Создание Анимированного Бэкграунда в CSS
Olegan Дата: Среда, 18.04.2012, 16:26 | Сообщение # 1
  • Проверенный
  • Сообщений: 680
  • Репутация:
    19
  • Статус: Offline

При создании анимационного бэкграунда я использую всего 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) и жмем открыть. Появится следующее окно:

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

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 я не заметил.

На этом всё. smile
 
  • Страница 1 из 1
  • 1
Поиск: