() translation by (you can also view the original English article)
Dengan bantuan dari tutorial ini Anda akan belajar bagaimana menggunakan Yahoo API cuaca untuk mendapatkan dan ditampilkan Prakiraan cuaca dengan AS3.
Hasil akhir Tinjauan
Mari kita lihat pada hasil akhir yang kita akan bekerja menuju:
Langkah 1: Buat sebuah File baru
Saya mengasumsikan Anda akan menggunakan Flash, meskipun Anda dapat melakukan ini dengan Flex atau standar proyek AS3 .
Buka Flash, pergi ke File > New, pilih File Flash (ActionScript 3.0), kemudian mengatur ukuran sebagai 320x180px dan menyimpan FLA kemanapun Anda inginkan.



Langkah 2: Buat sebuah dokumen Class
Sekarang pergi ke File > New dan kali ini pilih ActionScript File, kemudian menyimpannya sebagai Weather.as dalam folder yang sama tempat Anda menyimpan file FLA Anda. Kemudian pergi kembali ke FLA Anda, pergi ke Properties dan menulis nama ActionScript file di ruang "Kelas". (Untuk info lebih lanjut tentang cara menggunakan kelas dokumen, baca pengenalan cepat disini.)






Langkah 3: Mengatur dokumen Class
Pergi ke ActionScript file dan menulis kode untuk kelas dokumen Anda:
1 |
package{ |
2 |
|
3 |
import flash.display.MovieClip; |
4 |
|
5 |
//the name of the class has to be the same as the file
|
6 |
public class Weather extends MovieClip{ |
7 |
|
8 |
//Constructor: this function has to have the same name as the file and class
|
9 |
public function Weather(){ |
10 |
|
11 |
trace("This is your weather class"): |
12 |
|
13 |
}
|
14 |
}
|
15 |
}
|
Menguji dan itu harus melacak "Ini adalah kelas cuaca Anda" di jendela output.
Langkah 4: Memeriksa Yahoo API cuaca
Mendapatkan diri Anda ke bagian Yahoo Weather API dari Yahoo pengembang situs; di sana Anda akan menemukan beberapa penjelasan tentang Yahoo cuaca API.



