CSS: tooltips

First of all, let’s create the CSS content:

CSS code

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
	}

And the Html:

Html code

<a href="#">Title <span>Tooltip</span></a>

[snackshot] Loading an external image

Actionscript 3 code

var imageLoader:Loader = new Loader();
var image:URLRequest = new URLRequest(”http://server.com/folder/file.png”);
imageLoader.load(image);
addChild (imageLoader);
imageLoader.x = 200;// AS2 reference: _x
imageLoader.y = 300;// AS2 reference: _y

Loading XML

ActionScript 3 uses a system called ECMAScript for XML (E4X).

In AS2 we were used to create an XML object and then we called the XML.load() method in order to load in an external file. In AS3 loading of external XML files is handled by the new URLLoader class.

So, let’s create a new instance of that class:

Actionscript 3 code

var loader:URLLoader=new URLLoader;

After that we need to create an event to launch the function when the XML is loaded. The event must be deleted before deleting the object, otherwise it will sucks CPU

Actionscript 3 code

loader.addEventListener(Event.COMPLETE, loadXML);

Let’s give the loader the target XML to load:

Actionscript 3 code

loader.load(new URLRequest("content.xml"));

Finally, let’s create the function to load the content using the Event.target.data property:

Actionscript 3 code

function loadXML(e:Event):void
{
xml = new XML(e.target.data);
trace(xml);
}