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

Шаги:

1. В исходных файлах откройте файл RandomTreesWithArrangement.fla из директории DisplayObjects. Этот файл состоит из одного пустого слоя, названного ActionScript и двух объектов в библиотеке, символа дерева типа movie clip и рисунка tree.png.

Рисунок: Дерево как объект movie clip и bitmap

Чтобы иметь возможность динамически создавать объекты в библиотеке с помощью ActionScript 3, вам потребуется настроить опции связи и написать уникальное имя класса, через которое будет происходить обращение к объектам.

2. Щелкните правой кнопкой мыши (на компьютере Mac щелкните Command) по символу дерева типа movie clip в библиотеке.

3. В появившемся меню выберите Linkage...

Рисунок: Установка свойств связи из библиотеки

4. В диалоге Linkage выберите пункт Export for ActionScript.
5. В качестве имени класса укажите Tree
6. Повторите эти шаги для рисунка tree.png, только в качестве имени класса укажите TreeImageData. Обратите внимание, что класс BitmapData является базовым классом для рисунка, в то время как для клипа это был класс MovieClip.

Рисунок: Имя класса для tree.png

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

7. Выберите первый кадр на слое ActionScript и откройте панель Actions.
8. Добавьте следующий скрипт на панель Actions.

// The number of trees to generate
var treeCount:int = 20;

Далее мы можем определить функцию для генерирования деревьев. В основном будем полагаться на функцию Math.random()
А. для определения того, какая версия дерева создана – клип или рисунок,
Б. и где она размещена на экране (x и y координаты).

Для создания и размещения деревьев будет использоваться цикл на основе значения переменной treeCount, которое будет добавляться в функцию при ее вызове.
 
9. Добавьте следующий код на панель Actions.
 
// Create a number of trees randomly
// positioned within the document
function createTrees(numberOfTrees:int):void {
 
 // variable to store trees created
 // in the loop - the DisplayObject
 // type satisfies both MovieClip
 // and Bitmap instances
 var currTree:DisplayObject;
 
 // loop through the number of trees
 while(numberOfTrees--){
  
  // randomly add a tree either
  // as a bitmap or a movie clip
  if (Math.random() < .5) {
   
   // create a new Tree instance
   // Tree is the class name given to
   // the tree symbol in the library
   currTree = new Tree();
   
  }else{
  
   // create the tree BitmapData instance
   // from the library, then add it to a
   // new Bitmap instance
   var currTreeData:TreeImageData = new TreeImageData(0, 0);
   currTree = new Bitmap(currTreeData);
  }
  
  // position the new instance randomly on
  // the screen based on the stage's size.
  // subtracting the tree size from the stage
  // size keeps the trees on screen
  currTree.x = Math.random() * (stage.stageWidth - currTree.width);
  currTree.y = Math.random() * (stage.stageHeight - currTree.height);

  // don't forget to add the tree
  // to the display list
  addChild(currTree);
 }
}

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

10. Добавьте следующий скрипт на панель Actions.
 
// Create the trees
createTrees(treeCount);

11. Протестируйте свой клип. Вы должны увидеть следующее

Рисунок: Динамически созданные случайным образом деревья

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

В ActionScript 2 это можно было с легкостью установить в процессе создания деревьев, установив их глубину равной координате y. Это не работает в ActionScript 3, так как нельзя оставлять разрывы в таблице отображения – все глубины должны быть смежными. Решением для ActionScript 3 будет помещение объектов в массив и сортировка этого массива на основе значения y (или другого) объектов. Отсортированное упорядочивание этого массива может потом использоваться для упорядочивания таблицы отображения. Для содействия этому можно создать функцию.

12. Добавьте следующий скрипт на панель Actions.

// Arrange all children in the specified
// container based on their y value
function sortChildrenByY(container:MovieClip):void {
 var i:int;
 var childList:Array = new Array();
 
 // first put all children in an array
 i = container.numChildren;
 while(i--){
  childList[i] = container.getChildAt(i);
 }
 
 // next, sort the array based on the
 // elements' y property
 childList.sortOn("y", Array.NUMERIC);
 
 // now match the arrangement of the array
 // with the arrangement of the display list
 i = container.numChildren;
 while(i--){
  
  // if the child at position i in the array
  // does not match the child at position
  // i in the display list, set that child
  // to the i position in the display list
  if (childList[i] != container.getChildAt(i)){
   container.setChildIndex(childList[i], i);
  }
 }
}

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

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

// Arrange the trees
sortChildrenByY(this);

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

Рисунок: Динамически созданные деревья после упорядочивания

Схожесть таблицы отображения с массивом позволяет с легкостью использовать массивы для сортировки таблиц отображения, как в примере. Таким же образом, вы можете внедрить свой собственный алгоритм сортировки, используя просто таблицу отображения и методы, такие как getChildAt() и setChildIndex(), без помощи массивов.