Область действия и рабочая область

Н. Д. Москин

Разработка мультимедийных приложений в Adobe Flash CS3

Учебное пособие

 

 

Петрозаводск

Издательство ПетрГУ

УДК 004.4’27

ББК 32.973.26-018.2

M823

Печатается по решению редакционно-издательского совета
Петрозаводского государственного университета

 

Р е ц е н з е н т ы:

доцент кафедры геометрии и топологии Петрозаводского государственного университета, кандидат физико-математических наук

К. В. Матюшичев;

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

А. Н. Корякина

 

Москин, Н. Д.

М823 Разработка мультимедийных приложений в Adobe Flash CS3 : учебное пособие / Н. Д. Москин. – Петрозаводск : Изд-во ПетрГУ, 2011. – 56 с.

 

ISBN 978-5-8021-1229-9

 

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

УДК 004.4’27

ББК 32.973.26-018.2

 

 

ISBN 978-5-8021-1229-9

© Москин Н. Д., 2011 © Петрозаводский государственный университет, 2011

Оглавление

Введение. 4

Глава 1. Интерфейс программы.. 5

1.1. Область действия и рабочая область. 5

1.2. Панель инструментов. 6

1.3. Временная шкала. 7

1.4. Панели Flash. 7

1.5. Работа с текстом.. 9

1.6. Работа с символами. 10

1.7. Публикация Flash-фильмов. 13

Глава 2. Создание анимации в среде Flash. 15

2.1. Кадры и ключевые кадры.. 15

2.2. Анимация типа motion tweening. 15

2.3. Анимация типа shape tweening. 16

2.4. Анимация типа motion path tweening. 17

2.5. Создание слоев-масок. 18

2.6. Базовые действия ActionScript 18

2.7. Отладка сценариев. 20

Глава 3. Введение в язык ActionScript 22

3.1. Синтаксис языка и комментарии. 22

3.2. Типы данных. 23

3.3. Переменные. 23

3.4. Операторы.. 24

3.5. Условные конструкции. 25

3.6. Циклы.. 26

3.7. Функции. 27

3.8. Объекты.. 28

3.9. Программное управление графическими элементами. 33

3.10. Сцены.. 35

3.11. Работа со звуком.. 36

3.12. Импортирование видео. 39

Глава 4. Применение Flash для создания обучающих систем.. 42

4.1. Структура обучающего мультимедиа-курса. 42

4.2. Шаблоны и компоненты.. 43

4.3. Управление внешними приложениями и данными. 50

Приложение. Варианты лабораторных работ. 52

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

Введение

 

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

Кратко рассмотрим историю Flash. В 1996 году компанией FutureWave была разработана программа векторной анимации Future Splash Animator, которая затем была куплена компанией Macromedia и получила название Flash («вспышка»). Первая версия Flash 1 появилась в 1997 году. Во второй и третьей версии впервые стало возможным применение библиотечных элементов, внедрение графических изображений и векторных шрифтов, обработка стереозвука и использование действий языка ActionScript, обеспечивающих интерактивность и контроль над фильмами. В конце 2003 года выходит седьмая версия программы – Flash MX 2004.

В 2005 году корпорация Adobe Systems покупает компанию Macromedia за 3,4 миллиарда долларов и программа меняет свое название на Adobe Flash. В 2007 году выходит пакет Adobe Creative Suite, в состав которого включен обновленный Flash (Adobe Flash CS), который поддерживает объектно-ориентированный язык программирования ActionScript 3.0. В настоящее время это направление активно развивается, все большую популярность завоевывает Adobe Flex, основанный на технологии Flash.

В первой главе учебного пособия рассмотрены интерфейс программы Adobe Flash CS3, основные панели, временная шкала, работа с текстом и символами, публикация Flash-фильмов. Вторая глава посвящена созданию анимации типа motion tweening, shape tweening и motion path tweening, использованию слоев-масок, изучению базовых действий языка ActionScript и вопросам отладки приложений. В третьей главе описывается синтаксис языка ActionScript, типы данных, переменные, операторы, условные конструкции, циклы, функции, рассмотрены основные объекты, их методы и свойства, программное управление графическими элементами, работа со звуком и видео. Четвертая глава посвящена применению Flash для разработки мультимедийных обучающих систем. В приложении приводятся семь лабораторных заданий для самостоятельного выполнения.

Глава 1. Интерфейс программы

Область действия и рабочая область

 

Интерфейс программы Adobe Flash CS3 представлен на рис. 1. В центре экрана в белом прямоугольнике находится область действия. Здесь «оживают» элементы фильма, который впоследствии увидят зрители. Серая зона, расположенная вокруг области действия, называется рабочей областью. Элементы этой области не видны в фильме, однако в остальном возможности по работе с ними одинаковы в обеих областях.

 

Рис. 1. Интерфейс программы Adobe Flash CS3

Изменить размер области действия можно с помощью команды Document меню Modify (Ctrl + J), после чего в поля width и height ввести значения ширины и высоты в пикселах (рис. 12).

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

 

 

Слева от рабочей области находится панель инструментов (Tools). Выбор инструмента происходит при щелчке мыши по соответствующей пиктограмме или нажатием «горячей клавиши». Рассмотрим список инструментов (рис. 2): 1) стрелка (selection) (V) – выбор и перемещение объектов; 2) спецвыделение (subselection) (A) – выбор и редактирование кривых Безье; 3) свободное преобразование (free transform) (Q) – трансформирование объектов; 4) лассо (lasso) (L) – выделение произвольных областей; 5) перо (pen) (P) – рисование кривых Безье; 6) текст (text) (T) – ввод текста; 7) линия (line) (N) – рисование прямых линий; 8) прямоугольник (rectangle) (R) – рисование прямоугольников, квадратов, многоугольников; 9) карандаш (pencil) (Y) – рисование карандашом; 10) кисть (brush) (B) – рисование кистью; 11) чернильница (ink bottle) (S) – заливка контура; 12) ведро с краской (paint bucket) (K) – заливка объектов; 13) пипетка (eyedropper) (I) – взятие образцов цвета; 14) ластик (eraser) (E) – стирание областей; 15) рука (hand) (H) – «перетаскивание», или панорамирование сцены; 16) масштаб (zoom) (M, Z) – изменение масштаба просмотра;

Рис. 2. Панель инструментов

17) цвет обводки или контура (stroke color) и цвет заливки (fill color).

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

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

 

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

 

Рис. 3. Временная шкала

Для того чтобы разделить содержимое кадров, используются слои. Их можно сравнить с прозрачными пленками (келями), на которых присутствуют изображения, накладываемые друг на друга. В левой части временной шкалы расположены кнопки-пиктограммы, позволяющие отображать/скрывать слои (Show/Hide Layer), выполнять блокировку (Lock/Unlock Layer), которая запрещает редактирование слоя, удалять слой (Delete Layer) и создавать новые слои (Insert Layer). Для удобства работы слои можно объединять в группы, так называемые каталоги слоев, с помощью команды вставить папку (Insert Layer Folder).

Панели Flash

 

Как и в программе Adobe Photoshop, панели содержат дополнительные инструменты, объединенные по функциональному назначению. По умолчанию они располагаются в правой части экрана, однако с помощью мыши их можно передвинуть в другое место. Активация панелей производится через меню Windows. Рассмотрим некоторые из них:

1. Панель Align (Ctrl + K) позволяет выравнивать выбранные объекты по левому или правому краю, по верхнему или нижнему краю, по центру, по масштабу и т. д.

2. Панель Color (Shift + F9) используется для задания цветов с помощью модели RGB (рис. 4).

3. Панель Swatches (Ctrl + F9) позволяет организовать цвета текущей палитры фильма.

4. Панель Info (Ctrl + I) используется для изменения ширины и высоты выбранного объекта (параметры Width и Height), а также его положения (параметры X и Y). Внизу выводится информация о цвете выбранного объекта в формате RGB и о текущих координатах указателя мыши.

5. Панель Transform (Ctrl + T) используется для изменения масштаба объекта по вертикали и горизонтали (в процентах), а также угла поворота (Rotate) и сдвига (Skew).

6. Панель Library (Ctrl + L) отображает все символы (см. § 1.6), которые создаются и используются во Flash-фильме (рис. 5).

 

Рис. 4. Панель Color

Рис. 5. Панель Library

 

7. Подменю Common Libraries содержит стандартные наборы символов (например, Buttons (Кнопки) и Learning Interactions (Элементы интерактивного обучения)).

8. Панель Actions (F9) позволяет связывать команды ActionScript с объектами или кадрами (рис. 6).

9. Панель ActionScript 2.0 Debugger (Shift + F4) – отладчик сценариев на языке ActionScript (см. § 2.7).

Рис. 6. Панель Actions

10. Панель Movie Explorer (Alt + F3) позволяет искать объекты и элементы фильма по имени, выводить и изменять их свойства.

11. Панель Output (F2) выводит сообщения об ошибках, текущие значения переменных, заданные с помощью команды trace(), а также другую информацию во время воспроизведения Flash-фильма.

12. Панель Scene (Shift + F2) позволяет добавлять, переименовывать и удалять сцены, переходить от одной сцены к другой (см. § 3.10).

13. Панель History (Ctrl + F10) фиксирует все операции, выполняемые в течение одного сеанса работы (при закрытии документа список очищается).

14. Панель Components (Ctrl + F7) содержит набор компонентов, которые применяются при создании сложного пользовательского интерфейса (см. § 4.2).

15. Панель Component Inspector (Shift + F7) позволяет изменить параметры используемых компонентов.

Работа с текстом

 

Чтобы создать текстовый блок, необходимо использовать инструмент Text на панели Tools. Если текст в блоке предварительно выделен, то возможно изменение его параметров с помощью панели Properties (Свойства) (рис. 7). К параметрам текста относятся шрифт, размер шрифта, цвет, стиль (жирный или курсив), выравнивание, межсимвольный промежуток, ориентация текста, положение символа (обычный, надстрочный или подстрочный), автоматический кернинг (позволяет уравнивать межбуквенные расстояния), методы сглаживания шрифта.

 

Рис. 7. Свойства текста

Различают следующие виды текста:

· статический текст (Static Text) – это самый распространенный вид текста, служит для передачи информации;

· динамический текст (Dynamic Text) – этот текст может обновляться, создается таким же способом, что и статический текст;

· текстовое поле ввода (Input Text) – позволяет пользователю вводить текст с помощью клавиатуры.

Для преобразования текста в гиперссылку нужно записать адрес интернет-страницы в поле URL link, а также установить параметры в поле Target, если планируется, что фильм будет демонстрироваться на HTML-странице:

· _blank – страница отображается в новом окне браузера;

· _parent – страница отображается в родительском фрейме текущего окна;

· _self – страница отображается в том окне, где находится ссылка (задается по умолчанию);

· _top – страница отображается в верхнем фрейме текущего окна.

Работа с символами

 

Flash позволяет не только рисовать графические объекты, но и импортировать уже готовые изображения, звук или видео с помощью команды Import меню File. При этом поддерживаются такие форматы растровой графики, как Windows Bitmap (BMP/DIB), JPEG Image (JPG), Graphics Interchange Format (GIF), Portable Network Graphics (PNG), звуковые форматы MP3 и WAV, форматы видео MPEG Movie (MPG), Audio Video Interleave (AVI), Windows Media (WMV), QuickTime Movie (MOV) и др.

Растровые рисунки можно преобразовать в векторный формат с помощью команды автоматической трассировки Trace Bitmap (рис. 8). При этом задаются следующие параметры:

· пороговое значение цвета (color threshold) – определяет количество цветов, которое будет использоваться в трассированном изображении (принимает значения от 1 до 500);

· наименьшая область (minimum area) – устанавливает число рядом стоящих пикселей при рассмотрении цвета пиксела (изменяется от 1 до 1000);

· подгонка кривой (curve fit) – позволяет выбрать один из алгоритмов сглаживания контуров;

· пороговое значение угла (corner threshold) – определяет, насколько острыми будут углы векторного изображения.

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

 

Рис. 8. Трассировка растровых изображений

Созданные с помощью инструментов рисования и черчения или импортированные объекты можно объединять в группы с помощью команды Group меню Modify, предварительно выделив их с помощью инструмента Arrow. Этот процесс называется группированием.

Используя инструмент Free Transform Tool и команды подменю Transform меню Modify (а также панель Transform), можно производить различную трансформацию объектов, т. е. выполнять следующие операции:

· масштабирование объекта;

· вращение объекта;

· зеркальное отражение объекта (команды Flip Vertical и Flip Horizontal подменю Transform в меню Modify);

· искажение объекта, т. е. изменение положения его маркеров, см. рис. 9 (команда Distort подменю Transform меню Modify);

 

Рис. 9. Искажение объекта

· манипулирование конвертом изображения, т. е. рамкой вокруг изображения (команда Envelope подменю Transform меню Modify);

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

Если некоторый графический объект используется в фильме много раз, то, как правило, его преобразуют в символ. Символы хранятся в библиотеке, и при их извлечении на область действия создается копия символа, которая называется экземпляр. Панель Библиотека (Library) появляется при нажатии клавиши F11 или комбинации клавиш Ctrl + L, а также с помощью команды Library меню Window. Можно произвольно модифицировать экземпляры, при этом исходный символ в библиотеке останется неизменным.

Символ можно создать на основе произвольного предварительно выделенного графического объекта с помощью команды Преобразовать в символ (Convert to Symbol) меню Modify (горячая клавиша F8) или путем создания нового символа (команда Новый символ (New Symbol) меню Вставка (Insert), а также нажатием Ctrl + F8).

Рассмотрим три типа Flash-символов:

· графические символы (Graphics) – это статические графические объекты, содержащие векторные и растровые изображения;

· клипы (Movie Clip) – это небольшие анимационные фрагменты фильма с собственной временной шкалой, которые можно использовать в других фильмах;

· кнопки (Button) – динамические элементы, которые способны реагировать на щелчок мыши. Кнопку можно создать с помощью стандартной библиотеки кнопок (команда Common Libraries меню Window). Обычная кнопка имеет четыре вида (рис. 10):

· Up – курсор мыши не находится над кнопкой;

· Over – курсор мыши находится над кнопкой;

· Down – момент щелчка мыши;

· Hit – задание области кнопки, которая реагирует на щелчок мыши.

 

Рис. 10. Четыре состояния кнопки