Назначение обработки событий кнопкам и фреймам, добавляет интерактивность
анимации Flash. Включая начало проигрования, переход к новому фрейму,
отображение новой анимации или переход к новому Web сайту.
Назначайте обработку событий для фрейма, чтобы сделать что-либо, когда
проигрование анимации достигнет этого фрейма. Это полезно для создания
пауз и загрузки новых анимаций.
Используйте обработку событий для фреймов символов, чтобы создавать сложную
анимацию. Например, поместите анимацию в кнопку, чтобы создать анимированную
кнопку.
Кнопка в Flash - это специальный символ, в котором вы определяете различные
состояния кнопки как ключевые фреймы на шкале из четырех фреймов. Чтобы
определить действие кнопки в анимации, поместите ее на Stage и задайте
обработку событий.
Каждый из четырех фреймов, на шкале фреймов кнопки, имеет свое назначение:
Первый фрейм -Up- представляет вид кнопки, когда курсор мыши находится вне
ее области.
Второй фрейм -Over- представляет вид кнопки, когда курсор мыши находится
над ней.
Третий фрейм -Down- представляет вид кнопки, когда она нажата.
Четвертый фрейм -Hit- представляет область
кнопки, при нахождении курсора мыши в которой,
будет считаться, что он находится над кнопкой.
Этот фрейм не отображается.
Для создания кнопки, проделайте следующие шаги:
Убедитесь что на Stage ничего не выделено и
выберите Insert > Create symbol.
В окне свойств символа введите его имя и выберите модель поведения символа
как кнопки (Behavior = Button). Закройте окно свойств и Flash создаст
окно редактирования символа с перекрестьем в его центре и окно
с шкалой фремов. При этом, будет создан пустой ключевой фрейм -Up-.
Для создания представления кнопки для фрейма -Up-
используйте инструменты рисования, импортируйте
графику или вставляйте другие символы. При этом
Вы не можете вставить другую кнопку в
создаваемую.
Активизируйте фрейм -Over- и выберите Insert > Keyframe.
Изображение кнопки из первого фрейма будет
вставлено в текущий.
Измените представление кнопки и проделайте предыдущие шаги для фреймов -Down-
и -Hit-. Фрейм -Hit- не будет видим на Stage. Убедитесь, что графика
для этого фрейма является сплошной зоной и покрывает своей площадью
всю графику предыдущих фреймов.
Чтобы назначить звуковой эффект для фрейма кнопки, выберите нужный фрейм,
выберите пункт меню Modify > Frame и в диалоге свойст фрейма переключитесь
в закладку Sound.
Когда Вы закончите создание кнопки, выберите Edit > Movie и перетащите
созданный символ из библиотеки ( Ctrl-L ) в Movie для создания экземпляра
символа-кнопки.
Для тестирования кнопки выберите Control > Enable Buttons и проиграйте
анимацию. Анимация внутри кнопок не будет работать при тестировании из
среды редактирования.
При назначении обработки события для кнопки вы можете задать действие
этой кнопке. При этом назначение коснется только выбранного экземпляра
символа, не всех его экземляров.
Flash позволяет
использовать такие действия как переход к новой
сцене, проигрование анимации, проигрование
указанной сцены, переход по указанному URL и т.п.
Для назначения действия:
Выберите экземпляр символа (это может быть и не кнопка).
Выберите Modify > Instance
или осуществите двойной щелчок по обьекту.
Появится окно свойств.
Выберите закладку Definition.
Установите Behavior = Button.
Установите значение для Tracking options.
Track as Button - не позволяет другим кнопкам получать события от мыши
когда данная кнопка нажата.
Track as Menu Item - позволяет другим кнопкам получать событие от мыши
когда ее кнопка отпускается.
Выберите закладку Actions и из низпадающего меню Actions выберите
необходимое действие.В зависимости от того какое действие вы выберите,
панель параметров будет отображать дополнительные элементы для уточнения
параметров выбранного действия.
Назначте дополнительные действия, если вы хотите чтобы кнопке
было назначено несколько действий. Flash вставит новое действие после
имеющихся и будет выполнять их в том порядке, в котором они присутствуют
в списке действий. Вы можете изменить этот порядок в любое время.
Давайте немного попрактикуемся и создадим вот такую кнопку: - щелкните чтобы скачать исходник.
Когда курсор мыши находится вне кнопки, текст прикрыт полупрозрачной
ширмой, а когда курсор "наезжает на нее", ширма медленно разьезжается.
В виду того что я сам учусь, некоторые вещи могу сделать не самым лучшим
способом, отнеситесь к этому с пониманием...
Создайте новый проект
выбрав меню File > New.
Настройти свойства анимации выбрав Modify > Movie: установите ее
размеры в 100 для ширины и 40 для высоты. Создав клип определенного
размера, вы всегда можете задать ему другой размер в HTML-документе.
При этом, качество останется прежним благодаря векторной графике( хотя
могут возникнуть проблемы при смешивании растра и вектора).
Теперь создадим
шторку. Для того чтобы шторка могла раздвигаться
мы должны создать две независимые ее части и
задать их изменение во времени путем
одновременного перемешения и изменения размера.
При этом шторка должна иметь шкалу времени,
которая не зависит от основной шкалы клипа и
может быть управляема другой шкалой. Для этого мы
должны создать символ типа 'Movie Clip':
Выберем Insert > Create Symbol.
В появившемся окне зададим имя для символа
(Name=TranspBlind) и его тип (Behavior=Movie Clip). Нажмем 'Ok' -
появится окно для редактирования символа.
Выберем инструмент 'Pencil' и нарисуем горизонтальную линию. Выберем инструмент
'Arrow' и щелкнем по линии, чтобы выделить ее (предварительно щелкните
по пустому месту полотна чтобы отменить текущее выделение, иначе линия
будет добавлена к нему). Откроем инспектор: Window > Inspector.
С его помощью зададим точную позицию линии: x = -50, y = -20, w =
100, h = 0.
Подобным образом
создадим линии: x = -50, y = -20, w = 0, h = 40 и x = -50, y = -20, w = 100,
h=40 Почему-то не всегда можно добиться w = 0 или h = 0,
если линия была построена не вертикальной или
горизонтальной. Чтобы исправить ситуацию,
стройте горизонтальные (для h=0) или вертикальные
линии (для w=0) удерживая Shift, а затем корректируйте
значения.
Мы получили треугольник - верхнюю часть шторки.
Выберем инструмент
'Paint Bucket' и его цвет. Щелкнем внутри треугольника -
он будет залит выбранным цветом.
Выберем инструмент 'Ink Bottle' и цвет совпадающий с цветом заливки. Щелкнем
внутри треугольника, чтобы изменить цвет границ.
<Теперь мы должны
создать эффект сворачивания этой половинки в
угол. этом нам поможет преобразование
встроенное Flash - перемешение и масштабирование.
Этот может применяться только к слою с
одним символом или группой. Поэтомувыделив все
нарисованные обьекты двойным щелчком по
треугольникувыбираем Modify >Group чтобы
обьединить их группу.>
На десятом фрейме слоя создаем новый ключевой фрейм. При этом, треугольник
из первого фрейма будет скопирован во вновь созданный.
С помощью инспектора
изменяем размеры треугольника: w = 12 и h = 12.
Теперь нужно указать
Flash чтобы изображение фрейма 1 на протяжении
фреймов 2 - 8 было преобразовано в изображение
фрейма 10.
Выводим окно свойств
фрейма 1, дважды щелкнув по нему. Выбираем
закладку 'Tweening', выставляем Tweening = Motion, ставим
флажок у Tween scaling, жмем Ok.
Преобразование
выполнено. Можете посмотреть его в действии
выбрав Control > Play.
Теперь необходимо
сделать вторую часть шторки. Она делается
аналогично первой, но в другом слое.
Чтобы случайно не испортить первый слой, заблокируйте его, установив флажок
на 'Locked' (щелкните на иконке справа от имени слоя). Создайте новый
слой и проделайте всю работу для треугольника, дополняющего первый
до квадрата.
Теперь, мы имеем анимацию для шторки. Но ею нужно управлять в зависимости
от нахождения курсора над кнопкой. Шторки не должны открываться после
загрузки и их аннимация должна, после проигрования, остановиться на
последнем кадре. Чтобы этого добится, выберите 1-й фрейм любого слоя
символа-шторки и откройте окно его свойств:
Выберите закладку
'Action', выберите + > Tell target, выберите + > Stop. Этим мы
задаем выполнение команды Stop при достижении
фрейма 1.
Переходим в режим Edit
movie и размещаем экземпляр кнопки на полотне.
Создаем экземпляр символа-шторок и размещаем его
над кнопкой.
Двойным щелчком по шторкам открываем окно свойств и выбираем закладку 'Color
Effect'. Устанавливаем Color Effect = Alfa и Alfa = 50, задавая тем
самым прозрачность.
Теперь остается в нужный момент открывать и закрывать шторки. Кнопка должна
уметь управлять шторками. Для этого Шторки должны иметь имя, по которому
кнопка сможет обратиться к ним. Снова открываем окно свойств шторок
и, выбрав закладку 'Definition', устанавливаем имя: Instance Name =
Test.
Выделив кнопку, открываем окно ее свойств. Выбираем закладку 'Actions'.
Выберите закладку 'Action', выберите + > Tell target. В список команд
будет добавлено: On(Release) ... Begin Tell Target ... End Tell ...
Target End On. Выберите в списке 'Actions' строку 'On(Release)', а в
списке 'Parameters' поставьте голочку у 'Roll over', убрав все остальные.
Это означает что действие будет произведено при нахождении мыши над
кнопкой. Выделите строку 'Begin Tell Target и в дереве 'Parameters:
Begin Tell Target' дважды щелкните по обьекту к которому будет направлена
команда. В данном случае обьект один - Test - наши шторки. Выберите
+ > Play. Этими действиями мы задали посылку команды Play шторкам
при перемещении мыши над кнопкой.
Теперь, нужно закрывать шторки при выходе мыши за пределы кнопки. Делаем
все аналогично предыдущему пункту, только вместо 'Roll over' выбираем
'Roll out', а вместо Play - Go To с параметрами: Frame number = 1.
Вот и все. Выберите View > 100% и Control > Test Movie чтобы посмотреть
результат.
После того как вы закончили создание Flash анимации, вы
имеете несколько путей для ее проигрывания. Чаще всего анимацию сохраняют
в формате Shockwave Flash и проигрывают следующими способами:
В интернет-броузере, поддерживающем Shockwave Flash.
С помощью управляющего элемента Flash ActiveX в средах поддерживающих
ActiveX, таких Director, Authorware и Microsoft Office.
С помощью RealPlayer версии начиная с 5-й. RealPlayer может проигрывать
Flash анимацию с улучшенным сжатием звука. Посетите Flash
Developers Center чтобы получить более подробную информацию.
Как разновидность независимого приложения называемого проектор. (Сам не
понял что это значит, разберусь - напишу.)
Когда вы создаете Flash анимацию, вы работаете с файлом формата FLA.
Для дистрибьюции вы должны экспортировать анимацию как файл формата SWF
(Shockwave Flash). Если анимация предназначена для Web, то вы должны создать
HTML-страницу которая будет отображать Вашу работу в окне броузера.
По умолчанию
анимация начинает проигрываться сразу после
открытия ее в окне броузера и проигрывается в
бесконечном цикле. Вы можете настроить параметры
проигрования анимации с помощью утилиты AfterShock
поставляемой вместе с Flash или настроить их
вручную, кодируя HTML.
Flash может
экспортировать изображения для использования их
в других программах, а также экспортировать
анимацию как AVI или QuickTime видео.
Вы также
можете экспортировать анимацию для
использования ее в Flash Generator (приложение Web
сервера которое динамически добавляет данные в
Flash анимацию, специально подготовленную и
экспортированную как файл шаблона).
В процессе экспортирования, Flash находит повторы участков
анимации и помещает в файл только одну копию. Тем не менее, вы можете
дополнительно оптимизировать размер файла анимации и скорость проигрования
используя следующие приемы:
Используйте символы, анимированные или нет, для
любого элемента анимации, который используется в
ней несколько раз.
Везде, где возможно, задавайте изменение анимации между фреймами средствами
Flash (перемещение, трансформация), что более оптимально, чем использование
набора ключевых фреймов.
Ограничивайте использование линий специальных типов (тире, точка и
т.п.). сплошные линии занимают меньше места. Линии, создаваемые с помощью
инструмента 'Pencil' , требуют меньше памяти чем созданные с помощью
'Brush'.
Элементы анимации, которые изменяются в ходе ее
проигрования, создавайте в отдельных слоях .
Используйте опцию Modify>Curves>Optimize для того,
чтобы уменьшить число линий необходимых для
создания очертания фигуры.
Уменьшайте число используемых шрифтов и их
стилей.
Избегайте анимирования помещенных в анимацию
битовых (растровых) изображений. Используйте
такие изображения только для создания фона и
статических элементов.
Уменьшайте область изменений во фрейме.
Группируйте элементы при первой возможности.
Используйте всплывающее меню 'Color Effects' в окне свойств символа
для создания различных экземпляров выбранного вами символа.
Используйте окно 'Colors' для настройки
используемой цветовой палитры.
Умеренно пользуйтесь градиентными цветами.
Заполнение области таким цветом требует памяти
на 50 байт больше, чем заполнение сплошным цветом.
После того, как вы создали анимацию Flash и зкспортировали ее, вы должны
создать документ HTML в который она будет помещена. Существует набор HTML
параметров, который позволяет задать поведение анимации в броузере. По
умолчанию анимация начинает проигрываться сразу после открытия ее в окне
броузера и повторяется бесконечно.
Для проигрования анимации Flash броузер должен иметь Shockwave Flash Player,
который доступен на www.macromedia.com.
Анимация Shockwave Flash вставляется в HTML с
помощью тэгов EMBED и(или) OBJECT. Для первого тэга все
параметры вставляются между угловыми скобками
открывающего тэга:
Для второго четыре параметра (HEIGHT, WIDTH, CLASSID, CODEBASE) вставляются
в собках открывающего тэга OBJECT, а остальные вставляются в отдельных
секциях задаваемых тэгом PARAM:
При одновременном применении тэгов OBJECT и EMBED, используйте идентичные
значения для их параметров. Swflash.cab#version=3,0,0,0 является необязательным
и используется для проверки номера версии.
Описание параметров тэгов я размещу в ближайшее время...
Создание
элементов пользовательского интерфейса
Вы можете использовать интерактивные возможности Flash
для создания элементов интерфейса: всплывающее меню, раскрывающиеся
списки, поля ввода и т.п. Это позволяет вам создавать формы на Flash
и дает возможность эффективного управления анимации Flash со стороны
пользователя.
Форма - это комбинация кнопок, анимации и элементов пользовательского
интерфейса. Форма позволяет вам ввести или выбрать данные в ее элементах
и отправить эти данные для дальнейшей обработки на местный или удаленный
сервер.
Flash дает вам возможность создавать свой собственный
вид элементов пользовательского интерфейса (далее по тексту - ЭПИ).
Cписки, кнопки выбора и подобные элементы могут быть созданы в виде
анимации или кнопок Flash, что позволяет вам использовать свой собственный
дизайн. (Теперь Web страница - это не газетная полоса для верстки, а
холст художника. А это значит что Internet Design - искусство!)
Flash предназначен
для создания интерфейса пользователя. Для детального изучения возможностей
форм по передаче данных и вопросов далнейшей их обработки обратитесь к учебнику
по HTML.
Для создания
формы:
Создайте
библиотеку ЭПИ в виде сиволов.
Поместите
комбинацию полей ввода и созданных символов в анимацию формы.
Задайте
имена для переменных которые будут соответствовать элементам формы c помощью
окна свойств элемента.
Назначьте соответствующей кнопке реакцию на нажатие: отправка данных в Flash проигрователь
или через HTTP в удаленное Web приложение.
Используйте оператор "Get
URL" для отправки значений переменных на удаленный сервер или для пересылки
их значений в почтовом сообщении (Вы можете задавать mailto:username@company.com
как URL параметр для того, чтобы отослать почту непосредственно из броузера).
Используйте оператор "Load Variables" для загрузки значений с Web
сервера.
При использовании переменных
в форме придерживайтесь следующих правил:
Назначайте переменным
имена соответствующие хранимым значениям.
Будте уверены, что имена переменных соответствуют именам, ожидаемым скриптом
или приложением, которое будет получать значения этих переменных.
Используйте переменные в шкале времени или в анимации для записи и
хранения различной информации. Например, вы можете сохранить первоначальные
значения полей формы и восстановить их по нажатию определенной кнопки
(подобно кнопке "Reset" в HTML).
Если вы используете переменные привязанные к определенному фрейму,
то используйте свойство _framesloaded или оператор "If Frame Loaded"
чтобы быть уверенным что фрейм загружен и его переменные определены.
Проверяйте формат данных
переменной перед отправкой их на сервер.
"Диалог" является
типичной формой небольшого размера. Рассмотрим процесс его создания на примере
создания "диалога" для поиска: тестовое поле и кнопка использующая
оператор "Get URL":
Создайте кнопку, которая будет использоваться для отправки введенных
данных. Не задавайте текст для кнопки - вы получите универсальную форму,
а текст можно будет задать при создании конкретного экземпляра формы.
Создайте текстовую метку,
пустое текстовое поле и экземпляр символа созданной кнопки на поверхности
анимации формы:
Выберите текстовое поле
и выберите Modify > Text Field - появится окно свойств.
Задайте имя для переменной
которая будет соответствовать этому текстовому полю. Отметте пункты "Draw
Border and Background" и "Include Font Outlines". Закройте
окно нажав "Ok".
Выберите закладку "Actions".
Кликните "+" и выбирите "Get URL" из меню. На панели "Parameters"
задайте опции оператора: URL = url поискового сервиса, Window = _blank - будет
открыто новое окно с результатами поиска.
Создайте текстовое поле поверх кнопки с нужным вам текстом.
Для тестирования работы
выберите File > Publish Preview > HTML.
