Создание flash adobe cs5

Обновлено: 02.07.2024

В данном разделе описывается процедура создания простого приложения ActionScript 3.0 с использованием компонентов Flash и инструмента разработки Flash. Приведен пример использования FLA-файла с кодом ActionScript на временной шкале, а также использования внешнего файла класса ActionScript с FLA-файлом, содержащим только компоненты из библиотеки. Как правило, возникает необходимость создания более сложных приложений с использованием внешних файлов класса, чтобы можно было обмениваться кодом между классами и приложениями и сделать ваши приложения более легкими в обслуживании. Дополнительные сведения о программировании на ActionScript 3.0 см. в руководстве Программирование на ActionScript 3.0.

Проектирование приложения

Первым примером приложения с использованием компонентов ActionScript является вариант стандартного приложения «Hello World», дизайн которого довольно прост:

Приложение будет называться Greetings.

Компонент TextArea используется для отображения приветствия, которое исходно звучит как Hello World.

Компонент ColorPicker позволяет изменять цвет текста.

Три компонента RadioButton позволяют задавать маленький, средний и большой размер текста.

Компонент ComboBox позволяет выбирать различные приветствия в раскрывающемся списке.

В приложении используются компоненты, приведенные на панели «Компоненты», а также создаются другие элементы приложения при помощи кода ActionScript.

Определившись с компонентами, можно приступать к созданию приложения.

Создание приложения Greetings

Следующие шаги позволяют создать приложение Greetings, используя инструмент разработки Flash для создания FLA-файла, поместить компоненты в рабочую область и вставить код ActionScript во временную шкалу.

Создание приложения Greetings в FLA-файле:

В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».

Откроется новое окно Flash.

На панели Flash «Компоненты» выберите компонент TextArea и перетащите его в рабочую область.

В окне «Свойства» при выбранном компоненте TextArea в рабочей области введите aTa в качестве имени экземпляра и введите следующую информацию:

Введите 230 для значения W (ширина).

Введите 44 для значения H (высота).

Введите 165 для значения X (положение по горизонтали).

Введите 57 для значения Y (положение по вертикали).

Введите Hello World! в качестве значения параметра text на вкладке «Параметры».

Перетащите компонент ColorPicker в рабочую область, поместите его слева от компонента TextArea и присвойте ему имя экземпляра txtCp. Введите следующую информацию в Инспекторе свойств:

Введите 96 для значения X.

Введите 72 для значения Y.

Перетащите по одному три компонента RadioButton в рабочую область и присвойте им имена экземпляров smallRb, largerRb и largestRb. Введите для них следующую информацию в Инспекторе свойств:

Введите 100 для значения W и 22 для значения H для каждого из этих компонентов.

Введите 155 для значения X.

Ведите 120 для значения Y для smallRb, 148 для largerRb и 175 для largestRb.

Введите fontRbGrp для параметра groupName каждого из компонентов.

На вкладке «Параметры» введите метки компонентов: Маленький, Средний, Большой.

Перетащите компонент ComboBox в рабочую область и присвойте ему имя экземпляра msgCb. Введите для него следующую информацию в Инспекторе свойств:

Введите 130 для значения W.

Введите 265 для значения X.

Введите 120 для значения Y.

На вкладке «Параметры» введите Greetings в качестве значения параметра prompt.

Дважды щелкните текстовое поле параметра dataProvider, чтобы открыть диалоговое окно «Значения».

Щелкните знак «плюс» и замените значение метки на Hello World!

Повторите предыдущий шаг для добавления значений метки Have a nice day! и Top of the Morning!

Если панель «Действия» еще не открыта, откройте ее, нажав клавишу F9 или выбрав пункт «Действия» в меню «Окно». Щелкните Кадр 1 на основной временной шкале и вставьте следующий код на панель «Действия»:

Первые три строки импортируют классы событий, используемые приложением. Событие возникает при взаимодействии пользователя с одним из компонентов. Следующие пять строк регистрируют обработчики событий для событий, которые будет прослушивать приложение. Событие click возникает для компонента RadioButton, когда пользователь щелкает его мышью. Событие change возникает, когда пользователь выбирает другой цвет в компоненте ColorPicker. Событие change для компонента ComboBox возникает, когда пользователь выбирает другое приветствие в раскрывающемся списке.

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

Вставьте следующий код на панель «Действия» для создания объекта TextFormat tf , при помощи которого приложение изменяет свойства стиля size и color текста компонента TextArea.

Вставьте следующий код для создания функции обработки событий rbHandler . Эта функция обрабатывает событие click , когда пользователь щелкает мышью один из компонентов RadioButton.

Функция использует выражение switch для проверки свойства target объекта event , чтобы определить, какой из переключателей вызвал событие. Свойство currentTarget содержит имя объекта, вызвавшего событие. В зависимости от того, какой из переключателей нажал пользователь, приложение изменяет размер текста компонента TextArea на 14, 18 или 24 пункта.

Введите следующий код для выполнения функции cpHandler() , которая обрабатывает изменение значения в компоненте ColorPicker:

Данная функция устанавливает свойство color объекта TextFormat tf на выбранный в компоненте ColorPicker цвет, затем вызывает метод setStyle() , чтобы применить цвет к тексту экземпляра aTa компонента TextArea.

Введите следующий код для выполнения функции cbHandler() которая обрабатывает изменение выбора в компоненте ComboBox:

Эта функция просто заменяет текст в компоненте TextArea текстом, выбранным в компоненте ComboBox: event.target.selectedItem.label .

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

Создание приложения Greetings2 с использованием внешнего файла класса:

В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».

Откроется новое окно Flash.

Перетащите каждый из следующих компонентов с панели «Компоненты» в библиотеку:

В скомпилированном SWF-файле будет использоваться каждый из этих активов, поэтому их необходимо добавить в библиотеку. Перетащите компоненты в нижнюю часть панели «Библиотека». При добавлении этих компонентов в библиотеку другие активы (например, List, TextInput и UIScrollBox) добавляются автоматически.

В окне «Свойства» в поле «Класс документа» введите Greetings2.

Если Flash отобразит предупреждение о том, что «определение класса документа не найдено», игнорируйте его. Определение класса Greetings2 будет выполнено в последующих шагах. Данный класс определяет основную функциональность приложения.

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

В диалоговом окне «Новый документ» выберите «Файл ActionScript» и нажмите кнопку «ОК».

Откроется новое окно сценария.

Вставьте следующий код в окно сценария:

Сценарий определяет класс ActionScript 3.0 под названием Greetings2. Сценарий выполняет следующее:

Импортирует классы, которые будут использоваться в файле. Обычно данные инструкции import добавляются по мере ссылки на различные классы в коде, но для краткости данный пример импортирует их все сразу.

Объявляет переменные, представляющие различные типы объектов компонентов, которые будут добавлены в код. Другая переменная создает объект TextFormat tf .

Определяет функцию конструктора, Greetings2() , для класса. В последующих шагах мы добавим строки к этой функции и добавим другие методы к классу.

Вставьте следующие строки кода в функцию Greeting2() :

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

Вставьте следующие строки кода после закрывающей скобки метода Greeting2() :

Эти строки выполняют следующее:

Создают экземпляры компонентов, используемых в приложении.

Задают размер, положение и свойства каждого компонента.

Добавляют каждый компонент в рабочую область при помощи метода addChild() .

После закрывающей скобки метода bldRadioButtons() добавьте следующий код метода setUpHandlers() :

Эти функции определяют прослушивателей событий для компонентов.

Разработка и выполнение последующих примеров

Разработав и выполнив приложение Greetings вы получили основные знания, необходимые для выполнения других примеров кода, приведенных в данной книге. Соответствующий код ActionScript 3.0 в каждом примере будет выделен и объяснен, а вы сможете вырезать и вставить каждый пример в этой книге в FLA-файл, скомпилировать и выполнить его.

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Лучшим способом создания SWF-файла обложки является копирование одного из файлов обложки, поставляемых с Flash, и использование его в качестве отправной точки. FLA-файлы для этих обложек можно найти в папке приложения Flash в Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. Чтобы законченный SWF-файл обложки стал доступным для выбора в диалоговом окне «Выбрать обложку», поместите его в папку Configuration/FLVPlayback Skins/ActionScript 3.0 либо в папке приложения Flash, либо в локальной папке пользователя Configuration/FLVPlayback Skins/ActionScript 3.0.

Так как цвет обложки можно задать отдельно от выбора обложки, нет необходимости редактировать FLA-файл для изменения цвета. Если вы создаете обложку определенного цвета и не хотите, чтобы он был редактируемым в диалоговом окне «Выбрать обложку», установите this.border_mc.colorMe = false; в коде ActionScript FLA-файла обложки. Дополнительные сведения о задании цвета обложки см. в разделе «Выбор предустановленной обложки».

Если посмотреть на установленные FLA-файлы обложек во Flash, может показаться, что некоторые элементы в рабочей области не нужны, но многие из них вложены в слои направляющих. При интерактивном просмотре с 9-зонным масштабированием можно увидеть, что на самом деле отобразится в SWF-файле.

В последующих разделах приводятся описания более сложных настроек и изменений фрагментов роликов SeekBar, BufferingBar и VolumeBar.

Использование макета обложки

При открытии FLA-файла обложки Flash вы увидите, что фрагменты роликов обложки расположены на основной временной шкале. Эти ролики и код ActionScript, который находится в том же кадре, определяют расположение элементов управления при исполнении.

Хотя слой макета имеет такой вид, какой будет иметь обложка при исполнении, содержимое этого слоя не видимо при исполнении. Он используется только для расчета размещения элементов управления. Другие элементы управления в рабочей области используются при исполнении.

Каждый из роликов местозаполнителей имеет свое имя экземпляра. Ролики местозаполнителей имеют имена playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc и volumeBarHandle_mc. Часть, цвет которой изменяется при выборе цвета обложки, называется border_mc.

Неважно, какой из роликов используется для элемента управления. Как правило, для кнопок используется ролик нормального состояния. В отношении других элементов управления, для удобства используется ролик для этого элемента управления. Что действительно важно, так это положение x (по горизонтали) и положение y (по вертикали), а также ширина и высота местозаполнителя.

Помимо стандартных элементов управления можно иметь сколько угодно дополнительных роликов. Единственным требованием к этим роликам является то, что для их символов в библиотеке должен быть установлен флажок «Экспорт для ActionScript» в диалоговом окне «Связывание». Пользовательские ролики в слое макета могут иметь любое имя экземпляра, кроме зарезервированных имен, перечисленных выше. Имя экземпляра требуется только для сценария ActionScript роликов при определении макета.

Ролик border_mc особенный. Если установить свойство FlvPlayback.skinAutoHide на значение true, обложка отображается при наведении указателя мыши на ролик border_mc. Это важно для обложек, которые отображаются за границами видеопроигрывателя. Сведения о свойстве skinAutoHide см. в разделе «Изменение поведения обложек».

В FLA-файлах Flash border_mc используется для хромирования и рамки кнопок Forward и Back.

Ролик border_mc является также частью обложки, значения альфа-канала и цвета которой были изменены при помощи свойств skinBackgroundAlpha и skinBackgroundColor . Чтобы значения цвета и альфа-канала были настраиваемыми, ActionScript в FLA-файле обложки должен содержать следующую строку:

ActionScript и макет обложки

Следующий код ActionScript, как правило, применим ко всем элементам управления. Некоторые элементы управления имеют особый сценарий ActionScript, который определяет дополнительное поведение, которое описано в разделе, посвященном конкретному элементу управления.

Исходный код ActionScript представляет собой большой раздел, в котором указаны имена классов для каждого состояния каждого компонента. Все эти имена классов приведены в файле SkinOverAll.fla. Например, для кнопок Pause и Play такой код выглядит следующим образом:

Имена классов не имеют фактических внешних файлов класса; они просто указаны в диалоговом окне «Связывание» для всех фрагментов роликов в библиотеке.

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

За этим разделом следует код ActionScript, который определяет минимальную ширину и высоту обложки. Эти значения отображаются в диалоговом окне «Выбрать обложку» и используются при исполнении для предотвращения задания размера обложки меньше минимального. Если вы не хотите указывать минимальный размер, задайте неопределенное значение или значение меньше или равное нулю.

К каждому местозаполнителю можно применить следующие свойства:

Boolean. Располагает элемент управления относительно левого края экземпляра FLVPlayback. Значением по умолчанию является true , но если свойство anchorRight установлено явным образом на значение true , то значением по умолчанию будет false .

Boolean. Располагает элемент управления относительно правого края экземпляра FLVPlayback. Значением по умолчанию является false .

Boolean. Располагает элемент управления относительно нижнего края экземпляра FLVPlayback. Значением по умолчанию является true , но если свойство anchorTop установлено явным образом на значение true , то значением по умолчанию будет false .

Boolean. Располагает элемент управления относительно верхнего края экземпляра FLVPlayback. Значением по умолчанию является false .

Если оба свойства — anchorLeft и anchorRight — имеют значение true , элемент управления масштабируется по горизонтали при исполнении. Если оба свойства — anchorTop и anchorBottom — имеют значение true , элемент управления масштабируется по вертикали при исполнении.

Эффект применения этих свойств можно увидеть на примере их использования в обложках Flash. Только элементы управления BufferingBar и SeekBar поддаются масштабированию. Они накладываются поверх друг друга, и оба их свойства — anchorLeft и anchorRight — имеют значение true . Все элементы управления слева от BufferingBar и SeekBar имеют свойство anchorLeft установленное на true , а все элементы управления, расположенные справа, имеют свойство anchorRight установленное на true . Свойство anchorBottom всех элементов управления установлено на значение true .

Можно попытаться отредактировать фрагменты роликов на слое макета так, чтобы создать обложку с элементами управления, расположенными сверху, а не снизу. Для этого требуется просто переместить элементы управления вверх относительно video_mc и установить свойство anchorTop всех элементов управления на значение true .

Строка буферизации

Строка буферизации имеет два фрагмента роликов: bufferingBar_mc и bufferingBarFill_mc. Положение каждого ролика относительно другого ролика в рабочей области имеет значение, так как такое относительное положение сохраняется. Строка буферизации использует два отдельных ролика, так как масштабирование применяется только к bufferingBar_mc, а не к bufferingBarFill_mc.

К ролику bufferingBar_mc применяется 9-зонное масштабирование, поэтому при масштабировании границы не искажаются. Ролик bufferingBarFill_mc очень широкий, поэтому он не нуждается в масштабировании. Для него автоматически создается маска при исполнении для отображения части вытянутого ролика bufferingBar_mc. По умолчанию точные размеры маски будут сохранять равные поля слева и справа в bufferingBar_mc на основе разницы значений положений x (по горизонтали) роликов bufferingBar_mc и bufferingBarFill_mc. Расположение можно настроить при помощи кода ActionScript.

Если строка буферизации не нуждается в масштабировании или не использует 9-зонное масштабирование, ее можно настроить как компонент BufferingBar пользовательского интерфейса для воспроизведения FLV-файлов. Дополнительные сведения см. в разделе «Компонент BufferingBar».

Строка буферизации имеет дополнительное свойство:

Задает имя экземпляра заполнителя строки буферизации. Значением по умолчанию является bufferingBarFill_mc.

Строка поиска и регулятор громкости

Строка поиска имеет два фрагмента роликов: seekBar_mc и seekBarProgess_mc. Положение каждого ролика относительно другого ролика в слое макета имеет значение, так как такое относительное положение сохраняется. Хотя оба ролика поддаются масштабированию, seekBarProgress_mc нельзя вложить в seekBar_mc, так как seekBar_mc использует 9-зонное масштабирование, которое плохо работает с вложенными фрагментами роликов.

К ролику seekBar_mc применяется 9-зонное масштабирование, поэтому при масштабировании границы не искажаются. Ролик seekBarProgress_mc также поддается масштабированию, но искажение присутствует. К нему не применяется 9-зонное масштабирование, потому что это заполнитель и его искажение не заметно.

Ролик seekBarProgress_mc работает без fill_mc, так же как и ролик progress_mc работает в компонентах пользовательского интерфейса для воспроизведения FLV-файлов. Другими словами, для него не создается маска и он масштабируется по горизонтали. Точные размеры seekBarProgress_mc при 100 % определяются левым и правым полями ролика seekBarProgress_mc. Эти размеры по умолчанию равны и основаны на разнице значений положений x (по горизонтали) роликов seekBar_mc и seekBarProgress_mc. Эти размеры можно настроить при помощи кода ActionScript во фрагменте ролика строки поиска, как показано в следующем примере:

Этот код можно вставить либо на временную шкалу фрагмента ролика SeekBar, либо вместе с другим кодом ActionScript на основную временную шкалу. Если настройка выполняется при помощи кода, а не за счет изменения макета, нет необходимости помещать заполнитель в рабочую область. Достаточно того, чтобы он присутствовал в библиотеке и был настроен на экспорт для ActionScript в Кадр 1 с правильным именем класса.

Как и в случае с компонентом SeekBar пользовательского интерфейса для воспроизведения FLV-файлов, для строки поиска можно создать фрагмент ролика заполненности. Если строка поиска не нуждается в масштабировании или нуждается в нем, но не использует 9-зонное масштабирование, можно установить progress_mc или fullness_mc при помощи любого из методов, используемых для компонентов пользовательского интерфейса для воспроизведения FLV-файлов. Дополнительные сведения см. в разделе «Фрагменты роликов хода выполнения и заполненности».

Так как регулятор громкости в обложках Flash не поддается масштабированию, он построен тем же образом, что и компонент VolumeBar пользовательского интерфейса для воспроизведения FLV-файлов. Дополнительные сведения см. в разделе «Компоненты SeekBar и VolumeBar». Исключением является маркер, который реализован по-другому.

Маркеры SeekBar и VolumeBar

Маркеры SeekBar и VolumeBar расположены в слое макета рядом со строкой. По умолчанию левое поле, правое поле и положение по оси y маркера задаются на основе его положения относительно фрагмента ролика строки. Левое поле определяется разницей между положением x (по горизонтали) маркера и положением x (по горизонтали) строки, а правое поле равно левому полю. Эти значения можно настроить при помощи ActionScript во фрагменте ролика SeekBar или VolumeBar. В следующем примере приведен тот же код ActionScript, который используется с компонентами пользовательского интерфейса для воспроизведения FLV-файлов:

Этот код можно вставить либо на временную шкалу фрагмента ролика SeekBar, либо вместе с другим кодом ActionScript на основную временную шкалу. Если настройка выполняется при помощи кода, а не за счет изменения макета, нет необходимости помещать маркер в рабочую область. Достаточно того, чтобы он присутствовал в библиотеке и был настроен на экспорт для ActionScript в Кадр 1 с правильным именем класса.

Не взирая на эти свойства маркеры являются простыми фрагментами роликов, устроенными таким же образом, что и маркеры в компонентах пользовательского интерфейса для воспроизведения FLV-файлов. Оба имеют фоновые прямоугольники со свойством alpha установленным на 0. Они служат для увеличения области попадания и не являются обязательными.

Ролики фона и основного цвета

Фрагменты роликов chrome_mc и forwardBackBorder_mc реализованы как ролики фона.

Из фрагментов роликов ForwardBackBorder, ForwardBorder и BackBorder в рабочей области и кнопок-местозаполнителей Forward и Back единственным роликом, не расположенным в слое направляющих, является ForwardBackBorder. Фактически кнопки Forward и Back используются только в обложках.

Единственным требованием к этим роликам является то, что для них должен быть задан экспорт для ActionScript в Кадр 1 в библиотеке.

Как известно, эти два продукта прекрасно уживаются вместе. Что удивительно — многие об этом не знают. Они давятся, плюются, но пишут код в Flash CS 5.
Данная статья рассказывает, как скрестить эти два продукта и как побороть мелкие неприятности в процессе.

Зачем нам Flash Builder, если есть Flash?
Ответ достаточно очевиден:
1. Нормальный Debug (condition breakpoints и прочие прелести)
2. Нормальный редактор кода с хоть каким-то, но рефакторингом
3. Version control
4. Интеграция с багтрэкерами
5. Другие вкусности Eclipse

Проблемы:
1. Абсолютные пути
2. Version control
3. Flex library projects и их подключение

Под катом описание мягкого способа создания проекта, при котором не будет проблем ни с svn, ни с абсолютными путями.

Скрещивание

1. Открываем Flash CS5 и создаем ActionScript 3.0 проект.
2. Сохраняем его в папку Workspace-а Flash Builder-а
Например:
/Users/alex/Documents/Adobe Flash Builder 4/labs/TestFlashProject.fla
Где
/Users/alex/Documents/Adobe Flash Builder 4/labs/
Путь к workspace

Это промежуточный шаг, он позволит нам побороться с тем, что при создании проекта Flash Builder подключит сырцы как external folder.

3. Открываем Flash Builder, выбираем нужный нам workspace (File -> Switch workspace)
4. Возвращаемся во Flash Professional. Идем в свойства документа (щелкнув по фрейму мышой и перейдя в Properties). Нам надо назначить Document класс. Щелкаем по Edit class definition:

Вводим имя класса и выбираем в списке приложений для редактирования Flash Builder:

Давим OK. Открывается Flash Builder с диалогом создания проекта:

Менять нам ничего не надо, просто давим Finish.

У нас получился проект TestFlashProject. Основной класс НЕ СОЗДАЛСЯ и это просто отлично.
5. Закрываем FLA файл (предварительно сохранив)
6. Переносим руками FLA файл из папки Workspace-а в папку проекта
7. Переключаемся в Flash Builder, открываем свойства проекта, переходим в свойствах на Flash Professional:

Выделяем путь к FLA и давим Edit. Указываем новый путь к FLA. Получится вот так:

Давим ОК.

Далее сам по себе откроется Flash Professional (если вы его закрыли), и во Flash Builder-е появится диалог создания основного класса:

Создаем и радуемся. Первая стадия закончена.
fla файл лежит в папке проекта. Flash builder project связан с ним относительным путем. Никаких проблем с переносом.
Во Flash Builder-е теперь можно давить Cmd(ctrl) + Enter для компилляции, дебага и запуска и радоваться жизни.

Собственно, после того, как все файлы проекта оказались в папке проекта и исчезли все External folder-ы, никакой проблемы нету. Работаем как с обычным Flash Builder проектом.
(Если интересно, могу рассказать как зацепится к svn, но все достаточно очевидно и просто)

Flex library projects

Небольшое затруднение может вызвать подключение Flex library project-ов.
Зачем их подключать? Если вы до сих пор таскаете source code ядра однотипных приложений копипастом as файлов из одного в другое, у меня для вас плохая новость.

Итак, имеется Flex Library Project. Для простоты — он лежит в том-же workspace. Например:

Простое подключение его через свойства проекта во Flash Builder-е приведет к неприятности: Flash Professional при компиляции его не увидит.

(Однако подключить его надо, дабы Flash Builder нормально видел классы)

Ладно, не хочешь — заставим. Идем в Flash Professional, открываем наш TestFlashProject.fla
File -> ActionScript settings:

Добавляем путь к swc, а затем правим его на относительный (мы же хотим, что бы с version control все было хорошо, не так ли? ). Получится следующее:

Давим OK, потом Cmd(Ctrl)+Enter…

Ура! Все компилится, работает и, самое главное, юзает относительные пути!