Wednesday, May 11, 2011

HTML in AIR: Part 1

Today we will start learning about using HTML in an AIR application.

We all know that we can put Flash/Flex .swf files in HTML web pages. And now, thanks to AIR, we can put HTML inside of Flash/Flex.

As you might already know, AIR includes the WebKit browser engine (the same engine that Safari uses), and it allows AIR applications to display HTML and execute JavaScript just like in a standard browser. We can insert HTML into our AIR application, it will be interactive like it should be, but the best thing is - this HTML object is a display object of the AIR engine!

This means, we can work with the HTML page the same way we work with any other object on stage - we can resize it, flip it, apply effects to it (blur, shadow, etc), mask it, rotate it in 3d and so on.

Putting HTML content inside of our application is really simple. All we need to do is create a flash.html.HTMLLoader object and then add it as a child.

var myHtml:HTMLLoader = new HTMLLoader();
myHtml.width = stage.stageWidth;
myHtml.height = stage.stageHeight;
addChild(myHtml);

We've put the HTMLLoader object on stage and set its borders. What now?

Now we need to add content to it. This can be done in two ways - the first way is to use the load() method, the second way is to use the loadString() method.

With load() you can tell the HTMLLoader object the path to a webpage that needs to be displayed. All you have to do is pass the url as an URLRequest object as the only parameter for the load() function:

myHtml.load(new URLRequest("http://www.google.com/"));

This way you could, for example, create a web browser in AIR.

With loadString(), you can feed html code to the HTMLLoader object, and it will display it as it is. For example:

myHtml.loadString("<html><body>Hello world!</body></html>");

You can also load PDF files using the HTMLLoader object. However, this will only work if the user has Adobe Acrobat 8.1 or higher installed on his machine. If the reader is too old or is not found - the PDF file cannot be displayed.

That's all for now.

Thanks for reading!

Related:

HTML in AIR: Part 2
HTML in AIR: Part 3
HTML in AIR: Part 4
HTML in AIR: Part 5
HTML in AIR: Part 6
HTML in AIR: Part 7
HTML in AIR: Part 8
HTML in AIR: Part 9
HTML in AIR: Part 10
HTML in AIR: Part 11
HTML in AIR: Part 12
HTML in AIR: Part 13
HTML in AIR: Part 14
HTML in AIR: Part 15
HTML in AIR: Part 16
HTML in AIR: Part 17

2 comments:

Backbancherz said...

Good one..,., Easy to understand

Anonymous said...

Will this work in cs5.5?

Post a Comment