20 января 2014

Flash: делаем анимированный блеск

В рамках ответов на вопросы по Flash, я решил также выделять некоторые хитрости в отдельные сообщения. Думаю, так будет проще воспринимать смысл этой самой хитрости... Сегодня сделаем анимированный блеск на предмет. Довольно простой эффект, без шуток. К тому же я только что его применил на объекты-трофеи, которые герой может собирать в моей новой игре. Так что сегодняшняя демка можно сказать "пришла из реальной жизни".
От слов к делу - давайте реализуем наш замечательный блеск!
Хотим мы добиться вот такого:

Итак, для начала нам нужен объект, на который мы будем накладывать блеск. Поделюсь вот таким ярким прямоугольником:


Теперь накладываем на него белый прямоугольник с типом смешивания Overlay. Ниже приведен скриншот результата из редактора Flash IDE. Я еще захватил серую нерабочую область, это для лучшего понимания, что к чему:

Где прямоугольник пересекается с блеском, все выглядит клево, правда?
Одно раздражает: наш прямоугольник-блеск вылезает за границы объекта. Поэтому копируем наш прямоугольник еще раз, кладем на отдельный слой и делаем его маской для блеска. Теперь все ок:


Осталась мелочь - нужна анимация! Будем просто двигать наш блеск (объект shine) влево с постоянной скоростью.
Код предельно прост:


import flash.events.Event;
import flash.events.MouseEvent;

stop();
addEventListener(Event.ENTER_FRAME, onUpdate);
Rect.addEventListener(MouseEvent.CLICK, onClick);
shine.x = 500;

function onUpdate(e: Event): void
{
    shine.x -= 35;
    if(shine.x < -300)
        shine.x = Math.random() * 400 + 3500;
}

function onClick(e: MouseEvent): void
{
    shine.x = 315;
}


Вот такой простенький эффект мы сегодня создали.
Исходник качаем тут.

Сообщения, схожие по тематике:

2 коммент.:

  1. Что с файлом?
    Открываю CS4, пишет "Не предвиденный формат файла".

    ОтветитьУдалить
    Ответы
    1. забыл указать, что мой файл в CS6... (по техническим причинам я перешел на него)

      Удалить