Wait for one class to finish before running another

I have two classes I use to display text in a callout box:
[LIST]
[]Callout: draws a framed box on the stage
[
]Typewriter: takes text and renders it letter by letter inside the callout[/LIST]In my .FLA file, I load the text I want to display from an XML file. In the function that runs upon completion of loading the XML data, I instantiate a var that calls Callout, and then call a function that instantiates a var that calls Typewriter.

It works fine, except for this problem: Typewriter renders (types) the text onscreen BEFORE the framed box that is created by Callout appears.

How do I set up some kind of listener or something so that the Callout framed box appears BEFORE the text renders?

Here’s the code in my .FLA file:


var urlRequest:URLRequest = new URLRequest("myXMLFile.xml");
var step01XML:XML = new XML();
var step01T:String;
var tf:TextField = new TextField();
 
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, step01Complete);
urlLoader.load(urlRequest);
 
function step01Complete(e:Event):void {
 step01XML = XML(urlLoader.data);
 step01T = step01XML.STEP01.toString();
 tf.text = step01T; // textfield required for Typewriter
 var calloutStep01 = new Callout(10, 40, 200, 200); // position and size
 addChild(calloutStep01);
 display();
}
function display():void {
 var typeText = new Typewriter (step01T, tf, <other args>);
 tf.autoSize = TextFieldAutoSize.LEFT;
 addChild(tf);
}

Thanks!