Прошлая статья была посвящена анимации. Мы создавали анимацию на основе motion tweening, shape tweening и просто составляли движение из отдельных кадров. Думаю, пора перейти к более сложной теме, рассмотрению инструмента, который создает основу для большинства качественных Flash-фильмов (Flash movies).

Этот инструмент - ActionScript - событийно-управляемый язык, встроенный во Flash. Последняя версия ActionScript, (которая присутствует во Flash 5), существенно отличается от ActionScript, который был в 4-м Flash. Если в прошлой версии, это был ограниченный набор команд, позволяющий осуществлять лишь основные действия, и вводимый с помощью не очень удобного интерфейса, то новый ActionScript - это мощный язык, с увеличенным набором команд, поддержкой классов, наследования (!), и гораздо более удобным интерфейсом.

ActionScript делает ваши страницы интерактивными. Вы можете реагировать на события с мышки или с клавиатуры, можете выполнить какие-либо действия при проигрывании определенного кадра.

Для того, чтобы овладеть ActionScript в полной мере, желательно уже иметь опыт программирования (предпочтительно на С++, JavaScript, etc.). Однако, одним из достоинств языка Flash, является то, что вам не нужно быть профессионалом во Flash, или полностью знать ActionScript, чтобы писать на нем качественный код. Вы можете использовать те возможности языка, которые сочтете необходимыми для своей работы.

Так как эта статья посвящена основам языка, в ней мы рассмотрим:

• Панель действий (Actions panel), на которой происходит практически все общение с ActionScript.
• Кнопки - как их заставлять работать, как нам требуется.
• Пути - как обращаться к нужным объектам?
• Основные действия с Flash-мультиками (movie clips) - мы будем управлять процессом проигрывания фильма, как нам будет угодно.
• Отладку в ActionScript - окошки Output и Debugger.

Цель этой статьи, дать вам почувствовать ActionScript, показать, что этот язык может служить, как для создания весьма внушительных программ, так и для выполнения элементарных действий, которые сделают вашу страницу гораздо привлекательней.

Термины

Прежде чем мы перейдем к конкретным действиям, несколько терминов из области ActionScript:

• Действия (Actions) - это инструкции, которые говорят Flash-мультику что делать. От них произошло название языка - ActionScript (дословно - сценарий действий). Давайте договоримся, что в рамках этой статьи, мы будем использовать термин "инструкция", дабы не путаться с настоящими действиями, которые будем производить.
• События (Events) - это действия, которые происходят, когда проигрывается мультик. События, например, могут происходить, когда заканчивается загрузка какого-то кадра, когда мы достигаем какого-то кадра, когда пользователь нажимает клавишу на клавиатуре или курсор мышки оказывается над нашим объектом.
• Выражения (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".

Эти термины мы будем использовать при обсуждении ActionScript. Итак…

Панель действий (Actions Panel)

Панель действий служит для отображения и ввода ActionScript программ (рис. 1). Существует два режима работы с панелью - нормальный (для "чайников") и экспертный. В экспертном режиме список команд - это простое поле для ввода текста. В нормальном же режиме, мы не можем напрямую редактировать команды. Для этого используется панель параметров.

Добавить инструкцию можно, нажав на кнопку "+" (см. рис. 1) или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий во Flash имеются последовательности клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки "+". Например, чтобы добавить функцию stop() , нужно нажать Esc+st (последовательно: Esc, затем "s", затем "t").

Удалить инструкцию можно, выбрав ее, и нажав кнопку "-" (или просто клавишу Delete).

Я рекомендую вам не начинать сразу же пользоваться экспертным режимом, если у вас нету опыта программирования на Java-подобных языках (С++, Java, JavaScript). У нормального режима есть большое достоинство, делающее его незаменимым для новичков - в нем есть гораздо меньше шансов ошибиться с синтаксисом языка. Новичкам это поможет быстрее понять тонкости ActionScript.

Рис. 1 - Панель действий

В панели действий отображаются действия объекта, либо кадра, выбранного в данный момент.

Кнопки

Первое, что хочется, когда начинаешь изучать интерактивность Flash - сделать что-нибудь, что бы откликалось на действия пользователя, "оживить" ваше творение, добавить обратную связь. Самый простой способ сделать это - кнопки. Поэтому с них-то мы и начнем.

Как вы знаете, во Flash существует специальный тип символа для создания кнопок - Button (см. ). Будем считать, что вы уже научились создавать кнопки, теперь научимся отслеживать нажатия на эти кнопки.

Кнопки в Macromedia Flash обладают обширным списком событий, на которые мы можем реагировать:

• press - клавиша мышки нажата, когда курсор находится в пределах кнопки;
• release - клавиша мышки отжата, когда курсор находится в пределах кнопки;
• releaseOutside - клавиша мышки отжата, когда курсор находится вне пределов кнопки;
• rollOver - курсор мыши входит в пределы кнопки;
• rollOut - курсор выходит за пределы кнопки;
• dragOver - курсор входит в пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
• dragOut - курсор выходит за пределы кнопки, при этом была нажата кнопка, и нажата клавиша мыши;
• keyPress ("клавиша") - была нажата "клавиша". Список клавиш можно посмотреть в справке по Flash (объект Key), или использовать панель параметров для вводу нужной клавиши.

К сожалению, Flash "понимает" только левую клавишу мыши. Правая используется для вызова контекстного меню (щелкните правой клавишей на каком-нибудь Flash мультике). Способов отлавливать во Flash среднюю клавишу или "колесико" (mouse wheel), я пока не встречал, думаю, что их не существует.

Перехватываются эти события с помощью директивы on() . Синтаксис ее таков:

On (событие) { ... // Наши действия }

Ниже вы можете сами попробовать вызвать некоторые события:

Очень часто используемый пример - переход по ссылке при нажатии на кнопку:

On (release) { getURL("http://rubs.boom.ru"); }

Чтобы проверить этот сценарий, выделите вашу кнопку, нажмите Ctrl+Alt+A и введите программу.

Вот так просто можно перехватить все события, связанные с кнопкой. Ну а как их использовать - это дело исключительно вашего воображения.

Основные действия с Movie Clips

Огромная доля творчества во Flash приходится на манипуляцию символами. Практически все базовые приемы, все трюки и эффекты невыполнимы без этих действий.

С помощью сценариев на ActionScript вы можете выполнять практически любые действия над символами. Надо только помнить, что выполнить эти действия можно только либо в ответ на действие пользователя, либо при наступлении какого-то кадра на временной шкале.

Итак, что же у нас есть? Я перечислю только основные (на мой взгляд) инструменты. Остальное вы найдете в списке элементов языка или в помощи.

Функции клипов (movie clip), которые можно вызывать:

• play() - начинает или возобновляет воспроизведение клипа;
• stop() - останавливает воспроизведение клипа;
• gotoAndPlay() - переходит на определенный кадр (сцену) и продолжает воспроизведение;
• gotoAndStop() - переходит на определенный кадр (сцену) и останавливает воспроизведение.

Свойства (параметры) клипов, которые можно считывать/изменять:

• _x, _y - координаты клипа (в пикселях);
• _xscale, _yscale - масштаб клипа (в процентах), соответственно по горизонтали и по вертикали;
• _width, _height - ширина и высота клипа (в пикселях);
• _rotation - угол поворота клипа (в градусах);
• _alpha - прозрачность клипа (в процентах);
• _visible - видимость.

Это далеко не все, что можно делать с клипами. Используйте другие параметры, экспериментируйте, творите!

Имена

Для того, чтобы обращаться к клипам, нам потребуется разобраться с понятием имени объекта (instance name) и пути до объекта (target path). Договоримся, что клип (movie clip) и объект для нас - одинаковые вещи.

Имя объекта - это имя конкретного экземпляра символа. Скажем у нас может быть символ - машинка, а экземпляры этого символа будут называться "Машинка1", "Машинка2", "Pickup", "Запорожец"…

Для того чтобы дать имя объекту нужно выделить объект, и в панели Instance (Window->Panels->Instance, Ctrl+I) в графе Name ввести имя объекта (рис. 2). Имена могут состоять только из букв, цифр и символа подчеркивания ("_"), причем имя не может начинаться с цифры.

Рис. 2 - Панель Instance

Пути

Путь до объекта - это запись имени объекта с учетом иерархии. Попытаюсь объяснить, что это такое.

Вы знаете, что во Flash объекты можно "вкладывать" друг в друга, составляя, таким образом, иерархию. Так вот, эта вложенность обеспечивает не только удобство в обращении с объектами, она еще и ограничивает видимость имен объектов. Видимость ограничивается своим уровнем. Объект может напрямую (по имени) обращаться только к объектам, входящим в него, стоящим на 1 уровень ниже в иерархии.

Для того чтобы обратиться к объекту другого уровня, нужно знать путь до него. Причем путь может указываться как абсолютно (с самого верхнего уровня иерархии), так и относительно (с текущего уровня).

Путь включает в себя объекты, через которые нужно "пройти" по дереву иерархии, чтобы добраться до нужного нам объекта, перечисленные через точку. Кроме того, существует несколько указателей (можно их назвать "виртуальными объектами"), которые часто очень полезны:

this - указатель на "самого себя" (т.е на текущий объект). Бывает нужен, например, когда нужно передать в функцию указатель на объект, из которого эта функция вызывается.

_parent - указатель на "родителя". Указывает на объект стоящий уровнем выше в иерархии.

_root - "корень". Это начало иерархии. Без него не обойтись при указании абсолютного пути.

Путь выглядит так:

leaf.play(); - у подобъекта leaf (лист) вызывается функция play();

_parent.tree.leaf.stop(); - подразумевается, что на одном уровне имеется объект tree, у которого есть объект leaf , у которого и вызывается функция stop();

_root.banner._visible = false; - сделать клип banner , находящийся на 1-м уровне, невидимым.

Рис. 3 - Иерархия клипов

Для иллюстрации возьмем иерархию из 5-ти объектов (рис. 3). Объекты 1-4 находятся на 1-м слое, объект 5 - на 2-м слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Объекты на рисунке визуально вложены друг в друга, но это ни в коем случае не означает, что так должно быть и "в жизни". Здесь они так сгруппированы для наглядности. Так как имя объекта не может начинаться с цифры, пусть объекты у нас называются obj1-obj5 .

Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться друг к другу по имени. obj1 может обращаться к obj2, а obj2 - к obj3 , но при этом obj1 не может обратиться к obj3 напрямую, т.к. тот содержится не в obj1 , а в obj2 .

Скажем первому объекту нужно, чтобы объект 3 начал заново воспроизводиться с 1-го кадра. Вот как это делается:

Obj2.obj3.gotoAndPlay(1);

Чтобы 4-му объекту сделать 1-й объект (заметьте со всеми подобъектами!) полупрозрачным, ему нужно в своем сценарии написать следующее:

Parent.obj1._alpha = 50;

Root.obj1._alpha = 50;

Т.к. obj4 у нас находится на первом уровне иерархии, то для него _root и _parent - одно и то же.

Теперь для объекта 3 напишем скрипт, который сделает объект 5 невидимым при нажатии клавиши мыши. В сценарии для объекта 3 пишем:

OnClipEvent (mouseDown) { _root.obj5._visible = false; }

В этом фрагменте мы использовали абсолютный путь. Если бы мы использовали относительный, это выглядело бы как:

Parent._parent._parent.obj5._visible = false;

Надеюсь, я прояснил момент с путями.

Приведенные выше примеры показали не только как выглядят пути, но и как вызываются функции и присваиваются значения свойствам.

Программа для создания флеш-игр без знания языков программирования. Позволяет создавать игры из логических блоков и заранее подготовленных изображений.

Когда-то, наверное, уже пару лет назад, на нашем сайте появилась программа Game Maker , которая позволяла делать игры практически без знания какого-либо языка программирования!

До сих пор данная страница у нас является одной из самых обсуждаемых, и часто в комментариях звучат сетования на то, что с ее помощью нельзя создавать игры, в которые можно было бы играть онлайн. Сегодня мы снова возвратимся к теме игростроения и рассмотрим аналогичную программу, которая-таки умеет делать флеш-игры - Stencyl !

Особенности программы

При помощи Stencyl можно создавать 2D-игры любых жанров, но больше всего движок программы «заточен» под различные стрелялки-бродилки. Структурно программа представляет собой целый комплекс инструментов, в котором можно, при желании, создать игру «с нуля» без использования сторонних приложений.

Закрываем всплывающее окошко с информацией о новой версии программы кнопкой «Close» или «Don’t show this again» (если не хотим видеть данное окошко при каждом запуске программы) и взамен него получаем следующее окно:

Здесь нам предлагают создать собственную учетную запись в сообществе разработчиков Stencyl. В принципе, аккаунт можно и не создавать (для этого жмем кнопку «Remind Me Later» внизу), но регистрация дает Вам возможность скачивать дополнительные шаблоны и действия с онлайн хранилища под названием StencylForge, поэтому не помешает:). Для заведения учетной записи нажимаем кнопку «Create an Account» и переходим к форме регистрации:

Здесь заполняем стандартные поля с вашим логином, паролем (два раза) и адресом электронной почты, после чего нажимаем кнопку «Sign Up». Если все пройдет удачно, то перед Вами наконец откроется интерфейс стартового окна программы.

Интерфейс стартового окна

Внешне рабочее пространство стартового окна Stencyl разделено на несколько зон:

В верхней части традиционно находится строка меню и панель инструментов. Здесь собраны все основные настройки и кнопки управления. Под панелью инструментов у нас есть небольшая узенькая серая полоска. На ней располагаются вкладки (да - интерфейс Stencyl многовкладочный, что очень удобно) и кнопки быстрого переключения между ними (справа).

Основная же рабочая область разделена на две части: в левой находится панель навигации по разделам программы, а в правой - основной контент (на основном экране - список игр), меняющийся в зависимости от активного в данный момент режима работы. Внизу есть еще несколько дополнительных кнопок, которые позволяют:

1. Открыть папку, в которой Stencyl хранит все ресурсы созданных игр и сами игры (кнопка «View Games Folder» в левом нижнем углу).
2. Запустить обучающий курс по работе с программой («Start Crash Course» на зеленой панельке в правом нижнем углу). Кстати, там же рядом есть кнопка для скрытия предложения пройти обучение («Don’t show this again»).
3. Открыть выделенную в данный момент игру из списка, что аналогично двойному клику по картинке игры («Open Game» в правом нижнем углу).

Для самостоятельного изучения возможностей Stencyl Вы можете пройти обучающий курс (и желательно бы его пройти), а также открыть одну из готовых игр, которая наиболее соответствует Вашей задумке, и посмотреть, как там все устроено. А я предлагаю изучить работу программы на примере создания игры о приключениях символа нашего сайта и его виртуального жителя - Фриды Бест!

С чего начать создание игры в Stencyl

Если Вы, перед тем как собрались создавать свою игру, посмотрели стандартные примеры игр на Stencyl, то могли заметить, что в основном все они довольно простые, одноэкранные и имеют вид сбоку. Мы же будем делать динамический шутер с видом сверху и стрельбой при помощи мышки! Все как в «больших» играх:).

