Практические задания

по курсу «Отраслевая информатика» для раздела «Основы работы с Macromedia Flash»

Содержание

Введение в технологию Flash. Определение, основные возможности и составляющие технологии Flash.

Практическая работа №1. Создание пользовательского макета рабочего пространства

Практическая работа №2. Создание и редактирование объектов во Flash. Работа с текстом.

Практическая работа №3. Использование слоев и импорт изображений.

Практическая работа №4. Редактирование кадров и создание покадровой анимации.

Практическая работа №5. Автоматическое заполнение промежуточных кадров с перемещением объекта.

Практическая работа №6. Автоматическое заполнение промежуточных кадров с изменением формы объекта.

Практическая работа №7. Движение объекта по криволинейной траектории.

Практическая работа №8. Создание и редактирование символов. Работа с библиотекой символов.

Практическая работа №9. Создание вложенной анимации с использованием экземпляров символов.

Практическая работа №10. Использование специальных эффектов и фильтров

Практическая работа №11. Создание символа простой кнопки.

Практическая работа №12. Приостановка Flash-фильма.

Введение. Основные возможности и составляющие технологии Flash.

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

Технология Flash основана на использовании векторной графики в формате ShockWave Flash (SWF). Составляющими Flash-технологии являются:

· векторная графика;

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

Практическая работа №1. Рабочее пространство Flash. Интерфейс и основные панели программы

Рабочее пространство Flash представлено на рис. 1.

Рис. 1. Рабочее пространство Flash

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

1. Откройте и разместите все панели (при желании создайте из них группы панелей), которые должны быть включены в ваш пользовательский набор.
2. Выберите команду меню Window – Workspace Layout – Save Current.
3. На экране появится диалоговое окно, в котором необходимо ввести имя вновь созданного макета рабочего пространства. Введите имя, которое идентифицирует созданный вами макет, и щелкните на кнопке ОК.
4. После этого название вашего макета рабочего пространства появится в подменю Workspace Layout (команда Window – Workspace Layout).

Отредактировать макеты рабочих пространств можно при помощи диалогового окна Manage WorkSpace Layouts, которое открывается при помощи команды Window – Workspace Layouts Manage.

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

Чтобы создать новый Flash-документ, выполните следующие действия.

1. Щелкните в меню File (Файл) пункт New (Новый). В появившемся окне выберите Flash Document (Документ) и нажмите кнопку OK. При создании новых Flash-документов они открываются с настройками по умолчанию. Параметры, установленные по умолчанию, можно изменить так, чтобы все последующие документы открывались с использованием уже новых значений.
2. В открытом документе щелкните на сцене, после чего в инспекторе свойств появятся свойства сцены. На этой панели можно, например, изменить размер сцены, щелкнув на кнопке Size (Размер). Откроется диалоговое окно Document Properties (Свойства документа), в котором в текстовых полях Dimensions (Размеры) можно установить необходимые размеры сцены в пикселях. В этом же окне в текстовом поле Title (Заголовок) можно ввести заголовок для вашего документа, а в поле Description (Описание) - его краткое описание.
3. Установите в поле Frame Rate (Частота смены кадров) инспектора свойств значение 21. Закройте диалоговое окно свойств документа.
4. На панели инспектора свойств щелкните на цветовой палитре Background (Фон) и выберите цвет фона.
5. Закройте диалоговое окно настройки публикации.

Выберите в основном меню команду File – Save As (Файл – Сохранить как). Откроется диалоговое окно Save As, в котором можно выбрать папку для хранения ваших документов и ввести название файла для только что созданного документа.

Практическая работа №2. Создание и редактирование объектов во Flash

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

• Selection (Выделение) позволяет выбрать нужный объект, чтобы осуществить с ним какие-то действия;
• Subselection (Частичное выделение) используется для произвольного изменения формы объекта, выгибания и растягивания линий;
• Free Transform (Свободное преобразование) позволяет изменять форму объекта в любом направлении: изгибать его, поворачивать произвольным образом;
• Gradient Transform (Преобразование градиента) служит для изменения градиентной заливки;
• Line (Линия) служит для рисования прямых линий;
• Lasso (Лассо) используется для выделения областей произвольной формы;
• Реn (Перо) создает прямые или изогнутые сегменты линий, регулирует величину угла, длину прямых и наклон изогнутых сегментов;
• Text (Текст) создает текст;
• Oval (Овал) используется для рисования овалов;
• Rectangle (Прямоугольник) используется для рисования прямоугольников;
• Pencil (Карандаш) используется для рисования произвольных линий, подобно тому, как это делается обычным карандашом;
• Brush (Кисть) выводит штрихи, позволяет создавать специальные эффекты, включая каллиграфические эффекты и раскрашивание импортированного точечного рисунка;
• Ink Bottle (Чернильница) используется для заливки твердым цветом линий или окантовки, заполненных цветом форм, линиями, если они таковой не имеют;
• Paint Bucket (Заливка) заполняет цветом области, ограниченные линиями;
• Eyedropper (Пипетка) используется для определения заливки или настроек линии (цвет, стиль, ширина) одной формы для того, чтобы им можно было применить их к другой форме или линии;

· Eraser (Ластик) используется для стирания линий и заливки.

Ниже инструментов рисования находятся инструменты управления видом – инструмент Hand Tool (Рука), которым можно перемещать рабочую область, и Zoom Tool (Лупа), увеличивающая или уменьшающая вид изображения. Ниже расположены инструменты выбора основного цвета и заливки, а в самом низу панели инструментов расположена область опций, меняющая свой состав в зависимости от выбранного объекта.

Одним из отличительных свойств технологии Flash является использование векторной графики. Нарисованные векторные объекты называются формами. Форма состоит из контура и заливки. Контур и заливка могут быть изменены независимо друг от друга.

1. Создайте новый Flash-документ.
2. Выберите инструмент Oval (Овал).
3. Установите курсор в предполагаемый левый верхний угол объекта и, нажав левую кнопку мыши, перемещайте курсор до предполагаемого правого нижнего угла объекта, после чего отпустите кнопку мыши.
4. Выберите инструмент Selection (Выделение).
5. Щелкните один раз на фигуре. Сейчас выделена только заливка, а контур остался невыделенным. Выделите контур двойным щелчком. Чтобы выделить всю фигуру, дважды щелкните на ее внутренней области.
6. Используя панель Properties (Свойства), измените цвет, толщину и тип контура, цвет заливки, размеры объекта и его координаты.

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

7. Чтобы избежать нежелательного изменения форм и линий, их нужно сгруппировать. Для этого выделите весь объект двойным щелчком на нем, войдите в меню Modify (Модификация), выберите команду Group (Группировать).

Рис. 2. Сгруппированный объект.

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

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

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

Существует несколько базовых понятий, которые необходимо знать для успешного использования текстовых полей в ваших проектах. Flash поддерживает три вида текста: статический (static text), динамический (dynamic text) и вводимый (input text). Динамические поля и поля ввода будут рассматриваться во второй главе данного учебного пособия, а в большинстве случаев используется статический текст. Термин «статический текст» (static text) означает текст, размещаемый в проекте для отображения какой-либо информации, но не допускающий модификацию и управление им при помощи кода.

Далее перечислены четыре основных этапа создания статического текста в проекте Flash.

1. Выберите инструмент Text (Текст), щелкнув на кнопке Text (Текст) на панели инструментов.

2. Убедитесь, что на панели инспектора свойств в списке для выбора типа текста установлено значение Static Text (Статический текст).

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

4. После того как статическое текстовое поле успешно создано, его можно будет перемещать по сцене инструментом Selection (Выделение). Также можно выделять поле и модифицировать текст при помощи инструмента Text (Текст).

Изменение шрифта и свойств шрифта в текстовых полях Flash осуществляется точно так же, как в большинстве других приложений. Если выделить все текстовое поле инструментом Selection (Выделение), то можно будет модифицировать весь содержащийся в нем текст. Для того чтобы модифицировать только часть текста в поле, выделите нужные символы инструментом Text (Текст). В любом случае шрифт и свойства шрифта настраиваются в инспекторе свойств, внешний вид которого приведен на рис. 3.

Рис. 3. Настройка параметров текстовых полей в инспекторе свойств

К сожалению, во Flash невозможно создать текст, который следует вдоль кривой, однако такой текст можно создать в другой программе, например Freehand или Illustrator, а затем импортировать его в виде контуров в документ Flash.

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

Рис. 4. Изменение размеров текстового поля

Помимо этого, для трансформации текста можно применять инструмент Free Transform (Свободная трансформация), однако его нужно использовать с осторожностью, т.к. Flash будет масштабировать шрифт одновременно с текстовым полем. Единственным исключением из этого правила является ситуация, когда в текстовом поле используются системные шрифты (device fonts) – то есть шрифты с клиентского компьютера.

Обратите внимание на команду меню Modify – Break Apart (Модификация – Разбить), которая позволяет разбить общее поле на отдельные текстовые поля для каждого символа. Данная команда является универсальной и в конечном итоге от любых объектов оставляет только заливки и линии. Таким образом, применив такую команду к тексту дважды, можно получить текст в виде фигур, контуры и свойства которых легко изменить, получив тем самым интересные эффекты. Но следует учитывать, что обратное преобразование невозможно.

Сохраните Flash-документ.

Практическая работа №3. Использование слоев и импорт изображений

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

Управление слоями осуществляется в стеке слоев, который находится слева от панели Timeline (Временная шкала), а также при помощи небольшой панели инструментов прямо под ним:

• чтобы вставить слой, щелкните на кнопке Insert Layer (Вставить слой). Новый слой вставляется поверх активного;
• чтобы переименовать слой, дважды щелкните на его метке и введите новое название. Нажмите клавишу Enter или щелкните в любом месте окна Flash, чтобы установить новое название;
• чтобы изменить порядок следования слоев, перетаскивайте слои, щелкая кнопкой мыши на названии. Перетащите слой между двумя слоями, где он должен оказаться в итоге, и отпустите кнопку мыши;

· чтобы удалить слой и все его содержимое, выделите слой и щелкните на кнопке Delete Layer (Удалить слой).

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

1. Создайте новый Flash-документ.
2. Выберите команду File – Import – Import to Stage (Файл – Импорт – Импортировать в сцену).
3. Найдите какой-либо графический файл (например, фотографию), выделите его и щелкните на кнопке Open (Открыть).
4. Щелкните на кнопке ОК.

Кроме того, импортированное растровое изображение можно редактировать:

1. Разбейте растровое изображение командой Modify – Break Apart (Модификация – Разбить).

2. 

   
   Выберите инструмент Eraser (Ластик) и сотрите часть растрового изображения.
3. Сохраните Flash-документ.

Рис. 5. Импортированное и отредактированное растровое изображение на первом слое Layer 1.

Практическая работа №4. Редактирование кадров и создание покадровой анимации

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

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

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

Рис. 6. Обозначения кадров на временной шкале.

• Ключевой кадр (Keyframe). Ключевым является кадр, содержимое которого может отличаться от содержимого предыдущего или последующего кадров. На временной шкале ключевые кадры с определенным содержимым обозначаются сплошными (черными) кружками.
• Пустой ключевой кадр (Blank keyframe). Это ключевой кадр, который ничего не содержит, но ведет себя как обычный ключевой кадр. На временной шкале такой кадр отмечается пустым (белым) кружком.
• Последовательность кадров (Frame span). Последовательность кадров представляет собой отрезки от начального до заключительного кадра (или до следующего справа ключевого кадра, но не включая его), которые отделены друг от друга вертикальными линиями. Такую последовательность еще называют промежуточными кадрами.
• Заключительный кадр (Endframe). Последний кадр последовательности; он помечен пустым прямоугольником и вертикальной линией с правой стороны от прямоугольника;
• Сгенерированные кадры. Автоматически заполненные кадры с промежуточными положениями объектов. Обозначаются синей или зеленой стрелками на последовательности.

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

Для этого проделайте следующее.

1. Создайте новый Flash-документ.
2. Выберите инструмент Brush (Кисть) или Pencil (Карандаш) и нарисуйте на рабочей области первую букву слова.
3. Нажмите на клавиатуре клавишу F6, после чего на временную шкалу будет добавлен еще один ключевой кадр. Обратите внимание, что после данной операции второй ключевой кадр будет иметь такое же содержимое (букву), что и в первый кадр.
4. Во втором кадре с помощью кисти нарисуйте на рабочей области второю букву.
5. Снова нажмите клавишу F6, добавив еще один ключевой кадр. В новом кадре измените содержимое, дописав следующую букву слова.
6. Повторите последнее действие столько раз, пока слово не будет написано целиком. Временная шкала при этом должна выглядеть как на рис. 7.
7. Проиграйте получившуюся анимацию, воспользовавшись командой Control – Test Movie (Управление – Воспроизведение). Или используйте сочетание клавиш Ctrl + Enter.
8. Сохраните Flash-документ.

Рис. 7. Покадровая анимация с последовательным расположением ключевых кадров на временной шкале.

Практическая работа №5. Автоматическое заполнение промежуточных кадров с перемещением объекта

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

Для создания анимации движения объекта проделайте следующее.

1. Создайте новый Flash-документ.
2. Поместите векторную фигуру в первый ключевой кадр (например, прямоугольник).
3. Выделите фигуру полностью и сгруппируйте ее элементы с помощью меню Modify – Group (Модификация – Группировка). Фигура выделится синей рамкой.
4. Выделите на временной шкале произвольный удаленный кадр, например, № 20. Нажмите F6, создав, таким образом, второй ключевой кадр. Промежуток между двумя ключевыми кадрами автоматически заполняется последовательностью промежуточных кадров.
5. В последнем кадре переместите фигуру в новое положение.
6. Выделите щелчком первый кадр и найдите в панели Properties (Свойства) пункт Tween (Вырисовка). Выберите в нем пункт Motion (Движение), после чего на промежуточных кадрах появится стрелка на синем фоне. Задайте дополнительный параметр анимации в окне инспектора свойств – Ease (Ускорение).
7. Используйте слои для создания одновременного перемещения нескольких объектов, либо продолжите последовательность на временной шкале в текущем слое, чтобы продолжить анимацию.
8. Проиграйте получившуюся анимацию.
9. Сохраните Flash-документ.

Рис. 8. Простая анимация движения объектов с автоматическим заполнением кадров на временной шкале

Практическая работа №6. Автоматическое заполнение промежуточных кадров с изменением формы объекта

Для трансформации элементов из одной формы в другую можно применять так называемый морфинг, или трансформацию формы. Трансформация формы применяется путем определения начального и конечного состояний элемента в двух различных ключевых кадрах на одном слое. Однако получить данную анимацию можно только при использовании нарисованных на сцене векторных изображений. А это означает, что символы и текст необходимо предварительно разбить командой Modify – Break Apart (Модификация – Разбить), преобразовав их в набор заливок и линий.

Для создания анимации морфинга проделайте следующую последовательность действий.

1. Создайте новый Flash-документ.
2. Поместите векторную фигуру в первый ключевой кадр (например, прямоугольник).
3. Выделите на временной шкале произвольный удаленный кадр, например, № 20. Нажмите F7, создав, таким образом, пустой ключевой кадр. Промежуток между двумя ключевыми кадрами автоматически заполняется последовательностью промежуточных кадров.
4. В последнем ключевом кадре нарисуйте новую фигуру (например, овал другого цвета).
5. Выделите щелчком первый кадр и найдите в инспекторе свойств пункт Tween (Вырисовка). Выберите в нем пункт Shape (Форма), после чего на промежуточных кадрах появится стрелка на зеленом фоне.
6. Задайте дополнительные параметры анимации в окне инспектора свойств – Ease (Ускорение) и Blend (Смешивание), которые отвечают за скорость воспроизведения и вид преобразования фигур.

7. 

   
   Проиграйте получившуюся анимацию.
8. Сохраните Flash-документ.

Рис. 9. Простая анимация изменения формы объекта с автоматическим заполнением кадров на временной шкале

Практическая работа №7. Движение объекта по криволинейной траектории

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

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

1. Создайте новый Flash-документ.
2. Нарисуйте в первом ключевом кадре стрелку или треугольник.
3. Полностью выделите объект и сгруппируйте ее элементы с помощью меню Modify – Group (Модификация – Группировка).
4. Выделите на временной шкале произвольный удаленный кадр, например, № 20. Нажмите F6, создав второй ключевой кадр. Промежуток между двумя ключевыми кадрами автоматически заполнится последовательностью промежуточных кадров.
5. В последнем кадре переместите объект в новое положение.
6. Выделите щелчком первый кадр и найдите в панели Properties (Свойства) пункт Tween (Вырисовка). Выберите в нем пункт Motion (Движение).
7. В стеке слоев на монтажной линейке выберите слой с объектом, который необходимо переместить по определенной траектории.

8. 

   
   В нижней части стека слоев щелкните левой клавишей мыши на кнопке Add Motion Guide (Добавить направляющую движения). Над выбранным слоем появится новый слой с названием Guide:<имя выбранного слоя>. Напротив названия слоя появится значок направляющей движения. Название выбранного слоя немного сдвинется вправо (Рис. 10).

Рис. 10. Добавление направляющего слоя.

1. На панели инструментов выберите инструмент Pencil (Карандаш).
2. Выберите на временной шкале направляющий слой и нарисуйте на сцене траекторию, по которой объект будет двигаться. Линия, созданная на направляющем слое, играет роль траектории, по которой будет перемещаться объект подсоединенного слоя.
3. Выберите в основном меню команду View – Snapping – Snap to Objects (Вид – Выравнивание – Выравнивание по объектам). Чтобы элемент двигался по определенной траектории, точка преобразования этого элемента (небольшое кольцо внутри объекта) должна находиться на этой траектории. Команда Snap to Objects поможет правильно расположить промежуточные изображения.
4. В первом ключевом кадре с помощью инструмента Selection (Выделение) перетащите объект за его точку преобразования так, чтобы она попала на начало траектории.
5. В последнем ключевом кадре перетащите объект за его точку преобразования так, чтобы она попала на конец траектории. Промежуточные изображения будут созданы заново так, чтобы графический элемент двигался по нарисованной траектории.
6. В нижней части временной шкалы щелкните на кнопке Onion Skin (Калькирование), чтобы одновременно отобразить все кадры анимации движения объекта.
7. Выберите на временной шкале в слое с объектом первый ключевой кадр.
8. На панели Properties установите флажок Orient to Path (Ориентировать по траектории). Промежуточные изображения будут перерисованы в соответствии с траекторией (Рис. 11).
9. Проиграйте получившуюся анимацию.
10. Сохраните Flash-документ.

Рис. 11. Движение стрелки по криволинейной траектории.

Практическая работа №8. Создание и редактирование символов

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

Импортированные звуковые файлы, видеофайлы, растровые и векторные изображения или символы шрифтов автоматически сохраняются в библиотеке. Кроме того, существует три основных типа символов-контейнеров, которые могут быть созданы в среде разработки Flash: Movie Clip (Видеоклип), Graphic (Графический символ) и Button (Кнопка). Все они имеют свою собственную временную шкалу, которая может содержать изображения, звук, текст или даже другие символы. Символы типа Movie Clip представляют собой отдельные фильмы вне основного фильма. Они используются для анимации, которая воспроизводится независимо от главной временной шкалы, и являются одними из наиболее часто используемых символов.

Созданные символы хранятся в библиотеке Flash-документа. В ней хранятся также импортированные файлы, включая звуковые, растровую графику и анимацию. Библиотека представляет собой хранилище всех повторно используемых элементов. Панель Library (Библиотека) активного документа используется для получения доступа к элементам библиотек всех открытых в текущий момент документов Flash (Рис. 12). Чтобы открыть панель библиотеки, выберите команду Windows – Library (Окно – Библиотека) или нажмите комбинацию клавиш Ctrl + L.

Рис. 12. Библиотека Flash-документа.

Для создания нового символа необходимо выбрать из меню приложения команду Insert – Create New Symbol (Вставка – Создать новый символ). В появившемся диалоговом окне Create New Symbol (Создать новый символ) задается имя образца данного символа в библиотеке, а в группе Туре (Тип) – тип будущего символа. После нажатия кнопки OK символ появится в библиотеке, а на рабочей области будет отображена его временная шкала.

Рис. 13. Окно создания символа.

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

Для преобразования содержимого в символ выделите требуемые объекты с помощью инструмента Selection (Выделение) (не забывайте о том, что векторные фигуры состоят из линий и заливок, поэтому необходимо выделять их одновременно) и выберите из меню приложения команду Modify – Convert to Symbol (Модификация – Преобразовать в символ) или нажмите на клавиатуре клавишу F8. После этого в окне Convert to Symbol (Преобразовать в символ) задайте те же параметры, что и в окне Create New Symbol (Создать новый символ), и нажмите кнопку OK. Выделенный объект будет преобразован в символ, после чего можно будет перейти к его редактированию.

Редактирование символов можно осуществлять несколькими способами. Очень удобен режим редактирования символа на месте Edit in Place (Правка на месте). Его преимущество заключается в том, что вместо перехода в режим редактирования символов можно просто редактировать символ в контексте всего фильма. При этом все остальные элементы, представленные в текущем кадре, остаются видимыми, но недоступными. Для использования данного режима необходимо выделить экземпляр символа на рабочем поле, а затем выбрать из меню команду Edit – Edit in Place (Правка – Правка на месте), или просто дважды щелкнуть на экземпляре символа на рабочем поле. При этом на временную шкалу выводятся кадры выбранного символа, а на рабочей области отображается его содержимое. Поскольку в символе может быть несколько таких вложений, возникает проблема – как узнать, где вы находитесь в настоящий момент: на основном рабочем поле или в режиме редактирования одного из вложенных символов? На этот случай существует подсказка: в верхней части окна документа расположена панель инструментов Edit Bar (Редактирование), левая часть которой представляет собой область меток местонахождения.

