Изучение FLASH MX
в среднем звене
в среднем звене
(9 уроков)
учитель
информатики
Веровенко Н.Н.
Веровенко Н.Н.
ГОУ СОШ №94
г.Санкт-Петербурга
Выборгского района
г.Санкт-Петербурга
Выборгского района
г. САНКТ-ПЕТЕРБУРГ
- 2008 -
- 2008 -
При выполнении этой разработки хотелось бы поблагодарить сотрудников Бурсова
М.В. и Домненко В.М. , которые на курсах повышения квалификации в области
информационных технологий в
Санкт-Петербургском государственном университете точной механики и оптики (ИТМО) познакомили нас c программой FLASH MX. Полученную информацию на
курсах, я постаралась показать и научить
своих учеников создавать анимация.
Содержание
Урок №1
Рассмотрим монтажный стол:
Слева находятся панели инструментов.
Справа находятся диалоги настройки инструментов цвета,
текста и т.д.
Посередине – рабочая область.
Над рабочим полем – шкала времени. Всего 16000 кадров,
которые можно просмотреть за 5 минут
Каждый 5 кадр – серый (для облегчения)
1 ключевой кадр (КК) по умолчанию. Черная точка говорит о том, что это ключевой кадр (keyframe)
Инструменты рисования
Во FLASH очень интересно рисовать. Этот
векторный редактор не похож ни на один из существующих.
Подробно о каждом инструменте мы поговорим, когда будем
создавать рисунки-объекты.
Ψ Для изменения формы есть черная
стрелка
Для работы с ней необходимо
щелкнуть ЛКМ по рабочему полю. При подводе к объекту курсор примет вид
 к углу |
к стороне
|
Свойство объекта
Каждый объект имеет свойство (Propeties). Для этого нужно
подвести курсор к объекту.
Анимация
Анимация создается только по ключевым кадрам.
Существует 2 вида анимации:
- Shape tweening
- Motion tweening
Shape tweening.
Скажем, вам нужно, чтобы
квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт
волка. В этих случаях используется shape tweening.
Как обычно, вы задаете два ключевых кадра на некотором
расстоянии друг от друга. В этом варианте анимация есть жесткое ограничение:
ваша анимация должна занимать отдельный слой и быть единой нарисованной фигурой
(не должно быть групп или символов).
После того как у вас есть два ключевых кадра, вы делаете
активным первый из них (просто переходите на него), и выбираете на панели
свойства Shape (Пара (Tween) → Shape).
Кадры на временной шкале должны окраситься в зеленоватый
цвет и от первого кадра ко второму должна протянуться стрелочка
В результате вы получите ряд промежуточных кадров, которые
будут отражать переход от первой фигуры ко второй.:
. Немного о параметрах shape tweening. Появилась пара других
параметров, когда вы выбрали shape tweening
в панели свойств – Свободное перемещение и тип морфинга. Поле Label содержит метку кадра. Свободное
перемещение задает обратное
экспоненциальное ускорение. Величина этого параметра может изменяться от – 100
до + 100. Это означает, что если вы зададите отрицательный, свободное
перемещение движение будет происходить с
положительным ускорение, скорость будет увеличиваться
Ключевой кадр
Сначала создадим ключевой кадр. Существует 3 способа
1 способ.
1. Щелкнуть
по кадру ЛКМ, где необходимо создать.
2. Выбрать
в меню: Вставить → Ключевой кадр (КК)
2 способ.
1. Щелкнуть по кадру ЛКМ, где
необходимо создать.
2. Нажать F6
3 способ.
1. Щелкнуть
по кадру ПКМ, где необходимо создать.
2. Появится
контекстное меню. Выбрать в меню: Вставить
→ Ключевой кадр
Пример 1. Простое перемещение объекта.
1.
Нарисовать квадрат.
2.
Щелкнуть по 25 кадру ЛКМ, F6 (т.е. создаем 2 КК)
3.
Выбрать щелкнуть ЛКМ по
фону
рабочей области (РО) и видоизменить квадрат
рабочей области (РО) и видоизменить квадрат
4.
ЛКМ по 1КК
5.
В панели свойства выбрать Shape (Пара (Tween) →
Shape).
6.
Выполнить. (Enter)
Пример 2. Перемещение объекта с исчезновением.
1.
Нарисовать круг.
2.
Щелкнуть по 25 кадру
ЛКМ, F6 (т.е. создаем 2
КК)
3.
Перетащить круг вниз
4.
Easing
(Альфа) поставить 0.
5.
В панели свойства выбрать Shape (Пара (Tween) →
Shape).
6.
Выполнить. (Enter)
Урок№2
Задание собственной заливки
Рассмотрим цветовой микшер
Пример 3 Цветовой эффект
1.
Нарисовать прямоугольник.
2.
Залить слева градиентной заливкой.
3.
Щелкнуть по 25 кадру ЛКМ, F6 (т.е. создаем 2 КК)
4.
ЛКМ по 2КК Залить справа градиентной заливкой
5.
В панели свойства выбрать Shape (Пара (Tween) →
Shape).
6.
Выполнить. (Enter)
Самостоятельно создать эффект от
светлого до темного цвета.(от 25-50 кадра)
Создание собственной градиентной заливки.
Существует два
маркера.
Для
изменения цвета
Для
добавления нового цвета необходимо:
1. Установить
маркер при помощи черной стрелки
2. Выбрать цвет.
Для
изменения расположения эффектной градиентной заливки нужно выбрать инструмент , который расположен под кистью.1 щелчком по объекту выделяем
его. Вокруг объекта появится орбита с тремя точками.
Центр можно перенести.
Маркер превращает
окружность в эллипс.
Радиус
увеличивает область окраски.
Наклон по
желанию.
Пример 4 Цветовой эффект 2
1.
Нарисовать прямоугольник.
2.
Выбрать:
Ведро → Микшер цвета
→ Lineаr.
3.
Щелкнуть (все равно куда) по прямоугольнику.
4.
ЛКМ по 25 кадру
→ F6.
5.
Используя трансформацию заполнения, повернуть цвета
фигуры на 90˚
6.
В панели свойства выбрать Shape (Пара (Tween) →
Shape).
7.
Выполнить. (Enter)
Самостоятельно создать анимацию
во флаге.
Урок №3.
Ключевые точки (Хинты)
В некоторых
случаях анимационные алгоритмы не дают необходимого качества анимации.
Визуально это выражается в том, что исходный объект перед превращением в
результирующий объект «выворачивается на изнанку». Для устранения этого эффекта
используется идентификаторы формы (shape hints).Такими идентификаторами помечают пары точек, положение
которых на исходном и результирующем объектах должно быть одинаково.
Использовать можно не более 26 точек. Точка желтого цвета на исходном объекте, зеленая на
результирующем объекте, и красного
цвета, если установлена не верно. Это позволяет направить процесс в анимации в
нужное русло, делая ее более эстетичной.
На первом
ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку
(Modify->Transform->Add shape hint, Ctrl+Shift+H).
На сцене появится маленькая красная точка, обозначенная буквой латинского
алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так,
как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту
же точку к части, в которую должна была перейти часть на начальном кадре. Точка
будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете
отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать
и те и другие.
Удалить все
точки можно с помощью Modify->Transform->Remove
All Hints. Удалить же единственную точку можно, нажав на ней правую
кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как
контрольные точки обозначаются буквами латинского алфавита, то их может быть
максимум 27.
В качестве
примера попробуем анимировать превращение цифры 1 в цифру 2.
Пример 5. Превращение цифры 1 в цифру 2
1.
Выбрать инструмент
«Техт» и написать цифру 1
размером в 72pt
2.
Создать 2 КК на 25 кадре.
3.
Вместо цифры 1, пишем цифру 2 и переносим
цифру 2 в нижний правый угол.
Следует разгруппировать объекты.
4.
Щелкаем по 25
кадру и в меню выбираем:
Изменить → Разделить отдельно (Modify → Break Appart)
Изменить → Разделить отдельно (Modify → Break Appart)
5.
Щелкаем по 1 кадру и в меню выбираем:
Изменить → Разделить отдельно (Modify → Break Appart)
Изменить → Разделить отдельно (Modify → Break Appart)
6.
В панели свойства выбрать Shape (Пара (Tween) →
Shape).
7.
Выполнить. (Enter)
Очень грубый переход. Постараемся использовать
ключевые точки
8.
Выделяем 1КК
9.
В меню
выбираем: Изменить →
Форма → Добавить подсказку формы
10.
Установить
необходимое количество точек
11.
Перейти на 2КК
12.
Растащим точки по
предполагаемым точкам преобразования.
13.
Выполнить. (Ctrl + Enter)
Самостоятельно првратить букву А в букву Я.
Пример 6. Изменение цвета в тексте.
1. Выбрать
инструмент «Техт»
2.
В панели свойства выбрать шрифт с
аббревиатурой CYR.
3. Щелкнуть
пол рабочей области (РО) и написать слово ДА. (на следующей строчку Shift+ Enter)
Используя
указатель, выделить ДА –
появится голубая рамка.
5. Изменить →
Разделить отдельно (Modify → Break Appart). Каждая буква будет в
отдельной голубой рамке.
6. Растащить
все буквы: ЛКМ по РО и растащить буквы.
7. ЛКМ
по 1КК для выделения всех букв
8. Изменить →
Разделить отдельно (Modify → Break Appart). Каждая буква будет
выделена
9. Выбрать
ведро для градиентной заливки
10. ЛКМ по
первой букве
11. Создать 2
КК на 25 кадре.
12. ЛКМ по
последней букве
13. В панели
свойства выбрать Shape (Пара (Tween)
→ Shape).
14. Выполнить.
(Enter)
Урок №4
Motion Tweening
И наиболее часто используемая
техника анимации во Flash – Motion Tweening. В этом
случае анимация строится на основе модификации символа, т.е. объектом анимации
является символ.
Как и в анимации shape tweening, на
каждый объект в один момент времени, нам нужен один слой. На этом слое должен
находиться один символ, с которым и будут происходить все изменения.
Вот какие параметры символа
могут модифицироваться при использовании Motion Tweening:
Ø
размер (как
пропорционально, так и непропорцилнально – отдельно высоту и ширину)
Ø
наклон
Ø
расположение
Ø
угол поворота
Ø
цветовые эффекты
(см. ниже)
Ø
можно
использовать направляющие слои для задания траектории движения объекта.
Включить Motion Tweening можно
несколькими способами (а отключить, к сожалению, только одним ). Для того,
чтобы включить Motion Tweening, нужно сделать активным начальный кадр вашего
перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion
tween (это же можно сделать, выбрав Insert - > Create
motion tween).
Универсальный способ включения/ выключения Motion Tweening – с
помощью панели Frame. Выбрав Motion в поле Tweening. Там же
можно контролировать параметры анимации.
Ψ Для изменения формы есть , с дополнительными функциями Пример 7. Вращение и увеличение квадрата
1. Нарисовать
квадрат, выбрать , выделить квадрат
2. Преобразовать
в символ. Для этого надо в меню выбрать:
Вставить → Преобразовать в символ или нажать F8.
Вставить → Преобразовать в символ или нажать F8.
3. В
диалоговом окне выбрать ролик и
нажать ОК
4. Создать
2 КК на 25 кадре.
5. Переместить
квадрат в другое место. Выбрать инструмент «свободную трансформация» и масштабировать
6. ЛКМ
в 1 КК. Выбрать анимацию Motion (Пара
(Tween) → Motion).
7. Выбрать
вращение: CW –по часовой стрелке;
CCW- против часовой стрелке
CCW- против часовой стрелке
8. Указать
количество поворотов – 5.
9. Задать
точку вращения, переносом точку в любой угол квадрата.
10. Выполнить.
(Enter)
Самостоятельно првратить окружность в овал с поворотом и вращением.
Пример8 . Изменение цвета квадрата при вращении и движении.
1. Нарисовать
квадрат, выбрать черную стрелку , выделить квадрат
2. Преобразовать
в символ. Для этого надо в меню выбрать:
Вставить → Преобразовать в символ или нажать F8.
Вставить → Преобразовать в символ или нажать F8.
3. В
диалоговом окне выбрать ролик, показать
точку вращения и нажать ОК
4. Создать
2 КК на 25 кадре.
5. Переместить
квадрат в другое место.
6. В
панели свойств выбрать Цвет-Tint,
выбрать цвет любой и % применения.
7. ЛКМ
в 1 КК. Выбрать анимацию Motion (Пара
(Tween) → Motion).
8. Выбрать
вращение: CW –по часовой стрелке;
CCW- против часовой стрелке
CCW- против часовой стрелке
9. Указать
количество поворотов – 5.
10. Выполнить.
(Enter)
Пример9. Исчезновение цвета квадрата при вращении и движении.
1. Нарисовать
квадрат, выбрать , выделить квадрат
2. Преобразовать
в символ. Для этого надо в меню выбрать:
Вставить → Преобразовать в символ или нажать F8.
Вставить → Преобразовать в символ или нажать F8.
3. В
диалоговом окне выбрать ролик, показать
точку вращения и нажать ОК
4. Создать
2 КК на 25 кадре.
5. Переместить
квадрат в другое место.
6. В
панели свойств выбрать Цвет-Alpha и % прозрачности.
7. ЛКМ
в 1 КК. Выбрать анимацию Motion (Пара
(Tween) → Motion).
8. Выбрать
вращение: CW –по часовой стрелке;
CCW- против часовой стрелке
CCW- против часовой стрелке
9. Указать
количество поворотов – 5.
10. Выполнить.
(Enter)
Итак мы научились применять
эффект и прозрачность, а при Shape для каждого цвета применяется эффект и
прозрачность. Заливать нельзя, но если 2 раза щелкнуть полсимволу то мы попадем
в редактирование символа1 в сцене1. Попробуем создать Shape с изменением цвета.
1. Нарисовать
квадрат, выбрать черную стрелку , выделить квадрат
2. Преобразовать
в символ. Для этого надо в меню выбрать:
Вставить → Преобразовать в символ или нажать F8.
Вставить → Преобразовать в символ или нажать F8.
3. В
диалоговом окне выбрать ролик, показать
точку вращения и нажать ОК
4. Создать
2 КК на 25 кадре.
5. Переместить
квадрат в другое место.
6. В
панели свойств выбрать Цвет-Alpha и % прозрачности.
7. ЛКМ
в 1 КК. Выбрать анимацию Motion (Пара
(Tween) → Motion).
1. Дважды
щелкаем по символу, следовательно попадаем в режим
редактирования символа.
редактирования символа.
2. Выбираем
ведерко градиентной заливки. Заливаем левый верхний
угол квадрата
угол квадрата
3. Создать
2 КК на 25 кадре
4. Заливаем правый нижний
край квадрата.
5. ЛКМ
в 1 КК. Выбрать анимацию Shape
8.
Проверить фильм (Ctrl+Enter)
Ψ Карандаш , с
дополнительными функциями
Урок №6
Движение по траектории
Пример11 . Движение по траектории
1. Нарисовать
, выбрать черную стрелку , выделить объект
2. Преобразовать
в символ. Для этого надо в меню выбрать:
Вставить → Преобразовать в символ или нажать F8.
Вставить → Преобразовать в символ или нажать F8.
3. В
диалоговом окне выбрать ролик, показать
точку вращения и нажать ОК
4. Создать
2 КК на 50 кадре.
5. Создать
новый слой для траектории ЛКМ на 1КК в слое
траектории.
6. 6Выбрать
карандаш (Размытие) и нарисовать траекторию движения (слой серый)
7. ЛКМ
по объекту, совместить точку регистрации с началом траектории.
8. Перейти
во 2КК первого слоя и совместить точку регистрации с окончанием
траектории
9. ЛКМ
в1КК 1слоя и задать анимацию Motion
10. Выбрать
ориентирование.
11. Проверить
фильм (Ctrl+Enter)
Пример12 . Изменение текста-волна (маска)
1.
Написать слово, размером 96pt, Жирным (Bold).
2.
Выделить объект черную стрелку. В меню выбрать: Редактирование → копировать.
3.
Создать 2 новых слоя, т.е. 2 раза нажать на .
4.
ЛКМ 1кадр 3 слоя В меню выбрать: Редактирование → Вставить
на месте
5.
ЛКМ 25 кадр 3 слоя нажать F5.
6.
ЛКМ 25
кадр 1 слоя нажать F5.
7.
ЛКМ 1
кадр 2 слоя нарисовать овал цветом, не совпадающим с цветом текста.
8.
ЛКМ 25
кадр 2 слоя нажать F6.
9. Перетащить
овал используя черную стрелку через весь текст.
10.
ЛКМ 1
кадр 2 слоя создать анимацию Shape.
11. ПКМ по надписи
«слой3» и выбрать слово «маска».
12. Проверить фильм (Ctrl+Enter)
Урок №7
Пример13 . Эффект-волна (увеличение)
1.
Импортировать картинку( .jpg, .gif,
.bmp)
Файл → Импорт
2.
Выделить объект черную стрелку. В меню выбрать: Редактирование → копировать.
3.
Создать 2 новых слоя, т.е. 2 раза нажать на .
4.
ЛКМ 1кадр 2 слоя. В меню выбрать: Редактирование → Вставить
на месте
( или Ctrl+Shift+V)
( или Ctrl+Shift+V)
5. Используя
инструмент «свободную трансформация» масштабировать, т.е.
увеличить объект на 10%.
6. На
1 кадре 3 слоя нарисовать овал
7.
ЛКМ 25 кадр 1 слоя нажать F5.
8.
ЛКМ 25
кадр 2 слоя нажать F5.
9.
ЛКМ 25
кадр 3 слоя нажать F6.
10. Перетащить
овал используя черную стрелку через весь рисунок.
11.
ЛКМ 1
кадр 3 слоя создать анимацию Shape.
12. ПКМ по надписи
«слой3» и выбрать слово «маска».
13. Проверить фильм (Ctrl+Enter)
Самостоятельно создать эффект лупы
Пример14 . Движение шарика по траектории в тексте (Shape-Motion)
1.
Написать слово, размером 96pt, Жирным (Bold).
2.
Выделить объект . черную стрелкой В меню выбрать: Редактирование → копировать
(Ctrl+C)
3.
Создать 2 новых слоя, т.е. 2 раза нажать на .
4.
ЛКМ 1кадр 3 слоя В меню выбрать: Редактирование → Вставить
на месте
( или Ctrl+Shift+V)
( или Ctrl+Shift+V)
5.
ЛКМ 1
кадр 2 слоя нарисовать маленький кружочек
6.
Выделить объект черной стрелкой . Обязательно преобразовать его в символ (F8), ролик.
1.
2 раза ЛКМ щелкнуть по кружочку
2.
Выделить объект . черной стрелкой Обязательно преобразовать его в символ (F8), ролик.
3.
ЛКМ 25 кадр 1 слоя нажать F6.
4.
Создать новый слой для траектории ЛКМ на 1КК в слое
траектории.
5.
Выбрать карандаш (Размытие) и нарисовать траекторию
движения по тексту (слой серый).
6.
ЛКМ по объекту, совместить точку регистрации с началом траектории.
7.
Перейти во 2КК первого слоя и совместить точку
регистрации 
с окончанием
траектории
с окончанием
траектории
8.
ЛКМ в1КК 1слоя и
задать анимацию Motion
7. Вернуться
на сцену1 (ЛКМ по сцене 1)
8. ПКМ по надписи
«слой3» и выбрать слово «маска».
9.
Проверить фильм
(Ctrl+Enter)
Дополнительно
Пример14. Движение флага.
1.
Нарисовать прямоугольник
2.
Создать 2 КК на 25 кадре.
Создать 3 КК
на 50 кадре.
Создать 4 КК на 75
кадре.
Создать 5 КК
на 100 кадре.
3.
Исправить на 25 КК
рисунок, используя , на рисунок
4.
Исправить на 50 КК рисунок, используя , на рисунок
5.
Задать анимацию в каждом КК Shape, кроме 5КК.
6.
Нажать Enter
Каждая анимация должна происходить в отдельном слое.
7.
Нарисовать прямоугольник
8.
Создать новый слой
9.
В новом созданном слое 2 выделить все кадры со 2-го по
100.
В меню: Вставить → Удалить кадры
В меню: Вставить → Удалить кадры
10. В
слое 1 выделить все кадры со 2-го по 100.
В меню: Редактировать → Копировать кадры
В меню: Редактировать → Копировать кадры
11. ЛКМ
на 1КК 2 слоя В меню: Редактировать
→ Вставить кадры
12. ЛКМ
на 1КК 3 слоя В меню: Редактировать
→ Вставить кадры
13. Заблокировать
1 слой
14. 3
слой невидимый
Для работы доступен только 2 слой
15. ЛКМ
1КК 2слоя выделяется прямоугольник, перетаскиваем его к низу
16. ЛКМ
2КК 2слоя выделяется прямоугольник, перетаскиваем его к низу
17. ЛКМ
3КК 2слоя выделяется прямоугольник, перетаскиваем его к низу
18. ЛКМ
4КК 2слоя выделяется прямоугольник, перетаскиваем его к низу
19. 2
слой невидимый
20. ЛКМ
по точке под глазом в слое2
Для работы доступен только 3 слой
21. ЛКМ по точке под замком
в слое1
22. ЛКМ
1КК 2слоя перетащить прямоугольник, при помощи черной стрелки
23. ЛКМ 2КК 2слоя перетащить прямоугольник, при
помощи черной стрелки
24. ЛКМ
3КК 2слоя перетащить прямоугольник, при помощи черной стрелки
25. ЛКМ
4КК 2слоя перетащить прямоугольник, при помощи черной стрелки
26. ЛКМ
5КК 2слоя перетащить прямоугольник, при помощи черной стрелки
27. ЛКМ
по точке под глазом в слое3
Для работы доступен только 3 слой
28. ЛКМ по точке под замком
в слое2
29. ЛКМ
1КК 3слоя перетащить прямоугольник, при помощи черной стрелки
30. ЛКМ 2КК 3слоя перетащить прямоугольник, при
помощи черной стрелки
31. ЛКМ
3КК 3слоя перетащить прямоугольник, при помощи черной стрелки
32. ЛКМ
4КК 3слоя перетащить прямоугольник, при помощи черной стрелки
33. ЛКМ
5КК 3слоя перетащить прямоугольник, при помощи черной стрелки
34. Отменить
замочек в слое1
35. Закрасить
В каждом ключевом кадре (КК) в соответствующие цвета в каждом слое
36. Выполнить
фильм
Литература
1. В.М.
Домненко, М.В. Бурсов “Flash 5.0”
2.
Лекции Бурсова М.В.
3. В.Н.Васильева,
Л.С. Лисицына “Интернет - технологии –
образования”
Комментариев нет:
Отправить комментарий