ГАЛЕРЕЯ (http://smena.yard.ru/demiart/xml.swf)
Поехали, здесь тоже будем юзать xml
Что побудило автора написать этот урок? Забота о нас, ленивых, а точнее более простое обслуживание галерки, а точнее без редактирования fla-файла, что позволяет сэкономить время, кофе и удлинить часы, проводимые с любимой девушкой (или парнем, у кого как).
В общем если мы хотим добавить картинку, то всё, что надо сделать, всего лишь отредактировать xml-файлик в любом текстовом редакторе. Вот. И, как говорит автор, галерея показывает заголовки для каждой картинки и "каждый любит заголовки!" )
Оступление: перед тем, как начать урок, вы должны (по идее) ознакомиться с основами xml
введение в xml (http://www.kirupa.com/web/xml/index.htm)
вывод данных во флэш (http://www.kirupa.com/developer/actionscript/xmldataflash.htm)
управляемое меню (http://www.kirupa.com/developer/actionscript/xml_dropdown_menu3.htm)
Всё, ваша совесть чиста, поехали )
1. Создание xml-файла
В любом текстовом редакторе набираем следующий код
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/kresge.jpg</image>
<caption>Kresge</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/medialab.jpg</image>
<caption>Media Lab</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/stata.jpg</image>
<caption>Stata Center</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/stata_lobby.jpg</image>
<caption>Stata Lobby</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/construction.jpg</image>
<caption>Construction</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/dome.jpg</image>
<caption>The Dome</caption>
</pic>
<pic>
<image>http://www.kirupa.com/developer/mx2004/pg/structure.jpg</image>
<caption>Structure</caption>
</pic>
</images>
(код авторский, подробнее ниже)
Сохраните файл как images.xml. Он должен находится в одном каталоге с будущей флэшкой.
2. Создание fla
автор предлагает загрузить основу (http://www.kirupa.com/developer/mx2004/code/xml_photogallery_user_mx.zip) для будущего ролика
Далее разархивируем скачанный файл в один каталог с xml-файлом
Открываем скачанный файл и видим примерно следующее
http://www.kirupa.com/developer/mx2004/images/ss_pgt.gif
Наша задача присвоить каждому символу instance name.
Выберите пустой муви-клип ( Empty Movie Clip на картинке )
http://www.kirupa.com/developer/mx2004/images/xml_fl1.gif
дадим ему instance name - picture.
Получилось? Теперь делаем такое же для остальных:
Empty Movie Clip = picture (already done)
Preloader Movie Clip = preloader
Dynamic Text #1 = desc_txt
Dynamic Text #2 = pos_txt
Previous Button = previous_btn
Next Button = next_btn
Осталось лишь добавить код.
3. Добавление кода
Кликнем в пустом кадре слоя action и введем
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onload = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Сохраним файлик. Можно уже проверить, как работает.
А теперь всё подробно! )
4. Редактирование фотогаллереи
Как говорилось выше, всё очень просто. Добавление-удаление картинок происходит путем добавления-удаления данных в xml-файле. Так откроем же его )
<pic>
<image>путь к картинке</image>
<caption>заголовок картинки</caption>
</pic>
Думаю, всё понятно. Удаление картинки происходит удалением куска вышеприведеннго кода.
Теперь будем разбирать action. fla-исходник с кодом (http://www.kirupa.com/developer/mx2004/code/photogallery_2004.zip)
5. Разбор кода (краткий перевод)
Загрузка xml
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onload = loadXML;
xmlData.load("images.xml");
xmlData = new XML(); - назначаем новый объект xml как переменную
xmlData.ignoreWhite = true; - игнорирование пустых пробелов в xml-файле
xmlData.onload = loadXML; - отслеживает полную загрузку для xml-файла (актуально при его больших размерах)
xmlData.load("images.xml"); - путь к хмл-файлу
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
trace("file not loaded!");
}
}
Условный оператор выясняет, загружен или нет файл
total = xmlNode.childNodes.length; - объявляем масив
childNodes - проще говоря количество картинок вхмл
http://www.kirupa.com/developer/mx2004/images/xml_fl2.gif
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
Через цикл обрабатываем каждую картинку и описание
Листание картинок стрелками на клавиатуре влево и вправо:
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
Показ текущей позиции и общего количества:
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Собственно сам преоладер:
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
Функция для перехода к следующей картинке
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
К предыдущей
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
исходник (http://www.kirupa.com/developer/mx2004/code/photogallery_2004.zip)
источник (http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm)