Практические задания по FLAFH-технологии

Использование векторной графики. Использование векторной графики как графического режима по умолчанию делает Flash незаменимым средством разработки для Web. Векторная графика – это объекты, определяемыми математическими уравнениями, или векторами, которые содержат информацию о размере, форме, цвете, границе и местоположении. Это эффектный способ обращения с графикой, в результате которого получаются файлы относительно небольших размеров даже при работе со сложными рисунками. Более того, векторна...
Раздел Информатика
Класс -
Тип Рабочие программы
Автор
Дата
Формат docx
Изображения Есть
For-Teacher.ru - все для учителя
Поделитесь с коллегами:

Практические занятия

Практическое задание №1. Анимация движения облаков и движения яхты.

  1. Откроем новый фильм и скопируем в его библиотеку графический символ рисунка яхты.

Практические задания по FLAFH- технологии.

Рис. 4.1. Слой-фон


  1. Переименуем существующий слой в Фон и нарисуем в нем фоновое изображение. Оно представляет собой два прямоугольника, заполненные градиентной заливкой (рис. 4.1).

  2. Создадим слой 2 и дадим ему название облако 1. Нарисуем в нем объект облако.

  3. Сгруппируем объект. Переместим объект в исходную точку движения. Облако расположено на рабочем столе за пределами кадра (рис. 4.2). С первой секунды фильма оно начнет появляться в кадре, пересечет его справа налево и покинет кадр.

Практические задания по FLAFH- технологии.

Рис. 4.2. Слой 2 - Облако 1.


  1. Создадим третий слой. Назовем его Облако 2. Чтобы не рисовать второе облако скопируем в этот слой объект из слоя Облако 1. Переместим объект в начальную точку движения. Поскольку двух одинаковых облаков на небе не бывает, изменим форму облака, применяя операции трансформации и искажения (рис. 4.3).

Практические задания по FLAFH- технологии.

Рис. 4.3. Слой 3 - Облако 2


  1. Создадим последний слой под названием Яхта (рис. 4.4). Поместим в него символ Яхта из библиотеки. Для этого выберем этот символ из списка символов и переместим его в первый кадр фильма. Таким образом, все слои созданы, объекты размешены каждый на своем слое. Осталось задать их движение.

Практические задания по FLAFH- технологии.

Рис. 4.4. Слой 4 - Яхта


  1. Выберем слой Яхта. Перейдем в 120-й кадр, создадим ключевой кадр и переместим графический символ в конечную точку движения. Щелкнем правой кнопкой мыши на ячейке первого кадра и выберем из контекстного меню команду Create Motion Tween. Будет создана автоматическая анимация движения символа Яхта.

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

  1. Фон должен отображаться в каждом кадре и оставаться неподвижным. Чтобы сделать это, выберем слой Фон. Щелкнем правой кнопкой мыши на ячейке первого кадра и выберем команду Сору Frame. Щелкнем правой кнопкой на ячейке 120-го кадра. Выберем команду Paste Frame. В 120-м кадре будет создан ключевой кадр, содержащий копию первого кадра, а промежуток между ключевыми кадрами заполнится статическими кадрами с изображением фона.

  2. Просмотрим фильм. (Ctrl+Enter).

Практическое задание №2.

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

Практические задания по FLAFH- технологии.

Рис. 4.11. Временная диаграмма анимации маски


1. Для данной анимации понадобиться 3 слоя. Поэтому добавьте еще 3 слоя (ПКМ/Insert Layer).

3. На самом верхнем слое нарисуйте окружность, конвертируйте ее в Ролик. Создайте движение этого объекта от начало текста до конца.

4. На втором слое, создайте серый фон. На этом же слое напишите какой-нибудь текст белого цвета. Старайтесь, чтобы текст был на весь кадр.

5. Чтобы создать тень текста, необходимо скопировать текст и нижний текст сделать чуть светлее верхнего. Наложить тексты друг на друга с небольшим сдвигом.

6. Выделите все фреймы, находящиеся на втором слое и скопируйте их на третий слой (нижний). Поменяйте фон на черный, а текст на серый.

7. Самый верхний слой сделайте маской. Тогда второй слой автоматически станет под маской (рис 4.11.)

Практические задания по FLAFH- технологии.

Рис. 4.12. Общий вид анимации

Для того чтобы более эффектно работать со слоями пользуйтесь Видимостью слоя (Глазом) и Возможностью редактирования (Замком).

Практическое задание №3. Перетаскивание объектов

В этом примере мы научимся перемещать объекты с помощью мышки.

  1. Нарисуйте объект, который надо будет перемещать. С помощью F8 конвертируйте его в кнопку (Button). Нажмите правой кнопкой мыши на объекте, зайдите в "Actions" и вставьте следующий скрипт:

on (press) {

startDrag (_parent.obect);

}

on (release) {

stopDrag ();

}

Скрипт работает следующим образом: при нажатии на кнопку (on (press)), срабатывает функция startDrag - возможность открепить объект от листа для ролика (Movie Clip - obejct), а при отпускании кнопки (on (release)) срабатывает функция закрепления объекта в текущей позиции (stopDrag).

  1. С помощью F8 конвертируйте кнопку в Movie Clip, и в панели Prorerties в пункте Instance Name назовите его "obect" (рис. 8.2.)

Практические задания по FLAFH- технологии.

Рис. 8.2.


  1. Все готово. Теперь можно смело перемещать объект, удерживая левой клавишей мыши.

Практическое задание №4. Условный оператор.

Кнопка Play определяет, все ли объекты находятся ниже линии. Если да, то true, иначе - false.

Практические задания по FLAFH- технологии.

Рисунок 2

  1. Возможность перетаскивать объект реализована в практическом задании №3.

  2. Ниже приведен пример проверки кнопки, согласно условию задачи

on(release) {

if (obj1._y > 240 && obj2._y >240 && obj3._y>240)

t=true; else t=false;

}

Где obj1, obj2, obj3 - названия символа 1,2,3. Чтобы назвать символ, необходимо в Properties в пункте Instance Name.

Переменная t присваевается к Тексту через Properties в Var - раздел описания переменных.

Практическое задание №5. Создание программы тестирования

  1. Расположите на первом ключевом кадре статическое поле (с вопросом), несколько переключателей (с вариантами ответов), динамическое поле (для вывода результата) и кнопку в соответствии с рисунком 8.7.

Практические задания по FLAFH- технологии.

Рис. 8.7. Объекты первого ключевого кадра

Чтобы добавить компоненты Radio Button на кадр, необходимо открыть панель Components.

Необходимо дать собственное имя каждому переключателю (например, для первого варианта ответа a1, для второго - а2, для третьего - а3. Имя компонента настраивается в панели Properties в свойстве Component.

  1. Также необходимо для всех компонентов Radio Button в пункте Change Handler присвоить имя функции-обработчика, например myfun (рис. 8.8)


  1. Задайте подписи каждого Label - значение надписи варианта ответа

Практические задания по FLAFH- технологии.

Рис. 8.8. Настройки компонента Radio Button1

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


  1. Результатом работы будет сообщение «Верно» или «Неверно», выведенное при помощи динамического поля. Свяжите динамическое поле с переменной res.

Для этого выделите поле и настройте его тип - Dinamic text и укажите в пункте Var переменную res (рис. 8.9).

Практические задания по FLAFH- технологии.

Рис. 8.9. Настройки динамического поля


  1. Создайте функцию-обработчик myfun. Эта функция будет выводить сообщение в зависимости от выбора пользователя.

function myfun(component){

if (a2.getState() == 1) {

res = "Верно";

} else {

res = "Неверно";

}

р=0

}


  1. Доработайте функцию так, чтобы у пользователя была только одна попытка ответить. Для этого придется после ответа сделать переключатели неактивными. Перед последней фигурной скобкой вставить следующий код:

radio1.setEnabled(false);

radio2.setEnabled(false);

radio3.setEnabled(false);


  1. На первом кадре перед функцией необходимо обязательно поставить команду: stop(); для того, чтобы ролик не крутился бесконечно и можно было работать с тестом.

Скрипт к первому кадру будет выглядеть в соответствии с рис. 8.10.

Практические задания по FLAFH- технологии.

Рис. 8.10.


  1. Для перехода на следующий кадр необходимо запрограммировать кнопку, при нажатии на которую будет открываться следующий кадр. В кнопке должен приписан следующий код:

on (release) {

if(a2.selected){

p=p+1;

}

Play ( );

}

где a2 - компонент правильного варианта ответа.


  1. Аналогично создаем столько ключевых кадров, сколько требуется вопросов в тестировании. Только необходимо учесть, чтобы поле rec автоматически очищалось при переходе на следующий кадр, т.е. вопрос. Тогда скрипт для второго фрейма будет иметь вид:

res='';

function myfun(component) {

if (a5.getState()==1) {

res="Верно";

} else {

res="Неверно";

}

a4.setEnabled(false);

a5.setEnabled(false);

a6.setEnabled(false);

}

где res=''; - очистка переменной rec; а5 - компонент правильного варианта ответа во втором вопросе; а4, а5, а6 - варианты ответов.

  1. На последнем кадре ставим два динамических текстовых поля, которым даем имена: prav - для вывода количества правильных ответов и oc - для вывода полученной оценки (рис. 8.11).

Практические задания по FLAFH- технологии.

Рис. 8.11. Временная диаграмма программы тестирования из 5-ти вопросов.

Вид объектов последнего кадра - результат тестирования.


  1. В панели Actions вводим следующий код на последний ключевой фрейм:

stop();

prav=p;

if (prav<3){

oc="2";

}else if (prav==3){

oc="3";

}else if (prav==4) {

oc="4";

}else {

oc="5";

}

  1. При необходимости на последнем кадре можно вставить кнопку, позволяющую сдать тест заново, а на отдельном слое установить кнопку Выход для возможности выхода из теста в любой момент.

Кнопка «Выхода» или закрытие проекта

Action кнопки для закрытия проекта:

on(release){

fscommand("quit", "true");

}

© 2010-2022