Monday, January 17, 2011

how to set background for container

how to set background for container

hey shethab,

dont sweat it we've all be there! here's how you set the background color of your application. Where there are two ways:

First set the meta data to a solid background color like this:

package
{
import flash.display.Sprite;

[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
public class MyApplication extends Sprite

public function MyApplication()
{
(...)

}
}
}

The background is in the same format as HTML coloring. The second way is by creating a shape object as large as the screen and adding it as the first child to your program like so:

package
{
import flash.display.Shape;
import flash.display.Sprite;

[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
public class MyApplication extends Sprite
{
public function MyApplication()
{

var appBackgroundColor:Shape = new Shape();

appBackgroundColor.graphics.beginFill(0xFF0000);
appBackgroundColor.graphics.drawRect(0,0,1024,600);
appBackgroundColor.graphics.endFill();

addChild(appBackgroundColor);


(...)
}
}
}

To add an image is like the second step only using the Image class like this:

package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.filesystem.File;

import qnx.ui.display.Image;


[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
public class MyApplication extends Sprite
{
public function MyApplication()
{

var appBackgroundImage:Image = new Image();

appBackgroundImage.setImage(File.applicationDirectory.resolvePath('path/to/image.png').url);
appBackgroundImage.setSize(1024,600);
appBackgroundImage.setPosition(0,0);

addChild(appBackgroundImage);

(...)

}
}
}

hope that helps! good luck!

J. Rab