Создание интерактивных приложений в Adobe Flash

Создание интерактивных приложений в Adobe Flash

2-е издание, исправленное

Ларина Э.С.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Создание интерактивных приложений в Adobe Flash/ Э.С. Ларина - М.: Национальный Открытый
Университет “ИНТУИТ”, 2016

Данный курс предполагает изучение инструментов редактора Adobe Flash CS6, позволяющих
создавать интерактивные приложения.
Данный редактор на сегодняшний день является востребованным не только среди WEB-дизайнеров и
программистов, создающих программные продукты под Интернет. Умение создавать такие
программные продукты - одно из составляющих информационно-коммуникационной
компетентности школьника. Упор в курсе делается на изучение тех инструментов редактора, которые
позволяют создавать интерактивные приложения (в частности, образовательной направленности).

(c) ООО “ИНТУИТ.РУ”, 2013-2016
(c) Ларина Э.С., 2013-2016

3

Предисловие

Материалы к курсу Вы можете скачать ссылка: здесь http://old.intuit.ru/department/graphics/criaflash/0/Praktika.zip.

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

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

Такое представление графического объекта не займет много места в памяти. Еще одно
преимущество векторной графики - качественное масштабирование в любую сторону.
Увеличение или уменьшение объектов производится увеличением или уменьшением
соответствующих коэффициентов в математических формулах.

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

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

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

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

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

4

картинок в любую сторону обычно ухудшает качество. При уменьшении количества
точек теряются мелкие детали и деформируются надписи. Добавление пикселей
приводит к ухудшению резкости и яркости изображения, т.к. новым точкам
приходится давать оттенки, средние между двумя и более граничащими цветами.
Распространены форматы .tif, ,gif, .jpg, .png, bmp и др. [2].

В данном курсе мы будем работать в векторном редакторе Adobe Flash CS6(CS5),
программировать в AS3.

Введение

Разработанный курс рассчитан на изучение редактора Adobe Flash CS6 (CS5). Данный
редактор на сегодняшний день является востребованным не только среди WEBдизайнеров и программистов, создающих программные продукты под Интернет.
Умение создавать такие программные продукты - одно из составляющих
информационно-коммуникационной компетентности школьника. Да и в процессе
развития таких компетенций (то есть в процессе самого обучения) необходимо
использовать в урочной деятельности электронные ресурсы, которые все чаще и чаще
заменяют печатные материалы. За неимением таковых учитель сам должен разработать
электронную поддержку урока. Цель данного курса – научить разрабатывать
электронные пользовательские приложения.

Перед автором НЕ СТОЯЛА ЗАДАЧА – РАЗРАБОТАТЬ ПОСОБИЕ ПО ADOBE
FLASH. Упор в курсе делается на изучение тех инструментов редактора, которые
позволяют создавать интерактивные приложения (в частности, образовательной
направленности). Несколько слов, характеризующих интерактивность программных
продуктов (на примере программных продуктов, использующихся в образовательных
целях):

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

Не стоит рассматривать гипертекстовую организацию документа (с доступом к
конкретным разделам через систему ссылок) как интерактивность. Гиперссылка – это
лишь способ “пролистывания” текста. Меню гипертекстового документа позволяет
иначе организовывать доступ к нужному разделу (имеется в виду иначе, чем в
печатном документе), но сам документ остается при этом статичным. В интерактивных
же приложениях пользователю предоставляется возможность влияния на материалы,
представленные в приложении. Что же это за влияние? Рассмотрим подробнее.

Возможность “диалога” с программой дают такие средства, как:

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

5

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

2. Раскрашивание объектов. В задании необходимо создать палитру выбора цвета.
Каждый объект может быть раскрашен своим цветом. Задачи, в которых используется
это средство:

собственно “окрасить” каждую фигуру на экране своим цветом;
установить соответсвие между некоторыми объектами при помощи одного цвета;
указать на объект при помощи цвета (“лишняя фигура” и др.);
и др.

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

выбор цвета линии;
выбор толщины линии;
выбор прозрачности линии;
возможность стирания нарисованного ранее изображения.

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

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

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

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

6

5. Ввод данных в поля ввода. Задачи, использующие это программное средство
разнообразны:

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

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

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

Лекции проиллюстрированы примерами – авторскими электронными приложениями,
сгруппированными по темам. Приложения предлагаются в виде демо-версий, в
которых “открыт” необходимый для освещения данной темы фрагмент.

7

Основные приемы работы с векторной графикой

В лекции рассматриваются основные приемы работы с векторной графикой, такие как:
изменение формы графических объектов; объединение; сегментирование; разделение.

Работа в программе Flash

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

1. Интерфейс окна Flash:(рис. 1.1)

Рис. 1.1.  Интерфейс окна программы

При необходимости для каждой конкретной ситуации можно настраивать интерфейс
окна по своему усмотрению, расположив на экране другие панели (выбрав режим
меню “Окно”).

Назначение панелей:

Временная шкала состоит из последовательности кадров, по которым можно
перемещаться, передвигая маленький вертикальный прямоугольник красного
цвета (указатель текущей позиции воспроизведения), расположенной над слоями.
У каждого кадра есть порядковый номер, который проставлен над каждым пятым
кадром. Чтобы отобразить содержимое кадра в рабочей области, на временной
шкале нужно переместить указатель на этот кадр. Кадры могут быть ключевыми,
пустыми ключевыми и просто кадрами, дублирующими состояние предыдущего
ключевого кадра. Кадры можно выделять, удалять, копировать, вставлять, менять
местами. Более подробно работа с временной шкалой будет рассмотрена в лекции
“Создание анимации”.

8

Панель правки позволяет быстро перемещаться между различными частями Flashдокумента.
На панели инструментов располагаются инструменты графического редактора
(инструменты для создания изображений, выделения, редактирования). Также на
панели располагается блок опций инструментов, позволяющий устанавливать
параметры выбранных инструментов. Например, выбранный инструмент
“Карандаш” имеет опции “Выпрямление”, “Сглаживание”, “Краска” (рис. 1.2). На
практике проверьте назначение каждой из опций для инструмента “Карандаш”.

Рис. 1.2.  Опции инструмента “Карандаш”

На панели Cвойств объектов (Инспектор свойств) отображается доступный для
редактирования набор свойств выделенного объекта.

Содержимое Flash-документа создается в рабочей области Flash. Рабочая область с
временной шкалой составляют текущую Сцену создаваемого документа. Flashдокумент может содержать несколько Сцен, Сцены могут быть “вложенными” одна в
другую.

2.Приемы работы с векторной графикой

Графический объект состоит из обводки (границы фигуры) и заливки. Двойной клик по
фигуре выделяет и обводку и заливку, один клик по обводке – выделяет обводку, клик
по заливке – выделяет заливку. Доступным для редактирования может быть только
выделенный объект.

Изменение формы графических объектов.

Создайте графический объект. Он состоит из узловых точек (вершин) и линий, их
соединяющих (ребер). Наведите указатель мыши на вершину– указатель примет
вид уголка. Поменяйте положение вершины по принципу “нажал и протащил”
(рис. 1.3).

9

Рис. 1.3.  Изменение положения вершины

Наведите указатель мыши на ребро – указатель примет вид дуги. Поменяйте
форму ребра (рис. 1.4).

Рис. 1.4.  Изменение формы ребра

Объединение

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

10