Для своего проекта Вы можете изменить логику одного из готовых шаблонов, но мы не ищем простых путей и потому - только «с нуля», только «хардкор»:). Для этого нажмем на панели инструментов рабочей области (или в меню «File» - «Create New») кнопку «Create a New Game» и попадем в следующее окошко:

Здесь мы можем выбрать шаблон игры по жанру с уже подобранным заранее набором функций и действий для Вашего проекта. Однако мы будем создавать игру с чистого листа, поэтому выбираем пункт «Blank Game» и жмем кнопку «Next».

На следующем этапе нам потребуется произвести кое-какие базовые настройки:

В поле «Name» нам нужно указать название нашей игры, а в разделе «Screen Size» задать размеры игрового поля, указав его ширину (Width) и высоту (Height) в пикселях. После этого жмем кнопку «Create» и переходим непосредственно к интерфейсу редактора игр:

По умолчанию перед нами открывается вкладка «Dashboard», на которой слева собрано все дерево ресурсов игры, а справа находится непосредственно рабочая область. Здесь, думаю, уместно будет внести кое-какие пояснения по структуре «дерева».

Оно состоит из четырех веток, первые две из которых, содержат стандартные наборы ресурсов (RESOURCES) и логики (LOGIC), а две последние опционально могут хранить загруженные вручную ресурс-паки (RESOURCE PACKS) и расширения (EXTENSIONS).

Главной веткой здесь является ветка RESOURCES. Она содержит следующие разделы:

1. Actor Types - здесь хранятся спрайты всех игровых персонажей и настраиваются действия их анимации и взаимодействия между собой.
2. Backgrounds - в этом разделе у нас могут храниться все необходимые фоны для игры. Причем фон может быть, как для заднего плана (background), так и для переднего (foreground), что позволяет накладывать фоны друг на друга, достигая, например, тем самым эффекта параллакса .
3. Fonts - раздел, в который мы можем загружать различные красивые шрифты для создания оригинальных надписей. Однако, стоит учесть, что Stencyl может работать только с английским набором символов, поэтому для добавления русских букв файл шрифта, нам нужно заменить ими какие-нибудь из латинских символов.
4. Scenes - место для создания и редактирования уровней игры. Именно здесь мы можем задать внешний вид любого этапа и разместить всех персонажей, бонусы и другие игровые элементы.
5. Sounds - соответственно хранилище всех звуков, использованных в игре.
6. Tilesets - специальная ветка в которой хранятся тайлы - специальные спрайты, которые мы можем использовать для построения игровых уровней.

Создание и настройка тайлов

Однозначного мнения по поводу того, в какой последовательности реализовывать ту или иную игру не существует. Тут уж, кому как удобно, но я бы рекомендовал следующий алгоритм:

Создаем первую сцену - создаем персонажа - создаем врагов - создаем бонусы - создаем остальные этапы

Чтобы создать сцену в Stencyl нужно нарисовать ее внешний вид в ветке Scenes. Однако, для того, чтобы рисовать, нам нужно сначала иметь блоки, которыми можно «рисовать». Эти блоки в программе имеют название тайлов (tiles) и хранятся в разделе Tileset:

Набор тайлов являет собой простую матрицу, состоящую из изображений, которые Вы в нее загружаете. Вы можете загружать, как сразу готовую матрицу (картинку, состоящую из нескольких равновеликих изображений в один или несколько рядов), так и дополнять уже существующие наборы отдельными рисунками.

Для начала нам нужно создать новый набор тайлов (кнопка «Create New» в разделе Tilesets), после чего мы увидим окно, как на скриншоте выше. Для загрузки изображения нам нужно нажать кнопку «Choose Image» и выбрать в открывшемся окне Проводника заранее подготовленный файл с нужной картинкой (-ами).

Когда изображение загрузится, зададим ему параметры разбивки и размеры по ширине и высоте, после чего (если все правильно отображается) можно добавлять изображение в набор нажатием кнопки «Add».

Для каждого изображения (тайла) в матрице можно настраивать параметры взаимодействия с игровыми персонажами и предметами. Для этого нужно выделить нужный тайл и получить доступ к следующему окну:

В верхней части правой панели откроется раздел «Collision Bounds» (границы столкновений). Здесь мы можем выбрать произвольную форму, обозначающую границы взаимодействия нашего объекта с игровыми персонажами. По умолчанию у всех тайлов стоит параметр «Square» (квадрат), который делает тайл полностью непроходимым и твердым. Если же Вам нужно сделать тайл «прозрачным» для персонажей (например, пол), то достаточно задать параметр «No Collisions».

Помимо границ, для каждого тайла можно задать анимацию, добавив кадров при помощи кнопки «Insert Frames» на нижней панели. По умолчанию скорость анимации равняется 100 миллисекундам, однако для каждого кадра это число можно произвольно изменить.

Для этого достаточно дважды кликнуть по нужному кадру левой кнопкой мыши и в открывшемся окне изменить показатели задержки так, как нам того требуется. Также имеется возможность подкорректировать выбранный кадр при помощи встроенного графического редактора, который открывается кнопкой «Edit Frame».

Отрисовка сцены в Stencyl

После того, как набор тайлов сформирован, логично перейти к следующему шагу - формированию из добавленных изображений готового игрового пространства. Сделать это можно, нажав кнопку «Create New» в разделе Scenes. После нажатия кнопки мы попадем в окно настроек сцены:

Здесь нам обязательно нужно в поле «Name» задать уникальное название нашей сцене, указать размеры (ширина и высота в тайлах (по умолчанию) или пикселях), а также опционально (то есть, по собственному желнию) задать фоновой цвет для новой сцены. Жмем «Ok» и попадаем в редактор уровня:

С виду он напоминает графический редактор. По центру находится рабочая область, где мы и рисуем наш уровень. Слева и сверху находятся небольшие панели инструментов. Справа же расположились панели палитры, выбора наборов тайлов и управления слоями. Теперь, как все это работает…

Первым делом рисуем фон нашей рабочей области. Для этого на правой панели активируем вкладку «Palette» а на ней вкладку «Tiles» и выбираем нужный тайл из представленного перечня. Затем на левой панели выбираем инструмент «Карандаш» (Pencil) и рисуем выбранным тайлом нужные области.

За счет поддержки слоев, тайлы могут накладываться друг на друга, поэтому логичнее всего организовывать уровень с учетом того, что, например, на слое «Layer 0» у нас будет находиться фоновая подложка, выше, слой с препятствиями и персонажами, а еще выше - слой с различными счетчиками и игровыми индикаторами.

Управлять слоями можно при помощи кнопок под панелью «Layers». Здесь имеются кнопки для создания, удаления, перемещения и переименования слоев. Кроме того, любой слой можно скрыть или отобразить, нажав на кнопку в виде глаза справа от имени слоя.

Создание персонажей

После того, как у нас создана первая сцена настало время «заселить» ее различными игровыми персонажами. В Stencyl они зовутся «актерами» и хранятся, соответственно, в разделе «Actor Types». Создаются актеры по одному и тому же принципу, поэтому рассмотрим мы этот процесс на примере создания главной героини нашей игры - Фриды.

Чтобы добавить нового актера достаточно зайти в вышеупомянутый раздел Actor Types и нажать там кнопку «Create New». Нас уже привычно снова спросят о том, как мы хотим назвать новый игровой объект, после чего перед нами появится окно редактирования анимации персонажа:

Здесь в левой части выводится список добавленных анимаций актера (по умолчанию пустой кадр «Animation 0»), а в правой находятся инструменты добавления и настройки этих самых анимаций.

Выбираем пустую анимацию (или добавляем новую кликом по кнопке с плюсом внизу) и кликаем в правой части по полю «Click here to add a frame». После этого откроется окошко добавления изображений, которое похоже на аналогичное окно для добавления новых тайлов в набор. Нажимаем кнопку «Choose image», выбираем нужное изображение и настраиваем его разбивку и размеры (если нужно).

Когда все настроено, жмем кнопку «Add» в правой нижней части окна добавления - анимация должна отобразится в виде превью в левой секции:

Теперь нам осталось только настроить скорость смены кадров (двойной клик на любом из кадров) и некоторые дополнительные параметры, типа, названия (Name) анимации (очень пригодится для сложных проектов), цикличности (Looping) воспроизведения (по умолчанию активно), синхронизации и базовой точки (Origin Point) происхождения спрайта (по умолчанию - центр).

На нижней панели инструментов в правой секции мы обнаружим ряд кнопок. Они позволяют:

• добавить новые кадры в анимацию (Import Frames);
• редактировать выбранный кадр во внешнем редакторе (Edit Frame (External));
• создать кадр во внешнем редакторе (Create Frame (External));
• редактировать кадр во встроенном редакторе (Edit Frame);
• удалить кадр (Remove Frame);
• копировать кадр (Copy Frame);
• вставить кадр (Paste Frame);
• переместиться на кадр назад (Move Back) или вперед (Move Forward).

Настройка параметров и поведения персонажей

Выше мы сделали анимацию бега Фриды, использовав для этого всего два кадра, которые являются, по сути, отраженным по горизонтали одним и тем же рисунком. Теперь нам нужно сделать так, чтобы мы могли при помощи мыши и клавиатуры управлять движением нашей героини, а также, чтобы она адекватно реагировала на столкновения с преградами, которые мы нарисовали на сцене.

Первым делом настроим столкновения. Для этого посмотрим на строку под списком открытых вкладок и найдем там кнопку «Collision».

По умолчанию область столкновений являет собой квадрат, описанный вокруг всего спрайта анимации. То есть, событие столкновения будет происходить по всей площади объекта. Однако, на практике наша картинка чаще всего содержит и дополнительные элементы (у Фриды, например, бластер), которые по идеи не должны бы ни с чем взаимодействовать. Именно при помощи данного раздела мы и можем настроить все области столкновений.

Для начала уменьшим область вокруг Фриды до размеров только ее тела. Здесь нужно учесть, что двигать область мышкой мы не можем, а для настроек используются четыре числовых параметра в секции «Current Shape». Вначале мы задаем сдвиг области по горизонтали (от левого края) и вертикали (от верха), а затем указываем новые ширину и высоту области столкновений.

Ниже есть еще несколько параметров, объединенных в секцию «Physical Properties». Здесь мы сталкиваемся с галочкой «Is a Sensor?» и понятием групп.

Если активировать флажок «сенсора», то выделенная область перестанет быть физическим объектом: персонаж или его часть станет как-бы «прозрачной» для различных преград, но в то же время сохранит возможность запускать какие-либо действия при определенных условиях.

Примером из реальной жизни может быть современная сигнализация с использованием лазеров: сам лазер мы не видим, но, если коснемся его, то запускается процесс оповещения о том, что мы залезли не туда, куда надо:).

Теперь, для чего нужны группы… Предположим, что у нашего персонажа в руках не бластер, а меч, которым он (точнее она:)) рубит в капусту врагов (кстати в исходнике у Фриды есть лазерный клинок;)).

Задача состоит в том, чтобы при касании к врагу мечом, враг погибал, но если мы промазали, и супостат задел Фриду, то у нее отнималась какая-то доля энергии. А главная проблема здесь то, что анимация удара у нас, по сути, является картинкой, на которой одновременно присутствует и Фрида, и меч…

Если мы привяжем к картинке действие меча, то, кто бы ни касался нашей героини при проигрывании анимации, он будет погибать от удара. И вот как раз для того, чтобы разделить картинку на несколько объектов с разными возможностями и параметрами и был придуман механизм групп.

По умолчанию у нас существует только одна область, которая соответствует самому персонажу («Same as Actor Type»). Однако при помощи инструментов рисования над основной рабочей областью мы можем создать новые виртуальные объекты и задать для них группу при помощи кнопки «Edit Groups».

Со столкновениями, пожалуй, все, а теперь предлагаю разобраться с самым основным - настройкой поведения актера на сцене. Для этого нам нужно перейти в раздел «Behaviors»:

По умолчанию здесь вначале нет ни одного действия, но мы можем их добавить, нажав кнопку «Add Behavior» в левом нижнем углу. Перед Вами откроется перечень готовых к применению функций для управления персонажем или его взаимодействия с другими актерами на сцене.

Я для примера выбрал поведение «8 Way Movement», которое подразумевает передвижение актера по кругу в любую сторону. Теперь выбираем добавленное действие в списке слева и в правой части мы сможем настроить его параметры.

Добавление актеров на сцену и тестирование уровня

Если Вы следовали инструкции, то у Вас уже должен быть необходимый минимум ресурсов для игры. Осталось научиться добавлять актеров на сцену и тестировать работоспособность игрового пространства.

Возвращаемся в редактор созданной ранее сцены и вновь активируем палитру (Palette), но теперь вместо тайлов, включим вкладку «Actors» (Актеры). Перед нами появится список созданных ранее персонажей, которых мы сможем добавить на сцену при помощи инструмента «Карандаш»:

Главная героиня у нас одна, поэтому достаточно всего одного нажатия карандашом, чтобы добавить ее на сцену. И теперь наступил момент истины - первое тестирование! Чтобы запустить предварительную компиляцию проекта достаточно нажать кнопку «Test Scene» в правом верхнем углу вкладки с нашей сценой. Спустя некоторое время (первая компиляция всегда длится дольше) мы сможем полюбоваться своими трудами во флеш-плеере:

Помимо самого плеера с игрой сбоку у нас отображается окошко логов работы игры. С их помощью мы можем достаточно быстро найти неполадки в работе и попытаться их исправить.

Как видим, двигать Фриду в разных направлениях мы уже можем, но сама сцена остается неподвижной и стоит наше героине выйти за край видимой части сцены, как она исчезает… Непорядок:). Решить проблему можно, добавив Фриде поведение «Camera Follow» или настроив нужные параметры при помощи событий.

Также, нелишним было бы заменить стандартный курсор на что-то более подходящее, например, прицел. Это мы можем реализовать, добавив нового актера в виде прицела, убрав у него область столкновения и прикрепив к сцене при помощи стандартного поведения «Custom Mouse Cursor»:

Система событий в Stencyl

Простые игры в Stencyl можно создавать при помощи одних только стандартных поведений (Behaviors), однако, если нам требуется что-то нестандартное, то тут уже придется подумать над использованием событий, которые настраиваются для актеров и сцен в разделе «Events»:

По сути, поведения (Behaviors) тоже строятся на базе событий, но они имеют еще и визуальный интерфейс, что упрощает редактирование. Здесь же мы имеем дело непосредственно с функциональными блоками, которые выполняют те или иные действия.

Окно событий делится на три секции:

1. В левой секции находится список событий и кнопки для управления (создания/удаления/перемещения) ими. Для добавления события нам нужно нажать кнопку «Add Event», после чего выбрать нужную группу в выпадающем списке и указать конкретную нужную нам функцию. Справа от созданного события имеется галочка, которая позволяет нам при необходимости деактивировать его.
2. В правой секции мы имеем список всех доступных действий, сгруппированный в 10 разделов, каждый из которых включается соответствующей кнопкой. Для большего удобства действия в каждом разделе рассортированы по тематическим вкладкам и имеют свой уникальный цвет. Внизу здесь есть еще три вкладки. По умолчанию активна вкладка «Palette» (палитра), на которой и располагаются списки действий. Вторая вкладка - «Attributes» - служит для отображения локальных переменных (о них чуть ниже), а третья - «Favorites» - служит для показа избранных Вами действий.
3. Центральная секция - это рабочая область. Здесь мы и формируем окончательные примеры поведения персонажей при помощи различных комбинаций блоков действий и событий, по которым эти действия происходят. Комбинирование происходит путем простого перетаскивания блоков на рабочую область и последующей правки указанных в них параметров. Стоит учитывать, что функцию составляют только те блоки, которые объединены между собой и включены в основной блок события. Таким образом, чтобы временно убрать определенные ненужные в данный момент (но полезные) комбинации, нам достаточно просто вынести их из общей структуры на свободное место. Если же действия оказываются со временем ненужными вовсе, то их можно полностью удалить, переместив в корзину, которая находится в правой верхней части рабочей области.

Собственно, сам алгоритм создания событий мы уже описали, но дать какие-то универсальные рекомендации я, увы, не могу - для каждой игры события будут разными и их может быть довольно много… В качестве примера можете посмотреть исходники игры про Фриду, которые вы найдете в архиве с программой, но это - лишь ориентир, поскольку работа над событиями - Ваше личное творчество:).

Настройка физики и свойств

Мы с Вами уже рассмотрели много чего, но не коснулись некоторых дополнительных тем, которые могут быть очень важными при создании игр - я говорю о настройке всевозможных свойств наших актеров и сцен. Эти параметры у нас хранятся в двух последних вкладках. И первая из них - «Physics»:

Для сцен и актеров вкладка настройки физики выглядит по-разному. На вкладке с настройкой физики сцены находится всего два параметра - настройка горизонтальной и вертикальной гравитации. Внешний же вид секции настроек физических параметров актеров представлен на скриншоте выше и состоит из пяти вкладок с различными опциями:

