Topic: opaqueBackground

Hello! I'm completely new to flash and have been trying to build some sample code for my chumby using FlashDevelop. I got a hang of the basics and was trying something when I faced this issue.

I want to change the background color of my widget based on some event. I realised that using the opaqueBackground works but only behind the textfields that are created, not the complete screen. The widget is configured for 320x240, background(#FFFF00, yellow), 2fps. Here is the sample code:

class Main
{
    private static var _i:Number;
    
    public static function main() : Void
    {
        _i = 0;
        _root.createTextField("t", _root.getNextHighestDepth(), 0, 20, 320, 100);
        var tf:TextFormat = new TextFormat();
        tf.size = 32;
        tf.align = "center";        
        _root.t.text = "Hello, world!";
        _root.t.setTextFormat(tf);
        _root.onEnterFrame = function () {
            Main.myOnEnterFrame();
        }
    }
    
    public static function myOnEnterFrame():Void
    {
        _i++;
        if (_i > 20) _root.opaqueBackground = 0x00FFFF;//change to light blue color
    }
}

I expect the complete screen to change to light blue color after 10s(20 frames) because I am changing the background of _root. Instead only the area behind the t textField changes to light blue and the remaining screen remains yellow. I'll try to post screenshots if possible. A few questions:

1. Is this the right way to create textFields? In my actual project I need 3 textFields which I plan to create using _root.createTextField(<name>, _root.getNextHighestDepth(),...
2. Is this the right way to change background color? As I understand this is a more efficient way than beginFill/endFill which I have not yet tried.

Hope some experts can help me.

Re: opaqueBackground

Changing the color of _root will only change the color of any graphics it contains - it won't change the "background color" the movie was published with.  You'll need to create a full-screen MovieClip, put it at the lowest depth, and change its color.

Re: opaqueBackground

Thanks Duane. How do I create a "full-screen MovieClip"? Following code has the same effect as the original code.

class Main
{
    private static var _i:Number;
    private static var _back:MovieClip;
    
    public static function main() : Void
    {
        _i = 0;
        _back = _root.createEmptyMovieClip("back", _root.getNextHighestDepth());
        _back.createTextField("t", _back.getNextHighestDepth(), 0, 20, 320, 100);
        var tf:TextFormat = new TextFormat();
        tf.size = 32;
        tf.align = "center";        
        _back.t.text = "Hello, world!";
        _back.t.setTextFormat(tf);
        _back.onEnterFrame = function () {
            Main.myOnEnterFrame();
        }
    }
    
    public static function myOnEnterFrame():Void
    {
        _i++;
        if (_i > 20) _back.opaqueBackground = 0x00FFFF;
    }
}

Re: opaqueBackground

You create the MovieClip "back", then use the beginFill/moveTo/lineTo/endFill drawing commands to create a rectangle the size of the screen.  At that point you can set the color of the rectangle, or recreate it in the new color.

Re: opaqueBackground

Thanks Duane! I created a fullscreen transparent rectangle using beginFill/moveTo/lineTo/endFill. This allows the color specified in the widget properties to be visible at start and any later color changes to be done using just opaqueBackground.

Final code for others benefit:

class Main
{
    private static var _i:Number;
    private static var _back:MovieClip;
    
    public static function main() : Void
    {
        _i = 0;
        _back = _root.createEmptyMovieClip("back", _root.getNextHighestDepth());
        _back.beginFill(/*rgb*/0x000000, /*alpha*/0);//fully transparent rectangle, color don't care
        _back.moveTo(0, 0);
        _back.lineTo(320, 0);
        _back.lineTo(320, 240);
        _back.lineTo(0, 240);
        _back.lineTo(0, 0);
        _back.endFill();

        _back.createTextField("t", _back.getNextHighestDepth(), 0, 20, 320, 100);
        var tf:TextFormat = new TextFormat();
        tf.size = 32;
        tf.align = "center";        
        _back.t.text = "Hello, world!";
        _back.t.setTextFormat(tf);
        _back.onEnterFrame = function () {
            Main.myOnEnterFrame();
        }
    }
    
    public static function myOnEnterFrame():Void
    {
        _i++;
        if (_i > 20) _back.opaqueBackground = 0x00FFFF;
    }
}

Duane, I still have a question. I can achieve the same effect by doing exactly the same thing on _root directly instead of creating a _back. Is it not recommended?

Re: opaqueBackground

I found that opaqueBackground does not work on the chumby device itself though it works well inside FlashDevelop. beginFill/moveTo/lineTo/endFill is the way to change the background color of the widget on the chumby.