Activetuts+ » XML

Using Google Maps’ New Features for Flash

Niels Musschoot — Wed, 10 Feb 2010 12:00:24 +0000

After such a positive response to my first tutorial Implement a Map Using the Google Map API for Flash I decided to write a second. Since that first tut the Google Map API has been updated, allowing developers to (amongst other things) add 3D viewing to maps. This is a great feature and during this tutorial I’ll explain how to use it.

Also, lots of people requested an explanation for adding custom markers; that’s the second thing we’ll discuss here today.

Step 1: Download The SDK Component

I won’t build further on our previous map because we need to download the new Google Map Component. There is no way to use the component from my previous tutorial as that one does not support the 3D functions. So… go to http://code.google.com/intl/nl/apis/maps/documentation/flash/

Step 2: Install the SDK Component

We need to install the SDK component to use it in Flash. To do so, navigate to the location where you saved the Google Maps SDK Component and find the non-Flex version of the interface library. In my case this is (lib/map_1_18.swc). Now copy the “map_1_18.swc” file.

Step 3: Folders

Afterwards, if you have Flash currently open, quit the application and search for this folder:

(Windows) C:\Program Files\Adobe\Adobe Flash CS3 (or your Flash version)\en (or your language)\Configuration\Components
(Mac OS X) Macintosh HD/Applications/Adobe Flash CS3 (or your Flash version)/Configuration/Components

Inside that folder create a new folder named “google” and Paste the “map_1_18.swc” file inside it. Flash is now set up to
support the Google Maps API for Flash.

Step 4: The Google Map API Key

Ok we have the component now but before we can get to work we still need a Google Map API Key to get our map working online. A Google Map API Key is free and you can get one here:

http://code.google.com/intl/nl/apis/maps/documentation/flash/

Step 5: Sign Up

Clicking the “Sign up for a Google Maps API Key” link brings us to the next page where we can generate our personal API Key. Scroll down the page, agree with the terms and conditions (you could read these too if you’re really interested) and add the url of the website where you want to use the application (you will need a different API Key for every domain where you want to place a map). After that, click “Generate API Key”.

Step 6: Save It!

Now you’ll see your personal API Key for the selected domain. Copy the API Key and paste or save it somewhere as we’ll need it very soon.

Step 7: New ActionScript 3.0 File

OK, the boring work is done, now we can start with the fun stuff! Let’s dive into Flash and create a new ActionScript 3.0 file, default stage size (550 x 400).

Step 8: Save It

I prefer to start off by saving the file. While I’m working I really like to Hit “Ctrl+S” all the time, so go ahead hit
“Ctrl+S” or click “File > Save” in the menu. Save it to the location you want and name it whatever you want. I will name it
“google_map”.

Step 9: The GoogleMapsLibrary

Open the Components panel “Ctrl+F7″ or click Window > Components in the menu. Drag the GoogleMapsLibrary into your library.

Step 10: The Actions Layer

To keep organized I like to rename the first layer to “actions”.

Step 11: Import

With the actions layer selected open the actions panel (hit “F9″ or click “Window > Actions”) and add these lines of code:

		import com.google.maps.LatLng;
        import com.google.maps.Map;
        import com.google.maps.Map3D;
        import com.google.maps.MapEvent;
        import com.google.maps.MapType;
        import com.google.maps.View;
        import com.google.maps.geom.Attitude;

Step 12: Create the Map

Now we’ll create our first function. First we want to declare our Map variable:

    	// Variables
        var map:Map3D;

Now we can add our function that we will call to add the main map on the stage:

    	// Function that adds the map on stage
        function add_map()
        {
			map = new Map3D();
    		map.key = "YOUR_API_KEY_HERE";
            map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    		map.addEventListener(MapEvent.MAP_READY, onMapReady);
    		this.addChild(map);
		}

OK, as you can see we added an eventlistener that will fire once our map is loaded, so lets also create that function:

    	// Function that will fire once map is created
		function onMapReady(event:MapEvent):void
		{
		    map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
			map.setAttitude(new Attitude(20,30,0));
		}

Here we’ve set the map to center. This function has 3 values and will define the location where the map will open. The
values are like this “map.setCenter(new LatLng(latitude, longitude), zoom);”. Then we define the view mode;
as we are using the new 3D map I will use the Perspective view. If you like a normal map view you can change this value to
“View.VIEWMODE_2D”.

Then we set the Attitude. This will define how we view the map. In this case we will add a little Perspective view to it and
turn the map a little to create a nicer view angle. You can play around with these values a bit and see what you like best.

OK, it’s time for a first check! What do we have so far? Well, nothing yet! We first need to call our function to create the
map! Let’s add this line of code just under our variables:

        // Variables
        var map:Map3D;

        // Call the function to create the map
        add_map();

There we go! Now just test your movie “Ctrl+Enter” or click Control > Test Movie in the menu…

Step 13: The Navigation Tools

Yes! We have a map zoomed in on Brussels Airport! Isn’t that great?! Perhaps not… Let’s take a look at what we have here. We have the map and we can drag the map around. So what we need next are tools to navigate around the map, zoom in and out on the map. Let’s start with those navigation tools first!

First of all let’s import 3 extra classes; add these lines under the other import code in our script:

    	import com.google.maps.controls.NavigationControl;
    	import com.google.maps.controls.MapTypeControl;
    	import com.google.maps.controls.OverviewMapControl;

No go to the onMapReady() function and add these 3 lines of code under the other lines:

    	map.addControl(new MapTypeControl());
    	map.addControl(new OverviewMapControl());
    	map.addControl(new NavigationControl());

Here we’re adding the map type controls, so now we can change the map type. Then we add a map overview control to the right bottom of our map. And we add the map navigation tools. This is our full source code as it should look right now:

    	import com.google.maps.LatLng;
		import com.google.maps.Map;
		import com.google.maps.Map3D;
		import com.google.maps.MapEvent;
		import com.google.maps.MapType;
		import com.google.maps.View;
		import com.google.maps.geom.Attitude;
		import com.google.maps.controls.NavigationControl;
		import com.google.maps.controls.MapTypeControl;
		import com.google.maps.controls.OverviewMapControl;

		// Variables
		var map:Map3D;

		// Call the function to create the map
		add_map();

		// Function that adds the map on stage
		function add_map()
		{
			map = new Map3D();
    		map.key = 'YOUR_API_KEY_HERE';
			map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    		map.addEventListener(MapEvent.MAP_READY, onMapReady);
    		this.addChild(map);
		}

		// Function that will fire once map is created
		function onMapReady(event:MapEvent):void
		{
			map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
			map.viewMode = View.VIEWMODE_PERSPECTIVE;
			map.setAttitude(new Attitude(20,40,0));
			map.addControl(new MapTypeControl());
    		map.addControl(new OverviewMapControl());
    		map.addControl(new NavigationControl());
		}

Go ahead and test your movie again. You can see that you can move around the map very easily now with these funky looking new
controls!

Step 14: A Bar Without Beer

I think it’s time to move on to the markers part; a map without markers is like a bar without beer isn’t it? No silly stuff this time! Let’s move to the Custom markers straight away!

We want to place our custom markers onto the map with information that will be stored in an external XML file. Let’s begin by creating a custom marker, then we’ll create the XML file and after that we’ll load it into Flash.

Step 15: Creating the Custom Marker

I’m not much of a designer so I think you’ll be able to create a much cooler marker than I have! Thats why I’m not going spend too much time on this. Just draw a few circles, put them on top of each other, select everything, hit F8, select movieClip, name it “marker_mc” and select Export For Actionscript. Hit “OK”.

As I mentioned before, I hope you will create a cooler and better looking marker than this! Just draw your own marker and
covert it to a moviclip as explained above.

Once you’ve created the movieclip it will appear in your library. You can then delete it from the stage as we will import it using
ActionScript (that’s why you had to select the option “Export For ActionScript”). In our library we now have 2 items; the
GoogleMapsLibrary and our marker_mc.

Step 16: The XML file

OK, here we are. We have a map and (in your case) a very good looking marker! Now let’s create the XML file. Open your favorite code editor, create this file and save it as locations.xml.


 

  
   50.899197766773284
   4.486040573103489
   Brussels
   
   
  

  
   49.004024443647324
   2.571113562006575
   Paris
   
   
  

  
   51.4699229971675
   -0.45367874251784013
   London

Step 17: Loading the XML

We need to get the XML data into our flash movie. To do so we need to create a new function that will load our xml. Add
this piece of code to the bottom of the script. Inside our onMapReady() function we call this new load_xml() function. Once our map is ready we will start loading the xml.

        // Function that will load the xml
    	function loadXML(e:Event):void
        {
	        XML.ignoreWhitespace = true;
	        var map_xml:XML = new XML(e.target.data);
        }

        function load_xml()
        {
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, loadXML);
			xmlLoader.load(new URLRequest("locations.xml"));
		}

Step 18: Loop Through the Locations

As we have 3 locations in our XML file we’ll need to create a “For” loop and store all the data in some Arrays. Inside our
loadXML() function we add this piece of code to create the For loop:

    	for (var i:Number = 0; i < map_xml.location.length(); i++)
        {
		    trace(map_xml.location[i].title_tip);
	    }

If we test our movie now we can see our movie outputs the xml data. Now let’s work with it.

Step 19: Create the Variables

Next we have to create some variables to store our data loaded from the XML file. Inside our For loop we add these variables:

    	var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		var tip = map_xml.location[i].name_tip;
		var myTitle:String = map_xml.location[i].title_tip;
		var myContent:String = map_xml.location[i].content_tip;

You can delete the “trace()” line we used before as we know things are working.

Step 20: Adding the Markers on the Map

Now that we have all of our xml data stored in variables we can get over to load our markers onto the map. First we add some extra classes to our code. Add this piece of code under the other classes:

    	import com.google.maps.overlays.*;
		import com.google.maps.InfoWindowOptions;
        import com.google.maps.MapMouseEvent;

Create a new function called createMarker(). We want to add this function just before our loadXML() function.

    	// Add Markers On The Map
        function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker
        {
            var i:Marker = new Marker(
									  latlng,
									  new MarkerOptions({
                                                             hasShadow: true,
				                                             tooltip: ""+tip
                                                       })
									 );
            return i;
        }

We can call the createMarker() function for every marker we need to add to the map, so inside our For Loop we add this line of code:

    	map.addOverlay(createMarker(latlng, i, tip, myTitle, myContent));

If you test the movie now you can see that we have markers on our map on the locations we specified in our xml file! That’s great, but we didn’t create that great custom marker for nothing did we? We’ll remove those standard markers and add our custom markers.

Step 21: Add Custom Marker

First we need to create our custom marker object. Add this code into the createMarker() function, above the rest of the code:

    	// create Custom marker object
        var markerPin:marker_mc = new marker_mc();
        // If your marker is to big you can scale it down here
	    markerPin.width = 20;
	    markerPin.height = 20;

Afterwards, we’ll go to the next piece of code where we have to add a line to the markerOptions. Search for this piece of code:

    	new MarkerOptions({
                               hasShadow: true,
				               tooltip: ""+tip
                         })

and change it to:

    	new MarkerOptions({
                               hasShadow: true,
                               icon: this.addChild(markerPin),
				               tooltip: ""+tip
                         })

Ok! Test your movie and check the result!

Step 22: Moving On

OK, what’s next? The Info windows! When we click our marker we need to get the information we added to our XML file.Before we add the information windows I just want to remove that ugly yellow line around our map, have you noticed already? When you focus on the map it shows a yellow line around it. I personally really don’t like that, so let’s remove it. Just add this line of code under our variables section:

    	// No focus line
        stage.stageFocusRect = false;

Ok thats done! Let’s add Info windows. Add a little more code to our createMarker() function:

    	i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
        {
            map.openInfoWindow(event.latLng, new InfoWindowOptions({
                                                                        titleHTML: ""+myTitle,
                                                                        contentHTML: ""+myContent
                                                                   }));

		});

This is what our createMarker() function now looks like:

    	function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker
		{
			// create Custom marker object
			var markerPin:marker_mc = new marker_mc();
			// If your marker is to big you can scale it down here
			markerPin.width = 20;
			markerPin.height = 20;

			var i:Marker = new Marker(
							  		latlng,
							  		new MarkerOptions({
														    hasShadow: true,
															icon: this.addChild(markerPin),
				            		                        tooltip: ""+tip
                    		                           })
									 );
			i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
    		{
				map.openInfoWindow(event.latLng, new InfoWindowOptions({
																	       titleHTML: ""+myTitle,
                    		                                               contentHTML: ""+myContent
            		                                                  }));

    		});
			return i;
		}

Test your movie and you will now have info windows too.

Step 23: Complete Code

Well thats it! Congratulations, you just created a Google Map With 3D navigation and Custom markers! Very good job! Let’s have a
final look at our code:

    	import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.Map3D;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.geom.Attitude;
import com.google.maps.controls.NavigationControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.overlays.*;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent; 

// Variables
var map:Map3D;

// No focus line
stage.stageFocusRect = false; 

// Call the function to create the map
add_map();

// Function that adds the map on stage
function add_map()
{
	map = new Map3D();
    map.key = 'YOUR_API_KEY_HERE';
	map.setSize(new Point(stage.stageWidth, stage.stageHeight));
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    this.addChild(map);
}

// Function that will fire once map is created
function onMapReady(event:MapEvent):void
{
	map.setCenter(new LatLng(50.899197766773284, 4.486040573103489), 13);
	map.viewMode = View.VIEWMODE_PERSPECTIVE;
	map.setAttitude(new Attitude(20,40,0));
	map.addControl(new MapTypeControl());
    map.addControl(new OverviewMapControl());
    map.addControl(new NavigationControl());

	// Load the xml
	load_xml();
}

// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker
{
	// create Custom marker object
	var markerPin:marker_mc = new marker_mc();
	// If your marker is to big you can scale it down here
	markerPin.width = 20;
	markerPin.height = 20;

	var i:Marker = new Marker(
							  latlng,
							  new MarkerOptions({
												    hasShadow: true,
													icon: this.addChild(markerPin),
				                                    tooltip: ""+tip
                                               })
							 );
	i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void
    {
		map.openInfoWindow(event.latLng, new InfoWindowOptions({
															       titleHTML: ""+myTitle,
                                                                   contentHTML: ""+myContent
                                                              }));

    });
	return i;
}

// Function that will load the xml
function loadXML(e:Event):void
{
	XML.ignoreWhitespace = true;
    var map_xml:XML = new XML(e.target.data);
	for (var i:Number = 0; i < map_xml.location.length(); i++)
	{
		var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		var tip = map_xml.location[i].name_tip;
		var myTitle:String = map_xml.location[i].title_tip;
		var myContent:String = map_xml.location[i].content_tip;

		map.addOverlay(createMarker(latlng, i, tip, myTitle, myContent));
	}
}

function load_xml()
{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.addEventListener(Event.COMPLETE, loadXML);
	xmlLoader.load(new URLRequest("locations.xml"));
}

Conclusion

You can use this map on your website, edit the locations as you want, it’s up to you. Go ahead and experiment, if you have any cool results be sure to share them with us.

I hope you liked this tutorial, thanks for reading!

Create a Dynamic Bar Graph Generator Using XML + AS3

Carlos Yanez — Fri, 18 Dec 2009 12:00:54 +0000

A bar chart or bar graph is a chart with rectangular bars whose lengths are proportional to the values they represent. They’re commonly used for comparing two or more values that were taken over time or under different conditions, usually on small data sets.

In this tutorial, we’ll create a bar graph generator using XML and AS3.

Step 1: Brief Overview

Using ActionScript 3, we will get the necessary graph data from an XML file, then display the converted data into animated bars and an info area.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600×300 and add a gray radial background (#E6E6E6, #CCCCCC).

Our graph generator will be created entirely by code, so this will be the only thing you will do in the Stage.

Step 3: XML

Open yout favorite XML editor (any text editor will work) and add the following lines:

This is the XML that we’ll use to get the data, we won’t be using the childrens’ names, but the attributes.

width: The width of each bar.
name: The name of the element, to be displayed in the info area.
value: The value of that element, displayed at the top of the bars.
color: The color of the bar, in Hexadecimal.

This is the file that the end user will need to edit to show their own data.

Step 4: ActionScript!

It’s ActionScript time.

Create a new ActionScript File (Cmd + N) and save it as "Graph.as", in your classes directory.

Step 5: Package

package
{

The package keyword allows you to organize your code into groups that can be imported by other scripts. It’s recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses.

In the example, the class is stored in the same location as the Fla file.

Step 6: Importing Necessary Classes

These are the required classes, for a more detailed description about every class, please refer to the Flash Help (F1).

import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

Step 7: Declaring and Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

public class Graph extends Sprite
{

In this example, the Graph class inherits all the methods and properties of the Sprite Class.

Step 8: Variables

These are the variables we will use, explained in the comments.

private var graphContainer:Sprite = new Sprite();
private var xmlFile:XML; //The XML Object to parse the XML file
private var urlLoader:URLLoader = new URLLoader(); //The file loader
private var totalBars:int; //Stores the number of bars of the graph

private var tween:Tween; //A Tween object for animation
private var tf:TextFormat = new TextFormat(); //TextFormat

Step 9: Constructor

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object, or runs using the Document Class.

public function Graph():void
{
	/* Text Format */

	tf.color = 0x666666;
	tf.size = 12;
	tf.font = "Helvetica";

	createGraphContainer();
	loadXML();
	createBars();
}

Step 10: Graph Container

This function will create the x and y axis lines of the graph using the drawing API.

private function createGraphContainer():void
{
	graphContainer.graphics.lineStyle(1, 0x9C9C9E);
	graphContainer.graphics.moveTo(30, 30);
	graphContainer.graphics.lineTo(30, 270);
	graphContainer.graphics.lineTo(570, 270);

	addChild(graphContainer);
}

Step 11: Load XML Function

This is the function that handles the loading of the XML file. We specify a default paramenter to avoid calling the function using another .as file, instead we’re going to call it from the Document Class.

private function loadXML(file:String = "graph.xml"):void //Your xml data file
{
	urlLoader.load(new URLRequest(file)); //Loads the file in the parameter
	urlLoader.addEventListener(Event.COMPLETE, parseXML); Calls a function when the load is complete
}

Step 12: Parse XML

This function sets the data loaded to the XML object and calls the functions to create the graph using that data.

private function parseXML(e:Event):void
{
	xmlFile = new XML(e.target.data);
	totalBars = xmlFile.children().length();

	createBars();
	displayNames();
}

Step 13: Create Bars

This code handles the bar creation.

private function createBars():void
{
	for (var i:int = 0; i < totalBars; i++)//This for checks the number of bars in the xml
	{
		var bar:Sprite = new Sprite(); //A sprite for every bar

		bar.graphics.beginFill(xmlFile.children()[i].@color); //Gets the color of the bar from the xml
		bar.graphics.drawRect(0, 0, xmlFile.@width, xmlFile.children()[i].@value); //Creates the bar according to the xml specified width
		bar.graphics.endFill();

		bar.x = 40 + (xmlFile.@width * i) + (10*i); //Bar position
		bar.y = 270 - bar.height;

		var val:TextField = new TextField(); //A TextField to display the value

		val.defaultTextFormat = tf;
		val.autoSize = TextFieldAutoSize.RIGHT;
		val.text = xmlFile.children()[i]. @ value; //Gets the value from xml

		val.x = 55 + (xmlFile.@width * i) + (10*i); //Textfield position
		val.y = 255 - bar.height;

		tween = new Tween(bar,"height",Strong.easeOut,0,bar.height,1,true); //Animates the bar

		addChild(bar); //Adds the sprites to stage
		addChild(val);
	}
}

Step 14: Info Area

Information about the graph will be displayed in the top-right corner, this function will take care of that.

private function displayNames():void
{
	for (var i:int = 0; i < totalBars; i++)
	{
		var color:Sprite = new Sprite(); //Creates sprites and textfields for every bar
		var names:TextField = new TextField();

		names.defaultTextFormat = tf;
		names.autoSize = TextFieldAutoSize.LEFT;
		names.text = xmlFile.children()[i]. @ name;

		/* Position */

		names.x = 500;
		names.y = 30 + (20 * i);

		/* Color squares */

		color.graphics.beginFill(xmlFile.children()[i].@color);
		color.graphics.drawRect(0, 0, 10, 10);
		color.graphics.endFill();

		color.x = 490;
		color.y = 31 + (20 * i);

		addChild(names);
		addChild(color);
	}
}

Step 15: Document Class

Go back to the .Fla file and in the Properties Panel add "Graph" in the Class field to make this the Document Class.

Conclusion

Test your movie and see your graph appear on stage.

You can customize your graphs in many ways, using the XML file, and also adding new features with ActionScript. Try it!

I hope you liked this tutorial, Thanks for reading.

Create a Super Modern Elastic Menu in AS3

Sebastian Bratu — Mon, 07 Dec 2009 12:00:51 +0000

Sometimes you just want to be very modern about your website. And how better to show people how cool you are as a flash programmer than to make them experience it themselves? In this tutorial I will show you how to create a modern menu with spring-like buttons. We’ll even make it customizable from xml!

Preview

Let’s take a quick look at what we’re working towards:

Step 1: Preparing the document

Create a new ActionScript 3 flash file and set the dimensions to 600 x 200 pixels. We’re setting these dimensions in order to have space for the buttons to follow the mouse. Set the framerate to 25 and the DocumentClass to ElasticMenu, a class which we will create after the design.

Let’s make a background gradient which will be the base for our button. Create a rectangle and make it 150 x 40px. The size doesn’t matter at this time, because we will resize the rectangle to match the text size of the button.

I can hear you asking: why not create a rectangle programatically with Sprite.graphics.drawRectangle()? I’ll show you why I chose this path. The reason behind making a movieclip on the stage is that we can actually cut through the rectangle to create a cool cut-out button like in this preview:

I’m not going into how to make this example here, but this method’s better in case you want to spice up the background of the button. That’s just a tip.

Step 2: Creating the Background Movieclip

Select the rectangle you just created and press F8 (Modify > Convert to Symbol) to make the background graphic and check Export for ActionScript. Give this movieclip the class name “GradBackground”. We will use this class name from ActionScript.

Step 3: The XML File

Now we’ll create the xml file to hold our configuration. From this file the flash movie will get the button name, the link location and the color. Create a new file next to the .fla source and name it menu.xml with the following:

What happens here? We’re creating a

Build an OOP Tag Cloud in ActionScript 3.0

Bruno Crociquia — Mon, 28 Sep 2009 12:00:11 +0000

In this tutorial I’ll show you how to build a flexible, animatable tagcloud using an Object Oriented Programming approach. I don’t believe in a right or wrong method, but rather several degrees of efficiency. If you have any constructive criticism on my code feel free to comment.

That said, lets start!

Step 1: How to Think Cloud

This step is the most important one as it will dictate all the following steps. I start by looking at what I want to achieve and then break it into pieces, here’s my line of thought:

I want to be able to add multiple tag clouds in a page. I want it to be simple and customizable. So what do I need to build this tag cloud?

I need a word array, a color, a font, minimum and maximum size definitions, oh and I need tag cloud elements to store that information, these elements should be textField based. Since I want several clouds the obvious choice is to create an instanceable tagCloud class that in this case will extend a Sprite.

Here’s what my main function should look like:

var tagCloud:TagCloud = new TagCloud(words,font,color,minFontsize,maxFontsize,fullsize)

As you can tell there are plenty of parameters which need to be defined, the following will walk you trough the process. Create the following files:

MainTagCloud.fla – this file will instantiate the tagcloud
TagCloud.as – this is the class that will create the tagcloud
TagCloudElement.as – this is the element that will populate the tagcloud

Step 2: Building the Mother Class

Open TagCloud.as and write this code

package
{

	public class TagCloud extends Sprite
	{

		public function TagCloud($word_array:Array,$font="Arial",$minFontSize:Number=10,$maxFontSize:Number=30,$elementColor:Number=0xffffff,$fullsize:Number=200):void
		{
			//here I assign the variables I receive to the class's variables
			wordArray = $word_array;
			font = $font
			minFontSize = $minFontSize
			maxFontSize = $maxFontSize
			elementColor = $elementColor
            fullsize = $fullsize
			//after setting the variables I build the cloud
			buildTagCloud();
		}
}

import these libraries:

	import flash.text.Font;
	import TagCloudElement; // I'll get to this one later on
	import flash.display.Sprite;
	import flash.events.Event;

define these variables:

		public var cloudElements:Array;
		private var wordArray:Array;
		private var word:String;
		private var relevancy:Number;
		private var size:int;
		private var element:TagCloudElement;
		private var minFontSize:Number;
		private var maxFontSize:Number;
		private var elementColor:Number;
		private var font:String;
		private var wordLength:int
        private var fullsize:Number

You’ll end up with something like this:

package
{
	//First import these packages:
	import flash.text.Font;
	import TagCloudElement; // I'll get to this one later on
	import flash.display.Sprite;
	import flash.events.Event;

	//Create a class that will extend a sprite
	public class TagCloud extends Sprite
	{
		//we need these variables to be abble to create the tagCloud
		public var cloudElements:Array;
		private var wordArray:Array;
		private var word:String;
		private var relevancy:Number;
		private var size:int;
		private var element:TagCloudElement;
		private var minFontSize:Number;
		private var maxFontSize:Number;
		private var elementColor:Number;
		private var font:String;
		private var wordLength:int
        private var fullsize:Number

		public function TagCloud($word_array:Array,$font="Arial",$minFontSize:Number=10,$maxFontSize:Number=30,$elementColor:Number=0xffffff,$fullsize:Number=200):void
		{
			//here I assign the variables I receive to the class's variables
			wordArray = $word_array;
			font = $font
			minFontSize = $minFontSize
			maxFontSize = $maxFontSize
			elementColor = $elementColor
            fullsize = $fullsize
			//after setting the variables i build the cloud
			buildTagCloud();
		}
	}
}

Step 3: Construct Your Main Function

Here’s the main function that will build our cloud.

private function buildTagCloud() {
			//create an element array
			cloudElements = new Array();
			//gets the words lenght so i can iterate trought them and create the elements
			wordLength = getSingleWordList(wordArray).length
			for (var i=0; i
Step 4: Adding a Word Counter
Let’s see how many words we’re dealing with.
private function countWord($word:String,$array:Array):int {
		var count:int=0;
			for (var i:int=0; i<$array.length; i++) {
				if ($array[i].toLowerCase()==$word.toLowerCase()) {
					count+=1;
				}
			}
			return (count);
		}
Step 5: Set the Element Size
I set the element size by using a formula found on wikipedia:
function setElementSize($word:String, $array:Array, $minSize:Number, $maxSize:Number):Number {
			var $size:Number = $maxSize * countWord($word, $array) / $array.length
			$size *= $minSize
			return $size
		}
Step 6: Creating a Single Word List
This calls a filter for the array.
private function getSingleWordList($source:Array):Array {
			var $array:Array=$source.filter(singleWordFilter);
			return $array;
		}

Now set the filter rules.
private function singleWordFilter(element:*, index:int, arr:Array):Boolean {
			if(arr[index+1]){
				if (arr[index].toLowerCase()!=arr[index+1].toLowerCase()) {
					return true;
				} else {
					return false;
				}
			}else {
				return false;
			}
		}
Step 7: How to HitTest
We’re going to need to test for overlapping positions.
		private function cloudHitTest($i) {
			for (var a:int=0; a < $i; a++) {
				//if HITS
				if (cloudElements[a].hitTestObject(cloudElements[$i])) {
					//Reposition
					cloudElements[$i].x = Math.random() * fullsize
					cloudElements[$i].y = Math.random() * fullsize
					addChild(cloudElements[$i]);
					//and test again
					cloudHitTest($i)
				}
			}

		}
Step 8: Setting up an Element Getter
This is just a getter of an element by name, in case I need one over the main timeline.
		public function getElementByName($name:String):TagCloudElement {
			var $auxCloudElement:TagCloudElement;
			for (var i:int=0; i < wordLength; i++) {
				if (cloudElements[i].word == $name) {
					$auxCloudElement =  cloudElements[i]
				}
			}
			return $auxCloudElement
		}
Step 9: Inside the Element Class
package
{

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
   	import flash.text.GridFitType;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;

	public class TagCloudElement extends Sprite
	{
		public var word:String;
		public var urlpath:String;

		private var textCloudFormat:TextFormat;
		private var textCloud:TextField;

		public var font:String;
		public var size:Number;
		public var color:Number;

		// Same constructor as TagCloud, the element extends a Sprite
		// and Builds the Element based on a TextField
		public function TagCloudElement($word:String, $size:Number = 10, $font:String = "Arial", $elementColor:Number = 0xffffff):void
		{
			word = $word
			font = $font
			size = $size
			color = $elementColor

			buildElement();
		}

		private function buildElement() {
			//creates the textformat
			textCloudFormat = new TextFormat();
			// defines the font size and color
			textCloudFormat.font = font
			textCloudFormat.size = size
			textCloudFormat.color = color
			// creates a textField
			textCloud = new TextField();
			// embeds the font
			textCloud.embedFonts=true;
			//sets the antialias to readable equivalent
            textCloud.antiAliasType=AntiAliasType.ADVANCED;
			//defines its text
            textCloud.text=word
			//defines its size as automatic
            textCloud.autoSize=TextFieldAutoSize.LEFT;
			//fit to pixel
			textCloud.gridFitType = GridFitType.PIXEL
			// unselectable text
			textCloud.selectable = false;
			// assigns the textformat to the textfield
			textCloud.setTextFormat(textCloudFormat)
			// adds the MouseEvents listeners
			textCloud.addEventListener(MouseEvent.ROLL_OVER,rollOverCloudElement)
			textCloud.addEventListener(MouseEvent.ROLL_OUT,rollOutCloudElement)
			textCloud.addEventListener(MouseEvent.CLICK,clickCloudElement)
			addChild(textCloud);
		}

		private function rollOverCloudElement(e:MouseEvent){
			e.target.textColor = 0x666666;
		}
		private function rollOutCloudElement(e:MouseEvent){
			e.target.textColor = color
		}
		// I've made a link to a twitter search using the word selected.
		private function clickCloudElement(e:MouseEvent){
			navigateToURL(new URLRequest("http://search.twitter.com/search?q="+e.target.text),"_blank");
		}
	}
}
Step 10: Implementation
Now, all that's left to be done is to implement this class in a real .fla file with all the stuff that you are accustumed to (ie:timeline)  
You'll need to create a font so you can display the textFields, I embeded an Arial font.

Then in the first frame of your .fla import the TagCloud class, set a stage.align to the top left (so that we can find the stage middle position without much work) and create a new instance of the font we just added to the library:
import TagCloud;

stage.align = StageAlign.TOP_LEFT
var wordArray:Array;
var tagCloud:TagCloud;
var arial:Arial = new Arial();//sets a new instance of Arial (already in the library)

function init() {
	//creates an array to populate the cloud
	wordArray = new Array("In","this","fashion,","text","clouds","may","become","a","generally","applied","tool","for","managing","growing","information","overload","by","using","automated","synthesis","and","summarization","In","the","information","saturated","future","or","the","information","saturated","present");
	//sorts the array alphabetically so i can filter later on
	wordArray.sort();
	// creates a new tagCloud instance
	tagCloud = new TagCloud(wordArray,arial.fontName,15,20,0x000000);
	// center's it to stage
	tagCloud.x = stage.stageWidth*0.5-tagCloud.width*0.5
	tagCloud.y = stage.stageHeight*0.5-tagCloud.height*0.5
	//adds to stage
	addChild(tagCloud);
}

init();
Step 11: Build an RSS Feed Request
Now we need to grab a feed from somewhere so we can cloud it. I chose the CNN news feed. To be able to load an XML you need 4 objects including a urlRequest that will be used as a path to the feed.
var requestFeed:URLRequest = new URLRequest("http://rss.cnn.com/rss/cnn_world.rss");
//an urlLoader so that we can load the request we need to make
var loaderFeed:URLLoader = new URLLoader()
// a XML object so we can store the data we recieve from the feed
var xmlFeed:XML;
//and last but not least a title array that i can explode the words from...
var titleWords:Array;

Step 12: The Initialization Method
Now inside our main function I need to add the complete event handler to the request so that it can be called upon a successful load.
function init() {
	loaderFeed.addEventListener(Event.COMPLETE,onFeedComplete)
	//I will need the wordArray to be instantiated so I can store the words inside the feed
	wordArray = new Array()
	//we are ready to load the XML now
	loaderFeed.load(requestFeed);

}

Step 13: The Data Structure
The data structure is stored inside the e.target.data so we create the XML here by doing:
function onFeedComplete(e:Event){
	xmlFeed = new XML(e.target.data)
	//after viewing the source of the rss feed I noticed the structure was something like channel.item.title so i'm using the titles as my word source.
	//I need to make an array to store all the words of a title and then add each on of those words inside the word array
	//for this I cycle through them

	for(var i:uint=0;i
Step 14: Building the Word List
Instanciate the titleWords in every iteration so that you have a clean array everytime we have a new title.

titleWords = new Array()
		//to make single words I split them on "space"
		titleWords = xmlFeed.channel.item[i].title.split(" ")
		//after them being split i iterate them to be added to the wordArray
		for(var j:uint=0;j
Step 15: Starting the Tag Cloud
Now we have all the elements we need to make this tag cloud.
try{
		tagCloud = new TagCloud(wordArray,arial.fontName,20,40,0xFFFFCD,300);
	}catch(e:Error){
		startTagCloud()
	}
	//all that is left is to define an X and a Y
	tagCloud.x = stage.stageWidth*0.5-tagCloud.width*0.5
	tagCloud.y = stage.stageHeight*0.5-tagCloud.height*0.5
	//and adding it to the stage
	addChild(tagCloud);
	//tadaaa we are done..
}

//don't forget to initialize the main function 
init();

Step 16: The Final Code
Here's the complete code for you to read fully.
import TagCloud;
stage.align = StageAlign.TOP_LEFT

var wordArray:Array;
var tagCloud:TagCloud;
var arial:Arial = new Arial();

var requestFeed:URLRequest = new URLRequest("http://rss.cnn.com/rss/cnn_world.rss");
var loaderFeed:URLLoader = new URLLoader()
var xmlFeed:XML;
var titleWords:Array;

function init() {
	loaderFeed.addEventListener(Event.COMPLETE,onFeedComplete)
	wordArray = new Array()
	loaderFeed.load(requestFeed);
}

function onFeedComplete(e:Event){

  xmlFeed = new XML(e.target.data)

  	for(var i:uint=0;i
Conclusion
I could have used linked lists and while loops to make this a bit faster, but you'll find it reasonably quick. One final note: be sure to set the random size big enough or you'll get a stackOverFlow error when the cloudElement can't find a place to be put.
I hope you liked this tutorial, thanks for reading!

Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3

Pierre Laveklint — Wed, 09 Sep 2009 12:00:43 +0000

Time to implement labels and navigation to our Slideshow Application. We’ll go over a lot in this third and final part of the series. This screencast is almost one and a half hours in total, so sit back, open up your files from Part 2 and let’s dig in!

View Screencast: Section One

Introduction

Get the Flash Player to see this player.

View Screencast: Section Two

Labels

Get the Flash Player to see this player.

View Screencast: Section Three

Tween Manager

Get the Flash Player to see this player.

View Screencast: Section Four

Navigation

Get the Flash Player to see this player.

View Screencast: Section Five

Roundup

Get the Flash Player to see this player.

Build a Smooth Hot Products List with the Caurina Tweener Class

Yanko — Wed, 02 Sep 2009 12:00:06 +0000

In this, his first tut at Flashtuts+, Yanko takes you through building a dynamic ‘Hot Products’ list using old favourites ActionScript 3.0 and XML. He also smoothes things out by utilizing the Caurina Tweener class. Enjoy..

Step 1: File Structure

We’ll begin by taking a look at the file structure of our project. The folder “caurina” is the Tweener class folder. You can download tweener from here:Tweener. In the folder “img” we’ll store our images that will be used in the application.
The images in my case will have dimensions 60px wide and 55px high.

Step 2: XML

Let`s create the XML file. Open your text editor and write:

Save it as “data.xml” in the “project” folder.

Step 3: The Idea

The idea is to pass parameters to the main function “showData”. These parameters are “loopMin” and “loopMax” (see the code) values for a for() loop. Then we’ll filter the results with an if() statement and show them.

Step 4: Starting

Create a new Flash file (ActionScript 3).

Set the stage size to 350×350px

Step 5: Background

With the Rectangle tool (R) draw a shape with dimensions 350×350px, type linear and colors #d3d3d3,#f1f1f1. Use the Gradient transform tool (F) to adjust the gradient.

Click on the shape then open align window and make sure that the “To stage” button is enabled. Align your shape vertically and horizontally.

Create a new layer, then with the rectangle tool draw a shape 350×40px with color #333333 and align it to the bottom.

Now select both shapes and press F8 or Modify > Convert to symbol, set type to movie clip and name it “main”.

Step 6: Adding Buttons

Double-click on the movie clip to open it then rename Layer 1 to “background” and lock it. Create a new layer and name it “btns”. Select the Oval tool (O) then hold shift and drag a circle with stroke color:#0098FF and fill color:#FFFFFF dimensions 20X20px. Click on the stroke and change the stroke height to 3.

Select your shape and press F8 to convert it to symbol. Choose type “Button” and name it “btn”.

Double-click on the Button then right-click on the “Over” frame. Select Insert Keyframe.

Select fill color and change it to #d3d3d3.

Insert Keyframe on the Down frame and change the fill color to #999999. Return to “main” movie clip and select the button. Change its instance name to “btn1″. Then drag the button to the bottom, drag to the right whilst holding “Alt” and release to create a second button. Change the instance name to “btn2″.

Repeat the procedure one more time to add a third button to stage and change its instance name to “btn3″. Open the Align window and disable “To stage” button. Select the three buttons and align them horizontally and verticaly. Enable “To stage” once again and align them vertically.

Step 7: Items

Create a new layer and name it “items”. Draw a rectangle on it of 320×90px color: type:linear #D3D3D3,#BBBBBB. Again, use the gradient transform tool to adjust the gradient. Select the shape and align it vertically to the stage. Press F8, type:Movie Clip and name it “item” – select top middle as the registration point.

Double-click on the movie clip item. Them rename “layer 1″ to “background”. Create a new layer and name it “txt”. Select the text tool(T) and set the text type to Dynamic Text. Then draw a text field, setting the instance name to “txt”. Type some text and set these properties:

Create new layer and name it “price”. With the text tool draw another text field and set its instance name to “price”. Set the text color to :#0099FF.

Now we’re gonna make a new button..

Create a new layer and name it “btn_more”. Now draw a shape with the rectangle tool of 60×20px with color:#666666. Select it and press F8. Choose type:Button and assign it a name of “more”. Also, change its instance name to “more”. Open the button and add a new layer, call it text. Select the text tool and use it to draw a text field, type:static text. Enter the text “more” into the field, color:#FFFFFF;size:12;format:align center;.

Insert keyframes in the Over and Down frames, and change color as you like. I use: over:#999999; down:#333333;

Return to the main movie clip, select the item and change its instance name to item1. Hold the Alt key, drag the item down to add a copy to stage. Name the second item instance name to “item2″. Add another copy and change the instance name to “item3″. Align the items and you should have something like this:

Step 8: Mask

Now we’ll make a mask for the items. Make a new layer, name it “mask” and on it draw a rectangle 350×310px.

Right-click on the mask layer, then select mask:

Make new layer, name it “actions” and paste the code that is in the following step.

Step 9: Actionscript

Take a look at the full code:

//import Tweener
import caurina.transitions.*;
//

//
var xmlPath:String="data.xml";//holds link to xml file
var data_xml:XML;//XML Object
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request
var data_Loader:URLLoader = new URLLoader();//Loader
var xml_length:Number;//xml length
//

//
var time:Number=5000;//5000 = 5 seconds
var timer:Timer=new Timer(time);//timer
//

//
var imgPath:String;//image path for first item
var imgPath2:String;//image path for second item
var imgPath3:String;//image path for third item
var item1Y:Number=item1.y;//item 1 y value
var item2Y:Number=item2.y;//item 2 y value
var item3Y:Number=item3.y;//item 3 y value
//

//
var currentBtn:Number=1;//wich btn is pressed
var min:Number;//min value used in function hideNshow()
var max:Number;//max value used in function hideNshow()
//

//
//----------------------------------------------------
function xmlLoaded(event:Event):void {//xml Loaded function
	data_xml=new XML(data_Loader.data);//get data prom XML file
	xml_length=data_xml.item.length();//xml length
	min=xml_length-6;//set min value to second result
	max=xml_length-2;//set max velue to second resuld
	function showData(loopMin:Number,loopMax:Number) {//Main Function

		var i:Number;//var for for loop
		var loopMaxResult=loopMax-2;//var for third result
		var loopSecondResult=loopMax-3;//var for second result

		for (i=loopMin; i
				imgPath=data_xml.item[i].@img;//get img url from xml
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request
				var imgLoader:Loader=new Loader();//image Loader
				imgLoader.load(imgRequest);//load the image
				item1.addChild(imgLoader);//add first image to item 1
				imgLoader.x=-150;//image x value
				imgLoader.y=15;//image y value
				//

			}//end if
			if (i==loopSecondResult) {//second result

				fData(item2,i);//call fData function to fill item 2
				//
				imgPath2=data_xml.item[i].@img;//get img url from xml
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request
				var imgLoader2:Loader=new Loader();//image Loader
				imgLoader2.load(imgRequest2);//load the image
				item2.addChild(imgLoader2);//add first image to item 2
				imgLoader2.x=-150;//image x value
				imgLoader2.y=15;//image y value
				//

			}//end if
			if (i==loopMaxResult) {//third result

				fData(item3,i);//call fData function to fill item 3
				//
				imgPath3=data_xml.item[i].@img;//get img url from xml
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request
				var imgLoader3:Loader=new Loader();//image Loader
				imgLoader3.load(imgRequest3);//load the image
				item3.addChild(imgLoader3);//add first image to item 3
				imgLoader3.x=-150;//image x value
				imgLoader3.y=15;//image y value
				//

			}//end if

		}// end for
		function fData(item:MovieClip,iValue:int) {//function that fill data into items
			var moreURL:String;//url for button more

			item.txt.text=data_xml.item[iValue].@title;//fill item title
			item.price.text=data_xml.item[iValue].@price;//fill item price
			moreURL=data_xml.item[iValue].@link;//item link
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn
			function gotoURL(e:MouseEvent):void {//click event function
				var myURL:URLRequest=new URLRequest(moreURL);//URL request
				navigateToURL(myURL);//go to item link 

			}//end function gotoURL

			// function for show N hide items
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
				//
				timer.stop();//stop the timer
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,
				//when done call function Show()
				//
				function Show() {//show items
					//
					currentBtn+=1;//add 1 to current btn value
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns
						currentBtn=1;//set it to 1
					}//end if

					item1.removeChild(imgLoader);//remove image from item 1
					item2.removeChild(imgLoader2);//remove image from item 2
					item3.removeChild(imgLoader3);//remove image from item 3

					showData(iMin,iMax);//call function showData with parameters iMin and iMax (values of  min and max vars)

					min-=3;//decrease the min value to show next 3 results from xml
					max-=3;//decrease the max value to show next 3 results from xml
					if (max==xml_length-8) {//if max value
						min=xml_length-3;//set min value to show first result
						max=xml_length+1;//set max value to show first result
					}//end if

					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1
					timer.start();
					//
				}//end function Show
			}//end function hideNshow
			function timerEvent() {//function for timer event
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
			}
			//btn 1 function
			function btn1Clicked(e:MouseEvent) {
				min=xml_length-3;//set min value
				max=xml_length+1;//set max value
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
				currentBtn=0;//set surrent Btn
				btnControl(1);//call function btnControl
			}
			//btn 2 function
			function btn2Clicked(e:MouseEvent) {
				min=xml_length-6;
				max=xml_length-2;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=1;
				btnControl(2);
			}
			//btn 3 function
			function btn3Clicked(e:MouseEvent) {
				min=xml_length-9;
				max=xml_length-5;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=2;
				btnControl(3);

			}
			function btnControl(btnNumber:Number) {
				//some case switch......
				switch (btnNumber) {
					case 1 ://when btn 1 is active
						btn1.alpha=0.5;//set alpha
						btn1.mouseEnabled=false;//disable button
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 2 ://when btn 2 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=0.5;//set alpha
						btn2.mouseEnabled=false;//disable button
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 3 ://when btn 3 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=0.5;//set alpha
						btn3.mouseEnabled=false;//disable button
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						break;

				}//end Switch
			}//end function btnControl
			//
			//timer
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
			timer.start();
			//buttons
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function
			//
			//show wich btns is active
			if (currentBtn==1) {
				btnControl(1);//call btnControl function
			} else if (currentBtn==2) {
				btnControl(2);//call btnControl function
			} else if (currentBtn==3) {
				btnControl(3);
			}//end if
		}//end function fData

	}//end function ShowData
	showData(xml_length-3,xml_length+1);//show First Result

}
//end xml Loaded function
//---------------------------------------------------

//
data_Loader.load(data_Req);
data_Loader.addEventListener(Event.COMPLETE, xmlLoaded);
//

Step 10: Vars

//import Tweener
import caurina.transitions.*;
//

//
var xmlPath:String="data.xml";//holds link to xml file
var data_xml:XML;//XML Object
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request
var data_Loader:URLLoader = new URLLoader();//Loader
var xml_length:Number;//xml length
//

//
var time:Number=5000;//5000 = 5 seconds
var timer:Timer=new Timer(time);//timer
//

//
var imgPath:String;//image path for first item
var imgPath2:String;//image path for second item
var imgPath3:String;//image path for third item
var item1Y:Number=item1.y;//item 1 y value
var item2Y:Number=item2.y;//item 2 y value
var item3Y:Number=item3.y;//item 3 y value
//

//
var currentBtn:Number=1;//wich btn is pressed
var min:Number;//min value used in function hideNshow()
var max:Number;//max value used in function hideNshow()
//

//

Step 11: xmlLoaded

function xmlLoaded(event:Event):void {//xml Loaded function
	data_xml=new XML(data_Loader.data);//get data prom XML file
	xml_length=data_xml.item.length();//xml length
	min=xml_length-6;//set min value to second result
	max=xml_length-2;//set max velue to second resuld

When the xml file is loaded, an event listener calls the xmlLoaded function.

Step 12: showData

function showData(loopMin:Number,loopMax:Number) {//Main Function

		var i:Number;//var for for loop
		var loopMaxResult=loopMax-2;//var for third result
		var loopSecondResult=loopMax-3;//var for second result
        for (i=loopMin; i
				imgPath=data_xml.item[i].@img;//get img url from xml
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request
				var imgLoader:Loader=new Loader();//image Loader
				imgLoader.load(imgRequest);//load the image
				item1.addChild(imgLoader);//add first image to item 1
				imgLoader.x=-150;//image x value
				imgLoader.y=15;//image y value
				//

			}//end if
			if (i==loopSecondResult) {//second result

				fData(item2,i);//call fData function to fill item 2
				//
				imgPath2=data_xml.item[i].@img;//get img url from xml
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request
				var imgLoader2:Loader=new Loader();//image Loader
				imgLoader2.load(imgRequest2);//load the image
				item2.addChild(imgLoader2);//add first image to item 2
				imgLoader2.x=-150;//image x value
				imgLoader2.y=15;//image y value
				//

			}//end if
			if (i==loopMaxResult) {//third result

				fData(item3,i);//call fData function to fill item 3
				//
				imgPath3=data_xml.item[i].@img;//get img url from xml
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request
				var imgLoader3:Loader=new Loader();//image Loader
				imgLoader3.load(imgRequest3);//load the image
				item3.addChild(imgLoader3);//add first image to item 3
				imgLoader3.x=-150;//image x value
				imgLoader3.y=15;//image y value
				//

			}//end if

		}// end for

The function “showData” passes two parameters “loopMin” and “loopMax” these are the values for the for() loop. “loopMaxResult” and “loopSecondResult” we use in an if() statement to separate three results. If we have an array with 3 elements, the first element will be with key [0] and the last with key[2](0,1,2). To loop through the array with for() our loopMin value must be=0 and our loopMax=4. To know in which item we need to put data we use if (i==loopMin) this will display the first result in the first item, if (i==loopSecondResult) displays the second result and if (i==loopMaxResult) the third result.

Step 13: Function fData

function fData(item:MovieClip,iValue:int) {//function that fill data into items
			var moreURL:String;//url for button more

			item.txt.text=data_xml.item[iValue].@title;//fill item title
			item.price.text=data_xml.item[iValue].@price;//fill item price
			moreURL=data_xml.item[iValue].@link;//item link
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn
			function gotoURL(e:MouseEvent):void {//click event function
				var myURL:URLRequest=new URLRequest(moreURL);//URL request
				navigateToURL(myURL);//go to item link 

			}//end function gotoURL

Function fData passes two parameters. One is the movie clip instance name and the second is i value. Here we add data from the xml document to our movie clips and also make the button “more” open links from the xml.

Step 14: hideNshow

// function for show N hide items
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
				//
				timer.stop();//stop the timer
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,
				//when done call function Show()
				//
				function Show() {//show items
					//
					currentBtn+=1;//add 1 to current btn value
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns
						currentBtn=1;//set it to 1
					}//end if

					item1.removeChild(imgLoader);//remove image from item 1
					item2.removeChild(imgLoader2);//remove image from item 2
					item3.removeChild(imgLoader3);//remove image from item 3

					showData(iMin,iMax);//call function showData with parameters iMin and iMax (values of  min and max vars)

					min-=3;//decrease the min value to show next 3 results from xml
					max-=3;//decrease the max value to show next 3 results from xml
					if (max==xml_length-8) {//if max value
						min=xml_length-3;//set min value to show first result
						max=xml_length+1;//set max value to show first result
					}//end if

					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1
					timer.start();
					//
				}//end function Show
			}//end function hideNshow

Function hideNshow passes 4 parameters.

effTime – time in seconds that is used in tweener animation
effeffTransition – type of tweener transition
iMin – var min value
iMax – var max value

When item1 animation is completed tweener calls the function “Show” (which brings items back but removes images from each one) and runs the “showData” function to fill them with the next results from our xml file. Additionally, the value of currentBtn is increased by one. Lastly, the timer is started.

Step 15: timeEvent

function timerEvent() {//function for timer event
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
			}

This function is called when the timer count down 5 seconds.

Step 16: Buttons functions

//btn 1 function
			function btn1Clicked(e:MouseEvent) {
				min=xml_length-3;//set min value
				max=xml_length+1;//set max value
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
				currentBtn=0;//set surrent Btn
				btnControl(1);//call function btnControl
			}
			//btn 2 function
			function btn2Clicked(e:MouseEvent) {
				min=xml_length-6;
				max=xml_length-2;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=1;
				btnControl(2);
			}
			//btn 3 function
			function btn3Clicked(e:MouseEvent) {
				min=xml_length-9;
				max=xml_length-5;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=2;
				btnControl(3);

			}

These are the functions that event listeners for buttons call.

Step 17: btnControl function

			function btnControl(btnNumber:Number) {
				//some case switch......
				switch (btnNumber) {
					case 1 ://when btn 1 is active
						btn1.alpha=0.5;//set alpha
						btn1.mouseEnabled=false;//disable button
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 2 ://when btn 2 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=0.5;//set alpha
						btn2.mouseEnabled=false;//disable button
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 3 ://when btn 3 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=0.5;//set alpha
						btn3.mouseEnabled=false;//disable button
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						break;

				}//end Switch
			}//end function btnControl

btnControl passes one parameter “btnNumber” which is used in a switch statement to change the properties of buttons when they’re clicked or active.

Step 18: Event Listeners

            //
			//timer
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
			timer.start();
			//buttons
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function
			//

Step 19: Which Button is Active?

//show which button is active
			if (currentBtn==1) {
				btnControl(1);//call btnControl function
			} else if (currentBtn==2) {
				btnControl(2);//call btnControl function
			} else if (currentBtn==3) {
				btnControl(3);
			}//end if

We use three if() statements to see which button is currently active.

Step 20: Call functions

}//end function fData

	}//end function ShowData
	showData(xml_length-3,xml_length+1);//show First Result

}
//end xml Loaded function
//---------------------------------------------------

//
data_Loader.load(data_Req);
data_Loader.addEventListener(Event.COMPLETE, xmlLoaded);
//

After end of function “ShowData” we run it with parameters (xml_length-3,xml_length+1) to see the first results when we run the application. We add event listener to data_loader so when the xml file is loaded and ready to use we call the “xmlLoaded” function.

Conclusion

You can modify the app as you like, change transition types, timer seconds or for example make it to show recent posts, news, tweets etc. I hope you enjoyed following along!

Create a Responsive Image Scroller in ActionScript 3.0

Evan Mullins — Wed, 26 Aug 2009 12:00:34 +0000

This tutorial will demonstrate how to create a horizontally scrolling image viewer. It will cover xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!

Quick Introduction

I’m a firm believer in learning by coding and tinkering. So in this tutorial, I’m stating what to do and then showing the equivalent code; please dig into the code, change things and tinker – I think that’s one of the best ways to learn! I expect that you have a basic understanding of ActionScript already and I won’t explain the fundamentals. I hope the descriptions will be helpful, but if I don’t explain something that you aren’t quite following, feel free to ask about it in the comments.

Step 1: Set Up XML

We’ll want nodes of images included in our xml. Each node will represent an image with attributes. We can add anything we like here, I’ll stick to three attributes to each image node. The ’src’ of the image (used to load it in), the title and the url we will link to from the scroller. I’ll go ahead and wrap them all within an images node (in case I want to include anything else in the xml later, such as customization options – hint).

Each image node will need a source image, a title and a url. The source (src) will be the image that gets loaded into the scroller, the title will be what we call it and the url will be the url that we load from the scroller when users click on the image (it can be a larger image or even a website). I’ve gotten some images from the envato asset library and resized them to be used as the thumbnails as well. I shrank the thumbnails to fit into a 140px by 105px area, this is not required but will help to optimize the experience since we won’t be loading in huge images. You’ll see soon that any size image will work because we’ll code it to resize any image that loads to fit into the scroller area!

Step 2: Set Up Flash

OK, now that we have our xml file finished, let’s get started in Flash. Open Flash and create a new file (ActionScript 3.0). Adjust the stage size to something around 600 wide and 150 tall, set the background to any color you like (I chose a dark color to help the images stand out a bit more – #000033 if you wanna follow along) and step up the frame rate to 30 frames per second to give us smoother animation. Then let’s go ahead and create a new layer calling it "ActionScript". On the first frame in the timeline click to the actions panel and we’re ready to continue!

Step 3: Load XML

We need to load the information from the xml file (created in step 1) into our Flash file. It’s a pretty simple step, but a foundation which can spring to many other creative applications. In just a few lines of code we initialize a URLLoader, an XML object to hold our data and a string to specify the path to the xml. Then we load the xml through the urlLoader object. That done, we need an Event listener to fire off when the file is fully loaded, we wouldn’t want to start messing with the xml data before it finishes loading. As specified in the docs, the complete event passes the loaded content as a the event target data property, so we access the actual xml as e.target.data and assign it to our xml object.

Let’s go ahead and double check that we’ve set that all up correctly and trace the image nodes of our xml to the output panel.

//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {
	trace("xml loading complete");
	xmlData = new XML(e.target.data);
	trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList
}

/*
output window
///////////////
loading xml from: image-scroller.xml
xml loading complete









*/

Step 4: Parse XML

Loading the xml is great, but we also have to read it and let our code know what to do with the data. So rather than just tracing out the xmlList we’ll send it to another function that will take care of creating our scroller. The buildScroller function will accept an XMLList, so we’ll loop through it, creating movie clip objects for each image in the scroller and assigning them properties according to the xml node attributes title, url and src. Later we’ll build out this function to include much more so it will actually do what it is named for and build the scroller!

For now let’s just trace this info to make sure everything is working according to plan. We can even wrap the content buildScroller function with trace statements so we always know where we are.

//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {
	trace("xml loading complete");
	xmlData = new XML(e.target.data);
	buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

}

//build scroller from xml
function buildScroller(imageList:XMLList):void{
	trace("build Scroller");

	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);
	}

	trace("termination of build scroller");
}

/*
output
///////
loading xml from: image-scroller.xml
xml loading complete
build Scroller
0 Jelly 4 images/scottwills_underwater4.jpg images/tn/scottwills_underwater4.jpg
1 Cat images/scottwills_cat.jpg images/tn/scottwills_cat.jpg
2 Statue images/scottwills_modern_sculpture.jpg images/tn/scottwills_modern_sculpture.jpg
3 Arch 3 images/madness_arch3.jpg images/tn/madness_arch3.jpg
4 Penguin images/scottwills_penguin.jpg images/tn/scottwills_penguin.jpg
5 Jelly images/scottwills_horse.jpg images/tn/scottwills_horse.jpg
6 Statue 2 images/scottwills_modernsculpture2.jpg images/tn/scottwills_modernsculpture2.jpg
7 Arch 1 images/madness_arch1.jpg images/tn/madness_arch1.jpg
8 Arch 2 images/madness_arch2.jpg images/tn/madness_arch2.jpg
termination of build scroller

*/

Step 5: Build Scroller MovieClip to Contain Each Image

Now that the build scroller function is created and that it creates objects for each node in the xml, let’s add them to the stage!

We’ll begin by creating a scroller MovieClip. This will be the container for all the objects we want to scroll, so each image node will have a movieclip within this scroller object. Let’s go ahead and add it to the stage, then set the y value to 30. We won’t yet see anything on the stage when we test, but we’re about to add items to the scroller for each image in the xmlList.

var scroller:MovieClip = new MovieClip();
this.addChild(scroller);
scroller.y = 30;

Step 6: Adding Items to Scroller

We already have the movie clips created with properties, but we need to create something we can see, so let’s create a box area to actually see these scroller items. Create a blackBox sprite and give it a shape with the graphics api. I’ve decided that I want my standard scroller item to be 140×105px so I’ll create the blackBox to fit that area and I’ll give it a 1px border on all sides. Move it up and to the left one pixel and give it 142×107 dimensions.

We add the blackbox sprite to the thisOne movieClip and also update the x value of the item. Since each will be 140 wide, I’ll add some padding (20) and lay them out horizontally. I’ll update the trace statement to output what is going on here.

var scroller:MovieClip = new MovieClip();
this.addChild(scroller);
scroller.y = 30;
//build scroller from xml
function buildScroller(imageList:XMLList):void{
	trace("build Scroller");
	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		//outline
		var blackBox:Sprite = new Sprite();
		blackBox.graphics.beginFill(0xFFFFFF);
		blackBox.graphics.drawRect( -1, -1, 142, 107);
		thisOne.addChild(blackBox);

		thisOne.x = (140 + 20) * item;
		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		trace(thisOne.itemNum, thisOne.title, " added to scroller");

		//add item
		scroller.addChild(thisOne);
	}
	trace("termination of build scroller");
}
/*
output
///////
loading xml from: image-scroller.xml
xml loading complete
build Scroller
0 Jelly 4  added to scroller
1 Cat  added to scroller
2 Statue  added to scroller
3 Arch 3  added to scroller
4 Penguin  added to scroller
5 Jelly  added to scroller
6 Statue 2  added to scroller
7 Arch 1  added to scroller
8 Arch 2  added to scroller
termination of build scroller
*/

Step 7: Adding Click Listener to Items

Alright, this isn’t much yet because it just looks like a bunch of boxes that don’t do anything. Let’s add a listener to these boxes though, so that we can tell that they are each unique items in the scroller. Thinking of the final result, we’ll add a click listener because we want users to be able to click the item in the scroller and go to the link we put in the xml. Let’s make the clip buttonMode true, so that it’s perceived as something that is click-able. Then add an event Listener for the MouseEvent.CLICK. For now we’ll just have it listen for this click event and fire a function to trace the url we’re aiming at.

Through the output we can see that each box has properties sent to it from the xml.

//build scroller from xml
function buildScroller(imageList:XMLList):void{
	trace("build Scroller");
	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		//outline
		var blackBox:Sprite = new Sprite();
		blackBox.graphics.beginFill(0xFFFFFF);
		blackBox.graphics.drawRect( -1, -1, 142, 107);
		thisOne.addChild(blackBox);

		thisOne.x = (140 + 20) * item;
		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		//create listeners for this item
		thisOne.buttonMode = true;
		thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

		//add item
		scroller.addChild(thisOne);
	}

	trace("termination of build scroller");
}

function clickScrollerItem(e:MouseEvent):void {
	trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
}

/*
output
//////
loading xml from: image-scroller.xml
xml loading complete
build Scroller
termination of build scroller
clicked item 2 - visit url: images/scottwills_modern_sculpture.jpg
clicked item 0 - visit url: images/scottwills_underwater4.jpg
clicked item 1 - visit url: images/scottwills_cat.jpg
clicked item 3 - visit url: images/madness_arch3.jpg
clicked item 1 - visit url: images/scottwills_cat.jpg
*/

Step 8: Adding More Listeners to Scroller Items

Let’s finish off the event listeners! We’ll want to listen to each of these items to know when a user clicks, mouses over and mouses out.

//build scroller from xml
function buildScroller(imageList:XMLList):void{
	trace("build Scroller");
	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		//outline
		var blackBox:Sprite = new Sprite();
		blackBox.graphics.beginFill(0xFFFFFF);
		blackBox.graphics.drawRect( -1, -1, 142, 107);
		thisOne.addChild(blackBox);

		thisOne.x = (140 + 20) * item;
		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		//create listeners for this thumb
		thisOne.buttonMode = true;
		thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
		thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
		thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

		//add item
		scroller.addChild(thisOne);
	}

	trace("termination of build scroller");
}

function clickScrollerItem(e:MouseEvent):void {
	trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
}
function overScrollerItem(e:MouseEvent):void {
	trace("over " + e.currentTarget.title);
}
function outScrollerItem(e:MouseEvent):void {
	trace("out " + e.currentTarget.title);
}
/* output
//////////////
loading xml from: image-scroller.xml
xml loading complete
build Scroller
termination of build scroller
over Jelly 4
out Jelly 4
over Cat
out Cat
over Statue
out Statue
over Arch 3
out Arch 3
over Arch 3
clicked item 3 - visit url: images/madness_arch3.jpg
out Arch 3
over Statue
clicked item 2 - visit url: images/scottwills_modern_sculpture.jpg
out Statue
*/

Step 9: Loading and Adding the Images

Now the part I’m sure you’ve been getting anxious about, let’s get the images loaded into the scroller items so we can see what they are! We’ll do this in the buildScroller function. Right after the blackbox is created and the properties are assigned for the current item let’s also create another sprite to contain the actual image.

We’ll use a loader object and a URLRequest object to handle the loading of the image, which is newly standardized with ActionScript 3. We’ll pass the src of the image to the urlrequest object, then load the urlrequest with our loader object and finally we’ll add the loader to the thisThumb sprite adding that in turn to the thisOne movieClip. Whew.

It’s pretty self explanatory – and in just a couple of lines of code we’ve loaded the src images from our xml into Flash!

function buildScroller(imageList:XMLList):void{
	trace("build Scroller");
	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		//outline
		var blackBox:Sprite = new Sprite();
		blackBox.graphics.beginFill(0xFFFFFF);
		blackBox.graphics.drawRect( -1, -1, 142, 107);
		thisOne.addChild(blackBox);

		thisOne.x = (140 + 20) * item;
		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		//image container
		var thisThumb:Sprite = new Sprite();
		//add image
		var ldr:Loader = new Loader();
		var urlReq:URLRequest = new URLRequest(thisOne.src);
		trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
		ldr.load(urlReq);
		thisThumb.addChild(ldr);
		thisOne.addChild(thisThumb);

		//create listeners for this thumb
		thisOne.buttonMode = true;
		thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
		thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
		thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

		//add item
		scroller.addChild(thisOne);
	}

	trace("termination of build scroller");
}

Step 10: Adding Event Listeners to the Image Loading Process

When we load the images, we need to create some event listeners to tell us when the loading is complete. Best practice deal with any errors (in case there is a typo in the path to the image or we don’t have access or something). So just before we load the images let’s add an event listener for the loader’s contentLoaderInfo object for a complete event and also an i/o error. Then we’ll need to create the event handler functions.

For the completeHandler let’s just trace the image title for now, we’ll have to walk up the hierarchy of the event target’s parent’s parent’s title to find it, because of the way we nested our sprite within our scroller item objects (the thisOne Sprite).

trace("loading thumbnail "+item+" into Scroller: " + url);
//assign event listeners for Loader
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
ldr.load(urlReq);
...
function completeHandler(e:Event):void {
	trace("thumbnail complete "+e.target.loader.parent.parent.title);
}
function errorHandler(e:IOErrorEvent):void {
	trace("thumbnail error="+e);
}

Step 11: Tweening the Images

I’m using Tweener for this tutorial, but there are various tweening engines. If you’re not familiar with it

Tweener (caurina.transitions.Tweener) is a Class used to create tweens and other transitions via ActionScript code for projects built on the Flash platform… In layman’s terms, Tweener helps you move things around on the screen using only code, instead of the timeline.

So first go download it from the google code repository (be sure to get the as3 version) unzip it and put the caurina folder into the same directory as your .fla file, then import the code into your project by placing this in the first line of code:

import caurina.transitions.*;

Then let’s have the images fade in once they’re loaded, instead of just popping like they are. First we’ll set the initial alpha value of the scroller item to 0, so it can fade in properly. Then jump back to our complete event listener handler function and add the Tweener code.

thisOne.alpha = 0;
...
function completeHandler(e:Event):void {
	//trace("thumbnail complete "+e.target.loader.parent.parent.title);
	Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}

Step 12: Resizing the Images

Now, since I resized all my images and created thumbnails beforehand, this step is not as important, but is still great to include so that in case the dimensions change or I add another image later, the scroller will be able to handle it and resize it. The resize function will scale an image to fit within an area as I have explained before on my blog. Basically though, in the completeHandler we’ll resize the image to fit an area, even if the image is correctly sized, the resizeMe function will still center the image for us.

function completeHandler(e:Event):void {
	//trace("thumbnail complete "+e.target.loader.parent.parent.name);
	//size image into scroller
	resizeMe(e.target.loader.parent, 140, 105, true, true, false);
	Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}

//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once, or resizeMe(image, 200);)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
// optional: centerHor = centers the displayObject in the maxW area. default true.
// optional: centerVert = centers the displayObject in the maxH area. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
	if (centerHor) {
		mc.x = (maxW - mc.width) / 2;
	}
	if (centerVert){
		mc.y = (maxH - mc.height) / 2;
	}
}

Step 13: Adding Movement

We’ll start by just adding the basics. We want users to be able to intuitively control this scroller, so we’ll use their mouse position as direction only initially. If the mouse is positioned in the left half of the stage we want to move the scroller to the right, so the user moves in the direction they want the scroller to reveal itself. I prefer this to the direct relationship of moving the scroller the same way the mouse goes, but that’s a discussion for another day.

To implement this is pretty simple, we just add an event listener at the end of the buildScroller function, for every time we enter the frame to position the scroller. Then in the handler function we’ll create an if/else statement and set the new speed variable depending on mouse position. If the mouse x position is on the left half of the stage, we want the scroller to move one way and if it is on the right half of the stage we want it to move the other direction. Then we apply this speed to the x position of the scroller container. This is now starting to look like something useful because it is now interactive and responsive!

Essentially all we are doing is moving the scroller container clip to one direction of the other, but we’re doing it every frame, so it animates the position over time. Remember this scroller clip contains all the items we created, so it’s like putting things into a box and moving the box. The items don’t have to be moved, just the container! We move it either 5 pixels to the left or 5 pixels to the left every single frame (this 5 could be anything, I just chose 5 ’cause it looked right). This leaves a lot to be desired, but it’s the first step. We have our scroller moving and have given the end user the power to control this movement!

Notice that we’re using the stage properties to find the stage size even though we set the stage size earlier and know exactly what size it is. This is because it will help the code to be self containing and portable. If we were to use the actual values we would have to remember to update them if we ever changed the scroller size or wanted to use this in a different application. We’ll create more variables soon that will allow us to fully customize the scroll interaction.

scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
trace("termination of build scroller");
...
var speed:Number;
function moveScrollerThumbs(e:Event):void {
	if (mouseX < stage.stageWidth/2) { //left half of stage
		speed = 5;
	}
	else { //right half of stage
		speed = -5;
	}
	scroller.x += speed;
}

Step 14: Better Movement – Mouse Limits

You can see above that we still have a way to go with our movement controls of the scroller. There are boundaries to add to the mouse positions that cause the scrolling (we’d like it to only scroll when you are on the stage and over the scroller), limits we’d like to apply to the scroller (so that it doesn’t scroll off the page) and we want to make the scroller speed dynamic.

Let’s start first by adding a statement to check if we are over the scroller. To do this we’ll check the mouseY position, the scroller.y and scroller.height properties. Let’s also add a bit more to the mouseX statements, let’s ensure that it’s a bit more precise and only include the x values from 0 to the center of the stage (stage.stageWidth/2) and from the center to the edge.

function moveScrollerThumbs(e:Event):void {
	if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) { //vertically over scroller
		if (mouseX < stage.stageWidth/2 && mouseX > 0) { //left half of stage explicitly
			speed = 5;
		}
		else if (mouseX > stage.stageWidth/2 && mouseX < stage.stageWidth) { //right half of stage explicitly
			speed = -5;
		}
		scroller.x += speed;
	}
}

Step 15: Better Movement – Scroller Limits

Now we’ll want to apply boundaries to the scroller itself so that it doesn’t scroll off the page and leave us with a blank stage and a user who doesn’t know or remember which way the images went.

We need to watch the scroller x position and if it goes too far either way reset it to our limit. Remember that the scroller x position is found at its left edge, so when it is at a 0 x position it is flush with the left edge of the stage. So first off if the x position of the scroller is greater than 0 after the speed is calculated and applied, we want to set it back to our limit, 0. This will keep the scroller from moving too far into the stage. We can even add some padding to the stage and since we have the padding between each scroller item of 20, let’s make it consistent. Rather than using 0 here, let’s make it the same 20 value.

We want the scroller to stop moving left once it’s last item is fully on stage. This left limit can be found by finding the width of the scroller and the stage width. If the scroller is moved so far to the left that it’s x position is less than it’s own width (negative) but factor back in the stage width (plus stageWidth) we need to hold it right there. To add the padding on this end we subtract 20.

function moveScrollerThumbs(e:Event):void {
	if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
		if (mouseX < stage.stageWidth/2 && mouseX > 0) {//left of stage explicitly
			speed = 5;
		}
		else if (mouseX > stage.stageWidth/2 && mouseX < stage.stageWidth) {//right of stage explicitly
			speed = -5;
		}
		scroller.x += speed;

		//scroller limits
		if (scroller.x < -scroller.width + stage.stageWidth - 20) { //if scroller too far left
			scroller.x = -scroller.width + stage.stageWidth - 20;
		}
		else if (scroller.x > 20) { //if scroller to far right
			scroller.x = 20;
		}
	}
}

Step 16: Dynamic Movement

To make the movement more fluid and dynamic we only need to update two lines of code. You guessed it, the two lines that set the speed need to be adjusted to determine the speed by the distance mouseX is from the center of the stage rather than a flat value of 5. We find the distance the mouse is horizontally from the center axis of the stage (stage.stageWidth/2), and we want the scroller to move to the right if we’re on the left side and vice versa. In both instances we find the negative difference between the two. Then we should scale it down by dividing it by, let’s try 8, because if we don’t, the scroller is way too fast (go ahead, try it).

function moveScrollerThumbs(e:Event):void {
	if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
		if (mouseX < stage.stageWidth/2 && mouseX > 0) {//left of stage explicitly
			speed = -(mouseX - stage.stageWidth/2) / 8;
		}
		else if (mouseX > stage.stageWidth/2 && mouseX < stage.stageWidth) {//right of stage explicitly
			speed = -(mouseX - stage.stageWidth/2) / 8;
		}
		scroller.x += speed;

		//scroller limits
		if (scroller.x < -scroller.width + stage.stageWidth - 20) { //if scrolled too far left
			scroller.x = -scroller.width + stage.stageWidth - 20;
		}
		else if (scroller.x > 20) { //if scrolled to far right
			scroller.x = 20;
		}
	}
}

Step 17: User Friendly Movement

Now test this and think about your end user. You’ll be looking at this image scroller and maybe wanting to look a bit closer or focus in on an image that catches your eye. You want this scroller to stop moving, (if I move to the center of the stage it still drifts to one side of the other) and I focus more on fighting the scroller than I do on the image I want to look at.

This is an example of a non-transparent user control. We want the user to be able to intuitively use this scroller to the point that they don’t even think about it. If the user has to think about it, or even worse, fight your app to get it to do something, you lose and they will look elsewhere for their content. So let’s avoid the struggle and give the scroller a dead area at the center of the stage. Then they can rest at ease by moving to the center of the scroller to inspect something or stop the motion sickness. It’s a really easy thing to do and has a big payoff, making the scroller easier to use. Rather than using the center of the stage for all our calculations we’ll give it some padding.

function moveScrollerThumbs(e:Event):void {
	if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
		if (mouseX < stage.stageWidth/2 - 40 && mouseX > 0) {//left of stage explicitly
			speed = -(mouseX - (stage.stageWidth/2 - 40)) / 8;
		}
		else if (mouseX > stage.stageWidth/2 + 40 && mouseX < stage.stageWidth) {//right of stage explicitly
			speed = -(mouseX - (stage.stageWidth/2 + 40)) / 8;
		}
		else {
			speed = 0; //if in the center area, clear the speed to 0 so we don't have any roll over effect from the last frame.
		}
		scroller.x += speed;

		//scroller limits
		if (scroller.x < -scroller.width + stage.stageWidth - 20) { //if scrolled too far left
			scroller.x = -scroller.width + stage.stageWidth - 20;
		}
		else if (scroller.x > 20) { //if scrolled to far right
			scroller.x = 20;
		}
	}
}

Step 18: Abstracting Movement More

Let’s abstract this out a bit. We have multiple places where we are adding padding to values or measurements. It’d be best practice to create a variable to hold our padding value and apply the same value easily by applying the variable every time we want padding. This would help us update if a client later says "I like it, but can we spread it out some?" or the dreaded… "Something’s off about this…", then we’d just update the variable and it would be ready to go. I always try to create controls for myself, the programmer, to make it easy to customize a project.

I’ve created a variable named "padding" here and am applying it everywhere that makes sense. Notice that in a couple places I multiply it by 2, use your own judgment here – if you want more padding give it more, of course we could take it further and have a "padding_small" variable and another "padding_large" variable, but one will do justice for the purpose of this tutorial. You get the idea. This doesn’t really change the end file, but it can help to make your life much easier and your code simpler, more understandable or readable.

import caurina.transitions.*;

//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
	trace("xml loading complete");
	xmlData = new XML(e.target.data);
	//trace(xmlData.image);
	buildScroller(xmlData.image);
}

var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 20;

this.addChild(scroller);
scroller.y = scroller.x = padding;
//build scroller from xml
function buildScroller(imageList:XMLList):void{
	trace("build Scroller");
	for (var item:uint = 0; item < imageList.length(); item++ )  {
		var thisOne:MovieClip = new MovieClip();

		//outline
		var blackBox:Sprite = new Sprite();
		blackBox.graphics.beginFill(0xFFFFFF);
		blackBox.graphics.drawRect( -1, -1, 142, 107);
		thisOne.addChild(blackBox);

		thisOne.x = (140 + padding) * item;
		thisOne.itemNum = item;
		thisOne.title = imageList[item].attribute("title");
		thisOne.link = imageList[item].attribute("url");
		thisOne.src = imageList[item].attribute("src");

		//image container
		var thisThumb:Sprite = new Sprite();
		//add image
		var ldr:Loader = new Loader();
		var urlReq:URLRequest = new URLRequest(thisOne.src);
		trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
		ldr.load(urlReq);
		//assign event listeners for Loader
		ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
		ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
		thisThumb.addChild(ldr);
		thisOne.addChild(thisThumb);

		//create listeners for this thumb
		thisOne.buttonMode = true;
		thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
		thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
		thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

		//add item
		scroller.addChild(thisOne);
	}

	scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
	trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
	trace("over" + e.currentTarget.name);
}
function outScrollerItem(e:MouseEvent):void {
	trace("out" + e.currentTarget.name);
}
function clickScrollerItem(e:MouseEvent):void {
	trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
}
function completeHandler(e:Event):void {
	//trace("thumbnail complete "+e.target.loader.parent.parent.name);
	//size image into scroller
	resizeMe(e.target.loader.parent, 140, 105, true, true, false);
	Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
	trace("thumbnail error="+e);
}

//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
	if (centerHor) {
		mc.x = (maxW - mc.width) / 2;
	}
	if (centerVert){
		mc.y = (maxH - mc.height) / 2;
	}
}

function moveScrollerThumbs(e:Event):void {
	if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
		if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
			speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
		}
		else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
			speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
		}
		else {
			speed = 0;
		}
		scroller.x += speed;

		//scroller limits
		if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
			scroller.x = -scroller.width + stage.stageWidth - padding;
		}
		else if (scroller.x > padding) { //if scrolled to far right
			scroller.x = padding;
		}
	}
}

Step 19: Adding Scale Tweens

With this idea of using variables to customize our file, let’s add some bling with the Tweener library we already added. It’s great to call out the item in the scroller the user rolls over, so let’s have it scale a bit larger to help it stand out. This is where the beauty of Tweening comes in. Just one line of code, some variables and we can tell it to tween the scaleX and scaleY of the scroll item. If we’re scaling the item we’ll want to also translate its coordinates a bit so the item is still centered, this looks like tricky math, but it’s actually pretty simple.

First, we add a variable to each object to store it’s starting x position, we can just call it myx and put it on the same line where we calculate the x (we do this so we can reliably move the item back to it’s rightful place when we need to). We need to move it so the item is still centered, so we find its current width and factor it by half the scale we are applying. We do this for x and y. Then we need to tween it back to its starting size and coordinates on the mouse out event handler.

thisOne.x = thisOne.myx = (140 + padding) * item;
...
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
function overScrollerItem(e:MouseEvent):void {
	//trace("over" + e.currentTarget.name);
	Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
}
function outScrollerItem(e:MouseEvent):void {
	//trace("out" + e.currentTarget.name);
	Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
}

Step 20: Adding Border Tweens

Let’s make them stand out even more by fading the white ‘blackBox’ around the thumbnails (just realizing that I named the white box black =) ). This one is easier than the previous step. Just add a couple of variables for the fade in and out values (alpha) and add the Tweens to both the over and out event listener handler function. We’ll also need to ensure that we can address the blackBox sprite so when we initialize it let’s explicitly name it. While we’re at it we can set the initial alpha of the box to equal the thumbFadeOut variable.

//outline
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
...
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect( -1, -1, 142, 107);
blackBox.alpha = thumbFadeOut;
thisOne.addChild(blackBox);
thisOne.blackBox = blackBox;
...
function overScrollerItem(e:MouseEvent):void {
	//trace("over" + e.currentTarget.name);
	Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
	Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
	//trace("out" + e.currentTarget.name);
	Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
	Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}

Step 21: Adding Link on Click

Speaking of all the event listeners, we still haven’t finished coding the click event. We want to have the click basically be a link click and link the user to the url specified in the xml. For this, we just pass the link value from the event’s target that we are currently tracing, to a URLRequest object and try to navigate to it with our friend navigateToURL. There we have it.

function clickScrollerItem(e:MouseEvent):void {
	//trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
	var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
	try {
		navigateToURL(urlRequest);
	}
	catch (e:Error) {
		// handle error here
		trace(e);
	}
}

Conclusion

I hope you enjoyed this tutorial and that you learned something. You should now have a pretty good grasp on AS3 and xml, loading and resizing images, easy animating with tweening, mouse event listeners, scrolling and user friendly interactive design!

Was it easy to follow? I usually do tutorials in open source examples so I don’t know if I droned on too much here.. Feel free to let me know in the comments. This tutorial is meant to be a spring board for ideas; there are tons of other things we could to with this file and get many other effects going, but this should get you started!

Plotting Points Using Yahoo! Maps and RSS

Jeremy Green — Fri, 14 Aug 2009 12:00:09 +0000

In this tutorial, I’ll show you how to get started with the Yahoo! Maps API in Flash. We’ll load a couple of RSS feeds and plot some natural disaster warnings using their longitudes and latitudes.

Step 1: Get an App ID

Go to http://developer.yahoo.com/flash/maps/ and sign up for an App ID.

Step 2: Download the Component

On the Yahoo Map AS3 Component page, download the newest version of the component.

Step 3: Install the Component

When the file is done downloading, extract the zip file. Navigate to the Flash folder and install the MXP file.

Step 4: Move to Flash

Start Flash and open a new ActionScript 3.0 file, then save it in a new folder as "yahoo_map.fla".

Step 5: Set Up the Document

Change the stage size to 640×480. Navigate to the components tab and drag a copy of the YahooMaps component to the stage. Once it’s on the stage, delete it. That will put a copy in the library so we can access it from there.

Step 6: The Text Area

Drag a copy of the TextArea from the components tab. In the properties panel, change the size of the TextArea to a width of 640px and a height of 100px. Give it an X position of 0 and a Y position of 330. Finally, give it an instance name of "textArea".

Step 7: The Radio Buttons

Next, drag a copy of the the RadioButton from the components tab. Copy and paste it three times, so that there are four instances of the RadioButton component on the stage. Align them to the top and evenly space them out, so that they’re in a straight line right next to one another. Next, drag them below the TextArea component.

Step 8: The Radio Button Parameters

Select the first radio button. Give it an instance name of "radioAll". With the button still selected, switch over to the parameters panel. Give it a group name of "Disasters". Change the label property to "All" and the selected property to "true".

Select the next radio button. Give it an instance name of "radioEarth", the same group name of "Disasters", a label of "Earthquakes" and leave the selected property as "false".

Select the third radio button. Its instance name is "radioTsu", the group name is "Disasters", the label is "Tsunamis", and the selected property is "false".

Finally, select the fourth radio button. It has an instance name of "radioVolcano", its group name is "Disasters", it has a label of "Volcanoes", and selected is "false". Since we want to be able to toggle between the buttons, we gave them the same group name. Space them accordingly, so that they’re evenly spaced.

Step 9: The Empty MovieClip

Create a separate layer. Place the layer below the layer with TextArea and RadioButton components. In the library panel, at the bottom, select the new symbol icon. Create a new empty movieclip. Drag an instance onto the stage in the newly created layer, then give it an instance name of "empty". This movie clip will hold our map when it’s loaded. Give the empty movie clip an X and Y position of 0. That way it’s lined up with the top left corner of the stage.

Step 10: Setting Up the Document Class

Go to file > new and select a new ActionScript File. Save the file in the same directory as your "yahoo_map" FLA file with the name "yahoo_map.as". In your yahoo_map FLA document, in the properties panel, type "yahoo_map" in the Document class field. This will make your actionscript file the Document class for your yahoo_map FLA.

Step 11: The Document Class Skeleton

This is the basic setup for our document class:

package {

	import flash.display.Sprite;

	public class yahoo_map extends Sprite
	{

		public function yahoo_map()
		{

		}
	}
}

Step 12: The Yahoo Maps Import Statements

These are the statements that will drive the YahooMap API

package {

	import com.yahoo.maps.api.YahooMap;
	import com.yahoo.maps.api.YahooMapEvent;
	import com.yahoo.maps.api.core.location.LatLon;
	import com.yahoo.maps.api.markers.Marker;

	import flash.display.Sprite;

	public class yahoo_map extends Sprite
	{

		public function yahoo_map()
		{

		}
	}
}

Step 13: The Rest of the Import Statements

Simply add these below the YahooMaps import statement. Make sure that they are above the class declaration.

package {

	import com.yahoo.maps.api.YahooMap;
	import com.yahoo.maps.api.YahooMapEvent;
	import com.yahoo.maps.api.core.location.LatLon;
	import com.yahoo.maps.api.markers.Marker;

    import fl.controls.RadioButtonGroup;
	import fl.controls.RadioButton;

    import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.geom.ColorTransform;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;
	import flash.text.AntiAliasType;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	public class yahoo_map extends Sprite
	{

		public function yahoo_map()
		{

		}
	}
}

Step 14: Declaring the Variables

Here we’re going to delcare the global variables. We’ll need the app id that you got from the YahooMaps page and we’re going to need to use some php later to make the feeds load into Flash. That is why we have the CURL constant. Make sure that these are placed below the class declaration but above the main public function.

public class yahoo_map extends Sprite
	{
		private static const APPID:String = "YOUR APP ID";
        private static const CURL:String = "curl.php";
		private var map:YahooMap;
		private var ds:DropShadowFilter;
		private var geo:Namespace;
		private var tsuArray:Array;
		private var tsuCounter:int = 0;
		private var color:ColorTransform;
		private var group:RadioButtonGroup;

		public function yahoo_map()

Step 15: Setting up our Init Function

Here we’ll instantiate all of our variables. After searching Google, I found four RSS feeds for tsunami warnings from weather.gov. I loaded those into the tsuArray variable, so that I can load them one at a time. The geo namespace is going to help with getting to the latitude and longitude of all the RSS feeds. Also, there is a new RadioButtonGroup that will handle the toggling of the RadioButton components on the stage. Finally, I call the handleMap function. That will start the map loading process.

public function yahoo_map()
		{
			init();
		}

        private function init():void
		{
			tsuArray = new Array("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_hawaii.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml");
			geo = new Namespace("http://www.georss.org/georss");
			ds = new DropShadowFilter(2,90,0x00000,0.75,2,2,1,3);
            color = new ColorTransform();
			group = new RadioButtonGroup("Disasters");
			handleMap();
		}

Step 16: Setting up our Map

This is where we start working with the map basics and where we’ll use our app id. Also, when we call the map.init() method, we dictate the size we want the map to be. The map will be the width of the stage and have a height that touches the top of the TextArea component. We also listen for the MAP_INITALIZE event.

private function handleMap():void
		{
			map = new YahooMap();
			map.addEventListener(YahooMapEvent.MAP_INITIALIZE, onInit);
			map.init(APPID, stage.stageWidth, 330);
		}

Step 17: The Map is Ready

When the map is initialized, it will fire the onInit function. Here is where we’ll add the map to the empty movie clip that was placed on the stage. That way the map will load underneath the TextArea and RadioButton components — just in case. We then add the zoom, pan, and type widgets. These control the type of map, add the ability to pan the map and add the zoom controls. We’ll center the map to 0,0.

The map is looking for a new LatLon variable to which you plug in two numbers. I used 0,0 to set the map at where the Equator and Prime Meridian meet. After, maps zoom level is set. This is set to the highest altitude possible. That way we can see all the natural disaster warnings across the globe. Next we call the function to start loading our RSS feeds.

private function onInit(event:YahooMapEvent):void
		{
			empty.addChild(map);
			map.addZoomWidget();
			map.addPanControl();
			map.addTypeWidget();
			map.zoomLevel = 17;
			map.centerLatLon = new LatLon(0,0);
			volcanoes();
		}

Step 18: cURLing the Feeds

We have to step out of Flash for a second and do a little PHP. When I started doing this project, I realized that the feeds wouldn’t load on my website. A quick and easy way that I by-passed it was be using cURL. I found a useful sample code from Google. I’m not too sure where exactly it came from, but I’ve been using the same script for some time now. Open a new PHP file, paste in the following code and save it as "curl.php"

Step 19: Back to Flash

Now that we’ve called the function to start loading our volcano feed, we can take a look at what’s going on inside the function. Simply put, we are loading our curl.php page which is loading the RSS feed. We then add a listener for when the page is done loading.

private function volcanoes():void
		{
			var url:URLLoader = new URLLoader();
			url.addEventListener(Event.COMPLETE, onVolcano);
			var vars:URLVariables = new URLVariables();
			var req:URLRequest = new URLRequest(CURL);
			req.method = URLRequestMethod.POST;
			vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml"
			req.data = vars;
			url.load(req);
		}

Step 20: The First Feed is Loaded

In the first feed, there are a few interesting features. The most important one is the geo:point. This is the latitude and longitude of the warning. Also, in this feed, there is a color code to show the alert level of the activity. With the feed loaded, there are two xml lists that are going to be loaded. One is for the latitude and longitude. The other is for the color code.

The lists are looped through and the new markers are created on the map. Custom movie clips are added to the markers, these are made using functions I will describe soon. The color of the nested movie clips is controlled by using the "colorTransform" property. After the feed is loaded and the markers are placed, the next RSS feed is set to load. I also pass the description text to the newly created movie clip, so that I can get to it later using the name that was given to the movie clip.

private function onVolcano(event:Event):void
		{
			var vol:Namespace = new Namespace("http://volcano.wr.usgs.gov/rss/volcanons/1.0");
			var xml:XML = new XML(event.target.data);
			var pointList:XMLList = xml..geo::point.text();
			var colorList:XMLList = xml..vol::colorcode.text();
			var string:String;
			for(var i:uint; i

Step 21: Loading the Second Feed

Now it’s time to load the earthquakes RSS feed. The functions work pretty much the same way as before.

private function earthQuakes():void
		{
			var url:URLLoader = new URLLoader();
			var vars:URLVariables = new URLVariables();
			var req:URLRequest = new URLRequest(CURL);
			req.method = URLRequestMethod.POST;
			vars.earl = "http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml"
			req.data = vars;
			url.addEventListener(Event.COMPLETE, onEarthQuake);
			url.load(req);
		}

The differences are that there is no color code for this feed. Instead I just change the color manually to brown. Also, the description of the alert has some html inside it. I used a regular expression that I came across from Google a while back to strip all the HTML out of it. Without doing that, the TextArea component will load an image, which I didn’t want.

One more thing to note is that this is a different type of RSS feed. For some reason (in my experience) Atom feeds don’t like to parse properly. The way around this was to climb down the child tree to the first item. Also, the item node doesn’t always have the same number of children. I added a simple if statement to account for it. Finally, we call the function to load the last of the RSS feeds.

        private function onEarthQuake(event:Event):void
		{
			var xml:XML = new XML(event.target.data);
			var list:XMLList = xml..geo::point.text();
			var string:String
			for(var i:uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>/gi;
				string = string.replace(pattern, "");
				earth.desc = string;
			}
			tsunamis();
		}

Step 22: The Final Set of Feeds

This is where we start to load the tsunami feeds. We created a tsuCounter so that we can increase the number each time a feed is loaded. When the counter reaches the end of the tsuArray, we’ll add the change listeners to the RadioButtonGroup that was created. Since I want to be able to access every marker created in every array, I added tsuCounter to the beginning of the name of the movie clip. That way I’ll be able to access the description from 0Tsunami1 and 1Tsunami1.

Finally, when all the feeds have been loaded, we add the event listener to the RadioButtonGroup

private function tsunamis():void
		{
			var url:URLLoader = new URLLoader();
			var vars:URLVariables = new URLVariables();
			var req:URLRequest = new URLRequest(CURL);
			req.method = URLRequestMethod.POST;
			vars.earl = tsuArray[tsuCounter]
			req.data = vars;
			url.addEventListener(Event.COMPLETE, onTsu);
			url.load(req);
		}
        private function onTsu(event:Event):void
		{
			tsuCounter++;
			if(tsuCounter == tsuArray.length)
			{
				group.addEventListener(Event.CHANGE, onChange);
			} else
			{
				tsunamis();
			}
			var xml:XML = new XML(event.target.data);
			var list:XMLList = xml..geo::point.text();
			var string:String;
			for(var i:uint; i

Step 23: Other Functions

These are the functions that are adding the markers, controlling the look of the markers, setting the longitude and latitude of the markers and creating the movie clips in the markers. The drawMarker function creates a new marker, adds a drop shadow, then adds the movie clip to it, passes the same name as the movieclip to it, gets the latitude and longitude from the loaded RSS feed and finally adds the event listeners. The marker is added the the markerManager of the map. The drawCircle function just draws a circle 10 pixels wide. The getLatlon function takes the string that is passed to it, breaks it apart and returns the LatLon. The last function, theColor, handles the different colors passed to it through the volcano feed.

private function drawMarker(mc:MovieClip, string:String, name:String):void
		{
			var marker:Marker = new Marker();
				marker.filters = [ds];
				marker.addChild(mc);
				marker.latlon = getLatlon(string);
				marker.name = name;
				map.markerManager.addMarker(marker);
				marker.addEventListener(MouseEvent.ROLL_OVER, onOver);
				marker.addEventListener(MouseEvent.CLICK, onClick);
		}
        private function drawCircle():MovieClip
		{
			var mc:MovieClip = new MovieClip();
			mc.graphics.beginFill(0xFF0000, 1);
			mc.graphics.drawCircle(5,5,5);
			mc.graphics.endFill();
			return mc;
		}
        private function getLatlon(string:String):LatLon
		{
			var array:Array = string.split(/[\s]/);
			var latlon:LatLon = new LatLon(array[0], array[1]);
			return latlon;
		}
        private function theColor(string:String):ColorTransform
		{
			var int:uint;
			switch (string)
			{
				case "ORANGE" :
				int = 0xFD8000;
				break;
				case "GREEN" :
				int = 0x225E33;
				break;
				default :
				int = 0xFF0000;
			}
			var ct:ColorTransform = new ColorTransform();
			ct.color = int;
			return ct;
		}

Step 24: Event Handling

When the user rolls over the marker, the description of the alert is displayed in the TextArea component. This is handled through the onOver function. The target is cast as a marker using the name that was passed it. Then we receive the description text that was passed to the movieclip nested inside the marker and send it to the TextArea component. The onClick event pans the map to whichever marker was clicked. This is done by using the map.panToLatLon() method.

private function onOver(event:MouseEvent):void
		{
			var marker:Marker = Marker(map.markerContainer.getChildByName(event.target.name))
			var mc:MovieClip = MovieClip(marker.getChildByName(event.target.name));
			textArea.htmlText = mc.desc;
		}
		private function onClick(event:MouseEvent):void
		{
			var marker:Marker = Marker(map.markerContainer.getChildByName(event.target.name))
			map.panToLatLon(marker.latlon);
		}

The final event is the onChange event. This event turns off all the movie clips except the selected buttons. It also pans the map to the most recent alert that was received in the RSS feed.

        private function onChange(event:Event):void
		{
			var g:RadioButtonGroup = RadioButtonGroup(event.target);
			var i:uint;
			var marker:Marker;
			var panTo:Marker;
			switch(g.selection.name)
			{
				case "radioVolcano" :
				for(i = 0; i

The Final Code

Here is what the final code looks like.

package {

	import com.yahoo.maps.api.YahooMap;
	import com.yahoo.maps.api.YahooMapEvent;
	import com.yahoo.maps.api.core.location.LatLon;
	import com.yahoo.maps.api.markers.Marker;

	import fl.controls.RadioButtonGroup;
	import fl.controls.RadioButton;

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.geom.ColorTransform;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;
	import flash.text.AntiAliasType;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	public class yahoo_map extends Sprite
	{
		private static const APPID:String = "YOUR APP ID";
		private static const CURL:String = "curl.php";
		private var map:YahooMap;
		private var ds:DropShadowFilter;
		private var geo:Namespace;
		private var tsuArray:Array;
		private var tsuCounter:int = 0;
		private var color:ColorTransform;
		private var group:RadioButtonGroup;

		public function yahoo_map()
		{
			init();
		}
		private function init():void
		{
			color = new ColorTransform();
			tsuArray = new Array("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_hawaii.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml");
			geo = new Namespace("http://www.georss.org/georss");
			ds = new DropShadowFilter(2,90,0x00000,0.75,2,2,1,3);
			group = new RadioButtonGroup("Disasters");
			handleMap();
		}
		private function handleMap():void
		{
			map = new YahooMap();
			map.addEventListener(YahooMapEvent.MAP_INITIALIZE, onInit);
			map.init(APPID, stage.stageWidth, 330);
		}
		private function onInit(event:YahooMapEvent):void
		{
			empty.addChild(map);
			map.addZoomWidget();
			map.addPanControl();
			map.addTypeWidget();
			map.zoomLevel = 17;
			map.centerLatLon = new LatLon(0,0);
			volcanoes();
		}
		private function volcanoes():void
		{
			var url:URLLoader = new URLLoader();
			url.addEventListener(Event.COMPLETE, onVolcano);
			var vars:URLVariables = new URLVariables();
			var req:URLRequest = new URLRequest(CURL);
			req.method = URLRequestMethod.POST;
			vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml"
			req.data = vars;
			url.load(req);
		}
		private function onVolcano(event:Event):void
		{
			var vol:Namespace = new Namespace("http://volcano.wr.usgs.gov/rss/volcanons/1.0");
			var xml:XML = new XML(event.target.data);
			var pointList:XMLList = xml..geo::point.text();
			var colorList:XMLList = xml..vol::colorcode.text();
			var string:String;
			for(var i:uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>/gi;
				string = string.replace(pattern, "");
				earth.desc = string;
			}
			tsunamis();
		}
		private function tsunamis():void
		{
			var url:URLLoader = new URLLoader();
			var vars:URLVariables = new URLVariables();
			var req:URLRequest = new URLRequest(CURL);
			req.method = URLRequestMethod.POST;
			vars.earl = tsuArray[tsuCounter]
			req.data = vars;
			url.addEventListener(Event.COMPLETE, onTsu);
			url.load(req);
		}
		private function onTsu(event:Event):void
		{
			tsuCounter++;
			if(tsuCounter == tsuArray.length)
			{
				group.addEventListener(Event.CHANGE, onChange);
			} else
			{
				tsunamis();
			}
			var xml:XML = new XML(event.target.data);
			var list:XMLList = xml..geo::point.text();
			var string:String;
			for(var i:uint; i

Conclusion

I’ve barely scratched the surface for what YahooMaps has under the hood. Read the documentation and go nuts!

Create a Shuffle Gallery in Flash Using XML and ActionScript 3.0

Carlos Yanez — Fri, 24 Jul 2009 12:00:41 +0000

In this tutorial I’ll explain how to access and use the Display List whilst creating an XML based image gallery with ActionScript 3.0.

Step 1: Overview

Using XML we’ll dynamically load and obtain information about the images, give them a random center position, add a frame, add drag functionality, and lastly, we’ll use a tween to handle the zoom animation.

Step 2: Let’s Get Started

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600×350 and add a gray radial gradient (#EEEEEE, #DDDDDD).

Step 3: Adding a Preloader

We’re going to add a preloading animation to tell the user when the content is loading. In this case I used the Apple inspired preloader that we created before. Since we’re going to use only the animation, there’s no need to import the class or use an Export Identifier.

Place the preloader on the stage and center it.

Step 4: Embedding a Font

We’re going to embed a font, a super easy task when adding a TextField to the Stage in the Flash IDE, but a little different using ActionScript.

Open the Library Panel and right-click in the items area without selecting one, a contextual menu will appear.

Click on "New Font" to open a dialog window, give a name to your font and select the one you want to use as shown in the following image.

This will create a class of the font you selected, we’ll instantiate this in Step 9.

Step 5: XML

Let’s create the XML file.

Open your prefered XML or Text editor and write:

When you’re done, save it as "images.xml" in your xml folder.

Step 6: ActionScript

The code that we’ll use will be written in a single class that will be used as the Document Class in the FLA file.

Create a new ActionScript File (File > New)

Save it as "Main.as".

Step 7: Package

We’ll begin with:

package classes
{

The package keyword allows you to organize your code into groups that can be imported by other scripts, it’s recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: galleryClasses.

If you don’t want to group your files in a package or you have only one class, you can use it right from your source folder, but the idea is to be organized.

Step 8: Required Classes

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.filters.BitmapFilter;
import flash.filters.DropShadowFilter;
import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.AntiAliasType;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.TweenEvent;

These are the classes that we’ll need to make this gallery. If you need help with a specific class please use the Flash Help (F1).

Step 9: Extending the Class

public class Main extends MovieClip
{

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

We’re going to use MovieClip specific methods and properties so we extend using the MovieClip Class.

Step 10: Variables

var xml:XML; // The XML Object that will parse the XML File
var images:Array = new Array(); //This array will store the images loaded
var imagesLoaded:int = 0; //A counter, counts the images loaded
var imagesTitle:Array = new Array(); //The title properties of the XML File
var tween:Tween; //Handles the animation
var zoomed:Boolean = false; //Checks if a picture is zoomed, false by default
var canClick:Boolean = true; //Checks if the user can click a picture to zoom it, true by default
var lastX:int; //Stores the x property of the last picture that was clicked
var lastY:int; //Stores the y property of the last picture that was clicked
var textformat:TextFormat = new TextFormat(); //A TextFormat Object
var screen:Sprite = new Sprite(); //A black screen to focus on the active picture

var formatFont:Avenir = new Avenir(); //This is the embedded font

Step 11: Constructor

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object or when using the Document Class.

In this function we’ll set the properties of the TextFormat object that we’ll use to display a title or a description of each image. Create the black screen that appears when the user clicks on a picture and call the function which loads the desired XML file.

public function Main():void
{
	textformat.color = 0xFFFFFF;
	textformat.font = formatFont.fontName;
	textformat.size = 17; //Use the same size you used when embedding the font from the Library

	screen.graphics.beginFill(0x111111, .75);
	screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
	screen.graphics.endFill();

	loadXML("xml/images.xml");
}

Step 12: XML Loader Function

This function loads the XML file provided by the "file" parameter. We also add a listener to handle when the load is complete.

private function loadXML(file:String):void
{
	var urlLoader:URLLoader = new URLLoader();
	var urlReq:URLRequest = new URLRequest(file);

	urlLoader.load(urlReq);
	urlLoader.addEventListener(Event.COMPLETE, handleXML);
}

Step 13: Parse XML

Here we convert the loaded XML file to a valid XML object using the parameter "data" of the URLLoader. Then we use a "for" statement to create a Loader for every image in the XML. Additional information is found in the commentary.

private function handleXML(e:Event):void
{
	xml = new XML(e.target.data);

	for (var i:int = 0; i < xml.children().length(); i++)
	{
		var loader:Loader = new Loader();

		loader.load(new URLRequest(String(xml.children()[i].@src)));

		images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function
		imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function

		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
	}
}

Step 14: Images Loaded

When a Loader has loaded an image from the XML, the following code is executed:

private function loaded(e:Event):void
{
	imagesLoaded++; //Adds one to the imagesLoaded variable

	if (xml.children().length() == imagesLoaded) //When all images are loaded...
	{
		removeChild(preloader); //Removes the Preloader MovieClip
		prepareImages(); //This function is explained in the next step
	}
}

Step 15: Prepare Images

This function will add the frame, the TextField to display the title or description, the black background used for that and a Shadow Filter. Let’s take it in parts.

private function prepareImages():void
{
	for (var i:int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that
	{
		var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow
		var frame:Sprite = new Sprite(); //The Frame Sprite
		var infoArea:Sprite = new Sprite(); //The TextField background
		var infoField:TextField = new TextField(); //The TextField

Step 16: Image Frame

This creates a white frame around the image.

frame.graphics.beginFill(0xFFFFFF);
frame.graphics.drawRect(-20, -20, images[i].width + 40, images[i].height + 80);
frame.graphics.endFill();

The rectangle will be positioned under the image to be used as a frame.

Step 17: Information Background

This creates a black rectangle in the bottom part of the image, where the TextField will be.

infoArea.graphics.beginFill(0x111111, 0.75);
infoArea.graphics.drawRect(0, 0, images[i].width, 60);
infoArea.graphics.endFill();
infoArea.y = images[i].height - 60;

Step 18: Image Information

The following code sets the TextField properties and adds its contents.

infoField.defaultTextFormat = textformat;
infoField.embedFonts = true; //You have to add this to use the embedded font
infoField.antiAliasType = AntiAliasType.ADVANCED; //This property will display the text more clearly
infoField.width = images[i].width - 5;
infoField.height = 20;

infoField.text = imagesTitle[i]; //The content, obtained from the XML and stored in the Array

Step 19: Resizing the Images

Here we set the desired scale of the images. Since everything will be inside the Container Sprite, we only need to resize it.

container.scaleX = 0.3;
container.scaleY = 0.3;

Step 20: Position

The images will have a random position based on the center of the Stage area. We use Math for that.

container.x = stage.stageWidth / 4 + Math.floor(Math.random() * (stage.stageWidth / 4));
container.y = stage.stageHeight / 5 + Math.floor(Math.random() * (stage.stageHeight / 5));

Step 21: Shadow Filter

This will create a Shadow Filter.

var shadowFilter:BitmapFilter = new DropShadowFilter(3, 90, 0x252525, 1, 2, 2, 1, 15); //Distance, angle, color, alpha, blur, strength, quality
var filterArray:Array = [shadowFilter];

container.filters = filterArray; //Apply the filter

Step 22: Adding to Stage

Time to add the Children, the order in which we add them is the order they will take in the Display List, so be sure to add them in this way.

infoArea.addChild(infoField); //Adds the TextField to the TextField Background

container.addChild(frame); //Adds the Frame to the Container
container.addChild(images[i]); //Adds the Image on top of the Frame in the Container

infoArea.visible = false; //We set the image information to invisible by default

container.addChild(infoArea); //Adds the information area in top of everything

Step 23: Listeners

Although we could add the Listeners to every Sprite before, I’m going to add them now that they are inside the Container to show you how the Display List works.

container.getChildAt(1).addEventListener(MouseEvent.MOUSE_UP, zoomHandler); //This is the Image loaded by the XML, this is the Loader object
container.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage); //This is the Frame
container.getChildAt(0).addEventListener(MouseEvent.MOUSE_UP, stopDragImage); //Frame

addChild(container); //Lastly, we add the Container to the Stage

Step 24: Drag Functions

In the previous step we added two listeners to the Frame of the images. These functions will take care of the drag.

We use "parent" beacuse we want to drag all the objects, since the "target" is the Frame Sprite, the parent object is the Container.

private function dragImage(e:MouseEvent):void
{
	e.target.parent.startDrag();
}

private function stopDragImage(e:MouseEvent):void
{
	e.target.parent.stopDrag();
}

Step 25: Zoom

This function is in charge of zooming in and out. Its Listener is in the actual image, so clicking in the Frame will not call this function.

Editor’s Note: For some reason, the else if () statement within this zoomHandler function was making our syntax highlighter crash. As it doesn’t want to display on the page, I’ve made the function available for download. Sorry for any inconvenience, Ian.

Step 26: Motion Finish

Some actions need to be executed when the Tweens are finished, these are those actions.

private function zoomInFinished(e:TweenEvent):void
{
	zoomed = true; //Modify the variables according to the event
	canClick = true;
	tween.obj.getChildAt(2).visible = true; //Sets the Information area to visible
}

private function zoomOutFinished(e:TweenEvent):void
{
	zoomed = false;
	removeChild(screen); //Removes the black screen

	tween.obj.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage); //Adds the drag listener back to the Frame Sprite
}

Step 27: Document Class

Go back to the FLA and add Main as the Document Class in the Properties Panel. If you save your class in a package you have to add the name of the package too, something like: yourpackage.Main

Test your file and see your gallery working!

Conclusion

As always, try different things in your code to make the gallery just as you want.

I hope you enjoyed this tut, thanks for reading!

Develop an OOP Drop Down Menu Using ActionScript 3.0 Documents

Andre Cavallari — Mon, 29 Jun 2009 12:00:14 +0000

In this, my first tutorial for Flashtuts+, I’ll quickly explain how to create an object oriented drop down menu. We’ll use ActionScript 3.0 and pull all the necessary data from an xml file.

The resulting menu can be used in any flash file without needing recoding.

Step 1 – Setting the Classpath

First, we’ll setup a classpath. If you dont yet have one, it’s a useful place for putting ActionScript files that you use in every project. This way you dont need to copy the ActionScript files to a folder of the fla document everytime that you create a new website or application.

Create a folder for ActionScripts files in c:. I’ll create the folder c:/myActionScripts, but you can create a directory anywhere you want with any name you wish.

For flash CS3, go to Edit > Preferences. In the category menu of the preferences panel, select "ActionScript". On right side of the panel, click the button "ActionsScript 3.0 settings…".

This will open another panel (Actionscript 3.0 settings panel). Click the plus button ( + ) and type "c:/myActionScripts", or whatever your directory location is. Then just click OK in all the open panels, now we have a classpath.

For flash CS4, go to Edit > Preferences. In the category menu of the preferences panel, select "ActionScript". On right side of the panel, click the button "ActionsScript 3.0 settings…".

This will open a panel called "Actionscript 3.0 Advanced Settings". In the "source path" area, click the plus button ( + ) and type c:/myActionScripts, or whatever your directory location is. Then just click OK in all the open panels, now we have a classpath.

Step 2 – Downloading Classes and Creating Folders

Go to http://blog.greensock.com/tweenliteas3/ and download the TweenLite ActionScript 3.0 class, courtesy of Jack Doyle. This class is much better than the Tween class built in flash CS3 and flash CS4.

When the download is finished, just uncompress the contents of "gs" inside the .zip file to c:/myActionScripts/gs to make the TweenLite class available for use any time you want, without needing to copy the gs folder to an equivalent folder of your project.

Also, create the folder c:/myActionScripts/dropdownmenu. We’ll put the ActionScript files from this tutorial here. We’ll then be able to use our DropDownMenu Object whenever we want, without needing to copy the dropdownmenu folder to each project. This is the advantage of using a classpath.

Step 3 – Creating the XML Documents

I’ll be using 5 xml files, one xml for the main drop down menu and others to populate data in the second drop down menu. Save all the xml files in c:/dropdownexample/xml.

Save the first xml document as "menu.xml" in the folder "xml". Fill it with data such as:

Save a second xml document as "contactlist1.xml" in the xml folder, data as follows:

Save a third xml document as "contactlist2.xml" in the xml folder, data as follows:

Save another xml document as "contactlist3.xml" in the xml folder, data as follows:

Finally, create the last xml document as "contactlist4.xml", again in the xml folder with the following data:

Step 4 – Coding the MenuItem Object

Now we’ll start coding the MenuItem Object. This is required for our drop down menu and will build the items in the list.

Start creating the package, we’ll save the file in c:/myActionScripts/dropdownmenu so the package is called "dropdownmenu", then we’ll import the classes that we want to use in this object.

package dropdownmenu{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.events.*;
	import gs.TweenLite;

Now create the class MenuItem. As we’re extending the Sprite class, we’ll have all the methods and properties of that class, but we’ll still add more.

Note that we’ll save this ActionScript file as "MenuItem.as" in the dropdownmenu folder. The package therefore has the same name as the folder and the class has the same name as the .as file.

public class MenuItem extends Sprite{

Declare and set the variables here, so you can use them with any function in the class. We’ll set as them private so only this class has access to them. If you declare the variables inside a function, only that function will have access to the variable. In our case, we want the entire class to have access to the variables.

private var _value:String;
private var txt:TextField=new TextField();
private var txtFormat:TextFormat=new TextFormat();

We’ll declare the following function as public, so you can access it from anywhere. This function has the same name as the class It’s the constructor function and will be called when we instantiate this object. It will be the first function to be executed and will be executed every time you create a new object of MenuItem. The constructor function is always public.

We’ll pass the caption, value, width and height values through the constructor:

public function MenuItem(caption:String,value:String,_width:int=200,_height:int=20):void{

Now we’ll set this class to "buttonMode", so it will behave like a button and the hand cursor will show every time you pass the mouse over it. We set the alpha to .8 (this will be the mouse out state) we’ve declared the _value variable before, outside the function, so here we make the value visible to any other function of the class and the _width we reduce by 10, so the menu item will be a little bit smaller.

this.buttonMode=true;
this.alpha=.8;
_value=value;
_width-=10

Draw a black rectangle for the background (this can be any color, just change the 0×000000 to whatever you want).

this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,_width,_height);

Now we’ll set the text format object. It’s created outside the function and will be accessible to any function in this class. This will be our item caption (a dynamic textfield).

txtFormat.color=0xFFFFFF;
txtFormat.size=10;
txtFormat.font="Verdana";

Now we’ll set the default textfield format to the text format object. We’ll disable the mouse interactivity of the textfield, so the text wont be clickable (this works with any displayed object). We’ll set the text of txt dynamic text field as the variable "caption" passed through the constructor parameter. Then it’s a question of setting the position x and y of the textfield and its width and height. Then we add the text to the MenuItem Object´s display list.

txt.defaultTextFormat=txtFormat;
txt.mouseEnabled=false;
txt.text=caption;
txt.x=5;
txt.y=2;
txt.width=_width-10;
txt.height=_height-4;
addChild(txt);

Now let’s add the events. When we add this object to the stage, the addedToStage function will be called. When we pass the mouse over the object, the mouseOver function will be called. When we take the mouse out of this object the mouseOut function will be called. We also close the constructor function with a "}" at the end.

addEventListener(Event.ADDED_TO_STAGE,addedToStage);
addEventListener(MouseEvent.MOUSE_OVER,mouseOver);
addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
}

Insert a new function here. When the mouse is over the object it will smoothly set the alpha to 1, so this object appears different to the others (mouse over state).

private function mouseOver(e:MouseEvent):void{
    new TweenLite(this,1,{alpha:1});
}

When we take the mouse out of the object, the alpha will smoothly be set back to .8 (the mouse out state).

private function mouseOut(e:MouseEvent):void{
    new TweenLite(this,1,{alpha:.8});
}

When this object is added to the stage, we set the object’s position by getting its index in the displaylist and multiplying this by its height. We have a sequence of indexes (0, 1, 2, 3) and will position one object upon the other, not over one another.

private function addedToStage(e:Event):void{
    this.y=this.parent.getChildIndex(this)*this.height;
}

The function "get" is a property, it works like a variable but it is read only. You cant set those values outside this class, but you can read them. They return the value of variables or textfields which are inaccessible outside the class.

public function get caption():String{ return txt.text; }
public function get value():String{ return _value; }

Now close the class and the package we opened at the start of the file. Save it as "MenuItem.as" at c:/myActionScripts/dropdownmenu, the file should be located at c:/myActionScripts/dropdownmenu/MenuItem.as

}
}

Step 5 – Create the Custom Event

Now we’ll create a custom event for this class. When we change the menu item we’ll get the value through this event.

Start the package, import the Event and create the class extending the Event class. Now we have a new Event class which we’ll call "DropDownMenuEvent".

package dropdownmenu{
import flash.events.Event;
public class DropDownMenuEvent extends Event{

Static variables, functions or constants can be accessed without needing to instantiate the object. You don’t need to use the new statement, you can simply access it by using: DropDownMenuEvent.CHANGE

The const are constants. Once you have set a value to the const, its value can’t be changed. You can use lowercase to name constants, but by default almost everbody uses uppercase for constants and we won’t do any different.

public static const CHANGE:String="change";

Instantiate these String objects right here to ensure access from anywhere in this class.

private var _caption:String;
private var _value:String;

Now create the constructor function. The super(type) is to set this class as a superclass.

public function DropDownMenuEvent(type:String,caption:String,value:String):void{
	super(type);
	_caption=caption;
	_value=value;
}

Now make the getter functions of the class, to get the values as read only. I´ve explained before how the getter function works.

public function get caption():String{ return _caption; }
public function get value():String{ return _value; }

Close the package and the class using "}" and save as c:/myActionScripts/dropdownmenu/DropDownMenuEvent.as

}
}

Step 6 – Create the DropDownMenu Object

I saved this object for last because it´s more complex. Also, it won’t work without the 2 classes created above.

This part is already well explained; we’ll define the package, import all the classes that we’ll use, create the class extending the Sprite, set the variables outside the functions to use with any other function of this class, then start the constructor function. Nothing new here.

I also shouldn’t need to say again that the class, the constructor and the file name are the same.

The constructor function has all the parameters pre-defined, so we can choose whether or not to pass parameters. We could pass just the first parameter, or the first and the second, or the first, the second and the third. We could also pass the first parameter as null, so it will be the same value as the pre-defined value in the constructor.

package dropdownmenu{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.xml.*;
	import flash.events.*;
	import flash.display.Graphics;
	import flash.display.GradientType;
	import flash.geom.Matrix;
	import flash.display.SimpleButton;
	import gs.TweenLite;
	public class DropDownMenu extends Sprite{
		private var container:Sprite=new Sprite();
		private var req:URLRequest=new URLRequest();
		private var loader:URLLoader=new URLLoader();
		private var txt:TextField=new TextField();
		private var txtFormat:TextFormat=new TextFormat();
		private var button:SimpleButton=new SimpleButton();
		private var _value:String;
       public function DropDownMenu(url:String=null,_width:int=200,_height:int=30):void{

The container is a sprite, created above outside any function for the entire class have access. We’ll put all the menu items inside the container; set the y property to the _height param. The container will be invisible to begin with(alpha=0), so it can’t be clicked. Even if it were visible, the alpha is still 0, so it won’t show yet.

container.y=_height;
container.alpha=0;
container.visible=false;
addChild(container);

Create a background and add to the object. The drawObject is a function that returns a Shape, we’ll see this a little later.

var bg:Shape=drawObject(_width,_height);
addChild(bg);

Again, we set the textFormat object properties and set the defaultTextFormat property of the txt object as the textFormat object. We disable interactivity with the mouse, set a default text while the xml is not loaded yet and add the txt textField to this object display list. All of these actions have been seen before, so they don’t need too much explanation.

txtFormat.bold=true;
txtFormat.size=15;
txtFormat.font="Verdana";
txt.defaultTextFormat=txtFormat;
txt.x=5;
txt.y=3;
txt.width=_width-10;
txt.height=_height-6;
txt.mouseEnabled=false;
txt.text="XML not loaded";
addChild(txt);

The button, created outside the function, can be acessed from anywhere in this class. We set a new Shape for the hitTestState, then add an event. When clicked it will call for function "open". We then add the button to this object´s display list.

button.hitTestState=drawObject(_width,_height);
button.addEventListener(MouseEvent.CLICK,open);
addChild(button);

Now add the event listeners. One for the loader when the loader has fully completed loading the xml document. This will call the function loaderComplete, or if the loader doesn’t find the xml document it will call the function loaderIOError

This class when added to the stage will call the function addedToStage. When removed from stage it will call the function removedFromStage.

loader.addEventListener(Event.COMPLETE,loaderComplete);
loader.addEventListener(IOErrorEvent.IO_ERROR,loaderIOError);
addEventListener(Event.ADDED_TO_STAGE,addedToStage);
addEventListener(Event.REMOVED_FROM_STAGE,removedFromStage);

Here we check if any value other than null was passed to url param of the constructor. If so, we’ll set the url ( private var url:URLRequest=new URLRequest() )and call the function load. Close the constructor function with a " } "

if(url) load(url);
}

As the load function is public, it allows you to load xml anywhere outside or inside this class. First this function will remove all the menu items inside the container. If any exist, then it will start loading the xml document.

public function load(url:String):void{
  txt.text="Loading";
  _value=null;
  var total:int=container.numChildren;
  for(var i:int=0;i
This function will be called when the button is pressed. It will check if the alpha of the container is equal to zero. If so, it will set the visibility of the container to true, alpha to 0 and will smoothly set the alpha of the container to 1. If the alpha of the container is already more than 0, it will call for the close function.
private function open(e:MouseEvent):void{
	if(container.alpha==0){
		container.visible=true;
		container.alpha=0;
		new TweenLite(container,.5,{alpha:1});
	}
	else{ close(); }
}
The close function will be called when you click anywhere, because we’ll add an event to the stage for when the mouse is down. This function will check if a container´s alpha is more than 0. If that’s the case it will smoothly set the container´s alpha to 0. When finished it will call the function hideContainer() that sets the container´s visibility to false (invisible and unclickable).
We’ll add an event to the stage, the MouseEvent.MOUSE_DOWN, so the function stageMouseDown.
private function close():void{
	if(container.alpha>0) new TweenLite(container,.5,{alpha:0,onComplete:hideContainer});
}
private function hideContainer():void{ container.visible=false; }
private function stageMouseDown(e:MouseEvent):void{ this.close(); }
private function stageMouseLeave(e:Event):void{ this.close(); }
loaderIOError will be called if the load function of the loader doesn’t find the xml document and will set the caption to "XML not found".
The addedToStage will be called when this object is added to the stage display list. It will add an event for when you click anywhere on the stage to call the stageMouseDow function.
The removedFromStage will be called when this object is removed from the stage. It removes the event from stage so that clicks on stage will no longer call for the stageMouseDown function.
When the mouse leaves the stage, we’ll also close the drop down menu.
private function loaderIOError(e:IOErrorEvent):void{ txt.text="XML not found"; }
private function addedToStage(e:Event):void{
	stage.addEventListener(MouseEvent.MOUSE_DOWN,stageMouseDown);
   stage.addEventListener(Event.MOUSE_LEAVE,stageMouseLeave);
}
private function removedFromStage(e:Event):void{
	stage.removeEventListener(MouseEvent.MOUSE_DOWN,stageMouseDown);
	stage.removeEventListener(Event.MOUSE_LEAVE,stageMouseLeave);
}
The function loaderComplete is called when the xml is fully loaded, it will work like this:

Set the default text of txt object to "Select" and the value to null, so we don’t have a value and the default caption is just "Select"
Create a new XML instance
Check the total number of nodes that have an  tag in the xml document and insert into the "total" variable.
Loop  the values of the xml document, getting their caption and value properties. The properties in xml are gotten by @property and the node value just .node without @.
Create a new MenuItem object with a menuItem instance, passing the caption and the value to the MenuItem constructor.
Add an event to the menuItem, when clicked it will call the function menuItemClick.
Add the menuItem just created to the container display list. 
Set the position x of the container to the center of the DropDownMenu Object using some calculation.

private function loaderComplete(e:Event):void{
	txt.text="Select";
	_value=null;
	var xml:XML=XML(e.target.data);
	var total:int=xml.item.length();
	var _w:int=this.width;
	var _h:int=this.height;
	for(var i=0;i
The function menuItemClick will be called when you click any menu item object, the currentTarget parameter will get the object that was clicked.

  We compare the actual value of DropDownMenu Object to the value of the clicked menu item and compare the current text of the txt textfield to the caption of the menu item. If there is any difference in the value, the function will dispatch a new DropDownMenuEvent passing the new caption and the new value.

private function menuItemClick(e:MouseEvent):void{
	if(e.currentTarget.value!=_value && e.currentTarget.caption!=txt.text){
		dispatchEvent(new DropDownMenuEvent(DropDownMenuEvent.CHANGE,e.currentTarget.caption,e.currentTarget.value));
		_value=e.currentTarget.value;
		txt.text=e.currentTarget.caption;
	}
}
This is the function we have used to create the background and the hit state of the button. In the constructor function, this function returns a new Shape Object.
private function drawObject(_width:int,_height:int):Shape{
	var newShape=new Shape();
	var colours=[0xA6A6A6,0x515151];
	var alphas=[1,1];
	var ratios=[0,255];
	var radians:Number=90*(Math.PI/180);
	var matrix:Matrix=new Matrix();
	matrix.createGradientBox(_width,_height,radians);
	newShape.graphics.beginGradientFill(GradientType.LINEAR,colours,alphas,ratios,matrix);
	newShape.graphics.drawRoundRect(0,0,_width,_height,5,5);
	return newShape;
}
We create 2 read-only properties, one to get the caption and other to get the value of this object. These 2 properties will be visible outside the class, but can’t be changed outside the class, only read.
Use 2x " }" to close the package and the class.
public function get caption():String{ return txt.text; }
public function get value():String{ return _value; }
}
}
Now save this file as c:/myActionScripts/dropdownmenu/DropDownMenu.as. We have 3 files in the c:/myActionScripts/dropdownmenu:

DropDownMenu.as
MenuItem.as
DropDownMenuEvent.as

Now we have a dropdownmenu package with 3 classes.
Step 7 – The .fla and the Document Class
In Flash, go to File > New.
Select Flash File (ActionScript 3.0) and click OK.
Then go to Window > Properties. The properties panel will open
In the properties panel enter "Main" in the Class textbox (without the " surround) and save your .fla file in c:/dropdownexample/dropdown.fla (remember that we already have the c:/dropdownexample folder with the xml folder inside.
Step 8 – Coding the Main Document Class
Create a new ActionScript file document (File > New > ActionScript file).
We’ll save the document in the same folder as the .fla document, with the name Main.as. This class belongs to the TopLevel package, so its package is just package…
We import the necessary classes. Notice that we import all the dropdownmenu package, so the three files created above (DropDownMenu, DropDownMenuEvent and MenuItem) will be imported to the Main class.
package{ 	import flash.display.Sprite; 	import dropdownmenu.*; 	import flash.events.*;	 	public class Main extends Sprite{
Attention here, we’re creating 2 drop down menus; the first drop down menu will select a new xml document and make the second drop down menu load the value selected.
The first parameter, if not null, will automatically load the xml document when creating this object. The second parameter is the width of the drop down menu. We didn’t pass the third parameter; the height of the drop down menu, but we set the default value to 30, which I think it is a good height.
The first drop down menu will automatically load the xml called menu.xml in the folder xml, the second will load an xml file only when we use the load function.
private var d1:DropDownMenu=new DropDownMenu("xml/menu.xml",150); private var d2:DropDownMenu=new DropDownMenu(null,150);
We create the constructor. As this class is the document class, the function will be called when we compile the .swf and every time we open the .swf file too. We add the two drop down menus we´ve created, set the x position of both, then set the same y value to them.  Add event listeners to both drop down menus, when we change the value we’ll call for the listeners.

public function Main():void{ 	addChild(d1); 	addChild(d2); 	d1.x=50; 	d2.x=210; 	d1.y=d2.y=40;			 	d1.addEventListener(DropDownMenuEvent.CHANGE,d1Change); 	d2.addEventListener(DropDownMenuEvent.CHANGE,d2Change); }
This is the listener of drop down menu 1. When the d1 value changes, it will load its value in d2 drop down menu.
private function d1Change(e:DropDownMenuEvent):void{ 	d2.load(e.value); }
This is just to test the second drop down menu, but you can get the drop down menu´s values by getting instance.value and get the drop down menu´s captions by getting instance.caption.
private function d2Change(e:DropDownMenuEvent):void{ 	trace(e.caption+" = "+e.value);
   //or trace(d2.caption+" = "+e.value); }
Close the package and the class with 2x " } "
}
}
Now we have the Main class to test our work, just save in c:/dropdowexample/Main.as and compile the dropdown.fla document. Test it in flash so the trace will work.
The captions and the values can, of course, be anything you like.
Conclusion
The classes are a little bit big, but they’re correctly coded, don’t have bugs and you can use them whenever you want by just importing the dropdownmenu package and creating DropDownMenu objects. Classes and the Document class are the biggest difference between ActionScript 2.0 and 3.0. Anybody that learns how to work with ActionScript files and learns how to use the classpath will find it far better than using the timeline to code.
Thats all for now!

Activetuts+ » XML

Using Google Maps’ New Features for Flash

Step 1: Download The SDK Component

Step 2: Install the SDK Component

Step 3: Folders

Step 4: The Google Map API Key

Step 5: Sign Up

Step 6: Save It!

Step 7: New ActionScript 3.0 File

Step 8: Save It

Step 9: The GoogleMapsLibrary

Step 10: The Actions Layer

Step 11: Import

Step 12: Create the Map

Step 13: The Navigation Tools

Step 14: A Bar Without Beer

Step 15: Creating the Custom Marker

Step 16: The XML file

Step 17: Loading the XML

Step 18: Loop Through the Locations

Step 19: Create the Variables

Step 20: Adding the Markers on the Map

Step 21: Add Custom Marker

Step 22: Moving On

Step 23: Complete Code

Conclusion

Create a Dynamic Bar Graph Generator Using XML + AS3

Step 1: Brief Overview

Step 2: Starting

Step 3: XML

Step 4: ActionScript!

Step 5: Package

Step 6: Importing Necessary Classes

Step 7: Declaring and Extending the Class

Step 8: Variables

Step 9: Constructor

Step 10: Graph Container

Step 11: Load XML Function

Step 12: Parse XML

Step 13: Create Bars

Step 14: Info Area

Step 15: Document Class

Conclusion

Create a Super Modern Elastic Menu in AS3

Preview

Step 1: Preparing the document

Step 2: Creating the Background Movieclip

Step 3: The XML File

Step 4: Begin the Programming

Step 5: XML Loading and Handling

Step 6: The createButtons Function

Step 7: The checkButtons Function

Step 8: Making the ElasticButton Class

Step 9: init() Function

Step 10: createBG Function

Step 11: Event Handlers

Step 12: The getDistance Function

Step 13: The Reset Function

Step 14: Rounding the Buttons

Step 15: Rounding the Second Button

Step 16: The Final Touch

Conclusion

Build an OOP Tag Cloud in ActionScript 3.0

Step 1: How to Think Cloud

Step 2: Building the Mother Class

Step 3: Construct Your Main Function

Step 4: Adding a Word Counter

Step 5: Set the Element Size

Step 6: Creating a Single Word List

Step 7: How to HitTest

Step 8: Setting up an Element Getter

Step 9: Inside the Element Class

Step 10: Implementation

Step 11: Build an RSS Feed Request

Step 12: The Initialization Method

Step 13: The Data Structure

Step 14: Building the Word List

Step 15: Starting the Tag Cloud

Step 16: The Final Code

Conclusion