Posted by : Adnan Farooq Hashmi Thursday, April 14, 2005

Raat yoon dil mein teree
Khowee howee yaad aaey,
Jaisay weraanay mein chupkay say bahaar aa jaaey,
Jaisay sehraaoon mein holay say chalay baad-e-naseem,
Jaisay beemaar ko bay-wajah qaraar aa jaaeey.


The one-minute long title song for "Dhoop Kinaray", a hit TV serial in the 80's by Haseena Moin on Pakistan Television and sung by Nayyara Noor. After searching for it for 17 years, I finally managed to get my hands on it. Have already listened to it countless times today (listening to it still); copied it to the Nomad MP3 Player (sent by Microsoft as a gift for becoming an MVP), to listen to it even while on the road; I am happy. (This song should have been an hour long).

There would be an INETA Pakistan event at SSUET on Saturday, and I have to deliver a lecture on "Flash Remoting using .NET". So, after procrastinating for 2 months, I am finally blogging it.

Flash Remoting is a way for creating Macromedia Flash UI's that communicate with business logic developed using .NET, Java, or ColdFusion. I have mentioned this in a previous blog too; the great thing about developing Web Applications with a Flash GUI is the page does not have to reload after a postback, thus limiting the data transferred to and from the server. Once a Flash movie has loaded into the web browser, the UI does not re-load when some new data is retrieved from the server/database. Apart for the speed, a Flash UI also provides a rich user experience. Even images can be dynamically loaded into the Flash movie at runtime, and masks can be applied to them without re-creating those images as would typically be required if the GUI comprised of HTML pages. In addition, Flash GUI's can be used in 4 ways; by communicating with an ASP.NET web form page, by consuming an XML Web Service, by communicating with a .NET assembly, and by retrieveing data from an ADO.NET DataSet.

There are many code samples available on the internet to demonstrate how to connect a Flash GUI to back-end server logic, so there really is no point in getting into all that now. However, I have been bombarded by the same questions about Flash Remoting again and again, from people who were unable to run those code samples. Ok then, lets start.

Download and Install Flash Remoting Components
When first starting out with Flash Remoting, download the Flash Remoting components from the Macromedia Flash Remoting site. Be sure to check which Flash version you are using; Flash MX or Flash MX 2004, and download components accordingly. Run and install the downloaded file. You will be able to see the Flash Remoting classes in the ActionScript panel once the components have been installed.

Add a reference to flashgateway.dll
First of all, add a reference to the flashgateway.dll file (If you can't find the flashgateway assembly, download a sample application from the macromedia site; that would hopefully contain the flashgateway.dll file).

Add the flashgateway.dll registration to the web.config file
The main reason most people are unable to run remoting samples is they dont perform this task. DO NOT FORGET TO COPY THE FOLLOWING INTO YOUR WEB.CONFIG FILE, OTHERWISE DON'T E-MAIL ME.


<httpModules>
<add name="GatewayController"
type="FlashGateway.Controller.GatewayController,flashgateway" />
</httpModules>


Create a Web Form page for the Flash UI to communicate with
Create a web form page in Visual Studio.NET; lets call it MyWebPage.aspx and place the page class in the MyApp.FlashRemoting Namespace (You can use your own names for the web page and class but I have used the names for reasons of clarity). The code for the web page and page-class in the code-behind file would look like this:

MyWebPage.aspx

<%@ Register TagPrefix="Macromedia" Namespace="FlashGateway"
Assembly="flashgateway" %>
<%@ Page language="c#" Codebehind="MyWebPage.aspx.cs"
AutoEventWireup="false" Inherits="MyApp.FlashRemoting.myWebPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>FlashUI_Page</title>
</HEAD>
<body>
<form method="post" runat="server">
<Macromedia:Flash ID="Flash" runat="server" />
</form>
</body>
</HTML>


MyWebPage.aspx.cs

namespace MyApp.FlashRemoting
{
public class MyWebPage : System.Web.UI.Page
{
protected FlashGateway.Flash Flash;

private void Page_Load(object sender, System.EventArgs e)
{
if (Flash.Params.Count == 0)
{
throw new Exception("No arguments received.");
}

string myString;
myString = "Hello ";
myString += Flash.Params[0].ToString();
myString += " !!!";
Flash.Result = myString;
}

/% ----------------------------------
// Web Form Designer generated code
%/ ----------------------------------
}
}


Create the gateway.aspx file
Create an empty *.aspx file in your ASP.NET project, remove the markup, and even the Page directive from the page, and name it gateway.aspx. REMEMBER, the gateway.aspx file should be in the directory in which you created MyWebPage.aspx above.

Specify the Classpath in Macromedia Flash Environment
Forgetting to perform this is the second most common mistake people make. Firstly, if you are using Macromedia Flash MX 2004, you have to use the import statement as opposed to the #include statement, as you can see from the ActionScript code in the next step. Keep one thing in mind. Namespaces in ActionScript are not logical hierarchical names as in .NET languages. Instead, ActionScript namespaces reflect the hierarchical directory structure. So, the following import statement represents the NetServices.as file in the remoting sub-directory in the mx directory. But where is the mx directory located? Well, its in the directory you specified in the class-path panel. On the top menu, go to Edit > Preferences, and click the ActionScipt 2.0 Settings button in the ActionScript tab. Locate directory where you unzipped the Flash remoting component files you downloaded from the Macromedia website, click the '+' button on the Class-Path Panel and enter that path for that directory. There you go; now every time you enter the following import statement, Flash would look it up in classpath you specified.

import mx.remoting.NetServices


Write ActionScript code in Flash
Type the following ActionScript code on Frame 1 of the main timeline of your Flash movie. (Code lines have been numbered)


1: import mx.remoting.NetServices
2:
3: if (inited == null)
4: {
5: inited = true;
6:
7: NetServices.setDefaultGatewayUrl("http://localhost/MyApp/gateway.aspx");
8: var gatewayConnection = NetServices.createGatewayConnection();
9: var aspxService = gatewayConnection.getService("MyApp.FlashRemoting", this);
10: }
11:
12: function MyWebPage( name )
13: {
14: if( (name != null) && (name != "") )
15: {
16: aspxService.MyWebPage ( name );
17: }
18: }
19:
20: function MyWebPage_Result( result )
21: {
22: if( txtResult == undefined )
23: {
24: _root.createTextField( "txtResult", 100, 5.7, 87, 160, 18 );
25: }
26: txtResult.text = result;
27: txtResult.autoSize = true;
28: }
29:
30: function MyWebPage_Status( error )
31: {
32: trace( error.code );
33: trace( error.description );
34: trace( error.details );
35: }


NOTE:Be sure to correctly specify the URL of your gateway.aspx on Line 7. Also, On Line 9, specify the Namespace of the page-class in your web page's code-behind file. ALL the methods must be named after your Web Form page i.e. MyWebPage. That is how Flash knows which ASP.NET web form to communicate with.

Create a button to call the Method
Lastly, create a button on the stage. The on event handler for the button shoulw look like this.


on (release)
{
// call the method named after your web page
MyWebPage("Dhoop Kinaray");
}


This has been a very long post. I just CAN'T seem to get enough of this song. Looks like I will be listening to it throughout the night.

6 Responses so far.

  1. Khizzy says:

    nah...ur not nosy...i guess,lol.
    ok heres the thing...
    tried being more than friends...but ended up doing nothing but fighting and got nowhere.

    so after a period of not talking to eachother at all...we're now friends.

  2. Nonentity says:

    I would like to get my hands on that song myself. Can you please mail it to niksterdump@yahoo.com?

    I shall be much grateful. That play has childhood memories associated with it.

  3. Anonymous says:

    where did you download the song from? i have been trying to find it too.

  4. Actually, I recorded and re-mixed it directly from the television using Adobe Audition, with excellent results.

  5. Sajogita says:

    Hello Adnan,
    I've been a great fan of dhoop kinare since saw it in the late 80s-early 90s... been looking for the song raat yoon dil mein... sung by nayyara noor in dhoop kinare. a blog directed me to your blog.
    Can you please mail it to me at sanjogita.sengupta@gmail.com

    sorry for the trouble
    thanks a lot

    Sanjogita

  6. Anonymous says:

    Bhai Jaan please send me that legendry song if you can at kool_bds@yahoo.com
    I shall be highly Thankful to you.

My Passion, My Inspiration, My Pakistan

Popular Posts