Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Изучение Flash MX. Курс для начинающих и профессионалов. Создание компонентов (часть 2).


Обучение по Flash MX.

Создание компонентов (часть 2). (06.10.2006)


Автор русской версии статьи: Александр Манжулов

Сайт: http://www.helpexe.ru/

Магазин: http://www.shop.helpexe.ru/

Форум: http://www.forum.helpexe.ru/

E-mail: admin@helpexe.ru или mail@helpexe.ru

Архив рассылки: http://subscribe.ru/catalog/comp.paper.flashhelp

Пример для этого урока: http://www.helpexe.ru/effects/effect_13/creating_comps.zip



Здравствуйте, уважаемые подписчики !




Интересная тема форума (http://forum.helpexe.ru/viewtopic.php?t=441):

Вопрос по действию команды fscommand

Привет всем!
Проблема в следующем: из окна одного Flash-клипа надо запустить другую флешку. Как это сделать при помощи команды fscommand с параметром exec? Вроде должна работать, ан нет... Может, не выполнил какое-то необходимое условие, а может синтаксис неправильный, хотя вроде дебагер не ругается...

Очень прошу помочь!
Заранее всем признателен! читать дальше >>>




Итак, уважаемые читатели, мы продолжаем создавать с вами компоненты.

И вот, перед вами вторая часть.

Добавление текстового описания

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

Добавление текстового описания

Здесь Вы добавите текстовое описание, просто вводя текст в поле Описание (Description) в диалоговом окне Описание Компонента (Component Description).

  1. Выделите компонент на панели Библиотека (Library, Window->Library).

  2. В верхнем правом углу панели Библиотека (Library) нажмите кнопку опций, и из меню выберите Component Definition.

  3. В диалоговом окне Определение Компонента (Component Definition) нажмите кнопку Установить (Set), которая находится справа от текстового поля Описание (Description).

  4. В диалоговом окне Описание Компонента (Component Description) выберите Description Is Plain Text.

  5. Введите следующий текст описания: Голубая мигающая кнопка с текстовым описанием в текстовое поле Описание (Description) и нажмите ОК.

Текстовое описание будет видно на панели Ссылки (Reference) после того, как Вы добавите все файлы компонента в Вашу директорию для приложения (финальная стадия разработки компонента).

Что бы увидеть текстовое описание компонента (после того, как Вы добавили его в соответствующую папку), Вы должны выбрать экземпляр компонента на сцене и нажать кнопку Помощь (Help) на панели инспектора Свойств (Property), затем выберите Help On This Component из выпадающего меню.

Создание клипа предварительного просмотра

Для того, что бы создать клип предварительного просмотра для компонента, Вы должны сделать копию FLA-файла с компонентом и добавить код ActionScript, что бы передавать значения параметров клипу предварительного просмотра. Затем Вы создадите SWF-клип. Из указаний, следующих ниже, Вы узнаете, как установить путь к клипу предварительного просмотра в вашем проекте.

Если же Вы хотите использовать уже готовый клип предварительного просмотра preview.swf, вместо того, что бы создать свой, то Вы можете перейти к следующей главе Установка пути к клипу предварительного просмотра.

  1. У Вас должен быть открыт Ваш файл component_start_Ваше_имя.fla. Убедитесь, что Вы сохранили все последние изменения.

  2. В главном меню выберите File->Save As...

  3. Назовите файл preview.fla и сохраните его в ту же директорию, где находится Ваш проект component_start_Ваше_имя.fla.

    Клип предварительного просмотра должен точно совпадать по размеру с компонентом (но не по размеру с задним фоном, на котором появляется компонент). Поэтому Вам необходимо будет переместить изображение файла preview.fla и изменить размеры сцены.

  4. Выделив компонент на сцене, введите значение 0 для координат X и Y в инспекторе Свойств (Property). Компонент переместится в верхний левый угол сцены.

    Замечание: Macromedia Flash может изменить значение координаты X на 0,1. Если так произошло, то ничего страшного.

  5. Выделите задний фон на сцене и удалите его.

  6. Выделите компонент на сцене.

  7. В инспекторе Свойств (Property) выделите значение для Ширины (W), и нажмите Ctrl+C для того, что бы скопировать значение.

  8. Кликните по рабочей области вне сцены.

  9. В инспекторе Свойств (Property) щёлкните по кнопке Размер (Size) – в ней отображаются значения ширины и высоты.

  10. В диалоговом окне Свойства Документа (Document Properties) выделите значение для ширины и нажмите Ctrl+V, что бы вставить значение из компонента. Нажмите ОК, что бы закрыть диалоговое окно Свойства Документа (Document Properties).

  11. Выделите компонент на сцене и повторите шаги 7-11 для копирования и вставки значения Высоты (Height). Теперь сцена должна точно совпадать по размеру с компонентом.

    Файл preview.fla фактически должен содержать в себе только экземпляр кнопки и текстовое поле (отдельные элементы компонента), но не сам компонент. Вы удалите экземпляр компонента и добавите отдельные элементы на сцену.

  12. Выделите образец компонента на сцене и удалите его.

  13. Перетащите экземпляр кнопки из библиотеки на сцену. Используйте клавиши курсора (со стрелками), что бы расположить объект точно в границах сцены.

  14. Включите инструмент Текста (Text). На слое, содержащем кнопку, очертите текстовое поле. Введите в него «Cancel» (или любой другой текст).

  15. В инспекторе Свойств (Property), в выпадающем меню Тип текста (Text type) выберите Динамический текст (Dynamic text), в выпадающем меню Шрифт (Font) выберите Arial, размер 14, а так же выравнивание по центру. Так же отключите кнопку Выделяемый (Selectable). Присвойте текстовому полю имя образца buttonLabel, а в строке Var (всё для этого же текстового поля) введите xch.label.

  16. Используйте клавиши курсора, что бы разместить и кнопку, и текстовое поле внутри границ сцены. При этом текстовое поле должно быть по центру кнопки.

  17. Сохраните файл.

  18. Выделите слой Button layer и в главном меню выберите Insert->New Symbol... что бы создать новый пустой муви клип. Назовите его xch. Нажмите кнопку Назад (Back) в верхнем левом углу рабочей поверхности, что бы выйти из режима редактирования символа и вернуться к главной Временной Линии Кадров (Timeline).

  19. Поместите экземпляр пустого муви клипа на сцену и присвойте ему имя образца xch в инспекторе Свойств (Property).

    Через муви клип xch будут передаваться значения параметрам.

  20. Выделите первый кадр слоя со скриптом и откройте панель Действий (Actions). Выделите весь имеющийся код и удалите его.

  21. Введите следующий код:

    myTextFormat = new TextFormat();
    function onUpdate (){
        buttonLabel.textColor = xch.labelColor;
        myTextFormat.font = xch.labelFont;
        buttonLabel.setTextFormat (myTextFormat);
    }

    Этот код создаёт функцию, которая обновляет цвет и шрифт метки, когда пользователь обновляет параметры компонента. Содержание метки обновляется благодаря переменной xch.label, прикреплённой к текстовому полю в шаге №15.

  22. Сохраните файл и выберите Control->Test Movie, что бы создать SWF-файл клипа предварительного просмотра.

  23. Когда клип preview.swf запустится в тестовом окне, то закройте его.

Установка пути к клипу предварительного просмотра

Далее Вы будете использовать диалоговое окно Определение Компонента (Component Definition), что бы связать клип предварительного просмотра с компонентом. Вы можете внедрять клип предварительного просмотра прямо в компонент или связывать клип предварительного просмотра с компонентом как отдельный внешний файл. Внедрение клипа предварительного просмотра облегчает открытие клипа пользователям на других системах, т.к. клип предварительного просмотра переносится внутри файла с компонентом.

  1. Вернитесь к Вашему проекту component_start_Ваше_имя.fla.

  2. Выделите компонент на панели Библиотеки (Library) и из меню опций выберите Component Definition.

  3. В диалоговом окне Определение Компонента (Component Definition) нажмите кнопку Установить (Set), которая находится справа от поля Предварительный Просмотр (Live Preview).

  4. В диалоговом окне Предварительный Просмотр (Live Preview) выберите Live Preview with .swf file embedded in .fla file, что бы внедрить клип предварительного просмотра в Ваш проект.

    Если Вы выбрали Live Preview in external .swf file, то клип предварительного просмотра будет связан с Вашим проектом.

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

  5. Введите путь к файлу preview.swf в текстовом окне или нажмите кнопку Browse, что бы найти файл через проводник.

  6. Нажмите ОК, что бы закрыть диалоговое окно Предварительный Просмотр (Live Preview), затем снова нажмите ОК, что бы закрыть диалоговое окно Определение Компонента (Component Definition).

  7. Сохраните файл.

Создание собственного интерфейса для компонента

Собственный интерфейс – это Flash-клип, который позволяет пользователям вводить значения для параметров компонента. Собственный интерфейс заменяет интерфейс данного компонента, используемый на панели инспектора Свойств (Property) по умолчанию. Так же, как и в клипе предварительного просмотра, Вы используете муви клип xch для передачи значений параметров компоненту.

Мы создали собственный интерфейс для компонента с текстовым окном для ввода текста надписи на кнопке, с выпадающим меню для выбора шрифта и с текстовыми окнами для ввода значений цветов надписи. В скачанном примере Вы найдёте файлы UI.fla и UI.swf.

Если же Вы хотите использовать уже готовый собственный интерфейс UI.swf, вместо того, что бы создать свой, то Вы можете перейти к следующей главе Установка пути к собственному интерфейсу.

Данный интерфейс просто копирует тот интерфейс, который задан по умолчанию на панели инспектора Свойств (Property). Тем не менее, Вы можете создавать дополнительные элементы для того, что бы облегчить пользователям процесс ввода значений параметров. Например, в созданный нами собственный интерфейс Вы могли бы добавить элемент со шкалой и ползунками для изменения цветов.

Собственный интерфейс с текстовыми полями для красного, зелёного и синего цветов метки; с выпадающим меню для шрифта метки.

Далее следует код ActionScript для собственного интерфейса. В нём имеются комментарии для объяснения каждого действия.

// установка цвета по умолчанию.
xch.c1 = 0;
xch.c2 = 0;
xch.c3 = 0;
// заполнение пунктов выпадающего меню названиями шрифтов, имеющимися на
// компьютере пользователя, и сортировка их в алфавитном порядке.
fontList.setEditable(true);
fontList.setDataProvider(textField.getFontList());
fontList.sortItemsBy("label", "asc");
//
_root.onEnterFrame = function() {
// установка шрифта метки в соответствии с выбранным пунктом
fontList.onKillFocus = function() {
selecting = false;
};
fontList.onSetFocus = function() {
selecting = true;
};
if (selecting) {
xch.labelFont = fontList.getValue();
} else {
fontList.setValue(xch.labelFont);
}
// Устанавливает палитре RGB значения 255, если введённые
// значения больше 255.
for (i=1; i<=3; i++) {
if (xch["c"+i]>255) {
xch["c"+i] = 255;
}}
// комбинирование значений RGB для передачи компоненту.
xch.labelColor = (xch.c1 << 16 | xch.c2 << 8 | xch.c3);
};

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

  1. Выберите File->New, что бы создать новый Flash-документ. Сохраните его под именем UI.fla.

  2. Создайте те элементы интерфейса, с которыми, как Вы предполагаете, будет работать пользователь при вводе параметров – например, выпадающее меню, ползунок со шкалой и другие.

  3. Выберите Insert->New Symbol, что бы создать пустой муви клип xch. Поместите экземпляр пустого муви клипа на сцену в кадре №1 и присвойте ему имя образца xch в инспекторе Свойств (Property).

  4. Добавьте код, приведённый выше, в отдельный кадр отдельного слоя, что бы перехватывать параметры, введённые пользователем, и копировать их в объект xch.

  5. Выберите Control->Test Movie, что бы создать файл UI.swf. Когда клип UI.swf запустится в тестовом окне, то закройте его.

  6. Сохраните файл UI.fla и закройте его.

Установка пути к клипу собственного интерфейса

  1. Вернитесь к Вашему документу component_start_Ваше_имя.fla.

  2. Что бы указать путь к клипу собственного интерфейса, выделите компонент на панели Библиотека (Library) и из меню опций выберите Component Definition.

  3. В диалоговом окне Определение Компонента (Component Definition) нажмите кнопку Установить (Set), которая находится справа от поля Собственный Интерфейс (Custom UI).

  4. В диалоговом окне Собственный Интерфейс (Custom UI) выберите Custom UI with .swf file embedded in .fla file, что бы внедрить клип собственного интерфейса в Ваш проект.

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

  5. Для опции Display выберите Display in Property Inspector.

    Если же Ваш клип собственного интерфейса слишком велик, что поместиться на панели инспектора Свойств (Property), то выберите опцию Display in Component Inspector panel.

  6. Введите путь к файлу UI.swf в текстовом окне или нажмите кнопку Browse, что бы найти файл через проводник.

  7. Нажмите ОК, что бы закрыть диалоговое окно Собственный Интерфейс (Custom UI), затем снова нажмите ОК, что бы закрыть диалоговое окно Определение Компонента (Component Definition).

  8. Что бы увидеть собственный интерфейс, выделите компонент на сцене. Затем на панели инспектора Свойств (Property) откройте вкладку Параметры (Parameters).

    Если в шаге №5 Вы выбрали Display in Property Inspector, то собственный интерфейс должен появиться на панели.

  9. Сохраните и закройте файл.

Использование компонента во Flash-документах

Что бы добавить компонент в приложение Macromedia Flash, Вы должны поместить FLA-файл компонента в специальную директорию на Вашем жёстком диске.

Что бы компонент был доступен пользователям других машин, предоставьте им все файлы, связанные с компонентом, включая муви клип компонента и все внешние файлы для предварительного просмотра и собственного интерфейса.

  1. Поместите Ваш файл component_start_yourname.fla в директорию Components, которая находится в директории, указанной ниже. Если Вы связали Предварительный Просмотр и Собственный Интерфейс (вместо того, что бы внедрить их), то поместите файлы preview.swf и custom-ui.swf в той же директории.

    Путь для программы Macromedia Flash 8:

    C:\Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Components

    Если Вы работает с другой версией программы, то путь будет немного другим.

  2. Перезапустите программу Flash.

  3. Выберите Window->Components.

  4. На панели Компонентов (Components) Ваш компонент должен появиться под названием component_start_yourname.fla.

  5. Теперь Вы можете работать с ним, как с обычным компонентом.

Ну, вот и всё – наш компонент полностью готов для работы.

Желаю Вам творческих успехов!

Как создать плавающий FLASH-баннер?

Автор: Александр Манжулов
Художественное оформление обложки: Ольга Сухова


  • Увеличьте количество кликов по своему уникальному баннеру


  • Зарабатывайте, создавая потрясающие баннеры


  • Получайте больше заинтересованных посетителей


  • Порадуйте посетителей необычной рекламой

Всё это Вы сможете узнать из моей
новой книги "Как создать плавающий Flash-баннер?"

Узнать подробнее...


ПО ВСЕМ ВОПРОСАМ, связанным с Flash, обращайтесь ко мне:

mail@helpexe.ru или help@helpexe.ru.

Обязательно постараюсь Вам помочь!!!



С уважением, Александр Манжулов
Руководитель проекта www.helpEXE.ru

E-mail: mail@helpexe.ru
тел. моб.: +7-909-443-16-39





Copyright © 2005-2006 by Александр Манжулов. Все права защищены.

Запрещено частичное или полное воспроизведение
материалов рассылки без согласования с автором.


В избранное