Создание теста во Flash

Содержание

• Введение 4
• 1 Общие сведения 5
• 2 Характеристика и принципы работы в программе 6
• Macromedia Flash 7 MX 6
• 2.1 Наборы панелей 6
• 2.2 Инспектор свойств 7
• 2.3 Временная шкала 8
• 2.4 Слои и папки слоев 9
• 2.5 Панели инструментов 11
• 2.6 Библиотека 13
• 2.7 Панель Actions 14
• 2.8 Доступ к панели Actions 16
• 2.9 Использование панели Actions 16
• 3 Создание теста с помощью программы Macromedia Flash 17
• 3.1 Создание слоев 17
• 3.2 Создание командной кнопки 17
• 3.3 Добавление объектов из библиотеки 18
• 3.4 Добавление динамических текстовых полей 18
• 3.5 Добавление новых кадров 18
• 3.6 Добавление стандартных компонентов в проект 18
• 3.7 Оформление теста 19
• 3.8 Задание Action-скрипта для кадров и кнопок 19
• 3.9 Добавление вопросов и ответов 21
• Заключение 22
• Список литературы: 23
• Приложение А 24

 Введение

В настоящее время Интернет-технологии развиваются быстрыми темпами, и все большее распространение находят программные продукты позволяющие создавать веб-приложения, интерактивные программные продукты, веб-анимацию. К таким программным продуктам можно отнести: Adobe Gif Animator, 3dsmax, Corel R.A.V.E., Macromedia Flash, Maya и многие другие.

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

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

Целью данной работы является создание тестовой программы используя flash-технологии, Action-скрипт.

1 Общие сведения

Вначале Flash-технологии использовались преимущественно для создания различных анимированных баннеров и заставок, затем большую популярность приобрели Flash-игры и короткие анимационные Flash-ролики. Параллельно с этим активно развивались онлайновые интерактивные бизнес-приложения: руководства пользователя, рекламные презентации, средства обучения и т.п. Все чаще технология Flash стала применяться для создания сложных интерактивных сайтов и, по сути, в последние годы превратилась в промышленный стандарт для работы с интерактивным контентом. Одно из главных удобств Flash, принесшее этому продукту широкую популярность, -- обеспечение принципа «Build once, deliver anywhere» («Разработал единожды, распространяй везде»). Приложения, созданные на базе Flash, работают на разных платформах Windows, Macintosh, UNIX, PDA и даже в мобильных телефонах. Продукт Macromedia Flash Player фактически стал стандартом и сегодня установлен на компьютерах 97,6% пользователей Интернета

2 Характеристика и принципы работы в программе

Macromedia Flash 7 MX

2.1 Наборы панелей

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

Пользовательский интерфейс в версии MX значительным образом модернизирован. При работе с Flash пользователю всегда не хватает места на экране (хотя в настоящее время большинство мониторов работает с разрешением 1024x768, а не 800x600). В связи с этим новые наборы панелей и инспекторы свойств были спроектированы так, чтобы максимально увеличить рабочую область экрана. Все панели, за исключением панелей Timeline (Временная шкала), Stage (Рабочее поле) и инспектора свойств для Macintosh, можно сделать плавающими, сворачивать или разворачивать по мере необходимости. Пользователи Macintosh не могут привязать никакие другие панели к панелям Timeline и Stage, а панель инспектора свойств всегда является плавающей. Можно привязать другие панели к панели Actions (Действия). Быстро скрыть и отобразить все панели можно с помощью клавиши <Таb>. Разумеется, что наборы панелей в значительной степени влияют на удобство и простоту использования интерфейса Flash MX в целом.

В программе Flash MX имеются следующие панели:

* Toolbox (Панель инструментов);

* Stage (Рабочее поле);

* Align (Выравнивание);

* Color Swatches (Каталоги цветов);

* Transform (Преобразование);

* Debugger (Отладчик);

* Reference (Справка);

* Accessibility (Доступность);

* Component Parameters (Параметры компонентов);

* Timeline (Временная шкала);

* Property Inspector (Инспектор свойств);

* Color Mixer (Цветовой микшер);

* Info (Информация);

* Actions (Действия);

* Movie Explorer (Проводник фильма);

* Output (Вывод данных);

* Components (Компоненты);

* Library (Библиотека).

2.2 Инспектор свойств

Параметры, доступные на панели Property Inspector (Инспектор свойств), являются контекстно-зависимыми и открываются в зависимости от того, какой объект был выделен. Панель Property Inspector позволяет чрезвычайно быстро редактировать объекты. Панели Stroke (Штрих), Fill (Заливка), Text (Текст), Paragraph (Абзац), Character (Знак), Instance (Экземпляр), Frame (Кадр), Effect (Эффект) и Sound (Звук), применявшиеся в программе Flash 5, полностью заменены панелью Property Inspector, изображенном на рисунке 1. К сожалению, мечта реализована не полностью, и доступ к некоторым инструментам (например, Round Rectangle Radius, с помощью которого можно нарисовать прямоугольник со скругленными углами) пока что можно получить только в подразделе Options (Параметры) панели инструментов либо на других панелях. Некоторые параметры повторяются на разных панелях. В частности, параметры заливки и штрихования доступны на панели инструментов, а также на панели Property Inspector и Color Mixer. Тем не менее панель Property Inspector является существенным усовершенствованием интерфейса и практически полностью избавляет от необходимости открывать многочисленные диалоговые окна.

Рисунок 1 - Property Inspector (Инспектор свойств)

2.3 Временная шкала

Как и традиционный фильм, видеоклип Flash разворачивается во времени. Центром управления содержимым Flash-фильма является панель Timeline (Временная шкала), позволяющая управлять содержимым, отображаемым в течение определенного времени в различных кадрах и ключевых кадрах. На панели Timeline, как показано на рисунке 2, "расквартированы" все кадры и слои, составляющие фильм, а также считывающая головка, являющаяся индикатором текущего кадра. В состав временной шкалы входят:

· Кадры представляют собой отдельные статические кванты, или моменты времени, которые комбинируются друг с другом для создания эффекта движения. Если вспомнить книжку-раскладку, с помощью которой создавался примитивный эффект анимации, на каждой странице был изображен отдельный статический рисунок, но при быстром перелистывании страниц создавалась иллюзия движения. Кадры позволяют устанавливать последовательность и управлять скоростью воспроизведения фильма, а также задают его длину в целом. Как и в случае с фильмом, анимация, происходящая в меньшем количестве кадров, в конечном видеоролике будет казаться более быстрой, чем анимация с большим количеством кадров. Для вставки кадров необходимо выполнить команду Insert - Frame (Вставка - Кадр) или нажать клавишу <F5>.

· Ключевые кадры сигнализируют об изменениях в анимации. В кадрах хранится содержимое предшествующих им ключевых кадров. И только после прохождения нового ключевого кадра может измениться содержимое области фильма в пределах одного слоя. Для вставки ключевого кадра необходимо выполнить команду Insert - Keyframe (Вставка - Ключевой кадр) или нажмать клавишу <F6>. В любом ключевом кадре, следующем за другим ключевым кадром, отображается содержимое первого ключевого кадра, что позволяет пользователю вносить изменения в исходное содержимое. Для вставки ключевого кадра с пустым содержимым необходимо выполнить команду Insert - Blank Keyframe (Вставка - Пустой ключевой кадр) или нажмать клавишу <F7>. На временной шкале ключевые кадры изображаются черными кружками, а пустые ключевые кадры -- пустыми кружками.

Рисунок 2 - На панели Timeline осуществляется управление покадровой

анимацией

2.4 Слои и папки слоев

Слои позволяют компоновать содержимое фильма. Каждый слой можно считать отдельной полосой фильма на куске чистой ацетатной ткани. Если на каком-то участке слоя содержимое отсутствует, то сквозь данный слой будет "просвечивать" содержимое слоя, находящегося под ним. Если на каком-то участке верхнего слоя имеется содержимое, оно будет закрывать нижние слои. Слои позволяют систематизировать и разделить содержимое. Содержимым легче управлять, если оно разнесено по слоям. Особенностью Flash является возможность слияния простых не сгруппированных изображений, существующих в пределах одного слоя, если они перекрываются или соприкасаются. Разнесение содержимого в отдельные слои позволяет анимировать объекты индивидуально, с достижением весьма сложных эффектов. Добавление слоев не приводит к увеличению размера файла фильма, поэтому слои можно смело использовать при необходимости организации содержимого. По мере создания слоев Flash автоматически нумерует их и присваивает имена. Для переименования слоя необходимо дважды щелкнуть на его имени (например, Layer 1), расположенном в левой части панели Timeline (Временная шкала). Необходимо уделить больше внимания присвоению имен слоям, делая их достаточно короткими, но при этом несущими смысловую нагрузку. В дальнейшем слои будут служить указателем расположения объектов. По мере увеличения проекта и количества слоев в них можно будет легко запутаться, но этого никогда не произойдет, если слои будут иметь четкие описательные имена. Пиктограммы, расположенные справа от каждого слоя, позволяют скрывать и блокировать слои, а также отображать их в виде контуров. Слои, с которыми не производится работа в данный момент, стоит заблокировать, что позволит избежать непреднамеренного изменения содержимого. Удерживая клавишу <Alt> щелкнуть на кружке, расположенном под пиктограммой с изображением замка. В результате этой операции будут заблокированы все остальные слои. Чтобы заблокировать или снять блокировку отдельных слоев, необходимо щелкнуть на кружках, расположенных в столбце блокировки. О блокировании слоев свидетельствует пиктограмма с изображением замка. Чтобы скрыть слой и увидеть содержимое, расположенное под ним, можно воспользоваться кружками, которые находятся под пиктограммой с изображением глаза. Аналогичным образом, щелчок на кружке видимости при нажатой клавише <Alt> в строке одного из слоев приведет к скрытию всех остальных слоев. О скрытии слоев свидетельствует значок X красного цвета, расположенный в левом столбце под пиктограммой с изображением глаза. Слои можно отображать в виде контуров, что может оказаться полезным при наличии большого количества перекрывающихся элементов на различных слоях. При отображении слоя в виде контура цветной квадрат, расположенный в правом столбце, станет незаполненным.

2.5 Панели инструментов

На этой панели, изображенной на рисунке 3, размещаются инструменты, предназначенные для работы во Flash. Данная панель подразделяется на четыре области: Tools (Инструменты), View (Вид), Colors (Цвета) и Options (Параметры). Некоторые из инструментов имеют модификаторы, отображаемые в области Options при их выборе.

Рисунок 3 - Панель Tools (Инструменты)

· Инструмент Arrow (Стрелка) используется для выделения объектов в рабочей области. С помощью этого инструмента можно одним щелчком выделить объект, нарисовать область для выбора нескольких объектов или дважды щелкнуть им, чтобы выделить области заливки и штрихования объекта. Правда, после щелчка на изображении, содержащем и штрихи, и заливку, будет выделена только та область, на которой был произведен щелчок. Поскольку инструментом Arrow будет пользоваться чаще других, следует запомнить клавишу быстрого доступа <V>. При выборе инструмента Arrow в разделе Options панели инструментов будут отображены три модификатора. Первый из них, имеющий вид кнопки с изображением магнита, называется Snap to Objects (Привязка к объектам). При его выборе (по умолчанию) на конце указателя мыши будет отображаться кольцо, увеличивающееся по мере перетаскивания какого-либо объекта к другому, к которому он может быть привязан. Когда будет выделен объект или его часть, станут доступными модификаторы Smooth (Сглаживание) и Straighten (Выпрямление).

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

· Инструмент LINE - Щелкнув и перетащив инструмент Line (Линия) создастся прямую линию. Удерживая нажатой клавишу <Shift>, с помощью данного инструмента можно рисовать линии по горизонтали, вертикали или по диагонали.

· Инструмент TEXT - После щелчка на инструменте Text создается место для начала ввода текста. Атрибуты текста назначаются на панели инспектора свойств.

· Инструмент OVAL - С помощью инструмента Oval (Овал) можно нарисовать овалы и идеальные круги. Чтобы нарисовать овал, необходимо щелкнуть и перетащить инструмент; для создания круга при щелчке и перетаскивании удерживать нажатой клавишу <Shift>.

· Инструмент RECTANGLE - Инструмент Rectangle (Прямоугольник) позволяет рисовать прямоугольники и квадраты. Чтобы нарисовать прямоугольник, необходимо щелкнуть и перетащить инструмент; для создания квадрата при щелчке и перетаскивании удерживать нажатой клавишу <Shift>. Инструмент Rectangle имеет модификатор Round Rectangle Radius (Радиус скругления углов прямоугольника), позволяющий задать радиус закругления углов.

· Инструмент Pencil (Карандаш) позволяет рисовать неровные линии. В отличие от инструментов Pen или Line, с помощью которых можно рисовать только от точки до точки, инструмент Pencil двигается вслед за мышью и является цифровым эквивалентом рисования карандашом. Модификатор Pencil Mode (Режим карандаша) позволяет выпрямлять или скруглять траектории при рисовании.

2.6 Библиотека

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

Рисунок 4 - Панель Library (Библиотека)

2.7 Панель Actions

В версии MX объекты интегрированы более тесно. Теперь кнопки представляют собой истинные объекты, свойствами которых можно управлять посредством ActionScript, а видеоклипы могут получать события кнопок. Панель Actions изображена на рисунке 5.

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

Рисунок 5 - Панель Actions

ActionScript -- это язык программирования, посредством которого во Flash осуществляется отправка команд и запросов о временных зависимостях, видеоклипах, кнопках и других объектах. Очень часто с помощью ActionScript можно легко достичь целей, которые в противном случае представляли бы собой труднодостижимую или, вообще, невозможную задачу. Без ActionScript можно реализовать только малую часть возможностей Flash. Например, ActionScript необходим для реализации любого рода интерактивности, например, отклика после щелчка пользователем кнопкой мыши или нажатия клавиши на клавиатуре. Кроме того, ActionScript является единственным способом реализации перехода к определенному кадру временной шкалы либо начала или остановки воспроизведения видеоклипа. Однако эти простые примеры не раскрывают богатство, гибкость и бесконечность возможностей, которые ActionScript открывает перед разработчиками, использующими среду Flash. Как правило, при использовании ActionScript удается получить SWF-файлы меньших размеров и с лучшим качеством, чем при создании промежуточных отображений. Еще одним преимуществом является то, что различные задачи удается выполнять с большей точностью, например перемещать видеоклип в точно заданное место рабочей области. Возможности языка ActionScript безграничны, а использовать его очень легко. Знакомство с ActionScript лучше всего начать с панели Actions (Действия).

2.8 Доступ к панели Actions

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

* из меню Window (Окно) выбрать пункт Actions (Действия);

* нажать клавишу <F9>.

После этого на экране появится или будет развернута панель Actions. Если эта панель была открыта, но скрыта другим окном, она переместится на передний план. При заданной по умолчанию компоновке панель Actions связана с панелью инспектора свойств. (Если вы хотите восстановить компоновку, заданную по умолчанию, выполните команду Window - Panel Sets - Default Layout (Окно - Наборы панелей - Размещение по умолчанию)).

Панель Actions является встроенным во Flash редактором ActionScript. При соответствующем использовании суффиксов экземпляров объектов (например, суффикс _тс для видеоклипов) в ней будет открываться вспомогательное окно с советами по применению кода.

Воспользовавшись кнопкой Pin current script (Прикрепить текущий сценарий), можно "закрепить" текущий сценарий, т.е. сохранить его на панели Actions.

2.9 Использование панели Actions

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

3 Создание теста с помощью программы Macromedia Flash

Для запуска программы выполнить команду Пуск - Программы - Macromedia - Macromedia Flash MX 2004

3.1 Создание слоев

а) В главном меню программы выполнить команду Insert - Timeline - Layer.

б) В контекстном меню слоя команда Properties - задать имя слоя. Присвоить имя osnovnoi.

Таким же образом создать 4 дополнительных слоя и присвоить им имена background, highlight, optional, label.

в) Расположить слои как показано в приложении А, рисунок А.1.

3.2 Создание командной кнопки

а) Выполнить команду Insert - New Symbol (Ctrl + F8).

б) Задать название кнопки «Start».

в) Выбрать тип Button.

г) Нарисовать положения кнопки при состоянии Up, Down, и Over.

Для упрощения работы, вначале рисуется при состоянии Up, затем во временной шкале выделяется кадр с пометкой Over и добавляется еще два кадра с помощью команды Insert - Timeline - KeyFrame (F6). Затем уже изменяется внешний вид во всех трех состояниях.

д) Добавить новый слой, в нем добавить текстовое поле с надписью «Начать тест». В панели Properties задать параметры текста.

е) Таким же образом создать кнопки «Далее» и «Повторить тест» (с именами Next и Zanova соответственно).

3.3 Добавление объектов из библиотеки

а) Открыть библиотеку символов Ctrl + L.

б) Перетащить объект Start на сцену, в первый кадр слоя osnovnoi.

3.4 Добавление динамических текстовых полей

а) В первом кадре, на слое osnovnoi добавить 4 текстовых поля, используя панель инструментов ToolBox, инструмент Text.