Рис. 14. Метки местонахождения панели инструментов Edit Bar (Редактирование)

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

1. Создайте новый Flash-документ.
2. Нарисуйте на рабочей области произвольный объект, например, прямоугольник. Выделите его и, нажав клавишу F8, преобразуйте в символ клипа Movie Clip.
3. Дважды щелкните по полученному клипу, чтобы перейти в режим редактирования.
4. Создайте на временной шкале анимацию трансформации формы объекта.
5. Вернитесь на основную сцену, щелкнув по маркеру Scene 1 на панели Edit Bar или дважды щелкнув по свободному месту рабочего поля. Убедитесь, что на временной шкале основной сцены находится всего один кадр. Запустите предварительный просмотр. Анимация будет проигрываться внутри созданного клипа.
6. На временной шкале основной сцены создайте анимацию движения, как в рассмотренных ранее примерах. Проиграйте получившуюся анимацию.
7. Сохраните Flash-документ.

Практическая работа №9. Создание вложенной анимации с использованием экземпляров символов

Рассмотрим пример на использование нескольких экземпляров символов. Для этого создадим анимацию едущего автомобиля с крутящимися колесами.

1. Создайте новый Flash-документ.
2. Нарисуйте изображение колеса автомобиля, выделите его целиком и преобразуйте в клип Movie Clip.
3. Дважды щелкните по полученному клипу, чтобы перейти в режим редактирования. В данном клипе необходимо создать эффект вращения колеса, который можно достичь несколькими способами. Например, сгруппируйте изображение колеса, а затем создайте анимацию движения. Для того чтобы колесо вращалось на месте, не перемещайте его в последнем ключевом кадре, а в свойствах первого кадра укажите параметр Rotate (Вращение) по часовой стрелке (CW) или против (CCW) с указанием числа оборотов.
4. Вернитесь на основную сцену, щелкнув по маркеру Scene 1 на панели Edit Bar или дважды щелкнув по свободному месту рабочего поля.
5. Для создания автомобиля понадобится два колеса, но поскольку его образец хранится в библиотеке, отпадает необходимость создавать еще один такой же клип, достаточно открыть окно библиотеки и перетащить уже существующий на рабочее поле.
6. На основной сцене нарисуйте кузов автомобиля и совместите его с колесами.
7. Теперь необходимо заставить автомобиль двигаться. Для этого выделите все объекты на рабочей области (кузов и два колеса) и еще раз преобразуйте их в клип. В результате получим новый цельный клип, который будет включать в себя все эти три объекта.
8. На основной сцене создайте анимацию движения с перемещением цельного клипа (всего автомобиля).
9. Проиграйте получившуюся анимацию и убедитесь в том, что автомобиль передвигается одновременно с вращением колес.
10. Сохраните Flash-документ.

Практическая работа №10. Использование специальных эффектов и фильтров

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

Рис. 15. Цветовые эффекты клипа

• None (Нет). При этом не применять ни один эффект;
• Brightness (Яркость). Регулирует относительную яркость экземпляра. Значения варьируются от -100 % (черный) до 100 % (белый);
• Tint (Оттенок). Позволяет изменять цвет экземпляра;
• Alpha (Коэффициент прозрачности). Позволяет изменять прозрачность экземпляра в процентном отношении с помощью ползунка или поля ввода. Значения варьируются от 0 % (полностью прозрачный) до 100 % (непрозрачный);
• Advanced (Сложный). При выборе опции Advanced в меню Color Styles справа от раскрывающегося списка цветовых эффектов появляется кнопка Settings (Установки). Эта кнопка вызывает диалоговое окно Advanced Effect (Сложный эффект), которое позволяет настраивать как оттенок, так и прозрачность экземпляра.

Помимо цветовых эффектов на панели инспектора свойств есть закладка Filters (Фильтры), позволяющая добавлять различные визуальные эффекты к выделенным символам (рис. 16). Для добавления нового эффекта в левой части панели щелкните на значке «+» и выберите один из семи доступных эффектов, например, Drop Shadow (Отбрасывание тени) или Bevel (Фаска). После этого настройте параметры эффекта с помощью элементов управления, появившихся в правой части панели.

