|
|
 |

 |
Флешка, считывающая названия картинок в папке |
Флеш примеры и уроки |
 |
 |
В последнее время я стал часто встречать на форумах вопросы о том, как из флешки можно получить список имён файлов в папке на сервере, например, для создания слайдшоу на flash. Нужно понимать, что flash исполняется на клиентской стороне – то есть, пользователь заходит на веб-страницу (html), в которой при помощи html разметки вставлен flash объект. Браузер загружает флешку по указанному адресу, и при помощи flash проигрывателя (плагина для браузера) эта флешка воспроизводится. Сама по себе флешка не может выполнять какие-либо действия на сервере – например, получить список файлов и папок, запись в файлы, выполнение sql запросов. Для этого нужен скрипт-посредник, который выполнится на стороне сервера. Именно серверные скрипты и могут обращаться к файловой системе сервера, выполнять sql запросы и так далее. Сейчас самым рапостранённым языком для написания серверных скриптов является php. Например, мы хотим сделать флешку-слайдшоу, которая будет открывать все картинки, которые находятся в определённой папке. То есть, для того, чтобы добавить или удалить картинку из слайд-шоу вам не нужно править xml файл со списком картинок – достаточно просто удалить картинку на сервере, либо загрузить новую. Флешка получит список картинок, обратившись к серверному php скрипту. Php – интерпретируемый язык. Для того, чтобы скрипт работал, достаточно написать его содержание в любом текстовом редакторе, сохранить в файл с расширением .php и залить на сервер. Пример простейшего скрипта, который возвратит список файлов в папке, разделяя имена пробелами: <? $dir = opendir ("images"); // открыть папку images для чтения while ( $file = readdir ($dir)) // перебор всех файлов папке // следует учесть, что при переборе файлов в конце обязательно будет // две строки - "." и "..". Дл того, чтобы не передавать их во флешку, ставим условие if (( $file != ".") && ($file != "..")) echo "$file "; // возвращаем имя файла ($file) и пробел (!) в конце
closedir ($dir); // закрываем открытую папку ?> Теперь можно залить скрипт на сервер на уровень выше папки, список файлов которой нужно получить. Можно проверить скрипт, набрав его адрес в браузере – должна отобразиться строка с именами всех файлов в нужной папке. Теперь, для примера, сделаем флешку, которая распарсит эту строку получит список файлов в папке, загрузит и будет показывать, плавно сменяя картинки. Во флешке будет всего два кадра, первый – прелоадер с какой-нибудь анимацией, показывающей что идёт загрузка, второй – слайд-шоу, в котром картинки будут в случайном порядке. Для того, чтобы загрузив картинки один раз флешке не пришлось опять лезть за ними на сервер (когда слайды пойдут по второму кругу) мы будем использовать класс BitmapData и методы draw() и attachBitmap(). Этот класс позволяет хранить снимки клипов или всей сцены (аналог клавиши Print Screen в Windows). При создании экземпляра класса BitmapData конструктору нужно передать 4 параметра: ширину, высоту, прозрачность (true или false) и цвет заливки. Только первые два параметра являются обязательными. Напишем код для первого кадра – загрузчика картинок. // импорт необходимых для работы классов import flash.display.BitmapData; import flash.display.*; import flash.geom.*;
//остановим проигрывание до загрузки всех картинок stop(); //////////// иициализация переменных: \\\\\\\\\\\\\\\\\\ dir = 'images/'; // путь к папке, в которой находятся картинки loaded = 0; // счётчик загруженых картинок bitmapdatas = []; // массив для хранения BitmapData - "снимков" клипов с картинками
// создадим метод toBitmap(), который будет вызываться после каждой загрузке картинки с сервера. // Как аргумент функция принимает ссылку на мувиклип, в котором завершилась загрузка картинки. // Эта функция будет делать "снимок" клипа с картинкой при помощи класса BitmapData // а также проверять, все ли картинки уже загрузились function toBitmap(img_mc) { // создаём новый экземпляр класса BitmapData, шириной и высотой как сцена flash ролика _root['bitmap'+loaded] = new BitmapData(Stage.width, Stage.height, true, 0); // при помощи метода BitmapData.draw() делаем снимок клипа _root['bitmap'+loaded].draw(img_mc); // заносим в наш массив для хранения этих данных bitmapdatas[loaded] = _root['bitmap'+loaded]; // т.к. загрузилась ещё одна картинка, наращиваем счётчик загруженых картинок loaded++;
// проверяем, все картинки уже загрузились, если да - // то переходим на второй кадр, где располагается галерея if (loaded == images.length) { _root.gotoAndStop(2); } }
// после того, как с сервера будет получена строка с содержимым папки и разобрана в массив, // мы перемешаем его. Удобную и лаконичную функцию я когда-то давно нашёл на flasher.ru // данна фунция принимает на вход массив (тип данных в нём может быть любой) // и возвращает его назад с элементами, расставлеными в случайном порядке function Shuffle(x) { var tmp = x.concat(); var new_x = new Array(); while (tmp.length>0) { var rnd = random(tmp.length); new_x.push(tmp.splice(rnd, 1)); } return new_x; }
// Для того, чтобы обратиться к php скрипту за списком имён файлов в папке, // создадим два экземпляра класса LoadVars, // один для отсылки запросы на php скрипт, второй - для получения ответа var sender:LoadVars = new LoadVars(); // Отправитель var receiver:LoadVars = new LoadVars();// Получатель
sender.sendAndLoad("script.php", receiver, "POST");// выполняем запрос
// Функция-обработчик поступления данных во флешку receiver.onData = function(text):Void { images = []; // инициализация массива для хранения ссылок на картинки // в переменной text хранятся данные, которые возвратил скрипт. // В самом начале ответа сервера находится символ переноса строки, //следующей строкой убираем его: text = text.split('\n')[1]; /* Так как серверный php скрипт отдаёт нам имена файлов, разделяя их пробелом, опять воспользуемся методом split() для разбивки строки на массив */ images = text.split(' ');// получаем массив со ссылками на картинки
/* В самом конце списка картинок на сервере находится пробел, поэтому в нашем массиве со ссылками на картинки последний элемент является лишним. Для того, чтобы убрать последний элемент массива, достаточно просто переопределить его свойство length, сделав его меньше на 1*/ images.length = images.length-1; //Для перемешивания массива воспользуемся функцией Shuffle() images = Shuffle(images); // получим массив ссылок на картинки для галереи в случайном порядке // в цикле перебираем все элементы массива со ссылками for (i=0; i<images.length; i++) { // Для каждого создаём свой клип-контейнер // Важно не забывать, что имена и глубины каждого клипа должны быть уникальны, поэтому // для формирования имени и глубины используем счётчик цикла - переменную i mc = _root.createEmptyMovieClip("mc"+i, i); // чтобы при загрузке перед пользователем не мелькали картинки, // нужно как-то скрывать клипы-контейнеры, в которые грузятся картинки. // Простейший способ - переместить клип за границы клипа, поставим координату по оси x равной 3000 mc._x = 3000;
// Для загрузки картинок в клипы создадим экземпляры класса MovieClipLoader _root['mcl'+i] = new MovieClipLoader(); // А также обьекты-слушатели для отслеживания окончания загрузки картинок _root['listener'+i] = {}; // Присоединяем листенеры к MovieClipLoader`ам _root['mcl'+i].addListener(_root['listener'+i]); // начинаме загрузку _root['mcl'+i].loadClip(dir+images[i], _root['mc'+i]); // в каждом обьекте-слушателе создаём свйство mc, // которое хранит ссылку на клип, к которому он относится _root['listener'+i].mc = mc; // при завершении загрузки картинки будет вызываться данный метод _root['listener'+i].onLoadInit = function() { // После окончания загрузки картинки в клип вызываем функцию toBitmap(), // передавая ссылку на клип toBitmap(this.mc); // после этого удаляем клип - он нам больше пригодится, // ведь после выполнения функции toBitmap() у нас есть его содержимое this.mc.removeMovieClip(); }; } }; После загрузки всех картинок флешка переходит на второй кадр. У нас имеется массив bitmapdatas, которй содержит экземпляры класса BimapData с картинками. Во втором кадре остаётся написать код, который будет по очереди добавлять на сцену по очереди все картинки, плавно меняя их прозрачность (alpha) от 0 до 100. Каждая картинка будет помещаться на глубину, выше чем предыдущая. При достижении _alpha у самой высшей картинки мы бдем удалять картинку под ней, таким образом экономя оперативную память, которую занимает флешка. Вот код галереи: total = bitmapdatas.length; // всего картинок в галерее n = 0; // просто счётчик, для уникальности создаваемых клипов и глубин
function getNextPic() { // при вызове этой функции буду сменяться картинки old = mc; // запоминаем ссылку на старый клип, который нужно будет удалить mc = _root.createEmptyMovieClip('pic'+n, _root.getNextHighestDepth()); // создаём новый клип с униакальным именем, помещаем на самый высший уровень плеера mc.attachBitmap(bitmapdatas[n], 0, "auto", true); // "вкладываем" в него картинку mc._alpha = 0; // ставим прозрачнсть на ноль (т.е. делаем клип с картинкой полностью прозрачным) mc.onEnterFrame = function() { // функция, которая будет выполняться в клипе при каждойсмене кадров this._alpha += 10; // увеличиваем прозрачность клипа на 10 % // проверка условия: if (this._alpha==100) { // ели прозрачность клипа 100% old.removeMovieClip(); // то удаляем клип, который находится под ним (т.к. он нам больше не нужен) delete this.onEnterFrame; // удаляем фунцию } }
// для того, чтобы флешка не пыталась грузить картинки, //которых не существует, делаем следующую проверку: if (n==total-1) { // достиг ли наш счётчик максимума n = 0; // ели достиг, то обнуляем его } else { n++; // если нет - наращиваем счётчик на единицу (инкремент) } }
// для того, чтобы пользователю не пришлось ждать смены картинок // перед загрузкой первой картинки, // сразу же вызываем функцию getNextPic(), которая покажет первую картинку сразу при загрузке getNextPic(); // а также устанавливаем интервал, с которым должна вызываться данная фнкция в дальнейшем. // Дклаем это при помощи метода setInterval(). Первый параметр - имя функции, //второй - время интервала в миллисекундах, то есть 1500 - 1,5 секунды setInterval(getNextPic, 1500); Перед вами пример простейшего слайд-шоу на flash, котрое работает без xml файлов и получает список файлов в папке при помощи php скрипта. Скачать исходник можно отсюда.
Почитать ещё:
|
 |
 |
|
 |
 |
|
|
 |
 |
|
 |
 |
|
Просмотров: 28108 |
 |
 |
#2 написал: Прохожий (15 октября 2009 04:33) |
 |
 |
|
 |
 |
ICQ: -- |
[цитировать] |
 |
 |
#23 написал: Александр (5 апреля 2010 09:57) |
 |
 |


Группа: Гости Регистрация: -- |
Уважаемый администратор, друзья, здравствуйте! Нужна Ваша помощь. Грубо говоря, постигать основы XML нет времени, возникла ситуация, когда руководство ставит задачу и ее нужно тупо выполнить: мои дети готовят оформление сайта колледжа, решил помочь и стал вопрос. Суть: сделали красивую Flash-галерею типа "карусель", соответственно получили XML-файл в комплекте, папку с картинками-исходниками. На компе работает, при загрузке флеш и всех приложенных файлов и папок на сайт через панель администратора и предпросмотре с помощью функции "проверить" указанная флеш воспроизводится нормально, карусель вращается. Но, т.к. сайт делаем в программе - визуальном конструкторе WebPageMaker, соответственно загружаем данную флеш (только исполняемый файл!) на страницу (перед этим через панель админ-ра удалив сам флеш с сайта). В итоге видим все тоже, что и ранее при тестировании через панель администратора: в одной папке лежат флеш, xml, папка с картинками. Тестим через панель - флеш крутится. Открываем (загружаем) уже сам сайт в браузере - вместо флеш видим рамку и сообщение об ошибке: LOAD FAIL. Не работает! Просим помощи! У нас в штате нет кодеров, есть только специалист технической поддержки :) |
|
 |
 |
ICQ: -- |
[цитировать] |
 |
 |
#28 написал: deryugin (3 октября 2010 22:00) |
 |
 |


Группа: Гости Регистрация: -- |
Залил на сервер исходник... Скрипт отвечает, а картинки не грузятся (или не показываются). Странно. у вас вот вроде работает. Похоже проблема как у #19. Чтоб не быть голословным: вот тут лежит флэшкаа вот тут, рядом с ней скриптну и картики в папке images |
|
 |
 |
ICQ: -- |
[цитировать] |
 |
Опечатались, когда набирали запрос? Не беда! :) фвщиу адфыр ehjrb bc[jlybrb фсешщтыскшзе akti флаш flesh crfxfnm
|