Урок для Flash в принципе не сложный. Все элементы взяты из стандартных готовых компонентов. Осталось дать им имена и подставить значения в свойствах, остальное сделает Action Script.
1. Итак, у нас в папке должно находиться по меньшей мере 3 файла. Это swf, xml и jpg.
2. Начнем с картинок, имена могут быть любые, поскольку в xml файле мы можем редактировать все что нужно. У меня имя картинки «DCP_0730.jpg» и т.д., размер 400х267. Колличество тоже любое!
3. В xml фале должна быть вот такая запись:
<tree>
<node label="Галерея 1">
<node label="Цветок 1" src="DCP_0730.jpg" />
<node label="Цветок 2" src="DCP_0731.jpg" />
<node label="Цветок 3" src="DCP_0732.jpg" />
<node label="Цветок 4" src="DCP_0733.jpg" />
<node label="Цветок 5" src="DCP_0734.jpg" />
</node>
</tree>
Для тех кто не знает что такое xml и как с ним работать, прошу искать ответ на сайте или в F.A.Q. (в крайнем случае в поисковиках , www.nigma.ru) (Чтобы создать xml файл с русской кодировкой, вам нужно открыть обычный блокнот, вставить этот код и сохранить с именем gallery_tree.xml в папку где лежат swf-файл и фотографии. Смотрите картинку ниже, как создать xml.)
Поясняю код xml…
Первая строка – это мы указываем версию нашего xml файла и его кодировку, в данном случае эта русская кодировка (utf-8).
Вторая строка – это и есть «нод» с именем нашего дерева, т.е. “tree”, последняя строка закрывает наш «нод»
Третья строка – это есть категория нашей галереи, в данном случае имя ее «Галерея 1», закрывается она «нодом»
Четвертая и ниже по восьмую – это имена фотографий и их адрес (где находятся фотографии). Кстати фотки могут быть не только в основной папке, они могут находиться и Интернете. Label = «имя картинки», src= «адрес картинки». Эти «ноды» не закрываться, как и первый «нод».
Вообщем, если ничего не понятно, просто скопируйте код и все!
4. Далее, создаем новый fla файл, File > New или (Ctrl+N)
5. Создаем два слоя “Action Script” и “Components”
6. В слое “Components” в первом кадре размещаем элементы Compiled Clip (Loader, ProgressBar, Tree) как на картинке.
Предварительно взяв их из Window > Components или (Ctrl+F7) , они появятся позже у нас в библиотеке как на картинке.
8. Даем им имена Instance name:
Для Tree - my_tree
Для Loader - my_ldr
Для ProgressBar - my_pb
9. и выставляем параметры:
Для Tree 
Для Loader 
Для ProgressBar
10. В слое Actopn Script в первом кадре пишем:
// Устанавливаем для наших элементов значение
var my_pb:mx.controls.ProgressBar;
var my_ldr:mx.controls.Loader;
var my_tree:mx.controls.Tree;
//
my_pb._visible = false;
my_pb.indeterminate = true;
my_pb.setSize(160, 30);
my_pb.source = my_ldr;
my_pb.mode = "polled";
var pbListener:Object = new Object();
pbListener.complete = function(evt:Object) {
evt.target._visible = false;
};
my_pb.addEventListener("complete", pbListener);
// Тут мы работаем с xml файлом, указываем путь, действия при загрузке и т.д…
var treeDP_xml:XML = new XML();
treeDP_xml.ignoreWhite = true;
treeDP_xml.onLoad = function(success:Boolean) {
if (success) {
my_tree.dataProvider = this.firstChild;
}
};
treeDP_xml.load("gallery_tree.xml");
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var treeNode:XMLNode = evt.target.selectedItem;
if (treeNode.attributes.src != undefined) {
my_pb._visible = true;
my_ldr.load(treeNode.attributes.src);
}
};
my_tree.addEventListener("change", treeListener);
После всего этого, мы сохраняем swf файл в папку с xml фалом и воооля. Проверяем. Windwow > Test Movie или (Ctrl + ENTER).
Чтобы добавить или удалить фотографию или категорию, мы всего лишь редактируем xml файл. Пример:
Добавить категорию
<tree>
<node label="Галерея 1">
<node label="Цветок 1" src="DCP_0730.jpg" />
<node label="Цветок 2" src="DCP_0731.jpg" />
<node label="Цветок 3" src="DCP_0732.jpg" />
<node label="Цветок 4" src="DCP_0733.jpg" />
<node label="Цветок 5" src="DCP_0734.jpg" />
</node>
</tree>
<tree>
<node label="Галерея 2">
<node label="Цветок 6" src="DCP_0730.jpg" />
<node label="Цветок 7" src="DCP_0731.jpg" />
<node label="Цветок 8" src="DCP_0732.jpg" />
<node label="Цветок 9" src="DCP_0733.jpg" />
<node label="Цветок 10" src="DCP_0734.jpg" />
</node>
</tree>
Мы просто скопируем от «нода» (<tree> до </tree>) и переименуем название с галереи 1 на галерею 2. Так же и с картинками
<node label="Цветок 1" src="DCP_0730.jpg" />
у нас есть одна картинка, мы копируем, меняем имя и адрес, воооля, теперь их две!!!
<node label="Цветок 1" src="DCP_0730.jpg" />
<node label="Цветок 2" src="DCP_0731.jpg" />
Исходник урока здесь >>>
|