До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента.
В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, — это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.
Создание кнопок
Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:
• Up-состояние это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;
КАК НАЧАТЬ ДЕЛАТЬ МУЛЬТИКИ? (работа в программе adobe flash pro cc)
• Over-состояние кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;
• Down-состояние данный кадр показывает вид кнопки при ее нажатии;
• Hit-состояние определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.
Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).
Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).
Рис. 1. UP-кадр кнопки
Рис 2. Over-кадр кнопки
Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).
Рис. 3. Down-кадр кнопки
В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.
Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)
Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки
В результате получим следующий фильм. Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру.
Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)
FLASH R.I.P. (1996-2020)
Рис. 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 (к данному выделенному объекту нельзя применить сценария).
Создайте свое собственное приложение Adobe AIR с помощью Flash
В этом уроке мы создадим приложение для чтения в Твиттере, используя ваши собственные обновления в Твиттере. Мы рассмотрим некоторые функции класса nativeWindow, как его подписать и сделать установочный пакет.
Окончательный результат предварительного просмотра
Давайте посмотрим на окончательное приложение, над которым мы будем работать:
Шаг 1. Установите среду выполнения Adobe AIR
С помощью этого плеера мы можем запустить любое приложение с расширением .air, например, новый Adobe Media Player . Сначала нам нужно установить проигрыватель Adobe AIR, поэтому перейдите в Adobe и загрузите проигрыватель . Выберите свою операционную систему и нажмите «Загрузить». Когда загрузка будет завершена, установите ее.
Шаг 2. Установите расширение Adobe AIR для Flash CS3 и CS4
Теперь нам нужен наш второй элемент для разработки приложений AIR: расширение. В этом случае я использую тот для Flash CS3, но он также доступен для Flash CS4. Перейдите в центр поддержки Adobe Flash. Перед установкой обновления Flash для Adobe AIR необходимо загрузить и установить последнее обновление Flash Player (9.0.2), которое можно загрузить здесь: http://www.adobe.com/support/flash/downloads.html. # 902 .
Затем необходимо загрузить и установить обновление Adobe AIR для Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html .
Шаг 3: Настройка документа
На этом этапе, когда вы запускаете Flash CS3 или CS4, на экране приветствия у вас будет возможность создать файл Adobe AIR Flash. Сделай это! Установите размер сцены на 300 пикселей в ширину и 500 пикселей в высоту с 30 кадрами в секунду. Я выбрал белый цвет для фона. Сохраните его как «my-twitter-updates.fla».
Шаг 4: Создание фона
Лекция 15.Создание приложений Flash
Знаете ли вы, что отличает простой интерактивный фильм от полноценного приложения Flash? Правильно, наличие пользовательского интерфейса!
Пользовательским интерфейсом называется совокупность средств, предназначенных для организации общения пользователя и программы. В случае хорошо нам знакомой операционной системы Windows, пользовательский интерфейс — это набор окон и элементов управления, которые служат для ввода данных в программу и получения от нее результатов. Любое приложение, созданное во Flash или в другом средстве разработки, должно иметь пользовательский интерфейс, иначе оно не сможет получать и выводить данные. Ведь главное предназначение любой программы — обработка данных. А ф.гп.м ну что фильм — крутится себе на экране, независимо, смотрят его или нет.
Поэтому, если вы собираетесь делать на Flash нечто большее, чем фильмы с ограниченными возможностями «общения» со зрителем, вам обязательно нужно позаботиться о пользовательском интерфейсе. И не просто слепить пару элементов управления и связать их парой строк кода — вам придется сделать его удобным для пользователя. Иначе пользователь предпочтет вашей программе другую, благо сейчас у него есть широчайшие возможности выбора.
Итак, какие же средства предоставляет Flash создателям приложений? Давайте их перечислим и кратко рассмотрим.
Кнопки. Это экземпляры образцов-кнопок, впервые упомянутые в главе 10. Образцы-кнопки не очень отличаются от образцов-клипов, за несколькими исключениями, обусловленными самой их «интерфейсной» природой. Кнопки позволяют привязать обработчики к событию press (щелчок на кнопке) и некоторым другим.
Поля ввода и динамические текстовые блоки. Первые позволят принять какие-либо данные от пользователя, а вторые — вывести результаты. Создание полей ввода и динамических текстовых блоков было описано в главе 7. Запомните, что обычные, статические текстовые блоки не могут управляться из сценариев.
Полноценные элементы управления. Собственно, это обычные клипы, созданные самими разработчиками Flash и включенные в его состав. Среди элементов управления вы можете найти флажки, переключатели, списки и пр., что вам привычно по интерфейсу Windows. Но, в отличие от элементов управления Windows, элементы управления Flash могут менять свой внешний вид.
Пользовательские элементы управления. Это новые элементы управления, не встроенные во Flash, а разработанные вами. Для создания пользовательских элементов управления вы должны использовать встроенные клипы. Как это делается, мы рассмотрим в конце данной главы.
Понятие элемента управления неразрывно связано с понятием компонента. (Поэтому мы будем рассматривать их вместе.) Компонентом во Flash называется своего рода «кусок» графики и кода ActionScript, который вы можете вставлять в свои приложения. Все элементы управления, поставляемые с Flash, реализованы в виде компонентов. Вы также можете писать свои компоненты и потом использовать их где угодно и даже передавать коллегам.
Компоненты — одно из значительных нововведений, появившихся в программировании в последнее время. (Снобы от программирования, правда, так не считают, но нам с ними не по пути.) Они позволяют создавать весьма сложные приложения, просто собирая вместе отдельные их «кирпичики», возможно, написанные другими разработчиками. Количество средств разработки, поддерживающих компонентное программирование, неуклонно растет, и совсем недавно к ним добавился и наш любимый Flash.
Кнопки
Здесь мы рассмотрим создание и использование кнопок — простейших элементов управления, предоставляемых Flash. Кнопки используются очень часто, и не только в приложениях, но и и обычных интерактивных фильмах Flash, например, для создания Web-сайтов.
Создание кнопок
Чтобы создать образец-кнопку, сделайте следующее. Выберите пункт NewSymbol в меню Insertили нажмите комбинацию клавиш +. Если у вас открыто окно библиотеки, вы также можете выбрать пункт NewSymbolв дополнительном меню этого ок,.а или нажать кнопку, показанную на рис. 10.4, эта кнопка находится в нижнем левом углу окна библиотеки. На экране появится диалоговое окно CreateNewSymbol, показанное на
Объект Button
Объект Button «отвечает» за доступ к кнопке из сценариев ActionScript. Этот объект предоставляет набор свойств и методов, с помощью которых и осуществляется управление кнопкой.
Экземпляры объекта Button создаются самим Flash для каждой кнопки, для которой вы задали имя. Вам самим создавать их не нужно.
Во многом объект Button похож на объект -novieciip. Эти два объекта имеют весьма схожий набор свойств и методов и зачастую ведут себя одинаково. В частности, объект Button поддерживает свойства _х, _у, xmouse, ymouse, _height, _width, _alpha И _rotation, уже знакомые вам ПО объекту movieciip. Однако объект Button не поддерживает методы play, stop, gotoAndPiay, gotoAndstop и подобные им, т. к. назначение его все же иное, чем у объекта movieciip. Так что вы можете рассматривать кнопку как сильно специализированный, «урезанный» вариант клипа.
Ниже будут рассмотрены свойства, которые обязательно пригодятся вам в работе с экземплярами объекта Button. (Многие из них поддерживаются и объектом movieciip.)
Свойство enabled позволяет разрешить или запретить доступ пользователя к кнопке. Оно имеет логический тип: значение true разрешает доступ к кнопке, а значение false — запрещает.
Свойство visiо позволяет сделать кнопку видимой или невидимой. Оно имеет логический тип: значение true делает кнопку видимой, а значение false — невидимой.
Свойство use Hand Cursor позволяет вам сменить курсор мыши, отображаемый, если мышь поместить над кнопкой. Если задано значение true, то отображается курсор в виде «указующего перста», как над гиперссылкой. Если же задано значение false, то отображается обычная стрелка.
Свойство tabindex задает порядок обхода элементов управления при последовательных нажатиях клавиши . (При нажатии комбинации клавиш
+ обход выполняется в обратном направлении.) Значением этого свойства может быть любое целое неотрицательное число, оно задает порядок в очереди элементов управления. Так, сначала фокус ввода переместится на элемент управления со значением порядка обхода — 0, потом — со значением 1 и т. д.
Если ни для одного элемента управления в приложении не задан порядок в очереди обхода (то есть, свойство иох равно undefined), Flash будет применять порядок обхода по умолчанию. Если же вы собираетесь задать порядок обхода, имейте в виду, что значение undefined меньше любого числового. Поэтому элементы управления, для которых свойство tabindex не было задано, будут в очереди обхода первыми.
Свойство tabEnabled позволяет убрать кнопку (и вообще любой элемент управления) из порядка обхода, сделать его недоступным для выбора с клавиатуры, но все же доступным для выбора мышью. Это свойство имеет логический тип: значение true или undefined делает элемент управления доступным для выбора с клавиатуры, а значение false — недоступным.
Объект Button поддерживает большое количество событий, которые вы можете использовать для написания обработчиков.
Дополнительная литература: 6[96-108]
1. Из каких составляющих состоит Flash-технология?
2. Какие механизмы Flash предусмотрены для анимирования объектов?
3. Что подразумевается под интерактивностью?
4. Какие инструменты используются для выбора объектов?
Источник: megaobuchalka.ru