Динамическое управление фильмами-символами

Применение attachmovie()

Метод attachMovie() создает новый экземпляр фильма-символа из библиотеки. В этом упражнении мы с вами создадим проект, при запуске которого на сцене будет отображаться прокручиваемый список. Элементы этого списка будут создаваться посредством динамического присоединения экземпляров клипа.

1. Откройте файл scrollingList1.fla из папки Lesson14/Assets.

На основном монтажном столе мы видим три слоя: Actions, Window и Background. Слой Background содержит общее графическое оформление проекта; в слой Actions мы поместим большинство скриптов; а в слое Window находится экземпляр фильма-символа под названием display.

Внутри монтажного стола display вы найдете четыре слоя: Mask, Fields, Scroll Buttons и Window Graphics. В слое Window Graphics содержатся рамка и фон окна, слой Scroll Buttons содержит экземпляр фильма-символа, в котором находятся кнопки прокрутки окна вверх и вниз (ими мы займемся в следующем упражнении), а в слое Fields находится пустой экземпляр клипа под названием list, к которому мы будем присоединять экземпляры, создавая их при помощи attachMovie(). Эти присоединенные экземпляры станут элементами списка, располагаясь один под другим. Список (экземпляр клипа list ), будучи наполнен присоединенными к нему экземплярами, станет довольно-таки длинным. Поэтому мы маскируем list прямоугольником, находящимся в слое Mask, так что видимой будет только часть клипа list, находящаяся "внутри" окна.

2. Откройте библиотеку и найдите в ней фильм-символ под названием list info bar. Щелкните на нем правой кнопкой мыши (или Control-щелчок на Macintosh) и выберите в появившемся меню пункт Связи (Linkage). В открывшемся диалоговом окне Свойства связи (Linkage Properties) установите флажок Экспорт для ActionScript (Export for ActionScript) и введите infoBar в поле Название (Identifier).

Теперь этот клип готов к использованию методом attachMovie().

Для каждой строки в прокручиваемом списке к экземпляру list будет присоединяться один экземпляр клипа infoBar (16 строк, 16 присоединений). Внутри каждого из присоединенных клипов будет два динамических текстовых поля – moonName и moonNum; в этих полях будут отображаться названия лун Юпитера и соответствующие номера.

3. Выделите кадр 1 слоя Actions на основном монтажном столе. Откройте панель Действия и введите следующий скрипт:

list = ["Adrastea", "Amalthea", "Ananke", "Callisto", "Carme", "Elara", 
"Europa", "Ganymede", "Himalia", "Io", "Leda", "Lysithea", 
"Metis", "Pasiphae", "Sinope", "Thebe"];

Цель этого упражнения – создать список, элементами которого будут присоединенные экземпляры фильма-символа. Для этого мы прежде всего создаем массив из названий 16 наиболее известных лун Юпитера. Для каждой луны из этого массива к экземпляру list мы должны присоединить экземпляр клипа из библиотеки.

Теперь нужно описать функцию, которая и будет создавать список из экземпляров клипа.

4. По-прежнему при выделенном кадре 1 добавьте к скрипту следующее:

function buildList() {
  spacing = 30;
}

В конечном итоге функция buildList() будет содержать все действия, необходимые для присоединения, позиционирования и заполнения информацией элементов списка – экземпляров клипа. Для правильного и равномерного размещения элементов списка по вертикали мы создаем переменную spacing и присваиваем ей значение 30 – эта переменная будет определять дистанцию по вертикали (y) между центрами присоединенных экземпляров клипа.

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

var i = -1;
while (++i < list.length) {
  name = "infoBar" + i;
  y = i * spacing;
  display.list.attachMovie("infoBar", name, i);
  display.list[name]._y = y;
  display.list[name].moonName.text = list[i];
  display.list[name].moonNum.text = i + 1;
}

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

Первым действием в теле цикла создается переменная name, значение которой задается выражением, которое присоединяет к строке "infoBar" текущее значение i. Поскольку значение i при каждом проходе цикла увеличивается на единицу, name будет принимать значения "infoBar0", "infoBar1", "infoBar2" и так далее. Далее в теле цикла значение name будет использовано для присвоения имени каждому успешно присоединенному экземпляру клипа infoBar. А пока в цикле создается переменная y, которая будет хранить y-координату присоединяемого в данный момент экземпляра. Значение этой переменной вычисляется умножением текущего значения i на значение spacing. Поскольку значение i при каждой итерации увеличивается, то же будет происходить и со значением y. В результате присоединенные экземпляры будут располагаться друг под другом.

Последние четыре действия в теле цикла присоединяют экземпляры, позиционируют их и заполняют информацией динамические поля в каждом присоединенном экземпляре. Первым делом создается (присоединяется) новый экземпляр клипа infoBar, имя и глубина которого содержатся в переменных name и i, соответственно. Далее этот присоединенный экземпляр получает y-координату, равную значению переменной y. Каждый из присоединяемых экземпляров содержит те же элементы, что и оригинал, а значит, в каждом имеется два текстовых поля: moonName и moonNum. Последние два действия в теле цикла заполняют эти поля соответствующей информацией. Во-первых, в поле moonName присоединенного экземпляра помещается строковое значение (название луны) – i-й элемент массива list. В текстовое поле moonNum каждого экземпляра помещается числовое значение i плюс 1. Таким образом, в этом текстовом поле для соответствующих экземпляров будут выводиться значения 1, 2, 3 и так далее.

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

6. В самый конец текущего скрипта в кадре 1 (после описания функции) добавьте вызов функции – действие buildList();.

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

7. Командой Управление > Проверить фильм (Control > Test Movie) запустите тест только что созданного проекта.

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

8. Закройте тестовый фильм и сохраните свою работу как scrollingList2.fla.

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