Конспект занятия "Анимация движения по заданной траектории во Flash" (дополнительное образование, 10-14 лет)

Педагог дополнительного образования Гарнова В.В. КОНСПЕКТ ЗАНЯТИЯ Тема: Анимация движения по заданной траектории  в программе Adobe Flash   Цель: как используя направляющие движения заставить объект двигаться по заданному пути.  1) как создавать направляющие движения (на направляющем слое) 2) как заставить символ следовать по заданному пути (по направляющей движения) 3) как сделать направленную анимацию более реалистичной. ХОД ЗАНЯТИЯ I. Организационный момент II. Актуализация знаний Фронтальный опрос учащихся. 1. Как  изменить (назвать) слой? 2. Как заблокировать слой?  3. Как вызывается библиотека? 4. Для чего служит клавиша F6? III. Изучение нового материала  Основные понятия и определения 1. Анимация движения по траектории 2. Этапы анимации  движения нескольких объектов:  расстановка объектов, двигающихся по отдельным слоям, т.е. размещение объектов по  слоям;  выделение временных  интервалов;  расстановка ключевых кадров. 3. Этапы анимации движения по  траектории: Определение направляющего слоя Motion Guide; В направляющем слое нарисовать траекторию движения объект; Переместить объект на начало, а затем на конец траектории движения; Привязка объекта к траектории движения активизируется модификатором магнит; Произвести автозаполнение кадров; На панели свойств установить флажок Ориентация по пути( Create Motion Tween). IV. Закрепление изученного материала 1.1 Создайте новый документ. Сохраните свой документ, задав ему имя и выбрав место его  хранения.  1.2 Создайте мувиклип «Бумажный самолётик»  1.3 Выберите инструмент «линия» (N). Выберите тёмно­серый для цвета обводки (Stroke color) ­  получился оттенок #646464. Включите привязку к объектам (Snap to Objects) и убедитесь, что  рисование объектами (Object Drawing) выключено.  1.4 Щёлкните и начните рисовать линию вниз. Сделайте линию примерно в 60­65 пикселей. Педагог дополнительного образования 1.5 Выберите инструмент Zoom tool (Z) и приблизьте линию, которую только что нарисовали –  для этого выделите инструментом Zoom tool область, которую желаете увидеть поближе.  1.6 Снова используйте Line tool (N). Привязка к объектам ­ Snap to Objects – должна быть  включена. Это такая маленькая иконка магнита внизу панели инструментов. Подвинув курсор  поближе к верху линии, щёлкните и тащите новую линию влево и вниз. Вы автоматически  начнёте рисовать из вершины существующей линии, благодаря опции Snap to Objects.  Гарнова В.В.   1.7  И,  далее рисуйте ещё линии, чтобы закончить левую половину самолётика.  1.8  Теперь выделите весь рисунок, используя Selection tool (V)                                                             1.9  Скопируйте выделенное, нажав Ctrl+C , либо выбрав в мею Edit > Copy.  1.10  Теперь вам нужно вставить в те же координаты копию рисунка половины самолётика.  Сделайте это либо нажав сочетание клавиш Ctrl+Shift+V , либо выбрав в меню Edit > Paste in  Place. На вид ничего не изменилось ­ но вы только что вставили точную копию рисунка поверх  него самого. Примечание: если вы щёлкните мышкой где­то на сцене, после того как вставили копию  картинки – вы потеряете эту копию ­ копия объединится с оригиналом автоматически.  Такие вот вещи происходят с графикой во флеш (именно с нарисованной, и не мувиклипами).  Если вы не хотите потерять копию, просто переместите её туда, где она не будет  пересекаться с оригиналом, и потом щёлкайте где угодно.  1.11 Для свежевставленной выделенной копией половины самолётика выберите в меню Modify >  Transform > Flip Horizontal. (отразить по горизонтали)                                                     1.12  Переместите отражённую половину самолётика так, чтобы её вершина совпала с вершиной  оригинальной половины. Сделайте это с помощью Selection tool (V), потому что при включённой  привязке к объектам, вершины состыкуются идеально.  1.13 Добавьте немного градиентных переходов. Педагог дополнительного образования Гарнова В.В. 1.14 Верните увеличение на 100%  1.15 Выделите рисунок, и сконвертируйте в мувиклип  (Символ) (Изменение ­> Преобразовать в  значок) или F8. Назовите его «самолетик», выберите тип: Фильм клип, а также выберите  центральный квадратик для точки регистрации (registration point). ОК.  Теперь вы можете приступить к созданию простой моушен­твин анимации. 1.16 Создайте ключевой кадр на 50 кадре. 1.17 Подвинте мувиклип. Просто кликните по нему и тащите в нужное место. Вы можете  поставить его где угодно, потому что сейчас нам важно просто создать моушен твин, а  положение самолётика в кадре пока не важно. 1.18 Щёлкните правой кнопкой между ключевыми кадрами на временной шкале, и выберите  Create Motion Tween .  1.19 Назовите текущий слой «самолет» и замкните его (поставьте замок). 2. Создание motion guide – направляющей движения 2.1 Кликните на иконку «Add Motion Guide», которая находится под слоями. Нижний слой  («самолет») стал связанным с ним, стал «guided layer»– слой сместился вправо.  Длительность у слоя – гайда такая же, как и у слоя «самолет». – 50 кадров в данном случае. 2.2 Выберите карандаш ­ Pencil tool (Y), и на панели инструментов, в конце её, выберите  настройку Smooth для рисования вашим карандашом.  На панели свойств (Properties inspector) выберите тип линии: hairline, а также значение 100 для  параметра Smoothing. Выберите любой цвет, какой вам нравится, гайд в результате будет  невидим.  2.3 Щёлкните и начните рисовать линию карандашом, на слое Guide: airplane. Нарисуйте кривую, похожую на траекторию полёта бумажного самолётика. Начинать и заканчивать линию за  пределами сцены, чтобы создать ощущение, что самолётик летит в сцене, и исчезает за её  пределами. Педагог дополнительного образования Гарнова В.В. 3. Создание направленной анимации 3.1 Теперь замкните слой «Guide: самолет» и отомкните слой «самолет». Щёлкните на первом  кадре в таймлайне слоя «самолет», чтобы выбрать его содержимое. 3.2 Кликните на «paper airplane» один раз с помощью Selection tool (V), чтобы выбрать его  3.3 Теперь вам нужно придвинуть этот мувиклип к начальной точке гайда – направляющей  линии. Потащите мувиклип так, чтобы его registration point – точка регистрации – попала точно в начало гайда. Когда мувиклип уже привяжется к гайду, вы увидите чёрный жирный кружок  рядом с курсором.                                     Если привязка не происходит, проверьте, включена ли она:  3.4 Кликните на другой ключевой кадр (конечный), чтобы выбрать его.  3.5 Дальше проделайте похожие действия с мувиклипом в этом кадре: с помощью Selection tool  (V) прикрепите самолётик к другому концу линии­гайда. Он тоже должен привязаться. 3.6 Сделаем плавнее нашу анимацию увеличив количество кадров в секунду (frame rate) в  документе. Сделайте двойной клик на цифре frame rate – под слоями, чтобы открыть окошко  свойств документа.  Задайте frame rate = 24 fps, и щёлкните ОК  3.7 Выберите в меню Control > Test Movie. Вы должны увидеть что­то похожее на это: Педагог дополнительного образования Мувиклип двигается по направляющей! Но Мувиклип не поворачивается, как это должно  происходить в реальности. Он должен поворачивать носовую часть вслед за изгибами  траектории.  3.8 Выберите снова первый ключевой кадр. Гарнова В.В. 3.9 Выберите инструмент трансформации ­ Free Transform tool (Q). Также отключите привязку к  объектам ­ Snap to Objects, чтобы иметь полную свободу в трансформации, не ограничиваясь  привязкой.  3.10 Подведите курсор к любому из углов мувиклипа (если мувиклип не выбран, то вначале  выберите его,  начните вращать, до тех пор, пока нос самолётика не попадёт на траекторию пути  (кривую, которая слоем выше). 3.11 Выберите следующий ключевой кадр снова (последний кадр)  3.12 Поверните нужным образом мувиклип и здесь, с помощью Free Transform tool (Q). Важный  момент в том, что мувклип здесь должен быть сориентирован так, как будто он следовал за  гайдом в течение всего пути – он должен быть повёрнут по его направлению.  3.13 Снова выберите первый ключевой кадр (как в пункте 3.8), и обратитесь к панели свойств  (Properties inspector). Теперь здесь, поставьте галочку около свойства Orient to path. Убедитесь,  что свойство включено, как на картинке:  3.14 Тестируйте вашу работу, выбрав Управление – тест фильма (ctrl + enter), и вы увидите, что  ваш самолётик движется реалистично. V. Подведение итогов.