Основы технологии drag-and-drop во Flash

Перетаскивание flash-символов (drag-and-drop)

Очень распространенный способ взаимодействия с интерактивной  средой - метод drag-and-drop во всю используемый современными операционными системами. Технология заключается в перетаскивание объектов с помощью курсора мыши. В этом уроке я расскажу, как его организовать во флэш, а так же изменение на его основе курсора мыши.

Перетаскивание  объектов

В языке сценариев Action Script предусмотрены операторы startDrag( ) и stopDrag( ), выполняющие начало перетаскивания объекта и конец. Самая распространенная схема использования технологии drag-and-drop - схема, когда при нажатии клавиши мыши на объекте перетаскивание начинается, а при отпускании оканчивается. Для отслеживания нажатия и отпускания клавиши советую перетаскиваемый символ сделать кнопкой.

Пример…

Выделите изображение, которое в последствии желаете видеть перетаскиваемым и создайте из него кнопку (F8/button). И напишите в сценарии кнопки код (не забудьте переключиться на режим ввода /expert mode):

on (press) { // если кнопка мыши нажата на данном объекте

startDrag (this); // начало перетаскивания

}

on (release) { // если кнопка мыши отпущена на данном объекте

stopDrag (); // конец перетаскивания

}

И поместите в ролик (Movie clip)

Просмотрите ролик (Ctrl+Enter).

Аргументы оператора startDrag ( )

startDrag(target,[lock ,left ,top ,right , bottom]) ;

Обратите внимание на оператор target он указывает объект, который, по вашему мнению “нуждается” в перетаскивании (в нашем примере это this, текущий объект).

Операторы, находящиеся  в примере в квадратных скобках  не обязательны (при использовании  операторы квадратные скобки не пишутся).

Lock по умолчанию имеет значение false, если его значение равно true, то в момент начала перетаскивания объект приклеивается центром к указателю мыши.

Left ограничивает область перетаскивания по левому краю.

top ограничивает область перетаскивания по верхнему краю.

right ограничивает область перетаскивания по правому краю.

bottom ограничивает область перетаскивания по нижнему краю.

Изменение курсора  мыши

Создайте новый  ролик и поместите в нем внутренний ролик (Movie clip). Ролик должен выглядеть так, как вы хотите, чтобы выглядел новый курсор (этот ролик заменит старый курсор). Теперь в панели Properties в поле instance name укажите нравящееся вам имя (например, cursor). В первый кадр анимации поместите следующий код:

Mouse.hide (); // Делает настоящий курсор мыши невидимым

startDrag (/*имя ролика с новым курсором (в моем случае cursor)*/”cursor”,true);

Просмотрите ролик…

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

 

Программирование  во Flash

Для придания интерактивности  роликам, Flash имеет внутренний язык сценариев Action Script. Это мощный и гибкий инструмент, синтаксически основанный на c++ (для тех из вас кто уже имеет опыт работы с "с-подобными" языками его освоение не составит никакого труда).

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

Сценарий кадра 

Для написания сценария кадра выберите нужный кадр и разверните панель Actions - Frame (обычно она расположена в низу над панелью Properties). Здесь указывается код сценария выполняемого при воспроизведении выбранного кадра.

Приведем пример…

Создайте анимацию движения. Теперь воспроизведите ролик (Ctrl+Enter). Как вы можете наблюдать анимация зациклена. Теперь сделаем так, чтобы анимация останавливалась в последнем кадре. Для этого выберите последний кадр и в меню Actions - Frame напишем:

stop();

Это наипростейший  пример сценария кадра. Обратите внимание на то, что кадры имеющие в себе сценарий обозначены буковкой a ( ).

Сценарий Flash-символа 

Для написания сценария Flash-символа выберите курсором нужный экземпляр и разверните панель Actions. Здесь указывается код сценария выполняемого при взаимодействии курсора на этот экземпляр. Такое взаимодействие (определяется оператором on) бывает следующих типов:

• release - произошло нажатие и отпускание кнопки мыши;
• press - произошло нажатие кнопки мыши;
• releaseOutside - произошло нажатие кнопки мыши на объекте, курсор уведен с объекта и кнопка отпущена;
• rollOver - курсор наведен на объект;
• rollOut - курсор уведен с объекта;
• dragOver - произошло нажатие кнопки мыши на объекте, курсор уведен с объекта и наведен обратно;
• dragOut - произошло нажатие кнопки мыши на объекте, курсор уведен с объекта;
• keyPress - нажата клавиша на клавиатуре.

Приведем пример…

Создайте кнопку. Теперь сделаем так, чтобы при  нажатии на нее писалось "Hello World". Для этого выберите последний кадр и в меню Actions - Button напишем:

on (release) {

trace ("Hello World");

}

Здесь использован  оператор trace (). Он используется в основном для отладки сценариев и выводит данные, указанные в его параметре. Теперь воспроизведите ролик (Ctrl+Enter).

Для большей наглядности  приведу еще пример…

Создайте новый  ролик. В нем анимацию движения, а на другом слое две кнопки stop и play. Сделайте так, чтобы в слое с кнопками было столько же кадров, сколько в слое с анимацией движения. Теперь в кнопку play разместите следующий код:

on (release) {

play ();

}

А в кнопку стоп:

on (release) {

stop ();

}

Теперь воспроизведите ролик и попробуйте кнопки в действии. Поэкспериментируйте…

Операторы воспроизведения 

play (); // Оператор воспроизведения ролика после остановки

stop (); // Остановка воспроизведения

gotoAndPlay (кадр); /* безусловный переход на указанный кадр и воспроизведение*/

gotoAndStop (кадр); /* безусловный переход на указанный кадр и остановка воспроизведение*/

В операторах gotoAndStop () и gotoAndPlay () в качестве параметра указывается номер кадра либо его метку в кавычках (назначить метку для кадра, можно выбрав его, развернув панель Properties и заполнив поле Frame Label). Дополнительным и необязательным параметром в этих функциях является параметр, указывающий сцену (например, gotoAndPlay ("Scene 1", 3);).

nextScene (); // Переход к следующей сцене

prevScene (); // Переход к предыдущей сцене

nextFrame (); // Переход к следующему кадру

prevFrame (); // Переход к предыдущему кадру

Оператор открытия страницы

getURL (URL, target, metod); // аналог тега "a" в html (параметры target и metod (по умолчанию GET) не обязательны).

Переменные 

Переменные в Action Script не отличаются от переменных большинства языков программирования. Указывать тип переменной и заранее ее определять здесь не обязательно. По умолчанию любая переменная равна 0 а тип переменной зависит от ее содержания. Для большего понимания как себя ведут переменные, приведем пару примеров…

Создайте новый  ролик и в первом кадре укажите  следующий код:

a = "text";

b = 7;

c = 7 + 3;

d = "7 + 3";

e = a + " number " + 7;

f = c + b;

Запустите просмотр и нажмите Ctrl+Alt+V. Эта команда выводит листинг всех переменных ролика (незаменимая вещь в процессе отладки). У вас должно получится нечто подобное:

Level #0:

Variable _level0.$version = "WIN 6,0,21,0"

Variable _level0.a = "text"

Variable _level0.b = 7

Variable _level0.c = 10

Variable _level0.d = "7 + 3"

Variable _level0.e = "text number 7"

Variable _level0.f = 17

Проанализируйте получившиеся результаты…

Арифметические  операции

Ну, думаю здесь  особо пояснять нечего…

• "+" - сложение;
• "-" - вычитание;
• "*" - умножение;
• "/" - деление;
• "%" - вычисление остатка от деления;

Инкрементирование

Инкрементирование в Action Script имеет простую запись "переменная++", а декрементирование "переменная--".

Например:

i = 10;

i++;

trace (i);

Результатом будет  вывод на экран числа i (равного 10 увеличенного на 1, т.е. 11). При "i--;" значение i уменьшилось бы на 1.

Булева алгебра 

• && - логическое И;
• || - логическое ИЛИ;
• ! - логическое НЕ;

Операции сравнения

• > - больше;
• < - меньше;
• >= - больше или равно;
• <= - меньше или равно;
• == - равно;
• != - не равно.

Составные операции

• += - сложение с присваиванием;
• -= - вычитание с присваиванием;
• *= - умножение с присваиванием;
• /= - деление с присваиванием;
• %= - остаток от деления с присваиванием;

Например:

i+=3;

все ровно что i=i+3;

Условный оператор

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

i = "true";

if (i == "true") {

trace ("hello");

}

В этом случае будет  выведено сообщение "hello". Но если i не было бы равно "true" нечего бы не произошло.

Дополняющий оператор else позволяет указать сценарий поведения, если условие не выполняется. Например:

if (t<=5 && !u) {

trace ("true");

} else {

trace ("false");

}

В этом случае если переменная t меньше или равна 5 и в тоже время переменная u не существует или ровна 0 будет выведена надпись "true". В противном случае надпись "false".

Дополнительный  оператор else if позволяет указать сценарий поведения, если условие не выполняется, при другом условии. Например:

if (t<=5 && !u) {

trace ("true");

} else if (u>t || !t) {

trace (u);

} else {

trace ("false");

}

В этом случае если переменная t меньше или равна 5 и в тоже время переменная u не существует или ровна 0 будет выведена надпись "true". В противном случае если t меньше u или t не существует или равно 0 будет выведено на экран значение переменной u. В противном случае надпись "false".

Операторы цикла 

Иногда возникает  потребность выполнять в сценарии одно действии многократно. Например, представим что нам нужно 10 раз выполнить trace ("hello"); конечно можно просто десять раз подряд написать эту команду, но если нужно 1000 или неизвестное вам число (вычисляемое программой) такой подход не годится. Тут нам помогают циклы. Самый простой for.

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

trace ("hello");

}

Здесь в качестве счетчика цикла используется переменная i. С начало ей присваивается значение 0 и на каждом шаге цикла переменная увеличивается на 1. Так происходит пока i меньше или равна 10. Как вы уже догадались, в циклах для задания условий цикла вовсю используются составные и операции сравнения. Поэтому цикл, может выглядеть например так for (n=70;n>=0;n--) или так for (b=887; b!=70;b-=3).

Массивы данных

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