1. Вкладка «General» («Общие»). Здесь у нас есть три параметра: тип актера (неподвижный, платформа (может двигаться по заданным правилам, но его не могут двигать другие актеры) и подвижный), вращение актера (может вращаться или нет) и влияние гравитации.
2. Вкладка «Heaviness» («Вес»). На этой вкладке можно настроить массу виртуального объекта и его инерционность.
3. Вкладка «Material» («Материал») позволяет задать для актера такие характеристики, которые будут симулировать поведение реального предмета, сделанного из того или иного материала. У нас есть возможность выбрать одну из предустановок из выпадающего списка «Preset Materials» или вручную задать характеристики трения и упругости нашего актера.
4. Вкладка «Damping» («Сопротивление») дает нам возможность более тонко настроить параметры взаимодействия актера с окружением за счет внедрения такой величины, как линейное (например, воздуху) и угловое (при вращении) сопротивление.
5. Вкладка «Advanced» («Продвинутые») предоставляет нам доступ к различным дополнительным настройкам, не вошедшим в предыдущие разделы. Здесь можно активировать упрощенную модель физики (для оптимизации игры), автоматическое определение областей столкновений, события повторных столкновений и возможность применения паузы к актеру.

С физикой разобрались, а теперь посмотрим на свойства, которые вызываются нажатием кнопки «Properties»:

Как и в предыдущем случае, для сцен и актеров свойства будут разными. В свойствах сцены мы можем указать ее имя («Name»), размеры (секция «Size») и фоновой цвет («Background Color»).

В свойствах же актера можно, помимо имени, задать описание (поле «Description») объекта, группу, к которой относится актер (секция «Choose Group») и слой анимации для мобильных устройств (здесь можно ничего не менять, поскольку бесплатная версия программы не позволяет экспортировать игры в форматы для мобильников.

Но и это еще не все настройки, которые нам доступны в Stencyl. Общие настройки игры доступны нам по нажатию кнопки «Settings» на основной панели инструментов:

В окне настроек слева находится список групп параметров, а справа - основная область (иногда разделенная на несколько вкладок), содержащая всевозможные опции. Здесь нас интересуют следующие разделы:

1. «Settings» («Настройки»). Первая группа настроек, которая позволяет немного персонализировать нашу игру. Эта группа содержит три вкладки. На первой из них («Main») мы можем задать игре новое имя, короткое описание, а также картинку-превью и иконку. На вкладке «Display» настраивается окончательный размер игрового пространства, а на последней («Advanced») есть возможность включить упрощенную физику и задать параметры сглаживания.
2. «Loader» («Загрузчик»). В этой группе мы можем частично (учитывая некоторые ограничения бесплатной версии) настроить внешний вид прелоадера (загрузчика), который будет отображаться перед полной загрузкой игры. Здесь уже четыре вкладки. На первой («General» - общие) можно указать ссылку на Ваш сайт, включить защиту от копирования игры на других ресурсах (через запятую перечисляем список дозволенных сайтов во второй строке) и один из скинов загрузчика. На вкладке «Appearence» мы можем задать цвет экрана загрузчика и фоновое изображение. При помощи вкладки «Bar Style» указываются размеры полоски загрузчика, а «Bar Color», позволяет задавать, соответственно его цвета.
3. «Attributes» («Атрибуты»). Данная группа настроек - одна из самых основных! Здесь можно управлять глобальными переменными, используемыми в игре (о переменных в следующем разделе ниже).
4. «Controls» («Управление»). Как явствует из названия, в данной группе мы можем перенастроить и добавить кнопки клавиатуры, при помощи которых будут выполняться те или иные игровые действия.
5. «Groups» («Группы»). Механизм групп мы уже рассматривали немного выше. Здесь мы имеем возможность видеть все созданные группы и править их.

Собственно, вот и все настройки, которые нам будут нужны для создания флеш-игр в бесплатной версии Stencyl. Но раз уж этот раздел о настройках, то тут грех не упомянуть о параметрах самой программы. Получить к ним доступ можно, активировав пункт «Preferences» в меню «File»:

В программе предусмотрена поддержка многоязычности интерфейса, однако, на данный момент существует только английская локализация, поэтому мы и перешли сразу ко второй вкладке - «Workspace». Дело в том, что в третьей версии Stencyl появилась функция автоматической генерации адаптивных изображений из загруженных спрайтов.

И по умолчанию стоит увеличение спрайта в два раза, что влечет за собой ухудшение качества графики. Чтобы этого не происходило, советую отключить переразмеривание картинок, выбрав в поле «Scale» значение «Standard (1x)».

Также советую заглянуть на третью вкладку - «Editors». Здесь можно ассоциировать действия обработки графики, звука и текста с внешними более продвинутыми (нежели встроенные в Stencyl) редакторами.

Немного о переменных

Мы с Вами рассмотрели практически все нюансы работы в Stencyl, но не коснулись одной из самых мощных возможностей - работы с переменными .

Переменные в любом языке программирования позволяют оперировать различными событиями, выражая их через определенные числа (числовые переменные), условия (булевые переменные), тексты (строковые переменные) и т.д. Главная особенность переменных - возможность замещать собой любое значение в заданных заранее рамках. Простой пример переменной: дежурный в классе. Сегодня им может быть Иванов, завтра Петров, а послезавтра Сидоров:).

В нашем случае переменная «дежурный» может принимать одно из трех значений, которое будет автоматически подставляться в зависимости от заданного условия (например, очередности фамилий в списке).

В Stencyl переменные могут быть локальными и глобальными. Локальные переменные мы можем объявлять в рамках какого-нибудь события или поведения, и они будут работать только для указанных действий. Создать локальную переменную можно в редакторе событий, вызвав раздел «Attributes»:

Здесь у нас есть несколько вкладок:

1. Вкладка «Getters» позволяет задать переменные, которые будут получать значение из каких-либо вычислений или прямых указаний.
2. Вкладка «Setters» дает возможность установить какие-либо значения для созданных ранее переменных.
3. Вкладка «Games Attributes» хранит блоки глобальных переменных и при желании позволяет добавлять новые (хотя, как это делать лучше мы рассмотрим чуть ниже).
4. Вкладка «Lists» предоставляет нам возможность создавать массивы данных.
5. Вкладка «Functions» используется для организации созданных функций.

Алгоритм создания локальной переменной прост: вначале создаем новый блок во вкладке «Getters», а затем находим во вкладке «Setters» только что созданную переменную и добавляем блок с ней на рабочую область, приравнивая к какому-либо игровому параметру. Вот и все - переменная объявлена и получила набор допустимых значений.

Глобальные переменные (Game Attributes) в Stencyl задаются сразу для всей игры и могут быть вызваны в любом событии или поведении. Как уже говорилось выше, создать их можно в разделе «Attributes» на вкладке «Game Attributes»:

Однако просматривать все созданные переменные и управлять ими гораздо удобнее при помощи раздела «Attributes» в настройках (кнопка «Settings» на панели инструментов или «Show Game Attributes» на вкладке «Game Attributes» в редакторе событий):

Здесь у нас представлен весь список глобальных переменных и имеется возможность создавать новые при помощи нажатия кнопки «Create New». Для новой переменной мы можем тут же задать тип (числовая, текстовая, булева или массив) и стартовое значение, не покидая пределов окна, что очень удобно на мой взгляд.

При помощи глобальных переменных очень удобно реализовывать различные счетчики, поскольку данные в них сохраняются при переходе игрока на новые уровни и хранятся в памяти до тех пор, пока включена сама игра. Также, рекомендую использовать глобальные переменные для отслеживания проигрываемой анимации.

Задав актеру определенный спрайт в событиях, мы можем ниже приписать этому спрайту определенное значение в переменной (например, порядковый номер или имя анимации). Таким образом, связав действие с переменной, мы сможем вызвать его в любой момент, задав этой переменной нужное значение.

Публикация, импорт и экспорт игр

Наконец-то мы, хоть и бегло, но ознакомились с основными принципами работы со Stencyl. Предположим, мы создали игру, проверили ее и все оказалось рабочим. Теперь дело за малым - превратить игру из проекта в реальный SWF-файл, который можно выложить в Интернет. Для этого нам достаточно открыть меню «Publish» и в списке «Web» кликнуть пункт «Flash».

Запустится компиляция файла игры, после чего появится запрос, куда и под каким именем сохранять полученный флеш-файл. Сохраняем и все - игра готова:).

Обратным процессом будет импорт игры. Благодаря функции импорта Вы сможете открывать проекты игр других пользователей, например, чтобы подсмотреть, как у них реализована та или иная функция;). Импортировать игру можно также из меню «File». При успешном импорте игра появится на главном экране в списке проектов. Однако здесь стоит сделать небольшую оговорку.

Проблема в том, что новый Stencyl 3.0 имеет только частичную совместимость с проектами, созданными в более ранних версиях, поэтому работоспособность импортированного Вами проекта игры может быть неполной или в худшем случае игра вообще не запустится, выдав ошибку. Вариантов у Вас будет немного - либо искать и исправлять ошибки, либо смириться, и оставить все, как есть:).

Достоинства и недостатки программы

• простота создания игр практически без навыков программирования;
• возможность создания игр практически любого жанра;
• большая коллекция готовых поведений и игровых ресурсов;
• возможность обмениваться проектами игр;
• нет ограничений при создании флеш-игр.

• довольно высокая ресурсоемкость как самой программы, так и созданных игр;
• ограниченное количество объектов на сцене - чем больше, тем медленнее работает игра (вплоть до отказа запускаться);
• нет поддержки кириллических шрифтов (нужно править векторные изображения латиницы, заменяя их нужными буквами);
• неполная совместимость новой версии программы с игровыми проектами, созданными в ранних версиях.

Выводы

Из всех существующих сегодня программ для создания флеш-игр Stencyl является максимально разумным компромиссом между простотой работы и широтой возможностей. Радует то, что функционал конструктора в бесплатной редакции практически ничем не ограничен, что позволяет почти в полной мере реализовать любую задумку.

Однако, не стоит забывать о «почти»… Дело в том, что сам Stencyl работает на базе JAVA-машины, которая, как известно, довольно требовательна к ресурсам. Если к этой нагрузке добавить еще и нагрузку, которую создает игра, то получится, что для нормальной работы нам потребуется современный мощный компьютер.

Это первое «почти». А второе - уже упомянутое мною вскользь неявное ограничение на количество объектов на сцене. Даже, если эти объекты всего лишь тайлы, но их много, игра может выдать при тестировании ошибку и не запуститься до тех пор, пока Вы не уменьшите их количество.

Резюмируя, можно сказать, что Stencyl будет идеальным движком для создания всевозможных казуальных флеш-игр и бродилок-стрелялок с видом сбоку. Более того, потренировавшись создавать флеш-игры, Вы сможете приобрести один из типов лицензии и, немного изменив механику, портировать свою игру в форматы, поддерживаемые Android и iOS. А это уже реальный способ заработать деньги, разместив игру на Play Market’е или в App Store!

Напоследок, остается только пожелать удачи всем тем, кто решит всерьез заняться игростроением. Пусть Ваши алгоритмы работают с первого раза, а компилятор сидит и молчит в тряпочку, когда Вы запускаете свои игры:).

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

Экспресс-план модуля:

• Методология программирования
• Объектное программирование
• Материальные и виртуальные объекты. Информационные объекты
• Терминология ActionScript
• Палитра Actions (действия). Режимы работы
• Практикум. Разбор скриптов

Методология программирования

Программирование предполагает наличие у профессионального старателя удивительной памяти (чтобы удержать в голове все разветвления алгоритма) и потрясающей аккуратности (чтобы не допустить в ходе кодирования малейшей описки, простительной в обычной жизни). Иными словами, программист должен сам быть немножко компьютером.

Такие позиции программирование занимало на заре развития компьютерной информатики, на рассвете структурного программирования. На программиста смотрели как на шамана. Стать программистом было так же сложно, как космонавтом, и почти столь же почётно.

Понятно, что такое положение вещей совершенно не совместимо с бурным развитием компьютерных технологий, которое настоятельно требует пополнения программистского штата широкими народными массами.
Теперь уже программистами называют не только тех, кто знает компьютер и язык программирования. Программист — это тот, кто способен провести формализацию и спроектировать быстрый и надёжный алгоритм (впрочем, такая роль программисту отводилась всегда, ещё классик Э. Дийкстра говорил, что самый главный язык, который должен знать программист, — это свой родной, на котором он изъясняется в повседневной жизни).

Объектное программирование

Объектно-ориентированное программирование (ООП) — современный способ создания программных кодов, который пришёл на смену структурному программированию. Вернее, объектное программирование не заменило структурное, а довело его до логического совершенства.

В объектно-ориентированных языках можно конструировать не только данные, но данные плюс процедуры (функции):

объект = данные + процедуры (объект = свойства + алгоритмы)

Объектом в информатике, как и всюду, называют всё, что угодно: число, таблицу, исполнителя, программу, кнопку на экране...

Однако информатика рассматривает объекты с точки зрения информационных процессов. В таком подходе нет ничего удивительного: каждая наука рассматривает объекты со своей точки зрения. Физик, наблюдая полёт пчелы, мысленно прикидывает формулы, которые описывают траекторию движения насекомого. Биолог задумывается о числе глаз, крыльев и ножек. Информатик наблюдает за тем, как своим «танцем» пчела передаёт информацию сородичам о полях медоносных растений.

Обычно информатик выделяет в объекте три составляющие:

• Какую информацию объект хранит (свойства объекта, данные объекта)?
• Как объект обрабатывает информацию (алгоритмы объекта, процедуры объекта)?
• Какую информацию объект передаёт и принимает (события объекта)?

Исследуем обычный телевизор как информационный объект.

Свойства (данные):
цвет: серебристый;
диагональ экрана: 53 см;
вес: 20 кг.

Алгоритмы (процедуры):
включение/выключение: кнопка (I);
переключение программ: кнопки (-), (+) блока PRG;
регулирование звука: кнопки (-), (+) блока ¤.

События:
приём телепередачи;
передача изображения и звука зрителю.

Материальные и виртуальные объекты

Телевизор — это материальный объект. Слово «материальный» означает «реальный», существующий на самом деле. Корпус телевизора сделан из пластика, гладкого на ощупь. Телевизор достаточно тяжёлый — не надо ронять его на ногу: будет больно. Если по телевизору стукнуть молотком, то, скорее всего, он выйдет из строя.

Рассмотрим телевизор изображённый на фотографии в этой лекции. Этот телевизор, конечно, не является материальным (реальным) телевизором. Его нельзя потрогать, понюхать. Он не может упасть на пол. Телевизор на фотографии — это виртуальный объект, то есть не реальный, не существующий на самом деле.

Информационные объекты

Понятие информационного объекта очень удобно для пользователей.

Для того чтобы посмотреть передачу по телевизору, не нужно знать, каким образом на экране возникает изображение и почему этот пластмассовый ящик говорит подобно человеку. Пользователю нужно только знать, как включить телевизор, как настроить его на нужную программу и как установить желаемую громкость звука. Иными словами, пользователь должен знать алгоритмы объекта и уметь ими пользоваться.

Информационные события, связанные с телевизором (это приём телепередачи, передача изображения и звука зрителю), позволяют использовать свойства и алгоритмы по назначению: посмотреть интересный мультфильм или узнать последние новости.

Менять свойства телевизора мы не можем, но можем их учитывать. А вот свойства виртуальных объектов менять легко.

Современное программирование — объектно-ориентированное. Это означает, что программа, которой предстоит работать на компьютере, создаётся как набор информационных объектов.

Объекты имеют свойства — ячейки памяти для хранения информации и алгоритмы, которые обрабатывают события, — информацию, поступающую от других объектов. Программа, составленная из объектов, не имеет одного общего алгоритма, а работает в результате информационного взаимодействия объектов.

Всё происходит так, как в реальной жизни. Ведь мир вокруг нас состоит из отдельных объектов (людей, животных, предметов, явлений), которые существуют по своим собственным правилам. А общее развитие мира определяется тем, как отдельные объекты взаимодействуют друг с другом.

Объект и экземпляр объекта

Вообще говоря, конкретный телевизор в терминологии ООП — это не объект, а экземпляр объекта. Объектом является комплект документации на заводе, по которой изготовляются телевизоры. Все телевизоры, которые сходят с конвейера, имеют одни и те же свойства и одни и те же алгоритмы управления.

То же и в программировании. Объект — это шаблон. Экземпляр объекта — это рабочая копия.

Предопределённые объекты Macromedia Flash. Язык ActionScript

У тех, кто только начинает работать в Macromedia Flash, может возникнуть иллюзия того, что к объектам мы можем отнести любой графический элемент, находящийся на сцене. Действительно, графические элементы можно перемещать, копировать, удалять, преобразовывать, стыковать, выравнивать, группировать… Они имеют определённые нами в процессе рисования свойства: цвет, размер, форму… Однако термин объект используется в языке программирования ActionScript в другом значении. Самым значимым объектом в Macromedia Flash является объект клип — MovieClip.

Для того чтобы составить некое представление о предопределённых объектах Macromedia Flash сделаем краткий обзор некоторых из них. Обратите внимание, что эти объекты могут быть использованы для доступа и манипулирования некоторыми типами информации:

Объект Math — набор встроенных математических констант и функций: cos (косинус), sin (синус), atan (арктангенс), abs (абсолютное значение числа)…
Объект Sound — позволяет добавлять звуки к клипу и управлять ими во время проигрывания клипа. Например, можно регулировать громкость (setVolume) или баланс (setPan).
Объект Mouse — позволяет скрывать стандартный курсор, чтобы можно было использовать какой-то другой.
Объект MovieClip — позволяет управлять клипом. Клип имеет свойства (например, _height, _rotation, _totalframes) и методы (play, loadMovie или duplicateMovieClip).

Терминология ActionScript

Как и любой скриптовый язык, ActionScript использует специфическую терминологию, соответствующую специфическим правилам синтаксиса. Следующий список предоставляет введение в важнейшие термины ActionScript.

Actions (команды) — операторы, которые дают инструкции клипу, что ему делать во время воспроизведения. Например, gotoAndStop переводит воспроизведение на определенный кадр.
Arguments (аргументы), также называются параметрами — позволяют передавать значения функциям.
Classes (классы) — типы данных, которые можно создавать для определения новых типов объектов. Для определения класса объектов, создаются функции-конструкторы.
Constants (константы) — неизменяемые элементы. Например, константа Math.PI всегда имеет определённое значение. Константы полезны для сравнения значений.
Constructors (конструкторы) — функции, используемые для определения свойств и методов класса.
Data types (типы данных) — набор значений и операций. Строки, числа, true и false (булевы) значения, клипы — всё это типы данных ActionScript.
Events (события) — действия, происходящие во время воспроизведения клипа. Например, различные события происходят при загрузке клипа, когда плеер воспроизводит кадр, пользователь щёлкает на кнопке в клипе или нажимает кнопку на клавиатуре.
Expressions (выражения) — любые части операторов, имеющих значения. Например, 2 + 2 это выражение.
Functions (функции) — блоки многократно используемого кода, которым могут быть переданы аргументы (параметры) и которые могут вернуть значения. Например, функции getProperty передаются имя свойства и имя клипа, а возвращается значение этого свойства. Функция getVersion возвращает версию Flash Player, воспроизводящего клип.
Handlers — специальные команды, управляющие событиями, такими как mouseDown или load.
Identifiers (идентификаторы) — имена, используемые для обозначения переменных, свойств, объектов, функций и методов. Первый символ должен быть буквой, знаком подчеркивания (_) или знаком доллара ($). Любой следующий символ должен быть буквой, знаком подчеркивания (_), цифрой или знаком доллара ($). Например, имя переменной firstName.
Instances (экземпляры) — объекты, принадлежащие к определённому классу. Каждый экземпляр класса содержит все свойства и методы этого класса. Все клипы — экземпляры со свойствами (например, _alpha и _visible) и методами (например, gotoAndPlay и getURL) класса MovieClip.
Instance names — уникальные имена, позволяющие указывать экземпляр клипа в скриптах. Например, исходный символ в библиотеке может быть назван counter, а его два экземпляра могут иметь имена scorePlayer1 и scorePlayer2.
Keywords (ключевые слова) — зарезервированные слова, имеющие специальное значение. Например, var — ключевое слово, используемое для объявления локальных переменных.
Methods (методы) — функции, присущие объекту. После того, как функция определена, она может быть вызвана, как метод этого объекта.
Objects (объекты) — коллекции свойств, каждый из которых имеет своё имя и значение. Объекты обеспечивают доступ к различным типам данных. Например, предопределенный объект Date предоставляет информацию от системных часов.
Operators (операторы) — вычисляют новые значения из одного или более значений. Например, оператор сложения (+) складывает два или более значения для получения нового значения.
Properties (свойства) — атрибуты, определяющие объект. Например, _visible — свойство всех клипов, которое определят, видим клип или нет.
Variables (переменные) — идентификаторы, которые содержат значение любых типов данных. Переменные могут быть созданы, изменены и обновлены. Значения, которые они содержат, могут быть запрошены для использования в скрипте.

Возможности языка ActionScript настолько всеобъемлющи, что охватить их в рамках работы данного курса просто нереально, поэтому мы ограничимся описанием основных концепций языка и общих правил построения скриптов на ActionScript.

ActionScript позволяет создавать скрипты для клипа (символ типа Movie Clip), кнопки (символ типа Button) или ключевого кадра (Keyframe). Каждый такой скрипт (то есть фактически программа на языке ActionScript) жёстко связан с соответствующим элементом ролика. При публикации ролика текст скрипта, как и другие элементы фильма, экспортируется в swf-файл. Тем не менее, при желании вы можете сохранить его в отдельном файле с расширением as (это обычный текстовый файл), чтобы впоследствии использовать в каком-либо другом фильме.

Палитра Actions (действия)

Палитра Actions (действия) позволяет создавать и редактировать скрипты для объектов (клипов и кнопок), а также ключевых кадров. Можно выбирать заранее определённые команды из списка команд — Toolbox list (в левой части палитры), перетаскивать их в правую часть панели; использовать кнопки расположенные над текстовым полем для выбора команды, её удаления и перестановки команд.

В Normal Mode (нормальный режим) можно писать команды, используя поля параметров (аргументов).

В Expert Mode (экспертный режим) можно писать и редактировать команды прямо в текстовом поле, как в обычном текстовом редакторе.

В ходе создания скрипта путём выбора команд из списка, вы должны обратить внимание на то, что эти команды систематизированы по категориям:

Actions (команды) — процедуры языка ActionScript, имеющие «универсальный» характер, то есть не зависящие от особенностей класса объектов (в отличие от методов объектов, принадлежащих конкретному классу); в эту же категорию входят традиционные для большинства языков программирования высокого уровня операторы логического управления (проверки логических условий, организации цикла и т. п.).

Operators (операторы) — операторы логических и арифметических операций (сложение, вычитание, сравнение и т.п.).

Functions (функции) — предопределенные (библиотечные) функции (например, в их число входит функция проверки номера версии Flash-плеера).

Constant (константы).

Properties (свойства) — свойства объектов, не зависящие от класса (например, уровень прозрачности изображения).

Objects (объекты) — предопределённые объекты, которые могут быть использованы в сценарии (например, существует объект для работы с датой и временем); в этот же раздел включаются пользовательские классы объектов.

Deprecated (осуждаемые) — конструкции, которые не рекомендуется использовать в скриптах (как устаревшие).

Flash UI Components (компоненты пользовательского интерфейса).

Кроме перечисленных разделов, в списке Action Toolbox имеется также раздел Index , который содержит алфавитный перечень всех компонентов языка.

Подсветка и проверка синтаксиса

Система подсветки синтаксиса окрашивает определённые элементы ActionScript в разные цвета.

Ключевые слова и предопределённые идентификаторы (например, gotoAndStop, play и stop) подсвечиваются тёмным синим цветом.

Комментарии подсвечиваются бледным серым цветом.

Строки, окружённые кавычками, ярким синим цветом.

В нормальном режиме все синтаксические ошибки подсвечиваются сплошным красным фоном в окне скриптов. Это упрощает проблему нахождения ошибок. Если вы наведёте курсор мыши на команду с ошибкой, появится подсказка, которая покажет сообщение об ошибке, ассоциированное с этой командой. Когда вы выберите эту команду, сообщение об ошибке также появиться в строке состояния панели параметров.

Для проверки текущего скрипта на наличие ошибок, следует использовать раздел Check Syntax из выпадающего меню в правом верхнем углу палитры Actions или соответствующую кнопку (галочка голубого цвета в Expert Mode).

Практикум. Разбор скриптов
Ролик №1

Перед вами очень скромный ролик, в котором организована работа гиперссылок. Текстовой блок, присутствующий в ролике, представляет собой статический текст, для которого в палитре Properties определены следующие свойства:

В раздел URL link записан адрес документа. В разделе Target вы указываете окно или фрейм, в который должен быть загружен запрошенный документ. В данном ролике документ будет загружен в новое окно браузера.

Для кнопки создаём скрипт, используя палитру Actions. Для этого выделяем кнопку с помощью инструмента Arrow и разворачиваем палитру Actions.

Для того чтобы использовать в своей работе команду getURL обратитесь к категории Actions > Browser/Network > getURL. Затем, обратившись к полям параметров, определитесь с адресом документа…
Прокомментирую подробнее некоторые нюансы работы с палитрой Actions в этом ролике.

Параметр Window задаёт окно или фрейм, в который должен быть загружен запрошенный документ. Значение параметра выбирается с помощью раскрывающегося списка, который содержит следующие варианты (они аналогичны значениям атрибута target тэга в языке HTML):

_self — документ будет загружен в текущее окно, или фрейм;
_blank — документ будет загружен в новое окно;
_parent — документ будет загружен в родительский или текущий фрейм;
_top — документ будет загружен во фрейм более высокого уровня иерархии или в текущее окно.

При необходимости значение данного параметра может быть получено как результат вычисления выражения. В этом случае следует установить флажок Expression (выражение), расположенный справа от списка Window.

Параметр Variables позволяет указать способ пересылки данных по заданному URL. Значение параметра выбирается из раскрывающегося списка, который содержит три варианта:

Don"t send (не отправлять) — пересылка данных не требуется;
Send using GET (отправить, используя GET) — для пересылки данных будет использован метод GET;
Send using POST (отправить, используя POST) — для пересылки данных будет использован метод POST.

Напомню, что различие в использовании методов GET и POST для пересылки данных на сервер состоит в том, что при первом из них пересылаемые данные присоединяются к строке адреса. Поскольку длина адреса ограничена 256 символами, то ограничен также и объём пересылаемых данных.

Обратите внимание на то, что команда getURL была автоматически помещена в фигурные скобки некой on(release). Дело в том, что когда вы назначаете действие кнопке или клипу, Flash автоматически генерирует специальную управляющую процедуру (handler), которая во многих объектно-ориентированных языках называется «обработчик события» (или «селектор»). Обработчик проверяет, произошло ли событие определённого типа, и если да, то инициирует соответствующую последовательность действий, заключённых в фигурные скобки.

Для кнопок обработчик имеет имя on , а для клипов — onClipEvent . Имя обработчика предшествует списку событий, на которые обработчик должен реагировать. Например, конструкция:
on(release, KeyPress:"A")
означает, что обработчик должен реагировать на события двух типов: release (кнопка мыши отжата) и KeyPress:"A" (на клавиатуре нажата клавиша "А").

Для кнопок в языке ActionScript предусмотрены следующие типы событий:

Press — пользователь нажимает кнопку мыши, когда указатель находится над изображением кнопки (фильма).

Release — пользователь нажимает и затем отпускает кнопку мыши (указатель находится над изображением кнопки).

Release Outside — пользователь отпускает кнопку мыши, когда указатель не находится над изображением кнопки.

Key Press — пользователь нажимает определённую клавишу на клавиатуре; для данного события необходимо дополнительно указать клавишу.

Roll Over — пользователь перемещает указатель над изображением кнопки.

Roll Out — пользователь перемещает указатель за пределы изображения кнопки.

Drag Over — пользователь нажимает кнопку мыши, когда указатель находится над кнопкой, выводит его за пределы кнопки, и затем опять устанавливает над кнопкой.

Drag Out — пользователь нажимает кнопку мыши, когда указатель находится над кнопкой, и затем выводит его за пределы кнопки.

Чтобы изменить перечень событий, на которые должен реагировать объект ролика, необходимо щёлкнуть мышью в строке сценария, в которой записано имя обработчика. При этом изменится формат окна параметров, и в нём появится группа флажков, с помощью которых можно выбрать требуемые события. Сделанный выбор сразу же отображается в окне сценария.

И последнее, в ролике работает только один кадр и один слой.

Ролик №2

В этом ролике мы с вами научимся прописывать акции и кнопке и кадру и клипу.

Для комфортной работы в ролике вам следует создать три слоя.

Слой action . В этом слое, как впрочем, и во всех остальных только один кадр, он пуст, является ключевым и ему прописан скрипт:

Fscommand("showmenu", "false"); fscommand("fullscreen", "true");

Эти строчки определяют поведение вашего ролика в процессе проигрывания. Первая строка позволяет убрать меню в плеере (это очень важно, когда ваш ролик представляет собой программу тестирования, и пользователь должен быть лишён права сделать шаг назад Control > Step Back). Вторая строка разворачивает ваш ролик на весь экран. Для того чтобы прописать эти строки вам необходимо встать на это кадр и обратиться к категории Actions > Browser/Network > fscommand.

Слой penguin . На этом слое расположены блоки статического и динамического текста, кнопка и клип. Блоки статического текста выделены зелёным цветом, блоки динамического текста красным цветом.

Во-первых, определимся с блоками динамического текста. Для создания блока динамического текста используется уже хорошо знакомый вам инструмент Text. Однако содержимое блока остаётся пустым. Заполнение этих блоков данными мы поручим кнопке. Размер блоков можно будет подкорректировать в процессе отладки ролика. Каждому блоку динамического текста необходимо присвоить имя. Обратите внимание на палитру Properties. В разделе Text Type выберите Dynamic Text, в разделе Var (Variable) определите имя блока.

Например, в этом ролике для динамического блока, расположенного напротив статического текста «ширина экземпляра» определено имя w , для высоты экземпляра h , имени экземпляра n , координаты точки регистрации экземпляра два блока x и y . Обратите внимание, что блоки динамического текста Flash выделяет пунктирной линией.

Во-вторых, создадим клип, в который будет помещён графический элемент — пингвин. В этом ролике это импортированная графика в формате wmf. После того как графика будет импортирована, используем команду Convert to Symbol и превратим её в клип (символ типа Movie Clip), назовём его, к примеру, penguin_vl. Клип будет автоматически помещён в библиотеку ролика, а вот со сцены его следует удалить. Следующий шаг это создание нового клипа. Используем команду New Symbol, назовём этот клип penguin_or. В первом кадре этого клипа, используя библиотеку ролика, поместите экземпляр клипа penguin_vl (именно ему в последующем мы пропишем скрипт). Добавьте в клип ещё один ключевой кадр.

Вернитесь на сцену и поместите на неё экземпляр клипа penguin_or. И не просто поместите, а пропишите его на сцене. Для этого обратитесь к палитре Properties, и в разделе Instance Name укажите имя экземпляра, например penguin (впрочем, ваше право, дать ему то имя, которое вы пожелаете, не забывайте только правила формирования имён в ActionScript). Теперь произведём редакцию клипа, экземпляр которого был помещён на сцену, используем для этого команду Edit. Клипу в первом кадре пропишем скрипт:

OnClipEvent (load) { setProperty("_root.penguin", _alpha, random(50)+50); }

Команда setProperty позволяет изменять свойство экземпляра клипа во время воспроизведения ролика. Давайте попробуем разобраться в синтаксисе, используя общий формат команды:

setProperty(target, property, expression);

target — это путь к экземпляру клипа, чьё свойство нужно изменить (_root.penguin, зная путь к экземпляру, мы обращаемся к нему по имени, которое мы присвоили ему в палитре Properties).

property — свойство, которое нужно изменить (_alpha, в нашем случае это прозрачность экземпляра).

expression — значение, присваиваемое свойству (random(50)+50, случайное число от 50 до 100). Обязательно установите флажок Expression. Так как значение данного параметра должно быть получено как результат вычисления выражения.

Для того чтобы обеспечить постоянное изменение прозрачности клипа-пингвина в ходе проигрывания ролика мы создали два кадра. Напомню, что только в первом кадре клипу был прописан скрипт. Второй кадр можно оставить пустым, но при этом пингвин будет не мерцать, а очень неприятно мигать. Обязательно поэкспериментируйте с роликом и убедитесь в правоте моих слов.

И ещё, почему перед именем экземпляра прописанного на сцене стоит _root ?

Когда вы будете работать с командой setProperty для указания пути к объекту, вам необходимо будет обратиться к кнопке Insert a target path (эта кнопка похожа на прицел). При этом перед вами откроется окно Insert a target path с помощью которого вы можете описать путь назначения (то есть адрес).

Это окно содержит следующие основные элементы интерфейса:

Дерево фильма, отражающее иерархию объектов фильма, к которым возможно обращение из скрипта.

Поскольку при обращении к объекту используется имя соответствующего экземпляра (кнопки, клипа, текстового поля), то в дерево включаются только поименованные (прописанные на сцене) экземпляры.

Корневой элемент дерева зависит от способа адресации: для абсолютного адреса — это ключевое слово _root (то есть основной фильм), для относительной — слово this (то есть текущая временная диаграмма).

Многострочное текстовое поле Target (назначение), предназначенное для ввода и корректировки пути назначения; если выбрать в дереве фильма некоторый элемент, то в поле Target появится соответствующий маршрут, который может быть изменен или дополнен вручную.

Пара переключателей Mode (режим), которые позволяют выбирать способ адресации (относительный — Relative или абсолютный — Absolute). По умолчанию используется относительная адресация.

Пара переключателей Notation (нотация), которые позволяют выбирать формат записи пути назначения: вариант Dotes (точки) означает применение точечной нотации; вариант Slashes (слэши) соответствует записи с использованием слэшей (это «устаревший» стиль, используемый для совместимости с предыдущими версиями ActionScript). При использовании слэшей формат записи аналогичен тому, который применяется для записи URL в HTML-документах.

Продолжим работу над роликом.

На этот же слой нужно поместить кнопку. В этом ролике я воспользовалась библиотекой Flash.

Кнопке прописываем скрипт:

On (release) { w = getProperty(_root.penguin, _width); n = getProperty(_root.penguin, _name); h = getProperty(_root.penguin, _height); x = getProperty(_root.penguin, _x); y = getProperty(_root.penguin, _y); }

Функция getProperty возвращает значение указанного свойства указанного клипа. Давайте попробуем разобраться в синтаксисе, используя общий формат команды:

getProperty(instancename, property);

instancename — имя экземпляра клипа, свойство которого необходимо получить.

property — имя свойства клипа.

Для того чтобы присвоить w значение, вычисляемое функцией вам необходимо обратиться к категории Action > Variables > set variable.

Слой ramka . Это слой с декорациями.

Протестируйте ролик и если это необходимо произведите его коррекцию. Поэкспериментируйте со свойствами.

Домашнее задание: Основы программирования в Macromedia Flash MX

В домашних заданиях этого курса будут звучат замечательные афоризмы.

Наше знание похоже на шар, чем больше оно становиться, тем больше у него точек прикосновения с неизвестным.
Ефремов Иван Антонович

Продублируйте ролики, представленные в этой лекции.

Выполненное задание представьте в виде файлов в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.

Тест: Основы программирования в Macromedia Flash MX

В материалы теста входят вопросы, которые позволят вам проверить прочность знаний полученных в ходе работы над первым модулем курса.
Тест создан в Macromedia Flash MX и представляет собой интерактивный flash-ролик:

dobe Flash Томилова Елена Анатольевна

Лекция 8 . Программирование во Flash

План

Введение

Для придания интерактивности роликам, Flash имеет внутренний язык сценариев ActionScript .

ActionScript — это язык программирования, посредством которого во Flash осуществляется отправка команд и запросов о временных зависимостях, видеоклипах, кнопках и других объектах.

Язык ActionScript создан на основе стандарта ЕСМА-262, который, в свою очередь, составлен на базе языка JavaScript . По сути, ActionScript является разновидностью JavaScript , адаптированного и оптимизированного для работы в среде Flash .

Очень часто с помощью ActionScript можно легко достичь целей, которые в противном случае представляли бы собой труднодостижимую или, вообще, невозможную задачу. Без ActionScript можно реализовать только малую часть возможностей Flash. Например, ActionScript необходим для реализации любого рода интерактивности, например отклика после щелчка пользователем кнопкой мыши или нажатия клавиши на клавиатуре. Кроме того, ActionScript является единственным способом реализации перехода к определенному кадру временной шкалы либо начала или остановки воспроизведения видеоклипа. Однако эти простые примеры не раскрывают богатство, гибкость и бесконечность возможностей, которые ActionScript открывает перед разработчиками, использующими среду Flash . Язык ActionScript для Flash является "родным", и без хотя бы минимального овладения им вы будете подобны человеку, который пребывает в чужой стране и вынужден общаться с помощью жестикуляции. В этом случае придется довольствоваться меньшим по сравнению с тем, что в действительности вы хотели бы получить.

Как правило, при использовании ActionScript удается получить SWF-файлы меньших размеров и с лучшим качеством, чем при создании промежуточных отображений. Еще одним преимуществом является то, что различные задачи удается выполнять с большей точностью, например, перемещать видеоклип в точно заданное место рабочей области.

Чтобы использовать действия ActionScript , вам не нужно быть программистом. Безусловно, при создании сложных сценариев опыт программирования окажется полезным. Однако при написании сценариев ActionScript предыдущий опыт не является обязательным. Для выбора действий и связывания их с объектами фильма создатели Flash предусмотрели простой и понятный интерфейс — панель Actions. С помощью данной панели вы получаете доступ к библиотеке команд ActionScript), что позволяет вам значительно экономить время при вводе кода сценариев.

Таким образом, ActionScript — это объектно-ориентированный язык программирования, являющийся родным для среды Flash . В данном контексте термин объектно-ориентированный означает, что сценарии связываются с объектами или элементами фильма. Если во время воспроизведения фильма эти объекты принимают сообщение об определенном событии, их сценарии (или действия) выполняются. Например:

on(press){

gotoAn d Play("nextStop")

В этом сценарии при наступлении события щелчка мыши press головка воспроизведения перейдет к кадру с меткой nextStop и воспроизведение продолжится с этого места. Другими словами, событие вызывает действие, которое изменяет порядок воспроизведения фильма.

Связь между событиями и действиями является главной особенностью объектно-ориентированного программирования. Если у вас нет опыта написания сценариев либо вы совсем незнакомы с программированием, такие формулировки могут вас несколько смутить. Однако не стоит впадать в унынье. Как только вы познакомитесь с действиями, синтаксис и структура языка ActionScript станут для вас менее загадочными.

С помощью языка ActionScript можно

• управлять ходом проигрывания фильма;
• создавать анимацию программным способом, без использования временной шкалы;
• принимать данные от пользователя;
• загружать данные из файлов;
• управлять звуками;
• ... и многое другое.

В версии Adobe Flash 9.0 (CS3) основным языком программирования является ActionScript 3.0 , однако он достаточно сложен для изучения на начальном этапе и мы не будем его рассматривать.

Вместе с тем поддерживается и старый «простой» вариант — язык ActionScript 2.0 , который и будем использовать.

Запомните, что при создании новых FLA-файлов нужно всегда выбирать тип документа Flash File (ActionScript 2.0) .

Программа на ActionScript называется сценарием . Она состоит из отдельных блоков кода, которые могут связаны с некоторыми элементами фильма:

• ключевыми кадрами , код выполняется каждый раз, когда этот кадр проигрывается;
• кнопками или клипами , код выполняется при возникновении какого-нибудь

Чтобы использовать действия для написания сценариев фильмов Flash , необходимо прежде всего изучить панель Actions .

Знакомство с панелью Действия (Actions )

Панель Actions (Действия) — это интерфейс создания сценариев, которые будут выполняться во время воспроизведения Flash-фильма. Работать с панелью Действия (Actions ) можно в двух режимах: Normal (Обычный) и Expert (Эксперт). В режиме Normal пользователю доступны некоторые автоматические функции создания кода, поэтому данный режим рекомендуется для новичков. Работая в режиме Normal, вы можете создавать действия и добавлять их в фильм посредством выбора соответствующих пунктов меню и перетаскивания элементов с помощью мыши. Режим Expert больше подходит для опытных разработчиков. В данном режиме панель Действия (Actions) больше похожа на окно текстового редактора, в котором пользователь самостоятельно вводит код сценариев.

Чтобы открыть или развернуть панель Действия (Actions ) , выполните одно из следующих действий:

• из меню Окно (Window) выберите пункт Действия (Actions);
• нажмите клавишу < F9 >.

После этого на экране появится или будет развернута панель Действия (Actions). Если эта панель была открыта, но скрыта другим окном, она переместится на передний план.

содержит раскрывающийся список категорий, с помощью которого вы получаете доступ к библиотеке ActionScript. Выбрав соответствующее действие, вы можете с помощью мыши перетащить его на область отображения сценария.

Область отображения сценария служит для отображения всех строк-операторов текущего сценария.

позволяет переключаться между сценариями, связанными с различными элементами фильма. При выборе на области действия элемента, которым можно управлять с помощью сценария, панель Actions автоматически переходит к отображению сценария, связанного с этим элементом.

Работа с действиями объектов

Во Flash-фильмах действия могут быть связаны с объектами двух типов: кнопками и клипами. Связанное действие выполняется тогда, когда объект принимает сообщение о выполнении события. Для кнопок эти сообщения в основном поступают в виде сигналов от мыши или клавиатуры. Сообщения о событии клипа появляются в результате любых изменений или взаимодействий, которые произошли с самим клипом. Когда вы связываете действие с объектом и создаете сценарий, вы определяете источник события для каждого объекта. Действия связываются с кнопками и клипами, поскольку эти элементы являются интерактивными компонентами Flash-фильма. Как объекты, они могут принимать события мыши, данные и другого типа информацию во время воспроизведения фильма. Структура, создаваемая с помощью объектов и связанных с ними действий, будет определять способ взаимодействия аудитории с фильмом.

Важно помнить, что кнопки и клипы хранятся в библиотеке Flash в виде символов. Каждый раз при использовании символов в фильме фактически используется отдельная копия символа, или его экземпляр.

Экземпляр можно рассматривать как копию символа. Любое изменение, которое произведено с экземпляром, никак не повлияет на родительский символ или на другие экземпляры этого символа. Тот же принцип сохраняется и при связывании действий с экземпляром символа. Любое действие, ассоциированное с экземпляром символа, будет выполняться только тогда, когда в фильме используется данный экземпляр. Это означает, что действия связываются только с определенным экземпляром символа.

Однако любое действие выполняется только тогда, когда в фильме происходит определенного рода событие. В языке ActionScript (и во многих других объектно-ориентированных языках) действия управляются обработчиками событий.

Использование действий

Чтобы использовать действия в фильме Flash, необходимо связать их с объектом или кадром. Данный процесс достаточно простой и включает выбор объекта или кадра, выбор необходимого действия и определение специальных параметров, которые могут требоваться для действия. Все действия влияют только на связанный с ними экземпляр символа объекта или единственный кадр, содержащий действия.

Действия используются для управления схемой воспроизведения, интерактивными свойствами, потоком и направлением воспроизведения фильма. Одним словом, с помощью действия можно точно определить порядок воспроизведения, а также реакцию фильма на пользовательский ввод. Благодаря действиям Flash меньше напоминает анимационную программу и в большей степени — среду разработок интерактивных мультимедийных приложений.

Некоторые возможности, которыми обладает Flash благодаря использованию действий:

• Создание сложных, интерактивных схем навигации.
• Изменение качества воспроизведения фильма.
• Связь с документами HTML, размещенными в Интернете, и обмен данными с приложениями сервера.
• Обмен данными с хост-приложениями или другими Flash-фильмами.
• Воспроизведение других фильмов в пределах главного фильма.

Возможности управления сценами с помощью сценариев ActionScript

Использование сцен значительно облегчает общую организацию содержимого фильма, заданная последовательность воспроизведения сцен приводит к созданию линейных фильмов. Но наряду с рядом преимуществ (например, две сцепы не могут воспроизводиться одновременно) в этом есть и свои недостатки, связанные с невозможностью изменить порядок воспроизведения сцен. Эту проблему можно решить, используя сценарии ActionScript (в частности действия кадров), которые позволяют управлять сценами и изменять их порядок.

Некоторых действий, с помощью которых можно управлять сценами.

• gotoAndPlay() . Вызов действия gotoAndPlay() приводит к переходу головки воспроизведения к определенной сцене и кадру. Воспроизведение фильма продолжается с этого кадра.
• gotoAndStop(). При вызове данного действия происходит переход к определенной сцене и кадру и остановка воспроизведения фильма.
• play() . Это действие позволяет продолжить воспроизведение фильма после остановки.
• stop() . С помощью данного действия можно остановить воспроизведение фильма.

События мыши

При связывании действия с экземпляром кнопки Flash автоматически присваивает этому действию обработчик события мыши. Этот обработчик определяет, какое событие при воспроизведении фильма будет инициировать выполнение действия (или действий), содержащихся в сценарии. Обработчик события мыши определяется действием on () .

Для установки или изменения обработчика события мыши, выполните следующие действия.

1. Выберите кнопку, с которой необходимо связать действие либо для которой необходимо изменить обработчик событий.
2. Откройте панель Actions и выполните одно из следующих действий.
   1. Если вы хотите установить обработчик события мыши, выберите действие on () из категории Actions – Movie Control .
   2. Если вы хотите изменить обработчик события мыши для уже существующего действия, выберите строку-оператор, содержащую название события, и на области отображения параметров установите соответствующий флажок.
3. В области параметров отображается список различных обработчиков события мыши. Установите флажок рядом с названием соответствующего обработчика, и ваш сценарий автоматически будет обновлен. На рисунке показан внешний вид панели Actions, когда в области отображения сценария выбрана строка-оператор, содержащая обработчик события.

Имена и описания событий мыши в языке ActionScript :

• Press . Событие press инициирует действие при нажатии кнопки, когда указатель мыши находится над объектом кнопки.
• Release . Событие release инициирует действие при отпускании кнопки, когда указатель мыши находится над объектом кнопки. Это событие принимается по умолчанию.
• Release Outside . Событие release Outside инициирует действие при отпускании кнопки, когда указатель мыши не находится над объектом кнопки.
• Key Press . Событие key Press не связано с мышью. Оно инициирует действие, когда на клавиатуре будет нажата клавиша, указанная в поле слева от данного флажка.
• Roll Over . Событие roll Over инициирует действие, когда указатель мыши помещается на объект кнопки.
• Roll Out . Событие roll Out инициирует действие, когда указатель мыши помещается за пределы объекта кнопки.
• Drag Over . Событие drag Over может показаться сначала несколько сложным. Фактически оно включает комбинацию из серии различных событий. Чтобы инициировать действие с помощью события drag Over , необходимо установить указатель мыши над объектом кнопки и выполнить щелчок, переместить указатель за пределы объекта, а затем снова поместить указатель на объект.
• Drag Out . Чтобы инициировать действие с помощью события drag Out , выполните щелчок, когда указатель мыши находится над объектом кнопки, а затем переместите указатель за пределы объекта.

Практическая работа № 21. Работа с действиями кадра

1. Создайте новый файл – Документ Flash .
2. На Сцене 1 создайте анимацию.
3. Добавьте Сцену 2 и создайте анимацию для данной сцены.
4. Перейдите на Сцену 1, добавьте слой и пропишите действие переход на сцену 2 .

1. На Сцене 2 или последней сцене вашего проекта поставьте кнопку, по клику которой откроется Сцена 1.

1. Сохраните файл под именем Фамилия_21.fla.
2. Опубликуйте в формате.swf
3. И пришлите в одном архиве.

Практическая работа № 22. Нескольких действий в одном сценарии

1. Создайте новый файл – Документ Flash .
2. На Слои 1 в первом кадре пропишем команду stop() , для того чтобы анимация не начиналось, т.е. не происходило никаких действий.

1. Создайте Слой 2. Начиная со 2 кадра и до 31, создайте анимацию, которая будет воспроизводиться при нажатии кнопки мыши.

1. В 31 кадре пропишите остановку анимации, чтобы никаких действий не происходило.
2. Добавьте Слой 3. Начиная со 32 кадра и до 62, создайте анимацию когда кнопка будет отпущена.

1. Добавьте Слой 4. И разместите на нем кнопку. И пропишите действия:

on (press) {

GotoAndPlay (2); // при нажатии кнопку будет происходить действия начиная со 2 кадра

on (release) {

gotoAndPlay(32); // будет происходить действия начиная со 32 кадра, когда кнопка будет отпущена

1. Протестируйте программу.
2. Сохраните файл под именем Фамилия_22.fla.
3. Опубликуйте в формате.swf
4. И пришлите в одном архиве.

Использование действий для создания основных элементов управления воспроизведением фильма

Мы уже рассмотрели процесс связывания действий с различными элементами фильма. В данном разделе мы дадим обзор самых важных и полезных действий языка ActionScript. Эти базовые действия перечислены в том порядке, в котором они расположены в своих подкатегориях (Adobe Flash CS 3 Professional ).

Подкатегория Movie Clip Control

• setProperty () . Установка атрибутов клипа: размеры, положение и т. д.
• onClipEvent() . Определяет обработчик события клипа, который будет инициировать действие.
• on () . Определяет обработчик события мыши, который будет инициировать какое-то действие.

Подкатегория Timeline Control

• gotoAndPlay() . Переход к указанному в качестве параметра кадру или сцене и воспроизведение фильма с этого места.
• gotoAndStop() . Переход к указанному в качестве параметра кадру или сцене и остановка фильма.
• play () . Воспроизведение фильма.
• stop () . Остановка фильма.
• stopAllSounds() . Отключение звукового сопровождения фильма.

Подкатегория Browser/Network

• fscommand() . Управление приложением Flash Player.
• getURL() . Вызов фильма с указанным URL.
• unloadMovie () . Выгрузка других Flash-фильмов.

Связь с URL

С помощью действия getURL() можно установить связь с URL непосредственно из Flash-фильма. Связь с URL позволяет выполнять две вещи. Во-первых, вы можете использовать Flash для создания Web-ссылки и загрузки информации в окно браузера из источника, соответствующего указанному URL. Во-вторых, действие можно использовать для передачи данных ресурсу, который находится по определенному URL.

Чтобы связать действие getURL() , необходимо выполнить следующее.

1. Выберите кнопку, кадр или экземпляр клипа, с которым вы хотите связать действие.
2. Откройте панель Actions .
3. В области элементов ActionScript откройте подкатегорию Browser/Network и выполните двойной щелчок на значке действия getURL (). Действие getURL() имеет три параметра, которые должны быть определены: URL, Window (Окно) и Variables (Переменные). Существует также возможность использовать выражение, в котором описывается местоположение URL. Для этого необходимо установить флажок Expression (Выражение) справа от поля URL.
4. В поле URL необходимо ввести абсолютный или относительный путь к ресурсу. Абсолютный путь включает полный адрес URL, например http://www. it - n . ru . Относительный путь содержит информацию о нахождении файла в пределах файловой структуры, где сохранен Flash-фильм, например такую: currentfolder / folderl / folder ().
5. Раскрывающийся список Window позволяет определить, в каком окне браузер будет загружать документ, на который указывает URL. Вы можете ввести определенное имя фрейма или окна, ввести выражение, которое описывает местоположение окна, либо выбрать один из следующих элементов раскрывающегося списка.

• _self . Документ загружается в текущем окне, где в настоящий момент воспроизводится фильм.
• _blank . Документ загружается в новом окне.
• _parent . Данный элемент указывает на текущее окно и позволяет заменить только фрейм, где в настоящий момент воспроизводится фильм.
• _top . Данный элемент целесообразно использовать тогда, когда ваш фильм воспроизводится во фрейме, а новый документ, на который указывает URL, должен заполнить все окно браузера.

1. Раскрывающийся список Variables (Переменные) используется для передачи переменных на URL, с которым вы устанавливаете связь.

• Don"t Send (не передавать). Данный элемент установлен по умолчанию и используется в тех случаях, когда нет необходимости в обмене данными.
• Send Using GET (передавать с использованием метода GET). Данный элемент списка выбирают в тех случаях, когда необходимо передать несколько переменных и объем передаваемых данных небольшой.
• Send Using Post (передавать с использованием метода POST). Данный элемент списка выбирают в тех случаях, когда необходимо передавать большой объем информации.

Практическая работа № 23. Ставим ссылки на картинки

1. Создайте новый файл – Документ Flash .
2. Импортируйте все необходимые изображения для будущих кнопок (Ctrl + R ).
3. Выделите первую картинку и нажмите F8 . Конвертируйте ее в кнопку.

1. Дважды кликните на мувиклипе.
2. Теперь кликните на кадре с заголовком Over и добавьте кадр, нажав F6.

1. Создайте новый слой и кликните на кадре с заголовком Over и добавьте кадр (F6). После при помощи Rectangle Tool (R) обведите картинку.

1. Вернитесь обратно на главную сцену и при помощи инструмента выделения (V) кликните на кнопке, нажмите F9 и введите следующий AS-код:

1. Повторите все предыдущие шаги для других картинок.
2. Протестируйте программу.
3. Сохраните файл под именем Фамилия_23.fla.
4. Опубликуйте в формате.swf
5. И пришлите в одном архиве.

Задание

Создайте презентацию на свободную тема, используя материал урока.

Литература

1. Гурвиц, Майкл, Мак-Кейб, Лора. Использование Macromedia Flash MX. Специальное издание.: Пер. с англ. — М.: Издательский дом "Вильяме", 2003. — 704 с.: ил. — Парал. тит. англ.
2. Уотролл Э., Гербер Н. Эффективная работа: Flash MX . СПб.: Питер; Киев: DHV , 2003. – 720 с.: ил.
3. http://www.interface.ru/

PAGE 1

Область элементов ActionScript

Раскрывающийся список сценариев

Область отображения сценария

Поделись статьей: