Emanuele Feronato

Talking about Actionscript 3 and Flash.

If you have a touristic website about a city or a travel agency, it may be useful displaying the weather somewhere in the page.

There are hundreds of free services solving the task, but none of them comes without watermark, is fully customizable and has a dedicated AS3 API like Yahoo’s one.

Let’s see how to embed it in a Flash movie.

Download the ASTRA Web APIs

The Yahoo! ASTRA Web APIs library is a set of wrapper tools that facilitate access to Yahoo! public APIs from Flex and Flash applications. The library creates an abstraction layer above the communication protocols used by Yahoo! servers, enabling Flash and Flex developers to send and retrieve data without any manual parsing.

You can find the ASTRA Web APIs at this link.

Prepare your folder

Once you unzipped the file, copy the com directory inside the Source one in the main folder, the same you are using for your project, or create your project in the Source folder.

If you choose to copy the com directory, your folder will look like this:

The script

First, you need to retrieve your location code. Go to this page and search for the weather in your city. Then, look at the url of the page… in my case, looking for Venice, Italy, it’s this one:

http://weather.yahoo.com/forecast/ITXX0085.html

That means the city code for Venice is ITXX0085.

Now it’s time to look at the script:

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import com.yahoo.webapis.weather.*;
	import com.yahoo.webapis.weather.events.*;
	public class weather extends Sprite {
		var the_weather:WeatherService = new WeatherService();
		var text_field:TextField = new TextField();
		public function weather() {
			the_weather.getWeather("ITXX0085", "metric");
			the_weather.addEventListener(WeatherResultEvent.WEATHER_LOADED, show_weather);
			addChild(text_field);
			text_field.width=500;
			text_field.height=300;
			text_field.x=30;
			text_field.y=30;
		}
		function show_weather(event:WeatherResultEvent):void {
			var weather_string:String;
			weather_string="Temperature: "+event.data.current.temperature+" "+event.data.units.temperature+"\n";
			weather_string+="Description: "+event.data.current.description+"\n";
			weather_string+="Wind temperature: "+event.data.current.wind.chill+"\n";
			weather_string+="Wind direction: "+event.data.current.wind.direction+"°\n";
			weather_string+="Wind speed: "+event.data.current.wind.speed+"\n";
			weather_string+="Humidity: "+event.data.current.atmosphere.humidity+"%\n";
			weather_string+="Pressure: "+event.data.current.atmosphere.pressure+" "+event.data.units.pressure+"\n";
			weather_string+="Visibility: "+event.data.current.atmosphere.visibility+" "+event.data.units.distance+"\n";
			weather_string+="Sunrise: "+event.data.current.astronomy.sunrise+"\n";
			weather_string+="Sunset: "+event.data.current.astronomy.sunset+"\n";
			weather_string+="Image path: "+event.data.current.imageURL+"\n";
			weather_string+="Weather code: "+event.data.current.code+"\n";
			weather_string+="Last updated: "+event.data.timeToLive+"\n";
			weather_string+="City: "+event.data.location.city+" ("+event.data.location.country+")\n";
		}
	}
}

Line 7: Declaring a new weather service

Line 10: Getting the weather for my city code in metric values. You can pass metric or english

Line 11: Adding a listener waiting for the weather to be loaded

The following lines are just placed to output some event results… let’s see them all:

event.data.current.astronomy.sunrise: The date and time of current date’s sunrise

event.data.current.astronomy.sunset: The date and time of current date’s sunset

event.data.current.atmosphere.humidity: Current humidity

event.data.current.atmosphere.visibility: Current visibility

event.data.current.atmosphere.pressure: Current pressure

event.data.current.atmosphere.rising: Current pressure differential (“rising”, “dropping” or “steady”)

event.data.current.description: Current conditions description

event.data.current.temperature: Current temperature

event.data.current.imageURL: URL of an image corresponding to current conditons

event.data.current.code: Current condition code… you can use it to load your own weather icons… try to Google for Yahoo weather icons

event.data.location.city: The city where the weather is being reported.

event.data.location.region: The region where the weather is being reported.

event.data.location.country: The country where the weather is being reported.

event.data.location.longitude: The longitude corresponding to current weather.

event.data.location.latitude: The latitude corresponding to current weather.

event.data.units.temperature: The units used for reporting temperature.

event.data.units.distance: The units used for reporting distance.

event.data.units.pressure: The units used for reporting pressure.

event.data.units.speed: The units used for reporting speed.

event.data.link: The URL for the weather.yahoo.com page for the corresponding weather report.

event.data.description: The description of current weather report.

event.data.language: A 2-letter code for the current report language.

event.data.date: A 2-letter code for the current report language.

event.data.timeToLive: A 2-letter code for the current report language.

event.data.forecast: An array of forecast conditions (an item per day).

event.data.current.wind.chill: The current wind chill, in degrees (scale determined by Weather.units).

event.data.current.wind.direction: The wind direction, in degrees from the North.

event.data.current.wind.speed: The wind speed, in units of distance per hour (scale determined by Weather.units)

And this is a bulk result:

** edit **: I noticed the movie seems to stop working ramdomly… any clue?

Download the source code, API included.