ActionScript 2: make text fade

hankknight
hankknight used Ask the Experts™
on
I use Flash / ActionScript 2 to load formatted text from an external file.

How can I make the text fade in slowly instead of just abruptly appear?
import TextField.StyleSheet;
txtOutput_mc.txtOutput.autoSize = true;
onDataVarsLoaded = function(raw){
	var myCSS:StyleSheet = new StyleSheet();
	myCSS.setStyle("h1", {fontSize:'29',color:'#595351'});
	myCSS.setStyle("p", {fontSize:'16'});
	myCSS.setStyle("a:link", {textDecoration:'underline'});
	myCSS.setStyle("a:hover", {color:'#C81814'});
			
	txtOutput.styleSheet = myCSS;
	txtOutput.htmlText = raw;
	
	}

var dataVars:LoadVars = new LoadVars();
dataVars.onData = onDataVarsLoaded;
var pagetext=pagetext;
dataVars.load(pagetext);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
first, the textfield must be using embedded fonts.  i think you already are doing that (if memory serves from the last time i participated in one of your AS questions).

then, you can use any number of tween engines - or the built-in Adobe tween.  you could do something like this:
import TextField.StyleSheet;
txtOutput_mc.txtOutput.autoSize = true;
onDataVarsLoaded = function(raw){
	var myCSS:StyleSheet = new StyleSheet();
	myCSS.setStyle("h1", {fontSize:'29',color:'#595351'});
	myCSS.setStyle("p", {fontSize:'16'});
	myCSS.setStyle("a:link", {textDecoration:'underline'});
	myCSS.setStyle("a:hover", {color:'#C81814'});
			
	txtOutput_mc._alpha = 0;  // set it to 0% opacity to start...

	txtOutput.styleSheet = myCSS;
	txtOutput.htmlText = raw;
	
	new mx.transitions.Tween(txtOutput_mc, "_alpha", mx.transitions.easing.Elastic.easeOut, 0, 100, 1, true);  // fde it in over 1 second
	}

var dataVars:LoadVars = new LoadVars();
dataVars.onData = onDataVarsLoaded;
var pagetext=pagetext;
dataVars.load(pagetext);

Open in new window

Author

Commented:
Thanks for the help, moagrius.

Unfortunately the text does not fade.
textTest.zip
Commented:
in this one, you don't have txtOutput_mc defined at all - i assumed you did from line 2 and your previous questions.

you can fade the textfield directly, though, by just using "txtOutput" instead of "txtOutput_mc" in all cases.

working snippet attached.
import TextField.StyleSheet;
txtOutput_mc.txtOutput.autoSize = true;
onDataVarsLoaded = function(raw){
	var myCSS:StyleSheet = new StyleSheet();
	myCSS.setStyle("h1", {fontSize:'29',color:'#595351'});
	myCSS.setStyle("p", {fontSize:'16'});
	myCSS.setStyle("a:link", {textDecoration:'underline'});
	myCSS.setStyle("a:hover", {color:'#C81814'});
			
	txtOutput._alpha = 0;  // set it to 0% opacity to start...

	txtOutput.styleSheet = myCSS;
	txtOutput.htmlText = raw;
	
	new mx.transitions.Tween(txtOutput, "_alpha", mx.transitions.easing.Elastic.easeOut, 0, 100, 10, true);  // fde it in over 1 second
	}

var dataVars:LoadVars = new LoadVars();
dataVars.onData = onDataVarsLoaded;
var pagetext="test.html"
dataVars.load(pagetext);

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial