Создание flash adobe cs5
Рисование, Дизайн и Разработка игр
Главная » Создание кнопки в Adobe Flash CS5
Создание кнопки в Adobe Flash CS5
В этом уроке рассмотрим создание кнопки, которая при нажатии будет перенаправлять на сайт.
Создаем новый документ «ActionScript 3.0»
Создание кнопки: нарисуем объект на сцене
На панели «timeline» создаем два слоя, первый называем «actions» , второй — «button» .
Теперь выберем слой «button» и нарисуем на нем кнопку при помощи инструмента «Rectangle Primitive Tool» .
Сделаем заливку синего цвета и немного закруглим углы.
Преобразование объекта в символ-кнопку
Преобразуем объект в символ. Для этого, используя инструмент «Selection Tool» , который находится на правой панели, выбираем объект и нажимаем правую кнопку мыши, в появившемся контекстном меню выбираем «Convert to Symbol» , в поле «type» устанавливаем»button» , в поле «name» дадим имя объекту «button1» .
Настройка кнопки
Два раза щелкаем по объекту. На панели «timeline» появилось четыре кадра: «Up» , «Over» , «Down» и «Hit» .
Кадр «Up» отображает кнопку в обычном состоянии, когда на нее не наведен курсор и когда она не нажата. Кадр «Over» показывает состояние кнопки, когда на ней находится курсор, а «Down» отображает внешний вид кнопки при нажатии на нее мышью. Кадр «Hit» отображает кнопку после нажатия, мы его использовать не будем.
Для «Up» уже создан кадр, теперь создадим ключевые кадры для других элементов. Для этого выберем нужный кадр и правой кнопкой мыши вызовем контекстное меню, в котором укажем «Insert Keyframe».
Теперь нужно отредактировать внешний вид кнопки в каждом кадре по отдельности. Элемент «Up» оставим без изменений, выбираем «Over» и направляемся в верхнюю правую панель программы. В настройках «Color» выбираем цвет для кнопки немного светлее первоначального.
Для элемента «Down» установим цвет темнее обычного.
Давайте сделаем так, чтобы при нажатии кнопка немного уменьшалась. Для этого находясь на выделенном кадре «Down» , выбираем на правой панели инструмент «Free Transform Tool» .
Зажимаем клавиши Alt+Shift и уменьшаем размер объекта.
Запуск приложения
Можно посмотреть, что получилось. Для этого перейдите в главное верхнее меню «File -> Publish Preview -> Flash» или просто нажмите ctrl+enter на клавиатуре.
Добавление текста на кнопку
Теперь давайте добавим на кнопку текст. Чтобы это сделать, создайте, находясь в режиме редактирования button1, на панели «timeline» еще один слой, на который мы поместим произвольный текст.
Добавление обработчика события при нажатии на кнопку
Чтобы при нажатии на кнопку происходило какое-то действие, нужно внести программный код. Для этого переходим из режима редактирования кнопки в режим сцены.
При помощи инструмента «Selection Tool» выбираем объект и в правой панели программы, в настройках «Properties» в поле «Instance Name» вводим имя кнопки, для того, чтобы можно было использовать объект в режиме программирования. Давайте назовем объект «btn1» .
Теперь выбираем слой «actions» , далее в главном верхнем меню переходим в режим редактирования кода «Window -> Actions» или нажимаем F9.
Давайте напишем первую строчку кода. Имейте ввиду, что язык ActionScript3.0 чувствителен к регистру, это означает, что слово с маленькой буквы и с большой он считает разными. Итак, пишем:
[code language=»actionscript3″]
btn1.addEventListener(MouseEvent.CLICK, click1);
[/code]
Рассмотрим эту строчку немного подробнее:
btn1 — это кнопка, имя которой давали в режиме редактирования сцены;
addEventListener — здесь добавляем обработчик событий для кнопки;
MouseEvent.CLICK — событие — нажатие кнопки мыши;
click1 — это будущая функция, которая будет делать то, что мы хотим, чтобы происходило при нажатии на кнопку.
Напишем функцию для обработки кнопки:
[code language=»actionscript3″]
function click1(e:MouseEvent):void var url:String = "httpsss://www.jwinters.ru";
var urlRequest:URLRequest = new URLRequest(url); navigateToURL(urlRequest);
>
[/code]
Рассмотрим некоторые моменты в коде:
function click1(e:MouseEvent):void — имя функции с параметром, которая не будет возвращать никаких значений;
var url:String = "httpsss://www.jwinters.ru"; — создаем строковую переменную и сразу назначаем ей текстовое значение в виде url-адреса.
var urlRequest:URLRequest = new URLRequest(url); Чтобы кнопка перенаправила на url-адрес, нужно создать переменную с типом URLRequest и передать ей в качестве параметра стоковое значение или текстовую переменную с таким значением.
navigateToURL(urlRequest); — перенаправление на url-адрес.
Нажимаем ctrl+enter и смотрим, что получилось.
Чтобы сохранить проект в файл, в главном верхнем меню переходим: «File -> Export -> Export Movie…» .
В данном разделе описывается процедура создания простого приложения 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 имя Greetings.fla и нажмите кнопку «Сохранить».
На панели 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 .
Выберите меню «Управление» > «Тестировать ролик» или нажмите Ctrl+Enter для компиляции кода и тестирования приложения Greetings.
Далее описывается процедура построения того же приложения с использованием внешнего класса ActionScript и FLA-файла, который имеет только требуемые компоненты в библиотеке.
Создание приложения Greetings2 с использованием внешнего файла класса:
Выберите команды «Файл» > «Создать».
В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».
Откроется новое окно Flash.
Выберите «Файл» > «Сохранить», присвойте файлу Flash имя Greetings2.fla и нажмите кнопку «Сохранить».
Перетащите каждый из следующих компонентов с панели «Компоненты» в библиотеку:
В скомпилированном SWF-файле будет использоваться каждый из этих активов, поэтому их необходимо добавить в библиотеку. Перетащите компоненты в нижнюю часть панели «Библиотека». При добавлении этих компонентов в библиотеку другие активы (например, List, TextInput и UIScrollBox) добавляются автоматически.
В окне «Свойства» в поле «Класс документа» введите Greetings2.
Если Flash отобразит предупреждение о том, что «определение класса документа не найдено», игнорируйте его. Определение класса Greetings2 будет выполнено в последующих шагах. Данный класс определяет основную функциональность приложения.
Сохраните файл Greetings2.fla.
Выберите команды «Файл» > «Создать».
В диалоговом окне «Новый документ» выберите «Файл ActionScript» и нажмите кнопку «ОК».
Откроется новое окно сценария.
Вставьте следующий код в окно сценария:
Сценарий определяет класс ActionScript 3.0 под названием Greetings2. Сценарий выполняет следующее:
Импортирует классы, которые будут использоваться в файле. Обычно данные инструкции import добавляются по мере ссылки на различные классы в коде, но для краткости данный пример импортирует их все сразу.
Объявляет переменные, представляющие различные типы объектов компонентов, которые будут добавлены в код. Другая переменная создает объект TextFormat tf .
Определяет функцию конструктора, Greetings2() , для класса. В последующих шагах мы добавим строки к этой функции и добавим другие методы к классу.
Выберите «Файл» > «Сохранить», присвойте файлу имя Greetings2.as и нажмите кнопку «Сохранить».
Вставьте следующие строки кода в функцию Greeting2() :
Функция теперь должна выглядеть следующим образом:
Вставьте следующие строки кода после закрывающей скобки метода Greeting2() :
Эти строки выполняют следующее:
Создают экземпляры компонентов, используемых в приложении.
Задают размер, положение и свойства каждого компонента.
Добавляют каждый компонент в рабочую область при помощи метода addChild() .
После закрывающей скобки метода bldRadioButtons() добавьте следующий код метода setUpHandlers() :
Эти функции определяют прослушивателей событий для компонентов.
Выберите «Файл» > «Сохранить», чтобы сохранить файл.
Выберите меню «Управление» > «Тестировать ролик» или нажмите Ctrl+Enter для компиляции кода и тестирования приложения Greetings2.
Разработка и выполнение последующих примеров
Разработав и выполнив приложение 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 в библиотеке.
На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.
Предисловие:
После написания первого урока про создание персонажа для гипотетической игры, думаю, абсолютно логично для тех, кто его читал, будет перейти к анимации нашего героя. В то же время уже прошел довольно хороший временной период моей работы с новым планшетом компании Wacom. И скажу я вам: он стал моей третей рукой. Или продолжение моей руки. Как будет угодно. И я читал комментарии к первому уроку насчет программного обеспечения компании. Хочу встать на защиту. Даже если кому-то не понравится. Могу сказать, что сейчас у меня ничего не вылетает. Все работает как часы. А таблетка от Вэком настолько органичный инструмент, что расставаться с ним не хочется ни в каких ситуациях.
Приступим же к уроку номер два.
P.S. Урок предназначен для начального уровня подготовки. Но я рассчитываю, что вы все же, открывали хоть пару раз flash-редактор от компании Adobe и пробовали что-нибудь там делать. Если нет,то придется прорываться с боем. Я в этом уроке не буду рассматривать рабочую среду этого пакета. Таких уроков много.
Часть первая. Подготовка.
Напомню, у нас был нарисован наш персонаж в первом уроке - См. Рис.1.
Если все выполнялось, как я писал в первом уроке, то у нас персонаж уже разрезан на части и с мечом, оружие было домашним заданием. См. Рис.2
Теперь нужно всю эту расчлененку преобразовать в формат *.jpg файлов. Это конечно можно делать через copy past. Но проще использовать сценарий фотошопа, который, если я ничего не путаю, уже с Photoshop CS4 поставляется в начальной сборке. А раньше нужно было устанавливать его со стороннего источника.
Подготовка к сценарию. У вас должна каждая часть тела находиться на отдельном слое.
Затем идем в файл сценарии экспортировать слои в кадры. См.Рис. 3. и рис.4.
Немного поэкспериментировав, поймете, что процесс очень прост. И помогает с автоматизацией процесса. Экономит кучу времени. И если вы не мусорили на листе, и нет каких-нибудь невидимых для вас пикселей графики, все файлы должны получиться размером именно под каждую часть тела. Посмотрите ниже, как сохранилось через сценарий у меня.
Комплект солдата:
Идем дальше. Запускаем Adobe flash CS5 т.к. именно он установлен у меня. В вашем случае любой другой. Т.к. мы программировать не будем сильно, забегая вперед, скажу, что будет одна строчка. Но ее писать не обязательно. Просто для удобства ставлю.
Часть.2.
Правила хорошего тона и подготовка к анимации.
Если этот урок читает какой-нибудь более-менее продвинутый CG-художник или дизайнер, то конечно же он знает, что все слои и мувиклипы нужно называть понятными, своими именами. И то же самое должно у вас быть на винчестере. А то не найдете через год ничего. А если найдете, то не поймете, что же такого вы делали. Это я вам точно говорю. Сам так не раз обжигался. Изначально наше рабочее поле выглядит вот так. Рис.5.
Сохраняем файл. Переименовываем первый слой на таймлайне в mcMain или как будет удобно вам. И кидаем все части в библиотеку. Это шаг показан на рис. 6
Создаем мувиклип, с которым будем работать, нажатием ctrl+F8. см.рис. 7
Я назвал наш клип soldier_animation и поставил галочку «экспортировать для ActionScript» Это обычно нужно для программистов. Чтобы управлять клипом и анимацией в нем.
Переходим к составлению нашего героя в одно целое.
Обратите внимания, что я каждую часть тела положил на свой слой см. рис. 8.
Теперь каждую часть нужно преобразовать в клип. Чтобы им можно было управлять в анимации. Делаем это так. Левой кнопкой мыши кликаем, или просто пером планшета наводим например на голову и правой кнопкой вызываем контекстное меню, если пером вызываем меню, то по умолчанию верхняя кнопочка. Выбираем пункт «преобразовать в символ» см. рис. 9.
И называем, например – soldier_head. Не допускайте пробелов в названии никогда. Ни в названии файлов, ни в названии клипов. Это убережет вас от того, что программист будет вас ругать, что не может добраться до клипа. Используйте для пробелов нижнее подчеркивание. Это разделяет слова и в тоже время не используется пробел. У меня это уже привычка до автоматизма доведена. Называем таким образом все части тела. См Рис. 10.
В рис.10 показано, что все слои названы вменяемо и уложены аккуратно в папочку с названием «Soldier». Это вдруг если у нас в проекте появятся еще персонажи. Тогда они не будут путаться. И вы не забудете где чьи руки и ноги.
Перед началом анимации очень важно проверить, что все точки вращения у мувиклипов частей тела стоят, где надо. См. Рис. 11.
Я поставил точки на рис.11. Где разместил точки вращения у моих клипов. Например, рука: у нее точка стоит в основания членения руки и тела. Этот метод я понял сам в течении долгих опытов с анимацией. И подсказываю вам. Такое размещение позволяет легко манипулировать движением рук. А так как кости не позволяется применять к растровым картинкам в CS5, этот метод заменит нам скелет. Плюмаж: тоже делаем точку на основании.
Если вы не знаете, где эти точки находятся в программе, то выберите любой клип левой кнопкой мышки (или кликом пера) и нажмите Q. У вас появится квадрат с точкой посередине. См. рис. 12
Смещаем эту точку к основанию, где крепится часть тела. У головы - это основание черепа. См. рис. 13.
Часть 3. Отступление про планшет Wacom Intuos 5 Medium и анимацию.
В этом уроке мы с вами сделаем только анимацию векторных рисунков. И из-за этого на полную мощность я не использую в данном случае планшет – не сильно востребована чувствительость пера к давлению, т.к. весь солдат уже нарисован в первом уроке. Но преимущества, несомненно, есть. Как помните из первого урока, я уже говорил, что можно настроить кнопки планшета так, как вам нужно для любой программы. Я оставил кнопки и кольцо пока по умолчанию настроенными. Т.к. еще не определился нужно ли менять, пока удобно. Если конкретнее, то я пользуюсь увеличением масштаба на кольце Touch ring, на одну из кнопок Express Кeys назначил отмену действие (ctr
+z). Еще мне удобно использовать круговое меню (Radial menu), для сохранения файла. Хотя я наверное сделаю сохранение на одну из кнопок Express Keys, попозже.
И конечно же не надо упускать из виду тот факт, что принцип пера не такой как у мыши. С планшетом работает так называемое «абсолютное позиционирование». Ты попадаешь курсором сразу туда, куда тебе нужно, только ткнув пером на планшете в нужное место. И не нужно как при использовании мышки вести весь этот путь (те кто пользуются планшетами, знают о чем я). Это в разы ускоряет навигацию по интерфейсу программы, если привыкнуть и вовсе можно убрать мышь со стола. И если бы нужно было делать рисунки именно во flash-редакторе (а не брать сделанные предваритьно в Photoshop), то планшет Wacom Intuos с размером рабочей поверхности ~A5 мне бы пригодился гораздо в больше степени. Я не утрирую, я реально до сих пор впечатлен, насколько круче с каждым годом становятся таблетки от Wacom.
Вернемся к анимации. Сначала добавим внутри клипа нашего солдата еще один слой на таймлайне. В нем мы будем размещать метки для программистов. Чтобы было проще управлять всей линейкой анимации. И расставим флаги соответственно тому, какие движения у нас будут. См. рис. 14.
Размер кадров пока поставлен произвольно, позже поправим.
Анимация у нас будет такая:
Солдат стоит. (stay)
Солдат идет. (walk)
Солдат бьет. (punch)
Солдат умирает. (death)
Солдат стоит
В анимации стояния, основная анимация - это дыхание. Когда мы дышим, то у нас поднимается грудь и плечи. Создайте ключевые кадры в том состоянии, что уже есть как на рис. 15. Это 10 –й кадр, 20 кадр и 21 кадр.
Устанавливаем наш курсор на 10 кадр. И создаем классическую анимацию движения во флеше.
Двигаем руки и туловище чуть вверх, можно немного качнуть руки, голову чуть вверх вместе с телом и отклоняем чуть назад.
Посмотреть анимацию покоя можно здесь: http://penka.su/flash/Soldier/soldier_stay.swf
Солдат сам должен возвращаться в первоначальное состояние. Если вы изначально поставили все кадры.
На двадцатом кадре вы, наверное, заметили, что стоит actionscript. Это я проверяю анимацию. Чтобы не ждать всего таймлайна. Там простой код.
gotoAndPlay("stay") – когда доходит до 20-го кадра. Все начинается сначала. Не переходя дальше по таймлайну. Меняя слово флага «stay», можно так зациклить любой участок. Так в будущем проверять каждый участок.
Солдат идет
Анимация ходьбы, наверное, - самое сложное. Ну по крайней мере, у меня уходит на это довольно много времени.
Поставьте сразу также по два ключевых кадра на основных флажках, чтобы не забыть. См. рис. 16.
Я начинаю анимировать шаг с ближней ко мне ноги. Полностью делая анимацию шага. Пока мне не понравится. Далее делаю анимацию второй дальней ноги. Теперь подробнее. Как же я сделал шаг?
Таймлайн рис.17.
Кадр окончания анимации шага у меня стоит под номером 37. Сам таймлайн разбит на 25, 29, 33 кадре. Начало анимации шага на 21м кадре. Теперь покажу на скриншотах, как выглядят ключевые кадры. Далее все за нас сделает анимация движения.
25 кадр:
29 кадр:
33 кадр:
21й кадр и 37й кадр - это кадры покоя, в которых у нас просто стоит солдатик.
Смотрите по ссылке анимацию шага. Без участия пока что остальных частей тела
Тело я анимирую после ног. Т.к. у нашего скелета такая последовательность соединений.
Ноги -> тело -> руки -> меч -> голова -> плюмаж
И план анимации строю, основываюсь на этом принципе.
Далее я анимирую руки. Пройдитесь по комнате, посмотрите как двигаются руки. Т.е. обратите внимание на руки и ноги. Чтобы держать равновесие. У нас руки двигаются наоборот. Например, если левая нога идет вперед, значит левая рука назад, правая нога назад, правая рука вперед.
Размах рук и дальность шага можно отрегулировать, сделав немного длиннее линейку анимации кадров на таймлайне. И расставив ноги немного шире при ходьбе. Бег анимируется также только наоборот. Кадры уменьшаются, чтобы ноги двигались быстрее.
У меня таймлайн выглядит так см. рис. 18.
Не забудьте код в 20- кадре убрать или закомментировать вот так
А то анимация не будет играть дальше состояния покоя. И соответственно сейчас у меня стоит кадр с кодом в конце анимации шага. Чтобы он повторялся. Можно вообще код не использовать. Только сложно оценить какую-то часть анимации.
В итоге попробуйте создать анимацию головы и плюмажа. Представьте, как бы вам хотелось, чтобы двигался ваш персонаж. Голова очень крупная. Она может поменять все ощущение анимации. Сделаю немного «подпрыгивающую голову». Если вы были внимательны, то увидели, что анимация рук у нас сделана всего одним ключевым кадром. А вот голову буду делать так же как и ноги с телом. С тремя ключевыми кадрами посередине. Так можно сделать подпрыгивание головы. Если сделать один кадр, то голова будет двигаться слишком плавно.
Чтобы сделать подпрыгивание головы, в 25м кадре поднимаем голову вместе с телом. В 29 опускаем голову вместе с телом. И в конце в 33м кадре поднимаем голову немного выше тела. И в 73 кадре голова возвращается в исходное положение.
Удар.
Чтобы сделать удар, нужно понимать тоже, как делается удар мечем. Это нужно опять встать и попробовать ударить воображаемым мечом. Если вы это выполнили, то увидите, что сначала заносится рука с оружием вверх, немного как бы замирает и резко падает, делая рубящий удар вниз. Попробуем это повторить.
Сначала анимируем одну только руку с мечом.
Если делать резкий взмах мечом, то нужно следить, что автоматическая анимация не сделал винт хвостом, и не подвинула меч в ненужное место. У меня кадры на таймлайне после анимации удара выглядят следующим образом см. рис. 19.
Далее делаем анимацию всех частей тела. Не забываем, что все сочленения работают друг с другом взаимосвязано.
Для анимации удара я так же подготовил другую голову персонажа. Не пугайтесь, я сильно не изменял, только нарисовал закрытые глаза. Эту же голову можно использовать для анимации смерти персонажа.
Голова с закрытыми глазами.
Я ее поставил в момент удара. Полностью анимацию удара можно посмотреть, ниже, перейдя по ссылке
Вот и все. Не так и сложно, если разобраться.
Послесловие:
Анимацию смерти я не хочу делать. Как-то печально убивать даже в шутку своего персонажа. Если вы поняли суть урока, то с легкостью сделаете анимацию гибели. Скажем так. Это будет домашним заданием для вас.
P.S. Многие люди сделают всю графику и анимацию круче, чем я. Я же поделился тем, что умею делать. Спасибо вам за то, что уделили время и прочитали данный урок.
В следующем уроке, я покажу как перевести растровый рисунок в векторный с помощью CorelDraw и графического планшета Intuos5.
Рисование, Дизайн и Разработка игр
Главная » Adobe Flash: Простая анимация
Adobe Flash: Простая анимация
Эта статья подскажет вам, как при помощи простых шагов начать знакомство с Adobe Flash CS5. Тема урока простая анимация, мы создадим ее не вникая в сложности интерфейса и программы.
Создание нового flash-документа
Открываем программу и создаем новый документ «ActionScript 3.0» .
Нарисуем объект для последующей анимации
Теперь нарисуем окружность. Выбираем на правой панели инструмент «овал» и зажав левую кнопку мыши и кнопку «shift» на клавиатуре рисуем на белом фоне круг.
При помощи инструмента «Selection Tool» выделяем только что созданный объект, щелкнув по нему мышью или захватив в квадратное выделение.
Преобразовываем объект в символ для простой анимации
Для дальнейшей работы нужно преобразовать объект в символ. Так как окружность уже выделена, нажимаем правую кнопку мыши и в контекстном меню выбираем «Conver to Symbol» .
Из списка «Type» выбираем «Graphic»
Теперь вокруг нашего объекта должен появиться синий квадрат.
Создаем классическую анимацию (Classic Tween)
Для того, чтобы создать анимацию нужно обозначить «ключевой кадр» .
На нижней панели находится шкала анимации, выделяем двадцать пятый кадр и нажимаем правую кнопку мыши, в появившемся контекстном меню выбираем «Insert Keyframe» .
Выделяем окружность и, зажав левую кнопку мыши, перемещаем ее вправо.
Выделяем первый кадр на шкале анимации и в главном меню вверху, в пункте «Insert» выбираем «Classic Tween» .
Просмотр созданной анимации
Теперь можем посмотреть анимацию. В главном меню, в пункте «Control» выбираем «Play» .
Давайте добавим эффект «исчезновения» окружности. Для этого снова выделяем объект и в правой панели в меню «color effect» выбираем «alpha» , ставим значение «0» .
Посмотрим, что получилось. Переходим в пункт «Control» выбираем «Play» .
Чтобы сохранить анимацию в файл, в главном меню выбираем: file -> export -> export movie
Читайте также: