February 13, 2014

[Flash] Load a Web Page using Adobe AIR

4 comments
Hi, guys. I've been testing about using Flash and Adobe AIR recently to create an app for mobile devices. One tips that I'd like to share with you today is how we can easily load a web page in Flash. Wait, why would we want that? By doing so, we are actually creating a web app specifically for our website without having to code again from zero. Isn't that cool to have an app with your brand name on it? :D

So what do we need to have? First we need to build our website (of course), preferably a responsive one so that it should match wide variety of device resolution.. especially for Android phones, they have a very wide range of device resolution since they're created by many manufacturers.

Then we need Flash to build our Air application, or other Flash IDE such as Flash Builder or flashdevelop. In this tutorial, I will use Flash CS6. Fyi, Flash CS6 supports Adobe AIR for Android and iOS, and it allows you to manage the AIR SDK, so we can always replace it with the latest SDK. If you don't know where to download the latest Adobe Air SDK, you can download it from Adobe AIR Developer Center. Flash CS6 has ver. 3.5 included by the way.

So we're all set up, then let's code ;)

Preparing the Project File

Every time we open Flash, we'll be asked about what project we're going to create. This time, instead of choosing ActionScript 3.0, we'll use the AIR project.

Flash Professional CS6 Welcome Screen
Flash Professional Welcome Screen
Notice that there're 3 options for AIR projects, AIR, AIR for Android, and AIR for iOS. Actually they're all the same. The only differences is the targeted device: AIR for desktop PC, Air for Android for Android device, and AIR for iOS for iOS device. So, in this tutorial, I will use the Air for Android option.

Click on that, and we'll now have a 480x800 px blank new file with the Publish Settings already set for Android device.

Using StageWebView Class for Loading Web Page

StageWebView class is the class that we'll be using to load our awesome website. If you want to dig depper about this class, you can see the documentation here.

Now, I'll explain you the code. First, we need to calculate the width and height of the screen, since we don't know where this app will be installed considering that wide-variety of resolution.

//This will return the actual width value of our stage
var wView:int = stage.stageWidth;
//This will return the actual height value of our stage
var hView:int = stage.stageHeight;

After we get the size, then we need to create our StageWebView object and assign the screen size to it using viewPort property. The viewPort property uses Rectangle value, so we need to set the screen size using Rectangle object (it uses 4 values: x position, y position, width, and height).

//Create a new StageWebView object
var swv:StageWebView = new StageWebView();
//Set the size of StageWebView object created to match the screen size
swv.viewPort = new Rectangle(0,0,wView,hView);

When you're done, now we will load the webpage using loadURL property, and show it using the stage property. NOTE: StageWebView is not a DisplayObject, so we cannot call it using addChild method like we've used to do when calling a MovieClip or Sprite. Thus, StageWebView object will always be put on top of everything and make us unable to place another object on top of that. Suppose you want to place a button or movie clip on top of that, you need to hide the real StageWebView object and convert it to BitmapData using drawViewPortToBitmapData() method. Then show the bitmap instead of the real StageWebView object. Read the full explanation in the documentation.

//Load the Google Page
swv.loadURL("http://www.google.com");
//Show the StageWebView Object
//If you want to hide it, set the stage property to null
swv.stage = this.stage;

Now hit the magic shortcut (Ctrl+Enter) and you should see the Google page shown on your screen.

StageWebView Object showing Google Web Page
StageWebView Object showing Google Web Page

The nice thing about StageWebView is when the page is longer than the screen, then it will actually show the scrollbar. So we don't need to mess with the scrolling page code. ;)

Now, try to load a heavier website. You'll notice that the StageWebView will show a white blank page before it completes loading the webpage. We can avoid that white blank page being shown by setting the stage property only after the webpage is fully loaded. So what to show, while it's loading? Well, a movie clip with loading animation would be a good idea. :D

//Add an event listener when the webpage is fully loaded
swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

So our full code would be something like this. *Do not forget to import the required class also*

import flash.display.Stage;
import flash.geom.Rectangle;
import flash.media.StageWebView;
import flash.events.Event;

var wView:int = stage.stageWidth;
var hView:int = stage.stageHeight;

var swv:StageWebView = new StageWebView();
swv.viewPort = new Rectangle(0,0,wView,hView);
swv.loadURL("http://www.google.com");

swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

Publishing the Application

Well, I'm not going to explain the detail step to do this because that will make this post much much longer. But you can get the documentation in the Adobe official website:
- Publishing for Android device
- Publishing for iOS device

Btw, it's better for you to have a real device to test when developing a mobile device app, because if you have your code work in Test Movie doesn't guarantee that it will work on the device.

Okay, I think this is the end of the tutorial. I hope you find something useful here.
Cheers!

4 comments :

  1. so we dont need .mxml file to render as view?

    Home Design Ideas

    ReplyDelete
    Replies
    1. I guess not. Because I'm using Flash Professional instead of Adobe Flex in this tutorial.

      Delete
  2. They have a very wide range of device resolution since they're created by many manufacturers.web design tutorials

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...