Рис. 16. Добавление фильтров

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

1. Создайте новый Flash-документ.
2. Импортируйте растровое изображение на рабочую область, выделите его и преобразуйте в клип.
3. Выделите произвольный кадр на линейке временной шкалы, нажмите клавишу F6, создав, таким образом, второй ключевой кадр.
4. Выделите во втором ключевом кадре клип и выберите на панели инспектора свойств в списке Color (Цветовой эффект) параметр Alpha (Прозрачность), установив его значение в 0 %.
5. Выделите первый кадр на временной шкале и в инспекторе свойств в списке Tween (Вырисовка) выберите пункт Motion (Движение).
6. Запустите предварительный просмотр и убедитесь, что в полученной анимации мы получили исчезающее изображение.
7. Добавьте новый слой, импортируйте в него еще одно изображение и проделайте с ним те же самые манипуляции, что и с первым, только установив значение прозрачности 0 % не в последнем, а в первом кадре. Таким образом, мы получим анимацию плавного перетекания одного изображения в другое, которая достигается убавлением прозрачности одного изображения с одновременным добавлением прозрачности другого.
8. Сохраните Flash-документ.

Рис. 17. Расположение кадров в анимации

Практическая работа № 11. Создание символа простой кнопки

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

Рис. 18. Временная шкала кнопки

• Up (Отпущено). Элементы, помещенные в этот ключевой кадр, будут ассоциироваться с кнопкой, расположенной на рабочем поле, только тогда, когда взаимодействия мыши с кнопкой не происходит (т.е. курсор мыши не находится над кнопкой).
• Over (Позиционировано). Помещенные в этот ключевой кадр элементы будут ассоциироваться с кнопкой только тогда, когда вы наводите на кнопку курсор мыши. Как только курсор будет удален из области кнопки, она возвратится в состояние Up.
• Down (Нажато). Элементы, помещенные в этот ключевой кадр, будут ассоциироваться с кнопкой только в том случае, если вы щелкнете на символе кнопки и будете удерживать кнопку мыши. Как только вы отпустите кнопку мыши, она возвратится в состояние Over.
• Hit (Активная зона). Этот ключевой кадр никогда не отображается на рабочем поле, однако он определяет область кнопки, чувствительную к воздействию мыши. Какая бы фигура ни присутствовала в этом кадре, она рассматривается как активная зона символа кнопки. Важно отметить, что активная зона не должна содержать никаких отверстий и промежутков, если в этом нет необходимости. Например, если кнопка представляет собой текст, то для кадра Hit лучше всего использовать сплошной прямоугольник, который по ширине и высоте будет соответствовать текстовому блоку. Использование в кадре Hit обычного текста приведет к следующему: активная зона кнопки будет задана так, что при попадании курсора мыши между буквами кнопка возвратится в состояние Up, в результате чего вы не сможете щелкнуть по ней.

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

1. Создайте новый Flash-документ.

2. Выберите в основном меню команды Insert – New Symbol (Вставка – Создать символ).

3. Введите имя в поле Name (Имя), установите переключатель Type (Тип) в положение Button (Кнопка) и щелкните на кнопке ОК.

4. Выберите на временной шкале кадр Up (Отпущено).

5. Создайте на сцене какой-нибудь графический элемент.

6. Выберите на временной шкале кадр Over (Позиционировано).

7. Выберите в основном меню команду Insert – Timeline – Keyframe (Вставка – Временная шкала – Ключевой кадр). Появится ключевой кадр с копией содержимого первого ключевого кадра. Теперь можно внести незначительные изменения в изображение кнопки, чтобы отобразить ее состояние Over, например, увеличить ее размер.

8. Выберите на временной шкале кадр Down (Нажато).

9. Выберите в основном меню команду Insert – Timeline – Keyframe (Вставка – Временная шкала – Ключевой кадр). Появится ключевой кадр с копией содержимого первого ключевого кадра. Теперь можно внести незначительные изменения в изображение кнопки, чтобы отобразить ее состояние Down, например, изменить ее цвет, чтобы она выглядела нажатой.

10. После того как все три состояния кнопки созданы, необходимо определить активную область кнопки. Выберите на временной шкале кадр Hit (Активная зона).

