Использование Flex Component Kit для Flash CS3

Все мы помним старый пример Питера Энта про шарики и звездочки, где из флекса можно было ими уравлять.



Сейчас, с выходом Flash CS3 и Flex Component Kit взаимодействие между флеш-компонентами и флекс-приложением становиться еще удобнее.

Создание Flash CS3 документа

Для начала необходимо создать новый Flash CS3 документ (star_and_ball.fla). Можно порыться в старых исходниках и вытащить оттуда символы шарика и звездочки, можно нарисовать их самому. Самое главное - чтобы они были отдельными символами с точкой регистрации (0;0). Далее создаем новый символ StarAndBall, помещаем туда наши запчасти на отдельные слои и создаем гайдлайн для движения звездочки вокруг шарика.

Создание Flex компонента

После установки кита (установка проста - загрузили и установили .mxp расширение к флешу.) выбираем символ в библиотеке и в меню команд выполняем новую команду "Make Flex Component". Происходит следующее:
1. Устанавливается фреймрейт в 24fps (чтобы соответствовать флексовому умолчанию).
2. Окно вывода показывает, что UIMovieClip был добавлен и StarAndBall готов к экспорту.

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

Публикация

Опубликуем документ, задав в настройках не только компиляцию свф, но и swc: star_and_ball.swf и star_and_ball.swc. Сфка нам сейчас не нужна.

Использование Flash компонента во Flex

Создадим новый флекс-проект, зайдем в его Project Properties и добавим в "Add SWC" нащ star_and_ball.swc.

Флекс сейчас верит, что в star_and_ball.swc находится настоящий флексовый компонент StarAndBall. Чтобы его использовать начните печатать:

<Star

Автокомплит вам подскажет - <local:StarAndBall. Закроем тег и запустим приложение. Вы увидите наш шарик и звездочку!

Сейчас вы можете сказать - зачем сей геморрой, если можно использовать простой SWFLoader? Но нам важно другое - то, что флекс нашел наш символ как класс - и это благодаря UIMovieClip!

Объекты

В старом примере мы могли запускать и останавливать анимацию, вызывать методы с помощью LocalConnection. В предпоследнем примере методы, расположенные на таймлайне, можно было вызывать напрямую.

Сейчас мы сможем вызывать методы, которые принадлежат нашему новому классу!

Вернемся в star_and_ball.fla, откроем свойства символа StarAndBall и увидим, что класс называется StarAndBall. Если нажать кнопочку редактирования рядом, будет сообщено, что класс не существует и он будет создан сейчас же. Тоже самое вы можете сделать и руками.

Итак, в класс StarAndBall.as добавляем наши старые методы:

package {
      import flash.display.MovieClip;
      import mx.flash.UIMovieClip;

      public class StarAndBall extends UIMovieClip
      {
           public function StarAndBall():void
           {
           }

          public function rotateStar( angle:Number ) : void {
               star_mc.rotation = angle;
           }

           public function zoomStar( factor:Number ) : void {
                star_mc.scaleX = factor;
                star_mc.scaleY = factor;
           }

           public function stopPlanet() : void
           {
                stop();
           }

           public function resumePlanet() : void
           {
                play();
           }
      }
}

Очень похоже на флекс-компонент. Заново опубликуем swc.

Назад во флекс

Дадим нашему компоненту имя . Теперь мы можем свободно вызывать методы этого компонента, которые мы только что добавили:

star.stopPlanet();
star.rotateStar(value)
и т.д.

Все исходники лежат здесь.

Спасибо Питеру Энту за полезный пост.