Category Actionscript

Something relatively simple to do: Create a textfield, load a stylesheet and then load some HTML. Easy peasy right?

Well no. Check out the following:
Onstage there is a textfield called contentText, lives in a MC called contentMain. contentMain lives on a layer that's masked as we're trying to use home made scrollbars. The mask MC's name is "maskedView". So nothing out of the ordinary there.

var scope:TextField = contentMain.contentText;

scope.multiline = true;

scope.wordWrap = true;

scope.html = true;

scope.selectable = true;

scope.autoSize = "center";

var my_styleSheet:StyleSheet = new StyleSheet();

function loadContent(){

var htmlPage:LoadVars = newLoadVars();

htmlPage.onData = function(htm:String):Void{

if(htm != undefined){

scope.htmlText = htm;

}else{

scope.text = "Error";

}

};

htmlPage.load("html/page_1.html");

}

function loadCSS(){

my_styleSheet.onLoad = function(success:Boolean){

if(success){

scope.styleSheet = my_styleSheet;

loadContent();

}

};

my_styleSheet.load("html/styles.css");

}

loadCSS();

stop();

The problem with this is that although it works fine the HTML text (and only the text, not the images) does not get displayed. At all. You can select the "empty" space where the text should be and a CTRL+C will allow you to actually copy the text but it does not get displayed.

After tearing my hair out on this for *ages* I discovered that flash (8 in this case) didn't like the fact that my MC was masked. I discovered this by accident though by deleting stuff left right and center to see what was up. After deleting the mask everything worked as expected - I had lovely CSS formatted HTML complete with aligned images. WHee!

So a wild stab in the dark, I put maskedView back on the stage, and added the following line: