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

Создал свой курсор а как его убрать?

Нужно сделать так чтобы при наведении на кнопку курсор менялся а при rollover исчез и появился стандартный курсор мышки. Спасибо. читать дальше >>>

Мы с вами, уважаемые читатели, начинаем объёмную тему о создании компонентов. Я решил разделить статью на две части.

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

Создание компонентов в Macromedia Flash MX

Компоненты – это муви клипы с определёнными параметрами, устанавливаемыми во время работы с документом. Параметры - это переменные языка ActionScript, которые прикреплены к муви клипу и контролируют его поведение. Из данной статьи Вы узнаете, как создать:

• Компонент кнопки с параметрами для настройки её надписи, шрифта и цвета этой надписи.
  
  
• Свою собственную иконку для компонента для отображения на панели Компоненты (Components).
  
  
• Текстовое или XML-описание для компонента, которое будет появляться на панели Ссылка (Reference).
  
  
• Клип для предварительного просмотра, позволяющий пользователям видеть эффекты от установки различных настроек при работе в программе Flash MX.
  
  
• Собственный интерфейс компонента для упрощения ввода параметров пользователями.
  
  

Для наилучших результатов в выполнении данного упражнения у Вас должны быть некоторые навыки работы с компонентами в программе Macromedia Flash MX. В дополнении к этому Вы должны уметь работать с переменными ActionScript.

При помощи компонентов Вы можете добавлять интерактивность в клипы Flash MX без необходимости написания дополнительных кодов ActionScript. Что бы использовать компонент, Вы просто добавляете его экземпляры на сцену и устанавливаете значения для параметров.

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

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

Создание компонента нужно начать с создания муви клипа – базового элемента компонента, а затем добавить ActionScript с переменными, относящимися к параметрам компонента. Затем Вы задаёте параметры для компонента в диалоговом окне Определение Компонента (Component Definition). Для каждого параметра введите имя, переменную, значение и тип.

• Имя параметра помогает пользователю понять, для чего нужен тот или иной параметр.
  
  
• Переменная параметра – это имя переменной, используемой в выполняемом коде компонента. Первый символ переменной должен быть буквой, символом подчёркивания или знаком доллара ($). Каждый из последующих символов должен быть буквой, цифрой, символом подчёркивания или знаком доллара ($). Например, мы использовали имя переменной labelFont для шрифта надписи кнопки.
  
  
• Значение параметра – это значение, назначенное переменной, когда она вызывается командой ActionScript. То значение, которое Вы введёте сюда в диалоговом окне Определение Компонента (Component Definition) будет значением по умолчанию. Компонент будет использовать это значение, пока пользователь не введёт своё. В качестве значения по умолчанию для шрифта на кнопке мы выбрали Arial.
  
  
• Тип параметра идентифицирует тип данных или вид информации, которую параметр может содержать. Параметры могут быть следующих типов: Массив, Объект, Строковый, Числовой, Булев (логический), а так же Список, Имя Шрифта, Цвет или значение по умолчанию. Для значения по умолчанию Flash интерпретирует тип, основанный на введённом значении. Значения истина (true) и ложь (false) интерпретируются как Булев тип. Числа интерпретируются как Числовой тип. Все остальные интерпретируются как Строковый тип.
  
  

Следующие процедуры необязательные в создании компонента:

• Создание собственного интерфейса для компонента – клип Macromedia Flash MX, который позволяет пользователям вводить значения для параметров компонента. Если Вы не создадите собственный интерфейс, то пользователи будут вводить значения параметров в предоставленном по умолчанию интерфейсе – инспекторе Свойств (Property).
  
  
• Создание Предварительного Просмотра (Live Preview) для компонента, что бы позволить пользователям предварительно просматривать эффекты при различных значениях параметров в рабочей среде Flash MX. Если Вы не предоставляете возможность Предварительного Просмотра (Live Preview), то пользователи смогут увидеть эффекты от установленных значений для параметров, используя инструмент Тестирование Клипа (Test Movie).
  
  
• Создание собственной иконки для отображения её прямо за названием компонента на панели Библиотека (Library), Проводник Клипа (Movie Explorer) и Компоненты (Components). Если Вы не создаёте свою иконку, то Вы сможете использовать иконку, предоставляемую программой Flash MX, по умолчанию.
  
  
• Добавление текстового описания компонента, которое поясняет назначение компонента для пользователей. Вы можете добавлять текстовое или XML-описание для компонента, которое будет появляться на панели Ссылка (Reference).
  
  

Диалоговое окно Component Definition.

Создание муви клипа для компонента

Что бы создать наш компонент, Вам вначале нужно добавить текстовое поле для ввода названия кнопки. Затем Вам нужно создать новый муви клип, содержащий кнопку и текстовое поле. И, наконец, Вам нужно создать новый слой в муви клипе компонента, куда следует добавить коды ActionScript с переменными параметров.

Откройте файл component_finish.fla в скачанном примере, если Вы хотите сверяться с ним во время работы.

1. Откройте файл component_start.fla в скачанном примере.
   
   
2. В главном меню выберите File->Save As и сохраните проект под именем component_start_Ваше_имя.fla
   
   
3. Нажмите кнопку Вставить Слой (Insert Layer) на Временной Линии Кадров (Timeline), что бы создать новый слой. Назовите слой Label.
   
   
4. Выделите первый кадр нового слоя, затем включите инструмент Текста (Text) и, зажав левую кнопку мыши на сцене, очертите прямоугольную область по размеру примерно с кнопку.
   
   Ничего страшного, если текст находится не над кнопкой – мы потом всё выровняем.
   
   
5. Введите текст метки. Например, мы ввели «Cancel».
   
   
6. Выделите текстовое поле на сцене.
   
   
7. Если инспектор Свойств (Property) ещё не открыт, то откройте его, выбрав Window->Properties.
   
   
8. В инспекторе Свойств (Property) для типа текста выберите Динамический Текст (Dynamic Text), Arial для шрифта, 14 для размера шрифта, Justify для выравнивания, а так же отключите опцию Выбираемый (Selectable – кнопка справа от выпадающего меню Line Type). Введите buttonLabel в качестве Имени Экземпляра (Instance Name), и label в качестве Переменной (Variable).
   
   
9. При помощи инструмента Курсора (Arrow) выделите кнопку и текстовое поле на сцене.
   
   
10. Выберите Window->Align, что бы отобразить панель Выравнивания (Align).
    
    
11. Щёлкните по кнопке Выровнять Горизонтально По Центру (Align Horizontal Center – вторая кнопка слева в строке Align), и по кнопке Выровнять Вертикально По Центру (Align Vertical Center – вторая кнопка справа в строке Align), что бы выровнять текст над кнопкой. Закройте панель Выравнивания (Align).
    
    Выделите текст при помощи инструмента Текста (Text) и измените его в размерах, если нужно. Текстовое поле не должно быть больше, чем кнопка.
    
    
12. Не снимая выделения с текста и кнопки, выберите Insert->Convert to Symbol или нажмите F8, что бы создать новый символ.
    
    
13. В диалоговом окне Конвертирование в Символ (Convert to Symbol) напечатайте component в качестве имени символа. В качестве типа символа выберите Муви Клип (Movie Clip). Убедитесь, что в опции Регистрация (Registration) выбрана центральная точка регистрации. Нажмите ОК.
    
    
14. Сохраните файл.
    
    Чаще сохраняйте вашу работу, что бы в случае чего не потерять данные.
    
    

Добавление кода ActionScript к компоненту

Теперь Вам необходимо добавить код ActionScript, содержащий переменные, связанные с параметрами компонента.

1. В открытом проекте component_start_Ваше_имя.fla выделите на сцене экземпляр символа component и выберите Edit->Edit Symbols, что бы отредактировать экземпляр. Отобразится Временная Линия Кадров (Timeline) для экземпляра.
   
   
2. На Временной Линии Кадров (Timeline) экземпляра нажмите кнопку Вставить Слой (Insert Layer), что бы создать новый слой. Назовите слой Actions.
   
   
3. Выделите первый кадр нового слоя.
   
   
4. Выберите Window->Actions или нажмите F9, что бы отобразить панель Действий (Actions).
   
   
5. Вставьте следующий код:
   
   buttonLabel.textColor = labelColor;
   myTextFormat = new TextFormat();
   myTextFormat.font = labelFont;
   buttonLabel.setTextFormat(myTextFormat);
   
   Этот код идентифицирует три переменные: labelColor, labelFont, и myTextFormat, которые контролируют шрифт и цвет надписи кнопки. Текст надписи контролируется переменной label, которую Вы будете использовать далее.
   
   
6. Выберите Edit->Edit Document (или нажмите кнопку «Назад» в верхнем левом углу сцены), что бы вернуться к редактированию общего документа. Сохраните Вашу работу.
   
   

Определение параметров

Что бы добавить параметры к компоненту, мы используем диалоговое окно Определение Компонента (Component Definition). Когда Вы создаёте параметр, то Вы даёте ему имя; указываете переменную, с которой связываете этот параметр; задаёте ему значение и тип. В данном уроке Вы создадите 3 параметра: Метка – для текста метки над кнопкой, Шрифт Метки – для типа шрифта, используемого в метке, и Цвет Метки – для цвета шрифта, используемого в метке.

1. Выделите муви клип component на панели Библиотеки (Library, Window->Library).
   
   
2. В верхнем правом углу панели Библиотека (Library) нажмите кнопку опций, и из меню выберите Component Definition.
   
   
3. В диалоговом окне Определение Компонента (Component Definition) нажмите кнопку Добавить Параметр (Add Parameter, кнопка с плюсиком), что бы добавить параметр.
   
   
4. В столбце Name (Имя) введите Button Label.
   
   Имя появится на панели инспектора Свойств (Property), во вкладке Параметры (Parameters).
   
   
