How to overlay text onto a movieclip object?

Question

I'm new to flash, actionscript, and the class/method/static/instance paradigm. I do have one class that I use, it loads a png file and adds it to the stage, I can then manipulate it with the mouse. What I want to do is add some text on top of the png file. When the user clicks and drags the png file around, I want the text to stick with it, basically make it part of the png, overlay it, combine them, group them, whatever.

Here is the class I am using to load the png.

package {

import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.*;
import flash.net.URLRequest;

public class element_icon extends MovieClip {
    public function element_icon(type) {
        var imageLoader:Loader = new Loader();
        var theURL:String = "images/" + type + ".png";
        var imageRequest = new URLRequest(theURL);
        imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
        imageLoader.load(imageRequest);



        function onIOError(e:IOErrorEvent):void{
            var theURL:String = "images/default.png";
            var imageRequest = new URLRequest(theURL);
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            imageLoader.load(imageRequest);
        }

        function onComplete(evt:Event) {
            addChild(imageLoader.content);

        }
    }
}
}

Answer 1

My answer is essentially the same as Nathan Ostgard, but my answer has the completed class as follows(I rewrote a lot of your class to adhere to common coding conventions as well as improving overall readability):

package 
{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.events.IOErrorEvent;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.events.MouseEvent;

    public class ElementIcon extends MovieClip 
    {
        private var _bitmap:Bitmap;
        private var _name:String;
        private var _textField:TextField;

        private const DEFAULT_URL:String = "images/default.png";

        public function ElementIcon(name:String) 
        {
            _name = name;

            init();

        }// end function

        private function init():void
        {
            _textField = new TextField();

            loadImage();

            addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

        }// end function

        private function loadImage():void
        {
            var url:String = "images/" + _name + ".png";
            var loader:Loader = new Loader();
            loader.load(new URLRequest(url));
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onLoaderIOError);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

        }// end function

        private function onLoaderIOError(e:IOErrorEvent):void
        {
            var loader:Loader = new Loader();
            loader.load(new URLRequest(DEFAULT_URL));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

        }// end function

        private function onLoaderComplete(e:Event):void
        {
            _bitmap = e.target.content as Bitmap;

            build();

        }// end function

        private function build():void
        {
            addChild(_bitmap);

            _textField.text = _name;
            _textField.x = (this.width/2) - (_textField.textWidth/2)
            _textField.y = 5;
            _textField.selectable = false;
            addChild(_textField);

        }// end function

        private function onMouseDown(e:MouseEvent):void
        {
            startDrag();

        }// end function

        private function onMouseUp(e:MouseEvent):void
        {
            stopDrag();

        }// end function

    }// end class

}// end package

You can implement is as follows:

var elementIcon:ElementIcon = new ElementIcon("Image1");
addChild(elementIcon);

[UDPDATE]

The following is a screenshot of the application being run(sorry I couldn't make a gif file so you could see the ElementIcon object being dragged, but I assure you that you can drag it):

Answer 2

You should create a Sprite and add both the text and the bitmap to that:

function onComplete(evt:Event) {
  var text:TextField = new TextField;
  text.autoSize = TextFieldAutoSize.LEFT;
  text.text = 'Hello, world!';

  var sprite:Sprite = new Sprite;
  sprite.addChild(imageLoader.content);
  sprite.addChild(text);

  addChild(sprite);
}

If you would like to render the text into the bitmap, you can do that too:

function onComplete(evt:Event):void {
  var text:TextField = new TextField;
  text.autoSize = TextFieldAutoSize.LEFT;
  text.text = 'Hello, world!';

  var bitmap:Bitmap = imageLoader.content as Bitmap;
  bitmap.bitmapData.draw(text);
  addChild(bitmap);
}