Цель работы: Освоение технологии создания клипа-кнопки икнопки перемещения между сценами.
Теоретические сведения
Кнопка важный элемент любого интерактивного ресурса. Разрабатывая образовательный ресурс для интерактивной доски во Flash можно использовать кнопки из стандартной библиотеки компонентов Flash. В кнопке четыре кадра, которые соответствуют четырём её состояниям:
Up– первоначальное (пассивное) состояние кнопки. Кнопка находится в этом состоянии, когда курсор мышки находится за её пределами.
Over– это состояние соответствует виду кнопки, когда курсор находится над кнопкой. Многие в этом состоянии используют эффекты "подсветки", "приподнимания" и т.п. чтобы показать, что кнопка "готова к нажатию".
Down– состояние кнопки, когда она нажата. В этом состоянии используются эффекты "вдавливания", более тёмной "подсветки и т.п.
Hit– это состояние используется для области кнопки, которая будет реагировать на курсор. Контур, нарисованный в этом состоянии, будет обозначать активную область кнопки. Например, в символе arcade button - orange, активной является область кнопки, и окружающего её ободка - тень не входит в активную область (хотя тоже присутствует в символе кнопки), поэтому при нажатии на неё ничего не происходит.
В эти четыре состояния можно помещать всё что угодно, включая другие символы (даже объекты MovieClip), тем самым создавая всевозможные кнопки.
В работе понадобится для кнопки прописать код свободного перемещения с изчесновением.
|
|
|
on (press)//когда кнопка мыши нажата
{
this.startDrag(true); //начинаем перемещать текущий объект, ключевое слово true в данном случае задает привязку центра объекта к курсору
}
on (release)//когда кнопка мыши отпущена
{
this.stopDrag();//заканчиваем перемещать текущий объект
if (this._droptarget == "/sistemnic")//осуществляем проверку условия - еслиесть столкновение с объектом по имениsistemnic, то
{
this._visible = 0;//текущий объект становится невидимым
} // конец выполнения условного оператора
}
Комментарий к представленному скрипту
Ключевое слово this применяется вместо указания имени перетаскиваемого объекта – этот код более универсальный, его можно копировать и не оглядываться на сам объект, он подойдет для любого объекта.
Свойство _droptarget, доступное только для чтения, возвращает абсолютный путь к мувиклипу (объекту sistemnic), на который был "брошен" (перетащен) любой мувиклип (this), в слэш-нотации. Свойство _droptarget всегда возвращает путь, начинающийся со слэша ( / ).
Операторы языка ActionScript
| Оператор | Назначение |
| + | Сложение |
| - | Вычитание |
| < | Меньше |
| <= | Не больше |
| > | Больше |
| >= | Не меньше |
| == | Равно |
| != | Не равно |
| = | Присваивание |
Свойство _visibleопределяет видимость объекта.
|
|
|
Как в обычных языках программирования, так и в языках сценариев предусмотрены структуры, позволяющие реализовывать механизм сравнений и записывать ряд альтернативных вариантов действий, и ActionScript в этом отношении не является исключением. В языке ActionScript существуют три основные структуры условных инструкций: if..., if...else и if... elseif. Каждая из них служит некой вполне определенной цели и может применяться в соответствующих ситуациях.
В приведенном выше сценарии условный оператор if… (если) предполагает исполнение единственной последовательности действий, не имеющей альтернативы, при выполнении определенного условия: если есть столкновение объекта с системным блоком, то он исчезает.
А что же будет при перемещении объектов без столкновения с системным блоком? В этом случае при использовании конструкции if… не произойдет вообще ничего. Если вы хотите, чтобы при невыполнении заданного условия сценарий производил те или иные действия, следует добавить конструкцию else (иначе).
Как и во многих других объектно-ориентированных языках, в ActionScript для оформления операций, которые нужно выполнить при выполнении указанного условия, применяются фигурные скобки { }, а само условие записывается в круглые скобки ( ), например, if (this._droptarget == "/sistemnic").
|
|
|
Структура If...else позволяет записать в сценарии необходимость выполнить одну из двух последовательностей операций.
Практическая часть
Задание 1. Создание клипа-кнопки
1. Открываем новый документ. Называем слой именем «Фон» и устанавливаем цвет фона по желанию.
2. Введите в слое «Фон» статический текст Переместите в системный блок устройства, находящиеся внутри него.
3. Импортируем в библиотеку графические изображения устройств компьютера, которые можно отрисовать, а можно использовать и исходные изображения с указанием источника. Обратите внимание, что фон картинок должен быть прозрачным.
4. Создаем новый слой с именем «Клипы» и размещаем на нем графические изображения.
5. Изображение системного блока преобразовываем в символ – тип клип и задаем имя инстанции sistemnic.
| Регистрация прикосновения (по центру для нормальной работы) |
Рис. 15.1. Преобразование в символ
6. Изображения, входящие в состав системного блока преобразовываем в символ – тип клип (рис. 15.1). Двойным щелчком заходим внутрь клипа и вновь преобразовываем изображение в символ – тип кнопка и для каждой кнопки прописываем код свободного перемещения с исчезновением: (Код писать и в клип и в кнопку (Клип+Код->Кнопка+Надпись+Код->Клип)) (рис. 15.2) (см. код в теоретической части).
|
|
|
Рис. 15.2.
Чтобы выйти из режима редактирования символа, нажимаем синюю стрелку (рис. 15.3.).
Рис. 15.3. Выход из режима редактирования символа
7. Изображения, не входящие в состав системного блока преобразовываем в символ – тип клип. Двойным щелчком заходим внутрь клипа и вновь преобразовываем изображение в символ – тип кнопка и для каждой кнопки прописываем код свободного перемещения:
on (press) { //Кнопка мыши нажата
StartDrag (this); } //Начать перемещение
on (release) { //Кнопка мыши отпущена
StopDrag (); } //Закончить перемещение
Таким образом, устройства, входящие в состав системного блока, при перемещении на него будут исчезать, в отличие от устройств не входящих в системный блок.
8. В слое «Фон» прописываем код разворачивания клипа на весь экран и отключения меню.
fscommand("showmenu", "false"); //Отключить большую часть выпадающего меню, где есть и пункт «Проиграть сначала», которым обучающийся может, например, запустить заново тест.
fscommand("fullscreen","true");//Развернуть ролик на весь экран
9. В слое «Клипы» добавляем кнопку выхода со следующим кодом:
on (release) { //Кнопкамышиотпущена
fscommand("quit");//Выход
}
10. В слое «Клипы» добавляем кнопку, при нажатии на которую будет появляться вопрос: Какой вывод можно сделать после выполнения данного задания? (состояние кнопки Down) (рис. 15.4).
Рис. 15.4. Добавление кнопки с вопросом
11. Добавим подсказку – название устройства, которое будет появляться при наведении на него курсора мыши. Для этого заходим внутрь каждого символа клип, затем внутрь символа кнопка и во втором кадре (положение кнопки Over) нажимаем F6 (копировать кадр) и добавляем соответствующую надпись (рис. 15.5).
Рис. 15.5. Добавление подсказки
12. Переходим на вкладку «Фильтры» и, нажав на плюс, добавляем фильтры: Тень (DropShadow) – цвет белый, Свечение (Glow) – цвет белый (рис. 15.6).
Рис. 15.6. Настройка фильтров
13. Аналогичным образом поступаем со всеми клипами (п. 12-13).
14. Нажимаем Ctrl+Enter - тестируем проект!
15. Публикуем в формате swf.
Рис. 15.7. Результат работы
Задание 2. Создание кнопкиперемещения между сценами
1. Открываем новый документ Flash. В 1 кадре слоя 1 пишет текст Вперёд(рис. 15.8).
Рис. 15.8.Размещение текста в первом кадре
2. Выбираем инструмент 
Выделение (V)ищелкаем по нашей надписи, нажимаем правую кнопку мыши, вызывая контекстное меню и выбираем Преобразовать в символ(рис. 15.9).
Рис. 15.9.Преобразование в символ
3. Выбираем тип символа– Кнопкаи нажимаемОК.
4. Пропишемдействие–переходдля созданной кнопки.
5. Открываем окно Действия или нажимаем клавишу F9и прописываем для кнопки переход на следующую сцену (рис. 15.10):
On (release)
{
gotoAndPlay("Сцена 2", 1);
}
Рис. 15.10.Размещение кода для кнопки перехода
6. Создаем сцену 2. Для этого выбираем в пункте меню Окна-Другие панели-Сцены или нажимаем Shift+F2 (рис. 15.11). В открывшемся окне нажимаем+(добавить сцену). Теперь у нас две сцены.
Рис. 15.11.Создание сцены
7. В сцене 2 делаем надписьНазади выполняем все те же действия, что и для кнопкиВперед (пункты 2-5).При этом действие для кнопки Назадбудет соответственно таким:
On (release)
{
gotoAndPlay("Сцена 1", 1);
}
8. Тестируем проект, нажав Ctrl+Enter. Как видим, сцены мелькают, сменяя друг друга.
9. Далее необходимо прописать на обеих сценах действие Стоп.На сцене 2 вставляем новый слой (можно прописать и в 1-м слое), щелкаем по первому кадру и прописываем действие:
stop ();
Как видим, над кадром появилась буква а.
Аналогично длясцены 1.
10. Тестируем проект, нажав Ctrl+Enter. Как видим, теперь сцены сменяются только после нажатия на созданные кнопкиВперед и Назад.
Лабораторная работа № 16
Дата добавления: 2018-04-15; просмотров: 358; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!