5. В столбце Variable (Переменная) введите label.
   
   
6. В столбце Type (Тип) из выпадающего меню выберите Строковый (String).
   
   Выбирайте тип до того, как введёте значение в столбце Value (Значение). Если Вы выберите тип после того, как введёте значение, то в столбце Value (Значение) установится значение по умолчанию.
   
   
7. В столбце Value (Значение) введите Cancel (или другой текст метки, который Вы ввели ранее, в пятом пункте создания муви клипа для компонента).

   

   Панель параметров с введённым именем, переменной, значением и типом.

   
   
   
8. Повторяйте шаги 3-7 для двух дополнительных параметров: Шрифт Метки (Label Font) и Цвет Метки (Label Color).
   • Нажмите на кнопку Добавить Параметр (Add Parameter, кнопка с плюсиком), что бы добавить новый параметр. В столбце Name (Имя) введите Label Font, в столбце Variable (Переменная) введите labelFont, в столбце Type (Тип) введите Font Name, в столбце Value (Значение) введите Arial.
   • Нажмите на кнопку Добавить Параметр (Add Parameter, кнопка с плюсиком), что бы добавить ещё один новый параметр. В столбце Name (Имя) введите Label Color, в столбце Variable (Переменная) введите labelColor, в столбце Type (Тип) введите Color, в столбце Value (Значение) введите #000000.
   
   
   
9. Чуть ниже, в диалоговом окне Определение Компонента (Component Definition), включите опцию «Параметры заблокированы в экземплярах» (Parameters are locked in instances), что бы не допустить добавление или удаление параметров пользователями.
   
   Отключение данной опции позволяет пользователям добавлять или удалять параметры в экземплярах компонента.
   
   
10. Так же включите опцию «Отображать на Панели Компонентов» (Display in the Components panel), что бы компонент был доступен на Панели Компонентов.
    
    
11. Для Текста-Подсказки (Tool Tip Text) введите Pulsating Button.
    
    Подсказка появится, когда Вы наведёте мышкой на компонент на Панели Компонентов.
    
    
12.     Нажмите на кнопку Иконка Компонента (Component Icon) и убедитесь, что выбрана Иконка По Умолчанию (Default Icon).
    
    Далее в статье Вы научитесь создавать свои собственные иконки для компонентов.
    
    
13. Нажмите ОК, что бы закрыть диалоговое окно Определение Компонента (Component Definition).
    
    
14. Сохраните файл.
    
    

Создание собственной иконки

Далее мы создадим иконку для нашего компонента. Когда Вы добавляете компонент в клип, то его иконка появляется сразу за названием на Панели Компонентов (Components panel), при условии, что Вы включили опцию «Отображать на Панели Компонентов» (Display in the Components panel) в диалоговом окне Определение Компонента (Component Definition).

Замечание: Вы должны поместить Ваш .FLA-файл в директорию для компонентов программы Macromedia Flash MX, что бы компонент и иконка были доступны через пользовательский интерфейс программы. Вы проделаете это на заключительной стадии изготовления компонента.

Мы предоставили Вам растровое изображение, названное “icon” в качестве примера. Изображение находится в Библиотеке. Что бы воспользоваться этим изображением, начните с шага 6 в инструкциях ниже.

Что бы создать и импортировать Ваше собственное изображение для компонента, то пройдите шаги 1-5. Затем продолжайте выполнять следующие пункты, что бы определить иконку по умолчанию. На иконке не обязательно должно быть точное изображение компонента, но она должна отображать его суть. Например, мы создали изображение кнопки со скруглёнными углами.

1. В любом графическом редакторе создайте растровое изображение размерами 20x20 пикселей (так же можно сохранить в формате PNG).
   
   
2. Сохраните изображение.
   
   
3. В программе Macromedia Flash MX откройте Ваш проект, а так же откройте библиотеку.
   
   
4. В главном меню выберите File->Import->Import to Libraty и импортируйте изображение.
   
   
5. На панели Библиотеки (Library) создайте папку с названием FCustomIcons.
   
   
6. Поместите импортированное изображение в созданную папку.
   
   
7. Дважды кликните по изображению и введите в качестве имени component.
   
   Иконка в папке FCustomIcons должна иметь такое же название, как и у компонента, что бы она нормально функционировала.
   
   
8. Если иконка компонента не обновилась, то закройте и снова откройте панель Библиотеки (Library).
   
   
9. Сохраните файл.
   
   

Панель Библиотеки с компонентом, папкой FCustomIcons и нашей иконкой

На этом пока всё. В следующем выпуске Вы узнаете, как создать собственный интерфейс для компонента, а так же ещё несколько хитростей.

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

Как создать плавающий 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 Александр Манжулов. Все права защищены.

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