519179
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 1.410 руб.;
- курсы повышения квалификации от 430 руб.
Московские документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ ДО 90%

ВНИМАНИЕ: Скидка действует ТОЛЬКО до конца апреля!

(Лицензия на осуществление образовательной деятельности №038767 выдана ООО "Столичный учебный центр", г.Москва)

ИнфоурокИнформатикаДругие методич. материалыЛабораторная работа по созданию анимации

Лабораторная работа по созданию анимации

библиотека
материалов
Скачать материал целиком можно бесплатно по ссылке внизу страницы.

ЛАБОРОТОРНАЯ РАБОТА

на тему: «Ознакомление с Flash. Создание простого мультика»

Содержание

Тема 1. Ознакомление с Flash. Создание простого мультика

Тема 2. Трансформация, исчезновение и появление объектов

Тема 3. Движение по направляющему пути

Тема 4. Движущиеся элементы

Тема 5. Раскадровка формы и морфинг

Тема 6. Создание анимационного спутника планеты

Тема 1. Ознакомление с Flash. Создание простого мультика

Цель занятия: познакомится с основными командами Меню, научиться создавать простые мульты.

Задание.

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

Пример.

Выполните следующую последовательность действий:

1. Выберите инструмент "овал" и нарисуйте с помощью него овал или круг в левой части сцены.

2. Далее выберите инструмент "выделение" и выделите весь овал вместе с кромкой. Для этого либо охватите вашу фигуру прямоугольной рамкой, держа кнопку мыши нажатой, либо два раза быстро щелкните на ней. У вас выделится весь овал.

3. Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК:

Рис. 1 - Выбор типа символа при создании

4. Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert- -Keyframe (или нажмите F6). Этим вы создадите так называемый "ключевой кадр" на 25-м кадре вашей шкалы времени.

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

6. Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween.

Выберите Control- -Play (или просто нажмите Enter) чтобы просмотреть результат.

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

Меню View:

Goto (Идем к ) - переход по кадрам и сценам.

100% - реальный размер нашего фильма. Более быстро размер можно изменить в выпадающем меню масштаба изображения, как и в других программах.

Show Frame (Показать кадр) - показывает весь кадр на экране.

Show All (Показать все) - все, что есть то и покажет

Outlines (Контуры-границы) - включает режим отображения объектов в контурном виде (для быстрой прорисовки на медленных компьютерах) без заливки.

Fast (Быстро) - режим отображения объектов с заливкой, но без сглаживания (для тех же целей).

Antialias (Сглаживание) - нормальное отображение объектов со сглаживанием, не считая текста.

Antialias Text (Сглаживание текста) - загладит все, что есть на сцене.

Timeline (Шкала времени) - показать или убрать киноленту.

Work Area (Рабочая зона) - отображение рабочей зоны (удобно отключать при больших размеров фильма).

Rulers (Линейки) - включает линейки для удобства позиционирования объектов.

Grid (Сетка) - где линейка, там и сетка. Очень удобно при рисовании.

Snap (Магнит) - притягивание объектов друг к другу и к сетке. Об использовании данной команды читайте в следующих работах.

Show Shape Hints (Показывать магнитные отметки) - включает режим отображения магнитных отметок с помощью, которого например, можно проконтролировать соединение объектов между собой.

Меню Insert:

Практически одно из основных меню.

Convert to a Symbol (Преобразование в символ) - применяется при преобразовании выделенных объектов Stage в символы.

New Symbol (Новый символ) - создать новый символ.

Layer (Слой) - добавляет новый, пустой слой.

Motion Guide (Путеводитель) - тоже слой, но предназначен для задания произвольной траектории движения объектов.

Frame (Кадр) - создать новый, пустой кадр.

Delete Frame (Удалить кадр)

Keyframe (Ключевой кадр) - создает новый ключевой (определяющий) кадр с тем же содержимым, что и предыдущий Keyframe в этом слое.

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

Clear Keyframe (Очистить Keyframe) - превращает выделенный Keyframe в обычный.

Create Motion Tween (Создать преобразование перемещения) - вот та волшебная команда, которая заставит перемещать и трансформировать Ваши объекты.

Scene (Сцена) - вставить новую сцену в фильм.

Remove Scene (Удалить сцену) - но для этого необходимо иметь более одной сцены в проекте.

Меню Modify:

Служит для изменения объектов, свойств и т.д.

Instance (Экземпляр) - запускает окно Instance Properties для задания свойств выделенному объекту.

Frame (Кадр) - свойства кадра.

Layer (Слой) - свойства рабочего слоя.

Scene (Сцена) - возможность изменения имени сцены.

Movie (Фильм) - параметры фильма (размер, кадры и т.д.).

Далее идут команды работы с текстом.

Font (Шрифт) - работа с выделенным текстом.

Paragraph (Абзац) - свойства выделенного текстового блока.

Style (Стиль) - работа со стилем выделенного текста.

Kerning (Кернинг) - плотность выделенного текста.

Text Field (Текстовое поле) - параметры выделенных текстовых полей (открывает широкие возможности при написании интерактивных сцен).

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

Transform (Преобразование) - трансформация объектов (повороты, изменение размеров и др.).

Arrange (Упорядочить) - позволяет изменять уровень наложенности объектов и блокировки.

Curves (Кривые) - работа с кривыми, позволяет добиться хороших результатов при правильном подходе.

Frames (Кадры) - синхронизация кадров, или их реверс.

Trace Bitmap (Трассировка растровой графики) - перевод обычной графики в растровую, для дальнейшей работы во Flash.

Align (Выравнивание) - удобная функция для установки объектов относительно друг друга.

Group (Группировка) - "склеивание" различных объектов в одну фигуру.

Ungroup (Разгруппировка)

Break Apart (Разбить) - разбивает текст на отдельные символы или преобразует растровое изображение.

Меню Control:

Служит для управления просмотром и проверки нашего фильма. Многие команды аналогичны командам управления любого плеера.

Play (Проиграть) - показывает фильм с текущего кадра.

Rewind (Обратная перемотка) - переход на первый кадр сцены.

Step Forward (Шаг вперед) - переход на следующий кадр.

Step Backward (Шаг назад) - переход на предыдущий кадр.

Test Movie (Тест фильма) - проверка фильма в тестовом режиме.

Test Scene (Тест сцены) - не путать с Test Movie, ведь наш фильм может состоять из отдельных эпизодов, и можем проверить их отдельно.

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

Loop Playback (Зациклить) - бесконечное проигрывание фильма.

Play All Scenes (Проиграть все сцены) - если не установить функцию, то вы увидите только текущею сцену.

Enable Frame Action (Включить действия в кадрах) - позволяет реагировать на все установленные действия.

Enable Buttons (Включить кнопки) - разрешает работу кнопок при просмотре и редактировании.

Mute Sound (Выключить звук) - чтоб соседям не мешать. Отключает звуки в фильме, полезна при работе с фильмом, в котором предусмотрена звуковая реакция на действия.

Меню Libraries:

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

Меню Window:

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

New Window (Новое окно) - открытие сцены в новом окне.

Arrange All (Упорядочить все) - расставляет все окна по вертикали.

Cascade (Каскадом) - тоже, но одно над другим.

Toolbar (Панель инструментов) - устанавливает режимы отображения рабочей панели.

Inspectors (Инспекторы) - вывод на экран инспекторов объектов, кадров, сцен и т.д.

Controller (Управление) - вывод панели управления воспроизведения фильма.

Colors (Цвета) - выводит панель, для управления цветом и создания градиентных заливок.

Output (Вывод) - окно Output предназначено для контроля за выводом переменных генератора, помогает при проверки корректности работа интерактивных форм.

Generator Objects (Генератор объектов) - используется при работе с содержимым генератора.

Library (Библиотека) - хранилище объектов (символов) текущего проекта.

Тема 2. Трансформация, исчезновение и появление объектов

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

Рассмотрим Shape tweening (трансформация фигуры). Мы научимся преобразовывать одну фигуру в другую. Попробуем превратить треугольник в квадрат, а его в свою очередь в круг.

- В первом кадре нарисуйте инструментом Line [L] треугольник.

- Создайте пустой ключевой кадр (например 20) Insert / Blank keyframe [F7].

- Нарисуйте в нем инструментом Rectangle [R] квадрат без заливки.

- Вновь, создайте пустой ключевой кадр (например 40) Insert / Blank keyframe [F7].

- Нарисуйте в нем инструментом Oval [O] круг, тоже без заливки.

- Создайте еще один пустой ключевой кадр (например 60) Insert / Blank keyframe [F7].

- И нарисуйте в нем последнею фигуру - треугольник.

- Дважды щелкнем левой кнопкой мышки на первом кадре Timeline. Откроется окно Frame Properties (параметры кадра).

- Выберем уже знакомую нам закладку Tweening.

- В выпадающем меню tweening, выбираем Shape (фигура). Кроме шкалы Easing (ускорение), появится пункт Blend type (тип преобразования) с двумя параметрами: Distributive - для плавных линий и Angular - для более жесткого преобразования.

- Выберем второе значение.

- Нажмем ОК.

На Timeline появится стрелка к следующему ключевому кадру, на этот раз на зеленоватом фоне, символизирующем анимацию Shape tweening.

- Повторите пункты с заданием параметров трансформации для каждого следующего ключевого кадра (кроме последнего). Экспериментируя с разными значениями Blend type и Easing.

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

Если применить морфинг к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.

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

Маленькая хитрость: в том случае, если Вам необходимо преобразовать один объект наложенного уровня в другой, то их необходимо предварительно разбить и при необходимости разгруппировать.

Проиллюстрируйте пословицу - "Делать из мухи - слона".

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

Символы существуют трех видов:

графические - любые рисунки или импортированная статичная графика, рисование мультик flash колобок инструмент convert

клипы - анимированная графика (по сути дела - самостоятельные фильмы) и кнопки.

Создав символ его можно многократно использовать, как в разных кадрах (или в одном), так и в качестве элемента (например - анимированного) более сложного символа. Используя многочисленные экземпляры одного символа в фильме, Flash хранит информацию, только об его оригинале и параметрах преобразований его копий, что значительно сокращает объем рабочего файла.

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

- Выделите объект инструментом Arrow.

- Преобразуйте объект в символ Insert / Convert to Symbol [F8].

- Появится окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ.

После преобразования, символ всегда доступен через библиотеку Window / Library [Ctrl+L].

Для вставки символа из библиотеки, просто перетащите его из окна библиотеки в рабочую область Stage.

Создание символов Insert / New Symbol [Ctrl+F8]. При создании нового символа, мы попадаем в режим редактирования символа. Его признаком служит "безразмерное" рабочее поле и имя символа над перечнем слоев, слева от имени находится имя сцены, в которой мы до этого работали. Для выхода из режима редактирования символа, щелкните на имени сцены. Для редактирования уже используемого в сцене символа - щелкните на нем правой кнопкой мыши и выберите Edit. Учтите что, изменив рисунок одного символа, вы измените рисунок всех его экземпляров.

Рассмотрим еще один метод в анимации - исчезновение и появление объектов.

- Создайте новый символ (см. выше).

- Установите его в первый кадр.

- Вставьте ключевой кадр (например 15) Insert / Keyframe [F6].

- Установите для первого кадра режим анимации - Motion.

- Перейдите в конечный кадр анимации (в нашем случае в 15-й).

- Дважды щелкните на символе левой кнопкой мыши.

- Откроется окно Instance Properties (свойства экземпляра).

- Выберем закладку цветовых эффектов - Color Effect.

Данная закладка содержит эффекты, управляющие яркостью, цветом и прозрачностью экземпляра символа.

- Выберем эффект прозрачности - Alpha, в выпадающем меню - Color Effect.

- Перемещая ползунок, установим нулевую прозрачность.

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

Создайте фантастический фильм, точнее его эпизод - "Телепортация киборга".

Сценарий фильма таков:

На экране две кабины для телепортации (с мигающими лампочками и индикаторами).

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

Поворот символа в соответствии с траекторией движения

Зачастую необходимо, чтобы при анимации по заданной траектории, символ изменял угол вращения в соответствии с направлением движения. Добиться этого очень легко, достаточно в ключевом кадре задающим анимацию движения - Tweening Motion, установить галочку Orient to path direction (ориентация по направляющей). В этом случае, при движении символа по траектории заданной в направляющем слое - Guide Layer, будет.

Проверим это на практике.

- Создадим новый символ New / Symbol [Ctrl+F8], назовите его Car - гоночный автомобиль формула-1.

- Поместите машину в первый кадр.

- Вставьте ключевой кадр (например 45) Insert / Keyframe [F6].

- Задайте для первого кадра режим анимации Motion.

- Установите галочку Orient to path direction.

- Вставьте направляющий слой Insert / Motion Guide.

- Нарисуйте в нем незамкнутую траекторию движения.

- В первом кадре установите автомобиль на начало траектории, а в последнем кадре на ее конец.

