Создание Анимированного Бэкграунда в CSS

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