Уроки Flash: Створення інформера, Програми для роботи з графікою, Програмні керівництва, статті

Добрий всім годину, дорогі друзі!
У цьому уроці я розповім вам як, на основі 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 рази на добу, ми будемо щогодини перезавантажувати їх, для авто оновлення.



CODE

/ ******* Інстанси динамічних текстових полів ********
city ​​- Назва міста
today – Прогнозовані дата і час доби
phenomena – Хмарність і опади
termo – Температура повітря
pressure – Атмосферний тиск
relwet – Відносна вологість
windspeed – Швидкість вітру
********* Властивості об’єкта-хранителя поточного стану погоди *********
o.today – Дата
o.daytime – час доби
o.cloudsNum – Індекс хмарності
o.cloudsStr – Хмарність
o.precipitationNum – Індекс опадів
o.precipitationStr – опади
o.power – можливість опадів
o.pressureMin – Мінімальний тиск
o.pressureMax – Максимальний тиск
o.thermoMin – Мінімальна температура
o.thermoMax – Максимальна температура
o.wind_dir – Індекс напрямку вітру
o.windMin – мін. швидкість вітру
o.windMax – Макс. швидкість вітру
o.relwetMin – мін. відносна вологість
o.relwetMax – Макс. відносна вологість
********************************************/
/ / Напрямок вітру
var wind_dir: Array = [“північний”, “північно-східний”, “східний”, “південно-східний”, “південний”, “південно-західний”, “західний”, “північно-західний”];
/ / Хмарність
var clouds: Array = [“Ясно”, “Слабка”, “Хмарно”, “Сильна”];
/ / Опади
var precipitation: Array = [“”, “”, “”, “”, “дощ”, “злива”, “сніг”, “сніг”, “гроза”, “”, “без опадів”];
/ / Час доби
var timeday: Array = [“вночі”, “вранці”, “днем”, “увечері”];
/ / День тижня
var weekday: Array = [“”, “Воскресіння”, “Понеділок”, “Вівторок”, “середа”, “Четвер”, “П’ятниця”, “Субота”];
/ / Місяць
var months: Array = [“”, “січня”, “лютого”, “березня”, “квітня”, “травня”, “червня”, “липня”, “серпня”, “вересня”, “жовтня”, ” листопада “,” грудня “];
/ / В цей масив збережемо об’єкти з станами погоди
var current:Array;
/ / Дуля, що зберігає час останнього звернення до XML сторінці
var lso:SharedObject;
/ / Таймер
var id:Number;
/ / Час затримки, на перегляд стану погоди
var delay:Number = 10000;
/ / Кількість доступних станів погоди
var total:Number;
/ / Індекс вибраного стану
var select:Number;
/ / Об’єкт, для завантаження і збереження даних про погоду в XML форматі.
var meteo:XML = new XML();
meteo.ignoreWhite = true;
/ / Адреса XML сторінки
var meteo_adress:String=”http://informer.gismeteo.ru/xml/27612_1.xml”;//Moskva
/ ****************** ПРОЦЕДУРИ *************************** /
/ / Обробка натискання на посилання “Гізметео”. Умови ©.
link.onRelease = function() {
getURL(“http://informer.gismeteo.ru/#graph”,”_blank”);
};
/ * Функція завантаження XML даних і перезапису часу початку завантаження.
З неї стартуємо і її-ж будемо викликати щогодини, щоб оновлювати дані * /
function renew() {
lso = SharedObject.getLocal(“meteo”);
lso.timesaved = new Date().getTime();
lso.flush();
meteo.load(meteo_adress);

}
/ / При успішному закінченні завантаження XML документа, командуємо парсинг. Аргументом буде його блок з даними
meteo.onLoad = function(success:Boolean) {
success ? parse(this.firstChild.firstChild.firstChild) : null;
return;
};
/ * Розшифровка аргументу. В процесі створюємо потрібну кількість об’єктів, наділяємо їх “погодними” властивостями
і запам’ятовуємо в масиві. Потім командуємо циклічний показ станів погоди * /
function parse(arg:XML) {
/ / Обнулення масиву, таймера і індексів
current = [];
clearInterval(id);
total = select=0;
/ / Розшифровка назви міста
var na = arg.attributes.sname.split(“%”);
var addr:String = “”;
var lnum;
for (i=0; i<na.length; i++) {
 lnum = Number(“0x”+na[i])<128 ? Number(“0x”+na[i]) : Number(“0x”+na[i])+848;
 addr += String.fromCharCode(lnum);
}
/ / Показуємо назву міста
sity.autoSize = “center”;
sity.text = addr;
/ ******** Отримуємо погоду ******** /
/ / Кількість погодних записів
total = arg.childNodes.length;
for (var i = 0; i<total; i++) {
/ / Для кожного запису, створюємо свій об’єкт і починаємо наділяти його властивостями
 var o:Object = new Object();
 var curW:XML = arg.childNodes[i];
/ / Рядок: поточні день тижня, дата і час доби
 var str:String = weekday[curW.attributes.weekday]+” “+curW.attributes.day+” “+months[curW.attributes.month];
 str += ” – “+timeday[curW.attributes.tod];
 o.today = str;
 o.daytime = Number(curW.attributes.tod);
/ * Дані про погоду на поточний час доби (атрибутами). Індекси:
0 – атмосферні явища (хмарність, опади, гроза)
1 – атмосферний тиск
2 – температура повітря
3 – сила і напрямок вітру
4 – відносна вологість повітря
5 – термо комфорт
 ***********************************/
/ / Атмосферні явища
 var aw:XML = curW.childNodes[0];
 o.cloudsNum = Number(aw.attributes.cloudiness);
 o.cloudsStr = clouds[aw.attributes.cloudiness];
 o.precipitationNum = Number(aw.attributes.precipitation);
 o.precipitationStr = precipitation[aw.attributes.precipitation];
/ / Фразеологічна евристика 🙂
 switch (o.precipitationNum) {
case 8 :/ / Гроза
o.power = aw.attributes.spower == “0”? “Можлива”: “Очікується”;
  break;
case 10 :/ / без опадів
o.power = aw.attributes.rpower == “0”? “Можливо”: “Очікується”;
  break;
default :/ / дощ, сніг
o.power = aw.attributes.rpower == “0”? “Можливий”: “Очікується”;
 }
/ / Атмосферний тиск
 aw = curW.childNodes[1];
 o.pressureMin = aw.attributes.min;
 o.pressureMax = aw.attributes.max;
/ / Температура повітря
 aw = curW.childNodes[2];
 o.thermoMin = Number(aw.attributes.min)>0?”+”+aw.attributes.min:aw.attributes.min;
 o.thermoMax = Number(aw.attributes.max)>0?”+”+aw.attributes.max:aw.attributes.max;
/ / Сила і напрямок вітру
 aw = curW.childNodes[3];
 o.wind_dir = Number(aw.attributes.direction);
 o.windMin = aw.attributes.min;
 o.windMax = aw.attributes.max;
/ / Відносна вологість повітря
 aw = curW.childNodes[4];
 o.relwetMin = aw.attributes.min;
 o.relwetMax = aw.attributes.max;
 current.push(o);
}
/ / А тепер – шоу!
showInfo();
}
/ * Процедура, викликає себе, з інтервалом часу = “delay”.
При кожному виклику, циклічно обробляється наступний об’єкт з масиву “current”.
Дані, узяті з поточного об’єкта, формуються і распехіваются по текст.полям.
Крім цього, модифікуємо стан мнемонічних кліпів.
Після кожного повного проходу циклу, порівнюється поточний час з записаним в дулю.
Якщо різниця менше години, то повторюємо цикл показу, інакше – перезавантажуємо XML документ. * /
function showInfo() {
clearInterval(id);
var o:Object = current[select];
today.text = o.today;
phenomena.text = o.cloudsStr+”.
“+o.power+o.precipitationStr;
termo.text = o.thermoMin+”.. “+o.thermoMax+” C”;
pressure.text = “Тиск” + o.pressureMin + “..” + o.pressureMax + “мм. рт. ст.”;
relwet.text = “Вологість” + o.relwetMin + “% -” + o.relwetMax + “%.”;
windspeed.text = o.windMin + “-” + o.windMax + “м / сек.”;
wind.arrow._rotation=o.wind_dir*45;
weather.cloudiness.gotoAndStop(o.cloudsNum+1);
weather.precipitation.gotoAndStop(o.precipitationNum);
select++;
select %= total;
if (!select) {
 var timedif:Number = Math.floor((new Date().getTime()-lso.timesaved)/1000);
 timedif>3600 ? renew() : null;
}
id = setInterval(showInfo, delay);
}
/ / Запуск програми
renew();

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*