Разделы сайта
Выбор редакции:
- Отслеживание сдэк Можно ли забрать посылку на складе сдэк
- Найти перо птицы: что сулит примета?
- Особенности увольнения женщины с ребенком Имеют ли право сокращать на производстве вдов
- Броненосцы типа "андрей первозванный" 254 мм пушки броненосца андрей первозванный
- Инсценировка музыкальной сказки для детей старшей группы (5—6 лет) I
- Организация (предприятие) и ее основные характеристики
- Селекция наука о создании новых пород животных Понятие о породе, сорт, штамм
- Патологоанатом, основные компетенции Различая в работе
- Управление социальной защиты населения на уровне муниципального образования введение
- Как узнать о плановой проверке моего предприятия
Реклама
Анимация движения flash. Анимация движения по заданной траектории. Замедление движения в начале и конце |
Делать flash-ролики с анимацией движения , но это движение было по прямой. Теперь пора разобраться, как делать движение по заданной траектории. Для задания траектории нам понадобится дополнительный слой. Откройте программу Macromedia Flash Professional 8 , и создайте в ней новый документ. Слои создаются на временной ленте с помощью нажатия иконки Insert Layer (вставить слой). Для создания нового слоя можно также выбрать в меню Insert — Timeline — Layer . Так создается обычный слой. Возможно, Вы это уже делали, когда создавали без траектории. Но теперь Вам понадобится направляющий слой. Он создается с помощью иконки Add Motion Guide (добавить направляющую движения), или с помощью меню Insert — Timeline — Add Motion Guide . Создайте его, он у Вас появится на временной ленте выше основного слоя. Если направляющий слой будет ниже — он не будет работать. В таком случае его нужно перетащить мышкой вверх. Выделяете в основном слое первый кадр, с которого начнется анимация движения, и если он не ключевой, делаете его ключевым с помощью меню Insert - Timeline - Keyframe (или с помощью нажатия на него правой клавишей мыши и выбора Insert Keyframe ). Размещаете на этом кадре объект. Это может быть импортированная картинка, группа объектов, или текст. Если Вы импортируете картинку, сначала подготовьте ее в графическом редакторе, и затем в программе Macromedia Flash выберите в меню File — Import — Import to Stage . Если объект рисованный, то сгруппируйте его с помощью меню Modify — Convert into Symbol . Затем выбираете на основном слое последний кадр, которым будет заканчиваться анимация движения, и делаете этот кадр ключевым. В этом кадре перетаскиваете объект в конечное положение, в котором он будет находиться в конце анимации движения. Выделяете первый кадр в направляющем слое, если он не ключевой, делаете его ключевым, и размещаете на нем траекторию движения: выделяете первый ключевой кадр в направляющем слое, и создаете траекторию любыми инструментами, которые создают линию. Это может быть ломаная, кривая, часть окружности и так далее. После этого выделите первый кадр, и перетащите объект на начальную точку траектории. Объект на начальной точке должен закрепиться. Вы увидите, как он притянется к начальной точке — контуры объекта станут жирнее. Чтобы в программе Macromedia Flash Professional 8 объект притянулся, в меню View — Snapping должны быть включены пункты Snap to Guides (захват по направляющим) и Snap to Objects (захват по объектам). Также проверьте, включен ли пункт Snap Align (захват по выравниванию). Хотя последний пункт на притяжение объекта к траектории не влияет, все же его лучше тоже включить. Теперь перейдите программе Macromedia Flash на конечный кадр. Выделите его в направляющем слое, и выберите в меню Insert — Timeline — Frame . Добавится обыкновенный кадр, не ключевой (для добавления можете также нажать правой клавишей мыши на кадр, и выбрать Insert Frame ). Таким образом, у Вас будет на конечном кадре в основном слое ключевой кадр, а в направляющем слое простой кадр. После этого в последнем кадре притяните объект к конечной точке траектории. Далее делаете в программе Macromedia Flash анимацию движения: выделяете какой-нибудь промежуточный кадр между начальным и конечным, и в панели Properties выбираете в списке Tween (заполнение кадров) пункт Motion (движение). Если Вы хотите, чтобы объект поворачивался по направлению траектории, а не просто перемещался, включаете в панели свойств пункт Orient to Path (если этого свойства Вы не видите, нажмите на белый треугольник в правом нижнем углу панели свойств). Также в панели свойств в программе Macromedia Flash Professional 8 Вы можете добавить следующие свойства для Вашей анимации движения: Scale (масштаб): при включенной опции, если размер или форма объекта в начальном или конечном ключевых кадрах будут изменены, то это изменение во время анимации движения будет происходить плавно. Ease (замедление): используется, если нужно ускорить, или замедлить движение. Для применения опции передвиньте бегунок вверх или вниз, или впишите в окошко цифры от −100 до 100. Rotate (вращение): объекты при движении вращаются по или против часовой стрелки, Количество оборотов объекта во время анимации движения прописывается в окошке. Задание: сделать flash-ролик с анимацией движения по траектории. Вот, что получилось у меня: В этом flash-ролике я использовал, кроме анимации движения (кораблик) также (слова) и (волны). Видео о том, как сделать анимацию движения по траектории в программе Macromedia Flash Professional 8Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам. Также Вы можете подписаться на блог, и узнавать о всех новых статьях. Вся работа по созданию фильма происходит с помощью панели Timeline (Шкала времени), изображение которой приводится ниже. Панель Timeline разделена на две части вертикальной линией, которую можно перемещать мышкой. Правая часть панели представляет собой так называемую "линейку кадров" — линейку, на которой располагаются символы кадров, имеющие вид небольших прямоугольников. Содержанием кадров являются сменяемые во времени статические картинки, появляющиеся на рабочем поле. Нумерация кадров представлена в верхней части линейки. Под линейкой кадров располагается "строка состояния". Ключевые кадры
— это кадры, в которых размещаются статические картинки, "оживающие" при анимации. Нажатие клавиши — основной инструмент при работе с анимацией во Flash. На ней отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash. С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и целые куски анимации. Основные возможности временной шкалы:
Ниже приводится пример анимационного ролика, в котором в разных слоях со сдвигом в 25 кадров, помещён разный фон (пейзаж) с соответствующим текстовым блоком. Пейзаж получен заливкой фона растровым изображением Color Mixer->Bitmap с последующей обработкой инструментом Трансформатор заливок.
В Macromedia Flash существуют два принципиально разных способа анимировать что-либо:
Пошаговая (покадровая) анимацияЭто анимация, полностью составленная из ключевых кадров. Т.е. Вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Перед тем как нарисовать очередной кадр надо вставить пустой ключевой кадр ( К достоинствам этого способа можно отнести:
К недостаткам можно отнести следующее:
Элементарные операции с кадрами:
Элементарные операции с роликом:
Создадим многослойный фильм с пошаговой анимацией «Жизнь цветка». 1-й слой — рамка, 2-й слой — горшок, 3-й слой — цветок. Можно 3-й слой представить тремя слоями: лист, стебель, соцветие. Горшок и рамка находятся всё время перед нашими глазами, а цветок за 25 ключевых кадров успевает вырасти и увять. В слое «цветок» каждый кадр отличается от предыдущего, но можно сделать изменение состояния цветка чере один кадр. Публикация ролика происходит с помощью File->Publish Setting. На вкладке Formats выбираются варианты публикации, их можно выбрать несколько, на соответствующих вкладках задаются параметры для выбранного варианта публикации, затем нажимается кнопка Publish. При этом, созданные файлы сохраняются в той же папке, что и исходный файл с расширением.fla. В нашем примере для публикации выбран вариант Gif-анимированный файл, как и во всех последующих примерах. Второе задание попробуйте выполнить самостоятельно, используя ниже приведённый алгоритм. Это будет создание анимации «Движущийся автомобиль»:
В качестве ещё одного самостоятельного задания можно предложить создать пошаговую анимацию "Горение спички": Во Flash существует два варианта построения промежуточных изображений — motion tweening (построение анимации на основе модификации символов) shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне. Анимация движенияПри таком способе анимации задают начальное положение, цвет, размеры, ориентацию и конечные параметры, а программа сама осуществляет это движение. При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что Вы рисуете объект, потом на другом кадре производите изменения, о которых мы поговорим ниже, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и Вы получаете плавную анимацию. Скорость и плавность анимации зависят от количества кадров, которые отведены под движение и скорости Flash фильма (movie). Скорость фильма можно изменить следующим образом: Modify->Movie…, Рассмотрим анимацию с построением промежуточных кадров (tweened motion). Это наиболее часто используемая техника анимации во Flash. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения. При использовании Motion Tweening модифицируются следующие параметры:
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening — с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации. Слои, которые содержат кривую, по которой должен двигаться объект называются направляющими слоями (guide layers) (т.е. они содержат траекторию движения объекта). Для того, чтобы добавить направляющий слой, нужно Выбрать слой, на котором находится ваш символ; затем Нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим. Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Всё! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым. Теперь, чтобы использовать этот слой, нужно взять символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию — ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели Frame нужно включить флажок Orient to path. Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows ->Panels ->Effects), выбрать нужный эффект, установив яркость, цветовое смещение, оттенок. Создайте самостоятельно очень простой пример анимации движения шара по кругу, пользуясь ниже приведённым алгоритмом:
Следующий пример несколько сложнее — это создание анимации движения букв текста:
Анимация формы — это плавное изменение объекта анимации на рабочем поле. Под объектом понимаем здесь не группу или текстовый блок, как при анимации движения, а обычный многоцветный рисунок, который может состоять из нескольких фрагментов. Более того, количество таких фрагментов в начале и в конце анимации может быть различным. В процессе анимации формы рисунок может распадаться на песколько независимых фрагментов, каждый из которых постепенно преобразится во что-то неожиданное. Или, наоборот, несколько независимых изображений, находящихся на рабочем поле, в процессе анимации, постепенно меняя свой облик (размеры, цвет, форму), становятся частью единого изображения. Скажем, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетёк в силуэт волка. В этих случаях используется shape tweening. Как обычно, Вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как есть два ключевых кадра, надо сделать активным первый из них (просто переходите на него), и выбирать на панели Frame (Windows->Panels->Frame, При использовании shape tweening необходимо задать два параметра:
Последний инструмент в анимации shape tweening — контрольные точки (shape hints, дословно — подсказки для форм). Это точки, с помощью которых Вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм.
Пользоваться ими очень легко. На первом ключевом кадре (с которого начинается анимация) Вы добавляете контрольную точку (Modify->Transform->Add shape hint, Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27. Вариантов перехода из одной формы в другую может быть множество, поэтому анимация может пойти и по тому пути, который устроит Вас в меньшей степени. Даже преобразование такой простой геометрической фигуры, как прямоугольник, расположенный вертикально, в такой же прямоугольник,
но расположенный горизонтально, может происходить по разному. Например, в процессе такого преобразования фигура может побывать в форме овала или даже круга. Для контроля анимационного процесса нужно постараться упростить анимацию, разделив рисунки на несколько
независимых фрагментов, расположенных в разных слоях, но одновременно участвующих в анимации. Более координальным приёмом является применение меток формы, о которых говорилось выше. Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None. Ниже приводится на этот способ анимации пример «превращения» слона в овцу и обратно. Попробуйте самостоятельно создать анимацию формы "превращения" змеи в орла и обратно: Часто в процессе анимации необходимо, чтобы объект двигался не по прямой, а по заданной траектории. Анимация в этом случае создаётся обычным образом, а траектория рисуется в отдельном слое. Слой траекторий может обслуживать несколько разных анимаций, каждая из которых размещена в отдельном слое,
но все эти слои с анимацией должны располагаться под слоем траекторий. Для рисования траектории можно использовать различные инструменты: Карандаш, Кисть, Перо, Эллипс, или Прямоугольник.
Чтобы привязать движущийся объект к этой траектории нужно в начальном и конечном ключевых кадрах анимации просто перенести этот элемент на траекторию.
При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включён флажок Snap (привязать). Для этого нужно предварительно выделить первый ключевой кадр анимации,
полезно также выбрать команду View/Snap to Objects. Для примера, создадим ролик «Полёт бабочки над цветком», по ниже приведённому алгоритму: Этот слой призван закрывать и делать невидимой часть изображения, расположенного непосредственно под ним. Если слой-маска не содержит никакого изображения, то он полностью закрывает
собой (маскирует) расположенный ниже и связанный с ним слой, который называется маскируемым слоем
. Если же в слое-маске что-то нарисовано, то любая заливка этого рисунка становится прозрачной частью слоя.
Если анимировать изображение, созданное в слое-маске, то прозрачная часть маски будет перемещаться по экрану. Слой-маска может маскировать несколько слоёв. Сделать обычный слой маскируемым можно,
изменив его положение в стеке слоёв. Нужно просто перенести мышкой обычный слой под слой-маску.
Анимация в этом случае может быть двух видов. Либо анимация объектов, расположенных на маскируемых слоях. Либо анимация изображения, находящегося на слое-маске. Пример создания эффекта постепенного появления текста на экране буква за буквой. Для этого используем анимацию движения изображения, находяшегося в слое-маске, используя следующий алгоритм: Ниже приводится gif-анимированный файл, в котором используется анимация формы букв текста "С Новым Годом", а затем появившийся текст "стирается", с использованием слоя-маски, прямоугольника с градиентной заливкой,
поэтому получается эффект "переливчатости" букв. Фоном является фрагмент растровой графики. Следующий пример демонстрирует «вырастание» из точки слова, где в качестве маскируемого слоя используется импортированная растровая графика, а в слое-маске создана анимация, в которой из точки вырастает слово, а затем оно опять уменьшается.
В данном примере также используется анимация формы. Кнопка — специальный вид символа, предназначенный для реагирования на действия пользователя, например, нажатия на саму кнопку, её клавишный аналог или активную область в фильме.
Временная шкала кнопки содержит следующие четыре кадра: Если необходимо создать несколько одинаковых кнопок, то в этом случае достаточно создать только один образец кнопки. А далее нанести на него необходимые надписи, менять цвет или размер.
Если кнопка должна содержать анимированные объекты, для этого необходимо заранее создать символы Movie clip, а затем просто разместить их в соответствующем кадре кнопки. В качестве примера создадим кнопку со встроенной анимацией по ниже приведённому алгоритму: Публикация данного объекта выполнена в режиме HTML с указанием на соответствующий swf-файл. Создадим кнопки, управляющие работой слайд-шоу: On (release) { GotoAndStop(k); — цифра в скобках указывает на номер соответствующего кадра. On (press) { GotoAndStop("begin)"; On (press) { Root.prevFrame (); On (press) { Root.nextFrame (); On (press) { GotoAndStop("end"); Ниже приводится результат нашей работы: При создании анимаций с использованием языка ActionScript часто используется трёхкадровый цикл. В первом кадре (подготовка) записываются начальные данные, во втором кадре
размешаются элементы тела цикла, а втретьем кадре пишется команда вернуться во второй кадр gotoAndPlay (2);. Работа трёхкадрового цикла заключается в попеременном просмотре
кадров, участвующих в цикле, до тех пор пока не будет выполнено условие выхода из цикла. Рассмотрим использование трёхкадрового цикла на примере создания движения маски. Наш фильм будет состоять из трёх слоёв:
<маскируемый клип>.setMask (<клип-маска>) При каждом обращении ко второму кадру клип Mask будет поворачиваться на 2°. Перед глазами пользователя вращается окно, имеющее форму клипа Mask,
сквозь которое видна часть клипа Masked. Научимся управлять цветом экземпляра библиотечного клипа. Создадим фильм, в котором на фоне восходящего солнца разнонаправленно вращаются звёзды, изменяя свой цвет. Экземпляр объекта Color создаётся с помощью конструктора в среде ActionScript и имеет следующий формат: <имя экземпляра объекта Color> = new Color (<имя экземпляра клипа>) OnClipEvent (load) { Star1Color = new Color(this); ColorTransform = {rb:0, gb:255, bb:255}; G = 255; B = 255; Step = 5; OnClipEvent (enterFrame) { G -= step; ColorTransform.gb = g; If (r >=0 && b == 255 && g == 0) { R += step; ColorTransform.rb = r; If (g == 0 && r == 255 && b B -= step; ColorTransform.bb = b; If (b == 0 && r == 255 && g >=0) { G += step ; ColorTransform.gb = g; If (g == 255 && b == 0 && r R -= step; ColorTransform.rb = r; If (r == 0 && g == 255 && b>=0) { B += step; ColorTransform.bb = b; Star1Color.setTransform(colorTransform); This._rotation -= 3; Кнопки и меню — это одна из самых главных частей сайта и любого другого приложения, где важна интерактивность. Создадим Flash-меню. on (release) {getURL ("1.html", "_self");} В зависимости от располагаемого времени, сюжета фильма и собственных художественных способностей вы можете выбрать один из двух способов «оживления» персонажей вашего фильма: Необходимо отметить, что оба механизма могут использоваться совместно, причем не только в рамках одного фильма, но и применительно к одному объекту. Например, более сложные в сюжетном плане фрагменты могут быть основаны на покадровой анимации, а фрагменты с «предсказуемым» развитием сюжета получены с помощью автоматической. Такое объединение возможно благодаря использованию для каждого объекта единой оси времени, представленной в окне редактора временной диаграммой - - Time Line. Объединив на одной временной диаграмме «линии жизни» нескольких объектов, можно получить сцену, в которой участвуют несколько «персонажей». Особенность применения автоматической анимации состоит в том, что с ее помощью можно анимировать только один объект на данном слое. Для создания сцены, в которой предполагается наличие нескольких анимированных объектов, требуется разместить каждый из них на отдельном слое (подробнее об использовании слоев см. следующую главу - «Слои»). Независимо от того, какой механизм используется для создания отдельных кадров, суть анимирования заключается в том, чтобы отразить изменение объекта во времени. Вы можете создать фильм, в котором в течение часа один и тот же шар будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга больше, чем однояйцевые близнецы, и зритель не сможет отличить ваш «мультик» от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их в один и тот же момент времени. Результат будет прежним - зритель не сможет увидеть происходящее на сцене. Таким образом, основной принцип анимации - каждому моменту времени - свой кадр. Соответственно, процедура создания простейшего анимированного фильма во Flash
состоит в том, чтобы подготовить изображения объекта, отражающие его изменение, и расставить их по временной оси. В любой Flash
-фильм может быть добавлен текст. Подобно работе в обычных текстовых редакторах, для текста может быть установлен размер, шрифт, стиль, интервал, цвет и способ выравнивания. Вы можете трансформировать шрифт подобно другим объектам - поворачивать, масштабировать, наклонять. При этом сохраняется возможность редактирования его символов. На основе фрагмента текста может быть создана гиперссылка. Flash
-фильм может содержать динамические текстовые поля, а также поля, редактируемые пользователем. Редактируемые поля в Flash-фильме имеют то же предназначение, что и текстовые поля, помещаемые в форму на Web-странице: с их помощью от пользователя может быть получена та или иная информация, подлежащая обработке на сервере или клиентским сценарием. И, наконец, в Flash MX вы можете создавать прокручиваемые многострочные текстовые области. При необходимости текст может быть конвертирован в графический объект, и тогда с его символами разрешается работать как с отдельными графическими фигурами. Итак, для создания покадровой анимация требуется предварительно подготовить (или, по крайней мере, продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство. Плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит «мультик», тем ближе движения персонажей к естественным. Поэтому создание покадровой анимации является весьма кропотливым делом. Ее целесообразно применять в тех случаях, если объекты видоизменяются или взаимодействуют друг с другом каким-либо сложным образом. Кроме того, покадровая анимация используется во Flash
при описании поведения интерактивных элементов фильма, например, кнопок. Каждому состоянию кнопки соответствует определенный ключевой кадр на временной диаграмме. Основное отличие описания поведения кнопки от «обычной» анимации состоит в том, что состояние кнопки зависит не от времени, а от действий пользователя. Подробнее вопросы включения в фильм элементов управления рассмотрены в главе «Создание интерактивных фильмов». Основным инструментом при создании покадровой анимации
является панель временной диаграммы. С ее помощью вы можете создавать, удалять и перемещать кадры анимации, изменять режимы просмотра отдельных кадров и всей сцены, выполнять другие операции. Элементы интерфейса временной диаграммы были рассмотрены в разделе «Организация пользовательского интерфейса» третьей главы (см. рис. 3.7). Теперь пришло время поговорить о том, какую роль играет каждый из этих элементов при создании «мультика». Замечание
В данной главе все наше внимание будет сосредоточено лишь на правой части временной диаграммы, поскольку вопросам применения слоев посвящена отдельная глава. Соответственно, во всех рассматриваемых здесь примерах используется только один слой, параметры которого установлены по умолчанию и нами не изменяются. Итак, вспомнив о временной диаграмме, можно сказать, что мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе. При воспроизведении мультика эффект анимации достигается за счет того, что картинки на столе сменяют друг друга. Каждый покадровый мультик характеризуется двумя основными параметрами: В общем случае оба эти параметра влияют на создаваемый визуальный эффект (на плавность или, наоборот, дискретность движений, «превращений» и т. д.). Но все же ведущая роль здесь принадлежит первому параметру, а также тому, насколько сильно последующий ключевой кадр отличается от предыдущего. На временной диаграмме ключевые кадры изображаются серыми прямоугольничками с черной точкой внутри. При воспроизведении фильма считывающая головка перемещается от одного кадра к другому, отмечая текущий кадр. Чтобы увидеть изображение, связанное с конкретным кадром, необходимо щелкнуть мышью на значке этого кадра на временной диаграмме. На рис. 6.1 показаны в качестве примера два ключевых кадра (первый и последний) небольшого мультика «про часы», в котором один кадр отличается от другого положением минутной стрелки. Всего мультик содержит 6 кадров, частота смены кадров равна 2. Рис. 6.1.
Два кадра из мультика «про часы» К примеру с часами мы еще вернемся, а для описания процедуры создания покадровой анимации воспользуемся другим примером. Предположим, что «героем» фильма будет шар, который падает и разбивается на три части. Будем считать, что для раскрытия столь сложного сюжета достаточно пяти кадров: С учетом описанного сюжета, последовательность работы должна быть следующей: Рис. 6.2.
Изображения, соответствующие кадрам будущего фильма Рис. 6.3.
Вид окна Flash после создания первого кадра После выполнения завершающего шага окно Flash
должно выглядеть примерно так, как показано на рис. 6.4. Рис. 6.4.
Вид окна Flash после создания завершающего кадра анимации Собственно, на этом создание первого «мультика» закончено. Не забудьте только сохранить его на диске: он нам еще понадобится при изучении других видов анимации. После завершения работы полезно проверить, все ли получилось так, как вы хотели. Чтобы воспроизвести фильм, достаточно просто нажать клавишу В рассмотренном нами примере изображения, составляющие содержание кадров, были созданы заранее, на столе другого фильма. Однако для большинства несложных фильмов удобнее создавать изображение кадра непосредственно на столе текущего фильма. Для этого необходимо: В результате тестирования может оказаться, что созданный «мультик» не в полной мере соответствует авторскому замыслу, и требуется его подправить. Как и при создании «мультика», при его редактировании удобнее всего работать с панелью временной диаграммы, а точнее -с контекстными меню
этой панели. Напомним, что контекстное меню связано с определенным объектом и содержит команды, которые могут быть применены к данному объекту в текущей ситуации (в данном контексте). Для каждого вида кадров временной диаграммы предусмотрено собственное контекстное меню. Например, существует контекстное меню ключевого кадра, контекстное меню «обычного» кадра (Frame), контекстное меню кадров tweened-анимации. Если на начальных этапах освоения у вас будут возникать трудности в определении типа кадра, то вы можете воспользоваться всплывающей подсказкой. Она появляется на экране при наведении указателя мыши на значок кадра (рис. 6.5). Правда, при этом следует иметь в виду, что все кадры, не относящиеся к tweened-анимации, обозначаются в данном случае как Static (Статичные), что показано на рис. 6.5 справа. Рис. 6.5.
Всплывающие подсказки с указанием типа кадра Flash предоставляет следующие возможности по редактированию анимированной последовательности: Свойства отдельного кадра можно также изменить с помощью панели инспектора свойств кадра. Для любого «статичного» кадра (то есть кадра, не являющегося частью tweened-анимации), эта панель содержит один и тот же набор элементов (рис. 6.6): Рис. 6.6.
Инспектор свойств «статичного» кадра Во многих случаях бывает удобно видеть на столе одновременно содержание всех ключевых кадров анимации. Flash
обеспечивает несколько вариантов такого совмещения. Выбор варианта производится с помощью кнопок, расположенных у нижнего края панели временной диа!раммы (рис. 6.7): Рис. 6.7.
Кнопки управления отображением кадров анимации Рис. 6.8.
Эффект применения различных режимов просмотра кадров Рис. 6.9.
Меню с командами изменения параметров граничных маркеров Замечание
Обратите внимание, что когда вы щелкаете мышью на значке ключевого кадра в панели временной диаграммы (и тем самым выбираете его), то на столе появляется картинка, соответствующая выбранному кадру. При этом все графические объекты, образующие кадр, также отображаются как выбранные. Flash может создавать два типа tweened-анимации: Анимация движения может быть автоматически построена для экземпляра символа, группы или текстового поля. При создании анимации движения требуется установить для некоторого кадра такие атрибуты объекта, как позиция на столе, размер, угол поворота или наклона, и затем изменить значения этих атрибутов в другом кадре. Flash
интерполирует значения изменяемых атрибутов для промежуточных кадров, создавая эффект последовательного перемещения или преобразования. Вы можете создавать анимацию движения, используя один из двух методов: Для описания обоих вариантов воспользуемся простейшим примером: предположим, что требуется «перекатить» шарик через стол слева направо. Итак, для анимации движения шарика с помощью инспектора свойств кадра требуется выполнить следующие действия. Рис. 6.10.
Вид панели временной диаграммы после выполнения 4-го шага Рис. 6.11.
Вид панели временной диаграммы после завершения создания анимации Если на панели временной диаграммы вместо стрелки появилась пунктирная линия, значит вы в чем-то ошиблись. Взгляните на панель инспектора свойств кадра: если там появилась кнопка с предупреждающим знаком (рис. 6.12), то Flash пытается сообщить вам об этом. Щелкните на этой кнопке, чтобы открыть окно с пояснениями по возникшей ситуации. Рис. 6.12. Вид
панели инспектора свойств кадра при наличии ошибки Возможны две основные причины неудачи: либо вы пытаетесь анимировать не сгруппированные объекты (в рассматриваемом примере - контур и заливку), либо данный слой содержит более одного сгруппированного объекта или символа. Во многих случаях оказывается достаточным удалить лишний объект, чтобы Flash
выполнил анимацию. Если этого не произошло, после исправления ошибки повторите процедуру создания tweened-анимации еще раз. Для воспроизведения «мультика» используются те же средства, что и для покадровой анимации - можно просто нажать клавишу Для анимации движения шарика с помощью команды Create Motion Tween требуется выполнить следующие действия (считаем, что шарик в первом кадре уже присутсвует). Рис. 6.14.
Вид панели временной диаграммы после выполнения команд Insert Frame Рис. 6.15.
Вид окна Flash после завершения создания анимации Создание анимации на этом завершено. Если вы теперь взгляните на панель инспектора свойств кадра, то увидите, что в списке Tween выбран вариант Motion. Замечание
Обратите внимание, что в результате создания tweened-анимации движения с помощью команды Create Motion Tween все кадры на временной диаграмме обозначены как tweened-анимированные, в то время как при использовании инспектора свойств последний кадр остался «просто ключевым» (см. рис. 6.11). Наличие такого ключевого кадра обеспечивает большую гибкость при последующем редактировании фильма. После того, как построите с помощью Flash tweened-анимацию, вы можете скорректировать те или иные ее параметры. Редактирование параметров анимации удобнее всего выполнять с помощью панели инспектора свойств кадра. При этом следует иметь в виду следующее обстоятельство. Несмотря на то, что на временной диаграмме все кадры tweened-анимации выглядят как одно целое, вы можете выбрать любой из них в отдельности, щелкнув мышью в соответствующей позиции временной диаграммы. В результате на столе появится изображение, относящееся к данному кадру, а на панели инспектора свойств - параметры этого кадра. Прежде, чем перейти к описанию возможных способов редактирования «мультика», необходимо сделать одно важное замечание. Все стандартные операции трансформации объекта, которые выполняются с помощью инструментов панели Tools (например, наклон, изменение размера, преобразование круга в овал и т. п.) при создании автоматической анимации не рассматриваются во Flash
Итак, для кадра, входящего в tweened-анимацию движения, на панели инспектора свойств могут быть установлены следующие параметры (рис. 6.16): Рис. 6.16.
Формат панели инспектора свойств для кадра tweened-анимации движения Рассмотрим подробнее процедуру анимирования изменения размеров объектов. Для этого вернемся к примеру с шаром. Предположим, что, достигнув правого края стола, он должен уменьшаться. Решение задачи заключается в выполнении следующих действий: Все. Процесс завершен. Осталось только протестировать результат, нажав клавишу Рис. 6.17.
Вид временной диаграммы после создания второго отрезка анимированной последовательности Покадровая и автоматическая анимация могут использоваться в одном фильме и даже для одного и того же объекта. Причем Flash
абсолютно безразлично, в каком порядке они будут чередоваться. Поясним технику совмещения покадровой и автоматической анимации при описании поведения одного объекта на примере все того же шарика. Сюжет фильма достаточно прост: шарик катится через стол, затем падает и разбивается. Первая часть этой занимательной истории будет реализована на основе tweened-анимации, вторая --на основе покадровой. Собственно говоря, оба фрагмента были уже созданы нами ранее, и теперь остается только объединить их в один фильм. Итак, чтобы получить фильм, совмещающий оба вида анимации, необходимо: Рис. 6.18.
Временная диаграмма фильма, совмещающего покадровую и tweened-анимацию Замечание
Если фильм формируется на основе фильмов, созданных ранее, можно просто скопировать в новый фильм необходимые кадры с помощью команд Сору и Paste. При этом в новый фильм будет перенесено и содержание кадров. Если в копируемых кадрах используются символы, то они будут добавлены в библиотеку нового фильма. В завершении приведем еще один небольшой пример, иллюстрирующий особенности применения tweened-анимации движения для текстовых блоков. В этом примере движения как такового нет - просто в качестве заключительного кадра анимации используется зеркальное отражение текста, полученное с помощью инструмента Free Transformation. А вот как выглядят промежуточные кадры, созданные Flash
(рис. 6.19). Рис. 6.19.
Пример tweened-анимации движения для текстовых блоков Используя анимацию трансформации, вы можете создавать эффект плавного «перетекания» объекта из одной формы в другую. Причем результирующая форма может не иметь абсолютно ничего общего с исходной. Например, в электронной справочной системе Flash
приведен пример «превращения»(рис. 6.20). Рис. 6.20.
Пример трансформации объекта Еще раз повторим, что анимирование стандартных операций видоизменения объекта, которые выполняются с помощью инструментов панели Tools (наклон, изменение размера и т. п.) не рассматриваются во Flash
как операции трансформации и могут быть добавлены в качестве «сопутствующих» изменений при создании анимации движения объекта. Совет
Как правило, наилучший визуальный эффект Flash
обеспечивает в том случае, если одновременно трансформируется не более одного объекта. Если же вам требуется одновременная трансформация нескольких объектов, то все они должны располагаться в одном слое. Flash не может автоматически анимировать трансформацию символов, сгруппированных объектов, текстовых полей и растровых изображений. Чтобы сделать объекты этих типов доступными для автоматической трансформации, к ним требуется применить процедуру разбиения (Break Apart). Если вы решили включить в свой фильм tweened-анимацию трансформации, имейте в виду следующее обстоятельство. По умолчанию Flash
пытается произвести переход от одной формы к другой «кратчайшим путем». Поэтому промежуточные кадры могут оказаться весьма неожиданными для вас. В качестве иллюстрации к сказанному ниже приведен рисунок (рис. 6.21), на котором показан промежуточный кадр трансформации уже знакомых вам «часов». Здесь с помощью tweened-анимации минутная стрелка пытается «переползти» с 12 на 6 «короткой дорогой». В отличие от анимации движения, tweened-анимация трансформации может быть создана только одним способом - с помощью панели инспектора свойств кадра. Для пояснения технологии создания такой анимации вернемся к примеру с «часами»: предположим, что требуется переместить минутную стрелку с «12» на «6». При решении указанной задачи требуется выполнить следующие действия. Рис. 6.21.
Пример промежуточного кадра при tweened анимации трансформации Рис. 6.22.
Вид временной диаграммы при анимировании трансформации объекта Выбор пункта Shape в списке Tween приводит к изменению формата панели инспектора свойств. С ее помощью могут быть установлены следующие дополнительные параметры анимации трансформирования объекта (рис. 6.23): Рис. 6.23.
Параметры анимации трансформирования объекта Замечание
Обратите внимание, что для создания анимации трансформации объекта не требуется (более того - нельзя)
выполнять группирование контура и заливки, равно как и других элементов изображения, подлежащих трансформированию. Достаточно все эти элементы просто выбрать с помощью инструмента Arrow. Для управления.более сложными изменениями формы используются так называемые узловые точки формы (shape hints), которые определяют, как фрагменты первоначальной формы будут перенесены в новую форму. Другими словами, узловые точки используются для идентификации тех точек исходной формы, взаимное расположение которых требуется сохранить. Наиболее характерный пример использования узловых точек - анимация мимики лица, при которой некоторые его части (глаза, в частности) не должны участвовать в трансформации. На рис. 8.24 показаны два варианта трансформации - без расстановки и с расстановкой узловых точек. Во втором варианте глаза трансформации не подвергаются. Рис. 6.24.
Пример трансформации без расстановки и с расстановкой узловых точек Узловые точки обозначаются на изображении небольшими кружками с буквами. Буквы (от а до z) используются в качестве имен (идентификаторов) узловых точек. Каждой узловой точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 узловых точек (по числу букв алфавита). Узловые точки на исходном изображении окрашены в желтый цвет, на результирующем - зеленым. Для расстановки узловых точек требуется выполнить следующие действия: Замечания
Совет
Если вы используете при трансформации несколько узловых точек, то выполняйте их расстановку по часовой стрелке, начиная с левого верхнего угла изображения. Это обусловлено тем, что Flash обрабатывает узловые точки в алфавитном порядке. После расстановки узловых точек целесообразно провести тестовый запуск фильма и при необходимости скорректировать расстановку точек. Чтобы изменить положение узловой точки, достаточно просто перетащить ее на новое место (это можно сделать как на первом, так и на последнем кадре последовательности). Кроме того, всегда можно удалить лишние точки или добавить новые. После того, как результат вас удовлетворит, вы можете спрятать (скрыть) узловые точки. Перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, следует щелкнуть на одной из узловых точек правой кнопкой мыши. Меню содержит четыре команды (рис. 6.25), из которых первые три доступны только для узловых точек исходного изображения: Рис. 6.25.
Контекстное меню узловой точки Мы возьмем в качестве персонажа вот такого кота. Он будет следить за появлением мыши в кадре, и размахивать хвостом. Персонаж состоит из следующих объектов, находящихся на разных слоях: Анимация глаз для него уже готова в отдельном символе. Сейчас нас интересует анимация хвоста. Так что мы смело можем продлить на них анимацию до нужно количества кадров, например, 20 (используем f5
) и блокировать ненужные нам слои, чтобы они не мешались. Теперь хвост. На первом кадре у нас находится первая позиция хвоста, на 10 сделаем вторую позицию. Я просто отразила хвост слева направо – Модификация – Преобразовать – Отразить слева направо.
На слое «Хвост» на 5 кадре создайте пустой ключевой кадр. Для этого щелкните по нему левой клавишей мыши и нажмите F6. Далее нажмите Delete, чтобы удалить все содержимое. Здесь у нас будут располагаться линии скорости. Для удобства включите под временной шкалой функцию «Многослойная структура
» или как по-другому ее называют «луковая шелуха», настройте ее диапазон между двумя состояниями нашего хвоста. На пятом кадре кисточкой нарисуйте линии скорости, при этом имейте ввиду, что реалистичнее они будут в цвете самого объекта, ну у нас он черный, можно добавить и немного серого для разнообразия. Сделайте линии так, чтобы они не выходили за границы объекта. Теперь нам надо придать большей реалистичности. Для этого зададим в начале небольшую анимацию формы для хвоста. Сделайте 3 кадр ключевым, поменяйте форму хвоста кошки и немного наклоните вправо. Затем щелкните правой клавишей мыши по первому кадру и добавьте анимацию формы.
Теперь сделаем тоже самое для второго состояния хвоста. На 13 кадре создайте ключевой кадр (F6). Перейдите на 10 кадр, немного измените хвост, и наклоните влево. Затем для 10 кадра создайте анимацию формы.
Теперь немного отредактируем кадры. Удалим лишние. Чтобы сделать движение более естественным. И повторим кадры в обратном порядке. При создании мультипликации
движения можно определить движение объекта по
определенной траектории - по прямой линии, по ломанной кривой,
состоящей из отрезков прямой линии, и по гладкой кривой линии. Анимация движения по прямой
Пример 1:
Создадим движение самолета по прямой линии. В
монтажном кадре вставьте изображение
самолета на левой стороне сцены. Векторное изображение самолета
можно создать в Adobe Flash (см. Рисование
) или импортировать
изображение, созданное на стороне (в формате.png с прозрачным фоном). Выделите самолет на сцене. В контекстном меню самолета выбираем Преобразовать в символ
(Convert to
Sumbol). Выбираем графический тип символа. В контекстном меню изображения выбираем Создать анимацию движения
(Create
Motion Tween). Программа автоматически создает 24 кадра для плавного
изменения. Анимация движения самолета по прямой создана, ее можно просмотреть,
щелкнув по клавише Enter
. Из этого примера можно сделать такие выводы: Длина любого нового участка изменения (tween span), который
автоматически создается програмой, по умолчанию
соответствует установленной скорости мультипликации. Если скорость
мультипликации выбрана 24 кадра в сек., то будет по умолчанию создан
участок изменения в 24 кадра (1 сек мультипликации). Если выбрана
скорость 30 кадров в сек. - участок изменения по умолчанию составит 30
кадров. Чтобы программа смогла создать плавное изменение, вставленный на
сцену объект должен быть преобразован в символ. При этом объект может
быть любым - созданный в Adobe Flash векторный рисунок, текст,
импортированное растровое изображение и пр. Если Вы пытаетесь создать
плавное изменение на несимволе, программа попросит Вас преобразовывать
элемент в
символ (). Только к одному символу может быть примененно плавное изменение
(tweened) за один
раз. Если Вы попытаетесь применить изменение к уровню с
несколькими объектами, программа запросит Вас преобразовать графические
символы в единственный символ. Плавное изменение можно применить для
изменения размеров/масштабирования, изменения цвета и применения
фильтров. Примечание:
плавное изменение для эффектов фильтров применимо только к символам
клипов и кнопок, не применимо к символам графики.
Примечания: Есть несколько способов создать движение объекта по кривой: Вы можете скорректировать путь движения, воздействия не на сам путь, а
на объект (так, как показано на анимации ниже): Создание собственного пути
движения
1. Вставляем на сцену рисунок самолета. 2. Преобразуем рисунок самолета в графический символ 4. При необходимости сглаживаем линию пути, используя инструмент
"Smooth" () внизу Панели инструментов
. 5. Выделяем созданный путь и копируем его в буфер обмена. После этого
сам путь можно удалить. 6. Возвращаемся в слой самолета. Выделяем самолет на сцене, в
контекстном меню выбираем "Создать
анимацию движения
" (Create Motion Tween). 7. Выделяем самолет на сцене, в меню Правка
(Edit) выбираем "Вставить" или "Вставить по месту" (Paste in Place). 8. Для просмотра ставим красный движок на 1-й кадр, щелкаем по клавише Enter
. Вы
можете преобразовать путь движения так же, как и другого графического
объекта. Выберите инструмент свободного
преобразования
(Free Transform) на панели
инструментов и щелкните по пути движения. Можно
изменять масштаб или повернуть путь движения. Можно создать кривизну
пути, используя инструменты выбора и инструмент Преобразовать узловую
точку
(Convert Anchor Point) - этот инструмент скрыт под
инструментом Перо
(Pen) . Нажимают на отправную точку и перемещают маркер начала выделения,
который управляет искривлением пути. 3 Для коррекции пути выберите
инструмент спецвыделения
(Subselection) на панели инструментов. Можно
выделить объект, щелкнуть по нему правой кнопкой мыши, в меню выбрать Создать анимацию движения
. После
этого передвигать движок по Временной
шкале и синхронно передвигать объект по созданной кривой. Примечание:
См. Дополнительно: Чтобы объект двигался от конечной точки к начальной, в контекстном меню
объекта выберите Траектория
движения ( Motion Path
) - Обратная траектория
(Reverse Path).
См. также:
Ориентация объекта при движении Иногда важна ориентация объекта, двигающегося вдоль пути. 1 Щелкните по слою плавного изменения
движения (motion tween) на Временной
шкале
(Графике времени). В нашем примере это слой "самолет". 2. Выделите путь движения, используя инструмент выделения () 3. Правильно установите объект относительно пути движения в
1-и и последнем кадрах анимации. 4. В Инспекторе свойств
выберите Ориентацию по траектории
(Orient to
path) в опции пути. Редактор вставляет крайние кадры для вращения вдоль плавного изменения
движения так, чтобы нос самолета ориентировался по пути движения. Программа автоматически добавляет ключевые кадры, разворачивая самолет
по траектории. Временная шкала будет выглядеть так: Отметьте: Чтобы опция ориентации работала
правильно, самолет в начальной позиции должен быть установлен
правильно, т.е. его нос должен быть направлен вдоль пути движения. |
Читайте: |
---|
Популярное:
Особенности увольнения руководителя организации |
Новое
- Найти перо птицы: что сулит примета?
- Особенности увольнения женщины с ребенком Имеют ли право сокращать на производстве вдов
- Броненосцы типа "андрей первозванный" 254 мм пушки броненосца андрей первозванный
- Инсценировка музыкальной сказки для детей старшей группы (5—6 лет) I
- Организация (предприятие) и ее основные характеристики
- Селекция наука о создании новых пород животных Понятие о породе, сорт, штамм
- Патологоанатом, основные компетенции Различая в работе
- Управление социальной защиты населения на уровне муниципального образования введение
- Как узнать о плановой проверке моего предприятия
- Да уж, теперь не разгонишься