Особенности системы FLASH
Система Flash относится к классу систем векторной графики. Это означает, что создаваемые с ее помощью рисованные объекты система хранит в виде математических формул. Так как основная задача системы Flash – заставить двигаться то, что вы сами и нарисовали, то освоение системы мы начнем именно с изучения правил пользования инструментами рисования.
На рисунке представлен внешний вид вашего экрана после запуска программы. Его содержимое можно условно разделить на две основные части: рабочую область 3, предназначенную для создания фильма, и управляющие панели. В центре рабочей области находится белый прямоугольник, ограничивающий кадр фильма 4. Рисовать или располагать объекты фильма можно в любом месте рабочей области, но будущий зритель увидит только то, что находится в границах кадра.
Создание фильма производится с помощью команд меню 2, палитры инструментов 5, а также управляющих панелей, которых в системе Flash огромное множество.
1 |
2 |
|
|
5 |
6 |
|
4 |
3 |
|
Окно системы Flash:
1 - заголовок окна; 2 - строка меню; 3 - рабочая область; 4 - кадр фильма; 5 - панель инструментов; 6 - масштаб просмотра.
Ознакомьтесь с внешним видом программы.
Анимация Анимировать - значит заставить объект плавно, на наших глазах, изменять
свои свойства. И тут на сцену выходит такое понятие, как время. Наша жизнь протека-
94
Практикум по информационным технологиям
ет в пространстве и во времени. Система Flash позволяет рисовать плоские, двухмерные объекты. Но остается время. При создании анимации его также надо учитывать.
Для учета времени используется шкала времени Timeline. Она расположена вдоль верхней границы окна под строкой меню. Каждая клеточка шкалы соответствует одной абстрактной единице времени. Это не минута и не секунда. Это момент времени, которому соответствует моментальный снимок состояния объектов. А состояние объекта характеризуется его размером, цветом, положением в пространстве, формой. Научиться создавать простейшую анимацию объекта — значит научиться инструментами системы Flash изменять эти свойства.
Авторам рисованных мультфильмов докомпьютерной эры приходилось долго и упорно трудиться, тщательно вырисовывая каждый кадр фильма. Причем каждый последующий кадр отличался от предыдущего незначительными деталями. Только так можно было добиться плавного течения анимации, естественного движения героев.
Система Flash также позволяет создавать фильм, рисуя каждый кадр по отдельности, как в былые времена поступали художники-мультипликаторы. Такая анимация называется покадровой. Но гораздо эффективней другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры система достраивает сама. Такой тип анимации называется автоматической (tweenidанимация).
С точки зрения способа построения различаются два типа анимации:
•анимация движения (motion tweenid);
•анимация формы (shape tweenid).
Мы начнем изучение простейших приемов анимации с анимации движения.
ЛАБОРАТОРНАЯ РАБОТА № 1 Рисование в системе Flash
|
|
|
|
|
«Центр на Павелецкой» №1406 |
95 |
|
|
|
|
|
Цель работы: ознакомление об основных приёмах рисования в системе, используемых для этой цели инструментах.
Задание 1
1. Создайте в своей папке ИКТ папку Flash.
2. Запустите программу Flash.
3. Выполните команду File – Save As – Звезда.fla.
4. Нарисуйте квадрат при помощи инструмента Rectangle Tool
5. (Прямоугольник), зажимая клавишу Shift и залейте квадрат красным цветом. 6. Выберите Selection Tool (Выбор) (чёрная стрелка) и подведите к правому верх-
нему углу квадрата, увидите уголок. 7. Уберите угол у квадрата.
8. Получите треугольник (рис.1).
9. Выделите треугольник, используя опции масштабирования
Modify-Transform-Free Transform, измените размер треугольника (рис.2).
|
|
|
|
|
|
|
|
|
|
|
|
10. |
Рис. 2 |
|
|||
Скопируйте луч звезды и вставьте его 4 раза. |
|
||||
11. |
Выполните команду |
|
|||
Modify-Transform-Scale and Rotate. |
|
||||
12. |
Поверните лучи так, чтобы угол между ними |
|
|||
|
|||||
был 72° (360:5). |
Рис. 3 |
||||
13.Постройте две звезды.
14.Внутреннюю звезду залейте другим цветом.
15.Сгруппируйте изображение. Modify-Group (рис. 3).
16.Сохраните файл.
17.Покажите работу учителю.
ЛАБОРАТОРНАЯ РАБОТА № 2 Анимация движения
96
Практикум по информационным технологиям
Цель работы: научиться анимировать изображение, познакомиться с понятием Время в системе Flash.
Задание 1. Анимация перемещения объекта
1.Создайте в своей папке Flash папку Анимация движения.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – 1_Квадрат.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.В левом верхнем углу кадра нарисуйте квадрат (рис.4).
8.Посмотрите на шкалу времени Timeline. Первый кадр шкалы времени окрасился в бледно-фиолетовый цвет. Кадр стал ключевым.
Рис. 4
9.Щелкните правой кнопкой мыши по этому кадру и в контекстном меню выбе-
рите команду Creatif Motion Tween.
10.Щелкните правой кнопкой мыши в кадре диаграммы времени (кадр номер 20)
ивыберите команду Insert Keyframe
(вставить ключевой кадр) (рис.5).
Рис. 5
11.Выделите последний ключевой кадр и с помощью инструмента Selection Tool (Выбор) переместите объект в новое положение, в правый верхний угол кадра.
12.Нажмите клавишу Enter - объект пришел в движение.
13.Измените движение темпа. Переместите конечный ключевой кадр.
|
|
|
|
|
«Центр на Павелецкой» №1406 |
97 |
|
|
|
|
|
14. Чтобы передвинуть ключевой кадр, выполните следующие действия.
• выделите слой;
• зажмите клавишу Ctrl. Наведите курсор на ключевой кадр - указатель превратился в двунаправленную стрелку;
• нажмите кнопку мыши и, не отпуская ее, передвигайте кадр. 15. Проверьте, как работает ваша программа.
16. Сохраните файл.
17. Не закрывайте программу. Покажите работу учителю.
Задание 2. Анимация изменения размера объекта
1.Откройте новый документ (File – New).
2.Сохраните файл в папке Анимация движения под названием 2_Прямоугольник.fla.
3.Нарисуйте прямоугольник, и выполните правила создания анимации
•в 1-м ключевом кадре - Creatif Motion Tween;
•в конечном кадре анимации - Insert Keyframe (вставить ключевой кадр).
4.Выделите конечный ключевой кадр.
5.Измените размер объекта Free Transform Tool (Трансформация).
6.Проверьте, как работает ваша программа.
7.Сохраните файл.
8.Не закрывайте программу. Покажите работу учителю.
|
|
|
Задание 3. Анимация изменения цвета объекта |
|
|
|
1. |
Откройте новый документ File – New. |
|
|
98 |
2. |
Выполните команду File – Save As – 3_Цветной шар.fla. |
|
|
3. |
Нарисуйте шар и создайте анимацию. |
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
Практикум по информационным технологиям
4. |
Выделите объект, в панели Properties (свойства) высветится полеСо1оr (цвет). |
||
5. |
Нажмите вариант Tint (оттенок) и выберите любой оттенок (рис.6). |
||
|
|
|
|
|
|
|
|
Рис. 6
6.Проверьте, как работает ваша программа.
7.Сохраните файл.
8.Не закрывайте программу.
9.Покажите работу учителю.
Задание 4. Одновременное изменение нескольких свойств объекта
1.Откройте новый документ File – New.
2.Выполните команду File – Save As – 4_Свойства объекта.fla.
3.От 1-го до 20-го кадра создайте анимацию перемещения шара.
4.В кадр номер 30 вставьте ключевой кадр Insert Keyframe.
5.Увеличьте размер шара.
6.В следующем ключевом кадре измените цвет шара.
7.Проверьте, как работает ваша программа.
8.Сохраните файл.
9.Покажите работу учителю.
Задание 5. Решите задачу
1.Откройте новый документ File – New.
2.Выполните команду File – Save As – 5_Задача.fla.
3.Объект - маленький квадрат, расположен в левом верхнем углу кадра.
|
|
|
|
|
«Центр на Павелецкой» №1406 |
99 |
|
|
|
|
|
Создайте анимацию:
1)Квадрат увеличивается.
2)Квадрат движется направо строго горизонтально и останавливается у правой границы кадра.
3)Квадрат движется по направлению к левому нижнему углу, изменяя свой цвет, и останавливается в точности под своим увеличенным на 1-м шаге изображением.
4)Квадрат некоторое время стоит неподвижно.
5)Квадрат возвращается в исходное положение с изменением размера до первоначального (рис.7).
•Для движения по горизонтали используйте направляющие линии.
•Для возвращения точно в исходное положение используйте View-Rulers (линейки).
• Для вставки объекта точно на то же место выполните команду Edit-Paste in
Place.
4.Проверьте, как работает ваша программа.
5.Сохраните файл.
6.Покажите работу учителю.
Рис. 7
ЛАБОРАТОРНЫЕ РАБОТЫ № 3–4 СОЗДАНИЕ СЛОЕВ. ВРАЩЕНИЕ
Цель работы: научиться создавать анимацию нескольких объектов на разных слоях; 100освоить тип движения – вращение.
Практикум по информационным технологиям
Задание 1. Использование слоев в анимации
1.Создайте в своей папке Flash папку Вращение.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – Слои.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.Нарисуйте пятиугольник и заставьте его перемещаться, от левой границы кадра к правой.
8.Произведите двойной щелчок по имени слоя и введите новое имя Пятиуголь-
ник (рис.8).
9. Создайте новый слой Круг (рис.9).
Рис. 8
Рис. 9
10.В центре кадра нарисуйте небольшой круг и задайте ему анимацию - увеличение размера. Номер конечного ключевого кадра совпадал с номером последнего кадра на слое Пятиугольник.
11.Запустите программу.
12.Поменяйте слои местами.
Над списком слоев в палитре времени вы видите три значка.
•щелчок на слое под «глазом» временно скроет слой;
•щелчок на слое под «замком» запретит редактирование слоя;
•щелчок по квадрату отменит заливку объекта.
13.Сохраните файл.
14.Покажите работу учителю.
Задание 2. Вращение вентилятора
1.Откройте новый документ.
2.Выполните команду File – Save As – Вентилятор.fla.
«Центр на Павелецкой» №1406
Рис. 10
3. Нарисуйте лопасти вентилятора.
4. Нарисуйте винт в виде круга в центре вентилятора. Это ось вр ащения
(рис.10).
5.Переименуйте слой в Лопасти.
6.Создайте новый слой Ножка и нарисуйте ножку и подставку (рис.11). Ножка должна совпадать с центром вентилятора.
7.В слое с лопастями вентилятора задайте анимацию движения, закончив в кадре 50.
8.Выделите 1-ый ключевой кадр.
9.Щёлкните панель Properties (Свойства).
Рис. 11
10.Установите следующие значения параметров: Tween-Motion (перемещение),
Rotate-CW(по часовой стрелке), times-5 (рис.12).
11.Чтобы ножка не пропадала задайте ей анимацию движения, не изменяя характеристик объекта.
12.Запустите программу.
13.Покажите работу учителю.
Рис. 12
Задание 3. Расходящиеся окружности
1.Создайте новый слой Круг 1.
2.Нарисуйте окружность с широким контуром небольшого диаметра
(рис.13).
3.Создайте анимацию движения окружности, увеличивая её размер.
4.Вставьте ещё один ключевой кадр.
5. |
В конечном ключевом кадре |
ещё увеличьте окружность. |
6. |
Выполните команду Properties |
– Со1оr – А1pha |
(прозрачность) – 6%.
7. Создайте ещё два слоя Круг 2 и Круг 3 и выполните для |
|
|
Рис. 13 |
||
них анимацию по образцу (рис.14). |
||
|
102
Практикум по информационным технологиям
Рис. 14
8.Запустите программу.
9.Сохраните файл
10.Покажите работу учителю.
Задание 4. Смещение оси вращения во время движения
1.Запустите программу Flash.
2.Откройте новый документ.
3.Выполните команду File – Save As – Кирпич.fla.
4.Убедитесь, что вы сохранили файл в своей папке.
5.У левой границы кадра нарисуйте прямоугольник (кирпич).
6.Выделите прямоугольник и преобразуйте его в символ по команде
Modify-Convert to Symbol (преобразовать в символ), тип – Graphic (графика).
7.Сместите центр вращения в правый нижний угол
прямоугольника (рис.15). |
|
|
8. |
Задайте анимацию движения. |
|
9. |
Выполните команду Modify – Transform – Rotate 900 CW. |
Рис. 15 |
10.Запустите программу.
11.Полюбовавшись работой, продолжите движение кирпичика.
12.Щёлкните правой кнопкой мыши в следующем кадре и сделайте его ключевым
(рис.16).
|
|
|
|
|
|
«Центр на Павелецкой» №1406 |
|
103 |
|
|
|
|
|
|
|
|
|
|
|
Рис. 16
13. Сместите центр вращения в правый угол и снова задайте анимацию – Поворот на 900.
14. Все последующие шаги выполняются аналогично: переместили центр вращения - повернули.
15. Заставьте кирпич обходить препятствия (рис.17).
Рис. 17
16.Запустите программу.
17.Сохраните файл.
18.Покажите работу учителю.
Задание 5. Вращение в пространстве
104
Практикум по информационным технологиям
1.Откройте новый документ.
2.Выполните команду File – Save As – Книга.fla.
3.Создайте шесть слоев с разноцветными страницами книги (рис.18)
4.Переименуйте их: Стр.1 и т.д.
Все они отличаются только цветом, а размер и положение в пространстве у них совершенно одинаковы. Легче всего для создания одинаковых по размеру страниц воспользоваться услугами буфера обмена, но при вставке объекта на новый слой использовать команду Edit-Paste in Place.
Рис. 18
«Откроем» первую страницу, расположенную на самом верхнем слое.
5.Задайте для страницы анимацию движения.
6.Переместите центр вращения страницы на ее левую вертикальную границу (рис.19).
7.В конечном ключевом кадре анимации задайте параметры скоса и изменения разме-
ра (рис. 20).
Window-Transform
Рис. 20 |
Рис. 19 |
|
8.Аналогичные преобразования выполните во всех слоях, за исключением самой нижней страницы, так как она должна оставаться неподвижной.
9.Страницы книги перелистываются не все разом, а поочередно, поэтому в каждом слое сдвиньте анимацию на несколько шагов вправо относительно верхнего слоя
(рис.21).
|
|
|
|
|
«Центр на Павелецкой» №1406 |
105 |
|
|
|
|
|
10.Чтобы ни одна страница книги после переворота не исчезала с экрана, надо добавить ключевые кадры, не изменяя характеристик объекта, чтобы край получился ровным.
11.Теперь книгу надо закрыть - все страницы одновременно.
12.В каждом слое вставьте еще один (последний) ключевой кадр, задав в панели Transform параметры исходного состоянияпрямоугольников (ширина - 100%, скос - 0°).
Рис. 21
13.Запустите программу.
14.Сохраните файл.
15.Покажите работу учителю.
106
Практикум по информационным технологиям
ЛАБОРАТОРНАЯ РАБОТА № 5 ДВИЖЕНИЕ ПО ТРАЕКТОРИИ
Цель работы: научиться создавать анимацию движения объектов по траектории.
Задание 1. Правила описания движения по траектории
1.Создайте в своей папке Flash папку Движение по траектории.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – 1_Правила движения.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.На слое Объект создайте анимацию перемещения объекта из одной точки в другую (рис. 22).
Рис. 22
8.Удалите галочку с команды View-Snapping-Shap to Guides (притяжение к направляю-
щим) и View-Snapping-Shap to Objects (притяжение к объектам).
9.Выделите начальный ключевой кадр анимации движения и в панели Propertion (свойства) поставьте галочку рядом с признаком Shар(притяжение).
10.Щелкните правой кнопкой мыши по слою с объектом. В открывшемся контекстном меню выберите команду Add Motion Guide (добавить траекторию движения).
11.На новом слое создайте траекторию движения (рис.23).
12.Запустите программу (Ctrl+Enter).
13.Сохраните файл.
14.Покажите работу учителю.
Рис. 23
|
|
|
|
|
«Центр на Павелецкой» №1406 |
107 |
|
|
|
|
|
Задание 2. Движение по существующей траектории
1.Откройте новый документ.
2.Выполните команду File – Save As – 2_ Спуск.fla.
3.На слое Земля нарисуйте профиль горы.
4.Создайте слой Объект и нарисуйте в нем прямо
(рис.24).
5.Создайте слой с траекторией Add Motion Guide.
6. Перейдите на слой Земля, и скопируйте линию |
|
в буфер обмена. |
|
7. Перейдите на слой с траекториейи вставьте |
|
содержимое буфера обмена. |
Рис. 24 |
8.Выделите начальный ключевой кадр вслое с объектом.
9.В панели Propertion (свойства) поставьте галочку рядом с признакомOrient to Path (ориентировать вдоль траектории).
10.Запустите программу (Ctrl+Enter) (рис.25).
11.Сохраните файл.
12.Покажите работу учителю.
Рис. 25
108
Практикум по информационным технологиям
ЛАБОРАТОРНАЯ РАБОТА № 6 ИСПОЛЬЗОВАНИЕ РАСТРОВЫХ ИЗОБРАЖЕНИЙВ СИСТЕМЕ FLASH
Цель работы: сохранение изображений в формате GIF для дальнейшего «оживления» картинки.
Задание 1. Создание прозрачного изображения
1.Создайте в своей папке Flash папку Изображения.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – Университет.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.Выполните команду File – Import –Университет.gif в Моих рисунках.
8.Вставьте на кадр.
9.Измените фон кадра.
Вы увидите белый цвет вокруг здания.
Оказывается, изображение вовсе не прозрачно, а так хотелось раскрасить небо за универ-
ситетом в цвет зари...
10.Запустите программу Photoshop.
11.Откройте файл «Университет.tif».
12.Выделите его и скопируйте.
13.Выполните команду Файл - Новый.
Высвечиваемые в окне команды параметры в точности совпадают с характеристиками изображения, буфере обмена.
Рис. 27
находящегося в
14. Выполните команду Содержимое файла – Прозрачный (рис.27).
|
|
|
|
|
«Центр на Павелецкой» №1406 |
109 |
|
|
|
|
|
15. |
Переключитесь на файл «Университет. tif» |
|
|
|
|||
16. |
Возьмите инструмент Волшебная палочка: |
|
|
17. |
Выделите белый фон вне здания. |
|
|
18. |
Выполните команду Выделение - Инверсия. |
|
|
19. |
Выделенный фрагмент (это будет сам Универси- |
|
|
Рис. 28 |
|||
тет) скопируйте в буфер обмена. |
|||
|
|||
20.Переключитесь на пустой файл с прозрачным фоном и вставьте в него содержимое буфера обмена. Здание университета оказалось на прозрачном фоне (рис.28).
21.Выполните команду Файл - Сохранить для Web (рис.29).
22.Проследите, чтобы этот файл сохранился в вашей папке.
Рис. 29
23.Переключитесь на систему Flash и разместите только что созданное изображение рядом с его первым, непрозрачным вариантом (рис.30).
24.Сохраните файл.
25.Покажите работу учителю.
Рис. 30
110
Практикум по информационным технологиям
Задание 2. Использования неподвижного изображения
1.Откройте новый документ.
2.Выполните команду File – Save As – Рассвет.fla.
3.Проследите, чтобы этот файл сохранился в вашей папке «Изображения».
4.Покажите учителю.
5.Создайте четыре слоя по образцу
(рис.31).
6.На слой Университет вставьте файл Университет. gif.
7.На слой Земля вставьте прямоугольник серого цвета.
8.На слой Небо вставьте прямоугольник фиолетового цвета.
9.На слой Солнце вставьте круг.
Рис. 31
10.Создайте радиальную заливку для Солнца. Windows – Color Mixer Цвет края Солнца должен совпадать с цветом неба (рис. 32).
11.Сохраните созданный образец (рис.33).
12.Залейте Круг созданным образцом (рис.34).
Рис. 33
|
Рис. 32 |
Рис. 34 |
|
|
|
|
|
|
|
|
|
|
«Центр на Павелецкой» №1406 |
111 |
|
|
|
|
|
13. Создайте анимацию для солнца
•На первом этапе светило растет, достигая максимального своего диаметра.
•На втором шаге на некоторое время солнце замирает – не изменяет своих свойств
(рис.35).
•На третьем шаге солнце исчезает, становясь прозрачным: Properties – Cоlor – Alpha – 0%.
Рис. 35
14.Создайте анимацию для неба: оно светлеет, но начинается анимация уже в конце фильма, после того, как солнце пропадает.
15.На слое с небом, в кадре, где заканчивается изменение прозрачности солнца,вставьте ключевой кадр и создавайте анимацию движения с изменением цвета (рис.36).
16.Запустите программу (Ctrl + Enter).
13.Сохраните файл.
14.Покажите работу учителю.
Рис. 36
112
Практикум по информационным технологиям
Задание 3. Оживляем картинки
1.Откройте новый документ.
2.Выполните команду File – Save As – Компьютер.fla.
3.Убедитесь, что вы сохранили файл в своей папке «Изображения».
4.Запустите систему Photoshop и откройте файл «Компьютер. tif».
Ваша задача - оживить человека, сидящего за компьютером. Например, заставить его двигать левой рукой.
5.Переместите руку на другой прозрачный файл (рис.37).
6.Образовавшуюся пустоту необходимо восстановить: дорисовать поверхность стола и черный фон.
7.Сохраните каждый файл в своей папке как Сохранить для Web.
8.В программе Flash выполните команду File – Import, указав имя файла с изображением компьютера с расширением .gif.
9.Слой назовите Компьютер.
10.Создайте новый слой Рука, по команде File - Import разместите на нем изображение руки и передвиньте ее на полагающееся ей место.
Рис. 37
Движение руки представляет собой поворот с центром вращения в локте - именно эта точка остается неподвижной при вращении.
|
|
|
|
|
«Центр на Павелецкой» №1406 |
113 |
|
|
|
|
|
11. Выполните команду Modify – Convert to symbol (Преобразовать в символ) – Graphic (Графический), а в схеме Registration (Точка регистрации) указать узел, куда надо переместить центр вращения - в правый нижний угол.
Рис. 38
12.Первый шаг анимации движения - поворот руки по часовой стрелке. Второй - в обратную сторону (рис.38).
13.Запустите программу (Ctrl + Enter).
14.Сохраните файл.
15.Покажите работу учителю.
114
Практикум по информационным технологиям
ЛАБОРАТОРНАЯ РАБОТА № 7 АНИМАЦИЯ ФОРМЫ
Цель работы: редактировать форму объекта произвольной конфигурации, научиться изменять во времени формы объекта, освоить правила анимации, связанные с изменением формы объекта.
Задание 1. Инструменты изменения формы
1.Создайте в своей папке Flash папку Анимация формы.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выберите инструмент Перо.
5.Создайте рисунки по образцу (рис.39).
6.Выберите инструмент Стрелка.
7.Переместите границу или угол объекта
в нужном направлении (рис.40). |
Рис. 39 |
||
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
Рис. 40
8.Выберите инструмент Белая стрелка.
9.Выделите синусоиду инструментом Белая стрелка. На линии появились опорные точки и вспомогательные линии.
10.Ухватитесь за точку на конце линии мышью и поверните её на 1800 (рис.41).
Рис. 41
|
|
|
|
|
«Центр на Павелецкой» №1406 |
115 |
|
|
|
|
|
11.Выберите инструмент Трансформация. Создайте рисунки по образцу, используя пиктограммы в нижней части панели инструментов (рис.42).
12.Покажите работу учителю.
Рис. 42
Задание 2. Анимация формы
1.Откройте новый документ.
2.Выполните команду File – Save As – Квадрат.fla.
3.Убедитесь, что вы сохранили файл в своей папке «Анимация формы».
4.Нарисуйте прямоугольник.
5.Выделите первый кадр на Timeline.
6.В панели Properties из списка Tween выберите Shape (форма).
7.Вставьте конечный ключевой кадр анимации.
Рис. 43
|
116 |
Временная последовательность окрасится в светло-зелёный цвет. |
|
|
Практикум по информационным технологиям
8.В конечном ключевом кадре искривите верхнюю сторону прямоугольника.
9.В следующем ключевом кадре удалите прямоугольник и вставьте овал
(рис.43).
10.Запустите программу (Ctrl + Enter).
11.Сохраните файл.
12.Покажите работу учителю.
Задание 3. Анимация заливки
1.Откройте новый документ.
2.Выполните команду File – Save As – Заливка.fla.
3.Нарисуйте прямоугольник.
4.Создайте анимацию формы.
5.С помощью инструмента Заливка залейте прямоугольник радиальной градиентной заливкой.
6.В конечном кадре анимации залейте тот же самый прямоугольник той же самой заливкой, но с центром в другом месте (рис.44).
Тестирование анимации позволит вам наблюдать изумительный эффект
перетекания цвета
Рис. 44
117
7.Запустите программу (Ctrl + Enter).
8.Сохраните файл.
9.Покажите работу учителю.
Задание 4. Труба
Создайте анимацию: труба медленно поворачивается так, что частично видна её внутренняя часть, а затем сквозь трубу катится мяч.
1. Откройте новый документ.
2. Выполните команду File – Save As –
Труба.fla.
3. |
Создайте два слоя трубы в виде пря- |
|
|
|
|
|
|||
моугольников. Нижний слой темнее. |
|
|
|
|
|
Рис. 45 |
|||
4. |
Создайте анимацию формы трубы (рис.45). |
|||
5.Создайте слой Земля.
6.На новом слое Мяч, который находится между слоями трубы, нарисуйте круг с полосами (рис.46).
Рис. 46
118
Практикум по информационным технологиям
7. |
Создайте анимацию движения для этого круга. Движение начинается после |
|||
того как закончится движение трубы (рис.47). |
|
|
||
|
|
|||
8. |
Запустите программу (Ctrl + Enter). |
|
|
|
9. |
Сохраните файл. |
|
|
|
10. |
Покажите работу учителю. |
|
|
|
Рис. 47 |
||||
|
|
|||
119
ЛАБОРАТОРНАЯ РАБОТА № 8 ОСОБЕННОСТИ РАБОТЫ СИЗОБРАЖЕНИЯМИ
Цель работы: научиться преобразовывать любое растровое изображение к виду, пригодному для редактирования отдельных его фрагментов и позволяющему задействовать изображение в анимации формы.
Задание 1. Превращение растровой картинки в векторную
1.Создайте в своей папке Flash папку Растровые изображения.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – Собака.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.Установите цвет фона кадра, отличный от белого.
8.Разместите в кадре изображениеСобака.gif из Моих документов.
9.Не отменяя выделения изображения, вы-
полните команду Modify - Trace Bitmap.
10.Установите такие же значения параметров, по образцу (рис.48).
11.Возьмите инструмент Стрелка, щелкните вне изображения, а затем по белому
фону |
вокруг собаки – Delete. |
Рис. 48
В кадре осталась одна только собака - векторный объект, чьи свойства можно изменять по известным правилам: модифицировать цвет заливки и контура, редактировать форму объекта.
12.Сохраните файл.
13.Покажите учителю.
120
Практикум по информационным технологиям
Задание 2. Анимация преобразованного изображения
1.Откройте новый документ.
2.Выполните команду File – Save As – Такса.fla.
3.Убедитесь, что вы сохранили файл в своей папке Растровые изображения.
4.Разместите изображение собаки из файла «такса.gif» и примените к нему команду
Modify - Trace Bitmap.
5.Измените цвет фона фильма, сделав его цветным.
6.С помощью инструмента Стрелка удалите белый фон картинки (рис.49).
7.С помощью инструмента Лассо обведите хвост таксы, и поместите его в буфер обмена по команде Edit - Cut.
8.Создайте новый слой Хвост.
9.Выполните команду Edit – Paste in Place (вставить на место).
10.Создайте анимацию для хвоста. Не забудьте сместить центр вращения хвоста.
11.Также «отсеките» у таксы голову и разместите ее на отдельном слое Голова.
12.Создайте анимацию для головы (рис.50).
13.Дорисуйте тело собаки, закрасив лишние
пустые пространства черной краской.
14.Запустите программу (Ctrl + Enter).
15.Сохраните файл.
16.Покажите работу учителю.
Рис. 49
Рис. 50
121
Задание 3. Использование изображения в качестве заливки
1.Откройте новый документ.
2.Выполните команду File – Save As – Узор.fla.
3.Выполните команду Window – Color Mixer – Tipe – Bitmap
4.В открывшимся окне откройте Мои рисунки и выберите понравившиеся файлы.
5.В центральной части окна Color Mixer высветится список миниатюр всех размещенных в фильме изображений (рис.51).
6.На кадре фильма нарисуйте различные фигуры и залейте их изображениями (рис.52).
7.Сохраните файл.
8. Покажите работу учителю.
Рис. 51
Рис. 52
122
Практикум по информационным технологиям
ЛАБОРАТОРНАЯ РАБОТА № 9 РАБОТА С ТЕКСТОМ И РЕДАКТИРОВАНИЕ АНИМАЦИИ
Цель работы: научиться вставлять в фильмы текстовую информацию, форматировать его, создавать анимацию текста.
Задание 1. Ввод и редактирование текста
1.Создайте в своей папке Flash папку Работа с текстом.
2.Запустите программу Flash.
3.Откройте новый документ.
4.Выполните команду File – Save As – Текст.fla.
5.Убедитесь, что вы сохранили файл в своей папке.
6.Покажите учителю.
7.В панели инструментов переключитесь на инструмент А «Текст».
8.В панели Properties вы увидите все свойства необходимые для редактирования
иформатирования текста.
9.Создайте надписи по образцу (рис.53).
10.Сохраните файл.
11.Покажите работу учителю.
Рис. 53
123
Задание 2. Анимация текста
К введенному тексту, как и к обычному объекту, можно применять все приемы трансформации и анимации движения.
Но учтите, что редактировать анимированный текст уже нельзя.
1.Откройте новый документ.
2.Выполните команду File – Save As – Анимация текста.fla.
3.Наберите слово ПРИМЕР.
4.Выделите текст инструментом Стрелка или инструментом А «Текст».
5.Выполните команду Modify – Break Apart (разбиение).
Вокруг каждого символа появилась рамочка. Слово перестало быть единым целым. Каждый символ начал «жить» отдельной жизнью (рис.54).
6. Щелчком вне слова отмените выделение символов, а потом щелкните по одному из них. Рис. 54
Рамочка появилась только вокруг этого символа.
Выделенный символ можно отредактировать (стереть, а вместо него ввестиновый), переместить, удалить, изменить характеристики шрифта, применить к символу инструмент «Трансформация». Но невозможно изменить форму такого символа или окрасить его градиентной заливкой.
7.Выделите весь текст, уже разбитый на отдельные символы, инструментом Стрелка.
8.Выполните команду Modify – Distribute to Layers (распределить по слоям). Визуально текст не изменился, зато каждый символ оказался на отдельном слое (рис.55).
Рис. 55
124
Практикум по информационным технологиям
9. Создайте анимацию для текста (рис.56).
Рис. 56
10.Запустите программу (Ctrl + Enter).
11.Сохраните файл.
12.Покажите работу учителю.
125
ОСНОВНЫЕ ПРАВИЛА РЕДАКТИРОВАНИЯ АНИМАЦИИ
|
|
Как узнать номер |
Щелкните по кадру кнопкой мыши - номер кадра отобразится в |
|
|
||
|
|
кадра? |
информационной строке под диаграммой времени |
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Удаление кадра |
Щелкните правой |
кнопкой мыши по кадру и выполните команду |
|
|
|
|
|
|
Remove Frames (удалить кадры). |
|
|
||
|
|
|
|
|
|
||
|
|
Удаление последо- |
Выделите кадры и выполните команду Remove Frames (удалить |
|
|||
|
|
вательности кадров |
кадры) |
|
|
||
|
|
|
|
|
|
||
|
|
Выделение последо- |
Щелкните по начальному ключевому кадру, нажмите клавишу |
|
|||
|
|
вательности кадров |
<Shift> и, не отпуская ее, щелкните по последнему ключевому |
|
|
||
|
|
|
кадру. |
|
|
||
|
|
|
|
|
|
||
|
|
Добавление кадров |
Щелкните правой кнопкой мыши по кадру и выполните команду |
|
|||
|
|
|
Insert Frame (вставить кадр). |
|
|
||
|
|
|
|
|
|
||
|
|
Перемещение клю- |
Способ 1. Выделите ключевой кадр, щелкнув по нему кнопкой |
|
|||
|
|
чевого кадра |
мыши; подведите к кадру курсор, дождитесь, |
|
|
||
|
|
|
чтобы под курсором появился маленький прямоугольник, нажмите |
|
|
||
|
|
|
кнопку мыши и перемещайте ключевой кадр |
|
|
||
|
|
|
|
|
|
||
|
|
|
Способ 2. Подведите курсор к ключевому кадру, левой рукой на- |
|
|||
|
|
|
жмите и не отпускайте клавишу <Ctrl>, нажмите кнопку мыши |
|
|
||
|
|
|
(курсор при этом превратится в двунаправленную стрелку) и пе- |
|
|
||
|
|
|
ремещайте ключевой кадр. |
|
|
||
|
|
|
|
|
|
||
|
|
Перемещение гра- |
Способ 1. Переместите граничный кадр в нужную позицию, удер- |
|
|||
|
|
ницы статического |
живая нажатой клавишу <Ctrl>. |
|
|
||
|
|
состояния |
Способ 2. В кадре, до которого следует продлить анимацию, |
|
|
||
|
|
|
щелкните правой кнопкой мыши и выберите команду Insert Frame |
|
|
||
|
|
|
(вставить пустой кадр). |
|
|
||
|
|
|
|
|
|
||
|
|
Вставка |
Щелкните правой кнопкой мыши по неключевому кадру и выбе- |
|
|||
|
|
промежуточного |
рите команду Insert Keyframe (вставить ключевой кадр) |
|
|
||
|
|
ключевого кадра |
|
|
|
|
|
|
|
|
|
|
|
||
|
|
Удаление анимации |
Щелкните правой кнопкой мыши по заключительному ключевому |
|
|||
|
|
между двумя сосед- |
кадру анимации, которую хотите удалить, и выберите команду |
|
|
||
|
|
ними ключевыми |
Clear Keyframe. |
|
|
||
|
|
кадрами |
|
|
|
|
|
|
|
126 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Практикум по информационным технологиям
Перемещение всей |
Выделите все кадры, входящие в анимацию, затем установите |
||
анимации на одном |
курсор на выделенной полосе, нажмите кнопку мыши и передви- |
||
слое |
гайте анимацию. |
||
Копирование |
Выделите анимационную последовательность, щелкните по выде- |
||
анимационной |
ленным кадрам правой кнопкой мыши и выполните команду |
||
последовательности |
Copy/Frames (копировать кадры). |
||
|
Щелкните правой кнопкой мыши по кадру, куда необходимо |
||
|
вставить анимационную последовательность, |
||
|
и выберите команду Paste/Frames (вставить кадры). |
||
Изменение размера |
Размер кадра, изменяется в окне команды Modify/Document в поле |
||
кадра |
Dimensions (размеры). |
||
Перемещение ани- |
1. Щелкните по кнопке Edit Multiple Frames (правка нескольких |
||
мации целиком |
|
кадров) на нижней границе шкалы времени. На линейке над |
|
|
|
кадрами шкалы времени появилась так называемая калька - |
|
|
|
серая полоса с шариками-ограничителями. Их надо перета- |
|
|
|
щить так, чтобы полоса в точности охватывала все кадры |
|
|
|
анимации. В результате на экране отобразятся состояния всех |
|
|
|
объектов в ключевых кадрах на протяжении всей анимации. |
|
|
|
|
|
2.Выполните команду Edit/Select All (выделить все) или с помощью инструмента «Стрелка» обведите все объекты, участвующие в анимации.
3.Передвиньте анимацию в нужную позицию. В данном случае разместите объекты в рамках уменьшенного кадра фильма
4.Завершите редактирование повторным щелчком по кнопке Edit Multiple Frames.
127
ЛАБОРАТОРНАЯ РАБОТА № 10 СТРУКТУРИЗАЦИЯ АНИМАЦИИ
Цель работы: освоить приёмы редактирования анимации и разбиения её на отдельные, не зависящие друг от друга части. Построить простейшую демонстрационную программу.
Задание 1. Сцены
1.Запустите программу Flash.
2.Откройте новый документ.
3.Выполните команду File – Save As – Моя первая презентация.fla.
4.Выполните команду Window-Other panels - Scene.
5.Щелкните по значку + в правом нижнем углу палитры и введите три сцены (рис.57).
Рис. 57
6.Дважды щелкните по имени в палитре сцен и введите новое имя по образцу (рис.58).
7.Переход между сценами (рис.59).
8.Сохраните файл.
9.Покажите учителю
Рис. 59 |
Рис. 58 |
Задание 2. Создание презентации
1. Сцена 1. Заголовок. Создайте заголовок Уроки биологии и создайте для него
анимацию движения (рис.60).
128
Практикум по информационным технологиям
2. Сцена 2. Содержание. |
|
|
• На слой Текст вставить текст из файла |
|
|
през_текст.doc. |
|
|
• Отрегулируйте параметры текста. |
|
|
• На слое Амёба нарисовать нечто, изменяющее свои |
Рис. 60 |
|
очертания. |
||
|
• Создайте анимацию движения амёбы, затем анимацию формы (рис.61).
Рис. 61
3. Часть 3. Завершение. Все буквы слова Конец должны «жить» по своим законам. Это может быть изменение размера, цвета, перемещение, формы букв (рис.62).
Рис. 62
4.Запустите программу (Ctrl + Enter).
5.Сохраните файл.
6.Покажите работу учителю.
129
ЛИТЕРАТУРА
1.Переверзев С.И. Анимация в Macromedia Flash MX/С. И. Переверзев. – М.: БИНОМ. Лаборатория знаний, 2005.
2.Лещев Д.В. Flash MX 2004/ Теория и практика. Самоучитель. – СПб.: Питер, 2004.
3.Ульрих К. Macromedia Flash MX 2004 для Windows и Macintosh/Катерина Ульрих;
Пер. с англ. Осипова А.И. – М.:ДМК Пресс; СПб.: Питер, 2004.
4.Константинов, А. В. Компьютерная графика: конспект лекций/ А. В. Константинов – Ростов н/Д: Феникс, 2006.
5.Левковец, Л. Б. Уроки компьютерной графики. Corel Draw Х3/ Л. Б. Левковец – СПб.:
Питер, 2006.
6.Леготина, С. Н. Элективный курс. Графический редактор Corel Draw. Фокусы и разоблачения/ С. Н. Леготина - Волгоград: ИТД «Корифей», 2007.
7.Microsoft Office PowerPoint 2003. Шаг за шагом + CD (русская версия). Эком, 2005.
8.Хабрейкен Д. Microsoft Office 2003 : Word, Excel, Access, PowerPoint, Publisher, Outlook. Все в одном. Вильямс, 2006.
9.Мотов В.В. Word, Excel, PowerPoint. Инфра-М, 2006.
10.Афанасьева Е. Презентации в Power Point. Шпаргалка. НТ Пресс, 2006.
11.Копыл В.И. Презентация Power Point. Харвест, 2006.
12.Бортник О.И. Базовый курс PowerPoint. Изучаем Microsoft Office. Современная шко-
ла, 2007.
13.Е.В.Шевчук, Н.С.Кольева. Текстовый процессор Microsoft Word. Москва,2008
14.Учебник Л. Босовой. Теоретический материал по теме работа с графическими объек-
тами в MS Word.
15. Залогова Л.А. Практикум по компьютерной графике. – М.: Лаборатория Базовых Знаний, 2001.
16.www.demiart.forum.ru
17.www.globator.net
130