Популярные

Наши Группы

Голосование

Чего не хватает на сайте?

Наша кнопка

Казахстанский Игровой Портал!

Друзья сайта

Реклама

Казахстанский Игровой Портал!

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

Добавил: Sunker97|19 окт 2011|Просмотров: 3 283|Комментариев: 1
  • Не нравится
  • +5
  • Нравится
Создание Анимированного Бэкграунда в 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) и жмем открыть. Появится следующее окно:

Создание Анимированного Бэкграунда в 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 я не заметил.

На этом всё. smile

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

Animated Backgrounds 45 frames
Animated Backgrounds 129 frames
Animated Backgrounds 97 frames
Animated Backgrounds 54 frames
Animated Backgrounds 165 frames
Animated Backgrounds 162 frames
Animated Backgrounds 153 frames
Animated Backgrounds 133 frames
Animated Backgrounds #1
ссылки для просмотра на youtube.com

Скачать 8 работ + 1 background

Установка:

Распакуйте архив и скопируйте файлы соблюдая структуру каталогов.
Для работы фона вам нужно перейти в Настройки > Видео > Дополнительно > Детализация текстур > высоко. (Данную настройку сделать ОБЯЗАТЕЛЬНО, иначе будет просто черный экран)

Автор: ReSource

Категория: Статьи Css
  • Нажмите на для того чтобы отправить Жалобу или уведомить Администратора о ошибке в новости.
№ 1 Написал: dahalek
19 января 2012 19:32
  • комментариев
  • публикаций
  • Статус: Пользователь offline
  • Должность: Юзер
  • |
  • На сайте с: 27.07.2011
    • Не нравится
    • 0
    • Нравится
Сохраните файл в предварительно созданную пупку pods
  • E-mail: dahalek@namba.kz
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Казахстанский Игровой Портал!