Скачать флеш исходники уроки примеры 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++;
}


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