Использование управляющих клипов

Данный пример имеет очень важное практическое значение.

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

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

Go to and Play (2)

и сразу передаёт управление второму кадру. Таким образом, в первом кадре ролика исполняется первый кадр управляющего клипа, а во всех остальных – второй.

Рассмотрим упрощённый пример. Пусть управляющий ролик в первом кадре создаст переменную «x»=100, а потом в каждом последующем кадре будет её увеличивать на единицу.

В новом ролике создайте новый клип (Ctrl F8) и добавьте в него ещё два ключевых кадра

В первый кадр введите скрипт, устанавливающий начальное значение переменной

x = 100

Во второй кадр введите управляющий скрипт

x+=1

В третий кадр

gotoAndPlay (2)

Откомпилируйте ролик и посмотрите список переменных. Попались? J. Список то пустой!. Это любимая ошибка учащихся. Вы сделали эталон ролика, а на сцене экземпляра пока нет. Вернитесь на сцену и вызвав окно библиотеки (Ctrl L) создайте экземпляр управляющего ролика. Он будет отображён кружком. Теперь после компиляции в памяти возникает переменная, и её значение растёт.

Трёхкадровый цикл можно разместить и на основной линейке, не создавая отдельного управляющего клипа. При этом следует помнить, что первый кадр будет прорисован лишь один раз в начале проигрывания, последний не будет прорисовываться вовсе. Все изображение должны находиться во втором кадре! Рассмотрим пример. Пусть на сцене вращается стрелка секундомера. Начнём сразу с трёхкадрового цикла. Клавишей F7 добавьте в ролик ещё два ключевых кадра. Во втором кадре нарисуйте циферблат. Добавьте ещё слой и нарисуйте в его втором кадре стрелку, преобразовав её в экземпляр. Присвойте экземпляру имя «ar». Для того, что бы стрелка вращалась не вокруг своего геометрического центра, а вокруг центра циферблата в меню «Modify» выберите «Edit Center» и переместите центр экземпляра в центр циферблата. Теперь возьмёмся за программирование. Третьему кадру присвойте стандартный скрипт

GotoAndPlay(2)

Во второй кадр вставьте скрипт, увеличивающий угол поворота

ar._rotation+=1;

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

Итак, за 360 кадров стрелка делает полный оборот. Что бы она вращалась со скоростью секундной стрелки, ролик должен проирываться со скоростью 360/60=60 кадров в секунду. Установите это значение в диалоге «Modify» «Movie». Можно установить и скорость кадр в секунду, но тогда стрелка должна поворачиваться на 6 градусов.

Сделайте секундомеру кнопку, которая при первом нажатии остановит стрелку, при втором вернёт её в исходное положение, а при третьем опять будет запускать секундомер.

Для остановки секундомера необходимо остановить трёхкадровый цикл. Для сброса показаний – установить стрелке угол поворота равный нулю. Для запуска – возобновить проигрывание трёхкадрового цикла. Так как все эти команды в реальном секундомере даёт одна и та же кнопка, то придётся реализовать её в виде триггера. Нарисуйте изображение кнопки и преобразуйте её в экземпляр Movie Clip. Войдите в редактирование клипа и преобразуйте изображение в кнопку. Добавьте ещё два ключевых кадра (F6) и присвойте кадрам команды stop(). Кнопки должны выполнять соответствующие команды а также запускать воспроизведение собственного клипа. Скрипты всех трёх кнопок приведены в таблице.

on (release){ _root.stop(); play() }

on (release){ root.ar._rotation=0; play() }

on (release){ _root.play(); play() }

 

 

Упражнение

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

Скрипт первого кадра

ball._alpha=0

т.е. в начале экземпляр абсолютно прозрачен

Скрипт второго кадра

ball._alpha+= 1

 

14. Назначение скрипта клипу, или долой трёхкадровые циклы!

Это действительно серьёзное нововведение! Скрипт теперь можно назначить не только кадру или кнопке, но ещё и клипу. Появилась и команда OnClipEvent по аналогии с On для кнопок. Скрипт кнопки является обработчиком событий всегда находится в контейнере on(событие) {скрипт}и исполняется когда соответствующее событие происходит. Аналогично, скрипт клипа так же находится в контейнере onClipEvent(событие) {скриипт}.

В новом ролике создайте экземпляр клипа и щёлкнув на нём правой кнопкой мыши выберите «Actions». Переключитесь в Normal Mode. Выберите отладочную команду trace, введите любой текст или число в качестве её аргумента. Теперь, если событие произойдёт, в окне Output появится введённый Вами текст. Подсветите строку с командой onClipEvent и в нижней части диалога появится список возможных аргументов. Вот его описание

load Инициализация команд в момент появления клипа.

unload Инициализация команд в первом кадре в момент удаления клипа. Команды, связанные с событием Unload, обрабатываются прежде любых команд прописанных в кадре.

enterFrame Инициализация команд в каждом воспроизводимом кадре, так, как если бы они были прописаны в каждом кадре клипа. Команды, связанные с событием OnEnterFrame, обрабатываются после любых команд прописанных в кадрах.

mouseMove Инициализация команд при каждом перемещении мыши.

mouseDown Инициализация команд при нажатии левой кнопки мыши.

mouseUp Инициализация команд при отпускании левой кнопки мыши.

keyDown Инициализация команд при нажатии клавиши клавиатуры.

keyUp Инициализация команд при отпускании клавиши клавиатуры.

data Инициализация команд при получении данных в командах loadVariables или loadMovie. Когда это связано с командой loadVariables, событие data происходит только один раз в момент окончания загрузки последней переменной. При использовании команды loadMovie, событие data может быть многократным, по мере подхода новых данных.

Так при чём же здесь трёхкадровые циклы? Напомню их назначение. Для создания программной анимации необходимо что бы в каждом кадре ролика исполнялся некий управляющий скрипт. При этом необходимо что бы перед началом воспроизведения исполнился бы скрипт, задающий начальные условия. Эту задачу и решают трёхкадровые циклы. Структура трёхкадрового цикла выглядит следующим образом

Скрипт, задающий начальные условия. Исполняется один раз.

Основной управляющий скрипт. Исполняется в каждом кадре кроме первого

gotoAndPlay (2); Данный кадр никогда не прорисовывается так как содержит переход на основной

 

Скрипт, задающий начальные условия теперь можно связать с событием load, а основной упраляющий скрипт – с событием enterFrame. И вовсе не нужно теперь создавать пустые управляющие клипы и делать, по сути, бесполезный третий кадр. Рассмотрим простейший пример. Пусть необходимо что бы переменная x в каждом кадре ролика увеличивалась на единицу от начального значения 100. Используя трёхкадровый цикл можно записать

x=100;.

X+=1;

gotoAndPlay (2);

 

Для использования новой технологии необходимо создать на сцене экземпляр клипа, подсветить его и в редакторе скрипта ввести

onClipEvent (load) {

x = 100;

}

onClipEvent (enterFrame) {

x += 1;

}

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

/:x или _root.x

 

Функция Call

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

В первом кадре ролика нарисуйте любое изображение и добавьте скрипт

Call (2)

Stop

Добавьте ещё один ключевой кадр, нарисуйте в нём другое изображение и добавьте скрипт

Set Variable: "x" = 1

Откомпилируйте ролик. На экране появится только изображение кадра. Скрипт второго кадра был исполнен. Это можно проверить, посмотрев список переменных. Функция call,была предшественницей пользовательских функций. В современных роликах её практически не встретишь.

Динамические текстовые поля

Служат для обмена данными между роликом и пользователем. Идея очень проста. Каждому динамическому полю ставится в соответствие переменная. Значение переменной выводится в поле. Если пользователь сам вводит текст в поле, меняется и значение переменной.

Для создания динамического текстового активизируйте панель «Text Options». В раскрывающемся списке кроме «Static Text» - (обычная текстовая надпись) доступны значения «Dynamic text» и «Input text». В предыдущей версии было всего 2 варианта, а потому все не статические текстовые поля флэшеры по привычке называют динамическими. Текстовое поле типа «Dynamic text» может изменять своё содержимое под действием скрипта, но не доступно для редактирования пользователем. Поле типа «Input text» работает в обе стороны, т.е. и скрипт и пользователь могут изменять его содержимое. Установив значение «Input Text»,выберите инструмент , и нарисуйте прямоугольник поля на сцене (желательно предварительно активизировать Border/Bg). Для назначения текстовому полю переменной заполните поле Variable на панели Text Options.

В первый кадр ролика введите скрипт t = 12345 и откомпилируйте ролик.

В текстовом поле отобразится значение переменной. Поместите курсор в текстовое поле. Введите любой текст. Посмотрите список переменных. Значение переменной t изменилось. Вот и вся наука! Дело за тонкостями.

Для динамических полей на панели Text Options доступен ряд настроек

Single Line – однострочное текстовое поле

Multiline – многострочное, с автоматическим переносом строк при включенном Word Wrap. Password – текст отображается в виде звёздочек.

HTML – Если в выводимом тексте присутствуют теги HTML, то они интерпретируются, иначе – ваводятся как и прочий текст

Flash способен интерпретировать следующие теги

<A> <B> <I> <U> <P> <FONT>

измените скрипт кадра на

t="text <B><I><U>text </U></I></B> <font size='+30' color='#FF0000'> text</font><br>123"

для переноса строки в динамическом поле лучше использовать \n

t=”first \n second”

Можно, конечно использовать и зарезервированную переменную newline. Обратите внимание, что в данном случае приходится выполнять объединение текстов.

t = "a" + newline + "b"

Если потребуется кавычка, то перед ней следует ввести \

кавычка \”

t="тут\"кавычка"

Увы, буква «я» неправильно интерпретируется компилятором и её приходится заменять функцией, возвращающей символ по его коду chr(номер) chr(255) возвращаяет символ «я». (функция обратно возвращающая код по символу Ord (символ), например, Ord(щ) вернёт значение 249)

t=”маленька”+chr(255)+” неточность”;

Без объединения текстов, похоже здесь не обойтись.

Border/Bg у текстового поля прорисовывается граница и фон.

Max Chars – ограничение на количество вводимых символов

Embed fonts - внедрение шрифта в состав ролика

(Если теги используются и шрифт внедрён то почему то не работает??)

Последняя опция значительно увеличивает размер ролика, но необходима для надёжной прорисовки. Для сравнения – ролик без шрифта занимал 580 байт а со шрифтом - 26k

Перекосите динамическое текстовое поле кнопкой поворот. После компиляции текст перестал отображаться. Кнопка […] внедрит весь шрифт в состав ролика. Вожмите её и опять откомпилируйте ролик. Обратите внимание, что внедрить можно не все символы шрифта, а только, например буквы, или цифры. Увы, для отображения русских букв придётся либо внедрить весь шрифт, либо перечислить алфавит в нижнем правом текстовом поле.

 

Генерация случайных чисел.

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

Случайные числа генерируются функцией Random(значение). Случайные числа целые и лежат в диапазоне от нуля до указанного значения, не включая последнего. Например, функция Random(10) создаёт целое случайное число в диапазоне от 0 до 9.

Создайте в предыдущем ролике экземпляр кнопки и введите в него скрипт

t = random (10)

Откомпилируйте ролик и убедитесь, что после нажатия на кнопку в текстовом поле возникает новое случайное число.

Для того что бы в текстовом поле возникало случайное число в диапазоне от 50 до 150 скрипт должен иметь вид

t = 50+random (101)

Упражнение

Создайте ролик, в котором кнопка будет рисовать на экране клип в случайной позиции.

Скрипт кнопки должен иметь вид

on (release){

ball._x = random (550)

ball_y = random (400)

}

В данном случае 550 и 400 – размеры ролика.

Самостоятельно добавьте случайное изменение прозрачности и масштаба с сохранением пропорций.

Округление чисел

Округление производится функцией Int(число). Функция не округляет, в обычном смысле, а лишь отбрасывает дробную часть.

Введите в кадр ролика скрипт

x = 1.9

y = int (x)

Посмотрев список переменных после компиляции, убедитесь, что y=1

Отслеживание времени.

Производится функцией getTimer. Функция возвращает время проигрывания ролика в миллисекундах.

Создайте в ролике динамическое текстовое поле с переменной «t» и кнопку со скриптом

on (release){

t = getTimer()

}

Откомпилируйте ролик. Используя склейку и округление, можно несколько модифицировать пример

on (release){

t = "Вы здесь уже " + int(getTimer/1000) + " секунд"

}

Правда, остались проблемы с падежом слова секунд.

Упражнение

Сделать ролик, в котором время в текстовом поле будет отображаться автоматически.

 

Трассировка

Trace (значение) Очень простая функция. Выводит в окно «Output» свой аргумент (то, что у неё в скобках)

В скобках может быть текст или имя переменной

Что будет на экране после исполнения скрипта?

Trace ("ок")

ok = 1

Trace (ok)

Выведет «a» и «b» в разных строках.

 

Цикл

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

for(начальное значение переменной; условие выполнения цикла; операция над переменной){тело цикла}.

Например, если кадру ролика присвоить скрипт

for(i=0; i<=10; i++) {

trace(i);

}

то в окне Output после компиляции появятся числа от 0 до 10.

Если теперь посмотреть список переменных, то можно увидеть, что переменная i=11

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

for(i=0; i<=10; i++) {

t=i;

// t – переменная соответствующая динамическому текстовому полю

}

не даст желаемого результата. В текстовом поле появится лишь 10, т.е последнее значение t после исполнения скрипта кадра. Для решения данной задачи придётся использовать объединение текстовых строк.

for(i=0; i<=10; i++) {

t=t+i+newline;

// t – переменная соответствующая динамическому текстовому полю

}

Другой цикл имеет синтаксис

do {

тело цикла;

} while (услови);

тело цикла продолжает выполняться пока условие истинно. Проверка условия производится после каждого выполнения тела цикла. Поэтому, даже если условие заведомо ложно, тело цикла один раз исполнится

Аналогично устроен цикл

while(условие) {

тело цикла;

}

Разница состоит в том, что сначала проверяется истинность условия, и если оно истинно тело цикла выполняется. При ложном условии тело цикла не будет выполнено ни разу.

do {

trace("первый")

} while (false);

 

while(false){

trace("второй")

}

Циклы с while можно, например применять для создания паузы.

Создайте на сцене произвольную анимацию, например клип со скриптом

onClipEvent(enterFrame){

_x++}

и кнопку со скриптом

on(release){

time=getTimer();

while(getTimer()-time<5000){}

}

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

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

 

For(;;){ Тело цикла }

do{ тело цикла }while(1)

while(1){ тело цикла }

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

i = 0;

while (1) {

if (i > 100) {

break;

}

i++;

}

 

Цикл может быть использован и для генерации множества переменных. Предположим, необходимо создать 10 переменных с именами y1, y2,…y10 и значениями 1,2,…10

Для этого достаточно, лишь, модифицировать предыдущий скрипт

for (i=1;i<=10;i++){

Eval(“y"+i) = i

}

 

Упражнение

Создайте в памяти 100 переменных с именами

x_1_1, x_1_2, x_1_3,…x_1_10

x_2_1, x_2_2, x_2_3,…x_2_10

x_10_1, x_10_2, x_10_3,…x_10_10

Измерение длинны строки

Осуществляется оператором length(строка)

Исполните скрипт

x = "abcdefg"

y = length (x)

Переменная «y» получила значение 7