CODEWITHSUNDEEP
actionscript-3flashapache-flextextactionscript
Vladimir Shevyakov
Vladimir Shevyakov

Reputation: 2851

Dynamically display text in Flex, ActionScript 3

I've been having problems displaying text in ActionScript 3 using Flex SDK 4.6. Any method I try results in no change or a black screen; here is my project code and attempts.

MyProject.mxml is simply and mx:Application tag with the relevant parts being

<mx:Script>
<![CDATA[
  include "MyProject.as"; //simply running my project file
]]>
</mx:Script>

and 

<mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%"/> //defining the canvas

In MyProject.as I have

import flash.display.*; 
import flash.events.*;
import mx.events.*;
import mx.controls.*;

import Game;

public static const SCREEN_WIDTH:int = 960;
public static const SCREEN_HEIGHT:int = 720;
private var initializationCompleted:Boolean = false;
public var screenBuffer:BitmapData;
public var game:Game;

public function setup():void {
    screenBuffer = new BitmapData(SCREEN_WIDTH, SCREEN_HEIGHT, false, 0x00000000);
    game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT, screenBuffer);
    initializationCompleted = true;
}

private function updateFrame():void {
    if (!initializationCompleted) {
        return;
    }

    draw();

    gamePanel.graphics.clear();
    gamePanel.graphics.beginBitmapFill(screenBuffer, null, false, false);
    gamePanel.graphics.drawRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    gamePanel.graphics.endFill();
}

private function draw():void {
    game.update();
}

And in Game.as, I simply draw everything using the BitmapData class, and then copy everything to the screenBuffer:

screenBuffer.copyPixels(myBitmap, new Rectangle(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT), new Point(0,0));

(This is only the relevant code - I trimmed as much as possible to leave a "Minimal, Complete, and Verifiable example")

Now I have been having problems displaying text in my project. I know that TextField is a subclass of flash.display.Sprite which can be added to the canvas. Whenever I try using something like

var txtHello:TextField = new TextField();
txtHello.text = "Hello World";
gamePanel.addChild(txtHello)

this either changes nothing (if used in setup(), I'm assuming I'm drawing over it or else it is never displayed) or causes a black screen (if used anywhere in updateFrame(), I'm assuming I'm creating infinite sprites).

I have tried instead, creating a new file named "TextWithImage.as" with the contents

//this is ripped off the adobe help page
package { 
    import flash.display.Sprite; 
    import flash.text.*; 

    public class TextWithImage extends Sprite { 
        private var myTextBox:TextField = new TextField(); 
        private var myText:String = "Hello World"; 

        public function TextWithImage() { 
            addChild(myTextBox); 
            myTextBox.text = myText; 
        } 
    } 
}

importing it in MyProject.as, and then using it as

gamePanel.addChild(new TextWithImage());

to the same effect as my previous attempt.

What is the simplest way to display text in Flex/AS3? Any help is appreciated, and thank you in advance!

Upvotes: 0

Views: 260

Answers (1)

Organis
Organis

Reputation: 7316

There's a trick. Flex components, albeit having the same addChild method derived from DisplayObjectContainer class, cannot actually add regular Flash content - Shape, Sprite, MovieClip, TextField, Bitmap - directly. More to that, they don't produce any runtime error, which I personally think they totally could to not confuse new people.

Flex component can only addChild classes that extend the basic UIComponent class. At the same time, UIComponent can addChild regular Flash content. Thus you do it as following:

var proxyContainer:UIComponent = new UIComponent;
var txtHello:TextField = new TextField;

txtHello.text = "Hello World";
proxyContainer.addChild(txtHello);

gamePanel.addChild(proxyContainer);

Upvotes: 2

Related Questions