Simple Air Application: Loading a webpage in your mobile phone application (ActionScript 3.0)

The StageWebView provides a means to display HTML content in mobile application. StageWebView literally draws an instance of the device’s native Web View on top of the stage using designated viewport coordinates and boundary dimensions.

Unlike HTMLLoader, StageWebView instances can’t be added to the display list. This means that, at least presently, developers cannot draw or otherwise place display list objects on top of a StageWebView instance, and animating StageWebView instances proves difficult and exhibits fairly poor performance.

Finally, because HTMLLoader is not supported on Android devices, working with HTML content on Android, we have to use the StageWebView. In the code below, the StageWebView.loadURL() function loads the stackarena.com website. You can download the source file at the end of this tutorial.

Let’s get started.

I am using Adobe Flash Professional CS5 and ActionScript 3.0. Create a new Air for Android application with the default screen size 480px by 800px (Android phone screen size)

On the first layer, add your buttons and text indicating what each button does as seen below; Name the first button Google and the second Hide/show. Give them the instance name btn_google and btn_hideshow respectively.

Google button(btn_google): loads the Google search page on your mobile application.

Hide/show (btn_hideshow): clears all HTML content from the application.

You can access these buttons from flash libary. Go to Windows> Common Libaries> Buttons. Select classic button > Arcade buttons > Drag and drop the buttons to stage and adjust the button with your free transform tool if you so wish.
The buttons and text should be positioned at the bottom layer because the upper region of the screen would act as a stage where our HTML content/ “browser” would be loaded.
Your screen should look like this;

Let’s add some ActionScript
In the first frame of the first layer, right click and select action. Add this piece of code to it.

import flash.geom.Rectangle;
import flash.events.MouseEvent;

var stagewebview: StageWebView = new StageWebView();
stagewebview.stage = this.stage;
stagewebview.viewPort=
new Rectangle(0,0,stage.stageWidth,stage.stageHeight-250);
stagewebview.loadURL( "http://www.stackarena.com" );

btn_google.addEventListener (MouseEvent.MOUSE_DOWN,goGoogle);
btn_hideshow.addEventListener (MouseEvent.MOUSE_DOWN,hideshowBrowser);

function goGoogle(evt:MouseEvent)
{
  stagewebview.loadURL( "http://www.google.co.uk ");
}

function hideshowBrowser(evt:MouseEvent)
{
  if (stagewebview.stage==null) stagewebview.stage=this.stage;
  else stagewebview.stage=null;
}

Explanation of the code above

import flash.geom.Rectangle;
import flash.events.MouseEvent;

The first line of the above code imports the packages flash.geom which helps us create A Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.

The second line events.MouseEvent imports the package events.MouseEvent which responds when Flash® Player dispatches MouseEvent objects into the event flow whenever mouse events occur. A mouse event is usually generated by a user input device, such as a mouse or a trackball, that uses a pointer.

var stagewebview: StageWebView = new StageWebView();
stagewebview.stage = this.stage;
stagewebview.viewPort=
new Rectangle(0,0,stage.stageWidth,stage.stageHeight-250);
stagewebview.loadURL( "http://www.stackarena.com" );

This code creates an object of the StageWebView class and attaches it directly to the stage using the stage property of the StageWebView object. Note that StageWebView is not a display object that can be attached to a Flash display list. You can control the size of the rectangle in which the HTML content in a StageWebView displayed using the viewPort method.

btn_google.addEventListener (MouseEvent.MOUSE_DOWN,goGoogle);

function goGoogle(evt:MouseEvent)
{
  stagewebview.loadURL( "http://www.google.co.uk ");
}

We added btn_google button outside the StageWebView. In the code above, an event listener is added to it, and then a function is called to set the location.The function goGoogle, when executed, loads the Google web page in the StageWebView. The loadURL() method is used to load the URL in the WebView class.

btn_hideshow.addEventListener (MouseEvent.MOUSE_DOWN,hideshowBrowser);
function hideshowBrowser(evt:MouseEvent)
{
  if (stagewebview.stage==null) stagewebview.stage=this.stage;
  else stagewebview.stage=null;
}

We added btn_hideshow button outside the StageWebView. In the code above, an event listener is added to it, and then a function is called to set the StageWebView to null and set the view back to the stage.The function hideshowBrowser, when executed, unloads and loads the web page in the StageWebView.

You can test the movie using an emulator which is like testing directly on a mobile phone. In another tutorial, I would discuss how to test applications directly on your android phone.

Control > Test movie > in Air Debug Launcher(Mobile) or for keyboard shortcut Ctrl + Enter.

You can download the source file below and Don’t forget to ask questions!

Resources

Download Source

Leave a Reply

Your email address will not be published. Required fields are marked *