11. Выберите в основном меню команду Insert – Timeline – Keyframe (Вставка – Временная шкала – Ключевой кадр), чтобы продублировать содержимое ключевого кадра Down. Если вы использовали для всех трех состояний кнопки графику одного размера и формы, можно смело использовать копию содержимого любого предыдущего кадра для кадра Hit.

12. Если хотите, можете воспользоваться инструментом Paint Bucket (Ведро с краской) для заливки изображения кадра Hit одним цветом. Это действие необязательно, но оно напомнит вам о том, что данное изображение необходимо с технической точки зрения, и пользователи в готовом ролике его не увидят.

13. Выберите в основном меню команду Edit – Edit Document (Правка – Правка документа). Вы вернетесь к основной временной шкале. Теперь можно использовать символ кнопки так же, как и любой другой символ.

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

1. Нарисуйте на рабочем поле простую фигуру (прямоугольник или овал), выделите ее полностью (заливку и контур) и преобразуйте в символ кнопки.
2. Двойным щелчком по кнопке зайдите в режим редактирования и добавьте нажатием клавиши F6 еще два ключевых кадра (кадры Over и Down). Переведите воспроизводящую головку на кадр Over.
3. Выделите на рабочем поле содержимое кадра Over и преобразуйте в символ клипа. Зайдите двойным щелком мыши в режим редактирования данного клипа и добавьте на его временной шкале анимацию морфинга.
4. Вернитесь на главную сцену щелчком на метке Scene1 панели Edit Bar.
5. Запустите предварительный просмотр в плеере. Убедитесь, что при наведении курсора мыши на кнопку она автоматически переключается во второй кадр, в котором начинает воспроизводиться анимация и создается иллюзия «живой» кнопки.

Четвертый кадр кнопки, или Hit (Активная зона), позволяет создавать так называемые прозрачные кнопки. Они бывают весьма полезны в том случае, если необходимо задать активную область не всего элемента, а только его части, например, фрагмента рисунка или слова в текстовом поле. Для создания прозрачной кнопки проделайте следующее.

1. Нарисуйте на рабочем поле простую фигуру (прямоугольник или овал), выделите ее полностью (заливку и контур) и преобразуйте в символ кнопки.
2. Двойным щелчком по кнопке зайдите в режим редактирования.
3. Щелкните на первом кадре, чтобы его выделить, затем повторно нажмите левую клавишу мыши и перетащите первый кадр в четвертый (рис. 19).
4. Вернитесь на главную сцену щелчком на метке Scene1 панели Edit Bar. Поскольку внутри кнопки содержится только активная область, на рабочей области она будет показана синим полупрозрачным цветом (рис. 20).
5. Перетащите кнопку поверх того элемента, который хотите сделать активным, и запустите предварительный просмотр. Изображение кнопки будет невидимым, но при наведении на активную область курсор мыши изменится на пиктограммы руки, так, как он изменяется при наведении на обычную кнопку.
6. Сохраните Flash-документ.

Рис. 19. Расположение кадров на временной шкале при создании прозрачной кнопки

Рис. 20. Отображение прозрачной кнопки в проекте

Практическая работа №12. Приостановка Flash-фильма

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

1. Откройте Flash-документ с анимацией едущего автомобиля (Практическая работа №9).

2. Выделите последний ключевой кадр.

3. Откройте панель Actions (Действия), выбрав в основном меню команду Window – Actions (Окно – Действия). В строке заголовка панели Actions появится название Actions-Frame (Кадр с действиями).

4. На панели инструментов Actions (Действия) щелкните на категории Global Functions (Глобальные функции).

5. Щелкните на категории Global Functions (Глобальные функции) и на подкатегории Timeline Control (Управление временной шкалой). Появится список действий управления проигрыванием фильма.

6. Чтобы добавить действие, приостанавливающее воспроизведение фильма, дважды щелкните на действии Stop.

7. Проиграйте Flash-фильм и убедитесь в том, что он останавливается в последнем кадре.

8. Сохраните Flash-документ.

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

1. Борисенко А.А. Flash 8. Просто как дважды два. – М.: Эксмо, 2006.

2. Заседатель В.С. Создание образовательных ресурсов в Macromedia Flash: от идеи до издания. Учебно-методический комплекс. – Томск, 2007.

3. Рейнхардт Р., Сноу С. Macromedia Flash 8. Библия пользователя.: Пер. с англ. – М: Вильямс, 2006. – 1328 с.

Дата добавления: 2015-11-14