Главная | Регистрация | Вход | RSSПонедельник, 23.09.2024, 20:17

НеПотеряйка

Меню сайта
Наш опрос
Что для Вас "МОДЕРНИЗАЦИЯ ОБРАЗОВАНИЯ"?
Всего ответов: 210
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Дневник

Главная » 2013 » Март » 13 » Магия от Вострикова Михаила
Магия от Вострикова Михаила
22:10

Сегодня в качестве урока выступит найденная мною статья Михаила Вострикова, который, как я понял, работает в студии Dominion, у которой в свою очередь есть блог: http://www.noinimod.ru (прочитайте название блога задом-наперёд). А вот в этом блоге, я и нашёл статью Михаила Вострикова, в общем всё между собой связано, не иначе это заговор =)

Магия


Сегодня я, как автор, почти не буду участвовать в повествовательном процессе и передам брозды правления великому и могущему копипастуболее весёлое определение).

Итак, понеслась, ниже, почти до самого конца, будет текст Вострикова Михаила.

Магический прототип


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

Подобные эффекты обычно реализуют с помощью битмапа и комбинации фильтров на нем. Это не сложно, требуется немного фантазии и «игры» с параметрами фильтров. Но настоящие герои всегда идут в обход.

Сразу объясню почему. Во-первых, подобный прототип будет использоваться в реальном проекте, где вся сцена динамически изменяется перед эффектом, и за ним будет находится много объектов. Во-вторых, требуется высокая скорость работы всей флешки. При размере сцены 1280×700 пикселей, метод с применением битмапов не имеет никаких шансов получить приемлемый FPS на среднем компьютере.

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

Приступим к реализации. Сам шлейф будем рисовать программно, запоминая координаты движения объекта и используя функцию curveTo() для сглаживания траектории движения. Свечение, пожалуй, лучше сделать через GlowFilter() со средним качеством, так как симуляция свечения через многократное рисование шейпов будет медленнее. Будем писать прототип, так как он — истинное оружие пролетариата, как сказал Иван Дембицкий.

MovieClip.prototype.Magic = function (len, w, fColor, gColor, ptr) {
// на входе:
// len - количество сегметов шлейфа
// w - начальная толщина шлейфа в пикселах
// fColor - цвет шлейфа
// gColor - цвет свечения вокруг шлейфа (Glow)
// ptr - муви-клип, за которым будет строиться магический шлеф. Если не задан, то за мышью.
 w *= .5;
 // запомним старые координаты начала шлейфа, они нам пригодятся для расчета
 // вектора движения и перпендикуляра к нему
 var oldX = this._xmouse;
 var oldY = this._ymouse;
 // используем координаты мышки, а если задан муви-клип, то его координаты
 if (ptr == undefined) {
 oldX = ptr._x;
 oldY = ptr._y;
 }
 // примерним два фильтра к клипу, в который будет рисовать шлейф.
 // BlurFilter немного размоет края шлейфа, чтобы придать реалистичности
 this.filters = new Array(
 new flash.filters.BlurFilter(2, 2, 1),
 new flash.filters.GlowFilter (gColor, 1, 25, 25, 3, 2)
 );
 // в массиве crd будем хранить текущую и все предыдущии координаты шлейфа,
 // причем их кол-во не будет превышать длинный шлейфа len
 var crd = new Array();
 // на событие перерисовки кадра "повесим" функцию рассчета необходимых переменных и само рисование
 this.onEnterFrame = function() {
 // создадим пустой объект, в нем будем хранить координаты
 // и дополнительные данные каждого узла шлейфа
 var o = new Object();
 // используем координаты мышки, а если задан муви-клип, то его координаты
 if (ptr == undefined) {
 o.x = this._xmouse;
 o.y = this._ymouse;
 } else {
 o.x = ptr._x;
 o.y = ptr._y;
 }
 // рассчитаем угол, равный перпендикуляру к вектору движения, сохраним его в объекте
 o.a = Math.atan2(o.y-oldY, o.x-oldX)+Math.PI*.5;
 oldX = o.x;
 oldY = o.y;
 // поместим объект в массив и обрежем массив до максимальной длины шлейфа
 crd.push(o);
 if (crd.length>len) {
 crd.splice(0, 1);
 }
 // поместим длину массива координат во временную переменную, она немного ускорит
 // цикл перебора массива и будет использована несколько раз
 var l = crd.length;
 // рассчитаем координаты перпендикуляров в каждом узле (с конца шлейфа к его началу),
 // причем линейно будем увеличивать толщину шлейфа до максимальной (заданной через переменную w)
 for (var i = 0; i < l; i++) {
 // возьмем объект из массива
 var o = crd[i];
 // k = коэффициент толщины шлейфа
 var k = w*i⁄l;
 // косинус и синус вектора движения нам нужен для рассчета координат перпендикуляров
 var cs = k*Math.cos(o.a);
 var ss = k*Math.sin(o.a);
 // собственно сам рассчет, x0 и y0 - правая сторона шлейфа, x1 и y1 - левая
 o.x0 = o.x+cs;
 o.y0 = o.y+ss;
 o.x1 = o.x-cs;
 o.y1 = o.y-ss;
 // немного уменьшим координату, дабы получить эффект "огня" -
 // плавного смещения всего шлейфа вверх, это добавит динамики нашему эффекту
 o.y *= .997;
 }
 // начнем рисование, используя цвет заливки, заданный на входе прототипа
 this.clear();
 this.beginFill(fColor);
 // начнем рисование с правой стороны шлейфа (набор коодинат x0 и y0), передвинем текущую позицию
 // рисования в самый хвост
 this.moveTo(crd[0].x, crd[0].y);
 // переберем массив координат с первого до предпоследнего, соединим точки с помошью сплайна
 // (кривой Безье)
 // будем использовать "классический" метод рисования кривых, состоящих из нескольких сегментов
 for (var i = 1; i<(l-1); i++) {
 this.curveTo(crd[i].x0, crd[i].y0,
 (crd[i].x0+crd[i+1].x0)*.5,
 (crd[i].y0+crd[i+1].y0)*.5);
 }
 // завершим рисование правой стороны, проведя линию до начальной координаты шлейфа
 this.lineTo(crd[l-1].x, crd[l-1].y);
 // левую половину шлейфа нарисуем аналогично, только используя второй набор рассчитаных координат
 // x1 и y1
 // чтобы рисуемая форма была корректно залита флешем, начальная и конечная координаты у обоих
 // половин должны совпадать!
 this.moveTo(crd[0].x, crd[0].y);
 for (var i = 1; i<(l-1); i++) {
 this.curveTo(crd[i].x1, crd[i].y1,
 (crd[i].x1+crd[i+1].x1)*.5,
 (crd[i].y1+crd[i+1].y1)*.5);
 }
 this.lineTo(crd[l-1].x, crd[l-1].y);
 // завершим рисование, форма шлейфа готова
 this.endFill();
 };
};
// Осталась самая малость — создать пустой клип под шлейф и применить к нему прототип.
// var mc = this.createEmptyMovieClip("MagicMc", 0);
// mc.Magic(20, 8, 0xFF8080, 0xCC80CC);

Работающий пример и архив с исходными файлами смотрите ниже.

Исходник

P.S.:


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

Кстати, обязательно взгляните на урок Михаила о стёрке в Flash, совсем недавно он меня сильно выручил.


Комментарии (17)
  Автор: admin
Комментарии
Humgat
04.03.09 | 13:59
12 баллов

Действительно оч интересный и красивый эффект.
И уроки Михаила давно приметил! )
Пасиб!

Taiki
04.03.09 | 20:25
0 баллов

Очень интересно, но возникает такой вопрос, возможно ли убрать курсор, то есть заменить его на этот, не знаю как даже назвать... на эту магию.

admin
04.03.09 | 21:23
0 баллов

Стандартный курсор скрывается через Mouse.hide().

Taiki
04.03.09 | 23:42
0 баллов

сяпс буду знать

Humgat
04.03.09 | 22:20
0 баллов

у мя вот проблемка возникла с привязкой шлейфа к мувику.
Я добавил в код ptr = _root.mc1.mc; , шлейф за мувиком бегает ток вот разница в координатах получилась (

admin
04.03.09 | 23:35
2 балла

Скорее всего «сдвиг» произошёл из-за того, что клип, за которым должен появляться шлейф(mc), находится внутри другого клипа(_root.mc1), а _root.mc1 в свою очередь стоит не на точке _x = 0 _y = 0.

Humgat
04.03.09 | 23:38
12 баллов

Точно!!!
Пасиб огромное!

omid
05.03.09 | 13:53
12 баллов

Вот это и вправду магия!!! очень классно!! спасибо большое!

taurus
07.03.09 | 07:48
12 баллов

kleva!!!
mochno ispolzivat eto v igryshkah
sposibo za vash yrok

Jerry
18.04.09 | 10:38
0 баллов

Красиво, жаль, не понимаю, что написано =), но если приглянутся... сразу все ясно

stroy
13.04.09 | 22:59
0 баллов

Супер!
Никогда не видел ничего подобного!))

Мавр
08.05.09 | 15:26
0 баллов

Класс мне очень понравилось))

edapskov
23.12.09 | 04:25
0 баллов

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

jeka_ea
30.01.10 | 12:12
0 баллов

эффектно, Михаил суперчел!, я только начинаю изучать хлешь и его возможности, так вот возможности уже начинаю радовать)))

jeka_ea
30.01.10 | 12:13
0 баллов

эффектно, Михаил суперчел!, я только начинаю изучать хлешь и его возможности, так вот возможности уже начинаю радовать)))

suVrik
16.03.10 | 16:19
0 баллов

Фигасебе как классно!Супер!

И.Р.И.Н.А
20.03.10 | 02:13
16 баллов

ВАУ!!!Какая красота))))))))))))))) Просто супер!!! автору РЭСПЕКТИШЕ)))))))))

 
Просмотров: 683 | Добавил: i_elf | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Поиск по сайту
Google Scholar

Мои сайты
  • Создать сайт
  • Творческий учитель
  • Сайт ООАКМР
  • Школьный сайт
  • Информатика учебник (будет)
  • Математические основы информатики
  • РоЖдЕнИе ИдЕи
  • ВиРтУаЛьНыЙ мУзЕй
  • О тебе и обо мне

  • Copyright MyCorp © 2024
    Бесплатный хостинг uCoz