45 заметок с меткой флэш

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

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

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

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

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

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

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

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

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

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

Схема проезда до автосалона на Кусковской

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

Защита от копирования во флеше

В раскрасках на ejonok.ru многое сделано вручную. Поэтому хотелось максимально защитить свои труды. Известно, что любой элемент из флеш-приложения можно вытащить (с помощью специальных программ). Также известно, что в интернете воруют обычно то, что плохо лежит. Поэтому эффективно работают самодельные методы защиты, незнакомые потенциальному вору.

Разделяем ресурсы

Раньше раскраску можно было скачать и запустить на компьютере «как есть», теперь — нельзя. Одна из причин кроется в разделении флешки на две части: оболочка (интерфейс) + подгружаемый рисунок, доступный только в интернете.

Проверка домена

Оболочка проверяет адрес своего расположения (ejonok.ru) и загружает рисунок. Если запустить оболочку на своём компе или на другом сайте, мы увидим лишь белый экран.

Саму оболочку можно «распотрошить», вытащить оттуда всю графику (кнопочки, плашечки) и скрипты. Кнопочки вряд ли кому-то нужны (есть готовые клипарты), а вот код полезен, потому что в нём зашиты все секреты. Если код изменить до неузнаваемости обфускатором, то разобраться в нём будет очень тяжело.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цветная карта округов РФ

Очередная карта России с округами. При наведении выводится подсказка, по клику — переход в нужный раздел.

Цветная карта округов РФЦветная карта округов РФ

Цвета округов легко меняются (это может сделать сам заказчик). Карта векторная → будет отлично смотреться и в небольшом баннере, и на полном экране.

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

Чёрная схема проезда к IMPERIAL TUNING

Стоило мне обмолвиться о схеме проезда на чёрном фоне, буквально сразу же выпала возможность её нарисовать. Сайт imperialtuning.ru выполнен в чёрных тонах, и схема ему соответствует:

По клику — детальная флеш-версия на весь экранПо клику — детальная флеш-версия на весь экран

Некоторые подписи на схеме не идеально контрастируют с фоном, так как пришлось искать компромисс, чтобы схема хорошо смотрелась и на чёрном фоне сайта, и на белой бумаге в свежераспечатанном виде :)

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

Планы посёлков для mobilstroy.ru

Красивые двухмерные планы посёлка показывают расположение основных объектов, очерёдность застройки, наличие участков для продажи и многое другое. В данном случае на плане представлены картинки-фотки «как это будет»:

План посёлка с превьюшкамиПлан посёлка с превьюшками

На участки можно наводить или кликать мышкой для получения дополнительной информации. Цвет подсказки совпадает с цветом участка (маркировкой в зависимости от статуса участка):

Цветные подсказки к участкамЦветные подсказки к участкам

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

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

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

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

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

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

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

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

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

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

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

Как мы выбирали кухню

В конце 2010 года в нашей молодой семье остро встал вопрос о приобретении новой кухни. Бюджет был около 100-150 тыс. рублей. Хотелось каких-то округлых форм, плюс надо было учесть несколько важных нюансов помещения.

Я быстренько набросал схему во флеше:

По клику откроется флеш-версия кухни на весь экранПо клику откроется флеш-версия кухни на весь экран

— после чего осталось подобрать цвет и идти в магазин. Мы выбрали вишнёвый блестящий оттенок.

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

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

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

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

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

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

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

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

Псевдообъёмные раскраски

Поиграть с раскрасками можно на сайте «Автодетей» (внизу страницы).

Во время подготовки новых раскрасок — автокресел — идея сделать их объёмными пришла как бы сама собой. Сразу вспомнились иллюстрации из инструкций к бытовой технике:

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

А если изобразить автокресло в таком же духе?

Фотография слева помогает понять, как направить градиентыФотография слева помогает понять, как направить градиенты

Осталось наложить такие чёрно-белые градиенты поверх обычных раскрасок, и нужный эффект будет достигнут (картинки кликабельны):

Автокресло 1Автокресло 2Автокресло 3

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

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

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

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

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

mk-lider.ru

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

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

Схема проезда к «Автодетям» на Вавилова

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

Если вы играли в NFS U1 или GTA SA, то вы знаете, что такое бронебойный трамвай :) Для остальных поясню: его невозможно остановить, притормозить или повредить, поэтому в него лучше не врезаться и не стоять у него на пути (для остальных машин действуют законы физики при столкновении, а для трамвая это реализовать, видимо, поленились).

Сейчас вы дочитали до этого места в тексте, прошло несколько секунд, а теперь посмотрите на схему и увидите прикол ;)

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

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

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

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

Схемы дачных посёлков

Интерактивная схема посёлка помогает лучше понять расположение участков:

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

Схема проезда к ЖБИП

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Схема месторождений

Простенькая схема (карта) месторождений:

Клик по любому активному объекту открывает соответствующий раздел сайта.

Игра «Таблица Менделеева»

Игра проверяет, насколько хорошо вы знаете расположение элементов в таблице Менделеева.

Сыграть можно на сайте xumuk.ru.

Нужно кликнуть по иттриюНужно кликнуть по иттрию

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

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

Строение атома для XuMuK.ru

Чтобы увидеть красоту, откройте полноэкранную версию, а потом подвиньте красную букву Е до нужного уровня, или покрутите колёсиком, или введите название элемента:

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

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

Схема проезда для netbara.ru

Новое слово в создании схем проезда: можно разворачивать на фуллскрин, приближать/удалять колёсиком мышки, двигать.

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

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

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

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

Химический редактор

Смотрим (на xumuk.ru):
редактор химических формул и описание сервиса.

Химический редактор (включена сетка)Химический редактор (включена сетка)

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

Схема проезда «Автодети-Юг»

Схема проезда «Автодети-Север»

Схема проезда к «Диаклабу»

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

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

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

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

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

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

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

Флеш-открытка на 8 марта

В ночь перед 8 марта подготовил подарок всем интернет-френдам:

Если у вас поддерживается флеш, нажмите на картинку, чтобы поигратьЕсли у вас поддерживается флеш, нажмите на картинку, чтобы поиграть

Игра шуточная и очень лёгкая: нужно собрать 5 одуванчиков, двигая смайла мышкой влево-вправо.

Суть игрушкиСуть игрушки

Отдельное спасибо группе Балаган Ltd. за музыкальное оформление.

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

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

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

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

Краш-тест

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

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

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

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

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

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

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

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