Создание Flash - анимаций. Знакомство с программой Macromedia Flash. Создание Flash - анимаций Macromedia flash создание
И. С. Сакович,
руководитель высшей квалификационной категории кружка «Информатика и вычислительная техника» Гомельской городской станции юных техников, Беларусь
СОЗДАНИЕ ТЕСТОВ В СРЕДЕ MACROMEDIA FLASH
Общеизвестно, что регулярность и уровень подготовки учащихся к каждому занятию находятся в прямой зависимости от наличия и глубины проводимых контрольных мероприятий. Из всех существующих на сегодняшний день методик диагностирования самой перспективной и эффективной считается тестирование.
Тестирование как форма контроля и объективной оценки знаний и умений обучаемых все более привлекает внимание преподавателей - практиков. Однако многих педагогов не устраивают «готовые» тесты: их оформление, содержание, уровень сложности, несоответствие программному материалу. Программа Macromedia Flash предоставляет уникальные возможности для создания «авторских» тестов – красочных, анимационных, интерактивных, рассчитанных на разновозрастные группы обучаемых.
Разработкой тестов могут заниматься не только педагоги, но и учащиеся во время факультативных и кружковых занятий. Ученики сами придумывают вопросы по интересующей их теме и составляют короткие однозначные ответы на них. Такой вид деятельности даёт возможность учащимся лучше понять общие и отличительные качества изучаемых объектов, легче классифицировать различные явления, полнее усваивать учебный материал. Производство тестов - кропотливый и длительный процесс, но при этом невероятно творческий и увлекательный.
Процесс создания тестов для компьютерного тестирования ничем не отличается от традиционного: вопросы вводятся в соответствующую форму вместе с вариантами ответов. Тестируемый делает выбор, а программа сравнивает введённые данные с правильными ответами, анализирует результаты.
Типовые правила подготовки материалов для тестового контроля :
основной текст задания содержит не более 8-10 слов;
каждый тест должен выражать одну идею, одну мысль;
задания должны быть краткими, четкими, легко читаемыми;
неправильные ответы должны конструироваться на основе типичных ошибок и быть правдоподобными;
правильные ответы должны располагаться среди всех предлагаемых ответов в случайном порядке;
формулировка заданий не должна содержать двусмысленности и «ловушек»;
следует располагать тесты по возрастанию трудности;
ответы на один вопрос не должны зависеть от ответов на другие вопросы.
Тест должен включать разнообразные по форме, содержанию, степени сложности задания, достаточно полно охватывать материал проверяемой темы. Хорошим тоном считается наличие инструкции, поясняющей особенности и алгоритм тестирования. Инструкция должна быть четкой, понятной для выполнения.
Для построения тестовых заданий наиболее пригодными методиками являются:
а) выбор варианта (альтернативные);
б) подбор пары;
в) поле ввода;
г) исключение лишнего.
Тестирование становится гораздо интересней, когда вопросы представлены не в стандартной форме, например: голосовой ответ (подходит для изучения иностранных языков), Drag -and -drop (возможность построения или перемещения объектов на экране), область на рисунке (для выбора правильного ответа необходимо отметить область на представленном рисунке) и другие.
Вашему вниманию предлагаются различные варианты тестов, разработанные в среде Macromedia Flash , на занятиях компьютерного кружка. Возраст авторов тестов: 12 – 16 лет.
Тест типа «Правилка»
Размещаем в каждом кадре fla -документа текст задания «Исправьте ошибки в словах», текстовое поле типа Static с текстом вопроса, текстовое поле типа Input c именем otvet для ввода ответа, кнопку перехода к следующему вопросу.
Каждому кадру с вопросами необходимо присвоить имя (например, vopros1, vopros2,…) и поместить на него скрипт stop();
Возможны два варианта сценария при неправильном ответе на вопрос:
Ожидание верного ответа, т.е. переход на следующий вопрос осуществляется только при наличии правильного выполнения задания;
Переход к следующему вопросу с подсчётом правильных ответов.
В первом случае на кнопку пишется следующий код:
on (release) {
if (otvet==” цыплёнок”)
{ gotoAndPlay(”vopros2”)}
else
{text =”вы не исправили ошибку”;}
}
Во втором случае на кнопку запишем следующий код:
on (release ) {
gotoAndPlay (” vopros 2”); // переход на новый кадр
if (otvet ==”цыплёнок”) // проверка ответа
{n =n +1};
}
Где n – переменная для подсчёта правильных ответов.
Примечание. На первый кадр следует записать следующий скрипт: n =0;
По окончании тестирования для второго варианта сценария необходимо вывести информацию: «Количество правильных ответов: … ». Для этого в текстовое поле типа Dynamic помещается значение переменной n .
Тест с вариантами ответов
Предлагается вопрос и 3-4 варианта ответа на него. Каждому варианту соответствует кнопка, при нажатии на которую осуществляется переход к следующему вопросу.
На каждый кадр с вопросами необходимо поместить скрипт stop();
На одну кнопку с правильным вариантом ответа записывается следующий код:
on (release) {
gotoAndPlay(“vopros2”);
n =n +1;
//n – количество правильных ответов
}
На остальные кнопки помещается код:
on (release ) {
gotoAndPlay (“vopros 2”);
}
В последнем кадре flash -ролика следует поместить статический текст «Количество правильных ответов: » и вывести в текстовое поле типа Dynamic значение переменной n .
Иногда для выбора варианта ответа удобней использовать не объекты-кнопки, а сами текстовые записи ответов преобразовывать в кнопки.
Примечание. Условный оператор в этом типе тестов не используется.
Тест с вводом номера правильного ответа
Предлагается вопрос и 3-4 варианта пронумерованных ответов. Создается поле типа Input c именем otvet для ввода номера правильного ответа.
Для перехода к следующему вопросу используется кнопка, на которую помещается следующий код:
on (release ) {
if (otvet ==”…”)
{n=n+1};
gotoAndPlay (“vopros 2”);
}
Результат тестирования в виде количества правильных ответов оформляется в последнем кадре flash -ролика. Можно запоминать номера вопросов с верными вариантами ответа и дополнительно выводить информацию: «Правильные ответы были получены на вопросы со следующими номерами: …».
Тест «Установи соответствие»
Пример. Номера, написанные на тюбиках красок разных цветов, нужно поставить в соответствие со словом на английском языке, обозначающим данный цвет.
Для проверки результата на кнопку следует написать следующий код:
on (release ) {
if (kk 1=="3" && kk 2=="5"&& kk 3=="2"
&& kk 4=="4" && kk5=="1" && kk6=="6")
{otvet =" Правильно"}
else {otvet ="Не правильно";}
}
Кроссворд
Рисуется сетка кроссворда. В каждую ячейку кроссворда помещается текстовое поле типа Input , которое получает имя. Для проверки решения кроссворда пишем код:
on (release )
{
if (s 1=="m " && s 2=="i " && s 3=="l "
&& s4=="k" && s5=="b" && s6=="
&& s7=="e" && s8=="a" && s9=="d"
&& s10=="c" && s11=="a" && s12=="r" && s13=="r" && s14=="o" && s15=="t"
&& s16=="t" && s17=="e" && s18=="a")
{otvet=" Всёверно"}
else
{otvet ="Не все слова отгаданы" }
}
Примечание. Задайте для всех текстовых полей выравнивание по центру.
Тест с перемещением объектов (метод Drag -and -Drop )
Для примера используется тест по английскому языку на тему «Произношение звуков»: расположенные на поле слова необходимо перенести в нужное место карусели в соответствии с их звуковым произношением.
Создаем текстовые поля, преобразуем их в кнопки, для перемещения на каждую кнопку пишем код:
on (press) {
startDrag("ka1",false);
}
on (release) {
stopDrag();
}
Гдеka1 – имякнопки.
Чтобы осуществить проверку, необходимо написать следующий условный оператор, учитывая координаты прямоугольных областей:
on (release ) {
if (ka 6._x >-60 && ka 6._x <30 && ka 5._x >-60 && ka 5._x <30 && ka 4._x >-60 && ka 4._x <30 && ka 7._x >-160 && ka 7._x <-110 && ka 8._x >-160 && ka 8._x <-110 && ka 9._x >-160 && ka 9._x <-110 && ka 1._x >100 && ka 1._x <140 && ka 2._x >90 && ka 2._x <150 && ka 3._x >90 && ka 3._x <150 && ka 1._y <100 && ka 2._y <100 && ka 3._y <100 && ka 4._y <100 && ka 5._y <100 && ka 6._y <100 && ka 7._y <100 && ka 8._y <100 && ka 9._y <100 && ka 1._y >-10 && ka 2._y >-10 && ka 3._y >-10 && ka 4._y >-10 && ka 5._y >-10 && ka 6._y >-10 && ka 7._y >-10 && ka 8._y >-10 && ka 9._y >-10)
{otvet =" Правильно"}
Else
{otvet ="Не правильно, попробуйте ещё раз";}
}
Тест «Лабиринт»
Рисуется лабиринт, по которому нужно провести объект, например, шарик. В каждом переходе лабиринта появляется очередной вопрос теста.
Движение шарика задается автоматически с помощью Motion tweening . В нужных местах лабиринта создаются ключевые кадры, на которые помещается скрипт stop() . Объект останавливается и далее продвигается по лабиринту только при вводе в ячейку правильного ответа.
На кнопку проверки пишется следующий скрипт:
on (release ) {
if (ot ==11) // проверка ответа
{ gotoAndPlay (11);} // движение шарика
else
{ gotoAndPlay (4);} // откат шарика в начало
}
Примечание. Подробнее смотри в журнале «ИиО» № 10-2008.
Рисуются воздушные шарики, количество которых равно количеству вопросов в задании. При неправильных ответах шарики «лопаются» (исчезают). В итоге – сколько шариков осталось, столько было правильных ответов.
Примером служит текст стихотворения с пропущенными буквами. На местах пропусков создаются текстовые поля для ввода (лучше не оставлять их пустыми, а поместить в них символ «.»).
Для наглядности меняем цвет шрифта в полях ввода.
Кнопке проверки соответствует следующий код:
on (release ) {
if(x1!=" и") {q1._alpha=0;}
if(x2!=" о") {q2._alpha=0;}
if(x3!=" ю") {q3._alpha=0;}
if(x4!=" о") {q4._alpha=0;}
if(x5!=" одуванчики") {q5._alpha=0;}
}
Где q 1, …,q 5 – имена клипов-шариков;
x 1, …,x 5 – имена текстовых полей ввода.
Примечание. Свойство alpha характеризует прозрачность объекта. Как альтернативу можно использовать свойство видимости, например, q 1._ visible = false ;
Вариант для детей с художественными способностями: делая клип «воздушный шарик» невидимым, включать свойство видимости для заранее прорисованного клипа с анимацией, изображающей, как лопается шарик.
Тест «Возводим дом»
Для реализации данного теста необходима предварительная работа: создать красочный рисунок дома, каждый элемент которого преобразовать в клип. Присвоить клипам имена.
На первый кадр поместить код, делающий каждый их клипов невидимым:
имя клипа. _ visible = false ;
На кнопку
on (release) {
q1._visible=true; // дверь
gotoAndPlay(“vopros2”);
}
На кнопку c неверным ответом пишем код:
on (release) {
text1=’ двери’;
gotoAndPlay(“vopros2”);
}
При правильных ответах на вопросы теста поэтапно «возводится» дом (становятся видимыми его отдельные фрагменты). В противном случае, под строкой «В доме не хватает:» в подготовленные текстовые поля типа Dynamic последовательно выводятся названия недостающих частей дома.
Тест « Раскрасьрисунок»
Рисуется черно-белая картинка, каждый фрагмент которой оформляется как отдельный клип (например, разбитый на сектора мяч). Каждому клипу присваиваем имя. Если тестируемый правильно отвечает на вопросы, то рисунок постепенно закрашивается.
На кнопку c правильным ответом пишем код:
on (release ) {
gotoAndPlay ("vopros 2");
col=newColor(q1);
col.setRGB(0xFFcc33); // цветзаливки
}
Где q 1 – имя клипа-фрагмента рисунка.
Примечание. Можно использовать эту идею, чтобы сделать результаты любого тестирования более наглядными. Например, изобразить прямоугольник, разбитый на столько частей, сколько вопросов в тесте. При правильных вариантах ответов соответствующие прямоугольные фрагменты следует соответственно закрашивать.
Тест-шутка «Отгадайка-ка»
При наведении мышки на нужный объект, он становится видимым. Можно «спрятать» все объекты и искать их, водя мышкой по экрану. Необходимо использовать метод hitTest.
Пример демонстрирует карту Беларуси, на которой точками обозначены города. Когда мышка указывает на областной центр, появляется его название и точка меняет цвет на красный.
onClipEvent (enterFrame) {
if (this.hitTest
(_root._xmouse,_root._ymouse,true))
{_ root . dd 1._ visible = true ; //название города
col = new Color(_root.kr1);
col . setRGB (0 xFF 6600); //цвет красный
}
Тест с использованием компонентов CheckBox
Для оформления ответов на вопросы теста перетаскиваем в рабочий кадр главной сцены нужное количество компонентов CheckBox. В свойстве Label для каждого компонента вводим текст ответа на вопрос. Присваиваем компонентам имена.
Результаты тестирования оформляем в виде таблицы. Стрелка (клип с именем strelka ) указывает на текущий номер вопроса.
На кнопку проверки пишем следующий код:
on (release) {
gotoAndPlay(“vopros2”); //следующий вопрос
strelka ._ y +=17; //перемещение стрелки вниз
//проверка правильности ответа
if (k3.getValue() && !k1.getValue()
&& !k2.getValue())
{ o 2="+";} //занесение символа «+» в таблицу
else
{ o 2="-";} //занесение символа «-» в таблицу
}
Где k1, k 2, k 3 – имена компонентов CheckBox,
o1,…,o 5 – имена текстовых полей типа Dynaniс, расположенных во втором ряду таблицы,
getValue – свойство состояния флажка (true или false ).
Очевидно, что тесты – не единственная форма контроля знаний. Однако сочетание возможностей компьютерных технологий и достоинств тестирования вызывает большой интерес к использованию их в учебном процессе.
Работа над созданием тестов в среде Macromedia Flash формирует конструкторские и исследовательские навыки активного творчества, способствует развитию креативного мышления, предоставляет возможность реализовать дизайнерские и художественные способности ребёнка.
Желаю всем удачи, вдохновения и полёта творческой мысли при разработке новых увлекательных тестов!
Тренажер “Иван-царевич и Василиса Прекрасная” предназначен для отработки навыков нахождения точки на координатной плоскости по заданным координатам. В нашем случае координаты явно не заданы. Их нужно найти, посчитав значение выражения. Таким образом, этот тренажер помогает так же развитию вычислительных навыков. Суть задания заключается в следующем: ученик, вычислив координаты точки, должен перетянуть в эту точку соответствующий “оберег”. В каждом задании необходимо разложить по своим местам семь “оберегов”, после чего нажать кнопку “Готово”. Если задание выполнено верно, то появится сообщение о том, что ловушка пройдена, если хотя бы один “оберег” лежит не на своем месте, то появится сообщение об ошибке: “Иван-царевич попал в ловушку”.
Этапы создания тренажера:
1) создаем на первом кадре статистическое текстовое поле (Statik Text) и записываем в нем текст задания (рис. 13). В нашем случае это сказка;
2) на первом кадре пишем код: stop();
3) добавляем кнопку перехода на следующий кадр. Для этого нужно:
- нарисовать кнопку любой формы (например стрелку);
- выделить её;
- щелкнуть по ней правой кнопкой мыши;
- в выпавшем окне выбрать команды: Convert to Symbol -> Button;
- выделить полученную кнопку и написать код:
- on (release) {nextFrame();} – при нажатии перейти на следующий кадр.
Код для любого символа в Macromedia Flash записывается в панели Action Frame (рис. 14):
4) оформление первого кадра выполняется по желанию. Если вы хотите вставить какой то рисунок, то это можно сделать с помощью обычных команд – “Копировать” - “Вставить” или выбрать команду File -> Import.
5) на втором кадре располагается само задание. Чтобы создать второй (и все последующие) кадр нужно на временной шкале выделить соответствующий кадр, щелкнуть по нему правой кнопкой мыши и выбрать команду Insert Keyframe (рис. 15).
После этой операции все содержимое первого кадра скопируется на второй кадр. Все лишнее со второго кадра мы можем удалить и поместить туда нужную нам информацию. Если не выполнить описанную операцию, то изменения, произведенные на втором кадре, автоматически произойдут и на первом кадре.
Итак, на втором кадре мы помещаем координатную плоскость, причем рисуем мы ее на втором слое (создание слоев описано в предыдущем параграфе).
Координатная плоскость, в нашем случае, нарисована с помощью инструмента “прямая” (LineTools) (рис 16), рисуем одну линию с зажатой клавишей Shift, копируем её (Ctrl+C) и вставляем (Ctrl+V) на нужном расстоянии. Затем можно скопировать уже две прямых и т.д. Получив необходимое количество прямых, копируем их все, вставляем и, выбрав команду “свободная трансформация” (Free Transform Tool) (рис. 16), поворачиваем наши прямые на 90 градусов. Таким образом, мы получаем сетку нужного нам размера (рис. 17).
Сетку можно получить и другим способом, но нам было удобнее воспользоваться именно нарисованной вручную сеткой, так как с ней проще в дальнейшем работать.
6) координатные оси изображаем на слое 3;
7) координаты точек записываем с помощью уже знакомого текстового поля – Statik Text, “обереги” рисуем с помощью инструментов рисования. Все это выполняем на слое 1;
8) копируем изображение оберегов с первого слоя и помещаем на третий (рис. 18);
9) каждый оберег преобразуем в клип:
- выделить нужный оберег;
- щелкнуть по нему правой кнопкой мыши;
- в выпавшем окне выбрать команды: Convert to Symbol -> Movie Clip;
- каждому клипу дать имя: Оbereg1, Оbereg2,…, Оbereg7 (рис. 19).
10) для каждого клипа записываем следующий код:
on (press) { x0=this._x; y0=this._y;
this.startDrag(false);}
on (release) {this.stopDrag();
if (x0==this._x and y0==this._y){ this._rotation+=45; }}
11) на слое 1 в точках, соответствующих записанным координатам помещаем небольшие кружочки (по цвету совпадающие с цветом фона, чтобы ученик не видел, куда нужно передвинуть оберег);
12) каждый рисунок преобразуем в клип (рис. 20).
13) каждому клипу даем имя: Lov1, Lov2,…, Lov7 (от слова “ловушка”). Номер ловушки должен соответствовать номеру оберега, который учащийся с помощью мышки будет передвигать в точку с нужными координатами.
14) на любой из слоев добавляем текстовое поле Dynamik Text и задаем ему имя: text1 (рис. 21).
14) размещаем на форме кнопку “Готово” (рис. 22). Кнопку добавляем так же, как и в пункте 2;
15) для этой кнопки пишем следующий код:
if ((ober1.hitTest(lov1)) and (ober2.hitTest(lov2))
and (ober3.hitTest(lov3))and (ober4.hitTest(lov4))
and (ober5.hitTest(lov5))and (ober6.hitTest(lov6))
and (ober7.hitTest(lov7))) {
text1.text = "Иван Царевич попал в ловушку"; }}
16) на следующем кадре создаем сообщение о прохождении ловушки (рис. 23). Можно добавить какой-нибудь рисунок.
Рис. 23 Рис. 24
18) для кнопки “Меню” - on(release) {loadMovie ("имя файла .swf", _level0);}
Если ученик нажимает кнопку “Далее”, то он переходит на следующий кадр (рис. 24). На этом кадре нужно переместить, в соответствии с новыми координатами, клипы: Lov1, Ljv2,…,Lov7. Если учащийся проходит все ловушки (в нашем случае их 7), то на экране появляется заключительный кадр (рис. 25).
19) для кнопки “Снова” записываем код: on (press) {gotoAndPlay(1);}
20) чтобы при запуске программы картинка открывалась во весь экран на первом кадре нужно написать код: fscommand("fullscreen",true);
21) компиляция программы – клавиши: Ctrl + Enter;
22) на любой кадр добавляем картинки по желанию – программа готова.
“Определение координат” - это тест на проверку умения находить координаты по точке координатной плоскости. По заданной на плоскости точке нужно определить ее координаты и записать их в соответствующие окошечки (рис. 26).
Этапы создания теста:
1) на первом слое, которому можно дать имя “сетка”, нарисуйте координатную сетку (можно скопировать сетку из предыдущего задания);
2) на втором слое “оси” нарисуйте оси координат, добавьте обозначения осей и точку, координаты которой нужно найти (в нашем случае это точка А). Обозначение точки будет меняться на каждом слое;
3) на втором слое добавьте два текстовых поля (Statik Text). В одном запишите “Абсцисса точки А”, в другом – “Ордината точки А”;
4) создайте слой 3 и назовите его “координаты”;
5) на этом слое создайте два текстовых поля (Input Text) и назовите их korx (координата х) и kory (координата y);
6) разместите эти поля напротив соответствующих полей “абсцисса” и “ордината”;
7) создайте динамическое текстовое поле (Dynamik Text), и назовите его “rez” (результат) (рис. 27);
8) создайте кнопку перехода на следующий кадр, запишите для нее код: on (release) {_root.nextFrame(); }
9) создайте кнопку “готово” или “проверить”. При нажатии этой кнопки программа проверяет правильность введенных учеником координат. Если координаты указаны верно, то программа выдает сообщение “Правильно”, если нет – “Неправильно”. Код для этой кнопки будет меняться в зависимости от расположения точки на координатной плоскости.
if ((krx.text == "5") and (kry.text == "4")) {sum++;
rez.text = "Правильно"; } else { rez.text = "Не правильно"; }}
10) для подведения итогов теста на первом кадре любого слоя надо записать следующий код:
var n = 10; // количество вопросов
var sum = 0; // количество правильных ответов
function tiktak() {time++;}
timer = setInterval(tiktak, 1000); // таймер
- расположение и обозначение точки на координатной плоскости;
- обозначение точки в поле “абсцисса точки_” и “ордината точки_”;
- в коде кнопки “готово” указать новые координаты точки.
12) повторяем все описанные шаги нужное количество раз (зависит от количества вопросов в тесте, в нашем случае – 10 раз);
13) после последнего вопроса необходимо создать ещё один ключевой кадр (кадр с результатами теста):
- создайте на этом кадре текстовое поле (Statik Text) с надписью “Результаты:” или “Оценка:” (рис. 29);
- создайте динамическое текстовое поле и назовите его text;
- на итоговом кадре напишите следующий код:
clearInterval(timer);
{if (sum==10) { ozenka.text="Отлично";}
if ((sum==9) or (sum==8)) { ozenka.text="Хорошо";}
if ((sum==7) or (sum==6)) { ozenka.text="Тройка";}
if ((sum==5) or (sum==4) or (sum==3)
or (sum==2) or (sum==1) or (sum==0)) { ozenka.text="Двойка";}}
14) для того чтобы была возможность выполнить этот тест ещё раз (если вы хотите предоставить ученикам такую возможность), создайте кнопку “Снова”;
15) напишите для этой кнопки код: on (press) {gotoAndPlay(1);}
Алгоритм создания презентации “Построение фигур ”
Данная презентация предназначена для объяснения хода построения фигуры на координатной плоскости по заданным координатам ее ключевых точек. В ней рассматривается два способа построения фигуры по точкам:
- сначала мы отмечаем все точки, затем последовательно их соединяем;
- каждую последующую точку сразу соединяем с предыдущей.
Этапы создания:
- создайте два ключевых кадра;
- на каждом кадре разместите изображение координатной плоскости и текст задания;
- на первом кадре напишите код: stop(); fscommand("fullscreen",true);
- координатную плоскость преобразуйте в клип (пункт 3.1 шаг 6);
- в режиме редактирования клипа (для вызова дважды щелкните по клипу) создайте второй слой, на котором будут появляться точки;
- чтобы точки начали появляться не сразу при запуске клипа – первые 30 кадров оставьте без изменения (рис. 30):
- далее через каждые семь кадров создайте ключевой и добавьте на него по одной точке фигуры (рис. 31):
- после этого, так же через 7 кадров, начинаем добавлять соединительные линии (рис. 32):
- на последнем кадре напишите код: stop();
- перейдите в режим редактирования сцены (двойной щелчок мимо клипа) и на первом кадре создайте кнопку перехода на следующий кадр: on (release) {nextFrame();};
- на втором кадре, в режиме редактирования клипа, создаем второй и третий слои. На втором слое будут появляться точки, на третьем отрезки;
- создаем последовательность кадров (рис. 33):
- на последнем кадре пишем код: stop();
- возвращаемся в режим редактирования сцены и добавляем кнопку перехода на предыдущий кадр.
Желаю успехов в создании собственных работ!
Лабораторная работа
Знакомство с программой Macromedia Flash . Создание Flash - анимаций.
План работы:
Прочитайте представленный ниже текст.
Создайте по инструкции анимацию «Взрыв бомбочки»
Выпишите из текста ответы на контрольные вопросы.
Самостоятельно создайте анимацию «Шарик»
Знакомство с программой
Вдоль левой границы окна расположена Панель инструментов редактирования . Она обеспечивает доступ к инструментам, которые применяются для создания и редактирования графических объектов. Многие из этих инструментов вам знакомы по работе с графическим редактором.
Для удобства работы панель инструментов разделена на 4 части:
TOOLS (инструменты) - в этой части собраны кнопки выбора конкретного инструмента; эти инструменты разделяются на два вида: инструменты выбора и инструменты рисования;
View (вид) - - содержит средства управления просмотром изображения имеющегося на столе, в этом поле расположены две кнопки:
Hand Toll (рука) – щелчок на кнопке включает режим, при котором рабочую область можно перемещать в любом направлении с помощью мыши, не пользуясь полосами прокрутки;
Zoom Toll (Масштаб) – щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; при включении этого режима в поле Options появляются две дополнительные кнопки, позволяющие выбирать направление масштабирования (увеличение или уменьшение);
Colors (цвета) - кнопки в этой части обеспечивают раздельный выбор цвета контура и заливки объектов
Options (параметры) – здесь представлены элементы установки дополнительных параметров выбранного инструмента; для инструментов, не имеющих дополнительных параметров, поле Options остается пустым
Рабочая область занимает всю центральную часть окна. В центре рабочей области находится так называемый Монтажный стол (Stage ), который мы в дальнейшем для краткости будем называть просто «стол».
Размер стола и его цвет определяют соответственно размер и цвет экрана при просмотре фильма. При воспроизведении фильма на экран попадут только те объекты, которые расположены в пределах стола. В каждый момент времени на столе может располагаться только одна сцена, относящаяся к данному фильму.
Остальная часть рабочей области нужна для:
выполнения «черновых» работ;
для реализации эффекта постепенного входа (выхода) объекта в кадр.
Над рабочей областью расположена панель временной диаграммы (Timeline ). Временная диаграмма, как и стол, принадлежит конкретной сцене фильма. Она позволяет описать взаимное расположение слоев на сцене, последовательность изменения состояния объектов, представленных на сцене, и выполнить некоторые другие операции. Временная диаграмма является основным инструментом при создании анимации и при описании поведения интерактивных элементов фильма.
В общем случае на панели временной диаграммы могут быть представлены следующие элементы:
описание слоев текущей сцены фильма; описание представлено в виде своеобразной таблицы, содержащей несколько столбцов; в них указываются названия слоев и их атрибуты. Подробнее эта часть панели временной диаграммы будет рассмотрена на уроке «Создание анимации »;
собственно временная диаграмма, содержащая шкалу кадров, изображение «считывающей головки» и временные диаграммы для каждого слоя сцены
выпадающее меню, которое позволяет выбирать формат представления кадров на временной диаграмме;
строка состояния окна временной диаграммы, на которой выводится информация о некоторых параметрах фильма, а также имеются кнопки для управления отображением кадров анимации на столе.
Ниже рабочей области (в исходном состоянии) размещается Панель инспектора свойств.
Если в рабочей области не выбран ни один объект, либо таковые вообще отсутствуют, то инспектор свойств отображает общие параметры фильма. При выборе какого-либо объекта автоматически изменяется формат инспектора свойств, на панели отображаются свойства выбранного объекта.
Итак, создадим неболшой фильм – «взрыв бомбочки». Создавать этот фильм будем с помощью покадровой анимации.
Мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе.
При воспроизведении мультика эффект анимации достигается за счет того, что картинки на столе сменяют друг друга. Каждый покадровый мультик характерезуется двумя основными параметрами:
количеством ключевых кадров (Keyframe);
частотой смены кадров (во Flash она измеряется как число кадров показанных за 1 секунду – frame per second)
В общем случае оба этих параметра влияют на создаваемый визуальный эффект (на плавность или дискретность движения, превращения и т.д.). Но все же ведущая роль здесь принадлежит первому параметру, а также тому, насколько сильно последующий ключевой кадр отличается от предыдущего.
На временной диаграмме ключевые кадры отображаются серыми прямоугольничками с черной точкой внутри. При воспроизведении фильма считывающая полоса перемещается от одного кадра к другому, отмечая текущий кадр. Чтобы увидеть изображение, связанное с конкретным кадром, необходимо щелкнуть мышью на значке этого кадра на временной диаграмме.
Алгоритм создания анимации «Взрыв бомбочки»
На столе нарисуем рис.1
|
|
| ……… |
| Рисунок 1 | Рисунок 2 | Рисунок 3 |
Контрольные вопросы
Основные объекты окна программы Macromedia Flash
На какие области разбита Панель инструментов
Что такое монтажный стол
Какой инструмент служит для выделения объектов
Что такое Keyframe и как он выделяется на временной шкале
От чего зависит плавность движения объекта
С каким расширением сохраняются документы созданные в программе Macromedia Flash
Самостоятельная работа
Создайте фильм – падение шара и разбивание его на кусочки. На рисунке представлен образец состоящий из объединения всех шагов
До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, - это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.
Создание кнопок
Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:
Up-состояние это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;
Over-состояние кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;
Down-состояние данный кадр показывает вид кнопки при ее нажатии;
Hit-состояние определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.
Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).
Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).
Рис. 1. UP-кадр кнопки
Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.
Рис 2. Over-кадр кнопки
Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).
Рис. 3. Down-кадр кнопки
В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.
Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)
Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки
В результате получим следующий фильм . Как видно из данного фильма, надавливание кнопки происходит не только тогда, когда мы нажимаем мышью на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не нарисован, то рабочая область кнопки будет соответствовать Up-кадру.
Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)
Рис. 5. Hit-кадр кнопки
После того как мы добавим необходимый Hit-кадр получим следующий фильм , в котором при нажатии на рамку продавливания кнопки не происходит.
Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash.
Понятие об Action Script
Action Script представляет собой язык написания сценария - набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.
При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).
Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.
Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.
Одним из основных понятий Action Script являются Actions - команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка - Action Script (дословно - сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.
Интерактивный фотоальбом
Продемонстрируем использование кнопок для управления фотоальбомом - создадим набор фотографий и добавим две кнопки, которые будут листать фото вперед и назад.
Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).
Рис. 6. Добавим кнопку из стандартной библиотеки
В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).
Рис. 7. Элементы папки Key Buttons
Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).
Рис. 8. Автоматическое выравнивание кнопок на одном уровне
Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).
Рис. 9. Панели редактора Action Script
Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions - Frame, если щелкнуть по кнопке, то появится надпись Actions - Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария).
Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо.
Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:
В первой строчке записан обработчик событий кнопки on(), имеющий формат:
Теперь добавим несколько ключевых кадров так, что в них скопируются созданные в первом кадре кнопки, и поместим во вновь созданные кадры нужные фотографии.
Если запустить на исполнение созданный фильм, то кадры будут непрерывно проигрываться один за другим, а следовательно, прежде всего нам нужно дать команду «Стоп» на первом кадре. Для этого первому кадру добавим соответствующую команду (рис. 11).
Рис. 11. Сценарий, присвоенный первому кадру
Обратите внимание: команда присваивается уже не кнопке, а кадру. Тот факт, что кадру присвоен сценарий, отмечается на основной монтажной линейке - в обозначении кадра над жирной точкой появляется строчная буква «a».
В результате мы получили следующий фильм .
Если у нас в фотоальбоме всего несколько кадров, то двух кнопок - «Вперед» и «Назад» - вполне достаточно, но если набор фотографий большой, то желательно иметь еще и кнопки, отсылающие в начало и конец фильма. В следующем примере мы добавим соответствующие кнопки: «В первый кадр» и «В последний кадр». Выбрать кнопки подходящей мнемоники можно из стандартной библиотеки кнопок из папки Сircle Вuttons (рис. 12).
На предлагаемом примере мы ознакомимся с еще одной командой gotoAndStop(), которая позволяет перейти к нужному кадру с последующей остановкой.
Рис. 12. Кнопки из папки Circle Buttons
На кнопку перехода к первому кадру (третья слева на рис. 13) повесим код, как показано на рис. 13.
Рис. 13. Сценарий для кнопки «В первый кадр»
В случае с фотоальбомом из пяти кадров в последнюю кнопку добавим сценарий перехода «В последний кадр»:
Автоматизированное написание скрипта
До сих пор мы набирали все команды вручную, однако панели редактора ActionScript предоставляют целый ряд сервисов для автоматизированного написания скрипта. Рассмотрим эти возможности.
Рис. 14. Средства автоматизированного написания скрипта
Панель редактора Action Script позволяет выбирать, перетаскивать, перераспределять и удалять команды.
Покажем, как можно написать тот же скрипт для кнопки «Вперед» в автоматизированном режиме. Выбрав папку Movie Clip Control (верхнее левое окно на рис. 14) можно получить доступ к обработчику событий on, а далее нужно либо дважды щелкнуть по соответствующему пункту, либо перетащить выражение на поле написания скрипта в режиме Drag and Drop.
Рис. 15. Подсказка для завершения выражения
В результате на рабочем поле появится необходимое выражение и подсказка вида
(рис. 15): вы выбираете из меню нужную команду и выражение завершается автоматически.
Как видно из меню, можно выбрать не только условие, связанное с экранными кнопками,
- можно, также, выбрать из меню рис. 15 пункт keyPress “
Рис. 16. Обращения к кнопке клавиатуры
Задействуем команду keyPress “
Рис. 17. Команду nextFrame можно найти в папке Timeline Control
Для кнопки, переводящей фильм в начало фотоальбома, в качестве события можно выбрать из меню нажатие клавиши Home, а далее (рис. 18) перетащить на поле команду gotoAndStop, в результате чего появится еще одна подсказка по возможному синтаксису данной команды.
Стрелочки в подсказке позволяют просмотреть разные варианты синтаксиса. Программа предоставляет два варианта (рис. 18 и 19), то есть предлагает задать сцену и кадр или только кадр. В нашем случае достаточно указать только кадр (Frame). Если название сцены опущено, то по умолчанию осуществляется переход к кадру текущей сцены.
Рис. 18. Подсказка по возможному синтаксису команды
Рис. 19. Стрелочка-треугольник позволяет просматривать варианты синтаксиса
После того как мы назначим всем кнопкам соответствующие кнопки клавиатуры, получим следующий фильм , где листание фотографий будет происходить с клавиатуры, а нажатие мышью на экранные кнопки не будет вызывать никаких последствий.
Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно - для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 20).
Рис. 20. При введении запятой в списке событий автоматически появляется меню дополнительных команд
Добавим к первому событию (нажатие клавиатурной кнопки) второе событие (отпускание экранной кнопки):
on (keyPress " |
Повторим процедуру для остальных кнопок и в результате получим фотоальбом , в котором листание фотографий будет происходить как с помощью мыши, так и с помощью клавиатуры (исходный FLA-файл можно получить по ссылке).
В рассмотренном примере мы использовали переход по номеру кадра, но этот способ не всегда удобен: если в процессе редактирования фильма нумерация кадров изменится, то логика может нарушиться. Более удобно использовать переход по метке кадра. Рассмотрим пример, в котором потребуется не только перелистывание альбома, но и переход к разным разделам, то есть более сложная навигация.
Пусть альбом будет состоять из рисунков, компьютерной графики и фотографий.
Первому кадру раздела «рисунки» дадим метку Pictures, аналогично первым кадрам других разделов присвоим метки graphics и photo.
Создадим слой для размещения меток и назовем его Lables. Для того чтобы поставить метку кадру, в панели Properties необходимо выбрать тип метки Name и записать ее имя. В нашем случае Pictures (рис. 21). Аналогично разместим метки в кадрах 5 и 10 (рис. 22).
Рис. 21. Пример присвоения кадру метки
Теперь добавим новый слой и назовем его Actions. В первом ключевом кадре слоя Actions вызовем панель Actions Frame (путем нажатия кнопки F9) и наберем команду stop () (см. рис. 22)
Рис. 22. Сценарий первого кадра
Добавим еще один слой под именем Subjects (тематика), в котором дадим заглавия соответствующим кадрам: «Рисунки» (рис. 23), «Графика» и «Фото».
Рис. 23. Заглавие для кадров раздела «Рисунки»
Теперь добавим сбоку кнопки меню с аналогичными именами, которые расположим на новом слое под названием Мenu.
Напечатаем с левого края первый пункт меню «Рисунки» и переведем его в кнопочный символ. С помощью инструмента Arrow выделим текстовый блок «Рисунки» и выполним команду Modify => Convert to Symbol (эту команду можно выполнить и с помощью клавиши F8), в панели Convert to Symbol зададим тип символа Button и определим его имя как pictureButton (рис. 24).
Рис. 24. Назначим кнопке перехода к разделу рисунков имя рictureButton
Создадим четыре кадра для кнопки «Рисунки»: первый будет представлять просто исходный текст (рис. 25), второй - тот же текст только синего цвета, третий кадр мы пропустим (в этом случае Down-кадр будет такой же, как и Over-кадр), а в Hit-кадре нарисуем прямоугольную область, которая определит область нажатия кнопки (рис. 26).
Рис. 25. Up-кадр кнопки pictureButton
Рис. 26. Hit-кадр кнопки pictureButton
Теперь нам нужно повесить сценарий на вновь созданную кнопку. Для этого выделим кнопку в сцене Scene 1 и, нажав F9, вызовем панель Actions, а затем внесем код, показанный на рис. 27.
Рис. 27. Сценарий перехода на кадр с меткой
