Меню
Разработки
Разработки  /  Информатика  /  Проверочные работы  /  Лабораторные работы по информатике по курсу Пакеты прикладных программ

Лабораторные работы по информатике по курсу Пакеты прикладных программ

Курс лабораторных работ по компьютерной графике и анимации.
08.02.2012

Описание разработки

В рамках лабораторных работ рассматриваются основные приемы работы  с программами «Image Ready CS» и «Macromedia Flash MX». Задания рассчитаны на студентов, имеющих представления о работе в среде графического редактора Adobe PhotoShop и навыки программирования. Каждая работа содержит задания с подробным алгоритмом выполнения и задания, рассчитанные на закрепление приобретенных навыков. Любая последующая работа базируется на знаниях, полученных в предыдущих, поэтому следует выполнять их последовательно. 

Для более или менее комфортной работы необходим IBM совместимый компьютер с процессором P-III или выше, ОЗУ 128Мб или выше, свободного места на диске не менее 400 Мб, ОС Windows 98-XP, программамы Adobe PhotoShop CS и Macromedia Flash MX (приведены технологии работ для русифицированных версий этих программ). Тематика занятий следующая:

1. Создание карты изображений и визуальных эффектовс помощью программы «Image Ready». 

2. Создание анимации в автоматическом режиме с помощью программы «Image Ready».

3. Macromedia Flash: создание анимационных роликов в покадровом режиме. 

4. Macromedia Flash: создание анимации в автоматическом режиме. 

5. Macromedia Flash: создание и редактирование простейших ActionScript сценариев. 

6. Macromedia Flash: анимация вращения, анимация движения по траектории, создание и настройка управляющих кнопок. 

Курс лабораторных работ по компьютерной графике и анимации

Содержимое разработки

Alexandrov®










ТЕХНОЛОГИЯ

СОЗДАНИЯ WEB-АНИМАЦИИ И ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ HTML – СТРАНИЦ.


(сборник практических заданий для лабораторных работ по курсу «Пакеты прикладных программ»)







разработчик: Александров В.Н.













ВВЕДЕНИЕ


Основной целью данного пособия является практическая иллюстрация ключевых тем курса «Пакеты прикладных программ» (ППП), в частности, раздела «Программные средства создания интерактивной графики на Web-страницах». В рамках пособия рассматриваются основные приемы работы с программами «Image Ready CS» и «Macromedia Flash MX» на основе лабораторных работ по курсу ППП. Задания рассчитаны на студентов, имеющих представления о работе в среде графического редактора Adobe PhotoShop и навыки программирования. Каждая работа содержит задания с подробным алгоритмом выполнения и задания, рассчитанные на закрепление приобретенных навыков. Любая последующая работа базируется на знаниях, полученных в предыдущих, поэтому следует выполнять их последовательно. Для более или менее комфортной работы необходим IBM совместимый компьютер с процессором P-III или выше, ОЗУ 128Мб или выше, свободного места на диске не менее 400 Мб, ОС Windows 98-XP, программамы Adobe PhotoShop CS и Macromedia Flash MX (приведены технологии работ для русифицированных версий этих программ). Тематика занятий следующая:


1.Создание карты изображений и визуальных эффектовс помощью программы «Image Ready». -------------------------------------------------- стр.3


2.Создание анимации в автоматическом режиме с помощью программы «Image Ready». -------------------------------------------------------------------стр.5


3.Macromedia Flash: создание анимационных роликов в покадровом режиме. -----------------------------------------------------------------------------стр.7


4.Macromedia Flash: создание анимации в автоматическом режиме. –-----------------------------------------------------------------------------------------------стр.10

5.Macromedia Flash: создание и редактирование простейших ActionScript сценариев. --------------------------------------------------------------------------стр.12

6.Macromedia Flash: анимация вращения, анимация движения по траектории, создание и настройка управляющих кнопок. ------------стр.15

1. Создание карты изображений и визуальных эффектов

с помощью программы «Image Ready».


Ход работы.

Задание №1 Знакомство с программой. Запустите Image Ready, которая находится в одной группе программ и в той же папке, что и PhotoShop. Изучите пункты меню и палитру инструментов программы..

Задание №2 Настройка интерфейса. Зайдите в пункт Окно главного меню и поставьте «галочки» (если они отсутствуют) напротив пунктов Web-содержимое, Анимация, Инструменты, Параметры, Слои, Стили, Фрагмент. Ознакомьтесь с элементами управления появившихся палитр.

Задание № 3 Создание интерактивной карты изображений. Опишем приемы создания «светофора», переключающего цвета при наведении курсора мыши на соответствующий круг.

  1. Создайте новое изображение с белым фоном размером 100 на 300 пикселей (Файл-Новый..).

  2. Воспользовавшись инструментом Овальная область изобразите окружность, занимающую приблизительно 1/3 изображения и залейте ее серым цветом.

  3. Скопируйте эту окружность и дважды вставьте на рисунок, расположив три имеющихся окружности друг под другом, на равном расстоянии.

  4. Объедините все слои командой Слой - Объединить видимые.

  5. Создайте три копии получившегося слоя (Слой – Создать дубликат слоя).

  6. Верхний слой пусть останется без изменений. На втором слое верхний кружок залейте красным цветом, на третьем слое – второй кружок – желтым, а на четвертом слое – третий кружок – зеленым цветом.

  7. Убедитесь, что все слои являются видимыми (в палитре Слои напротив видимых слоев – изображение глаза, щелчком мыши можно установить или убрать его).

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

  9. Сделайте активным верхний круг, щелкнув на его изображении в карте ссылок (на основном изображении он должен стать заключенным в красную рамку).

  10. Нажмите кнопку Создать состояние ролловера в нижней части палитры Web-содержимое.

  11. С помощью контекстного меню появившегося состояния выберите действие Курсор наведен.

  12. Перейдите в палитру Слои и установите режим невидимости для всех слоев, кроме слоя с красным кругом.

  13. Повторите шаги 9 – 12 последовательно для второго и третьего кругов, делая видимыми слои с желтым и зеленым кругами соответственно.

  14. Протестируйте изображение в Internet Explorer с помощью соответствующей кнопки на палитре инструментов.

  15. Сохраните полученный результат в HTML-формате (Файл – Сохранить оптимизированный как…).


Задание № 4 Создание эффекта постепенного исчезновения. Для создания эффекта постепенного исчезновения или трансформации нужно подготовить два одинаковых по размеру и ракурсу изображения в PhotoShop. Например, вырезать из фотографии лица двух человек и сохранить в любом графическом формате. Далее действуют по следующему алгоритму:

  1. Открыть в ImageReady первое и второе изображения.

  2. Копировать второе изображение и вставить его на первое верхним слоем.

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

  4. В палитре Слои уменьшите непрозрачность верхнего слоя на 10% (со 100 до 90).

  5. Повторяйте шаги 3 – 4 до тех пор, пока показатель непрозрачности верхнего слоя не достигнет 0.

  6. На палитре Анимация настройте время отображения каждого кадра в секундах (правый нижний угол соответствующего кадра). Для первого и последнего – 1с, для остальных – 0,1с.

  7. протестируйте результат с помощью панели воспроизведения в нижней части палитры Анимация.

  8. Сохраните результат в GIF формате формате (Файл – Сохранить оптимизированный как…).

2. Создание анимации в автоматическом режиме

с помощью программы «Image Ready».


Ход работы.

Задание №1 Подготовка изображения для анимации.

  1. Запустите PhotoShop и откройте в нем файл с фотографией автомобиля - Auto.

  2. Разблокируйте фоновый слой (двойной щелчок мышью на изображении замка в палитре слои).

  3. Пользуясь инструментами Ластик, Масштаб, Магнитное лассо – Delete и т.п. уберите фон, оставив только изображение автомобиля на серо-белом клетчатом фоне.

  4. Выберите инструмент Волшебная палочка и щелкните им в любом месте на клетчатом фоне.

  5. Инвертируйте выделение (Выделение - Инверсия).

  6. Вырежьте изображение (Редактирование - Вырезать) и закройте окно рисунка.

  7. Создайте новое полотно (Файл - Новый), установив при этом прозрачное содержимое фона.

  8. Вставьте изображение машины на это полотно (Редактирование - Вклеить).

  9. Уменьшите изображение (Изображение – Размер изображения), установив при этом следующие настройки: Ширина – 300 пикс., Интерполяция – Бикубическая, флажки Стили масштабирования и Сохранить пропорции – установлены.

  10. Сохраните полученное изображение как файл JPEG с именем Auto1.


Задание №2 Создание анимации.

  1. Запустите ImageReady и откройте там файл Auto1.JPEG

  2. Скопируйте изображение автомобиля (Волшебная палочка на любом месте фона, затем Выделение – Инверсия и Редактирование - Скопировать).

  3. Создайте новый файл с белым фоном, шириной – 1500 пикс., оставив высоту без изменений.

  4. Дайте команду Редактирование – Вклеить.

  5. Пользуясь инструментом Перемещение установите «автомобиль» в левом конце полотна.

  6. На палитре Анимация нажмите кнопку Создать дубликат текущего кадра, а затем передвиньте «автомобиль» в крайнее правое положение на полотне.

  7. На палитре Анимация нажмите кнопку Создать промежуточные кадры.. (20 кадров)

  8. Протестируйте получившийся клип и сохраните в GIF формате под именем Auto2.

  9. Измените настройки анимации таким образом, чтобы приблизительно на половине пути автомобиль останавливался на некоторое время, а затем трогался с нарастающей скоростью.

  10. Протестируйте получившийся клип и сохраните в GIF формате под именем Auto3.


Задание № 3

Используя рисунок, полученный в задании 1, создайте GIF файл, высотой 300 пикс. и шириной 2000 пикс., на котором автомобиль первую треть пути будет ехать в гору, вторую – горизонтально, а третью – под гору.


Задание № 4

С помощью приемов и инструментов, изученных в предыдущих работах, изобразите «созревающее яблоко» (круг, цвет которого постепенно меняется от зеленого к красному).

3. Macromedia Flash: создание анимационных роликов

в покадровом режиме.


Задание №1 Создание элементарного анимационного ролика.

  1. Запустите программу Macromedia Flash. Зайдите в пункт Окно главного меню и установите флажки (в случае их отсутствия) напротив пунктов Инструменты, Монтажный стол, Свойства, Микшер.

При создании мультфильма аниматор рисует на отдельных листках героя с различными фазами движения, потом это все переносится на кинопленку, и при быстрой прокрутке кажется, что герой движется. В Flash анимация создается точно так же: перед вами в рабочей области не один лист, а целая стопка. На каждом следующем листке создается новая фаза движения героя. Перемещаться между кадрами можно с помощью линейки кадров. Это полоска с маленькими белыми и серыми прямоугольничками и цифрами 5...10...15...20, которая расположена вверху рабочей области. Первоначально там всего один кадр - первый, поэтому первый прямоугольничек в черной рамке. Если в первом кадре уже чего-то нарисовано, то прямоугольник станет серым и пометится точкой. Слева от линейки кадров расположена панель слоев (как в PhotoShop).

  1. Сейчас в панели слоев находится только один слой «Слой 1». Кликнем два раза на его названии и переименуем в «Лес». Затем, выбрав инструмент «Эллипс» изобразим в текущем кадре лес из зеленых вытянутых вверх овалов.

  2. На этом же слое, с помощью инструмента «Кисть» черным цветом нарисуйте «землю».

  3. Создайте новый слой, щелкнув изображение листа с «плюсом» в нижней части панели слоев и переименуйте его в «Куст». Теперь можно работать в любом из этих слоев, делая их поочередно активными щелчком ЛКМ на имени нужного слоя.

  4. На слое «Куст», в правой части кадра изобразим с помощью «Эллипса», «куст», состоящий из перекрывающихся темно-зеленых кругов и овалов.

  5. Создайте новый слой, щелкнув изображение листа с «плюсом» в нижней части панели слоев и переименуйте его в «Колобок» В левой части кадра нарисуйте желтым цветом круг – это будет «Колобок». В других местах кадра отдельно нарисуйте руку, ногу, глаз (синий круг) и рот (красным цветом) колобка.

  6. Инструментом «Указатель» щелкните на теле колобка, затем в главном меню Вставить – Преобразовать в символ. Там задайте имя «Тело» и поведение «Графика». Аналогично поступите с «рукой» и «ногой». Тем самым вы добавили объекты в библиотеку символов, которая вызывается с помощью комбинации клавиш Ctrl+L.

  7. Глаз тоже преобразуем в символ с соответствующим именем, только поведение зададим «Ролик». Это делается для того, чтобы в дальнейшем заставит «глаз» моргать.

  8. Теперь дважды щелкнем на «глаз» Колобка и увеличим масштаб (Вид – Масштаб – 400%). Сделаем этот кадр ключевым (F6).

  9. Снова нажмем F6, выберем инструмент «Кисть» и желтый цвет и немного закрасим глаз сверху и снизу. Повторяем шаг 10 до тех пор, пока синей не останется только узкая полоска посередине «глаза». Выбрав инструмент «Указатель» дважды щелкнем им в любом месте кадра, выйдя тем самым из режима анимирования символа.

  10. При помощи операций, описанных в пп. 8-10 заставим «рот» Колобка открываться и закрываться.

  11. Приступаем к «сборке» нашего существа. Для этого сначала вызываем библиотеку символов (Ctrl+L) в которой видим список созданных нами объектов. Перетаскиваем оттуда в кадр экземпляр символа «глаз», размещаем рядом с уже имеющимся «глазом», обводим их рамкой инструмента «Указатель» и делаем роликом с именем «Глаза». (аналогично пп. 7-8).

  12. «Указателем» перетаскиваем «глаза» на «тело» Колобка.

  13. Вызвав библиотеку символов перенесем в кадр экземпляр символа «рука». Щелкнем на нем «Указателем» и выполним команду Изменить – Трансформация - Перевернуть по горизонтали. Тем самым получаем вторую руку. Перетащим и приставим руки к туловищу.

  14. Аналогично п. 14 поступаем с «ногой». Затем размещаем «рот».

  15. «Указателем» выделим одновременно «тело», «руги», «глаза» и «рот» Колобка, удерживая кнопку Shift и сгруппируем их (Изменить – Группировать или Ctrl+G). Теперь Колобок состоит из трех объектов: двух ног и туловища.

  16. Заставим его подпрыгнуть: делаем кадр ключевым (F6), выделяем «Указателем» только туловище, приподнимаем его вверх (Shift +стрелка вверх). Повторяем этот шаг пока Колобок не окажется достаточно высоко. При этом «ноги» его пока остаются на земле.

  17. Теперь, оставив «тело» «висеть», подтянем к нему «ноги» (точно также, как в п. 17, только выделять и поднимать будем только «ноги»).

  18. Повторяем п.17, выделив одновременно «туловище» и «ноги», только каждый раз нажимаем Shift +стрелка вниз, до соприкосновения Колобка с «землей».

  19. Заставим Колобка «спрятаться» в «кустах». Этот процесс полностью аналогичен п.19, но нажимаем Shift +стрелка вправо. Скорее всего у Вас получилось, сто Колобок стоит перед «кустом», чтобы это исправить просто поменяйте в панели «Слои» местами слой «куст» и слой «колобок».

  20. На линейке кадров выберем слой с Колобком и, пропустив десять пустых кадров (прямоугольничков) от последнего, щелкнем на одиннадцатом ЛКМ и нажмем F5 (создав тем самым 10 одинаковых кадров) и F6.

  21. Перейдем на кадр с таким же номером в слое «лес» и тоже нажмем сначала F5, потом F6, то же проделываем и на слое «куст». Это делается для того, чтобы фон был на всех кадрах клипа.

  22. Применяя технологию п.20 выведем Колобка на центр кадра.

  23. Разгруппируем «туловище» (Изменить – Разгруппировать или Ctrl+Shift+G).

  24. «Научим» Колобка махать рукой. Для этого выделяем одну из «рук», создаем ключевой кадр (F6), в котором «руку» поворачиваем на нужный (небольшой) угол – Изменить – Трансформация – Вращение и наклон и, если необходимо, немного перемещаем мышью вверх. Повторяем эти операции до тех пор, пока «рука» не поднимется вверх на нужное расстояние, а затем проделываем то же самое, но опуская ее вниз.

  25. Повторим пп. 21-22.

  26. Протестируем свой клип нажав Ctrl+Enter.

  27. Сохраним клип в своей папке.



4. «Macromedia Flash: создание анимации

в автоматическом режиме».



Назначения некоторых клавиш и их комбинаций в Macromedia Flash:

F5 – создание промежуточного кадра или цепочки промежуточных кадров.

F6 – создание ключевого кадра или преобразование промежуточного кадра в ключевой

F8 – преобразовать в символ

Ctrl+L – вызвать библиотеку символов

Ctrl+J – настройки свойств документа (цвет фона, размер, частота кадров).

Ctrl+Enter – проверка ролика.


Задание №1. Создание анимированного текста, позиционирование текста, работа с параметром Alpha.

  1. Воспользовавшись инструментом «Текст», наберите в кадре слово «ПРИМЕР». (Обратите внимание на панель Свойства в нижней части окна программы – там, в окне с наименованием шрифта необходимо выбрать любой шрифт с окончанием Cyr.)

  2. Установите в панели Свойства размер шрифта – 48, цвет – зеленый, начертание – полужирный.

  3. Включите панели Инфо, Трансформация, Выравнивание в пункте Панели контекстного меню набранного вами текста.

  4. Сделайте цвет фона кадра черным, изменив настройки свойств документа.

  5. На панели Выровнять нажмите кнопку «По сцене». Там же ознакомьтесь с действиями кнопок позиционирования (выравнивания) объекта.

  6. Преобразуйте ваш текст в символ, задав ему имя Text и поведение «Ролик».

  7. Вызовите библиотеку символа и перетащите в кадр три экземпляра символа Text, расположив их друг над другом (теперь в кадре 4 надписи).

  8. Выберите первую надпись и расположите ее в центре кадра при помощи кнопок позиционирования.

  9. Выберите вторую надпись, затем в панели Трансформация (предварительно установив флажок «Сохранять») увеличьте масштаб на 5% (ввести число 105 в окно размеров). Далее в панели Свойства выберите в окне Цвет значение Alpha и уменьшите его на 20% и расположите надпись в центре кадра.

  10. Повторите п.9 для третей и четвертой надписей, устанавливая соответственно размер 110 и115%, а Alpha – 60 и 40%.

  11. Выберите сразу все надписи, обведя их рамкой инструмента «Выбор» и преобразуйте в символ, задав ему имя Texty и поведение «Ролик»/

  12. Разместите текст в левом верхнем углу кадра при помощи кнопок позиционирования. Перейдите на линейку кадров, щелкните на 25-й кадр и нажмите F5, создав тем самым 24 промежуточных кадра, копирующих первый ключевой.

  13. Дайте команду Вставить – Создать двойное движение, подготовив таким образом автоматическую анимацию.

  14. Сделайте ключевыми 13-й и 25-й кадр. (при этом пунктирная линия разобьется на две стрелки).

  15. Перейдите на первый кадр, выделите надпись и установите для нее параметр Alpha равным 0%.для тринадцатого кадра установите Alpha=100%, а 25-го – снова 0%.

  16. Протестируйте полученный ролик и сохраните под именем ФлешТекст.


Задание №2. Измените ролик из задания №1 таким образом, чтобы в нем точно такая же надпись, только красного цвета, двигалась по нижнему краю кадра навстречу первой.


Задание №3. Методами и средствами, описанными в первом задании, создайте ролик, в котором шарик синего цвета пробегает по периметру зеленого кадра, затем отскакивает в центр кадра и увеличивается в размерах приблизительно в 2 раза. Между ключевыми кадрами располагайте не менее 10 промежуточных.


Задание №4 Изучить трансформацию формы, создав ролики, на которых

а) Шар превращается в квадрат и, через некоторое время, обратно.

б) Квадрат превращается в шар, а шар в сердце.

(Для анимации формы, при создании двойного движения необходимо в окне Пара панели Свойства установить значение Shape, а начальный и конечный кадры должны быть ключевыми. Для превращения круга в сердце надо с помощью инструмента «Подвыделение» изменять положение опорных точек контура фигуры).



5. «Macromedia Flash: создание и редактирование

простейших ActionScript сценариев».

Задание №1. Средствами Action Script сооздать летающий шарик, который отскакивает от невидимых границ кадра.

  1. Заходим в "Вставить –Новый символ" и создаем Ролик с названием "Шар". В самом ролике пусть будет один кадр.

  2. Берем инструмент для рисования окружностей и рисуем окружность в центре, но только небольшую, радиусом пикселов10 (для этого пригодится вкладка "Свойства", где размеры выбранного с помощью Указателя) 3красный.

  3. Теперь опять создаем новый клип с названием "супершар") и перетаскиваем из библиотеки только что изготовленный "шар" в него и центрируем. Щелкаем по надписи "Сцена 1" в левом верхнем углу рабочей области и вытягиваем на центр из библиотеки "супершар". В поле "Имя копии (Метка кадра)" окна «Свойства» вводим "Ball". Теперь в правом верхнем углу рабочей области нажимаем кнопку с треугольником, квадратом и кружком в куче и выбераем "супершар".

Шар готов, осталось только догадаться, как же его двигать. Принцип этого алгоритма такой: у нас есть скорость шарика и его координаты, и мы каждый кадр просто прибавляем к координатам скорость и получаем иллюзию движения. Но таким образом через какое-то время мы увидим, как шарик покинет пределы ролика, так и не отразившись от стенок. Поэтому мы должны проверять, лежит ли шарик внутри сцены или нет, а если нет, то изменять скорость на другую, то есть на противоположную по знаку. А теперь рассмотрим, как это реализуется в скриптах:

  1. Создаем еще два ключевых кадра (внутри «супершара»).

В самом первом кадре надо инициализировать переменные, необходимые для алгоритма, а это - vx и vy - скорости по x и по y соответственно. Делается это при помощи ключевого слова "var". В action-script'ах все переменные бестиповые. Полностью объявление переменной выглядит таким образом: "var имя_переменной1 = начальное_значение1, имя_переменной2 = начальное значение2,...;"

  1. Поэтому мы переходим в Экспертный режим (кнопка со стрелкой в правом верхнем углу окна «Действие», которое вызывается кнопкой F9 ил через пункт «Окно» главного меню) и пишем var vx = random(5), vy = random(5);. Random - функция, которая возвращает случайное целое положительное число, меньшее указанного в скобках. Это для того чтобы наш шар не летал слишком одинаково каждый раз.

  2. Выбираем второй кадр. Здесь нам надо получить координаты шара. Делается это при помощи функции "getProperty". Первый параметр функции- имя объекта, в нашем случае - "../Ball" - именно в кавычках и со слешем и двумя точками! Дело в том, что нужно указать путь к объекту и его имя. Объект зовут "Ball" (мы сами дали ему это имя), а лежит он в основной сцене, или в корне, поэтому "../". Иначе Flash наш мячик не найдет, и ничего не заработает. Второй параметр - что мы хотим получить. Если хотим получить координату шара по x, то запишем: x = getProperty("../Ball", _x);. Аналогично для y: y = getProperty("../Ball", _y);. Теперь координаты шара у нас хранятся в переменных x и y.

  3. Дальше прибавляем скорость к координатам: x = х + vx; y = у + vy. А за проверку на столкновение с вертикальными границами отвечает конструкция: if(( x 540) or (x 390) or (y









Листинг:

x=getProperty("../Ball",_x);

x=x+vx;

if ((x540)or(x

x=x-vx;

vx=-vx;

}



y=getProperty("../Ball",_y);

y=y+vy;

if ((y390)or(y

y=y-vy;

vy=-vy;

}

setProperty("../Ball",_x,x);

setProperty("../Ball",_y,y);

  1. В третьем кадре напиши лишь одну строчку: gotoAndPlay(2);. Эта команда пошлет нас опять на второй кадр, и мы получим анимацию.

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

Задание №2. Может случиться, что одна из скоростей, а то и обе могут оказаться равными нулю, тогда шарик будет метаться по горизонтали/вертикали или вообще стоять до перезагрузки страницы. Исправьте скрипт так, чтобы этого не случилось.

Задание №3. Исправьте скрипт таким образом ,чтобы шарик двигался по синусоиде.

6. Macromedia Flash: анимация вращения,

анимация движения по траектории,

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


Задание №1. Изучение анимации вращения. В качестве примера рассмотрим прямоугольник, вращающийся вокруг одного из своих углов.

  1. Создаем новую сцену и рисуем на ней прямоугольник.

  2. Преобразовываем его в символ типа «Ролик» и даем название «прямоугольник».

  3. Заходим в режим редактирования символа (двойной щелчок ЛКМ на нем) и обращаем внимание на белую точку с крестиком в центре объекта – это и есть ось вращения.

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

  5. Перейдем в линейке кадров на 25-й кадр и сделаем 25 копий первого ключевого кадра (F5).

  6. Вернемся на первый кадр и создадим в нем двойное движение.

  7. Сделаем 25-й кадр ключевым (F6).

  8. Снова перейдем на первый кадр и в окне «Свойства» установим следующие значения параметров: Пара=Motion, Вращать=CW (по часовой стрелке), раз=5.

  9. Протестируем полученный клип (Ctrl+Enter).

  10. Меняя в режиме редактирования символа его положение относительно центра вращения, можно получать другие типы вращений.


Задание №2 Изучение анимации движения по заданной траектории. Рассмотрим шарик, который будет двигаться по некоторой кривой.

  1. Создаем новую сцену и рисуем на ней шарик, выравниваем шарик левому краю сцены.

  2. Создадим 25 кадров, содержащих копии первого, создаем в первом движение, а 25-й делаем ключевым.

  3. Теперь создадим слой направляющих движения, для этого в окне «Слои» щелкнем кнопку с изображением крестика и прямоугольничка, соединенных красным пунктиром.

  4. В первом кадре слоя направляющих нарисуем произвольную кривую с помощью инструмента «Перо», с началом в центре шарика. Редактировать созданную кривую можно изменяя положение опорных точек с помощью инструмента «Подвыделение», этим же инструментом можно ставить на кривой дополнительные опорные точки.

  5. Теперь в слое направляющих перейдем на 25-й кадр и нажмем F5.

  6. Вернемся в слой с шариком, перейдем на 25-й ключевой кадр и в нем переместим шарик так, чтобы его центр попал в конечную точку кривой из слоя направляющих.

  7. Протестируем полученный клип.


Задание №3. Создание управляющих кнопок. Для примера рассмотрим создание кнопки перехода по нужному URL.

  1. Создаем новую сцену. Затем в главном меню выбираем Окно – Основные библиотеки – Buttons. Перед вами предстанет библиотека символов, содержащая набор всевозможных кнопок, распределенных по категориям. Просмотрите все категории (они открываются двойным щелчком).

  2. Перетащите понравившуюся вам кнопку на созданную сцену и выделите ее.

  3. Разверните окно «Действия - Кнопка», если оно свернута и установите Опции просмотра (в том случае если находитесь в Экспертном режиме) Нормальный режим.

  4. В левой части панели «Действия» выберем пункт Actions - MovieControl – on (двойной щелчок). Тем самым мы перейдем в окно выбора события при нажатии на кнопку. Поставим флажок на «Выпуск».

  5. В левой части панели «Действия» выберем Actions - Browser\Network – getURL и в поле URL введем адрес какого –либо ресурса в таком формате: E:\WebDoc\Flash\шарик.html.

  6. Протестируем полученный ролик.


Задание №4 Используя анимацию вращения нарисуйте круглые часы с двумя стрелками, которые будут вращаться независимо друг от друга. (Часы и каждую стрелку лучше располагать на отдельных слоях).


Задание №5. Используя анимацию движения по заданной траектории, нарисуйте мяч, который летит с левого края кадра по параболе на правый край, попадает там в баскетбольную корзину и отскакивает в исходное положение.



18



-80%
Курсы повышения квалификации

Профессиональная компетентность педагогов в условиях внедрения ФГОС

Продолжительность 72 часа
Документ: Удостоверение о повышении квалификации
4000 руб.
800 руб.
Подробнее
Скачать разработку
Сохранить у себя:
Лабораторные работы по информатике по курсу Пакеты прикладных программ (0.1 MB)

Комментарии 0

Чтобы добавить комментарий зарегистрируйтесь или на сайт