Приложение 5
АНИМАЦИЯ ФОРМЫ (Shape tweening)
Shape tweening - анимация изменения формы и цвета графического объекта. Например, вам нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.
Как обычно, вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: ваша анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели Свойства в списке Tween строку Shape:
Рис 1. - Shape tweening
Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй.
Рис. 2
В этой маленькой анимации круг переходит в некое подобие полумесяца. На первом ключевом кадре я нарисовал круг, а на втором ключевом кадре (это 10-й кадр сцены) превратил его в полумесяц.
Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 1). Поле Label содержит метку кадра.
Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 3). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 4).
Рис. 3 - Easing: -100
Рис.4- Easing: +100
Параметр Blend, определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром.
И, наконец, последний инструмент в анимации shape tweening - контрольные точки (shape hints, дословно - подсказки для форм). Это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко:
На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.
Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.
На рисунках (Рис.5 и Рис.6) вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и с использованием таковых.
Рис. 5 - Shape tweening без использования контрольных точек
Рис. 6 - Shape tweening c использованием контрольных точек
При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:
форма
расположение
размер (любые пропорции)
цвет
угол поворота
Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.
ВЛОЖЕННАЯ АНИМАЦИЯ
Всем хороша трансформационная анимация: требует немного места для хранения, легка в создании, очень просто корректируется. Но, к сожалению, возможности ее сильно ограничены. Особенно в этом плане показательна трансформация движения -- с ее помощью вы можете создавать только самые простые движения.
Представим себе такую ситуацию. Вы хотите создать анимированный элемент -- прямоугольник, который бы двигался по рабочему листу справа на лево. Вы скажете, что это реализуется элементарно, и будете правы. Но что делать, если вы захотите, чтобы этот прямоугольник не только двигался по листу, но еще и вращался при этом?
Возможны три способа решения этой проблемы:
1. Обратиться к покадровой анимации. Там эта проблема стоять не будет: вы сможете нарисовать все, что угодно, и Flash корректно это проиграет.
Но приготовьтесь к тому, что вам придется рисовать каждый кадр анимации.
2. Прибегнуть к трансформации формы. Правда, для особо сложных случаев это может не помочь.
3. Создать вложенную анимацию. Вот об этом мы сейчас и поговорим.
Flash предоставляет интересную возможность: вы можете анимировать образец библиотеки, превратив его в небольшой фильм. Впоследствии можно создать экземпляр на основе этого анимированного образца и анимировать его. В этом случае не только сам экземпляр будет двигаться или иначе менять свой вид, но и параллельно будет проигрываться его собственная анимация. Благодаря этому вы можете создавать очень сложные анимации.
Одна анимация как бы вкладывается внутрь другой. Такая анимация и называется вложенной. Также часто такую анимацию называют многоуровневой.
Приложение 6
АНИМАЦИЯ ПРИ ПОМОЩИ ACTIONSCRIPT
1. Запустим программу Macromedia Flash
2. Выделим 10-ый, 20-ый и 30-ые кадры и правой кнопкой создадим на них ключевые кадры, нажав Insert Blank Key Frame.
3. Установим черный цвет окантовки, оранжевый цвет заливки и
нарисуем круг на полотне.
4. Установим среднее сглаживание линий Smoth, черную окантовку и голубую заливку.
5. Выделим 20-ый кадр
6. Создадим какую-то фигуру в правой части экрана.
7. Установите размер и цвет шрифта.
8. В прямоугольнике 10-го кадра напишем одно слово, например ПЛАНЕТА, в фигуре 20-го кадра другое слово, например ЗЕМЛЯ.
9. На первом и на последнем кадрах нажмем дважды Break Apart (для превращения текста в векторный рисунок).
10. Скопируем кадр 10 и вставим его в 1-ый
11. Скопируем 20-ый кадр и вставим его в 30-ый
12. Установим курсор где-то посредине каждого промежутка на шкале времени и в нижнем окне Tween установим Shape (преобразование формы).
13. Изображение на первом кадре передвинем в центр полотна
14. Выходим в режим масштабирования и уменьшаем до минимума на 1-ом кадре изображение
15. Аналогично на 30-ом кадре изображение передвигаем так же в центр полотна и уменьшаем его масштаб до минимума
16. Проверим преобразование формы, двигаясь по оси времени.
17. Введем новый символ: Insert, New Symbol, Button.
18. Установим черную окантовку и зеленую заливку.
19. Нарисуем кнопку в виде прямоугольника.
20. Скопируем ее и вставим в остальные кадры работы кнопки.
21. Расцветим разные кадры кнопки разными цветами.
22. Войдем в библиотеку.
23. Посмотрим как работает кнопка в окне.
24. Войдем в режим сцены.
25. Вставим новый слой и назовем его КНОПКА.
26. Скопируем кнопку на полотно сцены.
27. Выделим нарисованную на сцене кнопку правой кнопкой мыши.
28. Войдем в режим action. on (release) {
29. Сценарий, назначенный клипу, использует программу-обработчик подобно сценарию кнопки в предыдущем занятии. Чтобы задать программу обработки, вместо командной строки on введите строку onCIipEvent, которая определяет события для клипов ролика. В данном случае событие будет следующим: enterFrame. Это автоматическое событие, происходящее при каждом обращении к данному кадру. Если ролик должен воспроизводиться со скоростью 12 кадр/с, оно должно посылаться в программу обработки 12 раз в секунду.
Если ролик остановлен командой stop () или просто состоит из одного кадра, то кадр "зацикливается", то есть перерисовывается с той скоростью, которая задана ролику
Подобно программе on (press) в сценарии кнопки, команды реакции на событие onClipEvent (enterFrame) заключаются в фигурные скобки. В данной программе будет только одна команда, перемещающая клип на один пиксель влево. Давайте взглянем на сценарий и проанализируем, какие действия в нем выполняются.
onClipEvent(enterFrame) {
this._ x -- ;
}
Разберем команду this._х -- по частям.
Команда this обозначает обращение команды к объекту, который ее содержит. В данном случае this используется для обращения к клипу, которому назначен этот сценарий.
За командой this следует точка, обозначающая обращение к свойству объекта. В нашем примере _х относится к горизонтальному положению клипа. Итак, this._x определяет горизонтальное положение клипа. Символ -- является декрементом (командой уменьшения значения). Он уменьшает значение стоящей перед ней величины на 1 (пункт). Таким образом, команда this._x -- берет значение горизонтального положение клипа и вычитает 1, благодаря чему клип перемещается влево.
Если клип необходимо переместить вправо, используется команда ++, которая называется инкрементом (это команда увеличения значения). Если вы хотите переместить клип вправо или влево сразу на несколько пикселей, используйте соответственно += или -=:
onClipEvent(enterFrame) {
this._x -= 5;
}
Данная команда переместит клип сразу на пять пикселей. В Action набираем необходимый скрипт последовательно через + код в окне кода:
on (release) {
stop();
}
30. Проверим работу кнопки Control, Test Movie.
31. Сохраним файл.
32. Сохраним публикацию в виде файлов fla swf html
Приложение 7
ТЕСТ
1. Заполните пропуски в следующих высказываниях:
Только в ключевых кадрах Вы сможете _(нарисовать новое изображение)_ или (изменить старое);
На киноленте ключевой кадр обозначается (черной точкой)_;
Простые кадры и ключевые кадры (серого) цвета;
Кадры с анимацией движения (motion) (фиолетового) цвета;
Кадры с анимацией формы (Shape) (зеленого) цвета;
Для удаления кадров используется команда (Удалить фреймы);
В программе Flash нам доступны три вида анимации - (автоматическая раскадровка, ручная раскадровка, использование сценариев ActionScript);
Сгруппированный объект может быть отредактирован только после (разгруппировки);
Текст во Flash может быть конвертирован в (графический объект);
Бывает три типа символов - это (Movie Clip (Клип), Button (Кнопка), Graphic (Рисунок));
В программе Flash выделяется два типа звуков: (звуковое сопровождение событий и потоковый звук).
Форматы звуковых файлов, используемых Flash (WAV, AIFF, MP3, AVI)
2.Дайте определение:
Считывающая головка - это (красный прямоугольник, который передвигается по номерам кадров);
Swf-файл - это (собственно смонтированный фильм);
Html-файл - это (это веб-страничка со встроенным фильмом);
Gif-файл - это (анимированный ролик);
Точка трансформации - это (точка совпадающая с геометрическим центром объекта, относительной которой Flash выполняет позиционирование и преобразование объекта);
Градиентная заливка - это (заливка с плавным перетеканием цветов из одного оттенка в другой);
Анимация - это (последовательное воспроизведение ряда статических картинок);
Символ (Symbol) - это шаблон объекта с определенным набором свойств;
Экземпляр символа (Instance) - это (каждая новая копия символа, помещенная в фильм);
Клип (Clip, или Movie clip)- это (специальный тип символа, представляющий собой мини-фильм, может использоваться многократно);
Раскадровка - это (автоматическое создание промежуточных кадров между двумя ключевыми кадрами)
Морфинг - это (раскадровка формы)
3.Соотнесите:
Слои
|
|
Normal
|
Слой маски, содержащий фигуры, сквозь которые будут видны объекты маскируемых слоев
|
|
Guide
|
Папка слоев
|
|
Guided
|
Маскируемый слой, часть которого скрыта от глаз
|
|
Mask
|
Направляемый слой с объектом, который необходимо переместить вдоль траектории движения
|
|
Masked
|
Обычный слой
|
|
Folder
|
Слой направляющей, содержащий траекторию движения объекта
|
|
|
|
|
*Готовые эффекты
|
|
Copy to grid
|
Анимационный эффект взрыв, разделяющий объект на 16 частей и разбрасывающий их по дуге
|
|
Distributed dublication
|
Анимационный эффект расширение, рабочие объекты разлетаются друг от друга
|
|
Blur
|
Заготовка для раскадровки движения
|
|
Drop shadow
|
Распределенное дублирование укладывает копии объекта в стопку
|
|
Expand
|
Тень
|
|
6. Explode
|
Удаляет объект (стирает подобно ластику)
|
|
7. Transform
|
Анимационный эффект размытие
|
|
8. Transition
|
Копирование в таблицу распределяет копии выделенного объекта по ячейкам таблицы
|
|
|
|
|
БИБЛИОГРАФИЯ
1. Аверин В.А. Психология детей и подростков: Учеб. пособие. [Текст] - 2-е изд., перераб. - СПб. : Изд-во Михайлова В.А., 1998. С. 314.
2. Андреева Е.В. Математические основы информатики. Элективный курс: Учебное пособие [Текст] /Е.В.Андреева, Л.Л.Босова, И.Н.Фалина - М.:БИНОМ. Лаборатория знаний, 2005 - 328 с.:ил.
3. Артемова Л.К. Профильное обучение: опыт, проблемы, пути решения // Школьные технологии. [Текст] - 2003. - № 4. - С. 22-31.
4. Бесценная В.В. Компетентностный подход в реализации содержания элективных курсов по информатике [Текст] // Сибирский торгово-экономический журнал № 3, 2006.- С. 78-80. - 0,3 п.л.
5. Богомолова О. Б., Преемственность школьного и вузовского образования в условиях введения профильного обучения в старшем звене средней школы// Материалы Всероссийский научно-методической конференции «XX лет школьной и вузовской информатики: проблемы и перспективы». [Текст] - Нижний Новгород, 2006, с. 35-40.
6. Боршуляк М.П. Flash 5. 10-11 классы. Практикум. Информатика и ИКТ. [Текст] - изд. «Дрофа».-2002.- С. 140.
7. Бутакова М.В. Педагогические условия дифференцированного обучения в общеобразовательной школе: Автореф, диссер. канд. пед. наук [Текст] - Вологда, 1999.
8. Самылкина Н.Н. Структурные и содержательные особенности стандарта по информатике и информационным коммуникационным технологиям [Текст] /Н.Н.Самылкина// Информатика: прил. к газ. «Первое сентября». - 2004 - 1-7 сент. (№33). -С. 2-4.
9. Гранцева А.К. Формирование у школьников готовности к самообучению. [Текст].- М.: Просвещение, 1983.-65 с.
10. Закон Российской Федерации "Об образовании". (В редакции Федерального закона от 13 января 1996 года N 12-ФЗ).
11. Залогова Л.А. Практикум по компьютерной графике. [Текст] - М.: Лаборатория Базовых Знаний, 2001.
12. Заславская, О.Ю. Информатика и информационно-коммуникационные технологии. Справочные материалы: Учеб. пособие для учащ. средних шк. и абитуриентов вузов [Текст] / О.Ю. Заславская, И.В. Левченко. - М.: АПКиППРО, 2005. - 80 с.
13. «Концепция профильного курса информатики», [Текст] - Вестник образования №4 декабрь 2002 г.
14. Кузнецов, А.А., Филатова, Л.О. Новый Базисный учебный план - основа реализации профильного обучения в старшем звене средней школы [Текст]/ А.А. Кузнецов, Л.О. Филатова.- М.: АПК и ПРО, 2004.- 60 с.
15. Левченко И.В., Самылкина Н.Н., «Общие вопросы методики преподавания информатики», [Текст] / МГПУ 2003г.
16. Кузнецов А.А., Пинский А.А., Рыжаков М.В., Филатова Л.О. «Структура и принципы формирования содержания профильного обучения на старшей ступени» [Текст]/ Министерство образования РФ. Российская академия образования. Государственный университет - Высшая школа экономики; М. 2003. - 224 с.
17. Федеральный Базисный учебный план и примерные учебные планы для образовательных учреждений Российской Федерации, реализующих программы общего образования.
18. Хосеа Бергитта «Macromedia Flash 8» [Текст]/. - М.: НТ Пресс, 2007. - 256 с. Ил. - (Самоучитель).
19. http://akmeolog.narod.ru (электронный документ).
20. http://planetadisser.com/see/dis_261160.html (электронный документ).
webkursovik.ru
|
|
