Каталог:
Новости

Создание 3D Flash сайтов, которые работают - Airtight Interactive

  1. 3D Flash-ограничения
  2. взаимодействие
  3. Простота
  4. Время загрузки
  5. Время разработки
  6. Пример 3D-флеш-сайтов, которые работают
  7. Улица Фифа 3
  8. Lumina Live
  9. Карим Чехия

Кажется, что любой другой сайт на FWA использует 3D Flash в эти дни. 3D-эффекты отлично подходят для добавления элемента неожиданности на сайт, так как это все еще относительно новая техника. Я занимаюсь созданием 3D-движков с момента создания Director 5 дней, так что приятно видеть, что 3D наконец-то появился на мейнстриме.

В этой статье я опишу некоторые технические ограничения, которые необходимо учитывать при создании сайтов 3D Flash, а затем я приведу примеры недавних сайтов, которые правильно работают с 3D.

Я большой сторонник проектирования в рамках технических ограничений. Работать с технологией, а не бороться с ней. Некоторые из самых красивых дизайнов выполнены в статическом черно-белом цвете. Охватывающие ограничения могут на самом деле вдохновлять дизайнеров и приводить к инновационным решениям ,

3D Flash-ограничения

Ответная реакция

Для 3D-сайтов важно поддерживать частоту кадров (не менее 20 кадров в секунду). В противном случае ваша анимация будет нервной, а отзывчивость пострадает. Самый простой способ увеличить частоту кадров - уменьшить активную трехмерную область (по размеру в пикселях). Другие варианты увеличения производительности:

  • Уменьшите количество 3D объектов
  • Используйте 3D-панели с растровыми текстурами поверх 3D-моделей
  • Использовать 2D-спрайты над 3D-объектами
  • Используйте текстуры плоского цвета поверх растровых текстур
  • Используйте неточные растровые текстуры поверх точных растровых текстур

взаимодействие

Если вы столкнулись с проблемой использования 3D-движка, вам нужно сделать его интерактивным. Воспроизведение стандартных анимаций по нажатию кнопки не дает никаких преимуществ по сравнению с предварительно визуализированной видео-анимацией, которая может быть дешевле в производстве и может выглядеть лучше (см. пример здесь ). Один из способов обеспечить приятное погружение в 3D - это слегка перемещать камеру при движении мыши (иногда это называется «мышиный взгляд»). Это приблизительно соответствует тому, как выглядит мир, когда мы перемещаем голову. Также важно, чтобы движение и движение камеры были простыми. Слишком много полетов вокруг может вызвать замешательство и даже тошноту.

Простота

Сложные, реалистичные трехмерные среды находятся за пределами возможностей современных поколений движков Flash 3D. Часто лучше добавить несколько простых 3D-элементов в другой 2D-сайт. Например, перевернуть страницу 3D (нажмите кнопку «Flash94 CMS»). здесь для примера ). Большим источником вдохновения для этого типа дизайна является дизайн телевизионного движения. Телевизионные объявления часто используют тонкую 3D-анимацию на плоских макетах.

Время загрузки

Сам движок 3D обычно ~ 100к. Тогда у вас есть 3D-модели и текстуры, которые могут быть большими. Чтобы избежать раздувания файлов, используйте простые или программно сгенерированные формы и простые текстуры. Одна хитрость заключается в отображении некоторой простой трехмерной геометрии после загрузки движка и до загрузки остальных моделей и текстур.

Время разработки

Создание 3D-сайта обычно занимает как минимум вдвое больше времени, чем создание эквивалентного 2D-сайта, в зависимости от сложности 3D-элементов. При создании 3D Flash сайта важно повторять его рано и часто. Часто 3D-сайты могут быть непригодны из-за неправильного размещения камеры или не интуитивно понятного управления. Крайне важно получить ранние «руки» с прототипом, чтобы улучшить взаимодействие.

Пример 3D-флеш-сайтов, которые работают

Эко Зоопарк

Эко Зоопарк

Вероятно, это самая приятная 3D-флеш-работа в Интернете (посмотрите всплывающие книги). Невероятное внимание к деталям, включая размытие глубины резкости. Использует трехмерную область фиксированного размера и Бумага Марио стиль самолетов над настоящими 3D моделями. Единственный недостаток в том, что, поскольку движение камеры происходит при перетаскивании мышью, вы не ощущаете 3D, пока не начнете перемещаться. Использование собственного движка, созданного Roxik кто делает невероятная 3D работа из Японии.

Улица Фифа 3

Улица Фифа 3

Комбинирует простые трехмерные плоскости с предварительно визуализированными двумерными спрайтами. Использует 2D меню наложения. Фиксированный размер, центрированная трехмерная область. Тонкий мышиный взгляд дает ощущение 3D, не жертвуя удобством использования. Построен В-Reel с помощью Away3D ,

Lumina Live

Lumina Live

Простой, но эффективный. Содержит несколько случайно расположенных плоскостей, которые образуют пиксели на плоскости. Это напоминает один из первые демонстрации papervision , От Кило Студио ,

Карим Чехия

Карим Чехия

Использует простые 3D-переходы и плоские текстурированные плоскости. Хороший поворот на сайте классического портфолио. От Филипп Рой , с помощью Papervision ,

Если вы знаете какие-либо другие примеры отличных 3D Flash Flash-сайтов, пожалуйста, поделитесь ими в комментариях.

Похожие

Топ 21 лучших стилей бороды и лучшее для вас
... работают), такие как моржовые усы плюс щетина (также известная как борода) . Еще один популярный гибридный стиль - Scruffy Goat , который начинает с того места, где остановилась козлиная бородка в дни ее славы в 1990-х годах, поднимая ее на другой уровень. Это большие усы и козлиная бородка, как у круглой бороды, но при этом