–°–Ї–∞—З–∞—В—М —Д–ї–µ—И –Є—Б—Е–Њ–і–љ–Є–Ї–Є —Г—А–Њ–Ї–Є –њ—А–Є–Љ–µ—А—Л flash –Є–≥—А—Л —Б –Є—Б—Е–Њ–і–љ–Є–Ї–∞–Љ–Є

ќпрос
ƒоходчиво ли автор излагает свои мысли? :)

ƒа, вполне.
“рудновато, но пон€ть можно.
ќтвратительно, ничего не €сно.

 

”рок создани€ flash галереи (данные во внешнем файле)

‘леш примеры и уроки
ѕример галереи на флеш 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 галерею. ¬ы можете бесплатно скачать и использовать еЄ исходник.

 (голосов: 10)

ѕочитать ещЄ:
 
#1 написал: Nullius (5 но€бр€ 2009 14:08)
¬ »≈8 не работает эта галере€
#2 написал: Magyar (16 но€бр€ 2009 14:54)
¬се работает во всех верси€х кроме 5.5.(не провер€л) сейчас пишу с IE8
#3 написал: Lena (20 но€бр€ 2009 03:03)
ј есть код этой галереи в AS3?
#4 написал: admin (20 но€бр€ 2009 14:01)
нет, нету
#5 написал: ќлег (11 феврал€ 2010 21:07)
а как изменить таким образом, что быне плавна€ прокрутка была при наведении на стрелки, а чтобы двигало на следующие 4 фотографии при нажатии на стрелку
#6 написал: eugene (30 ма€ 2010 12:07)
все круто, только с прозрачностью проблемы кажетс€ какие-то, максимальна€ прозрачность фоток в галерее не 100%
#7 написал: јнна (3 июн€ 2010 13:20)
” мен€ такой вопрос. я хочу, чтобы галере€ загружалась по нажатию на кнопку с именем tab5. ƒл€ этого € прописала
_root. tab5.onRelease = function() {
loadMovie ("gal.swf", "myClip");}
но галере€ не загружаетс€. ¬ чем может быть ошибка?
#8 написал: admin (3 июн€ 2010 13:25)
” вас точно существует клип под именем 'myClip'?
≈сли да, то уберите кавычки:
loadMovie ("gal.swf", myClip);
#9 написал: јнна (4 июн€ 2010 15:13)
да, клип точно присутствует, € пробовала убирать ковычки, но галере€ все равно не грузитс€
#10 написал: —егрей (8 июн€ 2010 12:16)
¬сех своих регалий не хочу перечисл€ть, скажу только что в компьютерной графике € уже 7 лет, но созданием сайта зан€лс€ впервые.

«амечу, что урок очень полезный, а тем более по существу! «а это автору большое спасибо!
!!! Ќо этот урок не дл€ новичка, а дл€ пользовател€ с опытом !!!
- может быть и с небольшим!!!

¬опрос автору:
—просить ¬ас хочу - Ќафига опытному ѕользователю ¬аша примитивна€ галере€!?

- —леду€ вашими шагами можно сделать только “о что у ¬ас, шаг в сторону - "расстрел" всей флешки!
- ј ¬ы заметили, на сколько отличаетс€ исходник от урока!

ј теперь ¬опрос новичка:
ћожете пошагово объ€снить как сделать с !Ќул€! - только загрузку фотографий из XML файла дл€ кнопок, то есть, что мне нужно так это проста€ загрузка фотографий во флешку - так же как у вас в р€д! - и всЄ!

Ќачина€ урок с середины невозможно нормально начать и закончить!!!

«а ранее благодарю ¬ас за ответ!
#11 написал: јлександр (15 июн€ 2010 00:55)
согласен с —ергеем, самого интересует создание с нул€, + мне нужна вертикальна€ менюшка
#12 написал: Alles_Kaput (25 августа 2010 07:18)
–юб€ты. Ќинадо грузить автора :) ћне как человеку ничего не смысл€щему в современных технологи€х было полезно.

” мен€ только один вопрос.  ак сделать так, чтобы галере€ начиналась с последнего добавленного изображени€.

“о есть врем€ от времени € буду выкладывать новые фотки, со временем их может стать много. » было бы прикольней, чтоб посетители попадали сразу на последний шидевр, а не на тот, который € год назад сделал.



парт ту.

ћне подфартило, и € разобралс€ как указать первую загружаемую картинку.

“о есть, теперь, если мне надо, чтобы первой подгружалс€ image7. я указываю цифру 7 и галлере€ начинаетс€ с седьмого изображени€.
Ёто типо круто но не предел мечтаний.  аждый раз при добавлении нового изображени€ в xml придетс€ править фла. я уверен что в корпорации эдоуб работают очень умные люди. ќни сто пудов предусмотрели такой расклад.

ј теперь внимание вопрос знатокам!  ак указать флехе, что надо подгружать последнюю картинку из xml. ƒолжен ведь быть какой нить n, total,i+ ???
хелп ми комрадес.
#13 написал: ¬ан€ Ўатский (7 сент€бр€ 2010 19:54)
smile ј можно подсказать мне простую вещь?или не простоую!ћне нужно узнать как сделать так чтобы формат fla изменить на swf или как то так короче прогу хочу создатьа не получаетьс€ из за формата и ещЄ-есть ли русификатор дл€ флеш Marcomedia flash profissionak 8 или как то так-буду благодарен очень


ѕросто € тупой какойто если честно,тоесть нет в жизне не тупой но по флеш € полностью нуль
#14 написал: ZORIK (13 декабр€ 2010 19:49)
ƒоброго времени суток!
ѕопробовали вставить ¬ашу галлерею на сайт в ћазиле все работает в Ёксплорере нет!
ѕодскажите в чем ошибка! ќчень надо! )))) Ѕуду рад любой инфе!!«аранее Ѕлагодарен!
#15 написал: admin (13 декабр€ 2010 19:54)
«дравствуйте! ѕриведите пожалуйста html код, которым вы вставл€ли флешку на страницу
#16 написал: ZORIK (14 декабр€ 2010 15:39)
ƒоброго времени суток!
—пасибо за ответ. Flash € вставл€л в html код при помощи Macromedia Dreamweaver 8-кнопкой-"вставить Flash", вот что по€вилось-

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash
.cab#version=7,0,19,0" width="550" height="580" title="g">
<param name="movie" value="flash_xml_gallery/gal.swf" />
<param name="quality" value="high" />
<embed src="flash_xml_gallery/gal.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="580"></embed>
</object>

¬ ћазиле все работает.Ёксплорер блокирует страницу.
“ипа-"
„тобы помочь обеспечению безопасности, Internet Explorer ограничил отображение активного содержимого, могущего получить доступ к компьютеру, этим файлом. ўелкните здесь дл€ выбора параметров."
» так далее в том же духе.ј так хотелось бы вставить фотоальбом!
#17 написал: admin (14 декабр€ 2010 17:04)
Ёто не проблема вставки, а проблема настроек вашего браузера.  огад вы вывложите страницу и флешку в интернет, скорее всего это окошко пропадЄт и флешка будет нормально отображатьс€
#18 написал: —ергей (20 ма€ 2011 06:12)
ќчень хороший урок, применил на практике и хот€ уроков по созданию галерей не мало, не все они так пон€тны и полезны, все понравилось, автору респект и многие благодарности.
¬озник лишь один вопрос, возможно ли в данном примере, не лома€ ничего, добавить функцию авторотации через определенный промежуток времени? » если возможно то как? ¬ тонкост€х работы во флеше €, простите, чайник и сам придумать ничего не могу((
#19 написал: admin (21 ма€ 2011 00:39)
¬озможно, дл€ этого во втором кадре основной врем. диграммы добавьте код:

function next() { // открыть следующую картинку
††††// v - номер текущей картинки
††††_root.scroll.mc["item"+_root.v].pic._alp
ha = _root.al;
††††v = (v==dr.firstChild.childNodes.length-1) ? 0 : ++v;
††††_root.scroll.mc["item"+_root.v].pic._alp
ha = 100;
††††_root.main.gotoAndPlay(21);
††††_root.main.url = _root.scroll.mc["item"+_root.v].url;
}

setInterval(next, 4000); // задать интервал в 4 секунды
#20 написал: —ергей (21 ма€ 2011 07:12)
”ра! –аботает! —пасибо, огромное, отличный урок получилс€. ќчень рекомендую всем, особенно тем, кто как и € только начинает учитьс€!
#21 написал: —ергей (23 ма€ 2011 13:14)
ѕодскажите, пожалуйста, если возможно.
«адалс€ целью добавить кнопку котора€ останавливает воспроизведение данного цикла и зашел в тупик... Ёто нужно сделать через "clearInterval ()" или как-то иначе?
#22 написал: admin (23 ма€ 2011 13:19)
ƒа, вам нужно изменить последнюю строку на:
var intervalID = setInterval(next, 4000); // задать интервал в 4 секунды

» после этого вы можете убирать интервал с помощью строки
clearInterval(intervalID);
#23 написал: —ергей (23 ма€ 2011 16:28)
ѕоследнюю строку изменил, но к большому сожалению после многих неудачных попыток, остановить воспроизведение не получилось. „то не так, подскажите, пожалуйста?

_root.MyButton.onRelease = function() {
clearInterval(intervalID);
};
#24 написал: admin (23 ма€ 2011 17:00)
—транно. ѕопробуйте так:
clearInterval(_root.intervalID);
#25 написал: —ергей (23 ма€ 2011 17:16)
÷икл не останавливаетс€. √де подвох, пон€ть не могу(
#26 написал: admin (23 ма€ 2011 17:19)
ѕроблема точно не в кнопке? ≈сли при нажатии сделать trace('button is pressed') всЄ ок?
#27 написал: —ергей (23 ма€ 2011 17:40)
ƒа все ok, проблема не в кнопке, а в чем-то еще, но в чем, вопрос не€сен.
#28 написал: —ергей (24 ма€ 2011 09:29)
–ешение проблемы таки пришло в голову, после долгих раздумий...
≈сли кому понадобитс€:
///////////////////////////////////////////////////////////
    // код дл€ кнопки старт
///////////////////////////////////////////////////////////
function next() { // открыть следующую картинку
    // v - номер текущей картинки
    _root.scroll.mc["item"+_root.v].pic._alp
ha = _root.al;
    v = (v==dr.firstChild.childNodes.length-1) ? 0 : ++v;
    _root.scroll.mc["item"+_root.v].pic._alp
ha = 100;
    _root.main.gotoAndPlay(21);
    _root.main.url = _root.scroll.mc["item"+_root.v].url;
}
var intervalID; // объ€вл€ем переменную intervalID
_root.intervalID = setInterval(next, 4000); // задать интервал в 4 секунды
}
///////////////////////////////////////////////////////////
    // код дл€ кнопки стоп
///////////////////////////////////////////////////////////
clearInterval(_root.intervalID); // убрать интервал

ќгромное спасибо за материал и оперативную помощь!
#29 написал: ќльга (30 августа 2011 12:57)
—пасибо большое за урок.
ѕодскажите как добавить комментарии к фото?
#30 написал: MrZlo (2 но€бр€ 2011 12:10)
—пасибо за урок. Ќо в исходнике размер пиктограмок не измен€етс€, а если € пытаюсь написать
var mcl:MovieClipLoader = new MovieClipLoader();
listener = {};
listener.onloadInit = function(targ_mc) {
targ_mc._width = 20;
targ_mc._height = 20;

};


mc = this.createEmptyMovieClip("pict", this.getNextHighestDepth());
mcl.addListener(listener);
mcl.loadClip(url, mc);


listener.onloadComplete = function() {
_root.pics++;
}


то это не дает никаких результатов.  артинки по прежнему своего размера
ƒобавление комментари€