б) Одному из них в панели Properties выбрать DynamicText и в поле «Var» присвоить ему имя «fio».

в) Таким же образом изменить второе поле, присвоив ему имя «gr».

г) Остальные два текстовых поля оставить статичными.

3.5 Добавление новых кадров

а) Выделить второй кадр на временной шкале в слое osnovnoi.

б) Выполнить команду Insert - Timeline - KeyFrame (F6).

3.6 Добавление стандартных компонентов в проект

а) Открыть панель Components, найти компонент RadioButton.

б) Перетащить объект из библиотеки в трех экземплярах.

в) В окне Properties задать имена an1, an2 и an3 (приложение А, рисунок А.2).

г) Разместить три экземпляра как необходимо для теста (это варианты ответа на каждый вопрос теста).

д) Добавить в слой еще 40 кадров.

3.7 Оформление теста

а) В первом кадре слоя Background создать фон теста, используя панель инструментов ToolBox.

б) Выделить кадр 42, вставить кадр (Insert - Timeline - frame (F5)).

в) В первом кадре слоя optional добавить 4 экземпляр RadioButton за пределы видимой области, присвоить ему имя an4.

г) Выделить кадр 42, вставить кадр (Insert - Timeline - frame (F5)).

д) Во втором кадре слоя highlight нарисовать подсветку для вопросов и вариантов ответа.

е) Выделить кадр 41, вставить кадр (Insert - Timeline - frame (F5)).

ж) В 42 кадре слоя osnovnoi добавить 4 динамических текстовых поля с именами fio2, gr2, bal, ocenka (для вывода результатов теста с указанием фамилии, группы, количества баллов и оценки).

3.8 Задание Action-скрипта для кадров и кнопок

Весь скрипт написан в слое osnovnoi.

а) В панели Actions для первого кадра необходимо задать следующее:

fio="";

p=0;

gr="";

stop();

б) В панели Actions для кадров со 2 по 41 задать следующее:

mynum = (random(3)+1)*30+80;

setProperty (an1, _y, mynum);

if (mynum == 110) {

setProperty (an3, _y, 170);

setProperty (an2, _y, 140);

}

if (mynum == 140) {

setProperty (an2, _y, 110);

setProperty (an3, _y, 170);

}

if (mynum == 170) {

setProperty (an2, _y, 140);

setProperty (an3, _y, 110);

}

stop();

в) Для 42 кадра задать следующее:

fio2=fio+",";

gr2=gr;

oc=p/40*100;

bal=p;

if (oc>=95) {

ocenka="5 баллов."

}

if ((oc>=81)&(oc<=84)) {

ocenka="4 балла."

}

if ((oc>=60)&(oc<=80)) {

ocenka="3 балла."

}

if (oc<59) {

ocenka="2 балла."

}

stop();

г) Для кнопки «Start» задать следующее:

on (release) {

play();

an4.selected=true;

}

д) Для кнопки «Next» задать следующее:

on (release) {

if (an1.selected) {

p=p+1;

}

an4.selected=true;

play ();

}

е) Для кнопки «Zanova» задать следующее:

on (release) {

play();

gr="";

fio="";

p=0;

}

3.9 Добавление вопросов и ответов

а) Во втором кадре слоя osnovnoi добавить текстовое поле (как описано в подразделе 3.4), записать в него вопрос.

б) Ответы записать во втором кадре в экземпляры RadioButton в свойство label.

Повторить для всех кадров.

Заключение

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

В теоретической части курсового проекта был рассмотрен интерфейс программы, основные моменты и принципы работы.

В практической части более подробно рассмотрена работа с компонентами, создание кнопок, задание параметров Action - скритпа.

Данная курсовая работа может применяться как для обучения основам работы во Flash MX, так и непосредственно для проверки знаний по дисциплине «Теория бухгалтерского учета».

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

Список литературы:

1. http://www.1ps.ru/

2. http://www.flasher.ru/

3. http://www.helpexe.ru/

4. Чанг Т.К., Кларк Ш. и др. «Популярные web-приложения на Flash MX». Пер. с англ. - М.:КУДИЦ-ОБРАЗ, 2003 - 272с.

5. Уотролл Э., Гербер Н. «Эффективная работа во Flash MX , - СПБ.: Питер; Киев: BHV, 2003. - 720 с.

Приложение А

Рисунок А.1 - Расположение слоев в тесте

Рисунок А.2 Задание параметров для компонента