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

Анимация движения по прямой

Пример 1:
См. Пример 2

Создадим движение самолета по прямой линии.

В монтажном кадре вставьте изображение самолета на левой стороне сцены. Векторное изображение самолета можно создать в Adobe Flash (см. Рисование ) или импортировать изображение, созданное на стороне (в формате.png с прозрачным фоном).

Выделите самолет на сцене. В контекстном меню самолета выбираем Преобразовать в символ (Convert to Sumbol). Выбираем графический тип символа.

В контекстном меню изображения выбираем Создать анимацию движения (Create Motion Tween). Программа автоматически создает 24 кадра для плавного изменения.
Перемещаем изображение на правую сторону сцены.
Можно настроить продолжительность анимации и другое - см. Работа с кадрами .

Анимация движения самолета по прямой создана, ее можно просмотреть, щелкнув по клавише Enter .

Из этого примера можно сделать такие выводы:

Длина любого нового участка изменения (tween span), который автоматически создается програмой, по умолчанию соответствует установленной скорости мультипликации. Если скорость мультипликации выбрана 24 кадра в сек., то будет по умолчанию создан участок изменения в 24 кадра (1 сек мультипликации). Если выбрана скорость 30 кадров в сек. - участок изменения по умолчанию составит 30 кадров.

Чтобы программа смогла создать плавное изменение, вставленный на сцену объект должен быть преобразован в символ. При этом объект может быть любым - созданный в Adobe Flash векторный рисунок, текст, импортированное растровое изображение и пр. Если Вы пытаетесь создать плавное изменение на несимволе, программа попросит Вас преобразовывать элемент в символ ().

Только к одному символу может быть примененно плавное изменение (tweened) за один раз. Если Вы попытаетесь применить изменение к уровню с несколькими объектами, программа запросит Вас преобразовать графические символы в единственный символ.

Плавное изменение можно применить для изменения размеров/масштабирования, изменения цвета и применения фильтров.

Примечание: плавное изменение для эффектов фильтров применимо только к символам клипов и кнопок, не применимо к символам графики.

Примечания:
1. При создании классической анимации движения порядок действий иной - см. Создание классической анимации движения .
2. Создание движения объектов при покадровой мультипликации - см. Покадровая мультипликация
3. В нашем примере самолет двигался в пределах сцены. Но начальное положение самолета (или другого объекта) может быть вне сцены, при этом самолет может выскакивать "из-за кулис" (справа, слева, сверху. снизу). Точно также он может исчезать со сцены "за кулисами". В принципе, и начальное и конечное положение объекта может быть вне сцены, т.е. объект выскакивает "из-за кулис", показывает на сцене свои трюки и снова исчезает "за кулисами".

Анимации движения по кривой

Есть несколько способов создать движение объекта по кривой:

5. Выделяем созданный путь и копируем его в буфер обмена. После этого сам путь можно удалить.

6. Возвращаемся в слой самолета. Выделяем самолет на сцене, в контекстном меню выбираем "Создать анимацию движения " (Create Motion Tween).

7. Выделяем самолет на сцене, в меню Правка (Edit) выбираем "Вставить" или "Вставить по месту" (Paste in Place).
К изображению самолета добавляется изображение пути движения.

8. Для просмотра ставим красный движок на 1-й кадр, щелкаем по клавише Enter .

Редактирование пути движения

Вы можете преобразовать путь движения так же, как и другого графического объекта.

Выберите инструмент свободного преобразования (Free Transform) на панели инструментов и щелкните по пути движения.
Маркеры преобразования появляются вокруг пути движения.

Можно изменять масштаб или повернуть путь движения. Можно создать кривизну пути, используя инструменты выбора и инструмент Преобразовать узловую точку (Convert Anchor Point) - этот инструмент скрыт под инструментом Перо (Pen) .

Нажимают на отправную точку и перемещают маркер начала выделения, который управляет искривлением пути.

3 Для коррекции пути выберите инструмент спецвыделения (Subselection) на панели инструментов.
4 Щелкните и перетащите маркер, чтобы редактировать кривую пути.
Примечание: путем движения можно также непосредственно управлять с инструментом выделения ().
Выберите инструмент выделения () и переместите его близко к пути движения. Значок кривой появляется рядом с Вашим курсором, указывающий, что Вы можете редактировать путь. Щелкните и перетащите путь движения, чтобы изменить искривление.

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

Примечание:
Если Вы своей дрожжащей рукой нарисовали слишком корявый путь и одновременно для движения по этому пути отвели слишком мало кадров, то программа не сможет выполнить задачу и повторить все изгибы пути.
В этом случае появится объявление:
"The curve must be simplified to fit the number of frames available in the current motion tween. Please choose one of the following methods"
Или: "Кривая должна быть упрощена, чтобы соответствовать числу кадров, доступных в текущей анимации движения. Пожалуйста выберите один из следующих методов..." и предлагается два варианта, первый из которых - упростить путь.

См. Дополнительно:
Создание собственного анимационного пути


Реверс направления движения

Чтобы объект двигался от конечной точки к начальной, в контекстном меню объекта выберите Траектория движения (Motion Path ) - Обратная траектория (Reverse Path).

Ориентация объекта при движении

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

1 Щелкните по слою плавного изменения движения (motion tween) на Временной шкале (Графике времени). В нашем примере это слой "самолет".

2. Выделите путь движения, используя инструмент выделения ()

3. Правильно установите объект относительно пути движения в 1-и и последнем кадрах анимации.

4. В Инспекторе свойств выберите Ориентацию по траектории (Orient to path) в опции пути.

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

Программа автоматически добавляет ключевые кадры, разворачивая самолет по траектории.

Временная шкала будет выглядеть так:

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

Удостоверьтесь, что и старт и окончание движения объекта зафиксированы непосредственно на созданном пути.

Удостоверьтесь, что Ваш путь движения не объект рисунка, группа или символ. Путь движения создается только в режиме рисования "Merged Drawing".
Избегайте использовать при создании пути необычные штриховые стили, такие как черточки, точки и пр. Это приводит к непредсказуемому поведению объекта при движении по такому пути.

В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем или создаем объект анимации: группу, текстовый блок или экземпляр символа.

На достаточном удалении по линейке кадров (простой подсчет: частота кадров, умноженная на секунды. Т е. если анимация будет идти 3 секунды, надо найти 36-й кадр) с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации.

Редактируя в этом ключевом кадре изменения расположения, размеров, пропорций или ориентации объекта анимации, получим конечную фазу анимации. Более "глубокие" виды редактирования, например с применением режима редактирования групп или с применением команды меню "Разделить" - не допускаются. Начальная и конечная фазы анимации должны быть получены из одного и того же объекта.

Перейдем к первому ключевому кадру, щелкнув в ячейке кадра. В панели свойств выберем из списка "Анимация - Движение". Такой выбор, как хорошо видно на рис. 7.3, немедленно определяет сиреневый цвет промежуточных кадров временной шкалы, и появляется стрелка, соединяющая начало и конец анимации. Если вместо стрелки появляется штриховая линия, значит, что-то сделано не так и анимации скорее всего не будет. Даже если анимация и получится, очевидно, сбой произойдет позднее. Вот некоторые причины ошибки: в кадре находится неподходящий объект (например, просто несгруппированный рисунок), в кадре сохранились "остатки" каких-то объектов, движение применяется, например, к двум группам сразу. Взгляните на панель свойств кадра: если там появилась желтая треугольная кнопка с предупреждающим знаком (!), то Flash пытается сообщить вам об ошибке.

Рис. 7.3. Временная линейка с раскадровкой анимации движения

При выборе "Движение" в панели свойств открываются дополнительные параметры настройки "анимации движения" (рис. 6 4).

Рис. 7.4. Панель свойств при выборе анимации движения

• Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок "Масштаб", иначе не будет возможности изменения пропорций.
• При выборе положительных значений параметра "Замедлить" анимация будет идти замедленно, а при выборе отрицательных - ускоренно.
• В списке "Поворот" можно предусмотреть принудительный поворот по часовой стрелке или против. В окошке рядом можно задать количество таких принудительных оборотов объекта в процессе анимации.

Изменение положения центра вращения можно изменить инструментом "Свободное преобразование".

Заставим объект двигаться по кругу.

1. Начнем с того, что нарисуем в первом кадре квадрат (звезду, круг…). Удалим у фигуры контур (если он нарисован).
2. Сгруппируем рисунок. Зачем? У нас всего один объект? Но этот объект - не группа, не текстовый блок и не экземпляр символа. Поэтому - группируем.
3. Выделим группу инструментом преобразования и перенесем центр будущего вращения на некоторое расстояние, а сам объект-группу сдвинем от центра монтажного стола.
4. Оценим длительность анимации - если наша анимация будет длиться в течении 4-6 кадров, даже компьютер не сможет сделать ее плавной. Условимся, что в данном случае нам "хватит" 30 кадров.
5. Перейдем в тридцатый кадр. Вставим ключевой кадр - копию первого кадра - с помощью клавиши F6.
6. Вернемся в первый кадр.
7. В панели свойств кадра выберем анимацию движения. В дополнительном списке "Поворот" обязательно выберем принудительное вращение либо по часовой, либо против часовой стрелки. Количество принудительных оборотов - один.

Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого:

1. поставим считывающую головку в середину "сиреневой полоски" на временной шкале;
2. на монтажном столе видим некоторое промежуточное положение нашего объекта. В этом месте нет ключевого кадра, но его легко сделать, просто выполнив одним из способов вставку ключевого кадра;
3. во вновь созданном ключевом кадре изменим масштаб нашего объекта;
4. можно тестировать фильм.

Можно создать анимацию движения двумя способами:

o с помощью панели свойств кадра;

o с помощью команды "Создать анимацию движения" контекстного меню по правой кнопке мыши на кадре.

Для анимации движения с помощью команды контекстного меню выполняем следующие действия:

o Рисуем или вставляем любой объект в ключевой кадр.

o Щелкаем правой кнопкой мыши в ячейке первого кадра и в контекстном меню выбираем команду "Создать анимацию движения". При этом все изображение в кадре будет автоматически преобразовано в графический символ с именем "Построение анимации1" (появляется голубая выделяющая рамка и точка привязки в центре рамки).

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

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

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

17. Создать ключевые кадры с начальным и конечным положениями объекта, задать между ними анимацию движения.

18. Щелкнуть правой кнопкой мыши на имени слоя, содержащего анимацию движения. В контекстном меню выбрать "Добавить путеводитель" или щелкнуть по соответствующей пиктограмме внизу слева.

19. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым.

20. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным.

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

22. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать:

23. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии;

24. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).

Протестировать фильм.

Рис. 7.5. Создание траекторий движения

Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы.

Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого:

1. В первом ключевом кадре нарисуем карандаш или импортируем его изображение из клип-арта в векторном формате.
2. Сгруппируем изображение карандаша, инструментом "Свободное преобразование" повернем карандаш так, как он выглядит со стороны при письме (можно расположить карандаш в левой части монтажного стола, поскольку пишем мы слева направо).
3. В данном случае очень важно расположение точки регистрации нашего объекта - поставим ее на кончик грифеля карандаша.
4. Через 30-40 кадров создадим последний ключевой кадр анимации.
5. В нем перенесем изображение карандаша в другое место монтажного стола, Можно чуть-чуть повернуть его.
6. Выделим все кадры одновременно, "протянув" курсор мыши вдоль полоски кадров, и в панели свойств выберем анимацию движения и поставим "галочки" рядом с параметрами "Ориентировать по пути" и "Привязать".
7. Добавим слой, управляющий движением, - путеводитель.
8. В ключевом кадре этого слоя нарисуем траекторию движения. Проверим, что полоска промежуточных кадров совпадает с длиной нашей анимации; ключевого кадра в конце не нужно.
9. Протестируем фильм.
10. Возможно, вы все сделали аккуратно и карандашик начал движение по нарисованному пути, но наш карандаш вертится вокруг кривой как ненормальный. Отключим галочку около параметра "Ориентировать по пути" - движение карандаша стало реалистичней.

Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место").

Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами.

Примерные вопросы для контроля

1. Как отредактировать текст?
2. Как превратить текст в "нарисованные буквы"?
3. Для каких целей применяют анимацию движения?
4. Чем анимация движения отличается от анимации формы?
5. Чем анимация движения отличается от пошаговой анимации?
6. Для каких объектов можно создать анимацию движения?
7. Каким образом задаются настройки анимации движения?
8. Для чего и как создается слой-путеводитель?

8. Практическая работа: Пляшущие человечки:

Жизнь - движение. Можно анимировать шарики, круги, прямоугольники, линии и другие фигуры… Но давайте замахнемся на грандиозную задачу: заставим двигаться (танцевать) "человечка".

Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, знать основы создания покадровой анимации и анимации движения.

Тема: Анимация движения в системе Flash.

Тип урока : Урок-проект с элементами творческой работы.

Цель:

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

Развивающий аспект – творческое применение своих знаний в области двухмерной компьютерной графики.

Цели урока: Познакомить учащихся с типами анимации. Сформировать умение создавать простейшую анимацию в системе Flash.

Формы организации учебно-познавательной деятельности учащихся:

- индивидуальная – каждый ученик создает индивидуальный проект фрагмента сказки «Колобок»;

- групповая – индивидуальные проекты учеников позволяют реализовать групповой проект сказки «Колобок». Работа на перспективу – показ сказки детям ДОУ и начальной школы в рамках развития социокультурного центра в школе.

План урока:

1. Организация урока.
2. Постановка проблемы урока.
3. Получение сведений о классификации анимации во Flash (эвристическая беседа).
4. Актуализация знаний по созданию рисованных объектов в системе.
5. Демонстрация создания простой анимации.
6. Практическая работа учащихся за компьютером.
7. Подведение итогов урока.
8. Домашнее задание.

ХОД УРОКА

1. Организация урока

Учитель проверяет готовность учеников к уроку.

2. Постановка проблемы урока

Рассмотрим некоторые объекты и выясним, каким из них вы отдаете предпочтения. Какие вам нравятся больше и почему?

Просмотр некоторых Web-страниц, слайдов презентаций с анимацией и без нее.

В ходе беседы выясняем, что красивее, симпатичнее сайты и слайды презентаций с анимацией.

Как создать анимацию – это и есть тема сегодняшнего урока (Приложение 1 ).

3. Получение сведений о классификации анимации во Flash (эвристическая беседа с демонстрацией. Приложение 1 )

Основное назначение системы во Flash – «оживление» рисованных изображений.

Овладев основными приемами работы в системе, вы сможете:

Создать эффективную презентацию или обучающую программу;
- сделать Web-сайт или внести «живую изюминку» в оформление вашего сайта, т.е. создание рекламных web роликов (баннеры);
- создать мультфильм;
- запрограммировать свою первую игру.

Прежде чем начинать что то делать на практике, давайте рассмотрим базовые понятия в анимации: кадр (frames), ключевой кадр,слой (layers), и временная шкала (timeline), символы (symbols ) (Приложение 1 ).

Анимация - это изменение свойств объекта с течением времени (Анимация – процесс изменения размера, положения, цвета или формы объекта во времени).

Кадр. Все фильмы состоят из кадров (фреймов). Каждый кадр содержит одно статическое изображение. Иллюзия движения создается благодаря незначительным изменениям в рисунках от одного кадра к другому. Кадр может быть как составленным вручную, так и сгенерированным Flash

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

Слой – это блок фильма, состоящий из отдельных изображений, из анимации со своей шкалой времени.

Временная шкала – поле, на котором отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash.

Во Flash анимация, с точки зрения создания , можно выделить следующие подвиды: покадровая анимация, автоматическая (трансформационная) анимация и анимация на основе сценариев . У каждого типа анимации есть свои преимущества и недостатки, сферы применения.

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

В трансформационной анимации основной труд при её создании выполняет Flash, что позволяет получить несложную анимацию. Автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры.

Анимация на основе сценариев . Сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript.

С точки зрения способа построения анимация подразделяется на анимацию движения и анимацию изменения формы . Анимация движения выполняется над экземплярами обьекта и позволяет его переместить, изменить масштаб, трансформировать, прозрачность, наложить цвет; при этом форма обьекта остаётся неизменной. Анимации изменения формы работает непосредственно с рисунками и позволяет изменить один рисунок на другой, изменяя при этом его положение, размер и цвет.

Анимация формы

Сегодня мы познакомимся с принципами создания анимации формы.

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

Анимация движения

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

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

4. Актуализация знаний по созданию рисованных объектов в системе.

Выяснить как можно создать объект, выбрать цвет фона и цвет контура фигуры, выделить объект, где располагаются свойства объектов (с демонстрацией на интерактивной доске ).

5. Демонстрация создания простой анимации.Алгоритм выполнения .

6. Практическая работа учащихся за компьютером

Создание мини-проекта по сказке «Колобок».

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

Практическая работа по теме «Простейшая анимация движения в системе Flash»

Вариант – 1

Задание . Картинка1.jpg) по тропинке катиться колобок и при этом звучат следующие слова:

Колобок полежал, полежал да и покатился с окна на лавку, с лавки на пол, по полу к двери, прыг через порог – и дальше по дорожке.

Звук занимает 9 секунд. 13 кадров – 1 секунда. Анимируйте картинку в течении всего этого времени (117 кадров) и экспортируйте фрагмент фильма в каталог D:/User/_ под именем побег.avi

Алгоритм выполнения

1. Откройте программу Flash MX 2004 (D:/SCHOOL/ Flash MX 2004/*.exe).
2. При помощи панели инструментов на рабочем поле создайте колобка из сказки.
3. Добавьте фоновую картинку:

- Создайте новый слой, выбрав команду Вставить – Шкала времени – Слой (перейти на второй слой, щелкнув клавишей мыши на название слоя).
- Импортируйте фоновую картинку Файл – Импорт – Импортировать на стадию. (Картинку выбрать из каталога D:/FOTO/Колобок/Рисунок1.jpg).
- Измените размеры картинки, используя инструмент «свободная трансформация» , до размеров кадра.

Вариант – 2

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка2.jpg) по тропинке катиться колобок навстречу зайцу и при этом звучат следующие слова:

Катиться колобок, а навстречу ему заяц:

- Не ешь меня, косой, я тебе песенку спою.

Вариант – 3

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка3.jpg) колобок убегает от зайца и при этом звучат следующие слова: И покатился колобок дальше – только заяц его и видел.

Вариант – 4

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка4.jpg ) по тропинке катиться колобок навстречу волку и при этом звучат следующие слова:

Катиться колобок по тропинке в лесу, а навстречу ему заяц:

- Колобок, колобок! Я тебя съем!
- Не ешь меня, серый волк, я тебе песенку спою.

Вариант – 5

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка5.jpg ) колобок убегает от волка и при этом звучат следующие слова:

Вариант – 6

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка6.jpg ) по тропинке катиться колобок навстречу медведь и при этом звучат следующие слова:

Катиться колобок по лесу, а навстречу ему медведь:

- Колобок, колобок! Я тебя съем!
- Ну где тебе, косолапому, съесть меня!

Вариант – 7

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка7.jpg ) колобок убегает от медведя и при этом звучат следующие слова:

И опять покатился колобок – медведь только вслед ему посмотрел.

Вариант – 8

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка8.jpg ) по тропинке катиться колобок навстречу лиса и при этом звучат следующие слова:

Катиться колобок, а навстречу ему лиса:

- Здравствуй, колобок! Спой мне песенку!

Колобок и запел свою песенку, Алиса слушает да все ближе подкрадывается.

Вариант – 9

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка9.jpg ) колобок прыгает на нос лисе и при этом звучат следующие слова:

Славная песенка! – сказала лиса.- Да стара я стала – плохо слышу. Сядь ко мне на носочек да пропой еще разочек.

Вариант – 10

Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка10.jpg ) лиса съела колобка и при этом звучат следующие слова:

Колобок прыгнул лисе на нос и запел:

- Я колобок, колобок!..
Алиса его – ам! – и съела.

7. Подведение итогов урока

Эффект движения в фотошопе можно выполнить нескольким способами. Я решила попробовать сделать анимацию движения , используя фильтр пластика. Получился очень занятный эффект.

Итак, возьмем фотографию с очаровательными собачками и начнем создавать анимацию.

1-Файл открыть.

Теперь нужно сделать две копии нижнего слоя.

3-Слой- создать дубликат слоя. И еще создать дубликат. В окне слоев теперь три слоя.

4-Активировать средний слой (кликнуть по нему в окне слоев). А на верхнем отключить глазок, кликнув по глазку.

5-Фильтр-пластика. В окне фильтра выбрать инструмент "скручивание по часовой стрелке" , размер кисти 200.(У Вас может быть другой размер, кисть должна быть такая, чтобы в нее входила область трансформирования).

Навести кисть на морду собаки и нажать на левую кнопку мыши, если результат не устроит, кликните по полоске "восстановить все" и повторите попытку и ok. Затем перейти к следующему слою.

6-Активировать верхний слой и включить на нем глазок (кликнуть по месту, где был глазок). На этом слое будем делать движение для другой собаки.

7-Фильтр-пластика. Выбрать инструмент "деформация" , размер кисти 80.

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

Наверное, Вы заметили, что вместе с поворотом головы собаки смещается и фон возле нее.

А фон должен быть неподвижный. Часть неподвижного фона возьмем с нижнего слоя.

8-Активировать нижний слой.

9- На панели инструментов выбрать "перо" и аккуратно выделить часть фона возле головы собаки.(Выделить можно и инструментом лассо, если хорошо им владеете).

Как только контур соединится, он примет такой вид:

10-В окне слоев кликнуть по слову "контур". Затем правой кнопкой мыши- по области "рабочий контур" и выбрать "образовать выделенную область", в появившемся поставить окне радиус растушевки -0, и нажать "ok"

На картинке появится выделение, которое нужно поместить на новый слой.

11-Слой-новый-скопировать на новый слой.

12-В окне слоев захватить мышкой этот слой и, не отпуская левой кнопки мыши, переместить его на самый верх. Теперь фон будет неподвижен.

Перейдем к анимации.

13-В окне анимации поставить на первом кадре время 0,2 сек и сделать 4 копии кадра, нажимая на значок копирования.

14-В окне анимации кликнуть по первому кадру. Перейти в окно слоев.

15-В окне слоев у нас четыре слоя. Отключить глазок (кликнуть по глазку) на втором слое и на третьем.

16-В окне анимации кликнуть по второму кадру,

а в окне слоев включить глазок на втором слое.

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

Создать анимацию движения можно двумя способами:

• Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
• Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

1. Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).
6. При изменении размера объекта следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.
9. Флажок Orient to Path
10. Флажок Synchronize
11. Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.
5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).
6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.
9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.