Создание анимации в программе Flash 5

Разделы: Информатика, Внеклассная работа


Инструменты

Урок1 -1 Геометрические фигуры, заливка контура, заливка фона, изменение порядка, группировка, разгруппировка, перо, изменение формы (смотри файл Приложение1.swf).

Добавление панелей инструментов - WINDOWS - PANELS

Для любого инструмента есть свой набор параметров (OPTIONS), двойной щелчок на конкретную опцию позволит модифицировать параметры. Например, для прямоугольника меняется степень округления углов.

Применение пера позволит создать любую фигуру их линий. Изменить форму линии можно инструментом SUBSELECT (белая стрелка справа)

Заливка контура, заливка фона

Левое ведерко дает заливку контура, правое - заливку фона (PAINT BACKET), соответственно, на панели COLOR верхний цвет (с пиктограммой карандаша) при двойном нажатии меняется палитра цветов для контура, нижний - заливка фона.

Изменение толщины контура - на панели STROKE - STROKE – выбрать толщину.

Выделение фона - щелчок по фону, выделение контура - щелчок по контуру, выделение фона и контура - двойной щелчок по фону.

Изменение порядка расположения фигур:

  • выделить фигуру (двойной щелчок), сгруппировать(MODIFY -GROUP)
  • изменить порядок расположения фигур относительно друг друга. (MODIFY - ARRANGE - вперед BRING или назад SEND)

Урок1 -2 Модификация контура и заливки (смотри файл Приложение2.swf).

Модификация контура -

Для 1 -ой фигуры выберите синий цвет, толщину 3.75, контур кружочками (STROKE - STROKE). Выделите всю фигуру (можно просто ее обвести черной стрелкой – инструмент ARROW). В опциях для этого инструмента выберите изменитель формы SCALE и вращение ROTATE.

Модификация заливки -

Для 2 -ой фигуры выберите линейную заливку (панель STROKE - FILL -LINER GRADIENT). Добейтесь заливки по образцу. Добавление нового цвета - щелчок на образце цветов Edit gradient range (появится новый треугольничек, удаление - потянуть треугольник вниз). Протягивая треугольник влево-вправо, вы меняете количество выбранных цветов на линейке.

Для 3 -ой фигуры выберите круговую градиентную заливку (панель STROKE - FILL -RADIAL GRADIENT). Добейтесь заливки по образцу по цветовой гамме. Но этого не достаточно: для изменения формы заливки выберите инструмент заливки фона (PAINT BACKET) и в его опциях - Transform FILL. Щелкните по выделенной заливке - появятся управляющие кнопки изменителя формы заливки (прямоугольник и две окружности); воспользуйтесь ими, предварительно сместив центр заливки.

Урок1 -3 Опции заливки по степени замкнутости контура модификация фигур по узловым точкам, изменение кривизны (смотри файл Приложение3.swf).

Создайте карандашом две фигуры. Залейте их. Заливка имеет опции: замкнутой фигуры и далее по возрастанию степени разомкнутости.

Шапочка создана пером.

Для изменения формы инструментом SUBSELECT (белая стрелка справа) потяните за узлы или измените кривизну за касательную к узловой точке. Щелчок пером на узле удаляет узел, на свободном месте - добавляет.

Урок 1 -4 Карандаш, кисть, модификация фигур по узловым точкам (повторение), изменение формы (смотри файл Приложение4.swf).

Для создания первых мультиков достаточно знать 3 инструмента : карандаш, кисть заливка.

Карандаш имеет 3 опции: рисование прямыми линиями (Straighten), скругленные линии (Smooth), точно повторяющие движение мышки (Ink).

Трапецию создайте для тренировки пером, скопируйте ее, затем потяните к центру инструментом SUBSELECT (белая стрелка справа) - получится необходимая фигура.

Для создания бабочки можно нарисовать форму карандашом, затем выбрать инструмент ARRROWS (черная стрелка), поместить курсор рядом с контуром (появится дуга) и поменять форму. Причем, не важно, когда вы зальете контур: до изменения формы или после.

Кисть имеет опции:

Изображение сверху заливки и контура; под контуром; под заливкой и контуром;

размер и форму. Помните, что все нарисованное одним цветом, сливается в одну фигуру. И это хорошо.

Урок 1 -5 Линия, сетка, разбиение фигур (смотри файл Приложение5.swf).

Файлы Урок 1 -5, Урок 1 -5 -1. Для 1 -ой фигуры выберите синий цвет, толщину 3.75, контур кружочками (STROKE - STROKE).

Для этого урока может понабиться для удобства сетка на экране VIEW - GRID - SHOW GRID.

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

Урок 1 -5 -1. Задание подобно уроку Урок 1 -4. Дополнительно используется инструмент Кисть. Обратите внимание на опции вида кисти и размера кисти. Разрезание круга проводится карандашом. Для карандаша используйте опцию SMOOTH (скругление).

Урок 1 -6 Растровая заливка (смотри файл Приложение6.swf).

Этот урок назовем “Кот в мешке”.

Карандашом нарисуйте мешок. Вставьте рисунок FILE - IMPORT -.

Уменьшите рисунок, выделите его, выберите заливку фона. Появится новая заливка, которую всегда можно будет выбрать как заливку в панели Fill - Bitmap. Воспользуйтесь ею. Осталось перевернуть заливку: опция для заливки фона Transform.

Урок1 -7 Растровая заливка. Применение. Слои (смотри файл Приложение7.swf).

Этот урок назовем “Вид из окна”.

Создайте 2 окна. Создайте растровую заливку (FILE - IMPORT - , выделить картинку, выбрать инструмент заливки фона). Удалите картинку на экране за ненадобностью. Выберите эту растровую заливку с параметром LOCK (Замок), щелкните ведерком в предполагаемый центр, т.е. между окон, а затем в каждое окно.

Скорректируйте заливку: выберите масштаб 25%, смещая центр и увеличивая размер заливки, добейтесь нужного результата.

Урок 2

Урок 2 -1. Инструмент ТЕКСТ, разбиение на части, трансформация (смотри файл Приложение8.swf).

 

В окне CHERACTER установить шрифты (FONT) размер 24р жирность, цвет синий, межбуквенные интервалы 7.

- Выбрать инструмент TEXT, растянуть окно ввода, набрать текст по образцу.
- Скорректировать размер текста по образцу (инструменты APPOW, SCALE).
- Разбить выделенный текст на части (MODIFY - BREAK APART), перекрасить градиентной заливкой по образцу.
- Создать новый слой, INSERT – LAYER.
- Скопировать выделенный текст на 1 слое, вставить на 2 слой.
- Изменить форму каждой первой буквы в строке инструментом SABSELECT, изменить размер каждой последней буквы в строке инструментом SCALE.
- Трансформация выделенного текста на слое 1: MODIFY - TRANCFORM - FLIP VARTICAL.

Урок 2 -2. Пример оформления текста (смотри файл Приложение9.swf ) [2].

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

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

Урок 2 -3. Анимация изменения формы (смотри файл Приложение10.swf).

Объекты должны быть простой формы, без контура, разгруппированы, не являться рисунком, т.е. к рисунку должна быть применена операция разбиения (MODIFY - BREAK APART).

1) Создать объект - круг без контура. Для удаления контура понадобится резинка (третья сверху).

На временном интервале 35 создайте ключевой кадр (F6 или INSERT -KEY FRAME)

Удалите круг, на его месте создайте прямоугольник другого цвета.

- Выделите все кадры (щелчок на промежуточном кадре и SHIFT последний кадр).
- FRAME - FRAME - TWEEN – SHAPE.
- Проиграйте (ENTER).

2) Уменьшите по времени временной интервал (потяните влево последний ключ).

- Проиграйте.

3) Передвиньте вправо прямоугольник в последнем кадре. Проиграйте.

Урок 2 -4

Анимация изменения формы. Трансформация текста (смотри файл Приложение11.swf).

- Аналогично уроку 2 -3. Но предварительно к каждому тексту должна быть применена операция разбиения (MODIFY - BREAK APART).

Урок 2 -5

Анимация изменения формы. Покадровые изменения. (смотри файл Приложение12.swf).

1) Создайте кистью человечка.

Сделайте глазки и ротик верхней резинкой.

Создавайте ключевые кадры клавишей F6 через каждые 10 секунд. И на каждом этом ключевом кадре увеличивайте в размере человечка, потянув за правый верхний угол.

Когда вы сочтете нужным, начинайте поднимать ручку, лучше, если выделите часть руки и повернете ее.

