32 заметки с меткой анимация

Схема проезда с переключением путей

Для компании по ремонту АКПП нарисовал схему проезда с переключателем путей. В данном случае пришлось так поступить, потому что подъезд к объекту сложный, и вариантов слишком много. Стрелочки на вкладках помогают быстрее сориентироваться.

  • 1
  • 2
  • 3
  • 4
  • 5
  • След. →
  • Варшавское шоссе из центраВаршавское шоссе из центра
    Варшавское шоссе из областиВаршавское шоссе из области
    Каширское шоссе из областиКаширское шоссе из области
    Нахимовский проспектНахимовский проспект
    Коломенский проездКоломенский проезд

Схема проезда сделана на флеше с анимацией путей. Те, у кого нет флеша, видят статичные картинки, которые всё же можно переключать (реализовано по старинке, зато у всех работает: через html map rect). В ходе работы над схемой проезда мы совместно с заказчиком улучшили и саму страницу контактов.

Схема проезда для автосалона на шоссе Энтузиастов

Открывайте на весь экран:

Схема проезда для автосалонаСхема проезда для автосалона

Для этой схемы были нарисованы упрощённые машинки, которые хорошо смотрятся в микроразмере:

Машинки для схемыМашинки для схемы

Четыре направления — четыре машинки. Анимации на поворотах нет, машинка просто «переключается». Как в старинных компьютерных играх.

Анимация пути на схеме проезда

Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:

Нажмите для просмотра анимацииНажмите для просмотра анимации

В этой заметке я расскажу, как такое делается, но сначала небольшая предыстория.

Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:

Справа — как бы пунктирная линияСправа — как бы пунктирная линия

Что произойдёт на крутом повороте?

▼ Читать дальше

Баннер про семь чудес света

Встретился сегодня такой баннер:

Баннер EMSБаннер EMS

Однажды и я делал нечто похожее:

Деловой человек встречает 7 чудес света и при этом общается по телефону.

В этом флеш-ролике привлекают внимание 3 движения, в реальности не совместимых друг с другом: 3D-вращение шара, поворот чудес света и ходьба человека.

Чудеса света, кстати, векторные (использована автоматическая трассировка).

Баннеры для социальных сетей

У компании «Автодети» есть свои представительства в социальных сетях. Новости, видеоролики, информация об акциях и пр. — над этим ежедневно работают. Стандартные кнопочки соцсетей имеют невысокую кликабельность, поэтому главному сайту нужны баннеры.

В каждом баннере я постарался передать «дух» соцсети:

ТвиттерТвиттер
Канал на ЮтубеКанал на Ютубе
ВконтактеВконтакте
Яндекс.МаркетЯндекс.Маркет

По ссылкам — полезная информация для тех, кто заботится о детской безопасности на дорогах (заходите, подписывайтесь, читайте).

Заставка с 3D-логотипом

Трёхмерное вращение логотипа успешно выполнено — посмотреть — и теперь этот элемент используется в шапке сайта, а также в качестве заставки (screensaver) на офисных компьютерах:

Как создавалась схема проезда для spmet.ru

Путь до «Металл-ателье» не совсем прост, но нам удалось показать его доступно:

Нажмите для просмотра анимацииНажмите для просмотра анимации

Это прозрачная и контрастная схема — она в равной степени хорошо смотрится и на белом фоне (при распечатывании), и на сайте компании (там бежевый фон).

По желанию заказчика была подготовлена схема в PDF, её можно посылать по почте или печатать в высоком разрешении:

Векторная схема проезда в PDFВекторная схема проезда в PDF

Далее я расскажу и покажу, как создаётся схема.

▼ Читать дальше

Недорогие баннеры для сети mail.ru

Когда бюджет баннера скромный, можно сделать простой баннер в стиле сайта с появляющимся текстом:

▼ Читать дальше

3D-вращение во флеше

Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:

Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).

▼ Читать дальше

Баннеры 468х60 GIF

В некоторых случаях полезно пойти на компромисс и свести анимацию в баннерах к минимуму (3-5 меняющихся кадров, можно с эффектом перехода). Для этих целей хватает возможностей формата GIF:

Баннер для акции от «Гудвила»Баннер для акции от «Гудвила»
Баннер для «Автодетей» на синий фонБаннер для «Автодетей» на синий фон

▼ Читать дальше

Баннер «Лето скидок»

Горизонтальный скидочный баннер для шапки сайта mosershop.ru:

▼ Читать дальше

Сайт грузоперевозок «МК-Лидер»

mk-lider.ru

Главная страницаГлавная страница

▼ Читать дальше

Баннер для олимпиады ФТК

Текст к баннеру придумала моя сестра, а исполнение — моё:

Размер баннера: 230 на 150 пикселей. Расположение — на исходном сайте в левой колонке. Ссылка передаётся через переменную.

Карта поставок из других стран

Для сайта Rainbowproduction Co. требовалось сделать красивую карту поставок продукции из других стран.

Карта тянется до любого размера, слайд-шоу увеличивается при наведении курсора:

Карта поставок: кликните для просмотра флеш-версииКарта поставок: кликните для просмотра флеш-версии

▼ Читать дальше

Анимация радуги на флеше

Для сайта Rainbowproduction Co. нужна заставка на главную страницу: радуга, появляющаяся слева направо и озаряющая всё вокруг. Может меняться фон под радугой, а размер должен подстраиваться под экран пользователя.

Анимация радуги: кликните для просмотра флеш-версииАнимация радуги: кликните для просмотра флеш-версии

Новогодняя шапка сайта

Сисечный баннер в шапку сайта «Никерманн» под Новый год:

Баннер «Экономьте!»

Простой баннер в два кадра:

Здесь использован знакомый всем эффект а-ля PowerPoint, но созданный собственноручно (потому что готовые эффекты сильно увеличивают вес баннера).

Волны в тексте (анимация)

Как оживить «шапку» сайта, не затронув основную фотографию и текст?

Эффект волн вполне соответствует «неординарному подходу» и «нестандартным решениям».

Логотип выходит из воды

В шапке сайта нужно было добавить логотипу какой-нибудь прикольный эффект.

(Повтор по наведению.)

Баннер для банка

Небольшой горизонтальный баннер 200×80 пикселей:

Минибаннеры для «Автодетей»

Для сайта «Автодетей» придумано и нарисовано около 50 небольших баннеров. Формат GIF уходит в прошлое, но мы всё ещё используем его:

Реклама игрыРеклама игры
Полезные аксессуарыПолезные аксессуары
Загадочная программа обслуживанияЗагадочная программа обслуживания

▼ Читать дальше

Баннер для «Гудвила»

Идея в том, что всякие отчётности и проверки сильно нарушают спокойствие. Почему бы не поручить эти «проблемы» профессионалам?

Баннеры химического магазина

Горизонтальный баннер (соотношение 10 к 1):

Квадратный баннер:

Баннер агентства недвижимости

Баннер никуда не ведёт, так как у фирмы не было своего сайта. Поэтому крупно показаны телефоны и адрес. Всё это имеет смысл, если баннер заведомо располагается на подходящем сайте (например, этот баннер находился в шапке сайта района Строгино).

Движение в баннере иногда как будто ставится на «паузу»: это привлекает дополнительное внимание.

Анимация логотипа «Диаклаба»

Рядом с логотипом придумали девиз, который надо было как-то обыграть:

(повтор по наведению)

Флеш-баннеры ОФГП

Выкладываю баннеры для ОФГ «Перспектива». Они динамичные и минималистичные, формат — 200×300 точек:

Первый баннер, только в формате 260×160 точек:

Если будет продолжение серии, выложу сюда же.

Краш-тест

Данная флешка показывает, что произойдёт с непристёгнутым ребёнком при аварии:

А вот и полноэкранная версия краш-теста.

Баннер ресторана «Часть суши»

Баннер магазина «La Guitarra»

Стиль и персонаж были взяты из шапки сайта:

Шапка сайта La GuitarraШапка сайта La Guitarra

Баннер фотомастерской

Отправка СМС

Попробовал перепрошить свой старенький C45, заменив некоторые картинки на свои. Вот такую сделал анимацию отправки SMS-ки:

Бежит ёжик с сообщением по полю :)Бежит ёжик с сообщением по полю :)

Один раз мне удалось увидеть эту анимацию. А потом телефон «умер». Хорошо, что я сделал бэкап перед прошивкой!

Баннер для «Yappi Club’а»

Купола — это наше всё :)Купола — это наше всё :)
Заметки:← старее
Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017