Preview

Setting all files

Let’s say you will create an app, or a simple animation using OOP, and you want to export this as video. Create a new ActionScript 3.0 Flash file with dimensions 590x300px, and let’s create a simple animation. Create a MovieClip on Stage, with instance name mc. If you don’t know already how to work with Caurina, make sure to check How to properly install Caurina Tweener classes, because we will use this. Create a new ActionScript 3.0 Class file, called Main and set this in Flash to be Document Class.

Animating

Let’s focus on Main.as class – we will animate the MovieClip mc five times, once per second. Declare all variables:

public var mc:MovieClip;
private var timer:Timer;

Create a timer to animate the MovieClip mc:

timer = new Timer(1000, 5);
timer.addEventListener(TimerEvent.TIMER, onCounting);
timer.start();

Basically I create a simple timer to animate 5 times the MovieClip to different positions. Let’s see how looks onCounting function:

private function onCounting(e:TimerEvent):void
{
	Tweener.addTween(mc, { transition:"easeOutSine", x:Math.random() * stage.stageWidth, y:Math.random() * stage.stageHeight, time:0.5} );
}

It’s a simple animation, I wont cover this deeply than now, just make an idea how your OOP animation will be when you’ll export to video.

Ready to export video

Ok, we know how long is the animation, right? 5 seconds. Go to File > Export > Export Movie. Choose to export Quick Time (.mov), and let’s take a look to the settings panel:

Let’s discuss a little bit these options.
Stop Exporting – since we don’t have animation on Timeline, we need to choose the second option – After time elapsed – here type 5 (seconds).
Store temp data – obviously what does
Ignore stage color – If you don’t want your video to have background and to to keep just animations, you need to choose this option – note that you must don’t have anything on your stage as background, even if it’s a shape, a MovieClip or pictures.

Next, press QuickTime Settings for movie settings.

If you want your movie to have sound, you must check the sound option. Then if you want to make changes on your video, from Video tab press Settings.

If you want have a lower quality movie, from compression type you can choose Animation. If not None, that means your movie will not have compression – also this option will increase your file size. On Frame Rate you can choose 30 frames per second or Current, your current frame used in movie. You can let the key frames on Automatic; now, pay your attention. If you want to export this, with a transparent background for example, from Compressor box, choose depth to Millions of Colors +, if not you can let just Millions of Colors.

Press ok and let’s move to Video Size panel. Always be sure when you export different formats from Flash, to check this option from Dimmensions and to select Current.

Final result

Open the new .mov file created with Quick Time, and see the result. What do you think? A good quality, a video smoothed and cool resolution. Much more, you can export this to TGA sequences, convert to .AVI uncompressed or even a .WMW and .MPEG file, with this .mov file at a great resolution all these options are possible. Let me know what do you think, let me know what technique do you use when you export video files from Flash. Thank you for your time

Preview the final result

Setting the files

In Flash, create a new ActionScript 3.0 file, with 590x300px dimmensions and save the file as progressBar. Our Progress Bar will contain 2 MovieClips – bar skin (the one that you see behind) and track skin (the one that is draggable); Create them as in the attached image, then make them as a new MovieClip, called percentBar.

While dragging, you want to display somewhere the progress and then to use that value to scroll or doing something. To do this we need to create an info box, where the percent will be. Basically what you need to do, is to create on Stage a new MovieClip with instance name boxInfo, and inside of this to add a dynamic TextField, called txt.

DraggableProgressBar.as

Create a new ActionScript 3.0 class file, called DraggableProgressBar.as, and declare all MovieClips from progress bar as public variables:

public var trackSkin:MovieClip;
public var barSkin:MovieClip;
public var percent:int = 0;

As you observe there is a percent variable also, that will store a value when the MovieClip trackSkin is dragged. In the init function we:

• set the progress bar as buttonMode;
• make the trackSkin’s width to be 0;
• add listeners when Mouse is DOWN or UP;

private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			trackSkin.width = 0;
			buttonMode = true;
			mouseChildren = false;

			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
		}

When Mouse is DOWN we add an EnterFrame listener, so we’ll know what size will have the MovieClip trackSkin after dragging, according to Mouse position on X; and when Mouse is UP we remove the EventListener.

