Wednesday, March 30, 2011

Working with windows in AIR: Part 4

In this tutorial we'll learn how to create windows of different than rectangle shape.

What we basically do is set the transparency to true, turn off systemChrome and set the window's type as lightweight, and then simply draw a shape we like.

First of all, we need to set the options to the values I've written above:

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.LIGHTWEIGHT;
myOptions.systemChrome = NativeWindowSystemChrome.NONE;
myOptions.transparent = true;

The code part for creating the window object isn't changed:

var myWindow:NativeWindow = new NativeWindow(myOptions);
myWindow.width = 200;
myWindow.height = 200;

We display the text so it is shown inside of the shape we're going to draw.

var myText:TextField = new TextField();
myText.text = "Hello world! This is a rounded window!"
myText.width = 160;
myText.height = 50;
myText.x = 20;
myText.y = 20;
myText.wordWrap = true;

Now we draw the shape:

var myShape:Shape = new Shape();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,200,200,50,50);
myShape.graphics.endFill();

Now we're adding this stuff to the window stage. Mind the depths, though - we want the contents to appear on top of the background, not under it, so we first add the shape.

myWindow.stage.addChild(myShape);
myWindow.stage.addChild(myText);
myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
myWindow.stage.align = StageAlign.TOP_LEFT;

And then we activate the window:

myWindow.activate();

And here's the full code:

import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.display.NativeWindow;
import flash.display.NativeWindowSystemChrome;
import flash.text.TextField;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Shape;

var myOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
myOptions.type = NativeWindowType.LIGHTWEIGHT;
myOptions.systemChrome = NativeWindowSystemChrome.NONE;
myOptions.transparent = true;

var myWindow:NativeWindow = new NativeWindow(myOptions);
myWindow.width = 200;
myWindow.height = 200;

var myText:TextField = new TextField();
myText.text = "Hello world! This is a rounded window!"
myText.width = 160;
myText.height = 50;
myText.x = 20;
myText.y = 20;
myText.wordWrap = true;

var myShape:Shape = new Shape();
myShape.graphics.beginFill(0x00CCCC, 1);
myShape.graphics.drawRoundRect(0,0,200,200,50,50);
myShape.graphics.endFill();

myWindow.stage.addChild(myShape);
myWindow.stage.addChild(myText);
myWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
myWindow.stage.align = StageAlign.TOP_LEFT;

myWindow.activate();

We have now created a lightweight window with a custom shape. It doesn't have any interface or any functionality at all - it doesn't even have a close button, so it is up to us to program everything ourselves.

Thanks for reading!

Related:

Working with windows in AIR: Part 1
Working with windows in AIR: Part 2
Working with windows in AIR: Part 3
Working with windows in AIR: Part 5
Working with windows in AIR: Part 6
Working with windows in AIR: Part 7
Working with windows in AIR: Part 8
Working with windows in AIR: Part 9
Working with windows in AIR: Part 10
Working with windows in AIR: Part 11
Working with windows in AIR: Part 12

No comments:

Post a Comment