При просмотре Вы увидите, что Ваш гонщик точно следует всем поворотам трассы.

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

Тема 3. Движение по направляющему пути

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

Фильм этого проекта называется: MovePach.fla

В фильме три слоя:

Guide: Ladybug (Направляющие: божья коровка);

Ladybug (Божья коровка);

Background (Фон).

Для создания такого пути нам понадобится специальный слой, называемый слоем направляющих (guide layer). Линии, нарисованные на таком слое, не видны в SWF-файле, и хотя направляющий путь может вести объект по петляющей дороге, у него достаточно хороших манер, чтобы не появляться на экране во время просмотра фильма.

Фильмы в Flash создаются на столе с использованием киноленты, слоев, кадров и ключевых кадров

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

Создайте два слоя. Назовите нижний слой Background (Фон), а верхний - Ladybug (Божья коровка). Выделите верхний слой и нажмите кнопку Add Guide Layer (Добавить слой направляющих), которая находится справа от кнопки Insert Layer (Вставить слой). Над слоем Ladybug (Божья коровка) появится слой направляющих с именем Guide: Ladybug (Направляющие: божья коровка) (рис. 3.8). Выделите 30-й кадр в слое направляющих и, держа нажатой клавишу Shift, щелкните во всех кадрах столбца. Нажмите F5, чтобы добавить кадры вплоть до 30-го во все три слоя. Теперь стол готов к созданию движения по направляющему пути.

Слой Фона

Сплошной цвет #E6AB4C, заданный с помощью полей RGB на панели Mixer (Палитра), будет цветом фона. Используйте инструмент Rectangle (Прямоугольник), чтобы покрыть весь стол, и затем заблокируйте слой фона щелчком в столе со значком замка.

Рисунок 1. Работая с движением вдоль пути, можно сделать путь видимым и невидимым, щелкая в столбце видимости. Это позволяет проверить, как движение будет смотреться в реальном фильме

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

Слой направляющих

Выделите служебный слой и, используя карандаш, перо или кисть, нарисуйте путь, вдоль которого будет передвигаться наш объект. Оставьте достаточно места в начале и в конце пути для самого объекта. Если вы нарисуете путь точно из конца в конец стола, то объект при движении будет «выползать» за каря стола. В левой части рисунка 1 показано примерное положение пути, при котором божья коровка не вылезает за края стола. Заблокируйте слой, когда закончите.

Слой Ladybug

Божья коровка - это еще один рисунок. Нарисуйте сами или импортируйте рисунок божьей коровки (или другого понравившегося насекомого), выделите его и выберите команду Modify - Convert to Symbol (Изменить - Преобразовать в символ) или нажмите F8. такт как другие слои заблокированы, вы не рискуете случайно нарисовать жука не на том слое. Проделайте следующие шаги, чтобы заставить объект следовать вдоль намеченного пути:

1. Поместите считывающую головку на 30-й кадр и вставьте ключевой кадр.

2. Перемотайте фильм обратно в начало и нажмите Ctrl+F (Cmd+F), перейти на панель Frame (Кадр). Выделите кадр 1 и на панели Frame (Кадр) выберите Motion (Движение) в списке Tweening (Раскадровка) и установите флажки Orient to path (Следовать по пути) и Snap (Привязка). Когда вы установите флажок Orient to path (Следовать по пути), объект повернется, чтобы следовать вдоль кривой пути. Флажок Snap (Привязка) делает объект «привязанным» к пути. Если объект еще не находится на столе, поместите его в начало пути.

3. Передвиньте считывающую головку на 30-й кадр. Если вы уже выполнили привязку к пути, осторожно выделите объект (но не линию пути!) и перетащите объект вдоль траектории к ее концу. Во время перетаскивания вы увидите круглый маркер, который указывает центральную точку объекта и следует точно по линии пути. Убедитесь, что центральная точка находится в самом конце направляющего пути.

Тема 4. Движущиеся элементы

Цель занятия: использовать анимации движения.

1. Откроем готовый проект самолет.

2. Добавим новый слой. (Insert- Layer). Дадим название Фон. Расположим слой Фон самым нижним.

3. В качестве фона будем использовать растровое изображение. Для этого в меню File выбираем Open as Shared Library. В появившемся окне на локальном диске C:- Program files -Macromedia-Flash5-Tutorial-My Kite и открываем файл My Kite.