private function onMouseDown(e:MouseEvent):void
{
	addEventListener(Event.ENTER_FRAME, stateBar);
}

private function onMouseUp(e:MouseEvent):void
{
	removeEventListener(Event.ENTER_FRAME, stateBar);
}

Let’s see how the stateBar function looks:

	trackSkin.width = Math.min(mouseX, barSkin.width);
	percent = (trackSkin.width / barSkin.width) * 100;
	dispatchEvent(new Event(Event.COMPLETE));

First line increase or decrease the trackSkin’s width according to mouseX, but no higher then his max width; second line is the difference between the new scale after dragging and the max scale multiplied with 100, in order to get a value from 0 to 100; third line is a dispatcher to the Main class, to know that the percent is changed.

Main Class

Create a new ActionScript 3.0 class file, called Main.as, and declare all MovieClips as public variables:

public var boxInfo:MovieClip;
public var progressBar:DraggableProgressBar;

Then we align the boxInfo with the progressBar on X position, and add a listener to read the new percent when progressBar is dragged:

boxInfo.x = progressBar.x;
boxInfo.txt.text = progressBar.percent;
progressBar.addEventListener(Event.COMPLETE, getValue);

Finally the getValue function will be:

	boxInfo.txt.text = progressBar.percent;
	boxInfo.x = Math.max(mouseX, Math.min(progressBar.x, progressBar.width));

Save this, recompile and see if everything is ok. If the progressBar is ready, it’s easy to create scrollbar, a seeking bar, a volume or a chart bar also. Let me know what do you think

Preview the final result

Setting files

Create a new ActionScript File called “Main.as” in a empty folder src (src.MainClass) that extend the Sprite class, since our Timeline will not contain any ActionScript code. Also create a new AS3 Flash file(550×400px) and open it, so that we have both files opened, and download my pattern used in this tutorial (you can use yours later).

Main.as

In ActionScript file Main.as first thing to do is to create a loader that will preload the pattern multiplied on whole screen. Let’s add variables for loader and pattern:

private var loader:Loader;
private static const IMAGE_PATH:String = "pattern.jpg";

Then in the constructor function declare properties for Stage:

public function Main():void
{
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}

Load the pattern in the init function:

private function init(e:Event = null):void
	{
		removeEventListener(Event.ADDED_TO_STAGE, init);

		loader = new Loader();
		loader.load(new URLRequest(IMAGE_PATH));
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
	}

Now, when the pattern was fully loaded, Stage will be filled on resize with this image as BitmapData:

private function onComplete(e:Event):void
	{
		bitmapData = e.target.loader.contentLoaderInfo.content.bitmapData as BitmapData;
		onStageResized();
	}

Before to see how onStageResized looks, we need to add a listener on Stage in order to trigger this function. To do this, in the init function add this line:

stage.addEventListener(Event.RESIZE, onStageResized);

onStageResized

Since this function is twice used, one for listener and one when the pattern was loaded, set the Even to be null. Then, we will fill a rectangle representing the whole stage with the pattern, setting smoothing and repeat to true.

private function onStageResized(e:Event=null):void
		{
			graphics.clear();
			graphics.beginBitmapFill(bitmapData, null, true, true);
			graphics.moveTo(0, 0);
			graphics.lineTo(stage.stageWidth, 0);
			graphics.lineTo(stage.stageWidth, stage.stageHeight);
			graphics.lineTo(0, stage.stageHeight);
			graphics.lineTo(0, 0);
			graphics.endFill();
		}

If you test this, you’ll see the hole area filled with this nice pattern. But we want to be fully filled when Stage resized or maybe on FullScreen also, not in a small area. So how to do this? The answer is simple, when the pattern was fully loaded, add a listener on resize calling again onStageResized

stage.addEventListener(Event.RESIZE, onStageResized);

onFullscreen function

If you compile now, you will see the hole screen filled with this loaded pattern, even when Stage resizes. What about creating a button, that on pressed will make the screen fully filled with pattern?
On Stage draw a simple Rectangle, convert this to Button and give him an instance name btn. In Main.as don’t forget to declare public variable with this new button created. In the init function add these 2 lines that will trigger the fullscreen function:

stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreen);
btn.addEventListener(MouseEvent.CLICK, goFullscreen);

private function goFullscreen(e:MouseEvent):void
{
	 if( stage.displayState == StageDisplayState.NORMAL ){
             stage.displayState = StageDisplayState.FULL_SCREEN;
          } else {
                stage.displayState = StageDisplayState.NORMAL;
          }
}

In order to be this possible, in your HTML code where you embed the .SWF file, be sure you have next parameters:

<param name="allowFullScreen" value="true" />
<param name="wmode" value="window" />

If you want on full screen to hide the button, in onFullscreen function add:

btn.visible = e.fullScreen?false:true;

That’s it, check if everything is ok then replace your pattern with yours. Until next time, have a nice day.

To handle this, we use Flash, Flash Develop and AS3 and also we need to have some knowledge’s about Class Paths and Packages, Caurina and SWC files. Note: I’m not willing to use a FLVPlayback component.

Preview the final result

What is Flash Video

Flash Video is a container file format used to deliver video over the Internet using Adobe Flash Player versions 6–10. Flash Video content may also be embedded within SWF files. There are two different video file formats known as Flash Video: FLV and F4V. The audio and video data within FLV files are encoded in the same way as they are within SWF files. The latter F4V file format is based on the ISO base media file format and is supported starting with Flash Player 9 update 3. You can found more info about this here.

Loading a Video

To load and playback a Video we need to use a NetStream object, which require to pass it a NetConnection object.

var videoConnection:NetConnection= new NetConnection();
videoConnection.connect(null)//for progressive download video use a null connection string

Now that you’ve constructed a NetConnection object and called the connect() method with a null value, we need to pass the NetStream consctructor a reference to the him:

var videoStream:NetStream = new NetStream(videoConnection);

Next Step is to add a Video object, and to associate this with the NetStream:

var video = new Video();
addChild(video);

Optional you can associate a NetStream object with a Video object using the Video object’s attachNetStream():

video.attachNetStream(videoStream);

Finally we need to tell to the Flash Player to load the video and to start the playback, both accomplished with one simple method called play:

videoStream.play("flv path);//the parameter can be absolute or relative

Flash video playback starts automatically as soon as enough has buffered. You can control buffering and monitor loading, using a preloader for example. Last point, if the FLV contains metadata or/and cue points and you don’t handle the events, Flash Player throws errors.

var client = new Object();
client.onMetaData = onMetaData;
videoStream.client =client;

Creating the Flash file

Now that you have an idea about how this works, let’s create a Video Player.  After you read this post called ClassPaths and Packages in Adobe Flash Cs5, create a new Flash file with dimensions 590x300px. Then use the Rectangle Tool(R) to draw a rectangle, let’s say 320x240px, convert this to be MovieClip linked with a class “Videoplayer”  that will be created later. We’ll use this MovieClip as container for Video Player.

Building Classes

In FlashDevelop create a new ActionScript file Videoplayer that was linked in Flash, when you create the Video Players container and let’s apply what we’ve learned. Save this file in a new folder called src. Then declare variables:

private var videoConnection:NetConnection;
private var videoStream:NetStream;
private var video:Video;
private var client:Object;

New features was added in latest version of FlashDevelop, which I’m proud, as you observe in the constructor function.

public function VideoPlayer():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

Instantiate all classes imported:

removeEventListener(Event.ADDED_TO_STAGE, init);
		videoConnection = new NetConnection();
			videoConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			videoConnection.connect(null);
		videoStream = new NetStream(videoConnection);
			videoStream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			videoStream.client = this;
			video = new Video();
			addChild(video);
			video.attachNetStream(videoStream);
			videoStream.play("../videos/video1.flv");
			video.smoothing = true;
			client = new Object();
			client.onMetaData = onMetaData;
			videoStream.client = client;

The netStatus function for NetConection and NetStream listeners:

private function netStatus(e:NetStatusEvent):void
		{
			switch (e.info.code) {
				case "NetStream.Play.StreamNotFound"
					//"Stream not found";
				break;
			case "NetStream.Play.Stop"
					//"Stream stopped";
				break;
			}
		}

And finally the MetaData function:

public function onMetaData(info:Object):void {
	//video info
}

Save all files, compile and let’s see the final result.

Let me know, keep sending me emails and comments, I would love to hear them. Next time we’ll load videos from XML and add buttons to control this Video Player.

In just four very short years, this company has monetized its IPs to such an extent that the company is valued now at somewhere around the 5.5 billion dollar mark, a bit over Electronic Arts which conversely is the second largest game publisher and also a company founded in 1982.

How did this happen, how can an extremely young company get to be worth more than one that has been around almost as long as home video games have?

The short answer: Facebook; the longer answer: social networking entertainment.

Indeed, it couldn’t have happened without the phenomenon that is social networking and Facebook in particular.

Working out a deal to disseminate their addictive games via Facebook and programming them in such a way so as to promote the continual use and growth of the website worked as a win-win for both the parties involved.

How they did that was very easy given the framework of the social networking site, basically the more friends you had that played the game with you the better you would do at the game. This meant that if someone wanted to get better and bigger items, and didn’t want to spend real world money to get them, they would have to get some of their friends involved with the game and so on and so forth.

Their best known games have been Farmville and relatively recently Frontierville, but Farmville’s become the go to reference in popular media, mostly related to people spending too much time on Facebook, but as there is no such thing as bad publicity, they can’t lose either way.

On the 2nd of December 2010, they launched their latest variation of the “Ville” series, namely Cityville, and in the short span of time that has passed since it has already become the most played of the “Ville” games proving that the market for these types of games is nowhere near saturation.

I say this because the game maintains many of the mechanics, features and characteristics of their older games but as opposed to the others, this time they combined what they’ve been successful on their own with something that has been a success since 1989 – SimCity.

So in less than two months, they’ve managed to reach the top spot when it comes to social network games, a spot they already held with Farmville. Obviously most of the players of the new game are also players of Farmville, but equally obvious is the fact that there are many more new players that have either just come aboard with the new title or older players who got sick of either Farmville or Frontierville and decided to give the new game a try, and they’re sticking around at least for the moment.

Time will tell whether this latest title will indeed become the new Farmville, or the latter will reclaim its spot as top dog, but it is interesting to watch further how long can this trend continue; because sooner or later they’ll have to go to space with it and where do you go from there?

Preview the final result

Loading an image

Probably you know already how to load an image in Flash, using AS3. Create a new ActionScript file Main.as and first declare variables for loader:

private var loader:Loader;
private var imgPath:String = "img.gif";

Then the constructor and init functions will be:

public function Main() {
			if (stage) init()
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			loader = new Loader();
			loader.load(new URLRequest(imgPath));
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
		}

Once the image is loaded, the “onComplete” function will be triggered:

private function onComplete(e:Event):void
		{
			splitBitmap(e.target.loader.content.bitmapData, 3, 5);
		}

I’m trying to create an effect like an image divided in many thumbs that regroups random. Create a function splitBitmap that receives 3 parameters: first is the loader’s content as bitmap, second and third one represents the columns and rows.

private function splitBitmap(bitmapSource:BitmapData, columns:int, rows:int):void
{ }

It’s time to declare new variables for Bitmap and BitmapData:

private var bitmapData:BitmapData;
private var bitmap:Bitmap;
private var space:int = 0;

Focus now on splitBitmap function. We need variables for Bitmap info, like width or height:

var bitmapWidth:int = bitmapSource.width;
var bitmapHeight:int = bitmapSource.height;

var thumbWidth:Number = Math.round(bitmapWidth / columns);
var thumbHeight:Number = Math.round(bitmapHeight / rows);

After we know what size does Bitmap have, create a BitmapData object as model for each thumbs:

bitmapData = new BitmapData(bitmapWidth, bitmapHeight);
bitmapData.draw(bitmapSource);

From now on it’s simple, create a for statement for X and Y position and add thumbs according to them:

for (var i = 0; i < columns; i++) {
	for (var j:int = 0; j < rows; j++)
	{

	}
}

Putting all together

Inside of this statement create a new BitmapData for each thumb, use copyPixels to copy the pixels from an defined area and finally add thumbs according with number of columns and rows:

var thumbBitmap:BitmapData = new BitmapData(bitmapWidth, bitmapHeight);
thumbBitmap.copyPixels(bitmapData, new Rectangle(i * thumbWidth, j * thumbHeight, thumbWidth, thumbHeight), new Point(0, 0));
bitmap = new Bitmap(thumbBitmap);

addChild(bitmap);
bitmap.x = i * (thumbWidth + space);
bitmap.y = j * (thumbHeight + space);
bitmap.smoothing = true;
bitmap.alpha = 0;

Now, let’s say you want to animate each individual thumb. Calling a new function in a random interval, that receive as parameters the Bitmap object and his coordonates, will make the thumb to move to a defined position and after back to his coordonates. This get a random interval, declare a variable c as Number before the for statement. Add a setTimeout method inside of same statement to call the animate function:

setTimeout(animate, 1000+ (100*(Math.round(Math.random()*c))), bitmap, bitmap.x, bitmap.y);

and the function that use Caurina to animate the thumbs:

private function animate(bitmapSource:Bitmap, bitmapX:Number, bitmapY:Number):void
{
	bitmapSource.y = -100;
        Tweener.addTween(bitmapSource, { time:0.5, transition:"easeOutSine", x:bitmapX, y:bitmapY, alpha:1} );
}

Now that you know how to manipulate them, you can add multiple effects and play around with them.
Let me know what do you think by sending me emails or comments. Cheers

The whole discussion raged around the new HTML5 web standard being able to do a lot of things that Flash was able to do as well. Very rarely have there been so many message boards filled with geekery, bile and fanboyism related to a simple thing as new technology.

Of course whenever something new appears there are always some individuals that declare it to be the “something killer”, or “the dawn of a new age”, but usually those flame war discussions don’t spill over into the more mainstream tech media, not unless you have a high level troll doing what they do best.

The entire discussion was sparked and fueled by a certain open missive from one Steve Jobs to the entirety of the app developing world in which he basically declared that Flash can’t work on multi-touch and mobile platforms for a slew of reasons and that HTML5 is Apple’s focus.

This letter was the culmination of a rather long lasting fight between Apple and Adobe on various reasons, mostly having to do with each other company’s control over their properties and how said properties would be disseminated through the developer world.

Now all of this was taking place at the rather high echelons of the two companies, but at some point mister Jobs chose to step it up a notch and basically burn all the bridges between Apple and Adobe with his open letter.

Now why exactly he did this is anyone’s guess, maybe to hit Adobe stock prices, maybe because he felt the need to clarify his company’s stance on Flash, that much we don’t know, what we do know and what he knows as well, is that Apple benefits from a very strong base of fans that have stood with the company through thick and thin and he has been getting exponentially more acolytes thanks to the successes of the iPhone and the iPad. And what he basically did with the letter was to seed the Apple fanboys (or girls) with a hate for Flash products.

Being the major player in any market offers you some definite clout, even more so if you are a major player in a market thanks to a self-enclosed environment that keeps on growing, because as far as you’re concerned your customers won’t leave this protective bubble any time soon.

Let’s face it, he’s a troll, a very well placed troll with a lot of listeners, but nonetheless still a troll. And he was successful in igniting this discussion and keeping it aflame for a few months but just like any other troll’s statements it died down rather soon and cooler heads prevailed, but more on that in a future article.

Setting the Flash file

Create a new Flash File (ActionScript 3.0) with size 630x360px and set a document-level classpath for this to be src. If you are not sure how to work with ClassPaths and Packages in Flash then I strongly recommend you to check Classpaths and packages in Adobe Flash Cs5. Then create a blank folder called src where will be all classes used in this widget.

Before proceeding, you must understand how this widget works. Go to weather.yahoo.com, browse or search for your city and you will see the weather forecast for 5 days. In the forecast table  press Extended Forecast that will redirect you to a new page. The small code from the URL of the page represents the location number (WOEID) for the forecast page – in my case Bucharest, Romania will be:

http://www.weather.com/outlook/travel/businesstraveler/extended/ROXX0003

With this code, just make a simple request to “http://xml.weather.yahoo.com/forecastrss/” + WOEID_CODE + “.xml” to receive the weather info from that city.  As you observe the URL address is mostly like a RSS feed; (trace this address to see the result). More info about the WOEID codes can be found here.

The XML file

Create a new XML file locations.xml and add 5  different WOEID codes from random locations:

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<location title="United States, California" code="USCA0011" />
	<location title="India, Chennai" code="INXX0075" />
........................................
</data>

Weather Icons

After the request was done to that RSS feed, you will find some weather codes for each day.  For example if outside it’s a sunny day then the weather code will be 32. These codes are from 1 to 47 but there is also an error code called 3200. Download some custom icons and rename them according with these weather codes and save them in a folder called images. Yahoo provide also some icons already in case you don’t want to use custom icons.

Weather Day Container

Before to start building the classes, we need a drop-down menu for location names and codes. From Window choose Components and drag to stage from User Interface a ComboBox component with instance name locationsCombo.

Also we need to create a new MovieClip – a container – for each Weather Day Forecast, where all weather info from that day will be displayed. This container will hold 4 new TextFields for:

• dayTxt – will be the name of the day
• num1 – for high degrees
• num2 – for small degrees
• weatherTxt – for weather description

..and one container for weather icons called pic, which is another new MovieClip. Finally the Weather Day Forecast container will be like this:
Duplicate this for 5 times and give them instance names from day1 to day5.

All together

Create 2 new ActionScript 3.0 classes and save them in src folder- one for pics PicLoader.as and one for the hole container DayTab.as.
PicLoader.as will load the weather icons and will display them with Caurina:

	public class PicLoader extends Sprite
	{
		private var loader:Loader;
		public var mc:MovieClip;

		public function PicLoader()
		{
			mc.visible = false;
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, objectLoaded);
		}

		private function objectLoaded(e:Event):void
		{
			e.target.content.alpha = 0;
			e.target.content.smoothing = true;
			Tweener.addTween(e.target.content, { alpha:1, transition:"easeOutSine", time:0.3 } );
		}

		public function getPath(c:int) {//here are the paths for icons
			if (loader != null) {
				loader.unload();
			}
			loader.load(new URLRequest("images/" + c + ".png"));
			addChild(loader);
		}
	}

In DayTab.as declare all instance names as public variables:

public var dayTxt:TextField;
public var num1:TextField;
public var num2:TextField;
public var weatherTxt:TextField;
public var pic:PicLoader;
public var bg:MovieClip;

…and create a function that will receive an object with all info about weather:

public function getInfo(c:Object) {
	pic.getPath(c.@code);
	num2.text = c.@low;
	num1.text = c.@high;
	dayTxt.text = c.@day;
	weatherTxt.text = c.@text;
}

That’s it with all these 2 classes, now go back to you flash file and locate in library the symbols created – pic and DayTab. Link these 2 symbols with their classes and let’s move to the final part of this tutorial.

Final part

Create a new ActionScript 3.0 class into src folder as Widget.as file. Declare all instance names as public variables:

public var pic:PicLoader;
public var locationsCombo:ComboBox;
public var day1:DayTab;
public var day2:DayTab;
public var day3:DayTab;
public var day4:DayTab;
public var day5:DayTab;

For XML path we need a variable, for XML object after the file is loaded, a variable to load the file and one for a proxy file (I will describe later about this) and one variable as Array to store the info from XML. If you remember what we’ve discussed before, we need to make an request to “http://xml.weather.yahoo.com/forecastrss/” + WOEID_CODE + “.xml” in order to receive the weather info from that city. If you just do this, you’ll observe that will work only on your local computer – that’s because of the Yahoo Security sandbox violation; to resolve this problem we need to create a php file as proxy.

private var xmlPath:String = "locations.xml";
private var xml:XML;
private var urlLoader:URLLoader;
private var rssLoader:URLLoader;
private var links:Array;

The constructor function will look like this:

links = new Array();

urlLoader = new URLLoader();
urlLoader.load(new URLRequest(xmlPath));
urlLoader.addEventListener(Event.COMPLETE, onDataLoaded);

rssLoader = new URLLoader();
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
locationsCombo.addEventListener(Event.CHANGE, changeLocation);

…after the XML is loaded we receive the results:

private function onDataLoaded(e:Event):void
{
	xml = new XML(URLLoader(e.target).data);
	var c:Number = -1;
	for each(var locations:XML in xml.location) {
		c++;
		links.push([locations.@title, locations.@code]);
		locationsCombo.addItem( { label:locations.@title, data:c } );
	}

		getInfo(0);
}

…make the request with the WOIED code:

private function getInfo(c:int) {
	rssLoader.load(new URLRequest("proxy.php?cod=" + links[c][1]));
}

The function that allow us to change trough drop-down menu different locations:

private function changeLocation(e:Event):void
{
	getInfo(e.target.selectedItem.data);//data is the WOIED code from xml
}

…after the request was completed and we get the results:

private function rssLoaded(e:Event):void
		{

			xml = new XML(URLLoader(e.target).data);
			//see every node called forcast
//RSS feeds like Yahoo! weather have data that can't be retrieved by using the regular XML class. So we need to use the Namespace class that will give you access to data inside an RSS feed.
			var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0");
			day1.getInfo(xml..item.yweather::forecast[0]);
			day2.getInfo(xml..item.yweather::forecast[1]);
			day3.getInfo(xml..item.yweather::forecast[2]);
			day4.getInfo(xml..item.yweather::forecast[3]);
			day5.getInfo(xml..item.yweather::forecast[4]);
		}

…and each DayTab container will receive the weather info. Also proxy.php will read the URL address (as RSS feed) and will return the content of XML – in this way we avoid the security problems.

<?php
$url = "http://xml.weather.yahoo.com/forecastrss/" . $_GET['cod'] . "_c.xml";
echo file_get_contents($url);
?>

That’s it ladies and gentlemen, hope you will have a good winter and that you learn something from today. Until my next tutorial, Merry Christmas Everybody!

Preview

Classpaths

Working with classes it’s not really rocket science, but you must set set them properly in order that your project to be well organized – so you need to show Flash where to look for them. Basically a classpath will tell to Flash where the whole organized structure of directories/sub directories are situated, which contain different classes – packages. There are two ways to do this: a global class path for all your projects you will work on – or a document-level class path separate for every new Flash file.

Setting the Global Classpath

As we’ve discussed, a global classpath can be used by any new Flash file – in present I have 2 folders -as2 (with as2 classes) and as3 (with as3 classes). What do I have for example in my folder as3? Well I used to keep there classes from Caurina, Adobe or even custom classes, for example a class for rollOver and rollOut for any button created. So I don’t have to copy these classes on any new project, each time. To set a global classpath in actionscript 3.0 you must go to Edit > Preferences (or simple CTRL+U) > ActionScript > ActionScript 3.0 Settings.

As you can see my global class path is “D:\Classes\as3″ – you can create on any disk drive a folder with your classes, it will help you very well on your next project. Also, Flash will import these automatically, so you don’t have to import them anymore.

Setting the Document-Level Classpath

To setting a document-level classpath you have to follow these steps in every new flash file created: in Properties panel go to Profile > Edit (or simple CTRL+SHIFT+F12) or File > Publish Settings, near the Actionscript 3.0 dropdown choose Settings.

Here ai strongly recommend to uncheck the checkbox “Automatically declare stage instances” – by checking this you must declare all MovieClips and objects by being public variables in every class, but also this will make visible any properties/functions of that movieclip in any class, once that is declared. In source path tab, add a new path of your folder where all classes will be stored.

Don’t use an absolute path, like C:\src\mysubfolder\myclass becouse Flash will not understand where are all that classes you declared before, if you move this flash file on other computer, for example.

This is also a useful way, becouse you don’t have to type the hole path in your document class for example. Now you just type mysubfolder.myclass and that’s it.

By convention a right classpath will contain a path such as yourrojectname.yourapplicationame.yourclassfolder or other people use theirdomainextension.theirdomainname.theirprojectname – it’s ok both ways.

Another thing that I want to remind you, is that by convention your class name should never start with a lowercase character! Use more often folders – for your classes and for your movieclips inside of your Flash file, try to create a structure with not just a single or 2 classes. It will make your project more and more complicated.

Many thanks to my master, Virusescu. Cheers until next time!