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

Когда-то, наверное, уже пару лет назад, на нашем сайте появилась программа 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. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

Если Вы работаете с Flash и используете его пока что только для рисования и простой анимации, создание роликов или баннеров, но ни разу не занимались программированием в нём, то вероятно Вам очень хотелось узнать эту сторону flash-а .

Что такое ActionScript ? Как можно писать код на flash-е ? Как можно полноценно программировать во flash ? Какие инструменты для этого лучше всего использовать? В данной статье приводятся ответы на подобные вопросы.

Эта статья послужит хорошим руководством новичка в программировании под flash на ActionScript 3.0 и поможет выбрать лучшие инструменты для этого.

Что такое ActionScript?

Action Script — это объектно-ориентированный язык программирования, который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений.

С помощью Action Script можно создавать интерактивные мультимедиа-приложения, игры и веб-сайты.

Если Вы работаете с графической средой разработки Flash IDE (например Adobe Flash Professional CS5), но ни разу не интересовались где там можно писать программный код, то вероятно Вас уже волнует вопрос «Где же он прячется, этот AS3?».

AS3 во Flash IDE.

Создадим новый проект File — New — ActionScript 3.0 (рис. 1).

Рис 1. Создание нового проекта AS3.

Появится пустая сцена с пустым кадром на одном слое. Теперь можно выделить кадр и нажать F9 , тем самым открыть окно «Actions», в котором и находится область редактирования программного кода данного кадра.

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

ActionScript

var s: String = "its my AS3 code trace!"; trace(s);

var s : String = "its my AS3 code trace!" ; trace (s ) ;

Рис. 2. Код, написанный в редакторе Flash IDE.

Теперь можно запускать флешку (Ctrl+Enter ). Данный код создаёт переменную s типа String (строка) и присваивает ей начальное значение — строку «its my AS3 code trace! «. Далее, функцией trace() , аргументом которой выступает ново созданная переменная, данная строка (а точнее уже значение переменной s ) выводится во вкладку output , которая по умолчанию в интерфейсе IDE располагается рядом с вкладкой timeline .

Таким образом можно открывать и закрывать(на F9) редакторы кода для любого кадра флеш-приложения.

Вроде картина выходит не плохая — можно создавать разные объекты с анимациями (MovieClip ), либо статичные картинки (Sprite ) и у каждого объекта будут кадры и в каждом кадре можно запрограммировать всё что угодно. Выглядит удобно и гибко. Но это лишь на первый взгляд. Представьте что у Вас десятки объектов с десятками кадров и всем им нужно описать кодом различную или схожую логику поведения. Во втором случае (схожая логика) — это вообще означает сотни схожих строк кода, которые можно будет замучиться даже копировать из кадра в кадр. А представьте что в процессе разработки вам понадобится что-то изменить. Нет — это не дело! Не для этого хаоса был задуман язык AS3!

В добавок, если Вы поработаете редактором кода Flash IDE и, к примеру, работали в какой-нибудь другой среде программирования (Delphi, Visual Studio), то сразу заметите, что данный редактор, мягко говоря, удручает своей не удобностью и недоделанностью.

Что же делать, спросите Вы? Искать сторонние редакторы кода.

Альтернативные редакторы кода.

Самый лучший вариант для ОС Windows — это FlashDevelop (FD). Скачать свежую версию можно с сайта .

Для iOS хорошей альтернативой является FDT . Ознакомиться можно на оф. сайте .

FlashDevelop.

Т.к. я на данный момент преимущественно обитаю в Windows, то расскажу о редакторе именно под эту ОС. В будущем, когда наберусь опыта в FDT, то напишу и о нём.

В установке нет ничего сложного, качайте свежую версию с оф. сайта и устанавливайте. Редактор совершенно бесплатный и для компиляции использует Flex SDK. Во время стандартной установки FD сам позаботится об установке последнего. Всё что надо установить для FD самому — это Java .

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

После установки можно создать новый проект (Project — New Project…), откроется диалог создания проекта, как показано на рис. 4.

Как можно заметить, FD позволяет создавать не только AS3 проекты. Но сейчас нас интересует именно AS3 проект, я предпочитаю выбирать заготовку для проекта с Preloader -ом, который и выбран на рис. 4 . Далее введите имя проекта (поле Name ) и назначьте директорию проекта (поле Location ), если стоит галочка «Create directory for project» , то в директории Location будет создана папка с именем проекта (Name) и в неё уже поместятся файлы проекта, если галочка не стоит, то файлы поместятся в указанную директорию Location.

После создания проекта справа Вы увидите структуру файлов и папок проекта, откройте папку src и откройте двойным щелчком файл Main.as . После чего Вы должны наблюдать код примерно такой же, как на рис. 5.

Попробуем написать какой-нибудь код, например примерно тот же, который пробовали в Flash IDE . Писать можно после комментированной строки «// entry point» т.к. это точка где сцена уже точно создана. напишем команду trace() , на рис. 5. я уже позволил себе это деяние:]

Теперь можно скомпилировать проект (F8 ) или сразу запускать для тестирования (F5 ), после запуска в окне Output вы увидите результат работы функции trace() — вывод строки.

Результаты команды trace() можно наблюдать только во время запуска приложения из под IDE, в которой компилируется и запускается код.
При запуске файла.swf в браузере или в обычном flash-плеере результат (а т.е. отображение окна output) не будет виден никому.

Теперь я уверен, что Вам уже не терпится сделать свой первый проект на AS3! А для этого нужно приступить к изучению самого языка.

Изучение языка AS3.

Про AS3 можно конечно писать много, но лучше чем в книгах я вряд ли напишу, тем более что всё уже написано, поэтому моё дело посоветовать лучшую литературу отталкиваясь от своего опыта.

Лучшая книга: Колин Мук — .

Хорошее дополнение к знаниям: Джои Лотт — .

Читал в своё время ещё такую книгу: Рич Шуп — . Написано хоть и не сильно много и подробно, но для новичков сойдёт, если под рукой нет Мука.

Этих книг весьма достаточно для бодрого старта! Читайте и практикуйтесь, практикуйтесь и читайте. Нет необходимости сесть и читать эти книги от корки до корки, т.к. в процессе чтения важно закреплять знания практикой, да и Вам самим будет приятно сделать что-нибудь как можно скорее:]

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

Для дальнейшего развития, для хорошего осознания ООП и шаблонов проектирования (а это очень важно для хорошей ООП структуры) Вам будет незаменима следующая книга: Уильям Сандерс, Чандима Кумаранатунг — .

На этом сайте вы так же найдёте не мало аспектов программирования на AS3, накопленных моим опытом.

Или попробовать сделать свой первый прелоадер прочитав статью: Preloader своими руками.

Всего доброго и успешных проектов!

Flash-программирование

программа элективного курса и дидактическое пособие для учителя и ученика

Программа курса. 1

1. Введение: 1

2. Тематика курса: 2

3. Литература: 2

Дидактическое пособие для учителя и ученика. 2

1. Введение, окно «действия кадра». 2

2. Переменные. 4

3. Поля ввода-вывода. 5

4. Условный оператор. 8

5. Циклы «с параметром» и циклы «пока». 11

7. Объектно-ориентированное программирование. 17

8. Программное изменение свойств. 19

9. Трехкадровые циклы. Программная анимация. 22

10. Проект «Интерактивная игра - Тир». 24

Программа курса

1. Введение:

Программа Macromedia Flash поражает своими возможностями. Помимо развитых средств для рисования и анимации Flash имеет встроенный язык программирования Action Script. Овладение этим языком позволяет не только создавать программную анимацию, Flash-игры, и интерактивные web-страницы, но и дает знания о технологиях объектно-ориентированного программирования (далее ООП).

Не смотря на то, что создатели Flash постарались сделать программирование простым даже для неподготовленного пользователя, овладение этим инструментов требует достаточно большого времени. Данный курс – элективный, ученики выбирают его для более осознанного выбора профиля в старшей школе. Подробное изучение программы, выполнение серьезных проектов может стать задачей профильных курсов (например «Web-программирование», «Web-дизайн», «Объектно-ориентированное программирование» и др.), а также самостоятельного изучения. Курс «Flash-программирование» предназначен на учеников 9 классов , уже знакомых с Flash-анимацией и основами программирования. В рамках элективного курса вполне возможно освоение основ программирования, технология ООП, выполнение несложных проектов во Flash. Курс включает в себя 8 проектов, в том числе проект Flash-калькулятора и проект интерактивной игры. Курс снабжен дидактическим пособием для учителя и ученика.

Цель курса:

Заинтересовать учащихся, показать возможности современных программных средств для создания интерактивных приложений; познакомить с основами объектно-ориентированного программирования; углубление знаний о Macromedia Flash.

Задача курса:

Познакомить с технологией объектно-ориентированного программирования; показать применение Action Script, для создания интерактивных приложений; создать два проекта: Flash-калькулятор и интерактивную игру «тир».

Требования к знаниям учащихся:

для успешного прохождения данного курса ученики должны обладать начальными знаниями о Flash: создание простейших изображений, работа с символами библиотеки, иметь представления о ключевых кадрах, Flash-анимации, базовых действиях в Action Script.

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

Требования к компьютеру:

Компьютер с установленной программой Macromedia Flash MX (или выше).

Курс «Flash-программирование» рассчитан на 12 часов.

2. Тематика курса:

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

3. Литература:

Белунцов В. Macromedia Flash: Анимация в Интернете. «ДЕСС Ком», Москва 2001. Flash MX 2004 материалы сайта www. *****

Дидактическое пособие для учителя и ученика

1. Введение, палитра «Action»

Программа Macromedia Flash имеет собственный язык программирования Action Script. Он позволяет сделать Flash-ролики интерактивными. Возможности языка достаточно велики, что позволяет создавать серьезные программы. Action Script не является самостоятельным языком программирования. Он представляет из себя набор скриптов – фрагментов кода, которые «живут» только внутри Flash-ролика, что впрочем, не мешает создавать полноценные программы.

Нужно помнить, что Action Script – это событийный язык, то есть выполнение скрипта будет происходить при наступлении события. Таким событием может служить достижение определенного ключевого кадра, например, в последнем ключевом кадре мы добавляем команду stop(). Не смотря на то, что это всего лишь одна команда, это – полноценный скрипт, который будет выполнен при достижении последнего кадра – ролик остановится. Другим событием может служить щелчок мышки на экранной кнопке или нажатие клавишу клавиатуры.

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

Рис. 1 Панель Action.

Давайте рассмотрим основные элементы окна «Action». Левая часть окна занята списком команд, которые вы можете выбирать, дважды щелкая на них левой клавишей мыши. Все команды, а их достаточно много, сгруппированы в двенадцать блоков «Global Function», «Global Properties» и т. д. После щелчка команда переносится в правую часть окна. В нем формируется программный код. Вы можете удалять ненужные команды (клавиша Delete) или перемещать вверх-вниз по скрипту либо с помощью клавиш управления курсором либо с помощью кнопок. Разумеется, вначале перемещаемая или удаляемая команда должна быть выделена. Нижняя часть окна отдана под изменяемые параметры каждой конкретной команды. Например, в команде перехода gotoAndPlay() нужно указывать, к какому кадру нужно перейти при достижении данной строчки. Для этого в скобках нужно набрать необходимый номер кадра.

При написании программного кода удобнее и быстрее набирать код вручную. При этом необходимо помнить, что язык ActionScript внимание на регистр набираемых вами команд. Это означает, что команда GoToandPlay() – будет ошибочной.

Остается добавить, что для запуска кода и просмотра полученного результата нужно войти в режим просмотра ролика, для этого нажать комбинацию клавиш Ctrl-Enter.

Вопросы для повторения:

Что такое скрипт? При каких событиях выполняется программный код в Flash? Как вызвать палитру «Action»? Из каких элементов состоит палитра «Action»? Как из Flash-ролика создать запускаемый файл?

2. Переменные

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

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

Первое число будет храниться в переменной x1, а второе в переменной x2. Результат пусть сохраняется под именем summa и выводиться на экран. Для того чтоб сделать поле вывода (подробней об этом в следующем уроке) щелкните на инструмент текст и выделите с помощью него область экрана – будущее текстовое поле. После зайдите в плавающую панель Символ (меню окно – панели – символ) и во вкладке Параметры текста измените тип текстового поля Stutic Text на Dimamic Text (Рисунок 2). Обязательно задайте имя этого поля Переменная – summa. Также, чтобы поле было видно на экране, установите галочку рамка/фон.

Рис. 2 Создание динамического поля для вывода значений.

Теперь сопоставим сделанной кнопке код. Выделим кнопку и нажмем F9.

В левой части окна выбираем блок Операции – Установить переменную. В нижней части окна задаем параметры: переменная – x1, значение 5. Обратите внимание, рядом с полем значение находится переключаемый параметр выражение. Его нужно обязательно выбрать, в противном случае в переменной x1 будет храниться на число 5, а символ. Именно таким способом происходит задание типа переменной. Как вы поняли в AS всего два типа переменных числовой и строковый, заранее описывать типы, как это принято в языке Turbo Pascal. Аналогичные действия проделайте для второй переменной, соответственно ее имя – x2, а значение 8. Нам осталось дописать третью строку - устанавливаем третью переменную, ее имя: summa (такое же как и имя поля вывода), значение: x1 + x2, разумеется, выбран элемент выражение.

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

Вот и все! Если вы все сделали правильно, то перейдя в режим просмотра ролика, и нажав на вашу кнопку в поле вывода появляется число 13.

Вопросы для повторения:

Как задать имя переменной для вывода тектовой или числовой информации? Какие типы переменных используются в Flash? Как показать, что созданная переменная - числовая? Как создать кнопку в Flash и добавить для нее программный код? Что означает команда on (release) в начале скрипта?

3. Поля ввода-вывода

Изучение нового языка программирования начинается с написания программ, в которых производится ввод начальных значений, после с ними происходят какие-то арифметические преобразования и на экран выводится полученный результат. Для вывода текста на экран в Flash используются текстовые поля. Для создания текстового поля вам нужно выбрать инструмент Текст (на панели инструментов) и поставив курсов в место, где нужно добавить текст вы «рисуете» текстовый блок (Рисунок 4).

Рис. 4 Создание текстового поля.

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

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

Рисунок 5

Динамическое поле применяется для создание полей вывода, в них информация может обновляться по ходу выполнения вашего ролика. Для того, чтобы обращаться к текстовому блоку программно, у него должно быть имя, которое задается в поле «переменная» (Рисунок 5). Я советую вам использовать в качестве имен переменных только латинские символы, без пробела. В том же окне вы можете включить свойство Рамка/фон. Теперь на листе появится рамка, в которой будет появляться выводимый текст, это очень удобно. Поле со списком, по умолчанию в нем выбрано Single Line, позволяет задать будет ли текст выводиться в одну строку и ли в несколько (значение MultiLine). Переключатель «выбираемый», по умолчанию он включен, определяет сможет ли пользователь выделять значения из данного поля, например, для того чтобы скопировать их в буфер обмена. Также как и для любого поля, вы можете задавать параметры текста: шрифт, размер, цвет и т. д. Если вы наберете в данном поле какой-либо текст, он будет отображаться до тех пор, пока программа не изменит его значение.

Поле ввода или Input Text применяется для ввода значений с клавиатуры. Окно параметров поля ввода внешне напоминает окно, рассмотренное выше. Главным параметром здесь также является поле «переменная». Вы задаете под каким именем будут записываться данные, введенные пользователем.

Рисунок 6

Понимая назначение текстовых полей вы сможете сделать следующий проект. «В компьютер вводятся стоимость взрослого авиабилета, а также количество взрослых и детей, совершающих полет. Компьютер при нажатии на соответствующую кнопку вычисляет стоимость детского билета (50% от стоимости взрослого) и общую стоимость полета.» Смотри внешний вид программы (Рисунок 6). Как несложно заметить в данной задачи осуществляется ввод значений и вывод результатов, весь код должен выполняться при нажатии на кнопку, а стало быть, должен сопоставлен этой кнопке.

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

Создайте три поля ввода, дайте переменным для каждого поля уникальные имена, например: stv (стоимость взрослого билета), kolv (количество взрослых) и kold (количество детей).

Создайте два динамических поля, дайте переменным для каждого поля уникальные имена, например: std (стоимость детского билета) и itog (итоговая сумма полета).

Сделайте две кнопки «расчет стоимости полета» и «очистка полей»

Для первой кнопки добавьте следующий код (кнопка, правая клавиша – операции):

if (stv==null) {

if (kolv==null) {

if (kold==null) {

itog = stv * kolv + std * kold;

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

В принципе, можно было обойтись этими двумя строчками кода. Но так как человек, который будет работать с этой программой вовсе не обязательно будет вводить цифру ноль если дети в полете не участвуют. А это означает, что стоимость детского билета (числовое значение) будет умножаться на пустое значение (строковое значение). Результатом такого «умножения» будет сообщение об ошибке в соответствующем поле вывода. Для предотвращение этого компьютер проверяет является ли поле ввода пустым (kold==null) и если это так, присваивает переменной kold значение равное нулю. Такая конструкция называется условным оператором. Подробней о ней в следующей теме. Если для вас пока сложно работать с условиями, вы можете их опустить, но не забывайте, пустых полей не должно быть!

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

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

Вопросы для повторения:

Какие типы тектовых полей используются в Flash? Какие изменяемые параметры имеет динамическое текстовое поле? Какой тип поля используется для ввода значений с клавиатуры? Объясните смысл следующей строчки кода: itog = stv * kolv + std * kold;? Для чего в описываемом проекте используется условный оператор?

4. Условный оператор

Программный код, который мы рассматривали до этого – линейный. Каждая команда выполняется лишь после того, как будет выполнено предыдущее действие. В жизни все несколько сложнее. Мы открываем зонт если идет дождь, радуемся если достигли цели, вычисляем корни квадратного уравнения если дискриминант больше нуля. Во всех перечисленных случаях, мы поступаем так или иначе. Для реализации таких ситуаций во всех языках программирования предусмотрен оператор ветвления или условный оператор. Action Script – не исключение.

Рисунок 7

Вызов условного оператора осуществляется щелчком на команде Операции - Если (Рисунок 7). В правой части окна появляется конструкция:

if (<Не установлено>) {

Вместо <не установлено> вы должны написать операцию сравнения, вы набираете ее в поле «Условие». Примером, такого условия может быть z<10, (переменная z меньше десяти).

Рассмотрим основные операции сравнения:

> меньше;

< больше;

>= больше либо равно;

<= меньше либо равно;

Равно (обратите внимание, два знака равенства);

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

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

&& или and –логическое И;

|| или or – логическое ИЛИ;

Или not – логическое НЕ.

Например, условие (a == 10) && (z > 5) будет истинным только тогда, когда переменная а равна десяти и одновременно переменная z больше пяти.

Условие – это вопрос на который может быть только два ответа «да» и «нет». Если условие истинно, то выполняются действия, заключенные в фигурные скобки.

Если нам нужно добавить группу команд, которые должны выполняться, когда условие ложно, вам нужно добавить Операции – Else. Тогда фрагмент кода примет вид:

if (<Не установлено>){

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

Рисунок 8

Рассмотрим как реализуются изложенные принципы для решения классической задачи – нахождения корней квадратного уравнения. «В компьютер вводятся три числа – параметры квадратного уравнения ax2 + bx + c = 0. На основе введенных данных, компьютер определяет сколько корней имеет данное уравнение, вычисляет их и выводит результаты на экран. Представлен примерный вид окна программы (Рисунок 8).

Для выполнения данного проекта:

Создайте в первом кадре на основной сцене три поля ввода и дайте им соответствующие имена: a, b, c. Сделайте видимыми их границы.

Создайте несколько статических текстовых полей для подписей полей ввода-вывода: x2, =0, дискриминант и т. д.

Создайте четыре динамических текстовых полы: d – дискриминант, r – решение, x1 – значение первого корня, x2 – значение второго корня.

Создайте две кнопки «решить уравнение» и «очистить».

Для первой кнопки «решить уравнение» добавьте следующий программный код, текст, помеченный знаком апострофа – комментарий, его вставлять необязательно:

if (a == null) {

if (b == null) {

if (c == null) {

‘ три первых условных оператора проверяют являются ли поля a, b, c пустыми,

‘ если это так, они присваивают им численные значения равные нулю

‘ вычисляется дискриминант (переменная d).

r = "нет корней";

‘ если условие выполняется – дискриминант меньше нуля переменная d

‘ принимает соответствующее текстовое значение

} else if (d == 0) {

r = "один корень";

x1 = (-b)/(2*a);

x2 = (-b)/(2*a);

‘ используется команда Операции – Else If. Благодаря ему выполнение следующих

‘ действий начинается с проверки условия. Если оно истинно – дискриминант

‘ равен нулю, производятся аналогичные вычисления, переменные, связанные

‘ с текстовыми полями принимают соответствующие значения

r = "два корн" + Chr(255);

‘ самая загадочная строка. Необходимо, чтобы выводилась надпись «два корня»,

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

‘ соответствует этой букве, как знак переноса на другую строку.

‘ Для этой цели значение символа 255 добавляется к текстовой строке. Такое

‘ действие – соединение двух текстовых строк называется конкатенацией.

kd = Math. sqrt(d);

x1 = (-b+kd)/(2*a);

x2 = (-b-kd)/(2*a);

‘ для вычисления квадратного корня использована команда Math. sqrt(d);

‘ для ее вызова используется команда Объектов – Математика – Sqrt

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

Мне кажется, что комментарии тут излишни. Проект готов. Сохраняйте его, тестируйте.

Вопросы для повторения:

Какая конструкция задает в Flash условный оператор? В чем разница конструкций: if (<Не установлено>){} else {} и if (<Не установлено>)}? Как задается отрицание в Flash? Что такое булевы операции, как они записываются в Flash? В чем разница строчек: a=10 и a==10?

5. Циклы «с параметром» и циклы «пока»

Для выполнения повторяющихся действий в языках программирования используются специальные конструкции, которые называются операторами цикла. Таких циклических конструкций несколько, мы рассмотрим две наиболее часто встречающиеся цикл «с параметром» и цикл «пока». Рассмотрим, как они реализованы в языке Action Script.

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

Повторить (6 раз) {

«взять картофель»;

«очистить кожуру»;

«вымыть»;

Здесь цифра шесть – это параметр цикла, количество повторений. То, что взято в фигурные скобки – это повторяемые команды. Они будут выполнены ровно шесть раз.

Рисунок 9

Для создания цикла «с параметром» в Flash, вам необходимо в окне Действия кадра выбрать команду Операции – Для. В результате в правой части экрана появится конструкция цикла (Рисунок 9).

Рисунок 10

Для данной конструкции нужно настроить три поля. Начальное – здесь нужно написать начальное значение некоторой переменной, ее еще называют счетчик. Например, i=1. Условие – до каких пор переменная i будет изменяться. Например, i<=10. Следующий – с каким шагом изменяется переменная i. Если вы хотите, чтобы переменная каждый раз увеличивалась на единицу, то можно записать i++. В результате появляется конструкция:

for (i=1; i<=10; i++) {

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

Давайте рассмотрим, как реализуется данная конструкция в следующей задаче. «Создать программу, вычисляющую a в степени n (n – целочисленное значение). Значение a и n вводятся в соответствующие поля. Внешний вид программы представлен на Рисунок 10.

Создайте одно динамическое поле и назовите его an.

if (n<>0) {

‘ Задача имеет смысл, только если n > 0, это проверяет условный оператор

for (i=2; i<=n; i++) {

‘ Так как в первой строке переменная an уже приняла значение равное а, поэтому начальное значение счетчика равно двум.

Для кнопки «очистить» добавьте следующий код:

Комментарии мне кажутся излишними.

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

Пока (есть картошка?) делать {

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

Рисунок 11

Для создания цикла «пока» в Flash, вам необходимо в окне действия кадра выбрать команду Операции – While. В результате в правой части экрана появится конструкция цикла (Рисунок 11).

Для данной конструкции нужно настроить только одно поле. Условие – при каком условие цикл выполняется. Например, y<10.

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

Рисунок 12

Любой алгоритм, который можно записать с помощью цикла «с параметром» можно записать и с помощью цикла «пока». А вот обратное не верно. Существуют задачи которые другими способами как использовать конструкцию «While» не решить. Рассмотрим такую задачу. «Известно, что ряд чисел 1, 1/2, 1/3 … 1/n является расходящимся, это значит сумма таких чисел сможет превысить любое наперед заданное число A. Найдите такое n, при котором сумма ряда 1 + 1/2 + 1/3 + … + 1/n станет больше заданного числа А. Внешний вид программы представлен на Рисунок 12.»

Создайте одно поле ввода данных и назовите его a.

Создайте два динамических поля и назовите их соответственно n и s.

Создайте необходимое кол-во статичных подписей «а=», «n=» и т. д.

Создайте две кнопки «вычислить» и «очистить».

Для кнопки «вычислить» добавьте следующий код:

‘ Так как в цикле необходимо проверять условие s

while (s

Для кнопки «очистить» код аналогичен коду из предыдущей задачи.

Не смотря на то, что теоретически для любого A найдется значение n но в действительности даже для A=10, n=12367. Для больших значений A вычисление данной задачи может затянуться на минуты и часы…

Вопросы для повторения:

В чем отличие цикла "с параметром" и "пока"?

Какой цикл является более универсальным?

Что такое "счетчик" в цикле "с параметром" и что означает команда i++?

Как написать программу, выполняющую возведене в степень с помощью цикла "пока"?

Почему при выполнении цикла "пока" возможно зависание программы? Как этого избежать?

6. Проект «Flash-калькулятор»

Для того, чтобы посмотреть язык Action Script в действии давайте сделаем что-то действительно стоящее. Давайте сделаем калькулятор, внешний вид представлен на Рисунок 13.

Рисунок 13

Цель проекта: Создать стандартный калькулятор для Internet с возможностью производить стандартные арифметические действия. Для ввода значений использовать как мышь, так и стандартные клавиши клавиатуры.

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

Нас ожидают три проблемы:

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

Когда мы будем вводить первое число, например 245, мы последовательно нажимаем кнопки 2, 4 и 5. Но как калькулятор узнает, что когда мы нажали на кнопку 2 – это двести, а не двадцать или две тысячи? Иными словами, как узнать какое число запоминать в первой переменной?

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

220" height="52" bgcolor="white" style="vertical-align:top;background: white"> https://pandia.ru/text/78/159/images/image013_35.gif" width="12" height="36">

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

Все это означает, что нам не обойтись одним ключевым кадром. Желательно на новом слое создайте ключевой кадр и в нем задайте значение переменной stek равное единице. Во втором ключевом кадре добавьте всего одну команду Базовые действия – Остановить. Содержимое слоя калькулятор, в котором находятся все кнопки передвиньте во второй кадр (Рисунок 14). Теперь при запуске программы переменная stek принимает нужное значение, ролик переходит во второй кадр и останавливается. Все дальнейшие действия будут проходить именно там.

Рисунок 14

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

Ну а условный оператор и переменная stek помогут довести дело до конца. Ниже

представлен код, присвоенный клавише 1. Для всех остальных кнопок код аналогичен.

on (release, keyPress "1") {

‘ помимо обычного on (release) добавлена возможность использовать клавиатуру. keyPress "1" означает, что следующий код будет исполняться не только при нажатие на экранную кнопку, но и при нажатие на клавишу на клавиатуре. Как этого добиться смотри Рисунок 15.

‘ Если переменная stek равна единице, то переменная text, связанная с динамическим полем вывода примет значение равное единице, а переменная stek станет равна двум.

} else if (stek==2) {

‘ Если переменная stek равна двум, то единица не первая цифра в числе, поэтому она присоединяется к переменной text справа

} else if (stek==3) {

‘ Если переменная stek равна трем, то единица первая цифра во втором числе

Рисунок 15

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

on (release, keyPress "+") {

и программному коду, соответствующему клавише равно.

on (release, keyPress "=") {

text = parseFloat(a)+parseFloat(text);

} else if (o=="m") {

text = parseFloat(a)-parseFloat(text);

} else if (o=="u") {

text = parseFloat(a)*parseFloat(text);

} else if (o=="d") {

text = parseFloat(a)/parseFloat(text);

В первом фрагменте должно быть все ясно. Если нажата клавиша «плюс» еще одна переменная o принимает значение p (plus), а значение переменной text запоминается во временной переменной a. И когда, наконец, нажимается клавиша равно, компьютер должен сложить значение хранящееся в переменной text и переменную a. Так как в переменных хранятся текстовые значения необходимо использовать функцию parseFloat(), которая преобразует текстовое выражение в число. Для ее вызова используется команда Функции – parseFloat.

Запускайте проект, тестируйте его. Нельзя сказать, полученный калькулятор идеален. В нем нет стандартных математических функций, для выполнения нескольких действий подряд всегда нужно нажимать равно. Но все усовершенствования вы можете сделать самостоятельно. Мы научились главному. Создавать несложные программные продукты с помощью Macromedia Flash.

Вопросы для повторения:

С какими проблемами мы столкнулись создавая калькулятор? В чем назначение переменной stek? Почему нажимая на цифровую клавишу в переменной должно храниться текстовое выражение? Для чего служит функция parseFloat()? Предложите идею как выполняя несколько арифметических действий "подряд" не нажимать в промежутках клавишу "равно"?

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

Если вы знакомы с программированием на языках, таких как Pascal или Basic, то вы наверно заметили, что программирование на Flash на них совсем не похож. Все дело в том, что Action Script ближе не к процедурным языкам программирования, а к объектно-ориентированным, таким как Visual Basic или Delphi.

Не собираясь подробно останавливаться на сравнении этих языков, тем боле, что Action Script – это не самостоятельный язык, основные понятия нам необходимо знать. Прошу сразу простить меня за несколько вольное изложение такого фундаментального понятия как объектно-ориентированное программирование (ООП), в основе которого лежат такие непростые понятия как инкапсуляция и полиморфизм.

В основе ООП лежит объектная модель приложения, где все объекты являются элементами определенного класса (Рисунок 16). Так в основе приложения Flash лежит ролик, он состоит из одной или нескольких сцен. На сцене находятся графические объекты и объекты библиотеки. Также сцена имеет временную шкалу, на которой находятся кадры. Ключевые кадры, символы типа клип и типа кнопка могут иметь собственный код на языке Action Script.

В настоящих объектно-ориентированных языках к каждому элементу объектной модели можно обращаться программно. В Macromedia Flash вы можете обращаться программно с помощью Action Script только к некоторым из таких элементов.

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

https://pandia.ru/text/78/159/images/image020_25.gif" width="612" height="420 src=">

Рисунок 16

Объектную модель вашего конкретного ролика вы всегда сможете посмотреть с помощью плавающей панели «Проводник по видеофрагментам».

рисунок 17 (представлен фрагмент объектной модели для предыдущего проекта
Flash-калькулятор)

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

Каждый вызов программного кода сопровождает некоторое событие, таким событием может быть нажатие экранной кнопки или нажатие клавиши клавиатуры.

Вопросы для повторения:

Назовите объектно-ориентированные языки программирования. Из каких элементов состоит объектная модель Flash? Какие элементы вы можете изменять программно? Поясните смысл терминов объект, свойство, метод, событие. На какие события реагирует Flash-ролик?

8. Программное изменение свойств.

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

Рисунок 17

Нарисуйте объект, например прямоугольник.

Поместите его в библиотеку, причем обязательно он должен быть клипом видеофрагмента;

На плавающей панели «Копия» обязательно нужно задать имя данного объекта, например, zzz (Рисунок 17).

В панели «Действия кадра» выбирайте команду Операции – Set Property (установить свойства). Данная команда имеет три настраиваемых поля. Свойство – то свойство объекта, которое мы хотим изменить, например, _x (x Позиция), положение объекта по оси Х. Цель – имя копии объекта, в данном случае – zzz. Значение – чему равно выбранное свойство, в этом поле может находиться конкретное число либо выражение, но в любом случае не забудьте поставить флаг у выключателя «Выражение» (Рисунок 18).

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

Рисунок 18

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

Alpha – прозрачность объекта, изменяется от нуля – полная прозрачность, до 100 полная видимость;

Visible – очень похожее свойство, означает видимость. Свойство имеет только два значения – ноль (объект невидим) и единица (полная видимость объекта);

Рисунок 19

Height – высота объекта, измеряется в пикселях;

Width – ширина объекта, измеряется в пикселях;

Rotation – поворот объекта, относительно его центра, измеряется в градусах;

X – координата по x;

Рисунок 20

Y – координата по y, координата верхнего левого угла принимает значение равное (0,0);

Xscale – изменение масштаба по оси x;

Yscale – изменение масштаба по оси y;.

Как вы заметили, все свойства начинаются со знака подчеркивания.

Так как нам нужно не только программно изменять свойства объекта, но и отслеживать их текущее значение нам потребуется функция GetProperty (получить свойства). Команда вызывается в окне «Действия кадра» Функции – GetProperty() (Рисунок 19). Функция имеет два параметра. Target – цель, вместо слова target записывается имя копии символа объекта. Property – изменяемое свойство, вместо слова property, например, можно написать _x, получение текущей координаты по x. Данная функция используется, как правило совместно с командой установить переменную или внутри другой команды (Рисунок 20).

x = getProperty (zzz, _x);

Данная команда означает, что в переменной x будет сохранена текущая координата объекта, по имени zzz.

Рассмотрим, как можно использовать изменение свойств в проекте. Создайте объект, свойства которого можно изменять. Пример экрана представлен на Рисунок 21.

Рисунок 21

Создайте объект и превратите его в символ типа клип видеофрагмента.

Дайте имя копии этого символа на плавающей панели «Копия», например, «Ob».

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

Добавьте к кнопке, которая перемещает объект вверх следующий код:

on (release, keyPress "") {

setProperty ("Ob", _y,

getProperty (Ob, _y) - 5);

данная команда изменяет свойство объекта «Ob», его координату y. Для того чтобы объект переместился вверх вычисляется его текущая координата и от нее отнимается 5.

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

setProperty ("Ob", _xscale, getProperty (Ob, _xscale) + 5);

setProperty ("Ob", _yscale, getProperty (Ob, _yscale) + 5);

Данный код увеличивает масштаб объекта. Для пропорционального увеличения необходимо увеличить размер как по оси x, так и по оси y. Поэтому в данном скрипте две команды.

Вопросы для повторения:

К каким символам библиотеки можно обращаться программно? Как это организовать? Какие свойства объектов вы изучили? Какой у них смысл? В чем разница команд setProperty и getProperty? Объясните смысл строки: setProperty ("Ob", _xscale, getProperty (Ob, _xscale) + 5); Предположите, как можно изменять свойства других объектов, например, кнопок?

9. Трехкадровые циклы. Программная анимация.

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

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

Их идея в следующем:

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

Во втором ключевом кадре происходит изменение свойства объекта на какую-то заданную величину.

В третьем ключевом кадре находится всего одна команда перейти на второй кадр.

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

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

Рисунок 22

Создайте на первом слое рисунок машины, или импортируйте уже готовый рисунок. Слой переименуйте в «машина», а ключевой кадр продлите до третьего кадра, нажав в третьем кадре клавишу F5.

Конвертируйте рисунок в символ, типа клип видеофрагмента. Дайте имя копии этого символа на плавающей панели «Копия», например, «car».

Создайте новый слой, переименуйте его в «кнопки» и создайте на нем две кнопки «быстрее» и «медленнее».

На новом слое «Действия» создайте три пустых ключевого кадра, три раза нажмите клавишу F7.

В первом ключевом кадре добавьте следующий код:

setProperty ("car", _x, 50);

Обратите внимание, данный код не взят в фигурные скобки и в начале не присутствует on (release), то есть данный код относится именно к кадру, а не кнопке. В данном фрагменте в первой строке у объекта под именем car устанавливается свойство _x (координата по оси x) значение 50. Далее вводится три переменных, вот их смысл: dx – величина единичного перемещение объекта, а также направление движение (смотри дальше), MinX и MaxX соответственно минимально и максимально возможная координата объекта. Вообще можно обойтись без этих переменных, но используя их значительно проще отлаживать ваш проект. Я думаю, более глубокое понимание возникнет при анализе дальнейшего кода.

Во втором ключевом кадре добавьте следующий код:

x = getProperty (car, _x);

‘ В переменной x сохраняется текущее положение объекта.

if (x<=MaxX) {

setProperty ("car", _xscale, -100);

‘ Конструкция из двух вложенных условных операторов. Первый проверяет dx>0. Если это так, то автомобиль движется вправо. Второе условие x<=MaxX проверяет не достиг ли автомобиль максимально возможной координаты. Если это так то изменяется координата x объекта «car». Если второе условие не выполняется, то максимальная координата достигнута, как результат масштаб по координате х изменяется на -100% (автомобиль переворачивается) и единичного перемещение объект изменяется на противоположное.

if (x>=MinX) {

setProperty ("car", _x, x+dx);

setProperty ("car", _xscale, 100);

‘ Вновь конструкция из двух вложенных условных операторов. их назначение аналогично предыдущим.

В третьем ключевом кадре добавьте следующий код:

gotoAndPlay (2);

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

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

on (release, keyPress "") {

‘ Если единичное перемещение положительно, то нажатие на кнопку увеличивает это перемещение на единицу. Обратите внимание, что тоже действие произойдет если вы нажмете на кнопку на клавиатуре «вправо».

Код, соответствующие кнопке «медленнее» приведен ниже:

on (release, keyPress "") {

Назначение аналогично предыдущему фрагменту. Вот и все. Запускайте проект, тестируйте его. Полученные знания мы применим в последнем проекте, который объединит в себе два предыдущих и получится игра.

Вопросы для повторения:

Почему программную анимацию невозможно реализовать с помощью обычного цикла «пока»? Поясните назначение каждого кадра в трехкадровом цикле. Поясните смысл переменной dx в описанном проекте. Для чего в программном коде присутствует строка setProperty ("car", _xscale, 100);? Добавьте к созданному пректу кнопку "остановить".

10. Проект «Интерактивная игра - Тир».

Цель проекта: Создать интерактивную игру тир. На игровом поле перемешается заяц (цель) в которого необходимо попасть с помощью перемещаемой мишени. Попадание необходимо произвести за минимальное кол-во шагов (высчитывается). Примерный вид экрана представлен на Рисунок 23.

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

В принципе это – все тот же трехкадровый цикл. В первом кадре задаем начальные параметры:

z_x = random (450)+50;

z_y = random (230) + 50;

pr_x = getProperty (pr, _x);

pr_y = getProperty (pr, _y);

setProperty ("z", _x, z_x);

setProperty ("z", _y, z_y);

setProperty ("buh", _visible, 0);

d – точность попадания (подробней о этой переменной далее); h – единичный шаг перемещения «зайца»; rez – количество повторений, изначально данная переменная равна нулю; z-x и z-y – начальные координаты «зайца», они задаются с помощью стандартной функции Random, она вызывается с помощью команды Объектов – Математика - Произвольный в окне Действия кадра; далее свойства цели (объект «z») устанавливаются в полученные случайные координаты; и наконец в последней строке устанавливается видимость «выстрела» равной нулю, то есть до поры до времени объект «buh» невидим.

Рисунок 23

А ниже представлен код, соответствующий второму ключевому кадру:

z_x = getProperty(z, _x);

if (z_x>=max_x) {

setProperty ("z", _xscale, -50);

if (z_x<=min_x) {

setProperty ("z", _xscale, 50);

setProperty ("z", _x, z_x+h);

все в точности повторяет аналогичный код второго кадра из прошлой задачи.

В третьем кадре находится всего одна команда:

gotoAndPlay (2);

она позволяет «зациклить» движение цели.

Добавьте код для кнопок, перемещающих мишень вправо-влево, вверх-вниз. В качестве примера приведем код, для перемещения мишени вправо:

on (release, keyPress "") {

pr_x = getProperty (pr, _x);

setProperty ("pr", _x, pr_x + 10);

pr_x = getProperty (pr, _x);

в этом фрагменте команда pr_x = getProperty (pr, _x) повторяется дважды, это – не ошибка. Просто первый раз эта команда нужна для того, чтобы определить положение мишени до перемещения, а второй раз нам нужна новая координата мишени, чтобы при выстреле сравнивать ее с координатой цели.

Осталось добавить код для кнопки «огонь». Он представлен ниже:

on (release, keyPress "") {

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

setProperty ("buh", _x, pr_x);

setProperty ("buh", _y, pr_y);

setProperty ("buh", _visible, 1);

‘ Символ имитирующий «выстрел» перемещается в координаты где в данный момент находится мишень и его видимость становится равной единице.

tellTarget ("buh") {

gotoAndPlay (2);

‘ В проекте «выстрел» - это клип в котором проявляется красный круг. Для того, чтобы этого не происходило постоянно в первом и последнем кадре клипа стоит команда stop(). Команда TellTarget показывает компьютеру, что следующие в фигурных стрелках команды относятся только к объекту «buh» и выполняются в нем. Переходя во второй кадр тем самым запускается анимация внутри клипа «buh».

if (Math. abs (pr_x - z_x)

text = "Точно в цель!";

‘ В каком случае считать что мы попали в цель – в том случае, если разница между координатами цели и мишени меньше точности попадания (переменная d в первом кадре). Все дело втом, что одновременно выполняться оба условия идля координат x и для координат y, поэтому используется логическая связка И (смотри урок 4). И последнее, мы должны сравнивать модуль разности координат для этой цели используется стандартная математическая функция Math. abs (). Если все условия выполняются, динамическое поле «text» принимает значение "Точно в цель!" и ролик останавливается.

text = "мимо!";

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

Вопросы для повторения:

Какие изученные технологии использованы в этом проекте? Какое назначение у команды tellTarget ("buh")? Что нужно изменить в программе, чтобы уменьшить поле движения зайца на 100 пикселей? Почему сравнивая координату цели и координату мишени, мы должны вычислять модуль данных координат? Как это реализуется во Flash? Предложите варианты усложняющие игру, предложите пути их реализации.

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

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

Для получения. exe файла вы должны в программе Macromedia Flash создать Flash-ролик, опубликовать его (меню файл – публикация ). В результате у вас появляется файл с расширением. swf, просмотреть его можно либо с помощью программы Flash Player (устанавливается автоматически при установке Macromedia Flash. Откроете появившийся файл, выбирете меню файл – создание проектора, задаете имя вашего. exe файла.

Не смотря на то, вы видите прямоугольник, как на рисунке, это – граница, при наборе она будет оставаться, но в самом ролике ее не будет видно.

Скорее всего, при попытке набрать текст русскими буквами у вас на экране появится «абракадабра». Это связано с тем, что по умолчанию в программе Flash стоит шрифт Times New Roman, в котором отсутствует описание кириллических символов. Поэтому перед набором установите шрифт, поддерживающий кириллицу, например, Times New Roman Cyr или Arial Cyr.

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

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

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

Для импорта рисунка выберете команду Файл – Импорт из других форматов. Будьте внимательны, если в указанной вами папке находятся файлы названные однотипно, например. car1? car2 и т. д. то компьютер предложит их импортировать все сразу. Если вы импортируете векторный рисунок, он окажется на холсте в виде набора группированных объектов. Не забудьте его сгруппировать в единое целое. Если вы импортируете точечный рисунок, он автоматически помещается в библиотеку, а на сцене мы видим его копию.

Один из вариантов применения Flash-технологии - создание небольших приложений на стороне клиента. В статье в качестве примера рассматривается создание на Web-сайте калькулятора для расчета страховки автомобиля.

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

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

Где применять Flash

В ходе строительства Web-узла постоянно приходится решать проблему выбора той или иной технологии. Окончательный выбор зависит, как правило, от двух факторов: поставленной задачи и арсенала средств, которым владеет разработчик или команда разработчиков.

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

Решение некоторых задач на стороне сервера бывает предпочтительнее, а иногда просто не имеет альтернативы. Но программисты всегда стремились снизить нагрузку на сервер…

Итак, мы будем рассматривать построение клиентских приложений с помощью Flash. Обсудим, когда следует применять эту технологию, а когда лучше обратиться к традиционным методикам JavaScript, Java, VBScript.

Во-первых, нужно четко понимать, что Flash не создавался для программирования больших приложений. ActionScript четвертой версии весьма неуклюж с точки зрения любого сведущего в программировании. Основное его предназначение - управление последовательностью проигрывания фильма, подгрузка ресурсов с сервера, обработка взаимодействия фильма и пользователя. В этом языке отсутствуют средства создания и работы с массивами, обработка математических функций; весьма скромны средства работы со строками. В пятой версии язык кардинально изменился и стал похож на большинство других языков программирования для Интернета, но мы пока рассмотрим пример, выполненный на ActionScript четвертой версии, поскольку для начинающих программистов и Web-дизайнеров эта версия легче для понимания. В то же время переход на пятую версию при накоплении определенного опыта не вызовет проблем.

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

Применение Flash для таких приложений открывает для дизайнера массу возможностей (ограниченных только его фантазией) при создании пользовательского интерфейса. Вместо того, чтобы соединять несколько технологий в решении одной задачи, можно все делать в одной программе - редакторе фильмов Flash и тут же отлаживать полученный результат. Причем, по данным фирмы Macromedia, у почти 95% пользователей Интернета уже установлен плейер для воспроизведения flash-фильмов. А теперь перейдем к рассмотрению конкретного примера, на котором можно продемонстрировать применение технологии Flash для разработки конкретного приложения.

Постановка задачи

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

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

При выборе инструмента реализации были приняты во внимание следующие обстоятельства.

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

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

Создание приложения

Структура программы и алгоритм

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

Рис. 1. Общий вид формы для расчета страховки автомобиля.

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

Рис. 2. Выбор марки автомобиля.

Соответствующее окно меню показано на рис. 2. Для упрощения выбора и скрытия внутренней логики программы применим для каждой марки машины свою кнопку. При нажатии на эту кнопку выполняется следующий код:

On (Release) Begin Tell Target ("/") Set Variable: "AvtoTypeText" = "ВАЗ 2115" Set Variable: "CarsGroup" = 1 End Tell Target Go to and Stop (HideWin) End On

Здесь сразу устанавливается переменная AvtoTypeText, которая позднее используется для вывода в динамическое текстовое поле для отображения выбранной марки. Кроме того, устанавливается группа, в которую попадает автомобиль. Эти операторы заключены в блок Tell Target. Знак "/" говорит о том, что переменные находятся в основном слое, который содержит все остальные клипы.

Оператор Go to and Stop(HideWin) устанавливает форму в невидимое состояние после нажатия кнопки, т. е. нажатие кнопки одновременно закрывает окно. Это оправданно, так как выбор марки автомашины однозначен.

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

Здесь следует немного пояснить для тех, кто мало знаком еще с flash-программированием: один из основных приемов этой технологии - использование устойчивых состояний клипа. Определений терминов мы давать не будем, они есть в файлах Справки и в учебниках.

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

В примере с меню выбора марки автомобиля в первом кадре окно видимо вместе со всеми кнопками. В это состояние клип устанавливается при нажатии на кнопку выбора марки автомашины в главном окне. Второй кадр имеет в свойствах установленную метку (Label) с именем HideWin и не содержит никаких объектов. Делая переходы оператором Go to and Stop , мы можем управлять видимостью меню из любого места нашего flash-фильма.

Из рис. 3 видно, что данный клип содержит два слоя. Объекты и код разнесены по разным слоям просто для удобства. Никакого влияния на отработку программы это не оказывает.

Рис. 3. Объекты и код разнесены по разным слоям.

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

Для создания переключателя нужно создать два объекта типа Button. Каждый из них будет представлять одно из устойчивых состояний переключателя (рис. 4).

Рис. 4. Два состояния кнопок переключателя.

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

On (Release) Play End On

Это все. При нажатии на любую из кнопок будет происходить переход на один фрейм. Внешний вид клипа будет соответственно меняться. Во фреймах клипа можно устанавливать какую-либо переменную, хранящую состояние переключателя, например: checked=1 для выделенного и checked=0 для невыделенного состояний. Это будет локальная переменная для клипа. Для доступа к ней из других клипов нужно указывать полный или относительный путь. Если использовать значение внутри клипа, то достаточно указать только имя.

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

Вернемся к алгоритму нашей программы. Здесь как раз используются переключатели, которые мы только что рассмотрели. Окно для выбора рисков страхования содержит пять таких переключателей; каждому риску соответствует свой переключатель (рис. 5).

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

Рис. 5. Окно для выбора рисков с пятью переключателями.

Ниже приведен полный код кнопки на панели выбора рисков:

Здесь все довольно просто, и код понятен даже для начинающих. Вначале устанавливается значение строчной переменной /:InsStr, которая связана с тестовым динамическим полем, отображающим выбранные риски. Если никаких рисков не выбрано, то это и будет значение строки после закрытия формы. Если выбор сделан, что определяется суммированием флагов по всем рискам и проверкой переменной klop, то /:InsStr присваивается пустая строка, к которой будут добавляться строки, соответствующие выбранным рискам. Это делается в блоках If () … End If. Затем проверяется случай выбора всех рисков, и устанавливается корректное положение флагов переключателей. При новом открытии диалогового окна переключатели будут уже в новом состоянии. Это делается каждым переключателем самостоятельно по значению его флага (переменные /:CheckUgon, /:CheckDTP, /:CheckBurst, /:CheckCrim).

Далее идет уже знакомый оператор перехода, который закрывает окно. И, наконец, кое-что новое - в изолирующем блоке Tell Target() вызывается оператор Call() в главной хронометрической линейке. Это вызов процедуры. Во Flash он имеет несколько особенностей относительно других языков. Во-первых, процедуры привязаны к фреймам, и код процедуры - это код некоего фрейма. Во-вторых, оператор call не передает параметров. Выражение в скобках - это метка фрейма с кодом процедуры. В-третьих, оператор call не влияет на проигрывание фильма в процессе выполнения. Все переходы будут выполнены только после отработки всех кусков кода в данном временном срезе. Перехода на фрейм с кодом тоже не происходит. Проигрыватель фильма стоит на том же кадре, где он был до вызова процедуры.

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

Рассматривать подробно другие диалоговые окна нет необходимости. Их код проще вышеприведенного. Лишь перечислим эти окна и кратко скажем об их содержимом.

1. Окно "Место хранения автомобиля" содержит три переключателя, работающих по типу RadioButton, и кнопку закрытия окна.
2. Окно "Противоугонные средства" содержит три переключателя типа CheckBox и кнопку закрытия окна.
3. Окно "Страховая история" (сколько лет страховался клиент ранее без страховых случаев в любых страховых компаниях) содержит текстовое поле и кнопку закрытия окна.
4. Окно "Ошибка" выводит сообщение об ошибках и недопустимых значениях введенных данных. Текст описания исключительной ситуации присваивается динамическому текстовому полю.
5. Окно сообщения об успешном выполнении расчета с инструкцией по распечатке формы.

Для ввода некоторых параметров окна не нужно - это год выпуска автомобиля, водительский стаж, оценка стоимости автомобиля и срок действия страховки. При вводе в текстовые поля нужно делать проверки корректности данных и соответствия числа заданному диапазону, что определяется исходными условиями. Например: срок страховки может быть только целым, не меньше 1 и не больше 12 (месяцев). Эти проверки выполняются простыми условными операторами и с применением функции округления int(). Если значение выходит за пределы допустимого, то присваивается некое значение по умолчанию. Так мы избегаем получения заведомо неверных результатов.

Особенности реализации

Теперь рассмотрим еще один важный момент. Где мы храним значения тарифов? Дело в том, что Flash версии 4 не имеет конструкций для описания массивов. Выход - либо хранить данные в простых переменных, либо пытаться эмулировать массивы. Массивы удобны при использовании циклов. В данном случае циклов нет, и можно обойтись обычными переменными. Способ не очень изящный, но простой и надежный. Переменные инициализируются при запуске приложения в первом фрейме основной временной линейки (в самой сцене). Есть еще один способ описания переменных - в текстовом файле. Данные записываются в простой форме:

Var01="value01"&var02="value02"&var03="value03"

Это соответствует обычной записи вида "ключ=значение". Файл загружается оператором Load variables ("filename.txt", "/targetClip").

Тут надо сказать несколько слов о формировании имен переменных. Формирование однотипных имен важно, если необходимо использовать некие числовые индексы для обращения к той или иной переменной. Как уже говорилось, Flash 4.0 не позволяет создавать массивы, но этот недостаток можно обойти. Будем формировать имена динамически. Скажем, в строке ДТП назовем переменные DTP1, DTP2…DTP12. Назначить эти переменные можно обычным способом:

Set variable "DTP1"=6

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

Set variable "Temp"=eval("DTP"&n)

где n - это номер колонки. Это совершенно равнозначно выражению:

Set variable "Temp"= DTP1

Осталось немного - чистая арифметика. Код разбивается по нескольким фреймам-процедурам, к которым обращаемся через оператор call . Все эти фреймы находятся в самой сцене. Имея номер группы и срок эксплуатации, определяем номер колонки в таблице тарифов. Далее проверяем отмеченные риски и суммируем значения тарифов. Делаем проверки выполнения условий для скидок, зависящих от места хранения и наличия противоугонных систем) и выбираем соответствующий поправочный коэффициент. Далее учитывается срок безубыточного страхования и выполняется проверка на выход за пределы диапазона (в данном случае не более 30%). Остается все перемножить и получить результат. Все вызовы процедур call() сосредоточены в кнопке "Посчитать".

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

Немного о серверных скриптах

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

Распечатка результата

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

Результат

Мы полностью выполнили поставленную задачу средствами Flash 4.0, не используя никаких дополнительных технологий для основной логики программы. Полностью функциональное приложение имеет объем около 40 Кбайт и после загрузки не требует никакой связи с сервером. Число расчетов неограниченно. Пользователь может сколько угодно менять исходные данные и получать результаты немедленно. Потенциальная аудитория, которая сможет воспользоваться этой программой, составляет около 95% пользователей Интернета. И при этом мы практически избавлены от конфликтов версий браузеров, систем, платформ. Технология Flash - это на сегодня технология одного производителя, что упрощает задачу разработчика. Интерфейс формы совершенно уникален, и при этом издержки на графическую часть минимальны. Полагаю, что плюсов достаточно, чтобы использовать и в дальнейшем для подобных задач технологию Flash от Macromedia.