Contents
The reason I thought about writing this article is that I have searched the net for quite a while trying to find a similar article on how to integrate ASP.NET with ActionScript using XML. And, I could not find any, at least according to my Google search. And, I don't think there is an article out there on how to pass large amounts of data from one platform to the another to maximize the use of the vast possibilities lying beyond this integration. The only one I could find is this article[^] which explains how to pass small values of variables using the URL querystring and other techniques. I will try to explain in this article how to make a basic and simple news application with Flash CS3 and ASP.NET, and how to update the news title and description in the SWF file using the ASP.NET application. This can be done using an XML file.
It gives great power to use C# with ActionScript and XML. I like to call it the "Triple Power of Development". It opens the imagination, and gives new possibilities to create amazing dynamic animations using the power of these three technologies.
Note: To build such an application, you will need to have a good basic knowledge of the ActionScript 3.0 language along with your C# (or other .NET language) knowledge.
The simple - yet deep - project I am going to explain here depends on three basic stages:
- Designing the XML file structure.
- Creating the ASP.NET basic application.
- Creating the Flash news application.
The XML file I am building here is really very simple. It is included with the project files as news.xml. I tried to make it the simplest structure as possible, and yet it's the key element of this project. And, everything else depends on it. The idea of the application is to make a news reader application that is updatable from ASP.NET. The application will read data from the XML file nodes, and will append more news to this file. The XML file will basically look like this:
="1.0"
<news>
<headline>
<title>Information Age</title>
<body>this is the Information Age. :)</body>
</headline>
<headline>
<title>xml is amazing</title>
<body>it is really amazing working with xml.
you can link ASP.NET with Flash files easily.</body>
</headline>
<headline>
</news>
As you can see, the root node is <news>, which is the document node in ASP.NET language. And, it has a child node called <headline> which contains two child elements: the news <title> and the news <body>. This will be all you need to do to build a very basic and simple XML file to connect the two platforms together.
Note: You can, of course, leave the XML file empty, except the basic root <news> and </news> tags. The reason I filled in some data in the file by hand is to make a basic demonstration of how the final look of the file will be and how it will appear on the SWF file when you first run the project.
Now, we come to building the ASP.NET application to add the news to the XML file. You first need to create a new page and drop two TextBox controls and a Button to it, as shown in the screenshot picture. Then, double click the button to go to the Click event, and this is how the code handles this event:
protected void Button1_Click(object sender, EventArgs e)
{
string newstitle = TextBox1.Text.Trim();
string newsbody = TextBox2.Text.Trim();
if (newstitle != String.Empty && newsbody != String.Empty)
{
XmlDocument news = new XmlDocument();
news.Load(Server.MapPath("news.xml"));
XmlNode headline = news.CreateNode(XmlNodeType.Element,
"headline", String.Empty);
XmlNode title = news.CreateNode(XmlNodeType.Element,
"title", String.Empty);
XmlNode body = news.CreateNode(XmlNodeType.Element,
"body", String.Empty);
body.InnerText = newsbody;
title.InnerText = newstitle;
news.DocumentElement.AppendChild(headline);
headline.AppendChild(title);
headline.AppendChild(body);
news.Save(Server.MapPath("news.xml"));
Server.Transfer(Request.Path);
}
}
The code simply strips the values out of the TextBox and inserts them into the XML file using the XMLDocument class provided in the System.Xml namespace (remember to put a using statement for this at the top of the page). Also note the use of the Server.MapPath("news.xml") function to point to the XML file's path, because otherwise, the class will not be able to load it as it needs to know the full physical path of the file.
I did not want to go more complicated with the ASP.NET application, but certainly, I could make it show the news titles and bodies in a GridView and modify the GridView in order to give the admin of the site the ability to update and delete from the XML file using the same XmlDocument class. But, to keep things simple and concentrate on the main idea of this article on how to pass large amounts of data from ASP.NET to SWF and vice-versa, I will stop the ASP.NET at this stage and move to the details of making the SWF news application.
Note: You need to be familiar with the Flash CS3 designing environment and have a basic knowledge of ActionScript 3.0 in order to be able to apply the following steps.
Start a new document with ActionScript 3.0 enabled, and format it according to your liking. For me, I was OK with a 300 x 400 white background project. Now, make a new layer (leave the first layer empty to apply ActionScript code to it later) and drop a TextField control to hold the news title that will be grabbed from the <title> tag in the XML file. Make another layer, and drop another TextField control to hold the news body text grabbed from the <body> tag in the XML file. Resize the two TextFields to fit their purpose. Now, use the menu and choose: Insert -> New Symbol -> Movie Clip, and name it "rightarrow". Inside the movie clip, add the image of a small right arrow and center it. Then, click the Main Scene button to go back to the main stage. Do the same for the left arrow button.
Make another layer, and drop two arrow button movie clips to it. Using the Properties window, select each of the TextFields and make them "Dynamic Text" instead of "Static", so they will be dynamically changing at runtime. Give them instance names to refer to them in the ActionScript code. For example: titlenews for the title TextField and bodynews for the body TextField. You can go ahead and format how you want the color and text and the font size of the TextField to appear when filled with data. I also made a small animated title "IT-Center News!" movie clip, and added it to the top of the stage to make it look nice, with a simple MotionTween applied to it. Now, select each of the arrow movie clips and give them instance names.
And now, go to the first layer, and click on the first frame on the timeline, and press F9 to open the Actions window.
First, we need to make some imports to use the TextField and XML classes.
import flash.text.*;
import flash.xml.*;
Then, we define our variables to be used in the application:
var newsrequest:URLRequest = new URLRequest("news.xml");
var newsloader:URLLoader = new URLLoader();
var newsxmllist:XMLList;
var newsxml:XML;
var nodename:XMLList;
var nodename2:XMLList;
Here, basically, we need to use the URLLoader class to load the XML file to it and make it fire the Completed event when the loading of the file is done. We also need to use the XML class which will hold the XML data from the loader, and the XMLList class to hold the child nodes from the XML class so we can iterate through them and make our tests, as I will explain later.
Then, we go ahead and start adding our event listeners, which are:
- event listener for the
Completed event of the URLLoader class.
- the
MouseOver event for the button movie clips to give them button mouse pointers.
- the
MouseClick event for the button movie clips.
Now, start making the URLLoder do its job by calling the load() method and passing it the URLRequest we declared earlier. Then, we start handling the events. And here, I will just concentrate on explaining the logic behind the URLLoader event function.
function loaded(event:Event):void
{
newsxml = new XML(event.target.data);
newsxml.ignoreWhitespace = true;
newsxmllist = newsxml.children();
nodename = newsxmllist.elements("title");
nodename2 = newsxmllist.elements("body");
titlenews.text = nodename[0];
bodynews.text = nodename2[0];
}
We now assign the XML class to a new object and pass it the data that came from the URLLoader object, which is the target of this event. Then, we set the ignoreWhitespace property to true to ignore the whitespace that might be included inside the XML document, so it will not treat it as a new node.
Then, we assign our first XMLList "newsxmllist" to hold the children of the XML object. The children are the collection of child nodes under the <news> root tag. We then assign our second XMLList "nodename" to hold all the <title> tags from the newsxmllist collection, and we assign our third and last XMLList "nodename2" to hold the body text of the <body> tags from the newsxmllist.
Now, if you wanted to make an auto-scroller application, you would go and iterate through the XMLList collections and change their x positions according to a timer class. But, as I stated before, I don't want to go through lengthy processes here because I want to keep the focus on the main idea, which is how to exchange large amounts of data between ASP.NET and ActionScript 3.0. So, basically, what the next code does is grab the node number 0 and display it for the titlenews and the bodynews TextFields we assigned on the stage earlier. And, that is the main function of the ActionScript application that handles the heart of it.
Now, the button functions are pretty straightforward, and they only test to see if the current news title is the max length of the title node or not. And, if true, then the Next button will go from the start and show node number 0 again. And, vice-versa for the Previous button, which tests to see if the current displayed title is equal to node number 0, and if true, it goes to display the max node title and body text by calling the max length of the XMLList and subtracting 1 from it (remember, the node array starts counting at 0, which makes it less than the real length by 1).
Finally, the button function that handles the MOUSE_OVER event and changes the mouse cursor is called.
Note: it is so critical to the application that you declare all the XMLLists outside of the functions so that they can be used by other functions with their current values. If you define them inside the URLLoader, the mouse events won't be able to use them to track which node is currently being displayed from the XML file. So, make sure to define them outside of any functions for the application to work.
Open up the .aspx file again, and add the SWF file to it. Also, make sure to put the XML file in the same directory as your SWF and aspx file, because this is how the code is written to work in the examples.
Note: You might need to close and re-open the browser again in order to force it to reload the SWF file again. And then, you will be able to see your latest additions in it.
You can test the news applications and see the magic of the triple power of ASP.NET, ActionScript, and XML. Go ahead and release your imagination, and start adding the advanced concepts I mentioned in this article to better improve the abilities of the news app. Add more animation and media for an even more astonishing look and feel. You can make an Admin control panel in your application and make the admin control the contents of the SWF files from it. You can even start passing data back from the SWF and make ASP.NET receive and display it. More great projects and thoughts can be made to go far beyond this simple news application.
