Морфинг отличается от предыдущих типов анимации тем,что работает только исключительно с графическими(векторными) объектами,а не с символами.
Простой способ плавного изменения формы я думаю все встречали на сайтах по флеш(плавное перетекание квадратика в круг),
Это все графические элементы,не думаю,что кто-то будет это делать,интереснее смотреть на картинку в png,как она меняет форму,превращаясь в другую png,но морфинг с растром не работает.Следует выполнить определенный алгоритм действий.
Расскажу на своём примере.
Создаем документ,импортируем в библиотеку нужные нам картинки,заранее подготовленные по размеру и на прозрачном фоне.Сразу делаю акцент - картинка должна быть без градиентов,без теней и желательно не сильно пестрая(программа не сможет её просчитать),кто знает,что такое вектор,тот представляет,сколько плашечек оттенков цвета в какой-нибудь картинке,поэтому согласитесь,что программа Flash предназначена не для основной работы с вектором.
Итак, все загрузили в библ.,идём -вставка- создать символ- в самом символе с библ. вставляем картинку,выделяем,затем -модификация-растровое изображение-векторизация.
Откроется окошечко,если у вас стоит пороговое значение 100,исправьте на 10,а вот значение наименьшая область,можно поэкспериментировать,по умолчанию стоит 1,но это слишком долго прога будет просчитывать(каждую точку цвета),поэтому в зависимости,какая у вас картинка,насколько сложная по цвету,меняете это значение и смотрите,нажав предварительный просмотр,главное,чтобы не сильно исказилось качество,вот на моём примере,как бы 25 многовато,но качество сильно не пострадало,если устраивает результат,нажимаем ок.
Не снимая выделения,нажимаем -копировать
- 
и идем на монтажную сцену,выделяем 1 кадр и на сцене -вставить
.
Передвигать лучше стрелками на клавиатуре,или чтоб было выделено все изображение и стрелка показывала перекрестье,иначе сдвинете по кусочкам,это уже вектор,а не символ.
Выделяем первый кадр и выбираем -создать анимацию формы
,дальше примерно на 60 кадре вставляем пустой ключевой кадр.На шкале дорожка делается точками.
Повторяем действие со второй картинкой(вставка-создать символ-векторизация-...копировать...)
,возвращаемся на сцену,выделяем нужный кадр(у меня 60),
щелкаем по сцене и нажимаем -вставить
,на шкале дорожка меняется.
Я рассказала и показала простой пример,но дополнительно существуют еще инструменты редактирования при работе с морфингом,такие,как добавление хинтов(точек) для точного,плавного морфинга,изменение узловых точек,искажение,сглаживание... и т.д, если кому интересно могу расписать значение этих инструментов.
Проигрываем,смотрим.Вот получилась простая анимация формы.
Шейповая графика в тренде уже последние несколько лет. Однако, за большой популярностью скраывается кропотливая работа по анимации каждого элемента на рабочей области.
Если до этого вы никогда не занимались шейповой анимацией, сейчас - самое время!
Подобрали 30 , которые помогут освоить принцип шейповой анимации, а также научат создавать и экспортировать векторные иллюстрации, подходящие для дальнейшей анимации.
Практическая работа №2:
Создайте анимацию формы для цифры "1", плавно трансформирующейся в цифру "2". Для этого создайте анимацию формы для объекта на первом и последнем кадрах. В качестве объектов используйте цифры, настройте их внешний вид (размер, цвет, положение, воспользовавшись набором свойств на соответствующей панели).
Для создания анимации формы текстового объекта на первом и последнем ключевых кадрах цифры необходимо "разбить" - преобразовать из текста в графику. Это делается таким образом – к выделенному объекту применяется команда разделения (режим меню "Модификация" - "Разделить").
Практическая работа №3:
Получившаяся анимация в предыдущем задании нас может не устраивать по причине "некрасивого" "перетекания" точек объекта на первом кадре в некие точки объекта на последнем кадре. Для улучшения реалистичности преобразования одного объекта в другой необходимо указать – в какую точку объекта на последнем кадре "перетечет" выбранная точка объекта на первом кадре.
Для этого выполним следующие действия (используя анимацию предыдущей работы):
Примеры создания анимации формы приведены в папке " Анимация " - " Анимация формы".
Краткие итоги лекции:
Кроме анимации с изменением свойств объекта (положения, размера, поворота, прозрачности и др.) можно создавать анимацию, в которой происходит изменение формы объекта.
Для создания анимации формы текстового объекта на первом и последнем ключевых кадрах текст необходимо "разбить", преобразовав его в графику.
Для улучшения реалистичности преобразования одного объекта в другой необходимо указать – в какую точку объекта на последнем кадре "перетечет" выбранная точка объекта на первом кадре. Для этого используют точки привязки (хинты кривой).
Если применить анимацию формы к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.
Ключевые термины
Набор для практики:
Упражнения
Анимация типа Shape (форма) позволяет создавать эффекты — метаморфозы, заставляя одну форму «перетекать» в другую. При этом Flash позволяет изменять координаты объекта, его размер и цвет.
Используя этот тип анимации, вы должны помнить, что Flash будет работать только с графическими примитивами (линиями и заливками) и не сможет анимировать группы, символы, блоки текста или растровые изображения. Для того, чтобы всё-таки использовать эти элементы в своей работе, вам необходимо будет разбить их на части (примитивы), используя команду Modify > Break Apart.
Для изучения этого типа расчётной анимации смоделируем метаморфозу, при которой круг будет превращаться в квадрат, в процессе превращения фигура будет двигаться, изменять свой цвет и размер.
Итак, создайте новый документ размером 100x300 px, назовите его metaphor и сохраните на диске.
В первом кадре ролика с помощью инструмента Oval в верхней части сцены нарисуйте круг. Затем перейдите на 20 кадр и сделайте его ключевым. В нижней части сцены на 20 кадре нарисуйте квадрат с помощью инструмента Rectangle, а круг, выделив предварительно инструментом Arrow, удалите. Размер нарисованного вами квадрата должен превышать размер круга. Цвета круга и квадрата подберите самостоятельно, установить фигуры на одной вертикали вы сможете, используя палитру Info.
После того как вы обыграете все эти моменты, вернитесь к 1 кадру и, обратившись к палитре Properties, в разделе Tween установите значение Shape. Обратите внимание, что пространство слоя на палитре Timeline между 1 и 20 кадром залилось светло-салатной краской и от 1 к 20 кадру, протянулась стрелочка. Если вместо стрелочки на палитре протянулась пунктирная линия, это значит, что вы что-то сделали неправильно, например, использовали в своей работе не графические примитивы, а группу или символы…
Протестируйте свой ролик, используя команду Control > Test Movie.
Поэкспериментируйте с палитрой Timeline. Вы можете управлять характером движения, используя уже знакомый вам из материала предыдущей лекции раздел Ease, а также определять характер способа трансформации формы в процессе её метаморфозы. Для этого вам необходимо будет обратиться к разделу Blend (переход), здесь вашему вниманию будут предложены два варианта:
Distributive (размазанный) — контуры линий и заливок в промежуточных кадрах будут сглажены.
Angular (угловатый) — контуры линий и заливок в промежуточных кадрах будут сохранять очевидные углы и прямые линии.
Обратите внимание на палитру Timeline этого ролика, его анимация несколько отличается от приведённого выше описания, я думаю, что, внимательно изучив характер движения фигуры, вы сможете самостоятельно разобраться в содержании верхнего слоя, на котором представлена анимация.
Примечания:
В данной работе частота кадров составляет 24 fps
!
Анимация сопровождается звуком. Для того, чтобы его многократное повторение не походило на агрессивную звуковую атаку, при выполнении публикации, на закладке HTML я намеренно убрала галочку в разделе Loop. Сделано это было, для того, чтобы браузер проиграл ролик только один раз! Если вы хотите просмотреть ролик ещё раз, воспользуйтесь панелью инструментов браузера и обновите страницу. И ещё, на будущее: к использованию звуковых фрагментов в ваших роликах следует относиться очень серьёзно.
Во-первых: звук очень много «весит». Во-вторых: если вы не можете управлять звуком программно, то есть не предоставляете пользователю возможность в любой момент выключить или включить звук, то в зацикленных роликах, например, рекламных баннерах использовать его вообще не стоит. Однако мультипликация и некоторые интерактивные элементы без звука просто немыслимы. Поэтому в рамках этой лекции мы остановимся на этом подробнее, а пока обратите внимание, что для звукового фрагмента на палитре Timeline выделен отдельный слой.
В этом ролике имеется ещё один слой — background (нижний слой), на этом слое расположены статические элементы — декорации.
Для управления более сложными изменениями формы используются так называемые Shape Hints (узловые точки формы), которые определяют, как фрагменты первоначальной формы будут перенесены в новую форму. Другими словами, узловые точки используются для идентификации тех точек исходной формы, взаимное расположение которых требуется сохранить это своего рода бисеринки, фиксирующие некоторые элементы изображения. Наиболее характерный пример использования узловых точек — анимация мимики лица, при которой некоторые его части (например, глаза) не должны участвовать в трансформации.
Узловые точки обозначаются на изображении небольшими кружочками с буквами. Буквы (от а до z ) используются в качестве имён (идентификаторов) узловых точек. Каждой узловой точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 узловых точек (по числу букв алфавита). Узловые точки на исходном изображении окрашены в жёлтый цвет, на результирующем в зелёный.
Для расстановки узловых точек требуется выполнить следующие действия:
Если требуется продолжить расстановку узловых точек, повторите описанные выше действия.
Примечания:
Если вы используете при трансформации несколько узловых точек, то выполняйте их расстановку по часовой стрелке, начиная с левого верхнего угла изображения. Это обусловлено тем, что Flash обрабатывает узловые точки в алфавитном порядке.
В процессе расстановки узловых точек целесообразно периодически тестировать свой ролик. Чтобы изменить положение узловой точки, достаточно просто перетащить её на новое место (это можно сделать как на первом, так и на последнем кадре последовательности). Кроме того, всегда можно удалить лишние точки или добавить новые. Если результаты работы вас вполне устраивают, можете спрятать узловые точки. Все перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, щёлкните на одной из узловых точек правой кнопкой мыши. Меню содержит четыре команды, из которых первые три доступны только для узловых точек исходного изображения:
Add Hint
(добавить узловую точку) — при выполнении команды на сцене появляется заготовка новой узловой точки.
Remove Hint
(удалить узловую точку) — узловая точка, на которой вы щёлкнули правой кнопкой мыши, открывая меню, будет удалена.
Remove All Hints
(удалить все узловые точки) — удаление всех узловых точек.
Show Hints
(показать узловые точки) — данный режим используется по умолчанию (рядом с именем команды стоит галочка). Повторный её выбор приведёт к тому, что узловые точки станут невидимыми. Этот вариант следует использовать только после достижения требуемого результата, поскольку для возврата в режим показа узловых точек вам придётся снова обратиться к меню Modify > Shape > Add Shape Hint.
Обратите внимание на анимационные flash-ролики представленные в этой лекции, в первом случае мишка коала превращается в филина без использования узловых точек, во втором случае мы управляем анимацией, используя три пары узловых точек.
Звук представляет собой упругие волны, распространяющиеся в газах, жидкостях и твёрдых телах и воспринимаемые ухом человека и животных. Человек слышит звук с частотами от 16 Гц до 20 кГц. Звук с частотами до 16 Гц называют инфразвуком, 2·10 4 —10 9 Гц — ультразвуком, а 10 9 —10 13 Гц — гиперзвуком. В процессе оцифровки звука производится запись всех его волновых характеристик. Такая запись именуется импульсно-кодовой модуляцией и представляет собой последовательную запись дискретных значений. Разрядность устройства, исчисляемая в битах, говорит о том сколькими значениями одновременно в одном записанном дискретном фрагменте, берётся звук. Чем больше разрядность, тем больше звук соответствует оригиналу. Любой звуковой файл можно представить как базу данных. Она имеет свою структуру, о параметрах которой указывается обычно в начале файла. Потом идёт структурированный список значений по определённым полям. Иногда вместо значений стоят формулы, позволяющие уменьшать размер файла.
Познакомимся поближе с теми форматами звуковых данных, которые мы чаще всего будем использовать при озвучивании роликов в Macromedia Flash.
WAV (waveform) — дискретный формат, предназначенный для хранения и передачи аудиосигнала в цифровой форме, отличается высокой степенью качества и, к сожалению, неимоверным размером. В формате wav могут сохраняться стерео- или монофонические файлы с разрядностью выборки 8 или 16 бит. Помимо обычных дискретных значений, битности, количества каналов и значений уровней громкости в wav может быть указано еще множество параметров: метки позиций для синхронизации, общее количество дискретных значений, порядок воспроизведения различных частей звукового файла, а также есть место для того, чтобы вы смогли разместить там текстовую информацию.
MP3 (MPEG Layer3) — потоковый формат, предназначенный для хранения и передачи аудиосигнала в цифровой форме, отличается высокой степенью компактности. Используется главным образом для передачи аудио в реальном времени по сетевым каналам и для кодирования CD Audio. Термин «потоковый» означает, что передача данных происходит потоком независимых отдельных блоков данных — фреймов. Для этого исходный сигнал при кодировании разбивается на равные по продолжительности участки, именуемые фреймами и кодируемые отдельно. При декодировании сигнал формируется из последовательности декодированных фреймов. Ширина потока (bitrate) при кодировании сигнала, аналогичного CD Audio (44.1kHz 16Bit Stereo) обозначает общую величину потока — количество передаваемой за единицу времени информации. Эта величина варьируется от 320kbs (320 килобит в секунду, также пишут kbs, kbps или kb/s), до 96kbs и ниже.
Чтобы добавить звук к фильму, необходимо выполнить следующие действия:
Импортируйте в фильм один или несколько звуковых файлов в формате wav или mp3. Для этого обратитесь к меню File > Import (файл > импорт). Файлы будут автоматически размещены в библиотеке вашего ролика в виде символов. Откройте библиотеку ролика, используя меню Window > Library, и убедитесь в этом.
Создайте на палитре Timeline новый слой и разместите на нём звуковой фрагмент, используя символы в вашей библиотеке — перетащите его из библиотеки на сцену. «Разверните» звук — добавьте кадры (не ключевые), используя команду Insert Frame, таким образом, чтобы на палитре в этом слое волновая форма звука была полностью развёрнута. Flash позволяет создавать несколько звуковых слоев, и каждый из них будет работать подобно отдельному звуковому каналу. Это означает, что при воспроизведении фильма звуки на разных слоях, совпадающие во времени, воспроизводятся одновременно.
Перейдите на первый кадр слоя со звуком и обратитесь к палитре Properties разделу Sound (звук). Если в вашей библиотеке размещено несколько звуковых фрагментов, то, используя ниспадающий список этого раздела, вы сможете в любой момент заменить, выбранный вами звук, на какой-нибудь другой. В нижней части палитры вы видите исходные параметры звукового фрагмента: ширина полосы частот, моно/стерео, разрядность, длительность, занимаемый объём памяти.
В раскрывающемся списке Sync (synchronize — синхронизировать) выберите способ синхронизации звука:
Event (событие) — звук синхронизируется посредством привязки его к определенным событиям фильма, например по щелчку на кнопке. Звук, управляемый событием, воспроизводится с момента перехода к соответствующему ключевому кадру, и продолжается независимо от временной шкалы, даже если фильм будет остановлен (если, конечно, звук достаточно продолжителен).
Start (старт) — этот способ отличается от предыдущего тем, что при очередном наступлении заданного события начинается воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено.
Stop (стоп) — воспроизведение указанного звука прекращается.
Stream (поток) — потоковый звук. Flash обеспечивает «насильственную» синхронизацию анимации и потокового звука (например, если кадры анимации не успевают воспроизводиться на Web-странице с той же скоростью, что и потоковый звук, Flash-плеер пропускает некоторые кадры). Воспроизведение потокового звука всегда прекращается при завершении анимации. Кроме того, потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации.
Число повторений звука можно задать в разделе Loop (циклы). Режим «бесконечного» воспроизведения не реализован, но его можно смоделировать, введя в этом разделе достаточно большое число.
Можно задать звуковые эффекты, воздействующие на громкость звука. Заранее подготовленные настройки выбирают в раскрывающемся списке Effect (эффект):
None — нет никаких эффектов, этот пункт следует выбрать в том случае если выбранные вами эффекты вам не понравились.
Left Channel
— запускает звук только в левом канале.
Right Channel
— запускает звук только в правом канале.
Fade Left to Right
— плавный переход звука между каналами слева на право.
Fade Right to Left
— плавный переход звука между каналами справа на лево.
Fade In
— постепенное увеличение амплитуды звука.
Fade Out
— постепенное уменьшение амплитуды звука.
Если требуется другой вид эффекта, следует выбрать в этом списке пункт Custom (другой), после чего произвести настройку при помощи панелей, на которых отображена волновая форма звука. При этом возможны следующие действия:
Другие элементы управления служат только для удобства работы. Так, изменить масштаб временной оси можно при помощи кнопок Zoom In и Zoom Out. Изменить способ представления шкалы времени можно при помощи кнопок Seconds (секунды) и Frames (кадры).
Если вы не располагаете собственной библиотекой звуковых фрагментов, вы можете воспользоваться библиотекой Macromedia Flash, для этого обратитесь к меню Window > Common Libraries > Sounds.
В процессе работы над мультипликационным или интерактивным роликом у вас, безусловно, возникнет желание записать свой собственный музыкальный или речевой фрагмент. Итак, вы записали какой-то звук с помощью микрофона, и сохранили его как некий sound.wav.
Любой wav-файл имеет довольно большой размер, но это легко устранимый недочёт, ведь мы можем конвертировать его в mp3-файл с помощью PlayCentre , а также откорректировать этот фрагмент с помощью специальных программ, например, Sound Forge или Steinberg Wave Lab .
При записи с микрофона появляются паузы, до и после звукового фрагмента (например, слова). Появляется шум. Искажается голос. Все эти недочёты, используя перечисленные выше программы, сможет легко устранить даже новичок.
В этих программах звук представлен графически в виде волны. Поэтому здесь, мы можем, с хирургической точностью, отсечь ненужные нам части. Добавить различные эффекты, например, «А-ля Масяня», женский голос превратить в мужской голос, и вообще пофантазировать в своё удовольствие.
Во-первых, вам необходимо продублировать анимационные flash-ролики, представленные в материале этой лекции.
Во-вторых, создать ролик, позволяющий проиллюстрировать замечательные строки из стихотворения Сергея Александровича Есенина:
Ах, и сам я в чаще звонкой
Увидал вчера в тумане:
Рыжий месяц жеребенком
Запрягался в наши сани…
Итого: с вас четыре файла в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.
Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!
Описание:
Цели урока:
1. обучающая
– сформировать представление о процессе заполнения кадров с изменением формы, который используется для трансформации рисованных фигур между начальными и конечными точками кадров
2. развивающая
- развивать интеллектуальные умения анализировать и сравнивать полученную информацию, развивать творческие способности при создании анимации
3. воспитательная
– воспитывать эстетическое восприятие действительности, любовь к экранному искусству, формировать навыки самоконтроля.
Оборудование и дидактический материал: ПЭВМ, программа Flash, мультимедийный проектор, демонстрационный материал, электронная презентация, задания.
Структура и ход урока:
Что такое анимация? Какие виды анимации вы знаете, их достоинства и недостатки? Как выполняется анимация движения?
На прошлом уроке мы познакомились с анимацией движения. Сегодня продолжим изучение анимации. Запишите тему урока: Создание анимации формы в программе Flash.
(Демонстрируется файл – Создание анимации формы в программе Flash.ppt – слайд 1).
Анимация формы с заполнением первого и последнего ключевого кадра Shape tweening.
Заполнение кадров с изменением формы используется для трансформации рисованных фигур между начальными и конечными точками. Flash может выполнить операцию заполнения кадров с изменением формы только для фигур. На одном слое можно выполнить заполнение кадров для нескольких фигур. Но для четкой организации нужно, чтобы каждая фигура находилась на отдельном слое, если вы впоследствии вернетесь к этому анимационному фрагменту, чтобы внести определенные изменения, то работа упростится. (Демонстрируется файл слайд 2). Учащиеся ведут краткий конспект. (Далее все операции показываются на экране с помощью мультимедийного проектора.
)
Для создания расчетной анимации формы нужно выполнить следующие действия:
1. Нарисовать объект в ключевом кадре.
2. Находясь в первом кадре, использовать панель «Кадр
», выбрать пункт Shape
, изменить ослабление.
3. Указать конечный кадр и включить команду чистый ключевой кадр
, это можно сделать, щелкнув правой клавишей мыши на кадре, который и будет ключевым, появится список, в котором и выбрать чистый ключевой кадр
. В нем расположить изображение, затем проиграть анимацию. Для этого выбрать пункт меню «Управление
» команда «Воспроизведение
» или нажать клавишу Enter
на клавиатуре. После этого анимация будет, воспроизводится.
После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели «Кадр
» в списке Tweening
строку Shape
:
Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка.
В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. (Демонстрируется файл – Создание анимации движения в программе Flash.ppt –
слайд 3):
В этой анимации круг переходит в некое подобие полумесяца. На первом ключевом кадре нарисован круг, а на другом ключевом кадре (это 10-й кадр сцены) полумесяц. В панели «Кадр » есть два параметра Easing (Ускорение) и Blend (Переход)
Параметр Blend (Переход), определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром.
(Демонстрируется файл – Создание анимации движения в программе Flash.ppt –
слайд 4).
Создание анимации формы: «Ночной цветок»
Список используемой литературы
