Новогодняя галерея, flash+xml

Как быстро летит время! Через неделю уже Новый Год, а у меня всего один урок на эту тему. Надо исправится, поэтому сегодня мы создадим галерею новогодних фотографий. У веб-разработчика есть пара галерей, но мы напишем свою.

Приступим.
1. Создаем новый документ во Flash и сохраняем в отдельной папке
2. В этой же папке создаем еще две: thumb и pic
3. Кидаем в pic большие фотографии (картинки),а в thumb - маленькие (превью) (95 *70) с именами от 1.jpg до 10.jpg
4. Создаем XML файл с названием xmlphoto.xml в директории с .fla файлом со следующим содержанием:

<sites>
<Photo img="pic/1.jpg" tmb="thumb/1.jpg" description="Photo 1"/>
<Photo img="pic/2.jpg" tmb="thumb/2.jpg" description="Photo2"/>
<Photo img="pic/3.jpg" tmb="thumb/3.jpg" description="Photo3"/>
<Photo img="pic/4.jpg" tmb="thumb/4.jpg" description="Photo4"/>
<Photo img="pic/5.jpg" tmb="thumb/5.jpg" description="Photo5"/>
<Photo img="pic/6.jpg" tmb="thumb/6.jpg" description="Photo6"/>
<Photo img="pic/7.jpg" tmb="thumb/7.jpg" description="Photo7"/>
<Photo img="pic/8.jpg" tmb="thumb/8.jpg" description="Photo8"/>
<Photo img="pic/9.jpg" tmb="thumb/9.jpg" description="Photo9"/>
<Photo img="pic/10.jpg" tmb="thumb/10.jpg" description="Photo10"/>
</sites>

Наша галерея будет рассчитана на 10 фотографий, но при желании можно будет добавить/убрать фотографии, при этом соблюдайте равновесие в папках thumb и pic.
5. В недавно созданном Flash документе создаем 3 слоя и 2 фрейма (кадра)
6. В первом фрейме первого слоя пишем код:

stop();
//создаем массивы для сохранения данных из XML
_root.arr = [];
_root.uri = [];
_root.pic = [];
_root.des = [];
//Подключаемся к XML
myXML = new XML();
myXML.ignoreWhite = true;
myXML.load("xmlphoto.xml"); myXML.onload = function(success) {
var sites = myXML.firstChild;
max = sites.childNodes.length;//узнаем количество записей(картинок)
_root.quantity=max;//(записуем в _root.quantity)
// Извлекаем и записуем атрибуты в массив
for (var i = 0; i  var tmb = sites.childNodes[i].attributes.tmb;
var img = sites.childNodes[i].attributes.img;
var description = sites.childNodes[i].attributes.description;
_root.arr.push(tmb);
_root.pic.push(img);
_root.uri.push(url1);
_root.des.push(description);
}
//в случае загрузки XML и записи данных переходим на второй фрейм
gotoAndStop(2);}

Как видно, код прокомментирован, поэтому, думаю, затруднений не возникнет. Если все же не понятно - пишите в комментариях к посту.

7. Переходим ко второму фрейму. Здесь пишем:

import mx.transitions.Tween;
import mx.transitions.easing.*;
hmc = _root.createEmptyMovieClip('holder_mc', 1);
// создаем мувик, который будет
//содержать все превью(маленькие картинки) нашей галереи
buffer = _root.createEmptyMovieClip('buffer', 100);
// создаем мувик-буфер
//для отображения выбраной картинки
// Расставляем на сцене созданные мувики
buffer._x=132.5;
buffer._y=141.3;
hmc._x=50;
hmc._y = 25;
max=_root.quantity;
//записываем а переменную max количество всех фоток
// Создаем столько мувиков с картинками, сколько собственно картинок в XML
for (var i = 0; i createNewMc(i);
//функция создания пустых мувиков для картинок
}//функция создания пустых мувиков для картинок
function createNewMc(i) {
//создаем в мувике контейнере превьюшек мувики для каждой фотографии
mc = _root.holder_mc.createEmptyMovieClip('loader_'+i, i);
// ставим их в порядке один за другим
mc._x = 99*i;
}
//Создаем слушатель чтоб наблюдать за загрузкой превьюх
var loaderListener:Object = new Object();
loaderListener.onloadStart = function(holderClip:MovieClip) {
};
loaderListener.onloadProgress = function(holderClip:MovieClip, loadedBytes:Number, totalBytes:Number):Void {
// вычисляем количество загруженых байт превьюхи
var percent:Number = Math.round((loadedBytes / totalBytes) * 100);
// создание текстового поля для отображения загрузки
TextF=holderClip.createTextField('loading', this.getNextHighestDepth(), 35, 25,30, 22);
TextF.text=percent+"%";
};
//// когда загрузка превьюхи завершена
loaderListener.onloadComplete = function(mc:MovieClip,i:Number):Void {
//удалить текстовое поле
TextF.removeTextField();
// Создание реакции на каждую превьюху при наведении, нажатии
for (var i = 0; i<=max; i++) {
mc = _root.holder_mc['loader_'+i];
_root.holder_mc['loader_'+i].i = i;
/////////////////////////// Button Reaction///////////////////////
mc.onRelease=function(){
}
mc.onRollOver=function(){
mc = _root.holder_mc['loader_'+this.i];//идентификация мувика
//еффект с помощью класа Transitions
mx.transitions.TransitionManager.start(mc, {type:mx.transitions.Photo, direction:0,
duration:0.6, easing:mx.transitions.easing.Elastic.easeOut, param1:empty, param2:empty});
}
mc.onPress=function(){
//При нажатии на превью, большая картинка загружаеться в буфер
_root.opis=_root.des[this.i];// вывод описания для картинки
//Создаем загрузчик
var loader3:MovieClipLoader = new MovieClipLoader();
// Создаем слушатель для загрузчика
var listener3:Object = {};
loader3.addListener(listener3);
loader3.loadClip(_root.pic[this.i], buffer);//загружаем нужную картинку
//Zagryzka izobrajenij v buffer
// У меня тут ничего в функциях слушателя нет,
//но при желании можно добавить действия, если потребуются
listener3.onloadInit = function():Void {
};
listener3.onloadStart = function():Void {
_root.preloader_txt.text = "0 %";
};
listener3.onloadError = function(clip:MovieClip, message:String):Void {
if (message == "URLNotFound") {
_root.preloader_txt.text = "Ссылка не найдена.";
}
if (message == "LoadNeverCompleted") {
_root.preloader_txt.text = "Ошибка загрузки.";
}
};
listener3.onloadProgress = function(clip:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
percent2= Math.round(bytesLoaded/bytesTotal*100)+"%";
};
listener3.onloadComplete = function():Void {
};
///////////////////
}
}
};
//Загружем превью в мувик-контейнер
var imageLoader:MovieClipLoader = new MovieClipLoader();
imageLoader.addListener(loaderListener);
for (var i = 0; i imageLoader.loadClip(_root.arr[i] , _root.holder_mc['loader_'+i]);
//берем нужную превью из массива и
// загружаем в нужный мувик
}

Фуф! Код большой, немного говнястый, но рабочий Да не вспотроши меня, о великий flash-потрошитель, за этот код!

8. Во втором фрейме второго слоя вставляем все графические элементы

Для динамического текста в поле Var ставим переменную _root.opis
Для маски Instance name: mask_g

9. В этом же фрейме пишем код:

_root.holder_mc.setMask(_root.mask_g);
// создаем маску для того, чтоб создать рамку
//для наших превьюшек
mc1=_root.mask_g;
mc2=_root.holder_mc;
f=mc1._width/2;
xMin= mc2._x;
mouse = f/3;
dmouse = mouse*2;
//при наведении на левую часть маски - превью двигаються вправо и наоборот
mc2.onEnterFrame =function(){
var deltaa:Number = mc2._width;
var xMax:Number = xMin-deltaa+mc1._width;
if (_root._xmouse>(f))
{
if (mc2._x>=xMax)  mc2._x=mc2._x-5;
}
if (_root._xmouse<(f) )
{
if (mc2._x!=xMin)  mc2._x=mc2._x+5;
}
updateAfterEvent();
}

10. В 3 слое на 2 фрейме пишем опять код:

//Загружаем начальные данные для галереи - первую
//картинку в буфер и описание для нее
var loader:MovieClipLoader = new MovieClipLoader();
var listener:Object = {};
loader.addListener(listener);
_root.opis=_root.des[0];
loader.loadClip(_root.pic[0], _root.buffer);

Вот и все. Как бы готово Сложно? Согласен. Зачем три слоя, когда можно один? Так нагляднее. Объяснил на ломаном языке? Критикуйте.
Исходник с рабочей flash галереей здесь.
Удачи!

--- Советы блоггерам ---

1. Советы новичкам от танцевальной студии Холимикс
2. На блоге о спортивном туризме итоги сезона ушедшего с советами и рекомендациями
3. На блоге учителя информатики применение информационных технологий для одаренных учеников
4. Мировая блогопанорама размещает Ксения Сухинова фото и советы для блоггеров от нее

Спонсор поста: Кайзер - это титул германских императоров? Нет, это такая бытовая техника.