Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 37
Главная » Статьи » Статьи о флеш

Создание информера
Добрый всем час, дорогие друзья!
В этом уроке я расскажу вам как, на основе xml данных, сделать собственный Flash информер. Урок готовился и тестировался в 8 версии Flash.
Для обеспечения работы проекта, необходимо иметь входные данные, которые, затем, нужно обработать и показать. И самый лучший вариант – это прямые ссылки на данные в формате xml, их Flash расщелкает, как орешки.
В качестве примера могут служить rss странички. Допустим портал новостей.
Кстати и подобную информацию вы сможете таким же образом обработать и выставить и, тогда, ваш информер превратится в ньюсридер.
Для этого урока мы воспользуемся прямыми ссылками, любезно предоставляемыми погодным проектом Gismeteo.ru .
Обязательно сделайте в информере ссылку на сайт Gismeteo.ru. Это является условием использования информации.
К сожалению, я не смогу представить вам рабочий вариант информера, из-за ограничений политики безопасности, но локально он у вас работать будет, после «прописки» его в «песочнице».

Подготовка

В процессе выбора между текстовым и мнемоническим вариантами информера, мною был создан этакий мутант с сознательным нарушением дизайнерских канонов. Перенасыщенность информацией обусловлена моим желанием показать вам оба варианта, «в одном флаконе».
Я создал новый однокадровый документ с 4 слоями размерами 200х150 и расположил элементы и объекты, как на рисунке.



На слое "as” расположен код
На слое "pics” расположены 2 мнемонических клипа, показывающие: первый - состояние облачности и осадков, а второй - направление ветра.
На слое "bg” расположена верхняя подложка под названием города
На слое "txt” расположены текстовые поля, их инстансы вы видите на рисунке, а также кнопка со ссылкой на сайт Gismeteo.ru.
Клип-флюгер имеет инстанс «wind» и состоит из 2 слоев. На нижнем слое нарисован компас, а в верхнем расположен клип со стрелкой направленной вверх, имеющей точку регистрации посередине и инстанс «arrow».
Погодный клип с инстансом «weather», тоже имеет 2 слоя. В нижнем слое расположен клип с картинками облачности и инстансом «cloudiness», в верхнем – клип с картинками осадков и инстансом «precipitation».Разобраться в структуре этого «бутерброда», вы сможете здесь. Полупрозрачные бирюзовые



Теперь нам осталось, на главной сцене проекта выделить кадр на слое "as” и нажать «F9», вызвав панель «Actions for Frame».

Программирование

Если вы рассмотрите исходную xml страничку, полученную с Gismeteo.ru, по, выбранной вами, ссылке, то вы увидите, что основную информацию содержат 4 «потомка» с одинаковой структурой, но разными значениями узлов. Каждый потомок информирует о состоянии погоды в определенное время суток.
При успешной загрузке xml, в процедуре парсинга, мы, для каждого состояния погоды, создадим свой объект, «приделаем» ему уникальные погодные свойства и запомним его в массиве.
Потом, поочередно будем брать данные из объектов и показывать их в информере.
Поскольку данные на Gismeteo.ru обновляются 4 раза в сутки, мы будем ежечасно перезагружать их, для авто обновления.

001./*******Инстансы динамических текстовых полей********
002. sity - Название города
003. today - Прогнозируемые дата и время суток
004. phenomena - Облачность и осадки
005. termo - Температура воздуха
006. pressure - Атмосферное давление
007. relwet - Относительная влажность
008. windspeed - Скорость ветра
009. *********Свойства объекта-хранителя текущего состояния погоды*********
010. o.today - Дата
011. o.daytime - время суток
012. o.cloudsNum - Индекс облачности
013. o.cloudsStr - Облачность
014. o.precipitationNum - Индекс осадков
015. o.precipitationStr - осадки
016. o.power - возможность осадков
017. o.pressureMin - Минимальное давление
018. o.pressureMax - Максимальное давление
019. o.thermoMin - Минимальная температура
020. o.thermoMax - Максимальная температура
021. o.wind_dir - Индекс направления ветра
022. o.windMin - Мин. скорость ветра
023. o.windMax - Макс. скорость ветра
024. o.relwetMin - Мин. относительная влажность
025. o.relwetMax - Макс. относительная влажность
026. ********************************************/
027. //Направление ветра
028. var wind_dir:Array = ['северный', 'северо-восточный', 'восточный', 'юго-восточный', 'южный', 'юго-западный', 'западный', 'северо-западный'];
029. //Облачность
030. var clouds:Array = ['Ясно', 'Малооблачно', 'Облачно', 'Пасмурно'];
031. //Осадки
032. var precipitation:Array = ['', '', '', '', 'дождь', 'ливень', 'снег', 'снег', 'гроза', '', 'без осадков'];
033. //Время суток
034. var timeday:Array = ['ночью', 'утром', 'днем', 'вечером'];
035. //День недели
036. var weekday:Array = ['', 'Воскресение', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
037. //Месяц
038. var months:Array = ['', 'января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
039. //В этот массив сохраним объекты с состояниями погоды
040. var current:Array;
041. //Кукиш, хранящий время последнего обращения к XML страничке
042. var lso:SharedObject;
043. //Таймер
044. var id:Number;
045. //Время задержки, на просмотр состояния погоды
046. var delay:Number = 10000;
047. //Кол-во доступных состояний погоды
048. var total:Number;
049. // Индекс выбранного состояния
050. var select:Number;
051. //Объект, для загрузки и хранения данных о погоде в XML формате.
052. var meteo:XML = new XML();
053. meteo.ignoreWhite = true;
054. //Адрес XML страницы
055. var meteo_adress:String="http://informer.gismeteo.ru/xml/27612_1.xml";//Moskva
056. /******************ПРОЦЕДУРЫ***************************/
057. //Обработка нажатия на ссылку "Гизметео". Условия ©.
058. link.onRelease = function() {
059. getURL('http://informer.gismeteo.ru/#graph","_blank');
060. };
061. /*Функция загрузки XML данных и перезаписи времени начала загрузки.
062. С нее стартуем и ее-же будем вызывать ежечасно, чтоб обновлять данные*/
063. function renew() {
064. lso = SharedObject.getLocal('meteo');
065. lso.timesaved = new Date().getTime();
066. lso.flush();
067. meteo.load(meteo_adress);
068. 
069. }
070. //При успешном окончании загрузки XML документа, командуем парсинг. Аргументом будет его блок с данными
071. meteo.onLoad = function(success:Boolean) {
072. success ? parse(this.firstChild.firstChild.firstChild) : null;
073. return;
074. };
075. /*Расшифровка аргумента. В процессе создаем нужное кол-во объектов, наделяем их "погодными" свойствами
076. и запоминаем в массиве. Потом командуем циклический показ состояний погоды*/
077. function parse(arg:XML) {
078. //Обнуление массива, таймера и индексов
079. current = [];
080. clearInterval(id);
081. total = select=0;
082. //Расшифровка названия города
083. var na = arg.attributes.sname.split('%');
084. var addr:String = '';
085. var lnum;
086. for (i=0; i<na.length; i++) {
087.   lnum = Number('0x'+na[i])<128 ? Number('0x'+na[i]) : Number('0x'+na[i])+848;
088.   addr += String.fromCharCode(lnum);
089. }
090. //Показываем название города
091. sity.autoSize = 'center';
092. sity.text = addr;
093. /********Получаем погоду********/
094. //Кол-во погодных записей
095. total = arg.childNodes.length;
096. for (var i = 0; i<total; i++) {
097.   //Для каждой записи, создаем свой объект и начинаем наделять его свойствами
098.   var o:Object = new Object();
099.   var curW:XML = arg.childNodes[i];
100.   //строка: текущие день недели, дата и время суток
101.   var str:String = weekday[curW.attributes.weekday]+' '+curW.attributes.day+' '+months[curW.attributes.month];
102.   str += ' - '+timeday[curW.attributes.tod];
103.   o.today = str;
104.   o.daytime = Number(curW.attributes.tod);
105.   /*Данные о погоде на текущее время суток (атрибутами). Индексы:
106.   0 - атмосферные явления (облачность, осадки, гроза)
107.   1 - атмосферное давление
108.   2 - температура воздуха
109.   3 - сила и направление ветра
110.   4 - относительная влажность воздуха
111.   5 - термо комфорт
112.   ***********************************/
113.   //атмосферные явления
114.   var aw:XML = curW.childNodes[0];
115.   o.cloudsNum = Number(aw.attributes.cloudiness);
116.   o.cloudsStr = clouds[aw.attributes.cloudiness];
117.   o.precipitationNum = Number(aw.attributes.precipitation);
118.   o.precipitationStr = precipitation[aw.attributes.precipitation];
119.   //Фразеологическая эвристика <img src="http://src.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile">
120.   switch (o.precipitationNum) {
121.   case 8 ://Гроза
122.    o.power = aw.attributes.spower == '0' ? 'Возможна ' : 'Ожидается ';
123.    break;
124.   case 10 ://без осадков
125.    o.power = aw.attributes.rpower == '0' ? 'Возможно ' : 'Ожидается ';
126.    break;
127.   default ://дождь, снег
128.    o.power = aw.attributes.rpower == '0' ? 'Возможен ' : 'Ожидается ';
129.   }
130.   //атмосферное давление
131.   aw = curW.childNodes[1];
132.   o.pressureMin = aw.attributes.min;
133.   o.pressureMax = aw.attributes.max;
134.   //температура воздуха
135.   aw = curW.childNodes[2];
136.   o.thermoMin = Number(aw.attributes.min)>0?'+'+aw.attributes.min:aw.attributes.min;
137.   o.thermoMax = Number(aw.attributes.max)>0?'+'+aw.attributes.max:aw.attributes.max;
138.   //сила и направление ветра
139.   aw = curW.childNodes[3];
140.   o.wind_dir = Number(aw.attributes.direction);
141.   o.windMin = aw.attributes.min;
142.   o.windMax = aw.attributes.max;
143.   //относительная влажность воздуха
144.   aw = curW.childNodes[4];
145.   o.relwetMin = aw.attributes.min;
146.   o.relwetMax = aw.attributes.max;
147.   current.push(o);
148. }
149. //А теперь - шоу!
150. showInfo();
151. }
152. /*Процедура, вызывает себя, с интервалом времени = "delay".
153. При каждом вызове, циклически обрабатывается следующий объект из массива "current".
154. Данные, взятые из текущего объекта, формируются и распехиваются по текст.полям.
155. Кроме этого, модифицируем состояние мнемонических клипов.
156. После каждого полного прохода цикла, сравнивается текущее время с записанным в кукиш.
157. Если разница меньше часа, то повторяем цикл показа, иначе - перезагружаем XML документ.*/
158. function showInfo() {
159. clearInterval(id);
160. var o:Object = current[select];
161. today.text = o.today;
162. phenomena.text = o.cloudsStr+'.\n'+o.power+o.precipitationStr;
163. termo.text = o.thermoMin+'.. '+o.thermoMax+' C';
164. pressure.text = 'Давление '+o.pressureMin+'.. '+o.pressureMax+' мм. рт. ст.';
165. relwet.text = 'Влажность '+o.relwetMin+'% - '+o.relwetMax+'%.';
166. windspeed.text = o.windMin+' - '+o.windMax+' м/сек.';
167. wind.arrow._rotation=o.wind_dir*45;
168. weather.cloudiness.gotoAndStop(o.cloudsNum+1);
169. weather.precipitation.gotoAndStop(o.precipitationNum);
170. select++;
171. select %= total;
172. if (!select) {
173.   var timedif:Number = Math.floor((new Date().getTime()-lso.timesaved)/1000);
174.   timedif>3600 ? renew() : null;
175. }
176. id = setInterval(showInfo, delay);
177. }
178. //Запуск программы
Категория: Статьи о флеш | Добавил: Falanga (15.03.2010)
Просмотров: 673 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Суббота
27.04.2024
21:49


Логин:
Пароль:
Текст/Код

Онлайн всего: 1
Гостей: 1
Пользователей: 0
200


Хостинг от uCoz