Have you read about StageWebView in Adobe Air SDK for flash? Basically, we can use it to display HTML content in Adobe Air Flash base application. But there is no interaction between actionscript and HTML content (no pass data or access properties). I’m not gonna to explain more detail on what is StageWebView. You can read more about it here: http://www.adobe.com/devnet/air/quick_start_as/quickstarts/qs_using_stage_web_view.html

I do some experiment to display admob content in Adobe Air Flash base Android application.This is how I do it.

Before that, make sure your mobile phone have a latest Adobe Air and latest Flash Player. Get it from Android market. And for your PC or laptop, make sure your machine installed with latest Adobe Flash Professional CS5 Extension for Adobe AIR 2.5.

1. Add site in Admob

For those has using admob before, we know they is several type of admob ad available. One of it is for “smartphone web”. It use javascript to display ad in website that optimize for smartphone view like iPhone and Android.

admob-select-smartphone

Fill in all detail. And then click “continue” button. Admob will provide a javascript code. Copy the code.

2. Create HTML file.

Paste the javascript you copy just now and add it in the HTML file.  Upload the file to your domain.  For testing,  Use your mobile phone browser and go to the URL that you place the html file. You should see the admob test ad now. You can test my demo by point your mobile browser to http://m.dreamflashstudio.com/test/admob/

admob-test

3. create flash file for android.

-Open Flash CS5. Create new flash file from template. From the template option, select “Air For Android”.  And press OK button.
-Then create and add document class. Declare variable.

private var admobURL:String;
private var webView:StageWebView;

- create StageWebView object

// create link to your html file that containt admob javascript that create previously
admobURL = "http://yourdomain.com/yourfilename.html";

webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 0, 510, 100);
webView.loadURL(admobURL);

Now you are done on flash part. Compile it.

3. Test it – deploy to apk

When you publish fla file, flash will create XML file. You need to add a premission to access internet in the manifest part. Add this code between <manifestAdditions> tag.

 <![CDATA[<manifest>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>]]>

Now you are ready to create a *.apk file. Install it in your phone. And run it.  You will see the” admob test ad” in flash. (If you not sure how to create *apk file from SWF file, get the information here – Adobe Air for android.)

But wait, there is some problem right? When you click the ad, it will open the ad link in StageWebView!! We need to make sure the link is open in browser.

4. Add web change listener

Add a listener to stage view. Please read my comment in code.

// suppose to use LocationChangeEvent.LOCATION_CHANGING, but doesn't work for me (StageWebView still in beta maybe, or any suggestion?)
// LocationChangeEvent.LOCATION_CHANGE - is call when changeURL
// LocationChangeEvent.LOCATION_CHANGING - is call before changeURL
			
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, adChange);

and after that add the function that will handle location change event

private function adChange(e:LocationChangeEvent):void 
{

	if (e.location!=admobURL) {
				
		// use to prevent StageWebView load the new URL (it will work if pair with LocationChangeEvent.LOCATION_CHANGING)
		e.preventDefault();
				
		// since e.preventDefault() doesn't work for me, I set the webView to back to previous page.
		webView.historyBack();
			
		// open url - new window
		var url:URLRequest = new URLRequest(e.location);
		navigateToURL(url, "_blank");
	}

}

5. The only problem I have

I dont know why LocationChangeEvent.LOCATION_CHANGING event on StageWebView has not dispatched. Anyone?

Ok that’s all for now. To make it easy for me to attach the Admob, I just create a class file that extend MovieClip. And link it to new MovieClip in Library. And I just need to attach by drag the movieclip to Stage, and set the url.

You can get the sourcefile here. I also have compiled *.apk file for quick install the admob demo and test it.

If you not sure how to create *apk file from SWF file, get the information here – Adobe Air for android.

Related Posts Plugin for WordPress, Blogger...