Ученики на Учителя.com


Конспект урока "Анимация во Flash"

Занятие 2. Анимация во Flash
Создайте, если еще не создали, Вашу рабочую папку, в которой будете сохранять
результаты работы.
Покадровая анимация
Задание 1. Создайте фильм с растущим цветком. Результат работы сохраните
во внутреннем формате (Цветок.fla) и в формате gif (export
movie).
Пошаговый алгоритм.
1. Установите свойство скорость показа (частота на панели свойство или в
меню изменить в пункте документ) равной 8. Здесь же Вы можете изменить
размеры сцены, цвет фона.
2. Создайте изображение горшка
a. Постройте не залитый овал верхней части горшка, цвет – коричневый;
b. Выделите построенный овал и выполните команду копировать и
вставить;
c. К копии примените команду Изменить/Трансформация/Масштаб/Поворот и вращение…
указав масштаб 75%;
d. Расположите построенные объекты строго один под другим, для чего выделите оба объекта
и в панели Выровнять при горящей опции По сцене щелкните по кнопке
(Выровнять по центру). Возможно, Вам придется опустить овал нижнего основания ниже;
e. Постройте две общие касательные к построенным овалом;
f. Удалите ненужную часть нижнего овала;
g. Закрасьте горшок градиентной линейной, коричневой заливкой, а внутреннюю часть черным
цветом (земля);
h. Назовите этот слой Горшок.
i. Вставьте на 48 кадр Кадр. Для этого щелкните по нему правой кнопкой мышки в
контекстном меню выберите пункт Вставить кадр или выделив его, нажмите F5.
3. Добавьте еще один слой, щелкнув по кнопке . Назовите его Цветок.
4. Встаньте на кадре 4 слоя Цветок и выполните команду Вставить/Вставить ключевой кадр
(или нажмите F6 или вызовите щелчком по нужному кадру правой кнопкой мышки контекстное
меню и выберите в нем нужный пункт).
5. Выберите инструмент кисть, толщину и цвет нарисуйте маленький побег.
6. Встаньте на кадре 7 слоя Цветок и вставьте ключевой кадр. Дорисуйте побег.
7. Встаньте на кадре 10 слоя Цветок и вставьте ключевой кадр. Дорисуйте побег. И так далее,
включая появление цветка, а дальше его увядание.
8. Сохранения во внутреннем формате (fla).
9. Запустите ролик на выполнение, выбрав команду управление/проверить ролик или Ctrl+Enter.
10. Обратите внимание – цветок не задерживается на экране. Для его размножения на оставшиеся
кадры вставьте на слое цветок кадр (нажмите F5 или вызовите щелчком по нужному кадру
правой кнопкой мышки контекстное меню и выберите в нем нужный пункт).
11. Для сохранения ролика в формате gif выберите в меню file/export команду export movie.
Установите нужные опции (цвета – standard colors, прозрачность – transparent, повторять – 0).
Выполните сохранение щелкнув по кнопке Опубликовать.
12. Завершите работу с программой.
Задание 2. Создайте фильм Солнце. Результат работы сохраните во внутреннем
формате (Солнце.fla) и в формате gif (Солнце.gif). Для расширения
лучей используйте трансформацию.
Анимация формы
Задание 3. Преобразование shape (фигура). Составить flash-фильм преобразования круга в
прямоугольник и обратно.
1. Зададим параметры видео фрагмента, используя меню Свойства: скорость показа, размер сцены,
цвет фона (можно не менять).
2. Поместим в 1-ом кадре шар радиальной синей закраской. Разместим его по центру, используя
инструмент Выравнивание.
3. Выделим 1 кадр. В панели Свойства установим Tween опцию Shape (Форма).
4. Щелкнем правой кнопкой мыши на ячейке 30-го кадра и из контекстного меню выберем команду
Вставка чистого ключевого кадра (можно использовать меню Вставка/Чистый ключевой кадр
или клавишу F7).
5. Поместим в 30 кадр изображение квадрата, залитого градиентом из трех цветов. Для этого выберем
инструмент Прямоугольник, вызовем (если его нет на экране) панель заливка
(Окно/Панели/Заливка). Установим цвета краев и промежуточные цвета. Разместим его по центру.
Повернем его, используя Модификацмя/Поворот на 45
0
. Ячейки 1-го и 30-го кадра соединятся
стрелкой, а промежуточные ячейки окрасятся в светло-зеленый цвет.
6. Для просмотра анимации выберем в Управление/Автоматический повтор, а затем
Управление/Воспроизведение. Остановка клавиша Esc.
7. Выделим кадры с 1 по 30 и щелкнем правой кнопкой мышкой по выделенному. Выберем команду
копировать кадры.
8. Щелкнем правой кнопкой мышкой по 31 кадру и выберем команду Вставить кадры.
9. Выделим только что вставленные кадры. Щелкнем правой кнопкой мышкой по выделенному и
выберем команду Обратить кадры.
10. Запустим воспроизведение.
11. Сохраним работу во внутреннем представлении, для чего выполним команду Файл/Сохранить как c
выбором папки и имени.
12. Сохраним и в других форматах. Для сохранения ролика в формате gif выберите в меню file/export
команду export movie. Установите нужные опции (цвета – standard colors, прозрачность – transparent,
повторять – 0). Выполните сохранение щелкнув по кнопке Опубликовать
13. Выйдем из программы Flash и убедимся, что нужные файлы созданы. Запустим каждый из них.
Задание 3а. Преобразование shape (фигура) с подсказками (хинтами)
1. Вызовем flash-фильм на редактирование. Для этого сделаем двойной щелчок мыши на файле имя.fla.
2. Встанем на 1-ый кадр и вставим четыре подсказки (хинта). Для этого используем команду
Модификация/Фигура/Добавление фигуры подсказки. Расположим их против часовой стрелки в
виде горизонтального прямоугольника.
3. Встанем на 30-ый кадр расположим подсказки против часовой стрелки в вершинах прямоугольника,
но так чтобы a и с, а также b и d поменялись местами.
4. Повторим тоже для 31 и 60 кадров.
5. Сохраним работу во внутреннем представлении и формате gif.
6. Вернемся на кадр 1 и поэкспериментируем с подсказками (хинтами).
Задание 4. Преобразование одного
большого красного круга в
шесть маленьких зеленных.
Все круги без границы.
Задание 5. Составьте flash-фильм преобразования красного, синего и зеленого круга соответственно
в слова «Информатика учит думать!», «Информатика учит делать!» и «Информатика
помогает общаться!». Результат работы сохраните во внутреннем формате
(Flash_Метаморфозы.fla) и в других форматах.
Пошаговый алгоритм.
1. Установите размеры документа длина 200 пикселей, высота 100 пикселей (один из стандартных
размеров баннера).
2. Создайте три слоя с именами «Красный», «Синий» и «Зеленый».
3. Нарисуйте на первом кадре «Красного» слоя красный круг без границы, «Зеленого» слоя зеленый
круг без границы, «Синего» слоя синий круг без границы. Разместите их в правом нижнем углу.
Обеспечьте одинаковые размеры.
4. Объявите 5 кадр на слое «Красный» ключевым, а 15 пустым ключевым.
5. Введите на этот (15) кадр текст «Информатика учит думать!» – цвет букв красный. Выполните
центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду
Изменить/Разделить отдельно.
6. Вставьте на 5 кадр этого слоя преобразование формы (панели Свойства значение Пара… установите
Shape).
7. Вставьте на 50 кадр этого слоя Кадр.
8. Объявите 16 кадр на слое «Синий» ключевым, а 26 пустым ключевым.
9. Введите на этот (26) кадр текст «Информатика учит делать!» – цвет букв синий. Выполните
центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду
Изменить/Разделить отдельно.
10. Вставьте на 16 кадр этого слоя преобразование формы (панели Свойства значение Пара… установите
Shape).
11. Вставьте на 50 кадр этого слоя Кадр.
12. Объявите 27 кадр на слое «Зеленый» ключевым, а 37 пустым ключевым.
13. Введите на этот (37) кадр текст «Информатика помогает общаться!» – цвет букв зеленый. Выполните
центрирование по горизонтали. Выделите Текстовое окно и два раза выполните команду
Изменить/Разделить отдельно.
14. Вставьте на 27 кадр этого слоя преобразование формы (панели Свойства значение Пара… установите
Shape).
15. Вставьте на 50 кадр этого слоя Кадр.
16. Запустите ролик на на выполнение, выбрав команду Управление/Проверить ролик или Ctrl+Enter.
17. Сохраните ролик.
Анимация движения
Задание 6. Преобразование motion (Движение). Фигура летит, вращаясь и уменьшаясь.
Пошаговый алгоритм.
1. Встаньте на 1-ый кадр и разместите фигуру по своему вкусу.
2. Сгруппируйте ее. Возле нее должна появиться голубая рамка.
3. Выделите 1-й кадр и в панели свойств выберите из списка Tween опцию Motion (Движение). При
желании выбираем поворот по часовой или против часовой стрелки и число раз. Включите свойства
синхронизация и Snap.
4. Встаньте на 24-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 24-го
кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать
меню Вставка/Ключевой кадр или клавишу F6). Ячейки 1-го и 24-го кадра соединятся стрелкой, а
промежуточные ячейки окрасятся в светло-синий цвет.
5. В 24-ом кадре изменим положение фигуры, размер.
6. Запустите фильм.
7. Встаньте на 70-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 36-го
кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать
меню Вставка/Ключевой кадр или клавишу F6).
8. В 70-ом кадре изменим положение фигуры, размер. Запустите фильм.
9. В 70-ом кадре свойство Ease, дав ему значение –100 (второе движение будет ускоряющимся).
10. Запустите фильм.
11. Сохраните flash-фильм в форматах fla и анимированный gif.
Задание 7. Преобразование motion (Движение),
слои. Яхта плывет по морю.
Пошаговый алгоритм.
1. Встаньте на 1-ый кадр и разместите в нем
прямоугольник неба (линейный градиент
синего и белого). Назовите слой небо. Для
этого сделайте двойной щелчок на имени
слоя и введите новое имя.
2. Используя кнопку добавьте слой который
назовите море. Оформите его светло-темно
синий градиент.
3. Используя кнопку добавьте слой который
назовите яхта. Нарисуйте яхту. Для удобства
отключите слои море и небо. Не забудьте затем включить его.
4. В слоях море и небо на 120-ый кадр вставьте Кадр.
5. Сгруппируйте яхту. Возле нее должна появиться голубая рамка.
6. Встаньте на 1-кадр слоя яхта и создайте движение. Для этого На панели Свойства выберите из
списка Tween опцию Motion (Движение). Установите свойство Ease, дав ему значение 100 (второе
движение будет замедляющимся)
7. Встаньте на 120-ый кадр слоя яхта и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на
ячейке 120-го кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно
использовать меню Вставка/Ключевой кадр или клавишу F6).
8. Оформите слой остров. Создайте его. Украсьте. Найдите слою подходящее место.
9. При желании создайте слой пальма. Найдите слою подходящее место.
10. Запустите фильм.
11. Сохраняем flash-фильм и публикации.
Задание 8. Преобразование motion (Движение), управляющий слой, движение по траектории.
Летит стрела.
Пошаговый алгоритм.
1. Встаньте на 1-ый кадр и разместите в нем стрелу. Поверните ее по направлению будущего полета.
12. Встаньте на 1-кадр На панели Свойства выберите из списка Tween опцию Motion (Движение).
Установите свойства ориентация по пути и snap (притягиваться к направляющей). Установите
опцию ориентирование по пути и ослабление (уменьшения скорости полета).
2. Встаньте на 40-ый кадр и вставьте ключевой кадр (щелкнуть правой кнопкой мыши на ячейке 40-го
кадра и из контекстного меню выберем команду Вставка ключевого кадра, можно использовать
меню Вставка/Ключевой кадр или клавишу F6).
3. Используя кнопку добавьте управляющий слой.
4. Перейдите на 1-ый кадр.
5. Используя инструмент карандаш в управляющем слое начертите траекторию.
13. На 1 кадре установите стрелу к началу траектории. Установите опцию ориентирование по пути.
6. На 40 кадре установите стрелу к концу траектории. и поверните ее в нужном направлении.
7. Запустите фильм. Сохраняем flash-фильм и публикации.
Скачать материал

Информатика - еще материалы к урокам: