понедельник, июля 23, 2007

Использование 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)
и т.д.

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

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

3 комментария:

Анонимный комментирует...

Обновили бы текст. Туториал полезный, жаль исходников уже нет и текст не полный.

Анонимный комментирует...

Новый Бесплатый Сайт с Видео для Взрослых
(Не требуется отсылка СМС)
[url=http://www.freefromdesire.ru]СМОТРЕТЬ[/url]
http://www.freefromdesire.ru

Анонимный комментирует...

 Куплю двигатель контрактный на Хундай соната (G4CP) или митсубиси 4G63 он подходит как родной,или запчасти от движка,поршень ,клапана и тд ,и акмм заинтересван приобрести ,также если можете подсказать или продать был бы вам признателен,вот моя ICQ 448122666 или почта totcam@mail.ru