Пример галереи на флеш flash xml gallery, ниже ссылка на скачать исходник.
Смотреть результат:
В этом уроке мы рассмотрим пример создания флеш галереи для просмотра картинок или фотографий. Flash галерея, которая получится у нас в итоге не будет выделяться креативным дизайном и впечатляющими анимациями-переходами между картинками, сейчас мы сделаем всего лишь «движок» галереи. Писать будем на actionscript 2.0
Итак, начнём. Открываем Adobe Flash (ну или у кого что, у меня, например, стоит старенькая Macromedia Flash 8), создаём новый документ 550 на 580 пикселов, Framerate делаем 30 fps (30 кадров в секунду).
Первый кадр – это всего лишь прелоадер (предзагрузчик) для самой флешки и всех картинок. Сама же flash галерея будет располагаться на втором кадре.
В первом кадре вставляем этот код:
pics = 0;// (инициализация) кол-во картинок, которые уже загружены
stop(); // останавливаем фильм, чтобы он не перешёл на второй кадр, пока все картинки не загружены
dr = new XML(); // создаём новый xml документ
/* Его формат:
<data>
<item url="images/1.jpg"/>
<item url="images/2.jpg"/>
<item url="images/3.jpg"/>
<item url="images/4.jpg"/>
</data>
Атрибут url указывает на путь к картинке.
В нашем случае картинки должны быть разрешением 500 на 400. */
dr.ignoreWhite = true; // в нём мы будем игнорировать лишние отступы
dr.onLoad = function(success) { // функция, которая выполнится при его загрузке
//добавляем в поле элементы, которые уже существуют
vsego = this.firstChild.childNodes.length; // vsego – сколько картинок нужно загрузить
for (q=0; q<this.firstChild.childNodes.length; q++) { // перебираем в цикле каждый элемент
_root.picHolder = this.firstChild.childNodes[q]; // для облегчения доступа сохраняем
//атрибуты текущего элемента во временную переменную picHolder
trace(_root.picHolder.attributes.url); // для отладки
cl = _root.attachMovie("preload", "preload"+q, q); // аттачим на сцену мувик из библиотеки
// с идентификатором экспорта "preload" (о нём позже)
cl._x = -4000; // скрываем его подальше от глаз
cl.url = _root.picHolder.attributes.url; // сохраняем в него переменную url – свойство xml обьекта
}
}
dr.load("data.xml"); // собственно грузим xml файл с конфигурацией
// далее обычный прелоадер, как они обычно делаются на actionscript 2
onEnterFrame = function():Void {
tf.text = "Загружено "+_root.pics+" из "+_root.vsego+" картинок"; // на сцене есть текстовое поле
// tf, в котором будет отображаться информация о процессе загрузки
t = _root.getBytesTotal(); // вес нашей флешки
l = _root.getBytesLoaded(); // сколько уже загружено
// Немного пояснений. Мувик “preload” при окончании загрузки картинки
// по переданной в него ссылке наращивает переменную _root.pics на 1
if (l == t && _root.pics == _root.vsego) { // проверяем, всё ли флешка загрузилась
// и загрузились ли все картинки
_root.gotoAndStop(2); // если да, то переходим на второй кадр
}
}
Итак, мувик preload. Он должен быть типа MovieClip и иметь идентификатор экспорта “preload”.
Он может быть простой точкой, либо вообще не иметь в себе графики. В его кадре нужно повесить код:
var mcl:MovieClipLoader = new MovieClipLoader(); // создаём новый объект MovieClipLoader
listener = {}; // создаём листенер для его событий
mc = this.createEmptyMovieClip("pict", this.getNextHighestDepth()); // создаём внутри ещё один мувиклип
mcl.addListener(listener); // подписываемся на события загрузчика
mcl.loadClip(url, mc); // грузим картинку по полученной из xml ссылке
listener.onLoadComplete = function() { // как только загрузили ещё одну картинку
_root.pics++; // наращиваем переменную
}
Переходим на второй кадр, где и будет находить флеш галерея.
Верху рисуем прямоугольник (неважно какого цвета) размерами 500 на 400, в нём будут показываться фотографии полного размера. Конвертируем его в MovieClip, Instance name задаём “main”. Внутри него опять же конвертируем этот прямоугольник, задаём Instance name “mc”, вставляем кадр (не ключевой) на 40 позиции, таким образом, у нас получается 40 кадров.
Создаём поверх слоя с MovieClip “mc” ещё один слой, на котором будут висеть скрипты. В первый кадр добавляем:
stop(); // останавливаем воспроизведение
mc._alpha = 0; // скрываем клип с прямоугольником
var mcl:MovieClipLoader = new MovieClipLoader(); // создаём MovieClipLoader
listener = {}; // создаём объект-листенер
mcl.addListener(listener); // подписываем его на события
mcl.loadClip(url, mc); // грузим картинку по ссылке, которая передана в переменной url.
listener.onLoadComplete = function() { // функция, которая выполнится как только картинка загрузится.
// Так как в первом кадре мы загрузили все картинки,
// флешка будет их моментально получать из кэша браузера
play(); // воспроизводим
}
В нашей flash галерее картинки будут сменять друг друга с затуханием и проявлением. Для того, чтобы наш мувиклип с картинкой начал плавно «проявляться», во второй кадр вешаем:
onEnterFrame = function() :Void { // при каждой смене кадров
mc._alpha += 5; // прозрачность мувика будет увеличиваться на 5%.
// Таким образом, через 20 кадров мувик будет иметь alpha = 100%
}
На 20-й кадр вешаем:
stop(); // останавливаем мувик
delete onEnterFrame; // удаляем функцию, которая отвечает за «проявление»
Далее предстоит сделать обратное – затухание картинки. На 21-й кадр вешаем:
mc._alpha = 95; // сразу делаем alpha меньше на 5%
onEnterFrame = function() :Void {
mc._alpha -= 5; // и ещё на 5 при каждой смене кадров
}
К 40-му кадру alpha будет равно 0%, то есть мувик будет невидимый. Переходим на главную сцену, создаём две стрелки (влево и вправо), при наведении на которые будут прокручиваться маленькие превьюшки картинок. Делаем Instance name для первой l, для второй – r (left и right).
На первую вешаем такой код:
on (rollOver) { // при навелении на кнопку
_root.onEnterFrame = left; // при каждой смене кадров будет вызываться функция left()
// её мы напишеи позже
}
on (rollOut, releaseOutside) { // при уходе курсора, либо при нажатии и отводе курсора
delete _root.onEnterFrame; // убираем вызов функции, останавливаем движение
}
Соответственно на вторую (right) вешаем:
on (rollOver) {
_root.onEnterFrame = right;
}
on (rollOut, releaseOutside) {
delete _root.onEnterFrame;
}
Далее делаем блок с превьюшками картинок. На мой взгляд, логичнее всего сделать его между между кнопками прокрутки, как это сделано в моём примере. Рисуем прямоугольник. У меня он имеет ширину 480 и высоту 100 пикселов. 480 – чтобы между ним и кнопками прокрутки не было много пустого места, высота 100 пикселов потому что превьюшки будут 100 на 125. Нарисованный прямоугольник конвертируем в MovieClip (центр регистрации – верхний левый угол), пишем Instance name “scroll”. Внутри него делаем ещё один пустой MovieClip с instance name “mc”, внутри него и будут находиться превьюшки. Над ним нужно сделать маску, опять же прямоугольник 480 Х 100.
Далее изготовим клипы, в которых будут храниться превьюшки картинок. Нарисуйте прямоугольник любым цветом и такими размерами, какие вам нужны для уменьшенных копий картинок. Конвертируйте его в MovieClip, задайте идентификатор экспорта «item».
Повесьте в кадр:
var mcl:MovieClipLoader = new MovieClipLoader(); // создание MovieClipLoader
listener = {}; // создания listener`а
listener.onLoadInit = function(targ_mc) { // при начале загрузки картинки
targ_mc._width = 125; // меняем ширину
targ_mc._height = 100; // и высоту
// в самом начале мы показываем первую картинку,
// все остальные должны быть немного темнее
//Первая картинка имеет номер 0. Если это не она, затемняем мувик.
// В переменной _root.al хранится насколько тёмными должны быть картинки
if (number != 0) {
pic._alpha = _root.al;
}
};
mc = this.createEmptyMovieClip("pic", this.getNextHighestDepth()); // создаём клип-контейнер
mcl.addListener(listener); // добавляем листенер
mcl.loadClip(url, "pic"); // грузим в него картинку
Прямоугольник опять конвертируем в MovieClip, на этот раз тип – Button. На него вешаем:
on (rollOver) { // при навелении
pic._alpha = 100; // подсвечиваем картинку
}
on (rollOut, releaseOutside) { // при уходе курсора
if (_root.v != number) { // если картинка не является просматриваемой
pic._alpha = _root.al; // затемняем её
}
}
on (release) { // при нажатии
_root.scroll.mc["item"+_root.v].pic._alpha = _root.al; // затемняем предыдущую картинку
_root.main.gotoAndPlay(21); // проигрываем дальше контейнер с большой картинкой (затухание)
_root.main.url = url; // передаём ему ссылку на новую картинку, которую он загрузит
_root.v = number; // указываем, что сейчас выбрана эта картинка
}
Теперь дело за малым – распарсить загруженный xml файл со ссылками на картинки и добавить их в нашу flash галерею. Во второй кадр временной диаграммы вешаем:
delete onEnterFrame; // удаляем функцию - прелоадер
stop(); // останавливаем ankmv
l.useHandCursor = false; // для того чтобы при наведении на стрелки
r.useHandCursor = false; // курсор не менялся на «руку»
/* инициализация переменных*/
dis = 5; // хранит дистанцию между элементами
xx = 0; // здесь будем хранить координату "края" всех мувиков с загружеными картинками.
// Изначально – ноль.
step = 8; // шаг при сдвиге картинок по сторонам (в пикселах)
// в контейнер грузим первую картинку
picHolder = dr.firstChild.childNodes[0];
main.url = picHolder.attributes.url;
al = 50; // "затемнение" элементов
// добавляем в поле превьюшек нужное количество мувиков “item”,
// передаём в них ссылки на картинки
for (i=0; i<dr.firstChild.childNodes.length; i++) { // перебор циклом всех элементов xml
picHolder = dr.firstChild.childNodes[i]; // опять же, для лёгкости и упрощения кода
cl = _root.scroll.mc.attachMovie("item", "item"+i, i); // добавляем мувик item
cl.url = _root.picHolder.attributes.url; // передаём в него ссылку на картинку
cl.number = i; // передаём ему его порядковый номер
cl._x = xx; // сдвигаем по координате x до края
xx += dis+125; // указываем, что край сместился на ширину мувика + расстояние dis
}
v = 0; // изначальная картинка
_root.scroll.mc.item0.pic._alpha = 100; // делаем её превьюшку незатемнённой
function right():Void { // функция для сдвига клипа с превьюшками вправо
if (_root.scroll.mc._x >= 0-(_root.scroll.mc._width-480)) { // если ещё есть куда его двигать
_root.scroll.mc._x -=step; // то двигаем на step (задаётся в начале)
}
}
// Абсолютно аналогично описываем функцию для сдвига влево:
function left():Void {
if (_root.scroll.mc._x<=0) {
_root.scroll.mc._x +=step;
}
}
Вот и всё, если вы всё правильно собрали, вы получите отличный движок flash галереи для просмотра картинок или фотографий. Огромным преимуществом является то, что обновление флеш галереи будет занимать у вас немного как сил так и времени, потому что ссылки на картинки хранятся во внешнем xml файле, всё что от вас требуется – залить на сервер ваши картинки и прописать в data.xml путь к ним. Однако, я рекомендую вам использовать данный урок лишь для понятия всех принципов и хода мыслей, а не собирать данную flash галерею. Вы можете бесплатно скачать и использовать её исходник.
А можно подсказать мне простую вещь?или не простоую!Мне нужно узнать как сделать так чтобы формат fla изменить на swf или как то так короче прогу хочу создатьа не получаеться из за формата и ещё-есть ли русификатор для флеш Marcomedia flash profissionak 8 или как то так-буду благодарен очень