8

Простой и приятный эффект на флэше

Артём Анкудинов
14 августа 2008 года

Сегодня мы разберём простейший способ создания эффектной флэшки, демонстрирующей расфокусировку объектов при наведении на ту или иную область.

(Наводите курсор мыши на левую или правую машинку)

Такой эффект может быть полезен при создании промо-разделов какой-либо продукции. При наведении курсора мыши на некоторый объект, остальные объекты остаются вне фокуса, что позволяет сконцентрироваться на конкретном предмете.

В данном примере мы рассмотрим вариант с двумя объектами. Для этого необходимо подготовить изображения каждого объекта в двух положениях: чёткое изображение и размытое изображение. Передний объект мы сделаем в виде прозрачного 24-битного PNG, задний же, из-за его отдалённости, позволим совместить с фоном. Итого получилось 4 PNG. Вот как выглядят 2 PNG, отвечающие за действия объекта на переднем плане:

Приготовленные PNG-файлы

Аналогично изготавливаются изображения для заднего плана.

Теперь в среде Флэш готовим два мувиклипа: для переднего и заднего плана. Делаем моушен-твины в них таким образом, чтобы в нулевом кадре был виден сфокусированный объект, в десятом — расфокусированный, в двадцатом — вновь сфокусированный. В принципе, всё готово. Осталось только обозвать их как-нибудь, чтобы мы смогли достучаться до них из Экшен-скрипта.

Создадим два прозрачных мувиклипа, которые будут являться «сенсорной» областью, то есть, при наведении на которую курсором, у объекта будет меняться фокус. Теперь в первом кадре заведём флаг и поставим ему значение true.

_root.frontFocusState = true;

Этот флаг означает что мы уже сфокусированы на переднем объекте. Теперь для переднего «сенсора» пишем следующий скрипт:

on(rollOver)
{
 if (!_root.frontFocusState) {
  _root.frontFocusState = true;
  _root.FrontPic.gotoAndPlay(11);
  _root.BackPic.gotoAndPlay(11);
 }
}

FrontPic и BackPic — это мувиклипы, в которых расположена та самая анимация, которую мы сделали для объектов выше. Аналогичный код пишем и для заднего «сенсора» с тем условием, что флаг _root.frontFocusState во всех местах нужно поменять на противоположное значение.

Теперь запускаем и радуемся.

Метки: , , ,

8 комментариев к записи «Простой и приятный эффект на флэше»

  1. DadhiM,

    Блюр фильтром не проще было сделать? И весить меньше будет.

  2. Клава,

    Здесь, молодой человек, приведен один из вариантов решения такой проблемы.

  3. Артем Анкудинов,

    DadhiM,

    Мне лично не нравится то, что делает блюр-фильтр. Да и тормозов добавляет.

  4. Артем Анкудинов,

    Так же можно настроить блюр по своему желанию, сделать, скажем, Моушен, или Зум, в зависимости от задачи.

  5. andrey,

    Зачот!

  6. Egor,

    а почему вот здесь http://s61.radikal.ru/i172/0808/9d/db67f39dfcde.jpg водитель прозрачный?

  7. egor.danilov,

    Егор, браво! Я твой глаз-алмаз готов купить за 100 тыщ мильенов!

  8. Клава,

    egor.danilov,
    [cite]Я твой глаз-алмаз готов купить за 100 тыщ мильенов![/cite]
    Егор, зайди ко мне, приноси мульёны, я тебе дам очки поносить — в окне отражается пейзаж перед машиной а не за ней.

Оставить комментарий