Langkah 5: Meminta XML Anda
Apa yang kita butuhkan untuk membaca di Flash adalah sebuah file XML, jadi kita perlu tahu bagaimana untuk meminta itu, mana cukup sederhana. Anda harus berpikir tentang dimana Anda ingin tahu cuaca dan apa unit (Celcius atau Fahrenheit) Anda ingin suhu. Kemudian, Anda bisa mendapatkan XML dengan data ini melalui URL ini:
1 |
var url:String = "http://weather.yahooapis.com/forecastrss" + "?w=" + (location number) + "&u=" + ("c" for celcius or "f" for fahrenheit); |
Langkah 6: Mendapatkan nomor lokasi
Nomor lokasi harus WOEID. Untuk menemukan WOEID Anda, telusuri untuk kota Anda dari Yahoo Weather home page. WOEID adalah URL halaman ramalan kota itu. Anda juga bisa mendapatkan WOEID dengan memasukkan kode pos Anda pada home page. Misalnya, jika Anda mencari untuk Los Angeles pada cuaca home page, halaman ramalan kota itu adalah: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, jadi WOEID adalah 2442047.
Langkah 7: Memahami XML
Ketika Anda meminta setiap lokasi cuaca, apa yang akan Anda terima adalah XML seperti ini:
1 |
<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"> |
2 |
<channel>
|
3 |
<title>Yahoo! Weather - Los Angeles, CA</title> |
4 |
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link> |
5 |
<description>Yahoo! Weather for Los Angeles, CA</description> |
6 |
<language>en-us</language> |
7 |
<lastBuildDate>Mon, 01 Mar 2010 5:47 am PST</lastBuildDate> |
8 |
<ttl>60</ttl> |
9 |
<yweather:location city="Los Angeles" region="CA" country="United States"/> |
10 |
<yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/> |
11 |
<yweather:wind chill="12" direction="0" speed="0" /> |
12 |
<yweather:atmosphere humidity="80" visibility="16.09" pressure="1018.4" rising="1" /> |
13 |
<yweather:astronomy sunrise="6:22 am" sunset="5:49 pm"/> |
14 |
<image>
|
15 |
<title>Yahoo! Weather</title> |
16 |
<width>142</width> |
17 |
<height>18</height> |
18 |
<link>http://weather.yahoo.com</link> |
19 |
<url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url> |
20 |
</image>
|
21 |
<item>
|
22 |
<title>Conditions for Los Angeles, CA at 5:47 am PST</title> |
23 |
<geo:lat>34.05</geo:lat> |
24 |
<geo:long>-118.25</geo:long> |
25 |
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link> |
26 |
<pubDate>Mon, 01 Mar 2010 5:47 am PST</pubDate> |
27 |
<yweather:condition text="Fair" code="33" temp="12" date="Mon, 01 Mar 2010 5:47 am PST" /> |
28 |
<description><![CDATA[> |
29 |
<img src="http://activetuts.s3.amazonaws.com/tuts/093_weather/Tutorial/http://l.yimg.com/a/i/us/we/52/33.gif"/><br /> |
30 |
<b>Current Conditions:</b><br /> |
31 |
Fair, 12 C<BR /> |
32 |
<BR /><b>Forecast:</b><BR /> |
33 |
Mon - Mostly Cloudy. High: 20 Low: 10<br /> |
34 |
Tue - AM Clouds/PM Sun. High: 19 Low: 9<br /> |
35 |
<br /> |
36 |
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/> |
37 |
(provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/> |
38 |
]]></description>
|
39 |
<yweather:forecast day="Mon" date="1 Mar 2010" low="10" high="20" text="Mostly Cloudy" code="28" /> |
40 |
<yweather:forecast day="Tue" date="2 Mar 2010" low="9" high="19" text="AM Clouds/PM Sun" code="30" /> |
41 |
<guid isPermaLink="false">USCA0638_2010_03_01_5_47_PST</guid> |
42 |
</item>
|
43 |
</channel>
|
44 |
</rss><!-- api7.weather.re4.yahoo.com compressed/chunked Mon Mar 1 06:59:00 PST 2010 --> |
(Jika Anda ingin memahami semua XML, silahkan kunjungi http://developer.yahoo.com/weather/.)
Untuk aplikasi ini apa yang kita butuhkan adalah yweather:location tag, yweather:atmosphere tag dan yweather:forecast Tag: tag lokasi akan memberi kita teks untuk lokasi, tag suasana akan memberi kita kelembaban dan tag ramalan akan memberi kita suhu saat ini dan hari berikutnya.
Langkah 8: Menguraikannya
Sekarang bahwa kita memiliki pemahaman yang baik dari semua XML itu, apa yang perlu kita lakukan adalah menetapkan data ke variabel sehingga kita dapat menggunakan data tersebut untuk mengatur aplikasi kita. Untuk itu kita perlu membuat beberapa variabel dan beban XML. Ini adalah bagaimana Anda melakukannya (menempatkan kode di tempat yang relevan di kelas dokumen Anda):
1 |
//This is going to contain all the data from the XML
|
2 |
private var _xmlData:XML; |
3 |
//This is going to be the url of the XML that we will load
|
4 |
private var _xmlURL:String; |
5 |
|
6 |
private function loadXML(xmlURL:String):void { |
7 |
var loader:URLLoader = new URLLoader(); |
8 |
var request:URLRequest = new URLRequest(_xmlURL); |
9 |
|
10 |
loader.load(request); |
11 |
loader.addEventListener(Event.COMPLETE, loadData); |
12 |
}
|
13 |
|
14 |
private function loadData(event:Event):void { |
15 |
_xmlData = new XML(event.currentTarget.data); |
16 |
|
17 |
var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0"); |
18 |
var day:String = _xmlData.channel.item.yweather::forecast[0].@day; |
19 |
var codeToday:String = _xmlData.channel.item.yweather::forecast[0].@code; |
20 |
var codeTomorrow:String = _xmlData.channel.item.yweather::forecast[1].@code; |
21 |
}
|
Mari kita pergi ke kode yang bermasalah.
Anda perlu _xmlData variabel untuk didefinisikan di luar semua fungsi (saya sudah didefinisikan sebagai variabel pribadi) karena Anda akan perlu untuk mendapatkan di mana-mana dalam kode, bukan hanya dalam satu fungsi.
Fungsi pertama, loadXML(), banyak XML file ke Flash; Kami menggunakan pendengar acara untuk memeriksa ketika itu selesai, kemudian jalankan loadData().
Fungsi loadData() menetapkan variabel _xmlData yang kami telah membuat data yang diterima. Kami menggunakan namespace karena itulah bagaimana Yahoo memutuskan untuk mendirikan XML mereka (Anda dapat menemukan lebih banyak tentang namespaces di livedocs.adobe.com). Variabel-variabel lainnya dalam fungsi ini ekstrak informasi yang kami ingin menunjukkan di app kami dari XML.
(Untuk informasi lebih lanjut mengenai parsing XML dalam AS3, check out Druid Kepple AS3:101 - XML tutorial.)
Langkah 9: Membuat Text Field
Sekarang kita perlu untuk menampilkan informasi tersebut. Untuk melakukannya, kita bisa membuat bidang teks dalam kode dan menetapkan format dan teks, tapi saya lebih suka menggunakan Flash IDE, untuk menghemat waktu. Jadi mendapatkan kreatif, kita perlu delapan bidang teks: suhu, kelembaban, suhu maksimum dan minimum temp untuk hari ini. Maka kita perlu suhu maksimum dan minimum temp untuk hari berikutnya, satu untuk nama hari berikutnya dan satu lagi yang menunjukkan lokasi. Mereka semua perlu bidang teks dinamis sehingga kami dapat memberikan info.
Jangan lupa untuk memberikan semua textfields Anda nama misalnya; Aku telah memilih suhu, kelembaban, max, min, maxt, mint, besok dan negara.



Langkah 10: Tampilan Info
Sekarang bahwa kami telah membuat bidang teks, kita perlu untuk menetapkan informasi yang kami retreived dari XML. Untuk itu kita perlu nama contoh masing-masing bidang teks dan info yang kita sudah miliki, seperti ini (menambahkan fungsi loadData() Anda yang sudah ada):
1 |
private function loadData(event:Event):void { |
2 |
|
3 |
_xmlData = new XML(event.currentTarget.data); |
4 |
|
5 |
var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0"); |
6 |
var day:String = _xmlData.channel.item.yweather::forecast[0].@day; |
7 |
var codeToday:String = _xmlData.channel.item.yweather::forecast[0].@code; |
8 |
var codeTomorrow:String = _xmlData.channel.item.yweather::forecast[1].@code; |
9 |
|
10 |
//Assigning the information to the text fields
|
11 |
maxt.text = _xmlData.channel.item.yweather::forecast[1].@high + " °F"; |
12 |
mint.text = _xmlData.channel.item.yweather::forecast[1].@low + " °F"; |
13 |
state.text = _xmlData.channel.yweather::location.@city; |
14 |
humidity.text = _xmlData.channel.yweather::atmosphere.@humidity + " %"; |
15 |
temp.text = _xmlData.channel.item.yweather::condition.@temp + " °F"; |
16 |
max.text = _xmlData.channel.item.yweather::forecast[0].@high + " °F"; |
17 |
min.text = _xmlData.channel.item.yweather::forecast[0].@low + " °F"; |
18 |
|
19 |
switch (day) { |
20 |
case "Sun": |
21 |
tomorrow.text = "Monday"; |
22 |
break; |
23 |
case "Mon": |
24 |
tomorrow.text = "Tuesday"; |
25 |
break; |
26 |
case "Tue": |
27 |
tomorrow.text = "Wednesday"; |
28 |
break; |
29 |
case "Wed": |
30 |
tomorrow.text = "Thursday"; |
31 |
break; |
32 |
case "Thu": |
33 |
tomorrow.text = "Friday"; |
34 |
break; |
35 |
case "Fri": |
36 |
tomorrow.text = "Saturday"; |
37 |
break; |
38 |
case "Sat": |
39 |
tomorrow.text = "Sunday" |
40 |
break; |
41 |
}
|
42 |
}
|
Ingat bidang teks delapan bahwa kita diciptakan? Sekarang kita harus menggunakan nama-nama di sini dalam kode. Pernyataan beralih itu adalah karena kita tidak ingin menunjukkan hanya "Rabu", "Kamis" atau "Jumat", kami ingin nama seluruh.
Langkah 11: Menambahkan Style
Sekarang kita memiliki hanya teks; itu akan menyenangkan untuk menambahkan beberapa ikon tergantung pada cuaca untuk hari itu. Jadi apa yang kita butuhkan adalah untuk membuat atau mencari satu set ikon cuaca dan menetapkan ikon tergantung pada cuaca. Kita dapat memuat satu gambar dari Yahoo, tetapi tidak bahwa bagus sehingga kita akan menemukan kami sendiri. Untuk itu, download set ikon dan impor mereka ke Flash, kemudian ekspor masing untuk ActionScript dengan nama kelas yang sesuai:



Saya menggunakan ikon dari Garmahis dan dapat didownload dari garmahis.com. Besar terima kasih kepada Garmahis untuk membiarkan kami menggunakannya!
Langkah 12: Menambahkan ikon
Sekarang kita harus memuat ikon benar tergantung pada cuaca kode yang kita miliki dalam XML kami. Seperti nama-nama hari-hari, kita dapat melakukan ini dengan beralih benar-benar besar... tapi pertama kita perlu membuat klip berisi ikon.
1 |
private var _weatherToday:MovieClip = new MovieClip; |
2 |
private var _weatherTomorrow:MovieClip = new MovieClip; |
3 |
|
4 |
//below code goes in constructor
|
5 |
addChild(_weatherToday); |
6 |
addChild(_weatherTomorrow); |
7 |
_weatherToday .x = -80; |
8 |
_weatherToday .y = -40; |
9 |
_weatherTomorrow .x = 115; |
10 |
_weatherTomorrow .y = -60; |
Dan sekarang ikon:
1 |
//this code goes in the loadData() function
|
2 |
switch (codeToday) { |
3 |
|
4 |
case "28": |
5 |
case "3200": |
6 |
case "30": |
7 |
case "44": |
8 |
var weather01:weather01 = new weather01(); |
9 |
_weatherToday.addChild(weather01); |
10 |
_weatherToday.scaleX = 0.7; |
11 |
_weatherToday.scaleY = 0.7; |
12 |
break; |
13 |
|
14 |
case "32": |
15 |
case "34": |
16 |
var weather02:weather02 = new weather02(); |
17 |
_weatherToday.addChild(weather02); |
18 |
_weatherToday.scaleX = 0.7; |
19 |
_weatherToday.scaleY = 0.7; |
20 |
break; |
21 |
|
22 |
case "24": |
23 |
case "25": |
24 |
var weather03:weather03 = new weather03(); |
25 |
_weatherToday.addChild(weather03); |
26 |
_weatherToday.scaleX = 0.7; |
27 |
_weatherToday.scaleY = 0.7; |
28 |
break; |
29 |
|
30 |
case "0": |
31 |
case "1": |
32 |
case "2": |
33 |
case "22": |
34 |
case "36": |
35 |
case "42": |
36 |
case "43": |
37 |
var weather04:weather04 = new weather04(); |
38 |
_weatherToday.addChild(weather04); |
39 |
_weatherToday.scaleX = 0.7; |
40 |
_weatherToday.scaleY = 0.7; |
41 |
break; |
42 |
|
43 |
case "19": |
44 |
case "20": |
45 |
case "21": |
46 |
case "23": |
47 |
case "26": |
48 |
var weather05:weather05 = new weather05(); |
49 |
_weatherToday.addChild(weather05); |
50 |
_weatherToday.scaleX = 0.7; |
51 |
_weatherToday.scaleY = 0.7; |
52 |
break; |
53 |
|
54 |
case "41": |
55 |
case "46": |
56 |
var weather06:weather06 = new weather06(); |
57 |
_weatherToday.addChild(weather06); |
58 |
_weatherToday.scaleX = 0.7; |
59 |
_weatherToday.scaleY = 0.7; |
60 |
break; |
61 |
|
62 |
case "3": |
63 |
case "4": |
64 |
case "37": |
65 |
case "38": |
66 |
case "39": |
67 |
case "45": |
68 |
case "47": |
69 |
var weather07:weather07 = new weather07(); |
70 |
_weatherToday.addChild(weather07); |
71 |
_weatherToday.scaleX = 0.7; |
72 |
_weatherToday.scaleY = 0.7; |
73 |
break; |
74 |
|
75 |
case "31": |
76 |
case "33": |
77 |
var weather08:weather08 = new weather08(); |
78 |
_weatherToday.addChild(weather08); |
79 |
_weatherToday.scaleX = 0.7; |
80 |
_weatherToday.scaleY = 0.7; |
81 |
break; |
82 |
|
83 |
case "27": |
84 |
case "29": |
85 |
var weather09:weather09 = new weather09(); |
86 |
_weatherToday.addChild(weather09); |
87 |
_weatherToday.scaleX = 0.7; |
88 |
_weatherToday.scaleY = 0.7; |
89 |
break; |
90 |
|
91 |
case "5": |
92 |
case "6": |
93 |
case "7": |
94 |
case "35": |
95 |
var weather10:weather10 = new weather10(); |
96 |
_weatherToday.addChild(weather10); |
97 |
_weatherToday.scaleX = 0.7; |
98 |
_weatherToday.scaleY = 0.7; |
99 |
break; |
100 |
|
101 |
case "8": |
102 |
case "10": |
103 |
case "13": |
104 |
case "14": |
105 |
case "15": |
106 |
case "16": |
107 |
case "17": |
108 |
case "18": |
109 |
var weather11:weather11 = new weather11(); |
110 |
_weatherToday.addChild(weather11); |
111 |
_weatherToday.scaleX = 0.7; |
112 |
_weatherToday.scaleY = 0.7; |
113 |
break; |
114 |
|
115 |
case "9": |
116 |
case "11": |
117 |
case "12": |
118 |
var weather12:weather12 = new weather012(); |
119 |
_weatherToday.addChild(weather12); |
120 |
_weatherToday.scaleX = 0.7; |
121 |
_weatherToday.scaleY = 0.7; |
122 |
break; |
123 |
|
124 |
|
125 |
case "40": |
126 |
var weather13:weather13 = new weather13(); |
127 |
_weatherToday.addChild(weather13); |
128 |
_weatherToday.scaleX = 0.7; |
129 |
_weatherToday.scaleY = 0.7; |
130 |
break; |
131 |
}
|
Dalam hal ini saya hanya menggunakan ikon 13 namun Anda dapat menggunakan lebih jika Anda inginkan, atau kurang, yang kepada Anda. Hanya ingat, Yahoo menggunakan kode 40, sehingga Anda harus menetapkan mereka untuk ikon. Anda dapat melihat daftar makna semua kode di developer.yahoo.com.
Langkah 13: Menambahkan efek Flip
Yah, kita telah membahas bagian yang sulit; Sekarang mari kita membuatnya tampak bagus. Jika kita ingin menambahkan informasi lebih lanjut atau mengubah lokasi kita akan membutuhkan lebih banyak ruang, sehingga kami akan menempatkan semua yang kami buat menjadi satu klip. Untuk melakukannya, cukup pilih itu semua, tekan F8 (untuk mengubahnya menjadi simbol) dan ekspor simbol baru untuk ActionScript, dengan nama depan kelas. Kemudian menghapusnya dari tahap, menciptakan latar belakang, dan mengubah ini untuk klip dan mengekspornya untuk ActionScript juga, dengan nama kelas kembali.


Sekarang mari kita sebut mereka dari file ActionScript kami:
1 |
private var _front:Front; |
2 |
private var _back:Back; |
3 |
|
4 |
//all below code goes in Weather() constructor
|
5 |
|
6 |
_front = new Front(); |
7 |
this.addChild(_front); |
8 |
_front.y = 100; |
9 |
_front.x = 160; |
10 |
_font.rotationY = 0; |
11 |
_front.btn.buttonMode = true; |
12 |
_front.btn.addEventListener(MouseEvent.CLICK, turnAround); |
13 |
_front.addChild(_weatherToday); |
14 |
|
15 |
//this is going to be behind so we don't want it to be visible yet, and we need to set the rotation to -180
|
16 |
_back = new Back(); |
17 |
_back.y = 100; |
18 |
_back.x = 160; |
19 |
_back.back.buttonMode = true; |
20 |
_back.back.addEventListener(MouseEvent.CLICK, turnAround); |
21 |
_back.rotationY = -180; |
22 |
_back.visible = false; |
23 |
this.addChild(_back); |
Langkah 14: Mengatur Tween
Kami memiliki klip kami, jadi sekarang kita perlu membuat flip. Untuk melakukan itu kita akan menggunakan perpustakaan Tweener yang dapat Anda temukan di http://code.google.com/p/tweener/. Men-download, dan ekstrak sehingga \caurina\ folder dalam folder yang sama sebagai fla Anda
Untuk proyek ini kita akan menggunakan hanya satu fungsi dari itu: kami akan membuatnya flip menggunakan fungsi turnAround() untuk terlihat keren. Menempatkan kode berikut di tempat yang tepat di kelas dokumen Anda:
1 |
import caurina.transitions.Tweener; |
2 |
|
3 |
private var _currentFace:String; |
4 |
|
5 |
//flip the faces and then calls the function that change the order of the faces and finish the animation
|
6 |
private function turnAround(event:MouseEvent):void { |
7 |
Tweener.addTween(_back, { rotationY: -90, onComplete:changeIndex, time:0.5, transition:"linear" } ); |
8 |
Tweener.addTween(_back, { scaleY:0.6, scaleX:0.6, time:0.3, transition:"linear" } ); |
9 |
Tweener.addTween(_front, { scaleY:0.6, scaleX:0.6, time:0.3, transition:"linear" } ); |
10 |
Tweener.addTween(_front, { rotationY:90, time:0.5, transition:"linear" } ); |
11 |
}
|
12 |
|
13 |
//we use a String, _currentFace, so it can know which face is in front
|
14 |
private function changeIndex():void { |
15 |
if (_currentFace == "front") { |
16 |
this.setChildIndex(_front, 0); |
17 |
Tweener.addTween(_back, { rotationY: 0, time:0.5, transition:"linear" } ); |
18 |
Tweener.addTween(_back, { scaleY:1, scaleX:1, time:0.6, transition:"linear" } ); |
19 |
Tweener.addTween(_front, { rotationY:180, time:0.5, transition:"linear" } ); |
20 |
Tweener.addTween(_front, { scaleY:1, scaleX:1, time:0.6, transition:"linear" } ); |
21 |
_currentFace = "back"; |
22 |
_front.visible = false; |
23 |
_back.visible = true; |
24 |
} else { |
25 |
this.setChildIndex(_back, 0); |
26 |
Tweener.addTween(_back, { rotationY: -180, time:0.5, transition:"linear" } ); |
27 |
Tweener.addTween(_back, { scaleY:1, scaleX:1, time:0.6, transition:"linear" } ); |
28 |
Tweener.addTween(_front, { rotationY:0, time:0.5, transition:"linear" } ); |
29 |
Tweener.addTween(_front, { scaleY:1, scaleX:1, time:0.6, transition:"linear" } ); |
30 |
_currentFace = "front"; |
31 |
_front.visible = true; |
32 |
_back.visible = false; |
33 |
}
|
34 |
}
|
Langkah 15: Tambahkan lokasi
Sekarang bahwa kita memiliki lebih banyak ruang di belakang kita dapat menambahkan lebih banyak negara atau info atau apa pun yang Anda inginkan. Secara singkat, saya akan menambahkan lebih banyak lokasi. Apa yang perlu kita lakukan adalah pergi ke Flash dan tekan Ctrl + F7 (Windows) atau Command + F7 (Mac) untuk mengungkapkan komponen panel. Tarik kotak Combo ke perpustakaan Anda, kemudian menambahkan ini ke kelas dokumen Anda:
1 |
import flash.xml.*; |
2 |
|
3 |
_comboBox = new ComboBox(); |
4 |
|
5 |
//inside the constructor
|
6 |
//the default text
|
7 |
_comboBox.prompt = "Choose your location:"; |
8 |
//repeat this for each location that you want to add
|
9 |
//remember to get the location's URL from the Yahoo site
|
10 |
comboBox.addItem( { Location:"Mahtomedi", url: "http://weather.yahooapis.com/forecastrss?w=2444293&u=c"} ); |
11 |
//calls the function that give the value to the ComboBox
|
12 |
_comboBox.labelFunction = nameLabelFunction; |
13 |
_comboBox.width = 150; |
14 |
_comboBox.editable = false; |
15 |
//calls the function that is going to change the data
|
16 |
_comboBox.addEventListener(Event.CHANGE, changeLocation); |
17 |
|
18 |
|
19 |
private function nameLabelFunction(item:Object):String { |
20 |
var str:String; |
21 |
if (item == null) { |
22 |
str = _comboBox.value; |
23 |
} else { |
24 |
str = item.Location ; |
25 |
}
|
26 |
return str; |
27 |
}
|
28 |
|
29 |
//reaload the data and reassign the data of your application
|
30 |
private function changeProvince(event:Event):void { |
31 |
loadXML(_comboBox.selectedItem.url); |
32 |
}
|
Langkah 16: menikmati!
Sekarang menikmati aplikasi Anda, tambahkan barang mewah dan kredit (jangan lupa Yahoo!)
Kesimpulan
Sekarang kita memiliki aplikasi cuaca kita saya harap Anda belajar banyak, jika Anda memiliki pertanyaan, hanya meninggalkan komentar.
Saya harap Anda menyukai tutorial ini, terima kasih untuk membaca!