Анимация во Flash

Занятие 2. Анимация во Flash

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

Покадровая анимация

З адание 1. Создайте фильм с растущим цветком. Результат работы сохраните во внутреннем формате (Цветок.fla) и в формате gif (exportmovie).

Пошаговый алгоритм.

Установите свойство скорость показа (частота на панели свойство или в меню изменитьв пунктедокумент) равной 8. Здесь же Вы можете изменить размеры сцены, цвет фона.

Создайте изображение горшка

Постройте не залитый овал верхней части горшка, цвет – коричневый;

Выделите построенный овал и выполните команду копировать и вставить;

К копии примените командуИзменить/Трансформация/Масштаб/Поворот и вращение… указав масштаб 75%;

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

Постройте две общие касательные к построенным овалом;

Удалите ненужную часть нижнего овала;

Закрасьте горшок градиентной линейной, коричневой заливкой, а внутреннюю часть черным цветом (земля);

Назовите этот слой Горшок.

Вставьте на 48 кадр Кадр. Для этого щелкните по нему правой кнопкой мышки в контекстном меню выберите пункт Вставить кадр или выделив его, нажмите F5.

Добавьте еще один слой, щелкнув по кнопке . Назовите его Цветок.

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

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

Встаньте на кадре 7 слоя Цветок и вставьте ключевой кадр. Дорисуйте побег.

Встаньте на кадре 10 слоя Цветок и вставьте ключевой кадр. Дорисуйте побег. И так далее, включая появление цветка, а дальше его увядание.

Сохранения во внутреннем формате (fla).

Запустите ролик на выполнение, выбрав командууправление/проверить ролик или Ctrl+Enter.

Обратите внимание – цветок не задерживается на экране. Для его размножения на оставшиеся кадры вставьте на слое цветоккадр(нажмитеF5или вызовите щелчком по нужному кадру правой кнопкой мышки контекстное меню и выберите в нем нужный пункт).

Для сохранения ролика в формате gif выберите в меню file/export команду exportmovie. Установите нужные опции (цвета –standardcolors, прозрачность – transparent, повторять – 0). Выполните сохранение щелкнув по кнопке Опубликовать.

Завершите работу с программой.

Задание 2. Создайте фильм Солнце. Результат работы сохраните во внутреннем формате (Солнце.fla) и в формате gif (Солнце.gif). Для расширения лучей используйте трансформацию.

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

Задание 3. Преобразованиеshape (фигура). Составитьflash-фильм преобразования круга в прямоугольник и обратно.

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

Поместим в 1-ом кадре шар радиальной синей закраской. Разместим его по центру, используя инструмент Выравнивание.

Выделим 1 кадр. В панели СвойстваустановимTween опцию Shape(Форма).

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

Поместим в 30 кадр изображение квадрата, залитого градиентом из трех цветов. Для этого выберем инструмент Прямоугольник, вызовем (если его нет на экране) панель заливка (Окно/Панели/Заливка). Установим цвета краев и промежуточные цвета. Разместим его по центру. Повернем его, используя Модификацмя/Поворотна 45⁰. Ячейки 1-го и 30-го кадра соединятся стрелкой, а промежуточные ячейки окрасятся в светло-зеленый цвет.

Для просмотра анимации выберем вУправление/Автоматический повтор, а затем Управление/Воспроизведение. Остановка клавиша Esc.

Выделим кадры с 1 по 30 и щелкнем правой кнопкой мышкой по выделенному. Выберем команду копировать кадры.

Щелкнем правой кнопкой мышкой по 31 кадру и выберем команду Вставить кадры.

Выделим только что вставленные кадры. Щелкнем правой кнопкой мышкой по выделенному и выберем команду Обратить кадры.

Запустим воспроизведение.

Сохраним работу во внутреннем представлении, для чего выполним команду Файл/Сохранить как c выбором папки и имени.

Сохраним и в других форматах. Для сохранения ролика в формате gif выберите в меню file/export команду exportmovie. Установите нужные опции (цвета –standardcolors, прозрачность – transparent, повторять – 0). Выполните сохранение щелкнув по кнопке Опубликовать

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

Задание 3а. Преобразование shape (фигура) с подсказками (хинтами)

Вызовемflash-фильм на редактирование. Для этого сделаем двойной щелчок мыши на файле имя.fla.

Встанем на 1-ый кадр и вставим четыре подсказки (хинта). Для этого используем командуМодификация/Фигура/Добавление фигуры подсказки. Расположим их против часовой стрелки в виде горизонтального прямоугольника.

Встанем на 30-ый кадр расположим подсказки против часовой стрелки в вершинах прямоугольника, но так чтобы a и с, а также b и d поменялись местами.

Повторим тоже для 31 и 60 кадров.

Сохраним работу во внутреннем представлении и формате gif.

Вернемся на кадр 1 и поэкспериментируем с подсказками (хинтами).

Задание 4. Преобразование одного большого красного круга в шесть маленьких зеленных. Все круги без границы.

Задание 5. Составьтеflash-фильм преобразования красного, синего и зеленого круга соответственно в слова «Информатика учит думать!», «Информатика учит делать!» и «Информатика помогает общаться!». Результат работы сохраните во внутреннем формате (Flash_Метаморфозы.fla) и в других форматах.

Пошаговый алгоритм.

Установите размеры документа длина 200 пикселей, высота 100 пикселей (один из стандартных размеров баннера).

Создайте три слоя с именами «Красный», «Синий» и «Зеленый».

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

Объявите 5 кадр на слое «Красный» ключевым, а 15 пустым ключевым.

Введите на этот (15) кадр текст «Информатика учит думать!» – цвет букв красный. Выполните центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду Изменить/Разделить отдельно.

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

Вставьте на 50 кадр этого слоя Кадр.

Объявите 16 кадр на слое «Синий» ключевым, а 26 пустым ключевым.

Введите на этот (26) кадр текст «Информатика учит делать!» – цвет букв синий. Выполните центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду Изменить/Разделить отдельно.

Вставьте на 16 кадр этого слоя преобразование формы (панели Свойства значение Пара… установите Shape).

Вставьте на 50 кадр этого слоя Кадр.

Объявите 27 кадр на слое «Зеленый» ключевым, а 37 пустым ключевым.

Введите на этот (37) кадр текст «Информатика помогает общаться!» – цвет букв зеленый. Выполните центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду Изменить/Разделить отдельно.

Вставьте на 27 кадр этого слоя преобразование формы (панели Свойства значение Пара… установите Shape).

Вставьте на 50 кадр этого слоя Кадр.

Запустите ролик на на выполнение, выбрав командуУправление/Проверить ролик или Ctrl+Enter.

Сохраните ролик.

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

Задание 6. Преобразованиеmotion (Движение). Фигура летит, вращаясь и уменьшаясь.

Пошаговый алгоритм.

Встаньте на 1-ый кадр и разместите фигуру по своему вкусу.

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

Выделите 1-й кадр и в панели свойств выберите из списка Tween опцию Motion (Движение). При желании выбираем поворот по часовой или против часовой стрелки и число раз. Включите свойства синхронизация и Snap.

Встаньте на 24-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 24-го кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать меню Вставка/Ключевой кадр или клавишу F6). Ячейки 1-го и 24-го кадра соединятся стрелкой, а промежуточные ячейки окрасятся в светло-синий цвет.

В 24-ом кадре изменим положение фигуры, размер.

Запустите фильм.

Встаньте на 70-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 36-го кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать меню Вставка/Ключевой кадр или клавишу F6).

В 70-ом кадре изменим положение фигуры, размер. Запустите фильм.

В 70-ом кадре свойство Ease, дав ему значение –100 (второе движение будет ускоряющимся).

Запустите фильм.

Сохранитеflash-фильм в форматах fla и анимированный gif.

З адание 7. Преобразованиеmotion (Движение), слои. Яхта плывет по морю.

Пошаговый алгоритм.

Встаньте на 1-ый кадр и разместите в нем прямоугольник неба (линейный градиент синего и белого). Назовите слой небо. Для этого сделайте двойной щелчок на имени слоя и введите новое имя.

Используя кнопку добавьте слой который назовите море. Оформите его светло-темно синий градиент.

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

В слоях море и небо на 120-ый кадр вставьте Кадр.

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

Встаньте на 1-кадр слоя яхта и создайте движение. Для этого На панели Свойства выберите из списка Tween опцию Motion (Движение). Установите свойство Ease, дав ему значение 100 (второе движение будет замедляющимся)

Встаньте на 120-ый кадр слоя яхта и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 120-го кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать меню Вставка/Ключевой кадр или клавишу F6).

Оформите слой остров. Создайте его. Украсьте. Найдите слою подходящее место.

При желании создайте слой пальма. Найдите слою подходящее место.

Запустите фильм.

Сохраняемflash-фильм и публикации.

Задание 8. Преобразованиеmotion (Движение), управляющий слой, движение по траектории. Летит стрела.

Пошаговый алгоритм.

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

Встаньте на 1-кадр На панели Свойства выберите из списка Tween опцию Motion (Движение). Установите свойства ориентация по пути и snap (притягиваться к направляющей). Установите опцию ориентирование по пути и ослабление (уменьшения скорости полета).

Встаньте на 40-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 40-го кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать меню Вставка/Ключевой кадр или клавишу F6).

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

Перейдите на 1-ый кадр.

Используя инструмент карандаш в управляющем слое начертите траекторию.

На 1 кадре установите стрелу к началу траектории. Установите опцию ориентирование по пути.

На 40 кадре установите стрелу к концу траектории. и поверните ее в нужном направлении.

Запустите фильм. Сохраняем flash-фильм и публикации.

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/163276-animacija-vo-flash