3.1. В появившейся библиотеке выбираем Bitmap, Background sky.

3.2. Перетащим изображение в наш ролик.

4. Меняем размер изображения:

4.1. Выберем Show all.

4.2. Вызовем панель Align (Ctrl+k). Выделяем To Stage.В опции - Match Size кликнем по Match Width и Match height, а также в опции Align -Align Left Edge и Align top Edge.

4.3. Затем снова выбираем Show all.

Преступим к созданию подвижной маски. Для этого необходимо выполнить следующие операции: 1)преобразовать этот фильм в эталон типа Movie Clip 2) Создать дубликат, присвоить тип - графический 3) отредактировать этот дубликат, заменив самолет залитым кругом и удалить фон 4) После чего смонтировать экземпляры из созданных эталонов новый фильм с подвижной маской.

5.Скопируем все кадры в новый эталон:

5.1. Выделяем все слои (с помощью клавиши Shift).

5.2. Щелкаем правой кнопкой мыши по выделенным слоям и выбираем Copy Frames.

6.Создадим новый эталон (Ctrl+F8). Дадим название - Самолет и выберем тип видеоклип.

6.1.На первом кадре клипа самолет, щелкнув правой кнопкой мыши, выбираем Paste Frames.

6.2.Дадим соответствующие названия нашим слоям (рис.1):

Рис. 1

7. Продублируем клип Самолет.

7.1. Открываем библиотеку, щелкаем правой кнопкой мыши по объекту эталона Самолет и выбираем Duplicate.

7.2. В появившемся окне Symbol Properties выбираем тип Graphic и даем название эталону Маска.

8.Теперь необходимо отредактировать эталон Маска. В библиотеке выбираем Маску и кликнем по ней двойным щелчком.

8.1. В редактирование Маски удаляем слой Фон. Щелкнув по кнопке Delete Layer.

8.2. На слое Самолет удаляем кадры (выделить кадры и нажать Shift+ F5).Затем первый кадр делаем ключевым (F6).

8.2.1. На панели инструментов выбираем овал и в опции Color щелкнем по No Color.

8.2.2. Рисуем окружность, удерживая Shift.

8.2.3. 40-й кадр делаем ключевым и перемещаем круг в конец траектории.

8.2.4. Выделяем всю дорожку и выбираем Create Motion Tween .

9. Перейдем в сцену 1 и вставим новую сцену для внесения новых изменений (Insert-Scene). Далее будем работать в появившейся Scene 2.

10.Откроем Библиотеку и перетащим самолет на сцену.

11.Добавим новый слой и перетащим маску.

12.Выровним Эталоны относительно центра сцены. В окне Align (для самолета) устанавливаем To Stage . Затем в опции Align выделяем горизонтальный и вертикальный центры.

Повторим это действие и для эталона Маска.

13. Слоям дадим соответствующие названия Самолет и маска.

14. Выделяем 40-е кадры на обоих слоях и делаем их ключевыми.

15. Откроем библиотеку и запустим редактирование Маска.

15.1.Выделим киноленту слоя самолет, и щелкнем правой кнопкой мыши, выберем Frame , установим бегунок до-100 в опции Easing.

16. Переходим на сцену 2.

16.1.Щелкнем правой кнопкой мыши по слою Маска и в выпадающем меню отметим MASK.

Готово. Запустите и проверьте, что получилось. (Ctrl+Alt+Enter).

Тема 5. Раскадровка формы и морфинг

Цель занятия: при работе использовать слои, раскадровку форм.

Ход работы:

Фильм этого проекта называется: Flower.fla

В фильме три слоя:

Flower (Цветок);

Stem (Стебель);

Background (Фон).

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

В этом основе преимущество раскадровки движения перед раскадровкой формы. Однако широкий диапазон изменений, возможных при раскадровке формы, делает ее очень привлекательной для реализации постепенных изменений и сложных трансформаций. Рисунки 1, 2 показывают различные стадии распускания цветка - трансформации из бутона в раскрытый цветок.

В начале создайте три указанных слоя. Затем щелкните на 20-м кадре верхнего слоя и перетащите указатель мыши вниз, выделив вес столбец. Нажмите F5, чтобы добавить по 20 кадров в каждый слой.

Используя данные из таблицы 1, создайте цветовую палитру фильма. После задания каждого цвета на панели Mixer (Палитра) не забывайте давать команду Add Swatch (Добавить образец в каталог) из меню, расположенного в правом верхнем углу панели.

Бутон перед началом раскадровки формы

10-й кадр - середина раскадровки изменений формы

Распустившийся цветок на последнем кадре фильма

Слой фона

Выберите на панели Stroke (Контур) толщину линий контура равной 10. выберите бежевый цвет (цвет 1) для контура и коричневый (цвет 4) для заливки. Используя инструмент Rectangle (Прямоугольник), нарисуйте прямоугольник, закрывающий весь стол. Добавьте временный рабочей слой, выбрав рабочий слой, выбрав слой фона и щелкнув на кнопке Insert Layer (Вставить слой) внизу раздела слоев. В новом слое нарисуйте круг диаметром 338 (W=338, H=338). Оставьте значение 10 для толщины контура, возьмите сиреневый цвет (цвет 6) для контура и голубой (цвет 3) для заливки. Используя панель Align (Выравнивание), расположите круг в центре стола. Сначала выберите Edit - Select All (Правка - Выделить все) или нажмите Ctrl+A (Cmd+A), а затем дайте команду Edit - Cut (Правка - Вырезать) или нажмите Ctrl+X (Cmd+X). Перейдите на слой фона и выберите Edit - Paste in Place (Правка - Вставить на место) или восполь-зуйтесь горячими клавишами Shift+Ctrl+V (Shift+Cmd+V). Особенно важно то, что таким образом (вырезая и вставляя) легко рисовать поверх уже существующих изображений на слое фона. Как только вы вставите круг в слой фона, выделите рабочий слой и удалите его щелчком на кнопке с корзиной внизу раздела слоев. Заблокируйте слой фона.

Слой стебля

Нам необходимо иметь отдельный слой со стеблем цветка и листом, так как они не изменяются вместе с бутоном. Нарисуйте стебель и лист, используя зеленый цвет из палитры проекта, заблокируйте слой и перейдите к слою цветка. Используйте рис.1-3 как подсказку.

Слой цветка

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

1. Переместите считывающую головку на 1-й кадр и нарисуйте бутон на вершине стебля, как было показано выше на рис.1.

2. Передвиньте головку на последний кадр, выделите его и клавишей F6 вставьте ключевой кадр.

3. один из способов обеспечить одинаковую форму для всех лепестков цветка - используя инструмент Pen (Перо), нарисовать один лепесток, а затем командами Copy (Копировать) размножить лепестки в нужном количестве (можно также воспользоваться перетаскиванием при нажатой клавише Alt (Option)). Потом с помощью панели Transform(Преобразование) поверните каждый лепесток в нужную позицию. Возьмите сиреневый цвет для лепестков и бежевый для серединки цветка. Цветок должен располагаться на кончике стебля, там же, где в 1-м кадре находится бутон.

4. Когда бутон и цветок будут закончены, щелкните на первом кадре, выделив его. Нажмите Ctrl+F (Cmd+F) для перехода на панель Frame (Кадр). Откройте список Tweening (Раскадровка) и выберите Shape (Форма). Появится стрелка раскадровки с зеленым фоном от первого до последнего кадра.

Тема 6. Создание анимационного спутника планеты

Цель занятия: научиться работать со слоями, использовать графику.

Создание эталона

Разработку анимации движения спутника по орбите вокруг планеты начнем с создания эталона «спутника».

- Выберите команду меню Insert * New Symbol (Вставить * Новый эталон). На экране появится диалог Create New Symbol (Создание эталона) (Рис.), в котором обычно достаточно только задать тип эталона и присвоить ему имя.

Диалог Create New Symbol (Создание эталона)

- В поле ввода Name (Имя) введите: Спутник.

Группа переключателей Behavior (Тип) позволяет определить тип создаваемого эталона:

Movie Clip (Клип), Button (Кнопка), Graphic (Графический). По умолчанию в этой группе установлен переключатель Button (Кнопка).

- Установите щелчком мыши переключатель Movie Clip (Клип).

- Закройте диалог Symbol Properties (Свойства эталона) щелчком мыши на кнопке ОК. Программа переключится в режим редактирования эталона и откроет соответствующее окно (Рис.).

На этот режим указывает появившийся в центре сцены крестик +, обозначающий точку привязки эталона, а также имя эталона - Спутник, появившееся в верхней части окна фильма, справа от названия сцены - Scene 1 (Сцена 1).

- Нарисуйте овал, нажав на кнопку [Oj - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов. Цвет овала - градиентный, радиальный, черно-белый. Убедитесь, что контур отсутствует.

- Установите указатель мыши, который примет форму крестика + , несколько выше и правее центра сцены, обозначенного также крестиком.

- Нажмите и удерживайте клавишу Shift.

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

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

Отпустите левую кнопку мыши.

Отпустите клавишу Shift. Будет создан объект в форме круга с градиентной круговой черно-белой заливкой без контура (Рис.).

Рис. Круг с градиентной заливкой создан

- Выберите команду меню Window * Design Panels * Info (Окно * Панели конструирования * Информация). На экране появится панель Info (Информация) (Рис.).

- Убедитесь, что созданный объект по-прежнему выделен - покрыт точечным узором. Если это не так, щелкните на нем мышью.

- На панели Info (Информация) дважды щелкните мышью в поле ввода W (Ширина), Н (Высота).

- Введите с клавиатуры 30.

- Если значения в полях ввода X и Y отличаются от -15.0, то откорректируйте их так, чтобы они были равны -15.0, и завершите ввод значений нажатием клавиши [[Enter].

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

Создание эталона Спутник завершено, и он автоматически помещен в библиотеку (Library), в которой хранятся эталоны всех объектов, используемых в фильме.

Выберите команду меню File * Save (Файл * Сохранить). На экране появится диалог Save As (Сохранить как).

Диалог Save As (Сохранить как).

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

- Откройте папку, в которой вы хотите создать папку Flash.

- В поле ввода File name (Имя файла) двойным щелчком мыши выделите находящееся там имя Untitled-1 .fla и введите: Sputnik - такое имя мы присвоим файлу фильма.

Создаем графические элементы фильма

- Нажмите кнопку - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов, чтобы включить этот инструмент.

- Укажите отсутствие цвета контура, щелкнув мышью на изображении карандаша кнопки - Stroke Color (Цвет контура), а затем - нажав кнопку - No Color (Не задан) в секции Colors (Цвета) панели инструментов.

- Заливку выберите коричневый цвет.

- Переместите указатель мыши на сцену и, удерживая нажатой клавишу Shift , нарисуйте в центре кадра круг так, чтобы его диаметр был несколько меньше высоты кадра.

- Выберите команду меню Window * Design Panels * Info (Окно * Панели конструирования * Информация). На экране появится панель Info (Информация).

- В полях ввода W (Ширина) и Н (Высота) введите значения 275 и нажмите клавишу [[Enter]. Размер «планеты» изменится в соответствии с указанными значениями.

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

- Нажав кнопку [Of - Oval Tool (О) (Овал) в секции Tools (Инструменты) панели инструментов, снова выберите этот инструмент.

- Выберите синий цвет в открывающейся палитре Ц - Stroke Color (Цвет контура) секции Colors (Цвета) панели инструментов.

- Укажите отсутствие заливки, щелкнув мышью на значке ^ кнопки [& О j - Fill Color (Цвет заливки) и вслед за ней нажав кнопку - No Color (He задан) в секции Colors (Цвета) панели инструментов.

- Переместите указатель мыши в пределы кадра и нарисуйте эллипс так, чтобы его оризонтальная ось приблизительно совпадала с горизонтальным диаметром круга, ширина была несколько меньше ширины кадра, а высота - меньше диаметра круга.

- Для выделения контура, дважды щелкните мышью в любом месте контура эллипса.

- Выберите команду меню Modify * Group (Модификация * Сгруппировать). С помощью инструмента Free Transform Tool (Q) (Произвольная трансформация) поверните контур.

- Выберите команду меню Modify * Ungroup (Модификация * Разгруппировать), затем удалите ненужную часть контура.

- Дважды щелкните мышью на имени слоя Layer 1. Это имя будет выделено темным цветом и появится мигающий текстовый курсор.

- Введите новое имя слоя - Планета - и нажмите клавишу [[Enter} или щелкните мышью где-нибудь на пустом месте в шкале времени. Введенное имя отобразится в названии слоя.

- Убедитесь, что включен инструмент [hj - Selection Tool (V) (Выделение). В противном случае нажмите его кнопку в секции Tools (Инструменты) панели инструментов.

- Дважды щелкните мышью на контуре эллипса, чтобы выделить его.

-Выберите команду меню Edit * Cut (Правка * Вырезать).

Создадим новый слой.

- Нажмите кнопку Insert Layer (Вставить слой) в нижнем левом углу окна шкалы времени (Timeline). В левой части этого окна появится и будет выделен новый слой, которому по умолчанию присвоено имя Layer 2 (Рис.).

- Выберите команду меню Edit * Paste in Place (Правка * Вставить в то же место). Изображение эллипса будет вставлено из буфера обмена на новый слой Layer 2 и выделено.

Переименуем слой Layer 2, присвоив ему более выразительное имя - Орбита.

Движение по заданной траектории.

Создадим новый слой Спутник.

- Откройте окно библиотеки (Library) командой меню Window * Library (Окно *Библиотека).

Установите указатель мыши на значке или имени эталона Спутник в окне библиотеки (Library).

-Нажмите и удерживайте левую кнопку мыши.

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

- Отпустите левую кнопку мыши. Положение объекта будет закреплено, и он будет выделен голубой квадратной рамкой

Теперь для первого ключевого кадра слоя Спутник следует определить тип и параметры анимации. Это выполняется с помощью панели Properties (Свойства).

- В открывающемся списке Tween (Расчетная анимация) выберите пункт Motion (Движение). На панели Properties (Свойства) отобразятся элементы управления анимацией движения (Рис.).

-Сбросьте флажок Scale (Масштаб), чтобы пока не включать анимацию размеров.

- Установите флажок Orient to path (Ориентировать по траектории), чтобы заставить спутник двигаться по траектории, определенной на специальном ведущем слое.

- Установите флажок Sync (Синхронизация). Это гарантирует синхронизацию объектов анимации и позволяет исправить ошибки, которые иногда возникают при анимации объектов, уже содержащих анимацию.

- Установите флажок Snap (Привязка), чтобы автоматически фиксировать объект на траектории, если его положение определено недостаточно точно.

- Установите указатель мыши у правого края окна шкалы времени (Timeline) в строке слоя Спутник под меткой 62 шкалы нумерации кадров.

- Щелкните мышью в этом месте. В указанной позиции появится темный прямоугольник.

- Не отпуская клавишу shift, щелкните мышью в строке слоя Орбита, Спутник и Планета под меткой 62 шкалы нумерации кадров. В этом месте появится темный прямоугольник. Выберите команду меню Insert * Timeline * Keyframe. Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы выделить его. При этом на сцене будет выделено изображение спутника.

He отпуская левую кнопку мыши, переместите указатель мыши в верхнюю крайнюю точку эллиптической орбиты, где эллипс касается планеты. Вместе с указателем мыши переместится изображение спутника Выберите команду меню Control * Play.

- Щелкните мышью на слое Орбита в окне шкалы времени (Timeline). Этот слой и все его кадры будут выделены. Одновременно будет выделен эллипс на сцене.

- Выберите команду меню Edit * Сору (Правка * Копировать). Выделенный объект будет скопирован в буфер обмена.

Создадим над слоем Спутник с анимацией новый ведущий слой.

- Щелкните мышью в окне шкалы времени (Timeline) на слое Спутник, чтобы выделить его.

- Нажмите кнопку Add Motion Guide (Добавить траекторию движения) в левой нижней части окна шкалы времени (Timeline). Над слоем Спутник будет вставлен новый ведущий слой, которому по умолчанию присвоено имя Guide: Спутник (Ведущий: Спутник) (Рис.).

Вставим изображение траектории из буфера обмена на ведущий слой Guide: Спутник.

- Щелкните мышью на слое Guide: Спутник в окне шкалы времени (Timeline), чтобы выделить его и снять выделение слоя Спутник.

- Выберите команду меню Edit * Paste in Place (Правка * Вставить в то же место). Изображение эллипса будет вставлено из буфера обмена на слой Guide: Спутник и выделено на сцене.

- Выключите отображение ведущего слоя Guide: Спутник, щелкнув мышью в его строке на пересечении со столбцом со значком глаза Щ. Выделенное изображение эллипса, находящееся на этом слое, будет скрыто. Останется видимым только эллипс на слое Орбита.

-Нажмите клавишу Enter, чтобы просмотреть созданную анимацию.

- Чтобы сделать проигрывание фильма циклически повторяющимся, то есть таким, каким оно обычно бывает при просмотре в проигрывателе или браузере, выберите команду меню Control * Loop Playback (Управление * Циклическое проигрывание).


6


Общая информация

Номер материала: ДВ-140874

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышение квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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