cat
Воскресенье, 15 Апреля 2012 12:28

Плавная анимация бабочки при наведении курсора.

Автор
Оцените материал
(0 голосов)

Начала делать фоновую анимацию        для сцен и персонажей. Надо сказать, что анимацию для живых существ и персонажей делать куда более приятней, чем анимировать какую-то там воду, к примеру. Вода так и не получилась пока, несмотря на неплохие уроки в сети на эту тему. Зато получилось анимировать облака на некоторых сценах, а также добавить красивый эффект солнечных лучей. Только, жаль, он тормозит очень сильно, поэтому похоже, его придется делать не на всех сценах. а только там, где Мурзик не движется.

Анимировала мышей и муравьев, и кошку.

Начали делать насекомых. Xeneder помог нарисовать бабочку, а я ее анимировала, после чего Lekste запрограммировал целый класс бабочек. Они себя ведут так, что при наведении на них курсором начинают хлопать крыльями. Однако, если делать стандартными средствами флеша, то получается резкое движение, когда отводишь мышь. Я облазила пол-интернета в поисках нормального подобного алгоритма на AS3. Кое что там, конечно, есть, но странновато или совсем не понятно, или не совсем то. Так что делаем по-своему! Далее написано более подробно, как это реализовывается и даже приведен код этого класса с подробными комментариями.

1)  Берем бабочку, заключаем её в муви-клип.

 

2) Пишем специальный класс в отдельном as -файле.

package  {

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;


public class Babochka extends MovieClip {
private var active: Boolean;

public function Babochka() {
active = false;
addEventListener(MouseEvent.MOUSE_OVER, OnMOver); // задаем имя функции для вызова по событию наведения мышки
addEventListener(MouseEvent.MOUSE_OUT, OnMOut);      // задаем имя функции для вызова по событию отодвигания мышки   
addEventListener(Event.ENTER_FRAME, OnEnterFrame);  // задаем имя функции для вызова по событию переход в кадр
}

private function OnMOver(evt: MouseEvent): void {
if(!active) { // если до этого переменная active была "false", делаем её "true"
active = true;
play(); // и запускаем анимацию
}
}

private function OnMOut(evt: MouseEvent): void {
// если еще не сделали active = "false", то делаем, чтобы при переходе на 1-й кадр,
// остановить анимацию
if(active) {
active = false;
}
}

private function OnEnterFrame(evt: Event): void {
// если active = "false" и номер текущего кадра = 1
if(!active && (this.currentFrame == 1)) {
stop(); // останавливаем анимацию
}
}
}

}


3) Присваиваем нашему мувику с анимированной бабочкой класс Babochka.

4) Запускаем и радуемся!

Примечание: класс сгодится для любых анимашек, которые реагируют на наведение на них запуском анимации. 

Для сравнения: розовая бабочка делалась обычным стандартным способом с помощью кнопки. Подведите курсор и почувствуйте разницу! А если нет разницы, то мы идем к вам!!!      
Прочитано 5015 раз Последнее изменение Понедельник, 16 Апреля 2012 19:52
AnnTenna

Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
Другие материалы в этой категории: « Еще немного срисовывания. Вода не стоит на месте! »

5 комментарии

  • Комментировать Skyblade Понедельник, 16 Апреля 2012 18:29 написал Skyblade

    А можно увидеть пример анимации с резким переходом и исправленный? Непонятно, какой из вариантов показан в начале текста.

    Пожаловаться
  • Комментировать AnnTenna Понедельник, 16 Апреля 2012 19:56 написал AnnTenna

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

    Только этот алгоритм пока не очень хорошо работает, когда на одну сцену добавляется несколько объектов этого класса, в том числе не бабочки, а с другой графикой... Разбираемся в чем дело.

    Пожаловаться
  • Комментировать Игорь Понедельник, 16 Апреля 2012 22:47 написал Игорь

    Красивые бабочки.
    В коде не видно перемотки назад.
    Чтобы не тормозило свечение возможно надо всё перевести в растр. вообще вся игра должна переводиться в растр.

    Пожаловаться
  • Комментировать AnnTenna Вторник, 17 Апреля 2012 00:10 написал AnnTenna

    Спасибо!

    Перемотка назад?!...не совсем поняла, что имеется в виду за перемотка... Если это зацикливание движения крыльев бабочки - так оно не нужно в коде писать, анимация играется из мувика и сама по себе циклична.

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

    Да, и проблема с несколькими объектами была решена: нужно объявлять класс "Бабочка" как базовый, а в поле класс в свойствах писать для мувиков с разной графикой разные названия.

    Пожаловаться
  • Комментировать Игорь Вторник, 17 Апреля 2012 07:17 написал Игорь

    Да я просто подумал, что там при отведении идёт перемотка назад, как обычно для кнопок делают. но в общем понятно. я вот читаю. у меня постоянно желание навести какой-то порядок в вашем проекте, оптимизировать. но времени пока нет.

    Пожаловаться
Авторизуйтесь, чтобы получить возможность оставлять комментарии

Панель входа

Добро пожаловать!

Заходите. Чувствуйте себя как дома.

Мы в контакте

Опрос о поиске вещей.

Какую вещь было найти сложнее всего?
 

Это из галереи!

  • Lk_10
  • Описание: Ура! Летучий корабль теперь и на Андроиде!
В верхнем правом углу сайта есть ссылки на Локатор в социальных сетях.

А знаете ли вы...

ste2

полузаброшенный сайтСветлая зона и Академия РПГ Мейкераkn4kn5Плагины для RPG MakerДневник одной нэкоkn Топ Разработка игр