Любая анимация или фильм состоит из последовательности кадров. Кадр - это наименьшая часть анимационного документа или фильма. Поэтому для создания анимации нам сначала потребуется создать несколько кадров. Flash MX 2004 - много инструментов для создания анимации.
Ключевой кадр - кадр доступный для обработки. В анимации этот кадр будет отображаться так, как нарисует пользователь. На временной шкале ключевой кадр отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка.
Обычный кадр - кадр, который будет отображаться в анимации, но пользователь непосредственного участия в прорисовке кадра не принимал. Он будет таким же, как ключевой кадр слева или, если была проведена раскадровка, то кадр автоматически сформированный программой.
Раскадровка - автоматический переход изображения из одного ключевого кадра в другой.
Кадр-фантом - пустая клетка на временной диаграмме, в которой может быть установлен либо ключевой кадр, либо обычный кадр.
По кадровое формирование изображения.
Самое простое формирование анимации - это по кадровое изменение рисунка, т.е. на каждом кадре изменяется положение объекта, его характеристики, или добавляются новые и удаляются старые объекты.
Покадровое формирование рисунка: на каждом кадре происходит добавление частей к рисунку.
Теперь вы можете изгибать линию и получить любую форму этой фигуры.
Envelop - выводит на экран прямоугольную схему, которая позволяет изменять, заворачивать фигуру.
|
|
|
|
После манипуляций с использованием инструментов Flash MX 2004 с линией у меня получилась вот такая фигура.
Первый кадр готов, для того, чтобы продолжить создание анимации нам необходимо добавить ещё кадры. Кликните по временной панели, следующий кадр станет синего цвета. Кликните по правой кнопке мыши и в выпадающем меню выберите Convert to Keyframes. После данных операций 2 кадр, также как и первый будет обозначаться чёрным кругом.
Некоторые обозначения манипуляций с кадрами во Flash MX 2004: Insert Frame (Вставить кадр), Remove Frames (Удалить кадры), Insert Keyframe (Вставить ключевой кадр), Insert Blank Keyframe (Вставить пустой ключевой кадр), Clear Keyframe (Очистить ключевой кадр), Convert to Keyframes (Преобразить в ключевые кадры), Convert to Blank Keyframes (Преобразовать в пустые ключевые кадры), Gut Frames (Вырезать кадры), Copi Frames (Копировать кадры), Paste Frames (Вставить кадры), Clear Frames (Очистить кадры) и Select All Frames (Выделить все кадры) - выполняют операции с кадрами, указанные в названиях команд.
После изготовления нескольких ключевых кадров мы должны получить вот такую картинку.
Во время преобразования прямой вам, возможно, потребуется не только изгибать прямую, но и изменять в размерах, то есть свободно трансформировать. Во Flash MX 2004 это можно сделать вот так.
Подведите указатель мыши непосредственно к линии, кликните правой кнопкой. В выпадающем меню выберите пункт Free Transform. Или в главном меню выберите Modify => Transform => Free Transform. Теперь вы можете изгибать линию и получить любую форму этой фигуры.
Солнышко и лучики сделать гораздо проще, поэтому для самопроверки я предлагаю вам сделать это самим.
|
|
|
Теперь
нам необходимо сделать зелёным цветом крону дерева. Сделать заливку, как облако,
у нас не получится, так как оно было сформировано из замкнутой фигуры. А крону
дерева ограничивает несколько линий. Возможно закрасить кистью, но это будет не
очень удобно.
Flash MX 2004 предоставляет
возможность создания нескольких слоев. Поэтому на задний план добавим новый слой
и закрасим его в области кроны дерева.
Создание
нового слоя
Для создания нового слоя выполните
следующие действия:
1. Выделите тот слой сцены
документа, непосредственно перед которым должен находиться новый слой.
2. Если создаётся слой обычного типа, выполните
одно из следующих действий:
- щёлкните на кнопке Insert Layer
(Вставить слой), первой слева внизу диспетчера слоёв;
- выполните команду Insert
=>Timeline => Layer (Вставить =>Временная диаграмма =>Слой)
основного меню;
- выполните команду
Insert Layer контекстного меню выделенного слоя.
Перетаскивание слоя мышью
Для перетаскивания слоя мышью выполните следующие
действия:
1. Поместите указатель в свободное
место строки перемещаемого слоя и нажмите кнопку мыши.
2. Перетащите указатель в то место диспетчера
слоёв, где должен находиться данный слой (между другими слоями документа или в
некоторую папку слоёв). Это место индицируется двойной разделительной линией,
появляющейся между слоями, или затемнением значка папки в строке папки слоёв.
Как только такая линия или затенение папки появится в нужном месте диспетчера,
отпустите кнопку мыши. Если отображалась двойная линия, то выбранный слой будет
вставлен в место её расположения, а если произошло затенение папки, то слой
переместится в данную папку и разместится в самом её верху.
На каждом последующем пикселе свободно трансформируем рамку. В конце можно сделать медленное движение рамки. Для этого Flash MX 2004 и придумано - для облегчения создания анимации. Создаём ключевой кадр. Далее, нажав клавишу Alt, левой кнопкой мыши перетаскиваем ключевой кадр на 10 кадров и отпускаем. При переносе к значку курсора будет прибавлен небольшой знак +. Далее модифицируем перенесённый кадр.
Теперь
между двумя кадрами автоматически просчитаются промежуточные изменения картинки.
Назначение и структура программы Flash
В последнее время программа Flash стала модной. Многие полагают, что Flash - это новый продукт, однако это не так. Еще в 1995 году появилась небольшая программа Future Splash Animator для векторной анимации Web-графики, а два года спустя, в 1997 году, компания Macromedia приобрела ее и начала развивать продукт под новым названием Flash.
Сегодня Flash это универсальное интегрированное приложение, которое объединяет редактор для графики и звука, средство для анимации и позволяет создавать уникальные интерактивные мультимедиапродукты. С помощью Flash можно делать экономичную яркую анимацию для Web, интерактивные формы, игры, интерактивные презентации и многое другое. Владение Flash полезно не только Web-дизайнерам, но и учителям, художникам и многим другим, кто хочет выразить свои идеи языком анимации. Сегодня для этого не нужна специальная студия достаточно персонального компьютера, программы Flash и немного терпения.
Прежде чем приступить к описанию инструментов рисования, нужно рассказать об элементах интерфейса. Оговоримся, что не станем обрушивать на читателя сразу всю информацию об интерфейсе и заставлять запоминать все детали. Мы будем сообщать об интерфейсе программы ровно столько, чтобы можно было выполнить текущий урок. В каждом уроке мы будем разбирать новые элементы интерфейса, объясняя их назначение на конкретных примерах.
При первом запуске программы вы увидите примерно такую картинку, как показано на рис. 1.
Рис. 1. Основные элементы интерфейса программы Flash 5.0
Каждому вновь открытому файлу соответствует свой рабочий стол. На рабочем столе находится кадр, или сцена (Stage), - прямоугольная область на экране, в которой воспроизводится Flash-фильм.
Для рисования на рабочем столе предназначены инструменты рисования (см. панель инструментов на рис. 1). Именно о них мы и поговорим прежде всего.
Создание любой анимации начинается с отрисовки статических изображений. Быстрая смена одного изображения другим, в результате которой создается впечатление движения изображения, и есть анимация. Для контроля длительности показа изображений (управления анимацией) служит временная шкала, или монтажная линейка (Timeline).
На рис. 1 представлены также плавающие панели (floating, dockable panels) панели, предназначенные для настройки рабочей среды Flash. Итак, рассмотрим основные инструменты рисования во Flash.
Прежде чем вы начнете работать с инструментами рисования, следует ввести понятия контура, обводки и заливки. Рассмотрим их на простом примере.
Выберите инструмент редактирования Oval (Овал) на панели инструментов (рис. 2) и нарисуйте овал. Фигура автоматически будет залита цветом. (Если при рисовании овала удерживать клавишу Shift, то рисуемая фигура будет иметь форму окружности.)
Рис. 2. Рисунок состоит из контура, обводки контура и заливки
Рисунок состоит из контура, обводки контура и заливки (рис. 2). Для того чтобы выделить контур фигуры, щелкните мышью по кнопке, показанной на рис. 3 красной стрелкой. В результате линия обводки и заливка пропадут, останется только контур - (рис. 4).
Рис. 3. Кнопка удаления заливки и обводки
Рис. 4. Удалив заливку и обводку, получаем контурную линию
служебная линия (не отображающаяся при печати). Повторное нажатие кнопки, показанной на рис. 3, возвращает удаленные элементы. Цвет обводки контура и заливки легко поменять. Цвет заливки меняется с помощью кнопки выбора цвета заливки Fill color (рис. 5). После того как вы выберете в палитре (рис. 5) новый цвет, нарисованная фигура не изменится, но при рисовании нового эллипса, контур будет заливаться только что выбранным цветом.
Рис. 5. Инструменты выбора цвета для заливки и линии обводки
Для того чтобы изменить цвет заливки в текущей фигуре, необходимо выбрать новый цвет и воспользоваться инструментом Paint Bucket (Ковш заливки) - он выделен на рис. 6.
Рис. 6. Цвет заливки в нарисованной фигуре можно изменить с помощью инструмента Paint Bucket
Цвет обводки тоже можно поменять. Для этого необходимо выбрать инструмент Stroke color (Изменение цвета обводки) - на рис. 7 на него указывает красная стрелка. После этого откроется палитра, в которой можно выбрать необходимый цвет, затем нужно выбрать инструмент Ink Bottle Tool (он выделен на рис. 7) и щелкнуть им по линии обводки. В результате она зальется выбранным цветом.
Рис. 7. Изменение цвета линии обводки
На рис. 6 нарисованный нами овал показан в большем масштабе. Изменение масштаба, кстати, задается так же, как и в Photoshop, путем использования комбинации клавиш Ctrl и «+» или Ctrl и «-».
Толщину и стиль линий обводки также можно менять. Для этого необходимо по команде Window > Panels > Stroke вызвать панель Stroke. В ней можно настроить стиль линии обводки, ее толщину и цвет (рис. 8).
Рис. 8. Из меню панели Stroke можно изменить параметры линии обводки
Если выбрать стиль линии Hardline (рис. 8) и применить инструмент Ink Bottle Tool, то получим линию в один пиксел. Линия Hardline не имеет толщины, поэтому в окошке толщины линий значение не появляется. Толщину других линий, например пунктирной линии, можно изменять (рис. 9).
Рис. 9. Пример изменения типа и толщины линии обводки
Более тонкая настройка параметров линии производится на панели Line Style (Стиль линии). Вызвать ее можно нажав на кнопку, указанную красной стрелкой на рис. 10. В панели Line Style можно, например, изменить длину штриха и расстояние между штрихами пунктирной линии. Если на рис. 8 были приняты значения по умолчанию - 6 пунктов для штриха и расстояния между штрихами, то, выбрав соответственно значения 10 и 12 пунктов и вновь применив инструмент Ink Bottle Tool, можно получить обводку, как на рис. 10.
Рис. 10. Тонкая настройка параметров линии
Итак, мы рассмотрели основные понятия - контур, заливка и линия обводки - на примере рисования овала. Теперь поговорим непосредственно об инструментах рисования.
Инструмент Rectangle (Прямоугольник) расположен рядом с инструментом Oval (рис. 11).
Помимо традиционного прямоугольника можно рисовать прямоугольники со скругленными краями. Для того чтобы задать такой режим, выберите иконку, на которую на рис. 11 указывает красная стрелка. В результате появится панель Rectangle Settings, где вы определяете радиус скругления, после чего при рисовании прямоугольника углы будут скругляться. Редактирование заливки и обводки контура прямоугольника производится так же, как и в случае с овалом.
Рис. 11. Работа с инструментом Rectangle
Инструмент Line (Линия) позволяет проводить прямые линии (рис. 12). При удерживании клавиши Shift можно проводить вертикальные, горизонтальные линии или линии под углом 45°.
Рис. 12. Работа с инструментом Line
В ряде случаев, если вам, например, необходимо нарисовать равнобедренный треугольник, полезно воспользоваться сеткой. Сделать видимыми линии сетки можно по команде View > Grid > Show Grid (рис. 13).
Рис. 13. При рисовании правильных геометрических фигур можно воспользоваться сеткой
Рис. 14. Результат работы с инструментом Pencil при различных настройках (верхний ряд треугольников - режим Straighten, нижний - Ink)
Инструмент Pencil (Карандаш) расположен под инструментом Oval. На рис. 14 показан результат работы с карандашом при разных вариантах его настройки, которых всего предлагается три. При варианте настройки Straighten инструмент превращает дрожащие линии контура, проведенного от руки, в прямые, при варианте настройки Smooth - сглаживает линии, а в режиме Ink - практически не меняет исходный контур.
Для того чтобы рассказать о том, как функционирует инструмент Arrow, следует более подробно рассмотреть структуру контурной линии.
Проведем линию с помощью инструмента Pencil, как показано на рис. 15. Она состоит из контура и обводки линии.
Рис. 15. С помощью инструмента Subselect можно выделить опорные точки и сегменты контурной линии
Рис. 16. Пример перемещения угловой точки
Рис. 17. Пример изменения кривизны контура
Рис. 18. Линия обводки следует за линией контура
До сих пор, говоря о контуре, мы не упоминали о его структуре. Для того чтобы пояснить структуру контурной линии, воспользуемся инструментом Subselect (Частичное выделение), активизированном на рис. 15, и щелкнем им по контуру линии. В результате мы увидим, что контурная линия состоит из сегментов и опорных точек (рис. 15). При использовании инструмента Pencil сегменты и опорные точки создаются автоматически. Когда мы редактируем линию контура, автоматически меняется линия обводки. Покажем, как можно редактировать линию контура с помощью инструмента Arrow (Стрелка) - он выделен на рис. 16.
Опорные точки бывают угловые и гладкие. Когда мы подводим инструмент Arrow к линии, его вид меняется. При приближении его к угловой точке рядом с изображением стрелочки появится угол - в этом режиме можно перемещать угловые точки (рис. 16), а при приближении к сегменту или к гладкой точке - изображение дуги - в этом режиме можно менять кривизну контура (рис. 17). При изменении контурной линии линия обводки следует за линией контура (рис. 18).
Нарисуйте эллипс и с помощью инструмента Arrow выделите его заливку одним щелчком мыши (цвет выделенной заливки будет осветлен белыми точками) и переместите ее в режиме drag-and-drop, как показано на рис. 19. Если вы используете двойной щелчок, то будет выделяться также прилегающая к заливке линия обводки. Двойной щелчок позволяет также выделять пересекающиеся линии.
Рис. 19. Пример перемещения выделенного объекта инструментом Arrow
Рис. 20. Исходное изображение
Рассмотрим другие виды модификации выделенного изображения. Нарисуйте с помощью инструмента Pencil некий контур, например листок (рис. 20). Выберите инструмент Arrow и выделите нарисованный листок в прямоугольную рамку. Теперь вы можете обрабатывать выделенный объект доступными модификаторами.
На панели Options выберите кнопку Smooth и щелкните на ней несколько раз - контур листка приобретет более плавные очертания (рис. 21а).
Рис. 21. Использование модификаторов с панели Options: а) Smooth позволяет сгладить контуры изображения; б) Strighten дает возможность спрямить контуры изображения
Изменения контура после нескольких щелчков по кнопке Strighten показаны на рис. 21б.
Используя инструмент Lasso, можно выделить область произвольной формы (рис. 22).
Рис. 22. Пример выделения с помощью инструмента Lasso
Рис. 23. Пример работы с инструментом Brush
Инструмент Brush (Кисть) создает векторный контур и его заливку выбранным цветом, но, в отличие рассмотренных ранее инструментов, не образует линию обводки (рис. 23). Для того чтобы понять, какой контур создает инструмент Brush, посмотрите на рис. 24, где использован инструмент Subselect.
Рис. 24. Пример контурной линии, созданной инструментом Brush
Рис. 25. Варианты настройки инструмента Brush
На панели Options предусмотрены три варианта настройки инструмента Brush: режимы (верхняя кнопка), размеры кисти (средняя кнопка) и форма кисти (нижняя кнопка) (рис. 25).
Режимы определяют характер взаимодействия проводимой линии с уже нарисованным объектом (рис. 26). Как видно из рисунка при проведении однотипных горизонтальных линий в разных режимах, закрашивание происходит по-разному:
Paint Normal закрашиваются пространство кадра линия обводки и заливка закрашиваемого объекта;
Paint Fills закрашивается пространство кадра и заливка закрашиваемого объекта. Линия обводки не закрашивается;
Paint Behind закрашивается только свободное пространство кадра;
Paint Selection закрашивается только выделенная область;
Paint Inside закрашивается только заливка, с которой было начато закрашивание.
Рис. 26. Разные режимы взаимодействия мазков кисти с нарисованным ранее объектом
Следует пояснить действие параметра Lock Fill (Блокировка заливки) - соответствующая данной команде кнопка с пиктограммой замка показана нажатой на рис. 27.
Рис. 27. Пример действия параметра Lock Fill
Когда параметр Lock Fill активизирован (кнопка нажата), градиент относится ко всему рабочему полю (рис. 27), а когда не активизирован - переход от одного цвета к другому осуществляется на базе мазка кисти (рис. 28).
Рис. 28. Параметр Lock Fill не активизирован
Ластик позволяет стирать линии и заливку и имеет ряд различных настроек. В панели Options можно настроить размер и форму ластика, а также выбрать режим стирания (рис. 29):
Erase Normal стирается линия обводки и заливка объекта;
Erase Fills стирается заливка объекта (линия обводки не стирается);
Erase Lines стираются только линии;
Erase Selected Fills стирается только выделенная область.
Erase Inside стирается только заливка, причем при проведении ластиком линии стирание производится только внутри контура, в котором была начата линия.
Модификатор Faucet (Кран) позволяет удалять полностью заливку или линию.
Рис. 29. Разные режимы действия ластика
До сих пор мы рассматривали инструменты, которые автоматически создавали контуры. Инструмент Pen (Перо) позволяет непосредственно работать с контурами. С его помощью можно создавать прямые и изогнутые сегменты, регулировать длину прямых и наклон изогнутых сегментов.
Выберите инструмент Pen, щелкните мышью (вы поставили первую опорную точку), переместите курсор, щелкните мышью (это вторая опорная точка). В результате получится ломаная, как на рис. 30. Опорные точки, показанные на рис. 30, называются линейными, так как сходящиеся в них сегменты - линейные. Линейная точка не имеет направляющих.
Рис. 30. Пример построения ломаной линии с помощью инструмента Pen
Рис. 31. Пример построения гладкой кривой с помощью инструмента Pen
Для того чтобы поставить гладкую опорную точку, выберите инструмент Pen, нажмите левую кнопку мыши и, не отпуская ее, слегка переместите мышь, в результате появятся гладкая опорная точка и выходящая из нее направляющая линия (рис. 31). Поворачивая и удлиняя направляющую линию, можно менять кривизну очередного сегмента.
Для создания незамкнутого контура необходимо выполнить двойной щелчок мышью по последней точке. Отпустив клавишу мыши, переместите курсор и поставьте следующую опорную точку; повторяя эту процедуру, можно получить гладкую линию, как на рис. 31.
Чтобы замкнуть контур, приблизьте курсор к начальной опорной точке или к линии контура. После того как курсор примет вид пера с кружочком, щелкните мышью - и контур замкнется.
Если в точке соединяются два независимых сегмента, то она является угловой. Например, если соединить прямолинейный и криволинейный сегменты, то на их пересечении появится угловая точка (рис. 32).
Рис. 32. На пересечении прямолинейного и криволинейного сегментов образуется угловая точка
Узловые точки можно преобразовывать, перемещать и удалять.
Для преобразования угловой точки в гладкую выберите инструмент Subselection. Щелкните мышью по угловой точке и, удерживая клавишу Alt, перетащите точку - она станет гладкой, и появится направляющая линия, позволяющая менять кривизну сегментов, соединяющихся в данной гладкой точке (рис. 33).
Рис. 33. Пример преобразования угловой точки в гладкую
По умолчанию выделенные гладкие точки кривой отображаются как полые точки, а выделенные угловые точки - как полые квадраты.
Аналогично можно создавать точки на линиях, проведенных другими инструментами рисования Flash: Pencil, Brush, Line, Oval, Rectangle, и регулировать эти линии.
В частности, на рис. 34 показан контур, полученный с помощью инструмента Oval путем превращения одной гладкой точки в угловую (с помощью инструмента Pen) и перетаскивания угловой точки посредством инструмента Subselection.
Рис. 34. Контур, полученный с помощью инструмента Oval путем превращения одной гладких точек в угловую и перетаскивания ее
Инструмент Dropper (Пипетка) служит для копирования цвета и стиля карандашных линий, режима кисти и заливок. Когда вы подводите пипетку к линии, вид курсора меняется - под пипеткой появляется мини-пиктограмма карандаша. При щелчке пипеткой по линии копируются все параметры линии (цвет, толщина, стиль) и пипетка заменяется на инструмент Ink Bottle, который позволяет применить все эти настройки для другой линии.
Аналогично, когда курсор находится над заливкой, под пипеткой появляется изображение ковша, а когда курсор находится над мазком кисти - под пипеткой появляется изображение кисти. Данные пиктограммы показывают, какие атрибуты вы копируете инструментом Dropper.
Мы уже упоминали инструмент Paint Bucket (Ковш заливки) - он выделен на рис. 35, теперь рассмотрим его возможности подробнее. Этот инструмент применяется для заливки замкнутых (и не полностью замкнутых) областей цветом, градиентной и растровой заливкой.
Если вы работали с заливкой растровых изображений в программе Photoshop, то, вероятно, вам знакома ситуация, когда заливка «выливается» за край не очень аккуратно прорисованных контуров в тех местах, где есть «дырки». Во Flash возможны несколько режимов настройки инструмента заливки, позволяющие избежать вышеописанного дефекта.
Возможны четыре варианта настройки этого инструмента:
Don’t Close Gaps не закрывать промежутки;
Close Small Gaps закрывать маленькие промежутки;
Close Medium Gaps закрывать средние промежутки;
Close Large Gaps закрывать большие промежутки.
Выберите инструмент Pencil и нарисуйте незамкнутый контур (рис. 35). Выберите режим Close Large Gaps и залейте контур. Как видно из рис. 35, заливка остается внутри контура, даже несмотря на то, что изначальный контур был незамкнутым.
Рис. 35. Пример замыкания контура в режиме Close Large Gaps
А теперь рассмотрим градиентную заливку и операции с ней. В панели Fill выберите во вкладке Fill вариант заполнения - Linear Gradient (Линейный градиент). Затем нарисуйте прямоугольник, заполните его линейной заливкой с линейным градиентом, а внутри большого прямоугольника нарисуйте прямоугольник поменьше (рис. 36). Как видно на этом рисунке, в малом прямоугольнике переход от белого к синему реализуется на меньшем градиенте. Если же применить функцию Lock Fill и выполнить заливку обоих прямоугольников, то получится картинка, как на рис. 37. То есть градиент во внутреннем и внешнем прямоугольнике будет одинаковым.
Рис. 36. Градиентная заливка в режиме, когда параметр Lock Fill не активизирован
Рис. 37. Градиентная заливка в режиме, когда параметр Lock Fill активизирован
Для того чтобы поменять направление градиента заливки, необходимо в панели Options щелкнуть на кнопке Transform Fill (она нажата на рис. 38), а после этого - на заливке, в результате появятся маркеры (рис. 38).
Рис. 38. Пример модификации градиентной заливки
Верхний круглый маркер служит для вращения градиентной заливки, прямоугольный - для увеличения (уменьшения) градиента перехода от одного цвета к другому, а центральный круглый - для перемещения центра градиентного заполнения.
Инструмент Paint Bucket позволяет также заливать замкнутый контур и растровым изображением. Продемонстрируем, как выполняется данная процедура на простом примере. Нарисуйте при помощи инструмента Rectangle изображение монитора, в экран которого будет вставляться растровое изображение (рис. 39).
Рис. 39. Векторное изображение монитора, в которое будет помещаться растровое изображение фотографии
Затем импортируйте растровое изображение, которым и будет заливаться экран. Можно импортировать растровое изображение, выполнив команду File > Import и выбрав необходимый файл. Далее перейдите в панель Fill (Заливка) и поменяйте способ заливки на растровый - Bitmap (рис. 40).
Рис. 40. Панель Fill, вкладка Fill
Таким образом, если заливать замкнутый контур внутри нарисованного экрана монитора, то будет выполнена заливка растром, как показано на рис. 41.
Рис. 41. Пример заливки растром
Для того чтобы редактировать растровую заливку, необходимо в панели Options щелкнуть на кнопке Transform Fill (она нажата на рис. 42), а после этого - на растровой заливке, в результате появится рамка с маркерами (рис. 42).
Пользуясь центральным маркером, растровое изображение можно перетащить так, чтобы на нарисованном мониторе отображалась нужная часть фотографии (рис. 43).
Рис. 42. Рамка модификации растровой заливки
Рис. 43. Перемещая центральный маркер, можно кадрировать растровое изображение
Другие маркеры позволяют масштабировать растровое изображение, поворачивать его и деформировать (рис. 44).
Рис. 44. Пример деформации растровой заливки
Импортировав несколько фотографий, вы можете настроить палитру, из которой можно выбирать растр для заливки (рис. 45), так же, как и цветовую палитру.
Рис. 45. Пример палитры с несколькими растровыми изображениями
Когда две фигуры накладываются одна на другую, Flash либо объединяет, либо сегментирует их. Нарисуйте две одноцветные фигуры - круг и прямоугольник (рис. 46), выделите прямоугольник (щелкнув по нему инструментом Arrow), а затем наложите прямоугольник на круг и уберите с него выделение (щелкнув повторно по нему инструментом Arrow).
Рис. 46. Исходные фигуры
В результате произойдет объединение двух фигур в одну. Щелкнув по контуру полученной фигуры инструментом Subselect, можно убедиться, что внутренний контур исчез (рис. 47).
Рис. 47. Пример объединения двух одноцветных фигур
Теперь проделайте ту же процедуру с фигурами разного цвета. В этом случае внутренняя граница не исчезнет (рис. 48).
Рис. 48. При наложении фигур разного цвета внутренний контур не исчезает
Теперь если выделить прямоугольник и переместить его с помощью инструмента Arrow, то из круга будет вырезана часть, как показано на рис. 49.
Рис. 49. Часть круга вырезана прямоугольником
Иногда для получения сложного контура полезно использовать объединение и вычитание контуров фигур.
Не смотря на то, что большинство обучающих ресурсов рассчитано именно на англоязычную версию, мы будем рассматривать русскоязычную версию, так как для облегчения работы в пакете Macromedia Flash 8 существует русификатор.
Рисунок 1.3.1 - Окно редактора Macromedia Flash 8 с неоткрытым документом
На рис.1.3.1 мы видим окно только что запущенного редактора с неактивными панелями инструментов до тех пор, пока не будет создан или открыт документ, и строкой меню. В окне показан экран с предложением открыть последние редактировавшиеся документы, создать новый документ и создать из подготовленных образцов. Так же на этом экране присутствуют ссылки на обучающие флеш ресурсы и флажок отключения показа этого самого экрана при запуске редактора. Если установить этот флажок флеш будет запускаться без пригласительного экрана и ожидать ваших действий с пустым рабочим пространством.
Рисунок 1.3.2 - Окно редактора Macromedia Flash 8 с неоткрытым документом
На рисунке 1.3.2 показано окно только что запущенного редактора с неактивными панелями инструментов до тех пор, пока не будет создан или открыт документ, и строкой меню. В окне показан экран с предложением открыть последние редактировавшиеся документы, создать новый документ и создать из подготовленных образцов. Так же на этом экране присутствуют ссылки на обучающие флеш ресурсы и флажок отключения показа этого самого экрана при запуске редактора. Если установить этот флажок флеш будет запускаться без пригласительного экрана и ожидать ваших действий с пустым рабочим пространством.
Слои
Подобно другим графическим редакторам мощнее MS Paint, Macromedia Flash работает со слоями. Слои можно создавать, упорядочивать (в т.ч. сознавать папки, организуя таким образом иерархию), удалять, переключать видимость и изменять порядок наложения в левой области панели Timeline с помощью соответствующих кнопок. Верхние в списке слои перекрывают нижние и на картинке. В одном слое может создаваться только одна анимация.
Анимация
Во flash разделяют два вида анимации: движение и трансформация.
При трансформации фигуры можно управлять самой трансформацией и изменением цвета. Не работает с символами и группами
При движении можно менять оттенок, прозрачность и размер. Требуется, чтобы в ключевых кадрах был символ или группа.
Специальные слои
В Flash 8 выделяют слои-направляющие, слои-маски и слои-траектории.
Самая простая разновидность специальных слоев в программе Flash - это так называемые направляющие слои (guide layers). Единственное их предназначение - помочь при рисовании разных объектов и размещении флэш-символов.
Маски (mask) могут иметь непрозрачные области произвольной формы, сквозь которые будут видны маскируемые слои, часть маскируемого слоя, которая находится под прозрачной частью слоя маски, будет скрыта за сплошной заливкой. Маски могут участвовать в анимации. Обычно применяются для демонстрации части изображения или для эффектного появления или проскальзывания маскируемого слоя.
Слои траекторий - очень мощное средство создания анимации в программе Flash. Технология Flash позволяет задавать траектории движения объектов графически, просто "рисуя" их на экране, причем есть возможность установить ориентированность перемещаемого объекта относительно пути. Слой-путь называется ведущим, слой, привязанный к пути, является ведомым.
Символы
Во Flash различают три типа символов: Movie Clip, Button, Graphic. Это не совсем символы в привычном понимании. Первый и самый распространенный из них - это ролик (Movie clip). Обратите внимание, что в основном ролике может содержаться сколько угодно других роликов! Этот тип флэш-символа в среде разработчиков обычно называют "клип". Это слово стало довольно часто употребляемым. Настолько, что многие считают его перешедшим из жаргонных слов в число устоявшихся терминов. Клип может содержать любые элементы, которые может содержать основной ролик. В общем, он представляет собой отдельный фильм, живущий своей жизнью. Например, остановка проигрывания основного ролика никак не влияет на воспроизведение клипов. Второй тип флэш-символа, также широко применяемый, - это кнопка (Button). Кнопка представляет собой специальный объект, ориентированный на интерактивность: обычно предполагается, что пользователь эту кнопку "нажимает" щелчком мыши и при этом что-нибудь происходит. При наведении пользователем указателя мыши на кнопку он изменяет свою форму на "лапку", так же, как это традиционно происходит при наведении мыши на гиперссылку в браузере. Правда, из этого еще не следует, что при нажатии на кнопку в ролике что-нибудь произойдет. Чтобы кнопка стала "живой", необходимо запрограммировать те действия, которые совершаются при ее нажатии (а также отпускании и пр.). И, наконец, третий тип флэш-символа называется графическим объектом, или просто графикой (Graphic). Не следует думать, что такие объекты содержат только статическую графику. Они тоже могут содержать анимацию, но в отличие от мувиков они всегда синхронизированы с основным роликом (или "родительским" клипом, если графика расположена внутри него). Если, к примеру, проигрывание основного ролика останавливается; останавливается и анимация во всех графических объектах, расположенных в нем.
Кнопки отличаются ранее рассмотренных символов своей временной шкалой. В ней 4 кадра - up, over, down, hit. Содержимому каждого из этих кадров соответствует состояние кнопки при событиях соответственно: 1 - курсор мыши находится вне кнопки, 2 - курсор мыши находится над кнопкой и кнопки мышки не нажимаются, 3 - курсов мышки наведен на кнопку, левая кнопка нажата, 4 - выбор фигуры, при присутствии курсора над которой будет работать кнопка (может не совпадать с изображением кнопки ни по форме, ни по положению). macromedia flash action script
Все имеющиеся в ролике символы помещаются в библиотеку символов ролика. Символ, содержащийся в библиотеке, называют образцом. Помещенный в рабочую область документа образец называется экземпляром. Применение экземпляров выгодно, в случае если необходимо много копий символа. Правда, при изменении образца автоматически сменятся на обновленный и все экземпляры. Экземпляры настраиваются очень ограниченно. У них можно менять яркость, оттенок, прозрачность. Можно так же назначить поведение экземпляру как клип, кнопке или графике независимо от того к какому типу он фактически относится. Библиотека позволяет каталогизировать образцы (допускаются папки), создавать, импортировать, удалять и даже подменять один образец другим. Перейдем теперь к Action Script.
Все разделы сайта сайт
У Вас есть прекрасная
возможность БЕСПЛАТНО посмотреть и скачать
11 видеоуроков
по работе в
программе
Macromedia Flash 8 Рrofessional
================
===================
Показан интерфейс программы
Macromedia Flash 8 Рrofessional
и работа с панелями, где и какие из
них расположены.
Как включить нужные панели (или отключить)
Какие интерактивные компоненты есть в программе и как их сразу можно начать использовать.
Как в программе создавать НОВЫЕ интерактивные объекты и компонеты - кнопочки, чекбоксы, радиобатоны и прочие прибамбасы.
Как задать свойства (например ввести название, реакцию на название и прочее) как стандартным компонентам, так и вновь созданным Вами интерактивным компонентам.
Также объясняется: какой параметр - что обозначает. Ещё показано какие значения и параметры в прогамме надо устанавливать.
Скриптовый програмный код - основное средство создания интерактивных фильмов и приложений.
Как с помощью него ввести основные параметры компонентов и анимационно управляемых объектов фильма. Где находится редактор этого скриптового програмного кода.
Необязательно каждый раз раз создавать какие-либо интерактивные объекты. В программе есть библеотека встроенных интерактивные элементов.
В видео уроке рассматривается работа с окном библиотек. Где и как найти и включить уже встроенные интерактивные компоненты, а также как создать свои собственные.
Скрытые функции программы, которые могут значительно облегчить работу с ней и вней:) Как и где узнать всю информацию о текущем объекте или элементе.
Ведь не все объекты фильма или ролика могут отображаться в текущей сцене - они могут отображаться в дополнительных сценах Как их отобразить. редактировать или удалить - вы узнаете в этом видео-уроке.
Как и где перемещаться между сценами фильма, видео-ролика или сгруппированными объектами.
Где находятся панели инструментов программы и что они означают как выбирать действия над графическими объектами для их изменения и редактирования.
А также, как и где отображаются дополнительные палитры экрана где находится рабочее окно фильма и область для монтажа фильма или ролика.
Что такое шкала времени и где задаются свойства объектов.
О назначении и функциях главного меню программы Macromedia Flash 8 Рrofessional - какие и для чего в главном меню существуют разделы.
Из каких секций состоит панель инструментов и какие кнопочки за что отвечают.
Это очень важно, так как кнопочек много и даже если у Вас стоит руссифицированная версия Макромедиа Флэш 8 Про и то приятно, когда тебе с экрана объяснят какая кнопка отвечает за обводку, заливку или выделение.
А если у Вас
на компьютере установлена английская
версия программы Flash 8, да и с английским
языком не очень дружите - тогда очень
нужный урок.
Линейки измерения сетки и направляющие для работы с графикой просто необходимы. Где они прячутся и какой командой можно их вызвать.
Мало того будет показано как их перемещать по рабочей области редактируемого фильма и самое главное - как потом сделать так, чтобы они исчезли:)
А то некоторым
людям бывает не до смеха, когда невозможность
убрать эти линейки отнимает кучу нервов
и времени Как и где задать цвет, толщину
и структуру сетки под свои текущие нужды.
При первом запуске программы не отображаются все панели инструментов доступные в программе Macromedia Flash 8 Рrofessional
Где и как найти нужные панели, что означают пункты в самой нужой и главной панели Мэйн и где находятся САМЫЕ необходиые команды для работы с программой.
Приятного просмотра!
Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:
Анимационные эффекты — программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;
Покадровая анимация — пользователь создает каждый кадр будущей анимации;
Автоматическая tweened-анимация, или анимация трансформации, — пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.
Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:
Графические объекты, включая формы, сгруппированные объекты и графические символы;
Растровые изображения;
Когда вы добавляете анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект.
В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode .
Рис. 1. Выделенный текстовый объект
В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.
Рис. 2. Панель Explode
Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode . После того как вы выберете необходимые параметры, нажмите кнопку ОК и получите примерно такую анимацию .
Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur ролик .
Рис. 3. Растровое изображение, импортированное на сцену
Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur .
Рис. 4. Кнопка Edit находится внизу на панели Properties
В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).
Рис. 5. Панель Blur позволяет поменять настройки эффекта
Покадровая анимация
Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.
Рис. 6. Первый ключевой кадр анимации
Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.
Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого
Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe . В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).
Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).
Рис. 8. Последний кадр анимации
Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.
Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie . В результате получим следующий фильм leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie . Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.
Рис. 9. Просмотр фильма в режиме Bandwidth Profiler
Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения.
Рис. 10. Объект автоматически превращается в графический символ
Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween , в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11).
Рис. 11. Каждый новый символ становится частью библиотеки
Если выполнить команду Window => Library , то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe ). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform ), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween .
Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween
Выполнив команду Control => Test Movie , получим информацию, представленную на рис. 13.
Рис. 13. Просмотр фильма в режиме Bandwidth Profiler
Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.
Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм .
Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal ) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties . Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта.
Рис. 14. Выберем максимальное ускорение объекта Ease = -100
Для этого выставим значение параметра Ease равным -100 (рис. 14). В результате получим фильм . Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.
Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация — это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, — это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета.
Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide .
В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1 .
Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).
Рис. 15. Пример задания траектории движения
Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) — рис. 16.
Рис. 16. Параметр Snap задает режим привязки к траектории движения
После того как вы поставите флажок Snap , центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).
Рис. 17. Объект как бы прилипает к траектории движения своим центром
Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal , — в результате получим фильм .
При движении листа вдоль траектории нам не важно, как он будет повернут в направлении движения. Но если мы аналогичным образом задаем траекторию полета птицы, то на некоторых участках кривой окажется, что птица летит хвостом вперед .
Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).
Рис. 18. Если поставить флажок Orient to Path , птица будет лететь головой вперед
Необходимо поставить флажок Orient to Path , и движение птицы изменится на вполне привычное (исходник к данному ролику — полет птицы.fla).
Рис. 19. Добавление одноцветного фона
Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.
Если мы хотим добавить фоновый рисунок, нам понадобится для этого отдельный слой. В принципе, программа Flash предлагает возможность создания системы слоев, сходной с теми, что используются в классической анимации, при которой фон и различные подвижные объекты рисуются каждый на своем слое прозрачной пленки.
Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).
Рис. 20. На новом слое создадим неподвижный фоновый объект
Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.
Подредактируем объекты фильма (для того чтобы птица кружила на фоне солнца, изменим траекторию ее полета и поменяем соотношения размеров солнца и птицы) и получим следующий ролик .
Рис. 21. Для анимации облака создадим отдельный слой
Теперь добавим к нашей анимации подвижные объекты, например облако. Для облака создадим новый слой и на нем зададим анимацию трансформации движения. Для того чтобы облако влетало в сцену, расположим его, как показано на рис. 21. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле
