Создание анимации в программе Macromedia Flash (стр. 3 )

Рис. 18 Трансформация радиального градиента

Рис. 19 Трансформация линейного градиента

Практическая работа «Создание и редактирование градиентов».

Задание 1. Создайте градиенты для заливки изображений (рис. 20)

а) Море	б) «Волнистая» поверхность	в) Свеча
Рис 20. Градиентные заливки

Рекомендации к выполнению:

а) Море (переход от темно-синего к светло-голубому)

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

б) «Волнистая» поверхность. Используем тот же самый градиент, но уменьшим ширину градиентной заливки при помощи инструмента Gradient Transform, а затем изменим значение параметра Overflow.

Рис. 21. Вид панели Color Mixer при создании градиента для раскрашивания моря.	Рис.22. Вид панели Color Mixer при создании градиента для раскрашивания «волнистой» поверхности

в) Свеча

Для закрашивания языков пламени создайте градиент, содержащий красно-оранжево-желтые оттенки. При использовании инструмента Заливка проследите, чтобы модификатор Lock Fill не был включен.

Задание 2. Нарисуйте картинки (рис. 23).

Рекомендации к выполнению:

Рыбка. При раскрашивании плавников модификатор Lock Fill должен быть выключен.

а) Рыбка	б) Елка	в) Объемные фигуры
Рис. 23. Задания для самостоятельной работы

Елка. Создайте градиент с плавным переходом зеленых оттенков, как на рис. Нарисуйте елку инструментом Brush (Кисть): сначала более толстой кистью основные ветки, потом более тонкой – остальные. Самой тоненькой кисточкой можно нарисовать даже отдельные иголочки.

Рис. 24. Вид панели Color Mixer при создании градиента для рисования елочки

Задание 3: создать изображения красивых елочных игрушек – шарики, сосульки, полумесяцы, звездочки и т. д. Раскрасить красиво градиентными заливками, в т. ч. созданными самостоятельно. (Это заготовки для будущей работы с символами). Постарайтесь, чтобы игрушки выглядели объемными. Примеры игрушек показаны на рис. 25.

а) шар	б) бант	в) звезда	г) ягодка
Рис.25 Елочные игрушки

Библиотеки

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

Рис.26 Окно библиотеки фильма

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

Кнопки, расположенные в нижней части окна библиотеки, позволяют добавить в библиотеку символ (кнопка New Symbol), новую папку (кнопка New Folder); открыть окно свойств выбранного объекта (Properties); удалить выбранный объект (Delete).

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

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

Общие библиотеки (Common Libraries)- это встроенные библиотеки Flash. В группу общих библиотек входит библиотека Buttons (Кнопки) - набор готовых символов-кнопок, а также элементов кнопок, которые вы можете поместить в свой фильм.

Чтобы открыть общую библиотеку, нужно в меню Window выбрать Common Libraries, а в нем - имя нужной библиотеки. При вставке символа из общей библиотеки в фильм он (символ) автоматически помещается в библиотеку фильма.

Использование импортированной графики

Поговорим об использовании импортированной графики во Flash. Для чего она нужна? А нужна она, потому, что в фильме чаще используют уже готовые рисунки: фотографии, фоны, шаблоны, собственные заготовки, чем собственноручно созданные изображения. Поместим изображение в наш фильм. Воспользуемся командой
File ->Import -> Import to Stage, в появившемся стандартном диалоге выберем требуемый файл. Импортируемое изображение будет вставлено в сцену (и одновременно помещено в библиотеку фильма). Используя «мышь» Вы можете поместить его в нужное место. Еще один вариант импортирования изображения - через буфер обмена. Предположим, вы создали (или открыли) нужное изображение в каком-либо графическом редакторе (Photoshop, Corel Draw и т. п.). Выделите нужную область, скопируйте в буфер обмена, вставьте во Flash из буфера обмена командой Paste контекстного меню. Изображение будет помещено на рабочий стол (и, опять же, в библиотеку).

Использование растровой графики в качестве заливки

Если вы хотите использовать растровую графику (форматы: bmp, jpg, gif…) в качестве заливки то в палитре Color Mixer следует выбрать способ заливки - Bitmap. Перед вами появится диалоговое окно Import to Library (импортировать в библиотеку). Выберите нужный вам файл, и он тут же попадает в библиотеку вашего фильма. Можно использовать другой способ: в меню File выберите раздел Import to Library и разместите в библиотеке фильма необходимые вам для работы растровые изображения. Все они будут отображаться в палитре Color Mixer в виде пиктограмм при выборе способа заливки Bitmap.

Работа с импортированным изображением. Разбивка изображения

С ним можно произвести следующие действия:

1.  Разбивка изображения.

Можно «разбить» его на отдельные области с определенным цветом командой Modify -> Break Apart. Затем выделить область с нужным цветом «волшебной палочкой» – один из модификаторов инструмента Lasso - Magic Wand, имеющей следующие параметры:

Threshold (пороговое значение) – определяет, насколько близкие по цвету прилежащие друг к другу пиксели должны быть включены в выделенную область. Чем выше это значение, тем более «мягкое» получается выделение (охватывается большее количество соседних пикселей, разных по цвету). Если для этого параметра ввести значение 0, в область выделения попадут только пиксели с абсолютно идентичным цветом.

Smoothing (сглаживание) – определяет, насколько сильно сглаживать края изображения.

Чтобы настроить параметры «волшебной палочки», выберите на панели инструментов инструмент Lasso, затем в группе Options – модификатор Magic Wand Settings.

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

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

Используя такое «разбитое изображение» или часть разбитого изображения, вы сможете использовать его в качестве заливки любой замкнутой фигуры. Для этого выберите инструмент Eyedropper (Пипетка) и щелкните им по изображению. При этом инструмент устанавливает текущей заливкой данное изображение и делает инструмент Paint bucket (Заливка) активным. Теперь вы можете работать с помощью инструмента Bruch (Кисть) или Paint Bucket (Заливка).

Пример. Пусть для создания электронной поздравительной открытки «С днем рождения!» требуется поместить фото именинника в красивую рамочку. Подходящую рамочку вы уже нашли в коллекции картинок для Microsoft Office, и вставили ее в документ Word. Нам нужно импортировать в программу Flash оба изображения, наложить рамку на фото, подогнав размеры, и обрезать углы фотографии, выглядывающие из под контура рамки. Порядок действий будет таким:

Рис.27 Рамочка и фото.

1. Выделите в документе Word изображение рамочки и скопируйте его в буфер обмена.

2. Откройте фильм Flash и вставьте изображение рамки на рабочее поле. Чтобы быть уверенным в наличии или отсутствии у рамки белого фона, сделайте фон рабочего поля темным. Для этого откройте панель инспектора свойств фильма и измените цвет параметра Background.

3. Выделите рисунок выберите команду Modify à Break Apart.

4. Теперь можно удалить фон. Снимите выделение с рисунка, щелкнув мышью по свободной области рабочего поля. Выберите в панели инструментов Lasso, затем в группе Options - Magic Wand. Щелкните мышкой по фону изображения и нажмите клавишу Delete. Теперь будьте внимательны – картинка перестала быть одним целым, и при перемещении возможна потеря отдельных листочков или цветочков. Лучше всего ее сгруппировать.

5. При необходимости с помощью инструмента Free Transform можно изменить форму рамочки, например, сделать ее овальной. Можно с помощью инструмента Ink Bottle добавить к рамочке контур.

6. Теперь импортируйте на рабочий стол фотографию.

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

8. Теперь осталось удалить торчащие углы. Вспомним, что при наложении друг на друга объектов типа Shape без контура, верхних объект уничтожает нижний. «Разбейте» фотографию (команда Modify à Break Apart), рамочку – разгруппируйте. Снимите выделение, щелкнув по свободной части экрана, а затем выделите рамочку и сдвиньте ее в сторону.

9. Инструментом Eraser осторожно удалите те части фотографии, которые оказались за границей рамочки.

10. Рамочку сгруппируйте (чтобы она больше не обрезала части фотографии) и опять совместите с фотографией.

Рис.28 Результат выполнения п.8.

11. Сгруппируйте фото и рамочку.

Рис.29 Итоговое изображение

2. Трассировка изображения

Если вы хотите использовать импортированный рисунок для дальнейшей работы, использовать его для анимации, лучше произвести трассировку (векторизацию) растровых изображений. Эта процедура преобразует растровое изображение в векторное. Обычно программа Flash определяет импортированное изображение как объект типа Bitmap, но может так случиться, что ваше изображение окажется объектом типа Group (если вы вставили его в фильм через буфер обмена), тогда прежде чем выполнять трассировку, нужно будет его разгруппировать командой Modify à Ungroup. Порядок действий будет следующим:

1. Выделите растровое изображение, помещенное в текущей
сцене.

2. Выберите Modify à Bitmap à Trace Bitmap (Изменить à Изображение à Трассировать изображение).

3. Введите пороговое значение для цвета (Color Threshold).

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

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

5. Введите значение параметра Curve Fit (Точность подгонки линий) для определения насколько точными и гладкими будут контуры векторизированного изображения.

6. Введите значение параметра Corner Threshold (Угловой порог) для определения количества острых углов.

а)	б)
Рис.30 Исходное изображение (а) и результат трассировки (б)

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

Рис.31 Исходный рисунок (фотография детской игрушки) и то, что получилось в результате преобразований

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

Слои

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

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

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

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

Редактировать объекты можно на любом видимом (visible) и не заблокированном (locked) слое. Чтобы защитить слой от изменений, его можно заблокировать, а чтобы не мешали работать объекты, находящиеся на других слоях, тот или иной слой можно сделать невидимым. На любом уровне можно представить объекты в виде контуров (outlines), при этом можно задавать цвет контура любого слоя.

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

Рис.32 Список слоев в панели Timeline

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

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

Чтобы сделать невидимыми все слои, щелкните мышью на пиктограмме Eye (Глаз); чтобы показать все слои, щелкните мышью на этой пиктограмме еще раз.

Чтобы представить содержимое слоя в виде контуров, щелкните мышью в столбце Outline (Контур), возле названия слоя; чтобы отключить это представление, щелкните мышью в этом месте еще раз.

Чтобы представить все объекты на всех слоях в виде контуров, щелкните мышью на пиктограмме Outline (Контур); чтобы отключить это представление на всех слоях, щелкните мышью на этой пиктограмме еще раз.

Присвоение слою нового имени

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

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

Для работы с текстом в программе Flash предусмотрен специальный инструмент – Текст (Text).

Чтобы поместить текст в рабочей области:

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

2. Кликните в том месте рабочего поля, где собираетесь вводить текст. Появится поле ввода;

3. Измените его форму, используя маркеры;

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

Обратите внимание, что поле ввода можно переносить, как и другие объекты. Параметры текста регулируются в панели Инспектора свойств и меню Текст (Text).

Рис.33 Вид инспектора свойств для инструмента Текст

Применение графических преобразований к тексту

Текстовые блоки можно преобразовывать точно так же, как и другие объекты. Их можно масштабировать, поворачивать, искажать и зеркально отображать при помощи инструмента при помощи инструмента Free Transform. При масштабировании текстового блока как объекта увеличение или уменьшение размера шрифта не отображается в инспектора свойств.

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

Разбивка текста

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

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

Чтобы разбить текст:

1.  Выберите инструмент Selection (Стрелка) и щёлкните на текстовом блоке.

2.  Выберите Modify (Изменить) à Break Apart (Разбить). Все символы выбранного текста будут помещены в отдельные текстовые блоки. Текст будет располагаться на сцене там же, где и раньше.

3.  Снова выберите Modify à Break Apart чтобы преобразовать символы в линии и заливки.

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

Чтобы связать горизонтальный текст URL, выделите текст и в поле URL Link (Ссылка) инспектора свойств введите URL, который будет связан с текстовым блоком.

Практическая работа «Применение графических преобразований к тексту».

Задание: создайте изображения (рис. 34)

Рекомендации к выполнению:

а) Надпись с эффектом тени.

Создайте надпись с помощью инструмента Text (Текст). Преобразуйте ее в графическое изображение. Для этого выделите текст, и в меню Modify выберите команду Break Apart, сделайте это 2 раза подряд. У вас получится надпись, состоящая из букв-заливок, и все они будут выделены.

а) Надпись с эффектом тени
б) Надпись с «пушистым» контуром
в) Заливка текста градиентом	г) Искажение текста
Рис. 34. Применение графических преобразований к тексту

С помощью инструмента Ink Bottle (Чернильница) создайте вокруг каждой буквы контур. При этом не снимайте выделение с букв! Инструментом Selection (Стрелка) возьмите выделенные буквы-заливки и переместите их чуть вправо и вверх. Для достижения желаемого эффекта фон букв должен быть темнее цвета контура.

б) Надпись с «пушистым» контуром.

Создайте надпись и преобразуйте ее в графическое изображение, дважды выбрав в меню Modify команду Break Apart. Снимите выделение с букв, щелкнув мышью по любому другому месту экрана. С помощью инструмента Ink Bottle (Чернильница) создайте контур. При этом в инспекторе свойств задайте следующие значения свойств контура:

Рис. 35. Значения свойств контура

в) Заливка текста градиентом