Все мы помним
старый пример Питера Энта про шарики и звездочки, где из флекса можно было ими уравлять.
Сейчас, с выходом
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)
и т.д.
Все исходники лежат
здесь.
Спасибо Питеру Энту за
полезный пост.
