CC BY
66
Штенников Дмитрий Геннадьевич
MACROMEDIA FLASH. ОСНОВЫ ПРОГРАММИРОВАНИЯ. ПРОСТЕЙШИЕ СКРИПТЫ.
УРОК 1
От редакции:
В № 5 журнала «Компьютерные инструменты в образовании» за 2003 год была опубликована вводная статья Д.Г. Штен-никова по технологиям Macromedia Flash. В этом году журнал публикует продолжение — серию уроков по обучению работе с Macromedia Flash, подготовленную на основе курса, читаемого автором статьи в Санкт-Петербургском центре Федерации Интернет Образования.
ActionScript: событийно-управляемый язык, встроенный во Flash. Если в четвертой версии это был ограниченный набор команд, позволяющий осуществлять лишь основные действия и вводимый с помощью не очень удобного интерфейса, то новый ActionScript во Flash MX 2004 - это мощный язык с увеличенным набором ко манд, поддержкой всевозможных преимуществ объектно-ориентированного программирования: клас- . сов, наследования.
ActionScript делает ваши анимации и страницы интерактивными. Вы можете создавать реакции на события мышки или клавиатуры, можете выполнить какие-либо действия при проигрывании определенного кадра. Цель этой статьи - изложить основы ActionScript и показать, что этот язык может служить как для создания весь-
КлОСС
SW мо^еЛе ajfo&iifoi ^еяки/ии Нл мшшси или
ма внушительных программ, так и для выполнения элементарных действий, которые сделают вашу вебстраницу гораздо привлекательней.
ТЕРМИНЫ
Вначале рассмотрим несколько терминов из области ActionScript:
Действия (Actions) - это инструкции, которые говорят Flash - ролику, что де-£ лать. От них произошло название языка - ActionScript (сценарий действий).
События (Events) - это действия, которые происходят, когда проигрывается мультик. События, например, могут происходить, когда заканчивается загрузка какого-то кадра, когда мы достигаем какого-то кадра, когда пользователь нажимает клавишу на клавиатуре или курсор мышки оказывается над нашим {ишбеЯие, объектом.
CKnpjsajoirü-ü
1
Я*— и
ыг.н
^а^раму ж^емпл&ру ма^Аа а^хс&ш&и имя... Рисунок 2.
Выражения (Expressions) - это любая часть инструкции, которая порождает значение. Следующие примеры являются выражениями: 2 + 2, 2 * 2, a + b, 2*pi*r, (15 + k) * random(10).
Функции (Functions) - это блоки кода, которые можно многократно использовать. Функциям можно передавать значения и получать от них результат. Например, number = get_color(15, 24). 15 и 24 являются аргументами (или параметрами) функции get_color, возвращаемое значение которой записывается в переменную number.
Классы (Classes) - это типы объектов. Например, класс дерева - растение. Во Flash есть некоторое количество предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы или модифицировать существующие.
Экземпляры (Instances) -это буквально экземпляры определенных классов. Экземпляр - это уже конкретный реальный объект. Если класс - это определение объекта (экземпляра), то экземпляр - это уже конкретное воплощение, это класс в действии. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта.
Обработчики (Handlers) -
события. Например, onClipEvent - обработчик действий, связанных с конкретным символом.
Операторы (Operators) - это элементы языка, которые вычисляют значения, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, стоящих слева и справа от него.
Переменные (Variables) - это идентификаторы, которые могут хранить значения. Например, a = 5; или name = "Michael".
На рисунке 1 представлен интерфейс программы Macromedia Flash MX 2004.
ПАНЕЛЬ ДЕЙСТВИЙ (ACTIONS)
На рисунке 2 представлена панель Actions. В левой колонке панели видны под-
это специальные инструкции, которые обрабатывают Рисунок 1.
' JV ' IW
dmi m flj . 1. ■ ■ H ■ ßj IHJi £■ IJ ■ r (fcl -
11
at щ i n i
¥ 4 □■""""Г wfm Й 1 Л u-
Рисунок 3.
разделы акций и навигационная панель по мультику (рисунок 3).
Если щелкнуть левой клавишей мыши
по значку то раздел раскроется U , появятся подразделы и далее сами инструкции (акции). Под списком инструкций находится мини панель навигации по мульти-ку. По этой мини панели легко ориентироваться. Особенно это относится к тому, где именно вы будете писать ваш сценарий (скрипт).
В верхней части панели Actions имеется меню из кнопок:
£ js;; е + £ Й? «
Кнопка предназначена для выбора той или иной инструкции, которые разбиты по категориям,
- для поиска того или иного сочетания букв или цифр внутри скрипта (рисунок 4),
- для замены символов, при этом, как и в Word, существует возможность замены как в конкретном месте внутри скрипта, так и во всех частях скрипта (рисунок 5),
- для вставки пути, при этом возможны два варианта: либо относительные ссылки (Relative), либо абсолютные (Absolute). В примере на сцене находится два мультика с именами «а» и «Ь». В случае относительной адресации адреса кли-
taplrc» Ш
rnWWt: { Ffritai J
П|д||| | jJ-;. Г ■■ 1
| РПЖ4И ; l |
Рисунок 5.
find
iL | rill . 1
(ItULTliU l Й™ щ
Рисунок 4.
пов будут: a, b; абсолютной адресации _root.a, _root.b (рисунок 6),
- для проверки написания синтаксиса (спеллинг),
- для автоформатирования скрипта, позволяющего легче разобраться в инструкциях и найти ошибки,
- для режима демонстрации подсказок в процессе написания,
- система встроенной помощи,
- выбор опций по отладке
скриптов,
- варианты просмотра.
Панель действий служит для отображения и ввода ActionScript-программ. В некоторых версиях существуют два режима работы с панелью - нормальный (для начинающих свою нелегкую работу с программированием во Flash) и экспертный. В экспертном режиме список команд - это простое поле для ввода текста. В нормальном же режиме мы не можем напрямую редактировать команды. Для этого используется панель параметров.
Добавить инструкцию можно, нажав на кнопку «+» или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий во Flash
Insert "d pi'i P-sih
[ « 1
M, | 1 см |
P ь j
<
Рисунок 6.
Mozfcfay, ttftoc&o (сллёимеЛ Delete.
имеются последовательности клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки «+». Например, чтобы добавить функцию stop(), нужно нажать Esc+st (последовательно: «Esc», затем «s», затем «t»).
Удалить инструкцию можно, просто клавишей Delete.
Часто рекомендуется не начинать сразу же пользоваться экспертным режимом, если у вас нет опыта программирования на С-подобных языках (С++, Java, JavaScript, С#). У нормального режима есть большое достоинство, делающее его незаменимым для новичков - в этом случае гораздо меньше шансов ошибиться с синтаксисом языка. Но некоторые конструкции лучше и легче сразу почувствовать и научиться писать правильно.
КНОПКИ (BUTTON)
Первое, что хочется, когда начинаешь изучать интерактивность Flash, - сделать что-нибудь, что бы откликалось на действия пользователя, «оживить» ваше творение, добавить обратную связь. Самый простой способ сделать это -кнопки. Поэтому с них-то и начнем.
Возможно, вы помните, что во Flash существуют символы (Symbol). И среди типов символов существует специальный тип символа для создания кнопок - Button.
Чтобы создать кнопку, необходимо произвести следующие действия:
Выбрать инструмент рисования (например, прямоугольник (Rectangle Tool) _,) и нарисовать его на сцене. Выбрать инструмент «черная стрелка» (Selection Tool) Ъ
J & и й m U j
i
*
с/
F- lil W gH
к P.
afio&ûoû сшмб сдглоЛл stfoo — tcfrotucu.
Рисунок 7.
и выделить нарисованный прямоугольник (рисунок 7).
После этого выберите пункт меню Insert ® Convert to Symbol (или нажмите горячую клавишу F8). В появившемся диалоговом окне (рисунок 8) выберите пункт Button. Все, кнопка готова. Будем считать, что вы уже научились создавать кнопки, теперь научимся отслеживать нажатия на эти кнопки.
Кнопки в Macromedia Flash обладают обширным списком событий, на которые они могут реагировать:
press - клавиша мышки нажата, когда курсор находится в пределах кнопки;
release - клавиша мышки отжата, когда курсор находится в пределах кнопки;
releaseOutside - клавиша мышки отжата, когда курсор находится вне пределов кнопки;
rollOver - курсор мыши входит в пределы кнопки;
rollOut - курсор выходит за пределы кнопки;
dragOver - курсор входит в пределы кнопки, при этом была нажата кнопка и нажата клавиша мыши;
a—iiii^iw
b»* I inn
Edrtvtr Cht™^ h l'i'bïhii .rvrjO-.l'. и" an
С
Рисунок 8.
калька левую клавишу мышм,
dragOut - курсор выходит за пределы кнопки, при этом была нажата кнопка и нажата клавиша мыши;
keyPress («клавиша») - была нажата «клавиша». Список клавиш можно посмотреть в справке по Flash (объект Key) или использовать панель параметров для ввода нужной клавиши.
К сожалению, Flash «понимает» только левую клавишу мыши. Правая используется для вызова контекстного меню (щелкните правой клавишей на каком-нибудь Flash мультике). Способов отлавливать во Flash среднюю клавишу или «колесико» (mouse wheel) я пока не встречал; думаю, что их не существует, такая возможность существует в JavaScript, который вы можете комбинировать с Flash.
Перехватываются эти события с помощью директивы on(). Синтаксис ее таков:
on (событие) {
... // Другие инструкции
}
Например, переход на страничку.
on (release) {
getURL(«http://www.yandex.ru»); }
Вот так просто можно перехватить все события, связанные с кнопкой. Ну, а как их использовать, - это дело исключительно вашего воображения.
АНИМИРОВАННАЯ КНОПКА
Вы можете также создать не просто абстрактный прямоугольник, но анимиро-ванную кнопку. Для того чтобы оживить вашу кнопку, необходимо сделать следующее:
Нарисовать прямоугольник и превратить его в кнопку (это вы уже умеете).
Дважды щелкнуть левой клавишей мышки (ЛКМ) и перед вами появится следующая картинка (см. рисунок 9).
Двойным щелчком ЛКМ был произведен переход в режим редактирования кнопки, и то, что вы видите, нисколько не походит на ту временную линейку (Timeline), которую вы видели ранее. Такая временная линейка присуща только кнопкам. Как вы видите, у кнопки есть 4 состояния:
Up - кнопка не нажата, курсор мышки находится вне кнопки;
Over - кнопка не нажата, курсор мышки находится над кнопкой;
Down - кнопка нажата, курсор мышки находится над кнопкой;
Hit - область реакции кнопки.
ITtWi»
□ ЛШ| □
jj^ißxlJ . Ü ■■'■T.-J.f icE tT-T* tJ
Лага гЛоёи о^чвиЛл вяжу кнопку,.
Рисунок 9.
Т -.-Itre
* а □ Up Dtwn| W J
К1 - Ш JL Q с * * * Si s
f с i t i
Рисунок 10.
Рисунок 11.
Первые три состояния могут быть ани-мированы, по умолчанию, все состояния равны состоянию Up. Чтобы создать все состояния кнопки, необходимо 3 раза нажать на клавишу F6. Таким образом, у вас появляется панель времени (русунок 10).
То есть после вышеуказанных действий вы находитесь в состоянии Hit. Обычно анимируют состояние Over, и мы не будем отходить от этой традиции. Щелкните ЛКМ в состояние Over (рисунок 11).
При этом произойдет автоматическое выделение прямоугольника, и вам остается лишь преобразовать его в Movie Clip нажатием клавиши F8 и выбрать в диалоговом окне опцию Movie Clip (МС) (рисунок 12).
Теперь необходимо перейти в режим редактирования МС. Для этого достаточно щелкнуть два раза ЛКМ по вновь созданному МС. И теперь вы видите хорошо известную вам временную линейку и можете создавать анимацию.
Обратите внимание: чтобы вернуться опять на основную сцену, необходимо щелкнуть ЛКМ по ссылке Scene 1 над временной линейкой (рисунок 13).
Рисуок 12.
Рисунок 13.
© Наш авторы, 2004. Our authors, 2004,
Штенников Дмитрий Геннадьевич, Санкт-Петербургский Государственный Университет Информационных Технологий Механики и Оптики.
I ПС Fli
vJVtJ
