In this article you will learn the world of Flash development with ASP.NET. I recently designed a website, which thoroughly covers all the Flash to ASP.NET communication methods mentioned in this article, as well as a step by step introduction to ASP.NET development with C# using Visual Studio.NET, the best IDE and Adobe Flash CS.
Step 1
Open Adobe Flash CS. Create a new document by selecting Flash File (Action Script 2.0). You may be interested in Action Script 3 (AS3), but I choose Action Script 2 (AS2) for ease of understanding. Just come to me and I assure you that you will become a good Flash developer after reading this article. You will now see a single tab called ‘Untitled 1’ in Adobe Flash. After saving the file, the ‘Untitled 1’ text will be replaced with your preferred file name. I named it ‘AspFlash.fla’. Remember that FLA is a flash source file and your output movie will be SWF, which will then need to be embedded in the ASP.Net ASPX file.
Adobe Flash divided into several windows, do not get confused. You do not need to know all the features of the window. Start with the left one called ‘Tools’, in the top center window called ‘Timeline’, the next bottom window called ‘Scene’, the next bottom window called ‘Properties’ and the rightmost window divided with many windows’ Color’, ‘Align’, ‘Components’ and ‘Library’. Those entire windows can be turned on/off via the ‘Window’ menu. Look at the ‘Scene’ window, which will be your design area. From the ‘Properties’ window you can change the colors and size according to your requirements.
Step 2
Now add some component from ‘Components’ window, expand ‘User Interface’. Oh! a lot of things. Drag just one ‘Text Input’ and one ‘Button’ into your ‘Scene’ window and line them up correctly. Select ‘TextInput’ and put an instance name (eg TextInput1) in the ‘Properties’ window. Without the instance name, Action Script will not recognize any component. Do the same for the ‘Button’ instance name (eg Send Data) and from the ‘Parameters’ tab, change the ‘Button’ label (eg Send Data).
Step 3
Here we start the main coding part. Select ‘Layer 1’ in the ‘Timeline’ window and press F9 (keyboard function key). You will see the ‘Actions’ window, where you type your AS code. Type or copy pests of the following codes.
SendData.onPress = function() {
//Declare and initialize variable
var send_lv:LoadVars = new LoadVars();
//Assigning a value to the parameter, such as Asp.Net QueryString
send_lv.mydata = TextInput1.text;
//Sending data
send_lv.send(‘default.aspx’, ‘_self’, ‘GET’);
};
The LoadVars object is used to exchange data between flash and server. The LoadVars object is capable of sending data to the server for processing, loading data from the server, or sending data to the server and waiting for a response from the server in a single operation. The LoadVars object uses name and value pairs to exchange data between the client and the server. The LoadVars object is best used in a scenario that requires two-way communication between the Flash movie and server-side logic, but does not require large amounts of data to be passed.
The send method sends the variables in the send_lv object to the specified URL. The string is posted to the URL using the HTTP GET method so ASP.Net can easily read the mydata variable in the QueryString.
Step 4
Write or copy the following codes to read QueryString in Flash – Action Script 2. In Action Script 2 there are no methods like those provided by ASP.Net, so I wrote the following codes to get QueryString from URL. The _url method returns the URL of the ‘AspFlash.swf’ file that was loaded with the ASPX page.
//Reading QuaryString
myURL = this._url;
myPos = myURL.lastIndexOf(“?”);
if (myPos > 0) {
var myRawParam = myURL.substring(myPos + length(‘mydata=’) + 1, myURL.length);
myParam = myRawParam.toString().split(“‘”).join(“”);
if (myParam!= undefined){
InputText1.text = myParam;}
step 5
Save your file from the File menu. Now we need to make the final SWF motion and embed it in the ASPX page. In the File menu, click ‘Publish Settings’ and you will see a new window containing three tabs (Formats, Flash and HTML). On the Formats tab, check the Flash and HTML types, so that you can get the SWF embed code in the HTML page. Now hit the ‘Publish’ button to build the finishing move. If no error occurred, flash will provide you with two files (eg ‘AspFlash.swf’ and ‘AspFlash.HTML’) in the root folder where the source file ‘AspFlash.fla’ is located.
step 6
Now start Visual Studio.Net (VS) and create a new website and name it ‘AspFlash’. VS creates a default page, namely ‘Default.aspx’. From the solution explorer, double-click the ‘Default.aspx’ file to see the markup code (also called inline code) like the following.
Now copy the files ‘AspFlash.swf’ and ‘AspFlash.HTML’ to the root directory of your web. I mean ASPX, the SWF files must be located in the same directory. Open the ‘AspFlash.HTML’ file and copy the entire ‘object’ tag and paste it inside the ‘Default.aspx’ file tag.
After pasting the above code, few changes are needed to ‘AspFlash.swf’ parameter like below. Look at the ‘AspFlash.swf?mydata=”’ line we added. Flash reads _url data with mydata that will be provided by ASP.Net later.
Finally, add two standard ASP.net controls on the ‘Default.aspx’ page, i.e. TextBox and Button. Change the button’s text property to ‘Submit Data’.
step 7
In this step you need to open the ‘Default.cs’ file by clicking ‘View Code’ pointing to ‘Default.aspx’ from VS Solution Explorer. By default, VS added the Page_Load event procedure. You need to add some text in the Page_Load event procedure along with the button1_click event procedure like the following.
protected void Page_Load(object sender, EventArgs e)
{if(!IsPostBack)
yes (Request[“mydata”]!= null)
textbox1.Text = Request[“mydata”].Chain();}
protected void button1_Click(object sender, EventArgs e)
{Response.Redirect(“~/default.aspx?mydata=” + textbox1.Text);}
step 8
Now create the website using F5 (keyboard function key) and type some text in the Flash movie and click ‘Send Data’ to send Flash data to the ASPX page. You will see the ASPX text ‘TextBox’ changed with your Flash text ‘TextInput’.
In the same way, type some text in ASPX ‘TextBox’ and click ‘Send Data’ button to send ASPX data to Flash movie. Enjoy the technical communication between ASP.Net and Flash. If you need any further assistance, please feel free to contact me via email.