Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. XML

Yahoo の API を AS3 の便利な天気予報アプリを構築します。

by
Read Time:13 minsLanguages:

Japanese (日本語) translation by Hakima Madani (you can also view the original English article)

このチュートリアルの助けを借りては、ヤフー天気予報 API を使用して取得し、AS3 で天気予報を表示する方法を学びます。

最終結果のプレビュー

に向けて取り組んで最終結果を見てをみましょう。

手順 1: 新しいファイルを作成します。

私は Flex または標準の AS3 プロジェクトでこれを行うことができますが、フラッシュ使用する想定しています。

フラッシュを開く、ファイルに行く > 新しい Flash ファイル (ActionScript 3.0) を選択、サイズを 320x180px に設定し、たい場所に fla ファイルを保存します。

Weather Application Step 1Weather Application Step 1Weather Application Step 1

手順 2: ドキュメント クラスを作成します。

今ファイルに行く > 新しい、この時間 ActionScript ファイルを選択し、それを同じフォルダーに Weather.as として保存で、FLA ファイルを保存しました。 戻ってあなたの FLA をプロパティに移動し、「クラス」空間の ActionScript ファイルの名前を書くに行きます。(ドキュメント クラスの使い方の詳細については、この簡単な紹介を読む。)

Weather Application Step 2Weather Application Step 2Weather Application Step 2Weather Application Step 2Weather Application Step 2Weather Application Step 2

ステップ 3: ドキュメント クラスを設定します。

ActionScript ファイルに移動し、ドキュメント クラスのコードを記述します。

それをテストし、出力ウィンドウに「これは天気クラスである」それをトレースする必要があります。

ステップ 4: Yahoo 天気予報 API をチェックしてください。

Yahoo開発者サイトのYahoo Weather APIセクションにアクセスしてください。 そこにはYahoo Weather APIについての説明がいくつかあります。

Weather Application Step 4Weather Application Step 4Weather Application Step 4

ステップ 5: XML を質問します。

我々 は非常に単純なそれを要求する方法を知る必要がある XML ファイルは、我々 が Flash で読む必要があります。 天気を知りたい場所と気温を知りたい単位(摂氏または華氏)を考える必要があります。 それから、あなたはこのURLを通してこのデータでXMLを得ることができます:

ステップ 6: 位置番号の取得

場所の数は、WOEID にする必要があります。あなたの WOEID を見つけるに参照または Yahoo 天気予報のホームページからあなたの街を検索します。 WOEID は、その都市の天気予報のページの URL にあります。WOEID は、ホーム ページにあなたの郵便番号を入力しても得ることができます。 たとえば、ロサンゼルスの天気ホーム ページを検索する場合その都市の天気予報のページです: http://weather.yahoo.com/united-states/california/los-angeles-2442047/、WOEID、2442047。

ステップ 7: XML を理解すること

すべての天候の位置を要求すると、このような XML は、何を受け取るでしょう。

(すべての XML を理解する場合は、参照してください http://developer.yahoo.com/weather/。)

このアプリケーションの我々 が必要なものは yweather:location タグ、yweather:atmosphere タグと yweather:forecast タグ: location タグが場所のテキストを与える私たち、雰囲気タグは私たちに湿度を与えるし、予測のタグになります、現在、次の日の温度。

ステップ 8: 解析します。

今、我々 は、XML がのよりよい理解を持って、必要な行うは、我々 は我々 のアプリケーションを設定するのにはそのデータを使用できるようにするデータを変数に割り当てます。 そのためには、いくつかの変数を作成し、XML をロードする必要があります。これはそれを行う方法 (コードは、ドキュメント クラスで関連する場所)。

コードのしこりに行きましょう。

(プライベート変数として定義した) すべての関数の外側で定義する _xmlData 変数が必要なは、1 つの関数内だけでなく、コードのどこにでもそれを取得する必要がありますので。

最初の関数、loadXML()、フラッシュに、XML ファイルの負荷loadData() を実行し、チェックが完了したときにイベント リスナーを使用します。

LoadData() 関数は、我々 が既に作成している _xmlData 変数に受信したデータを割り当てます。ヤフー (検索できます詳細については名前空間 livedocs.adobe.com に) XML を設定することを決めた方法であるために、名前空間を使用します。 この関数の他の変数は、XML からこのアプリで見せたい情報を抽出します。

(AS3 で XML の解析について詳しくは、チェック アウト Dru Kepple AS3:101 - XML チュートリアルします。)

ステップ 9: テキスト フィールドを作成します。

今、我々 はその情報を表示する必要があります。そう我々 のコードにテキスト フィールドを作成し、形式とテキストを割り当てるが、Flash IDE を使用して時間を節約することを好みます。 創造性を得て、我々 は 8 つのテキスト フィールドを必要があります: 温度、湿度、最大温度、現在の日の最低気温。 それから、翌日の最高気温と最低気温、翌日の名前と最低1つの場所が必要です。 情報を割り当てることができるように、それらはすべて動的テキストフィールドである必要があります。

すべてのあなたのテキスト フィールドにインスタンス名を与えることを忘れないでください。私は温度湿度maxminmaxtミント明日、状態を選択しました。

Weather Application Step 9Weather Application Step 9Weather Application Step 9

ステップ 10: 情報を表示します。

今ではテキスト フィールドを作成したら、我々 は、情報を割り当てる必要があります、我々 は、XML から取得しました。そのため各テキスト フィールドと我々 は既にある、この (追加するような既存の loaddata()) 情報のインスタンス名が必要です。

作成した8つのテキストフィールドを覚えていますか。 今度はコードでこれらの名前を使用する必要があります。 そのswitch文は、 "Wed"、 "Thu"、 "Fri"だけを表示したくないので、名前全体を表示したいのです。

ステップ 11: いくつかのスタイルを追加します。

今我々 はちょうどテキストを持っています。それは、その日の天気によっていくつかのアイコンを追加するとよいでしょう。作成または天気アイコンの設定を確認し、天候に応じてアイコンを割り当てるに我々 が必要なものです。 Yahoo から 1 つのイメージを読み込むことができますが、それは見つけることが素晴らしいので私たち独自のセット。そのため、アイコンのセットをダウンロード フラッシュにそれらをインポートし、適切なクラス名と ActionScript の各 1 つをエクスポートします。

Weather Application Step 11Weather Application Step 11Weather Application Step 11

使用しているアイコンは Garmahis から、garmahis.com からダウンロードすることができます。私たちはそれらを使用させるため Garmahis に大感謝!

ステップ 12: アイコンを追加します。

今天気コードでは、XML で、に応じて正しいアイコンをロードするがあります。同様、曜日名、我々 は本当に大きなスイッチで. これを行うことができますが、まずアイコンを含むムービー クリップを作成します。

今のアイコン:

ここで私はちょうど 13 アイコンを使用が場合、もっとまたはより少ない、あなたが使用できます。だけを覚えて、Yahoo はそれらを割り当てることがあるので 40 コードを使用してすべてのアイコンに。Developer.yahoo.com でのすべてのコードの意味のリストを見ることができます。

手順 13: 反転効果を追加します。

まあ、ハードの部分を紹介してきた今素敵に見えるようにしましょう。詳細を追加、または場所を変更する場合、我々 は 1 つのムービー クリップにしましたすべてをあげるので我々 より多くのスペースとなります。 そのためには、すべて選択し、F8キーを押して(シンボルに変換し)、新しいシンボルをActionScript用に書き出します。クラス名はFrontです。 次に、ステージからそれを削除し、背景を作成して、これをムービークリップに変換し、それをActionScriptにもエクスポートします。クラス名はBackです。

My Front symbol
My Back symbol

今、ActionScript ファイルからそれらを呼びましょう。

ステップ 14: トゥイーンを設定します。

私たちは私たちの映画のクリップを持っているので反転にする必要があります。行うには我々 が http://code.google.com/p/tweener/ で見つけることができる Tweener ライブラリを使用しています。 、それをダウンロードし、\caurina\ フォルダーはあなたのフロリダ州と同じフォルダーにそれを抽出

このプロジェクトのちょうど 1 つの関数を使用している: 反転するクールな外観を turnAround() 関数を使用してそれを作ってあげます。ドキュメント クラスの適切な場所に次のコードを置きます。

手順 15: 場所を追加します。

今、我々 は、背中でより多くのスペースを持って我々 はより多くの州を追加できます情報や何をしたいのか。簡単に言えば、私はより多くの場所を追加します。 Flashに移動してCtrl + F7(Windows)またはCommand + F7(Mac)を押して、コンポーネントパネルを表示するだけです。 コンボボックスをライブラリにドラッグしてから、これをドキュメントクラスに追加します。

ステップ 16: お楽しみください!

今あなたのアプリケーションをお楽しみいただけます, 派手なものや (yahoo! を忘れていない) クレジットを追加

結論

今この天気予報アプリケーションの多くを学んだことを願ってコメント欄に任意の質問がある場合があります。

あなたは、読書のためのおかげでこのチュートリアルを好き願っています!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.