Много твинов, много кадров, много клипов или решение в лоб!

Здравствуйте, уважаемые любители этого интересного. Сталкивались с ситуацией, когда в анимации много кадров (скажем 2635 на одном таймлайне), нужно сменить кадр клипа (с помощью которого сделан твин), и чтобы он одинаково выглядел как на первом, так и на 2635 и не прыгал по кадрам?

Рассмотрим пример следующий:
У вас есть клип, допустим, человечка. У него, как и говорилось ранее — 2635 кадров на таймлайне. Из 2635 штук — очень много ключевых. У человечка есть еще 3 клипа — его одежда. Скажем это штаны, куртка и кепка. Художники сделали так, что он анимированные. То есть все 3 клипа одежды постоянно двигаются, на протяжении 2635 кадров. У вас стоит задача: по нажатию кнопки 1 — кепка пролистывается на 1 кадр вперёд, кнопка 2 пролистывает куртку, а кнопка 3 пролистывает штаны. Все клипы, которые нужно пролистывать, содержат в себе по 5 кадров (5 видов кепок, курток и штанов).

Казалось бы ничего сложного сделать так, чтобы клип перешёл на определенные кадр, в определенный момент времени. Оказывается не так всё просто. Дело в том, что когда в твине наблюдается ключевой кадр, клип, с помощью которого делался твин — переходит на первый кадр, то есть выполняется его конструктор. На рисунке выделены именно те кадры, в которых произойдёт переход на первый кадр.
скрин1
Как нам этого избежать? По сути — вы можете смотреть постоянно эвентом enterFrame, каждый раз вытаскивая значение кадра клипа из какого-нибудь массива. Ну при достаточно большом количестве анимации — всё это будет жутко тормозить.

Предлагаю следующее решение. Создаем базовый класс для символов одежды из библиотеки. Называем его Clips.as. Линкуем (linkage) символы в библиотеке, указывая нужное имя и в качестве параметра базового класса указываем Clips.
tween2
У вас будут спрашивать — вы действительно уверены что вам нужен такой класс, так как мы его не нашли рядом с вашей флешкой. Соглашайтесь. Главное, чтобы был класс Clips, остальное не упиралось.

Напишем содержимое класса Clips.as (класс небольшой):

package
{
  import flash.display.MovieClip;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.utils.getQualifiedClassName;
  
  public class Clips extends MovieClip
  {
    public function Clips()
    {
      //добавляем на стейдж
      addEventListener(Event.ADDED_TO_STAGE, onAddToStage, false, 0, true);
      
      //ключевой кадр, переходим на нужный из конфига
      addClothes(ConfigTemp.MAN_ITEMS[getQualifiedClassName(this)]);
    }
    
    private function onAddToStage(e:Event):void
    {
      stage.addEventListener("APPLY_CLOTHE", applyClothe, false, 0, true);
    }
    
    //применяем одежды
    private function applyClothe(e:Event):void
    {
      if (getQualifiedClassName(this) == ConfigTemp.ITEM)
      {
        addClothes();
        ConfigTemp.MAN_ITEMS[getQualifiedClassName(this)] = currentFrame;
      }
    }
    
    //пролистываем кадр
    private function addClothes(nom):void
    {
      nextFrame();
    }
  }
}

* This source code was highlighted with Source Code Highlighter.

Сразу возникают вопросы: что такое ConfigTemp и откуда у него свойства вида MAN_ITEMS, что такое СonfigTemp.ITEM и getQualifiedClassName?

Дело в том, что нам где-то нужно хранить нужный кадр одежды. Создаем класс ConfigTemp:

package {

  public class ConfigTemp {
    
    public static var ITEM:String = ''; //одежда
        
    public static var MAN_ITEMS:Object = //объект для сейва
    {
      cap: 1,
      jacket: 1,
      pants: 1,
    };
  }
}

* This source code was highlighted with Source Code Highlighter.

Здесь у нас и хранятся текущие кадры и текущий тип одежды. Функционал практически готов. Но остаются вопросы. Откуда событие APPLY_CLOTHE? Стандартных таких нихрена нет. Правильно, будем рассылать свои события. Делается это очень просто.

Кнопки, которые будут пролистывать одежду, и будут рассылать это событие, а поскольку клипы на них уже подписаны, то переход на кадры осуществится автоматически. Подписаны кстати вот как: stage.addEventListener("APPLY_CLOTHE", applyClothe, false, 0, true);

Единственное, что будет менятся в обработчике нажатия кнопки — это ConfigTemp.ITEM. Мы указали в linkage клипов базовый класс Clips, и так же сами классы клипов. То бишь: cap, jacket, pants.
getQualifiedClassName(this) — и получает значение поля Class в linakge. Если протрейсите — выведет cap, jacket и pants.

Значит, по нажатию на первую кнопку для смены кепки пишем следующий код:

btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);

private function onBtnClick(e:MouseEvent = null):void
{
  switch(e.currentTarget.name)
  {
    case 'btn1':
      ConfigTemp.ITEM = 'cap';
      dispatchEvent(new Event("APPLY_CLOTHE", true));
    break;
  }
}

* This source code was highlighted with Source Code Highlighter.

Для двух остальных кепок пишем тоже самое в switch, только меняем параметр ConfigTemp.ITEM на ‘jacket’ и на ‘pants’. Кому что непонятно — могу дать исходник.

Реклама

комментария 2 to “Много твинов, много кадров, много клипов или решение в лоб!”

  1. Nillorrimmemy Says:

    Прикольная статья, но хотелось бы поподробнее узнать о некоторых моментах… Как можно с Вами связаться?

  2. dafive Says:

    На почту пишите.


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s

%d такие блоггеры, как: