Практическая работа «использование языка программирование actionsScript при создании анимации»
Цель:
знакомство с панелью Actions;
с режимами записи сценариев,
предлагаемых программой Flash
MX; создание своих первых
интерактивных фильмов; использование
«события кнопки» для написания сценариев;
создание анимации средствами
программирования
Задание
1.Создайте flash-ролик
“Кнопка”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Запустив
Macromedia Flash, создаем
новый flash документ
Откройте
панель библиотеки
кнопок: Window
/ Common
Libraries
/ Buttions
Выберите
кнопку и перетащите ее на сцену
Откройте
окно Window – Design Panels
– Info и установите нужные вам
размеры кнопки
|
Выделите
кнопку и откройте панель Actions-Button
Введите
скрипт с указанием полного пути к
файлу, который должен будет запуститься
при нажатии кнопки:
Сохраните
файл с расширение fla
При
сохранении файла с расширением
html(file
– Publish Settings),
чтобы фон кнопки был прозрачным
необходимо выбрать вкладку HTML
и в выпадающем меню Window
mode выбрать Transparent
Windowless.
|
Задание
2.Создайте flash-ролик
“Переключатель”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Запустив
Macromedia Flash, создаем
новый flash документ
Нарисуйте
небольшой круг красного цвета, внутри
которого расположим текст “OFF”
Выделите
круг и измените тип и толщину контура,
выбрав пункти толщиной 3 на панели
свойств
|
|
Преобразуйте
текст и круг в символ Movie
Clip
Внутри
символа создайте второй ключевой
кадр в котором измените цвет круга
на зеленый, тип контура на сплошной
, а текст на “ON”
|
|
Поставьте на
оба кадра скрипты остановки
|
|
Вернитесь на
главную сцену и выберите символ. В
окне свойств задайте имя символа
indicator в окне
Instance Name.
Под этим именем символ будет виден в
скриптах
Откройте
библиотеку кнопок Window
/ Common Libraries
/ Buttons и
скопируйте оттуда любую понравившуюся
вам кнопку
|
На
кнопку, взятую из библиотеки, «навесим»
следующий скрипт:
Запустите
ролик на просмотр и сохраните его
|
В этом сценарии
обрабатывается событие release
– отпускание кнопки мыши в тот момент,
когда курсор мыши находится над символом.
Таким же образом можно обрабатывать
следующие события:
press
– нажатие кнопки мыши над символом;
release
– отпускание кнопки мыши над символом;
releaseOutside
– отпускание кнопки мыши вне символа;
keyPress
– нажатие определенной кнопки (кнопок);
rollOver
– наведение на символ;
rollOut
– убирание символа;
dragOver
– перетаскивание над символом;
dragOut
– перетаскивание вне символа.
В этом скрипте
переменная a
используется как флажок, который меняет
значение при каждом нажатии на кнопку.
Оператор tellTarget
адресует предписание объекту, который
является его параметром. В первом случае
(ветка if
(a)
) мы предписывает объекту indicator
перейти к первому кадру и начать
выполнение. Во втором случае осуществляется
переход ко второму кадру.
Ссылка на indicator
записывается как _root.indicator
поскольку объект находится в основной
(корневой “root”
сцене).
Задание
3.Создайте flash-ролик
“Спортсмен”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ
Поменяйте
цвет рабочего поля
Создадим
новый символ (Insert
/ New
Symbol) типа
Movie Clip
и назовем его Спортсмен.
На
панели Color
Mixer выберите
тип заливки Bitmap
и откройте файл beg.jpg
(Это изображение тут же появится в
селекторе цвета заливки, а рисунок в
окне библиотеки)
Выберите
инструмент Rectangle
и нарисуйте прямоугольник размером
примерно с рабочее поле
|
|
Измените масштаб
рабочего поля на 25%
Выберите
инструмент Fill
Transform
и щелкните по нарисованному
прямоугольнику.
Перетащите
левый нижний маркер к центру так,
чтобы весь рисунок уместился в
прямоугольник.
|
|
Выберите
инструмент Lasso
в опциях которого, выберите Magic
Wand
Изменим
настройки: выберем Magic
Wand
Settings
и в поле Threshold
установите чувствительность равную
33.
|
|
Нажмете клавишу
Esc, чтобы снять
выделение рисунка
Щелкните
курсором по белому фону между
изображениями фаз бега и нажмите
клавишу Delete.
Инструментом
Selection выделите
изображение первой фазы движения, и
сгруппируем его (Modify
/ Group).
Так же поступите и с остальными
изображениями фаз движения.
|
|
Нажимая клавишу
F6,
добавьте еще 9 ключевых кадров.
Выделите
первый кадр
Удерживая клавишу
Shift, инструментом
Selection щелкните
по первой фазе движения
Нажмете
клавишу Delete
|
|
Аналогично
поступите с остальными кадрами,
оставив на каждом соответствующую
фазу движения
Измените
вид рабочего поля, добавив сетку
(Ctrl+э).
Включите эффект
Onion Skin
и совместите изображения всех кадров
в одной точке
|
|
Вернитесь на
сцену
Из
окна библиотеки перетащите созданный
символ на рабочее поле сцены
Инструментом
Selection выделите
символ и откройте панель Actions
Введите
сценарий
Запустите
файл
|
В этом сценарии
при запуске файла (onClipEvent)
увеличивается значение координаты x
точки привязки символа на 10
(this._x
+= 10) в каждом прокручиваемом
кадре(enterFrame),
т.е. 12 раз в секунду. Т.к. по умолчанию в
настройках фильма скорость равна 12
кадрам в секунду.
Так как размер
рабочего поля 550*400, то при
достижении x
отметки 550 пиксель (if
(this._x
>= 550)) значение x
устанавливается равным -100
({this._x
= -100}).
Задание
4.Создайте flash-ролик
“Кошка”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ
Поменяйте
цвет рабочего поля
Создадим
новый символ (Insert
/ New
Symbol) типа
Movie Clip
и назовем его Кошка
.
На панели Color
Mixer выберите
тип заливки Bitmap
и откройте файл кошки.jpg
(Это изображение тут же появится в
селекторе цвета заливки, а рисунок в
окне библиотеки)
Выберите
инструмент Rectangle
и нарисуйте прямоугольник размером
примерно с рабочее поле
|
|
Измените масштаб
рабочего поля на 25%
Выберите
инструмент Fill
Transform
и щелкните по нарисованному
прямоугольнику.
Перетащите
левый нижний маркер к центру так,
чтобы весь рисунок уместился в
прямоугольник.
|
|
Выберите
инструмент Lasso
в опциях которого, выберите Magic
Wand
Изменим
настройки: выберем Magic
Wand
Settings
и в поле Threshold
установите чувствительность равную
33.
|
|
Нажмете клавишу
Esc, чтобы снять
выделение рисунка
Щелкните
курсором по фону между изображениями
фаз движения кошки и нажмите клавишу
Delete.
Инструментом
Selection выделите
изображение первой фазы движения, и
сгруппируем его (Modify
/ Group).
Так же поступите и с остальными
изображениями фаз движения.
|
|
Нажимая клавишу
F6,
добавьте еще 11 ключевых кадров.
Выделите
первый кадр
Удерживая
клавишу Shift,
инструментом Selection
щелкните по первой фазе движения
Нажмете
клавишу Delete
|
|
Аналогично
поступите с остальными кадрами,
оставив на каждом соответствующую
фазу движения
Измените
вид рабочего поля, добавив сетку
(Ctrl+э).
Включите
эффект Onion
Skin
и совместите изображения всех кадров
в одной точке
|
|
Вернитесь на
сцену
Из
окна библиотеки перетащите созданный
символ на рабочее поле сцены
Выделите
символ на рабочем поле и откройте
панель Properties
В
окно Instance
name введите имя kat
Создайте
анимацию движения до 40 кадра
|
|
Добавьте еще
два слоя: «Старт» и «Стоп»
Откройте
библиотеку кнопок
Window
/ Common
Libraries
/ Buttons
Выберите
понравившиеся кнопки и перенесите
их на первые ключевые кадры слоев
«Стоп» и «Старт»
Выделите
кнопку на слое «Старт» и в
окне Actions добавьте
скрипт
|
|
Выделите кнопку
на слое «Стоп» и в окне Actions
добавьте скрипт
Выделите
40 кадр на слоях «Стоп» и «Старт»
и нажмите клавишу F5
Запустите
ролик
Сохраните
файл
|
Задание
5.Создайте flash-ролик
“Слайд-шоу”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ и
импортируйте изображения с папки
слайд_шоу на рабочее поле
(File – Import
– Import to
Stage).
Каждое
вставленное изображение, прежде чем
его удалить, преобразуйте в символ
(F8), задав
тип Button.
С
помощью вспомогательных направляющих
(View – Guides
– Lock Guides)
разбейте лист на части для последующей
вставки наших изображений.
|
|
Переименуйте
наш слой «Кнопки»
На
рабочее поле первого кадра вынесите
из библиотеки только что созданные
кнопки, так чтобы они не мешали
просмотру слайдов.
|
|
Создайте новый
слой «Слайды»
Расположите
слой «Слайды» под слоем
«Кнопки»
Клавишей
F7 вставьте
8 пустых ключевых кадров
Выделим
второй ключевой кадр и поместим в
него изображение из библиотеки.
|
|
Привяжем к этому
кадру сценарий, который бы останавливал
прокрутку кадров при просмотре в
ожидании команды пользователя.
Так
же проступим и с остальными кадрами.
|
|
Выделим первый
кадр и на него наложим тот же сценарий
Stop();
В
окне Properties
первому кадру дадим имя begin,
а последнему end.
Вернемся
на слой Кнопки и на каждую кнопку
наложим сценарий, который будет
запускать тот кадр, на котором находится
соответствующий кнопке слайд:
|
|
Из библиотеки
кнопок Window /
Common Libraries
/ Buttons перетащите
на этот же кадр еще четыре кнопки, с
помощью которых также можно будет
управлять показом слайдов:
Двойным
щелчком по первой кнопке откройте
окно редактирования кнопки
Добавьте
еще один слой и расположите его поверх
остальных
Введите
текст Begin
Вернитесь
на рабочее поле основной сцены
Также
поступите и с кнопкой End
|
|
Кнопка “Begin”
задает переход к началу просмотра. К
этой кнопке привяжем сценарий
|
|
Кнопка “End”
задает переход к последнему кадру. К
этой кнопке привяжем сценарий
|
|
Кнопка
задает
переход к следующему кадру. К этой
кнопке привяжем сценарий
|
|
Кнопка
задает
переход к предыдущему кадру. К этой
кнопке привяжем сценарий
|
|
Запустим наш
фильм для просмотра
|
Цифра в скобках
команды gotoAndStop
указывает на номер соответствующего
кадра. Если в скобках команды указывается
не цифра а имя, то переход осуществляется
на кадр с указанным именем.
Команда
_root.nextFrame();
запускает следующий кадр при
щелчке мыши on
(press)
Команда
_root.predFrame();
запускает предыдущий кадр
Задание
6.Создайте flash-ролик
“Автомобиль”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ и
назовите единственный слой «Фон»
На
первый кадр слоя «Фон»
импортируйте картинку с изображением
пейзажа File / Import
/ Import to Stageи
Используйте для этого подходящее
изображение в формате bmp, jpeg,
gif или png.
Заблокируйте
слой, нажав кнопку под изображением
замка.
|
|
Добавим новый
слой, щелкнув по кнопке
и назовем его «Авто»
Нарисуем
на слое «Авто» машинку без
колес. Не рисуем колеса потому, что
автомобиль будет совершать плавное
поступательное движение по экрану,
а колеса должны вращаться. Поэтому
их мы будем рисовать отдельно
|
|
Щелкнем по слою
«Авто» на Монтажном столе
чтобы выделить всю машинку или выделим
ее использую инструмент выделения
Selection
Преобразуем
машинку в символ, для этого выполним
команду меню Modify/Convert
to Symbol
или нажмем клавишу F8.
В окне Convert
to Symbol
введем имя Авто и выберем
Movie clip.
|
|
Зададим движение
нашего авто. Для этого выделим символ
Авто и убедившись, что находимся
на сцене откроем окно Actions.
Введем скрипт
|
|
Запустим ролик
Ctrl
+ Enter
Двойным
щелчком щелкнем по символу Авто.
Мы оказались внутри символа.
Инструментом
овал нарисуем колесо и диски, чтобы
было видно вращение колеса.
Выделим
наше колесо и преобразуем в символ
Movie clip
|
|
Наложим скрипт
на колесо
Используя
клавишу Ctrl
создадим копию колеса и перенесем ее
в то место, где оно должно быть
Вернемся
на сцену и запустим ролик.
Сохраните
файл
|
В приведенном
сценарии оператор rotation
при каждом запуске кадра onClipEvent
(enterFrame)
(12 раз в секунду) поворачивает колесо
на 15 градусов по часовой стрелке.
Задание
7.Создайте flash-ролик
“Часы с кукушкой”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ
Переименуйте
слой в «Часы»
Нарисуйте
или импортируйте на рабочее поле
рисунок с часами
Увеличьте
рисунок при необходимости
|
|
Вставьте новый
слой и назовите его «Маятник»
Нарисуйте
маятник и преобразуйте его в символ
типа Movie clip
Двойным
щелчком по символу войдите в режим
редактирования маятника
Установите
маятник в начальное положение
|
|
Сделайте 20 кадр
ключевым и установите конечное
положение маятника
Сделайте
40 кадр ключевым и установите маятник
в то же положение как и первом кадре
Из
контекстного меню на 10 кадре выберите
Greate Motion
Tween.
То
же самое сделайте для 30 фрейма
При
необходимости поправки движения
маятника создайте промежуточные
ключевые кадры
|
|
Создайте новый
слой и переименуйте его в «Тиканье
часов»
Импортируйте
в библиотеку звуковые файлы, напоминающие
тиканье часов бой часов с кукушкой
Выделите
первый кадр нового слоя. На панели
Properties нажмите
кнопку Sound. В
открывшемся списке выберите звук
тиканья часов
В
окне Sync выберите
Stream
Если
нужно отредактировать звук, откройте
окно редактирования звука: кнопка
Edit
.
Вернитесь на основную сцену
|
|
Создайте новый
слой и назовите его «Кнопка»
Создайте
кнопку: Insert
/ New
Symbol,
выберите тип
Button
Нарисуйте
изображение кнопки для каждого
состояния Up,
Over, Down
и Hit
Вернитесь
на основную сцену
|
|
Выделите кнопку
и откройте панель Actions
В
окно ввода введите сценарий
|
|
Выделите первый
кадр слоя «Кнопка» и введите
скрипт
|
|
Добавьте по 12
дублирующих кадров (клавиша F5)
на слои Маятник и Часы
Нажмите
правой кнопкой мыши по второму фрейму
слоя с кнопкой и вставьте пустой
ключевой фрейм Insert
Blank Keyframe
На
панели Properties
нажмите на кнопку Sound
и выберите звук боя часов с кукушкой,
продолжите слой до уровня остальных
Продолжите
слой до уровня остальных.
|
Задание
8.Создайте flash-ролик
“Стрелочные часики”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ
Нарисуйте
круг
откройте
окно Window /
Info в
котором задайте его размеры (W:
100; H:
100) и координаты (X:
100; Y:
100) относительно левого
верхнего края.
Инструментом
Text сделайте
надписи “12”, “3”, “6”, “9” и расставьте
их.
|
|
Нарисуйте прямую,
параллельную оси OY, и
преобразуйте ее в символ Movie
Clip с именем
“Strelka
Seconds”
Двойным
щелчком по символу войдите в режим
редактирования
На
панели Properties
задайте размеры прямой (0; 50)
и координаты (0; -50).
Выберите
тип прямой Hairline
и цвет прямой.
|
|
Вернитесь на
главную сцену
Выберите символ
“Strelka Seconds”
и задайте ему координаты (150; 100).
Определите
также его скриптовое имя ssec
(в поле Instance
Name
|
|
Откройте окно
библиотеки Library
и сделайте дубликат символа “Strelka
Seconds” с именем
“Strelka Minutes”
(правой кнопкой мыши на символ “Strelka
Seconds” / Duplicate).
Внутри
символа “Strelka
Minutes” (ПК
/ Edit)
изменим стиль линии на точечный и
укажем размер “2”
|
|
Вернитесь на
главную сцену
Перенесите
из библиотеки символ “Strelka
Minutes”
На
панели Properties
задайте ему скриптовое имя smin
и координаты (150; 100)
|
|
Нарисуйте черный
квадрат со стилем линии контура
Hairline
Поверните
его на 45 градусов.
|
|
Инструментом
Subselection щелкните
по конутру “квадрата”,
в вершинах появятся якорные точки
Выберите
мышкой нижнюю точку и удалим ее, нажав
кнопку Del
|
|
Инструментом
Selection выделите
треугольник и задайте размеры (5;
50)
Преобразуем
треугольник в символ Movie
Clip с именем
“Strelka Hours”
и зададим ему скриптовое имя shour.
Внутри
символа зададим координаты для
треугольника (-2,5; -50).
Вернемся
в главную сцену и зададим координаты
символа “Strelka
Hours” (145,5;
100)
|
|
Создайте новый
слой и разместите его выше первого
Второй
кадр преобразуйте в ключевой
|
Выберите первый
кадр и откройте окно Actions.
Поместите в него следующий скрипт
|
|
Выберите второй
кадр и откройте окно Actions.
Наберите короткий скрипт
Запустите
и сохраните ролик
|
Во многих случаях
при создании анимации необходимо
учитывать текущее время. Для этого
существует объект Date,
который представляет собой хранилище
(и одновременно) инструмент для обработки
информации о дате и времени. Он позволяет
манипулировать этой информацией как
свойствами объекта. Значения его свойств
постоянно и автоматически обновляются
через связь с внутренними часами
компьютера. Дата и время хранятся как
обычные числа, но обрабатываются
программой Flash MX
они особенным образом. Для создания
экземпляра объекта Date
применяется « конструктор »:
<переменная>
= new
Date
(год, месяц, число, часы, минуты, секунды,
миллисекунды);
Параметрами
являются свойства объекта Date.
Можно или совсем не задавать этих
параметров, или задать любое их количество.
Если параметров нет, то соответствующим
свойствам объекта присваиваются текущие
значения.
При задании
параметров для введения года нужно или
два, или четыре числа. (Если введено два
числа, то программа поймет вводимый
год, как принадлежащий 20 веку.) Месяц
вводится числом от 0 (январь) до 11
(декабрь). Число месяца задается значением
от 1 до 31. Часы задаются числом от 0 до
23. Минуты и секунды вводятся числами от
0 до 59. Миллисекунды задаются числом от
0 до 999.
Объект Date
имеет множество однотипных
методов типа getHours,
setHours,
getMonth,
setMonth,
getSeconds,
setSeconds
и так далее. Метод getTime
() , который возвращает текущее
время как количество миллисекунд,
прошедшее с начала 1970 года по универсальному
времени. Этот метод можно использовать
как таймер и применять в условных
операторах. Например, так:
myDate
= new Date ();
a
= myDate.getTyme ();
if
(a – myDate.getTime () ) > 200)
{
блок исполняемы операторов}
Этот сценарий
организует 200 миллисекундную задержку
Задание
9.Создайте flash-ролик
“Цифровые часики”.
Алгоритм
работы:
Сопровождающие
иллюстрации
|
Шаги
|
|
Создайте новый
Flash документ
Инструментом
Text нарисуйте
поле, достаточно длинное для записи
значения времени
На
панели Properties в
поле Text type
выберите тип Dynamic
Text
Задайте
координаты поля относительно верхнего
левого края (X:
0; Y: 0)
|
|
Сделайте три
копии поля и расположите их одно под
другим
В
поле Variable панели
Properties задайте
имена переменных, соответствующих
динамическим полям (сверху вниз):
Ttime, Tmonth,
Tdae и Tyear
Создайте
папку Часы и сохраните в нее
ролик
|
В папке Часы
создайте файл TimeScript.txt.
В файле должен быть следующий текст
(скрипт):
mydate
= new Date ();
sec
= mydate.getSeconds();
min
= mydate.getMinutes();
hour
= mydate.getHours();
NameMonths
= new Array ("ЯНВАРЯ",
"ФЕВРАЛЯ",
"МАРТА",
"АПРЕЛЯ",
"МАЯ",
"ИЮНЯ", "ИЮЛЯ", "АВГУСТА",
"СЕНТЯБРЯ",
"ОКТЯБРЯ",
"НОЯБРЯ", "ДЕКАБРЯ");
NameDays
= new Array ("ВОСКРЕСЕНЬЕ", "ПОНЕДЕЛЬНИК",
"ВТОРНИК",
"СРЕДА",
"ЧЕТВЕРГ", "ПЯТНИЦА",
"СУББОТА");
if
(hour<10) {
hour
= "0"+hour;
}
if
(min<10) {
min
= "0"+min;
}
if
(sec<10) {
sec
= "0"+sec;
}
Ttime
= hour+":"+min+":"+sec;
Tmonth
= mydate.getDate ()+" "+NameMonths [mydate.getMonth ()];
Tday
= NameDays [mydate.getDay ()];
Tyear
= mydate.getFullYear ()+" ГОД";
|
|
Вернитесь
в Macromedia
flash
и создайте новый слой. На первый кадр
этого слоя наложите скрипт:
|
|
Преобразуйте
второй кадр в ключевой
Наложите
следующий сценарий
Запустите
и сохраните ролик
|
49
