Как сделать кнопку флеш
Использование компонента Button
Компонент Button — это прямоугольная кнопка с изменяемым размером, которую пользователь может нажать с помощью мыши или клавиши пробела, чтобы инициировать выполнение действия в приложении. К экземпляру Button можно добавить пользовательский значок. Также можно изменить поведение компонента Button с нажатия на переключение. После щелчка кнопка-переключатель остается в нажатом положении и возвращается в исходное положение при повторном щелчке.
Компонент Button является основным элементом многих форм и веб-приложений. Кнопки можно использовать везде, где пользователь должен инициировать событие. Например, в большинстве форм используется кнопка «Отправить». А в презентацию можно добавить кнопки «Предыдущий» и «Следующий».
Взаимодействие пользователей с компонентом Button
Кнопку в приложении можно включить или отключить. В отключенном состоянии кнопка не реагирует на мышь или клавиатуру. Включенная кнопка получает фокус при щелчке или переходе с помощью клавиши Tab. Когда экземпляр Button получает фокус, им можно управлять с помощью следующих клавиш.
Переводит фокус на предыдущий объект.
Переводит фокус на следующий объект.
Переводит фокус на следующий объект, если кнопка задана в качестве кнопки по умолчанию для FocusManager.
Дополнительные сведения об управлении фокусом см. в описании интерфейса IFocusManager и класса FocusManager в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 и разделе «Работа с FocusManager».
Интерактивный просмотр каждого элемента Button отражает изменения, которые были внесены в параметры в Инспекторе свойств или Инспекторе компонентов во время разработки.
Когда в приложение добавляется компонент Button, его можно сделать доступным для программ чтения с экрана путем добавления следующих строк кода ActionScript.
Расширенный доступ для компонента включается только один раз, независимо от числа созданных экземпляров.
Параметры компонента Button
Создание приложения с компонентом Button
Ниже описывается процедура добавления компонента Button в приложение в ходе разработки. В этом примере объект Button изменяет состояние компонента ColorPicker, когда пользователь щелкает объект мышью.
Создайте новый документ Flash (ActionScript 3.0).
Перетащите компонент Button с панели «Компоненты» в рабочую область и введите следующие значения в Инспекторе свойств.
Введите имя экземпляра aButton.
Введите значение Show (Показать) для параметра label.
Добавьте компонент ColorPicker в рабочую область и присвойте ему имя экземпляра aCp.
Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код ActionScript.
«Show» (Показать) делает экземпляр ColorPicker видимым и изменяет метку компонента Button на «Disable» (Выключить).
«Disable» (Выключить) отключает экземпляр ColorPicker и меняет метку Button на «Enable» (Включить).
«Enable» (Включить) включает экземпляр ColorPicker и меняет метку Button на «Hide» (Скрыть).
«Hide» (Скрыть) делает экземпляр ColorPicker невидимым и меняет метку Button на «Show» (Показать).
Для запуска приложения выберите команды «Управление» > «Тестировать ролик».
Создание приложения с компонентом Button
Создайте новый документ Flash (ActionScript 3.0).
Перетащите компонент Button с панели «Компоненты» на панель «Библиотека» текущего документа.
В результате этого компонент добавляется в библиотеку, но остается невидимым в приложении.
Откройте панель «Действия», выберите «Кадр 1» в главной временной шкале и введите следующий код, чтобы создать экземпляр Button.
Метод move() размещает кнопку в точке рабочей области с координатами 50 (x), 50 (y).
Теперь добавьте следующий код ActionScript, чтобы создать прослушиватель событий и функцию обработчика событий.
Выберите «Управление» > «Тестировать ролик».
При щелчке кнопки Flash показывает сообщение «Тип события: click» на панели «Вывод».
На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.
Блог Diam’a
Блог начинающего созерцателя
Страницы
вторник, 28 февраля 2012 г.
Flash. Реализуем кнопку с переходом
Как же создается кнопка и для чего она вообще нужна? Кнопка используется практически везде и всегда. Смысл кнопки в том, что при использовании ее каким-то образом (не ISO, не святым) происходят события, заданные содержимым этим кнопки или ее влиянием. Банально она может применяться, начиная от перехода к другому фрейму по нажатию на нее до невероятных алгоритмических вычислений или происхождения всевозможного рода событий. Тут фантазии нет предела. При нажатии на кнопку, которая имеет в себе набор команд, создается некое событие, которое используется в дальнейшем.
В данной статье я хочу рассмотреть применение кнопки в качестве перехода на новый кадр. То есть: имеется несколько кадров, но они не сменяют друг друга поочередно, так как на первом кадре мы установили команду stop () (о ней я рассказывал в командах для фрейма). Итак представим: у нас имеется два кадра, на каждом из которых расположена надпись, информирующая о номере данного кадра для видимости и легкого восприятия. На первом и втором кадре у нас содержится кнопка. Я взял готовую кнопку из библиотеки Adobe Flash CS4 (чтоб красиво было), но вам рекомендую самим сделать кнопку. Как она делается?
Поэтому при возделывании кнопки из объекта ей наделяются некоторые возможности: при двойном нажатии мыши на созданную вновь кнопку откроется внутрення структура нашей клавиши, которую я сейчас опишу, постараюсь в деталях. Для начала представлю вид по совершению двойного щелчка левой кнопкой мыши по сделанной кнопке:
С кнопкой немного разобрались, давайте теперь пройдемся по плану, по которому мы хотим реализовыть нашу мысль. У нас два кадра, на каждом из которых имеется своя надпись, говорящая нам о номере проигрываемого кадра, плюс мы добавили в каждый кадр одну и ту же сделанную кнопку (ее можно выбирать в библиотеке наших компонентов):
Изучаем Macromedia Flash
До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, — это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.
Создание кнопок
Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:
• Up-состояние это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;
• Over-состояние кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;
• Down-состояние данный кадр показывает вид кнопки при ее нажатии;
• Hit-состояние определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.
Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).
Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).
Рис. 1. UP-кадр кнопки
Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe ), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.
Рис 2. Over-кадр кнопки
Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).
Рис. 3. Down-кадр кнопки
В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.
Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)
Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки
В результате получим следующий фильм. Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру.
Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)
Рис. 5. Hit-кадр кнопки
После того как мы добавим необходимый Hit-кадр получим следующий фильм, в котором при нажатии на рамку продавливания кнопки не происходит.
Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash.
Понятие об Action Script
Action Script представляет собой язык написания сценария — набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.
При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).
Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.
Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.
Одним из основных понятий Action Script являются Actions — команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка — Action Script (дословно — сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.
Интерактивный фотоальбом
Продемонстрируем использование кнопок для управления фотоальбомом — создадим набор фотографий и добавим две кнопки, которые будут листать фото вперед и назад.
Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).
Рис. 6. Добавим кнопку из стандартной библиотеки
В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).
Рис. 7. Элементы папки Key Buttons
Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).
Рис. 8. Автоматическое выравнивание кнопок на одном уровне
Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).
Рис. 9. Панели редактора Action Script
Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions — Frame, если щелкнуть по кнопке, то появится надпись Actions — Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария).
Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо.
Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:
Создание кнопок
Прежде чем привязывать к кнопке сценарий, ее нужно создать. Займемся этим.
Давайте продолжим эксперименты с фильмом, показывающим вращающийся прямоугольник. А именно, добавим к нему кнопку, останавливающую анимацию. Ведь остановить анимацию, щелкнув по неподвижной кнопке, проще, чем пытаться «поймать» мышью движущийся клип.
Сначала нам нужно создать образец-кнопку. Делается это уже знакомым нам из главы 8 способом. Выберем пункт New Symbol меню Insert, в поле Name диалогового окна Create New Symbol (см. рис. 8.2) введем имя создаваемого образца-кнопки (дадим ему имя Кнопка), включим переключатель Button в группе Behavior и нажмем кнопку ОК. После этого Flash откроет вновь созданный, пока еще «пустой» образец в режиме правки. Нам останется только нарисовать нашу кнопку.
Но не будем спешить это делать. Посмотрим лучше на временную шкалу (рис. 18.4). Она содержит всего четыре позиции, и весьма странных — все они имеют имена: Up, Over, Down и Hit. В позиции Up уже создан ключевой кадр.
Дело в том, что эти в этих позициях создаются ключевые кадры, которые содержат четыре разных изображения, используемых Flash для отображения различных состояний кнопки. Давайте их перечислим:
? изображение, находящееся в кадре Up, выводится, когда кнопка не нажата и курсор мыши не установлен над ней;
? изображение, находящееся в кадре Over, выводится, когда курсор мыши установлен над кнопкой, но сама кнопка не нажата;
? изображение, находящееся в кадре Down, выводится в тот момент, когда пользователь нажимает кнопку;
? изображение, находящееся в кадре Hit, задает область, которая будет откликаться на касания и щелчки мышью («горячую область» кнопки). Это изображение никогда не выводится на экран.
Заметим, что обязательным является только изображение в кадре up. Без остальных можно обойтись. Их отсутствие восполнят следующие правила.
? Если отсутствует кадр Hit, «горячую область» определяет изображение в кадре Up.
? Если отсутствует кадр Down, для отображения нажатой кнопки Flash возьмет изображение из кадра Over.
? Если отсутствует кадр Over, для отображения кнопки, которой «коснулся» курсор мыши, Flash позаимствует изображение из кадра Up.
Кнопки Flash имеют еще одну интересную особенность. Дело в том, что «горячая» область кнопки совсем не обязательно должна совпадать с самой кнопкой. Так, иная кнопка может сработать, если пользователь щелкнет совсем в другом месте рабочего листа. Это обстоятельство позволяет создавать весьма забавные и полезные вещи вроде подсказок, «всплывающих» при наведении мыши на какой-либо фрагмент изображения, и пр.
Но давайте все-таки нарисуем нашу кнопку. Не станем особенно мудрить — нарисуем в кадре Up обычный синий прямоугольник. На первый раз этого будет достаточно.
Следующий шаг — рисование изображения в кадре Over. Пусть это будет красный прямоугольник. Создадим в делении Over новый ключевой кадр; Flash автоматически поместит туда изображение из кадра up, и нам останется только перекрасить его в красный цвет.
Нарисуем содержимое остальных двух кадров кнопки. В кадре Down прямоугольник пусть будет темно-синим. А цвет изображения в кадре Hit роли не играет.
Все — образец-кнопка готов. Вернемся в режим правки фильма и откроем панель Library. Создадим новый слой и назовем его Кнопка — именно в него мы и поместим нашу кнопку, иначе анимация в первом слое окажется «оборванной». Найдем в списке образцов только что созданную нами кнопку и поместим в нижний правый угол рабочего листа ее экземпляр. И, наконец, проверим ее в действии.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Читайте также
1.3.2.2. Создание кнопок запуска на рабочем столе
Отключение подсказок для кнопок Свернуть, Развернуть и Закрыть
Отключение подсказок для кнопок Свернуть, Развернуть и Закрыть В Windows 2000/XP контекстная подсказка отображается при размещении курсора мыши поверх кнопок Свернуть, Развернуть и Закрыть. Чтобы отключить эти подсказки, откройте раздел HKCUControl PanelDesktopи замените первую цифру
Использование кнопок
Использование кнопок Если вы хотите что-либо сделать, и сделать именно сейчас, проще всего нажать кнопку и получить немедленный результат. Кнопки создают ощущение власти над программой.Стандартная кнопка представляет собой серый объект, на котором находится поясняющий
Настройка кнопок панелей инструментов
Шутка №2 — отключение кнопок мыши
Шутка №2 — отключение кнопок мыши Вторая шутка будет более радикальной: используя перехваты функций, отключим кнопки мыши — ни левая, ни правая, ни средняя кнопка не будут выполнять никаких действий. Для этого напишите в разделе implementation следующую функцию:function KbHook(code:
Сокрытие команд меню, кнопок и панелей
Сокрытие команд меню, кнопок и панелей Сокрытие команды меню Сервис?Windows UpdateКлюч:[HKEY_LOCAL_MACHINESoftwareMicrosoftWindowsCurrentVersionPoliciesExplorer] Значение: «NoWindowsUpdate»=dword:00000001Сокрытие команды меню Файл?СоздатьКлюч:[HKEY_LOCAL_MACHINESoftwareMicrosoftWindowsCurrentVersionPoliciesExplorer] Значение: «NoExpandedNewMenu»=dword:00000001Сокрытие
Регистрация щелчков кнопок мыши
Регистрация щелчков кнопок мыши Следует подчеркнуть, что событие MouseUp (как и MouseDown) посылается при щелчке любой кнопки мыши. Если нужно выяснить, какой кнопкой мыши был выполнен щелчок (левой, правой или средней), следует проанализировать значение свойства Button класса
1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem
1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem Постановка задачи Необходимо добавить кнопки на навигационную
1.21. Добавление кнопок в пользовательский интерфейс с помощью UIButton
1.21. Добавление кнопок в пользовательский интерфейс с помощью UIButton Постановка задачи Необходимо отобразить в пользовательском интерфейсе кнопку и обрабатывать события касания, связанные с этой
4.5.1. Добавление кнопок запуска
4.5.1. Добавление кнопок запуска Все мы помним Windows 98, в которой впервые появилась панель быстрого запуска (QuickLanch). На нее можно было поместить ярлыки для быстрого запуска программ. На панель GNOME вы тоже можете поместить такие как бы «ярлыки». Идея та же, просто ярлыки
Урок 5. Создание кнопок для пользователя
Урок 5. Создание кнопок для пользователя Исходный файл: Stop.fla В предыдущем примере мы рассмотрели возможность управления роликом при помощи ActionScript без всякого вмешательства пользователя. Давайте добавим несколько кнопок, щелкнув по которым, пользователь сможет
Увеличение кнопок
Увеличение кнопок Исходный файл: Expandingbuttons.fla Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделать эти кнопки анимированными.Задача
Создание кнопок
Создание кнопок Прежде чем привязывать к кнопке сценарий, ее нужно создать. Займемся этим.Давайте продолжим эксперименты с фильмом, показывающим вращающийся прямоугольник. А именно, добавим к нему кнопку, останавливающую анимацию. Ведь остановить анимацию, щелкнув по
Создание и удаление кнопок из сценариев
Создание и удаление кнопок из сценариев Ранее в этой главе мы говорили, что имеется возможность создавать и удалять клипы из сценариев, пользуясь соответственно методами attachMovie и removeMovieClip объекта movieclip и аналогичными действиями. Такая возможность реализована и для
Слишком много кнопок
Слишком много кнопок Да, когда вы откроете программку, шок вам гарантирован. Вся она обвешена панельками с разными кнопками. Одна мысль о том, что придется все это освоить, уже наводит тоску. Скажу по секрету: даже опытные дизайнеры не знают всех функций программы, а