Список отображения — это система, с помощью которой объекты отображаются на экране, используя ActionScript 3.0. Это одна из основных концепций, которую следует изучить, если вы хотите создавать что-то визуальное при помощи ActionScript. В данном уроке будут рассмотрены основные понятия, связанные со списком отображения (Display list), а также изучен API списка отображения (Display list).

Что же такое список отображения?

Список отображения (Display list) — это список, который содержит все видимое содержимое во Flash, и используется для управления теми объектами, которые могут появляться на экране, на том уровне (глубине), на котором они помещаются друг над другом.

Основное использование списка отображения

Основное назначение списка отображения — это отображение объектов на экране и удаление объектов с экрана. Две эти задачи требуют использования методов addChild() и removeChild().

Чтобы отобразить объект на экране вам необходимо использовать метод addChild(). Вот простой пример, как это сделать:

[code language=»actionscript3″]
var myText:TextField = new TextField();
myText.text = "Hello!";
addChild(myText);
[/code]

С другой стороны, чтобы удалить объект с экрана, вам нужно использовать метод removeChild(). Чтобы удалить любой объект с основной временной шкалы, нужно просто удалить его вот так:

[code language=»actionscript3″]
removeChild(myObject);
[/code]

Иерархия в списке отображения (Display list)

Объекты, находящиеся в списке отображения помещаются в соответствии с иерархией. Если вы добавляете более одного объекта в список отображения, используя метод addChild(), то вы заметите, что объекты, которые вы добавляли позже, будут размещены выше предыдущих (практически перекрывая их).

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

[code language=»actionscript3″]
var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape()

addChild(myTriangle);
addChild(myCircle);
addChild(myStar);
[/code]

Примечание. Классы TriangleShape, CircleShape, и StarShape — вымышленные классы, их нет в ActionScript 3.0. Тем не менее, вы можете создать их сами, определив в библиотеке.

Код, описанный выше, приведет к тому, что объекты будут размещены друг над другом.

Логика, при которой данные объекты размещаются, проста — объекты, добавленные позже в список отображения, будут помещены выше объектов, добавленных ранее.

Позиция, на которой объект отображается в списке отображения, называется индекс. Индекс, на котором объекты размещены в списке, начинается с нуля, поэтому первый объект размещается в позиции нуля, второй в позиции единицы, а третий в позиции двойки, и т.д. Существует возможность манипулировать позицией, начиная с которой, объекты располагаются друг над другом, указывая конкретный индекс, на который помещается объект, используя метод addChildAt().

Использование метода addChildAt()

В отличие от метода addChild(), метод addChildAt() требует указания двух параметров, первый — имя экземпляра объекта, который вы желаете добавить в список, и второй — позиция индекса, на которую вы хотите поместить его. Данный метод используется в формате обобщенного кода ниже:

[code language=»actionscript3″]
addChildAt(myObject,indexNumber)
[/code]

Например, вы хотите добавить треугольник и окружность первыми, а потом добавить звезду, но хотите убедиться в том, что объект звезда помещается позади треугольника и окружности, а не над ними, вы можете сделать это, используя метод addChildAt().

Мы начнем с добавления треугольника и окружности в список отображения, сделаем это при помощи кода ниже:

[code language=»actionscript3″]
var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape()

addChild(myTriangle);
addChild(myCircle);
[/code]

Вышеуказанный код создаст треугольник и окружность, треугольник будет на позиции «0» , а окружность на позиции «1».

Если мы хотим, чтобы звезда была помещена ниже всех объектов, тогда необходимо разместить ее на индексе ноль. Сделать это можно вот так:

[code language=»actionscript3″]
var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape()

addChild(myTriangle);
addChild(myCircle);
addChildAt(myStar,0);
[/code]

Данный код поместит звезду позади все текущих объектов. Следует отметить, что происходит «проталкивание» всех других объектов на индекс выше «1» до размещения объекта звезды, поэтому треугольник теперь будет с индексом «1», а окружность с индексом «2».

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

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

Удаление объектов при помощи метода removeChildAt()

В дополнение к возможности добавления объектов напрямую по индексу, возможно также удаление объектов со ссылкой на позицию. Если, например, вы хотите удалить объект с индексом «1» , то вы можете сделать это, используя код, приведенный ниже:

[code language=»actionscript3″]
var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape()

addChild(myTriangle);
addChild(myCircle);
addChild(myStar);

removeChildAt(1);
[/code]

Следует отметить, что в этом коде будет уменьшен индекс всех объектов, которые были размещены выше индекса «1», поэтому не будет пустых слотов. Это означает, что объект звезда теперь будет находиться на позиции индекса «1» , а не на позиции индекса «2».

Обмен позиций индексов

В дополнение к возможности позиционирования объекта в определенной позиции в списке отображения методом addChildAt(), вы также можете поменять местами позицию с другим объектом при помощи метода swapChildren(). Данный метод просто переключает позицию индекса двух объектов сразу без воздействия на какой-либо другой объект в списке.

[code language=»actionscript3″]
var myTriangle:TriangleShape = new TriangleShape();
var myCircle:CircleShape = new CircleShape();
var myStar:StarShape = new StarShape()

addChild(myTriangle);
addChild(myCircle);
addChild(myStar);

swapChildren(myStar, myCircle);
[/code]

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

Другие методы списка отображения

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

1. getChildIndex(objectName) — этот метод используется для получения позиции индекса экранного объекта, ссылаясь на него по имени экземпляра.
2. getChildAt(indexPosition) — данный метод используется для получения имени экземпляра объекта, ссылаясь на его позицию индекса.
3. numChildren — это свойство, обратиться к которому можно в любом экранном объекте-контейнере, чтобы получить текущее количество объектов, находящихся в его списке отображения.

Экранные объекты и контейнеры экранных объектов

Важно понимать, что только экранные объекты могут быть добавлены в список отображения. Это такие объекты как MovieClip, Sprite, TextField, Video, Bitmap и т.д. Вы не можете добавить невизуальные объекты в список, например, числовые переменные.

С другой стороны, существуют некоторые другие экранные объекты, которые к тому же являются и контейнерами экранных объектов. Это объекты, которые имеют свой собственный список отображения, в который могут быть добавлены другие объекты. Например, это объекты классов MovieClip и Sprite.

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

[code language=»actionscript3″]
var container_mc:MovieClip = new MovieClip();
var text1_txt:TextField = new TextField();
var text2_txt:TextField = new TextField();

container_mc.addChild(text1_txt);
container_mc.addChild(text2_txt);

text1_txt.text = "This text field will not appear on the
screen";
text2_txt.text = "Except if we add its container to the
main timeline display list";

addChild(container_mc);
[/code]

Этот урок был введением в основы использования концепции списка отображения в ActionScript. Пожалуйста, не стесняйтесь задавать вопросы в комментариях и если статья понравилась — поделитесь ее в социальных сетях (значки ниже).