Затем, точно также опустите руку. Здесь разумно скопировать всю руку с какого - то кадра.

Проиграйте.

2) Анимация изменения формы.

А теперь аналогично уроку 2 -3 выделите все кадры и выберите режим SHAPE. Проиграйте и посмотрите на это безобразие! Сделаем выводы: неизменяемую часть нужно помещать на отдельном слое.

Урок 2 -6

Анимация изменения формы. Покадровые изменения (смотри файл Приложение13.swf).

- Создайте рыбку, двигающую плавниками по образцу.

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

-Дополнительно создайте фон морского дна, поместите на задний план.

Следующие два мультфильма (см. файлы Приложение14.swf, Приложение15.swf) - примеры работ учащихся Городилова Андрея и Васильевой Кати.

Урок3. Анимация движения

Необходимо соблюдать следующие принципы:

  1. Объектами анимации могут быть: рисунок, символы, сгруппированные объекты (но ни как не заливки и контуры).
  2. В одном блоке анимации должен двигаться только один объект.
  3. Во всех ключевых кадрах блока должен содержаться один и тот же объект.
  4. В ключевых кадрах должны изменяться только следующие параметры: положение на рабочем поле, угол поворота, сила сдвига, масштаб, параметры изображения.

Урок 3 -1 (смотри файл Приложение16.swf).

  1. Создать объект “Мячик” с радиальной заливкой со смещением центра заливки.
  2. Сгруппировать объект.
  3. Переместить его по середине слева.
  4. Создать следующий кадр и переместить на нем мячик по центру слева.
  5. Установить курсор на первом кадре и для него выбрать параметры FRAME - MOTION (движение), ROTATE (вращение по часовой стрелке CW) и TIMES (количество оборотов).
  6. Для эффекта падения с ускорением установить параметры силы сдвига EASING на первом кадре -100, на последнем кадре +100.

Далее для создания эффекта отскакивающего мячика от пола о правую стену создать кадр, фактически повторяющий предыдущий и повторить все с пункта 4. Но движение будет против часовой стрелки (CCW) с замедлением (EASING на первом кадре +100, на последнем кадре -100).

Просмотрите результат (выбрать первый кадр и ENTER ). Для создания файла - просмотра нажать CONTROLE - TEST MOVIE

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

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

Урок3 -2. “Мячик катится по полянке”. Движение по заданному пути (смотри файл Приложение17.swf).

-Создать объект “Мячик”, сгруппировать его (можно скопировать его с урока 3-1).
-Создать слой - путь (нажать на значок GUIDE).
-Создать путь движения как контур (инструмент карандаш), обязательно защитите его от изменения (замок).
-В первом кадре перенести мячик к началу пути, совместив центры.
-INSERT - CREATE - MOTION TWEEN (Можно было как в уроке 3 -1, но в этом случае необходимо заботиться о совмещении центра объекта к началу пути на первом кадре и концу пути на следующем кадре; малейшая неточность - и движение будет по прямой).
-Перенести мячик на конец пути, центрируя его.
-Добавьте слой с фоном.
-Проиграйте.

Урок3 -3.“Гонки”.Движение по заданному пути. Ориентация по пути. Движение нескольких объектов по пути. Создание символов (смотри файл Приложение18.swf).

1)Создание символов.
Создайте символ INSERT - NEW SYMBOL. Выберите тип символа “графика” (GRAPHIC) Назовите символ “Машина”.

Создайте объект “Машинка”.

2)Перейдите в режим экрана (Screen).

Создадим слой “Машина красная”, откроем библиотеку (WINDOW LIBRARY) , перетащим на сцену наш символ “Машина” на начало пути.

3)Далее, как в уроке 3 -2 создайте анимацию движения по пути.

4)Чтобы движение было естественным, на первом кадре расположите объект перпендикулярно касательной в начале пути, на последнем кадре - концу пути (Давайте передвинем не на конец пути, а раньше, чтобы создать эффект обгона нашей машины.

Для ориентации движения по пути выберите параметры FRAME - OPTHION - ORIENT TO PATH. Проиграйте.

5)Приступим к анимации движения по этому же пути другой машинки.

-Создадим слой “Машина желтая”.

-На временном кадре 5 для слоя “Машина желтая” создадим кадр F6.

-Перетащим в этом кадре на текущий слой наш символ “Машина” на начало пути. Перекрасим заливкой машинку в желтый цвет, предварительно разбив рисунок на части (MODIF - BREAK APART).

-Сгруппируем машинку. Делаем движение по пути как обычно (INSERT - CREATE MOTION TWEEN, FRAME - OPTHION - ORIENT TO PATH, перенос объекта на конец пути, путь под замком).

-Проиграйте(CTRL+ENTER).

Урок 4. Создание маски

Маска - это выделение видимой части анимации. Маска должна быть с заливкой.

Урок 4 -1. Шарик в подзорной трубе с использованием маскирования (смотри файл Приложение19.swf)

-Создать символ (INSERT NEW SYMBOL) под именем ШАР с типом MOTION.
-Создать объект ШАРИК на слое Шарик.
-Создать в этом символе движение по заданному пути (создать слой пути - запретить его -изменение - шарик сгруппировать—переместить его на начала пути - INSERT CREAT MOTION TWEEN – выбрать временной интервал - создать ключевой кадр F6 - переместить шарик на конец пути в последнем кадре).
-Перейти на сцену.
-На слой Шарик переместить символ ШАР.
-Создать новый слой под именем Маска перед слоем Шарик и на нем – контур маски с любой заливкой - в форме круга.
-Преобразовать слой в маску (правая клавиша - MASK).

-Можно подложить вниз прямоугольный слой на весь экран и переместить его под слой Шарик. - Обратите внимание, все слои, привязанные к маске, защищены от записи (с замком) и смещены относительно маски вправо.

Урок 4 -2. Эффекты символов: цвет, яркость (смотри файл Приложение20.swf) [2].

-Создать рисунок чайника, преобразовать его в символ (INSERT CONVERT TO SYMBOL).
-На первом кадре выбрать FRAME –MOTION.
-На 20 кадре создать ключевой кадр (F6).
-Выделить чайник и для него выбрать цвет EFFECT - TINT - красный цвет.
-На 40 кадре создать ключевой кадр (F6).
-Выделить чайник и для него выбрать яркость EFFECT - BRIGHTNESS -50%.
-Проиграйте.

Урок 4 -3. Эффекты символов: прозрачность (смотри файл Приложение21.swf ) [2].

-Создать рисунок Рыбки на слое РЫБКА.
-На первом кадре выбрать FRAME –MOTION.
-На 30 кадре создать ключевой кадр (F6).
-На первом кадре выделенную рыбку преобразовать его в символ (INSERT CONVERT TO SYMBOL) с эффектом прозрачности слоя (EFFECT -ALPFA) - 100 %.
-На последнем кадре – с эффектом прозрачности слоя 0%.

-Создать рисунок Лягушки на слое ЛЯГУШКА и повторить все действия как и с рыбкой с той лишь разницей, что эффект прозрачности для 1 слоя должен быть 0%, а для последнего - 100%.
-Проиграйте.

Урок 4 -4. Симуляция движение автомобиля за счет движения фона с использованием маски (смотри файл Приложение22.swf [2]).

-Создать фон: звездное небо, дорога на слое ФОН.
- Открыть файл урока 3 -3, создать слой МАШИНА и перенести на него символ МАШИНА из библиотеки урока 3 -3. Защитите оба слоя от изменения.
Создайте слой ДОМА.
Скопируйте их и присоедините без стыка!
Выделите оба изображения и преобразуйте в символ под именем ДОМА.
Создайте анимацию движения, сдвинув на первом кадре дома влево, а на последнем - вправо.
Создайте маскируемый слой размером в половину зданий.

Проиграйте.

Урок 4 -5. Вращение шара (смотри файл Приложение23.swf) [2].

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

Далее как в уроке 4 -4.

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

Для 1 -го 250, 250, 250, 60% (R,G,B,Alfa). 2 -го 115, 115, 115, 50%, 3 -го 61, 61, 61, 50%, 4 -го 0, 0, 0, 100%.

Сместите центр заливки.

Проиграйте фильм. Чем меньше масштаб изображения, тем быстрее будет вращение.

Литература:

  1. “Flash 5 для чайников”, Москва, Диалектика, Гарди Лит, 2001
  2. Технология создания учебных мультимедиа - продуктов в инструментальной среде” , Красноярск, КГУ, Шишканов, 2004