How did they make this? 1

[Michels25]

Greetings,

I went to this website the other day and was perplexed by the effect in the text field. If you go to

http://www.webagent007.com/2003.htm

and scroll to the bottom where is says "enter your email address" that is an amazing effect! I've used the onSetFocus and onKillFocus functions before to remove text, but this is more advanced with the animation. Any help is much appreciated! Thank you.

Sincerely,
Jamie Michels

 

[wangbar]

Once the focus is set that's just playing around with the string length in the textbox. Here's a self-contained example, just put it in the first frame of a movie:

init = function () {
	//create text
	this.createTextField('email', 1, 50, 350, 200, 25);
	textString = "enter your mail address";
};
cutString = function () {
	this.onEnterFrame = function() {
		//cut last character off textString
		textString = textString.substring(0, textString.length-1);
		email.text = textString;
		if (!textString.length) {
			//if textString no longer has any characters left kill the function
			this.onEnterFrame = null;
		}
	};
};
//start things off
init();
email.text = textString;
//once the text field has focus begin losing the letters
email.onSetFocus = function() {
	cutString();
};
//
stop();

 

[Michels25]

Thank you very much for your help, I really appreciate it! I played around with the script a bit and was able to use the function with the onSetFocus. However I was unable to use the script with the onKillFocus function such as on that website. Such as clicking out of the bounds of the text field and having the text basically rewrite itself in the animated manner. I made and FLA to show you what I did.

http://www.thedarkcontent.com/email.fla

 

[wangbar]

Try this, you'll need to add some conditional stuff to take care of overwriting other content in the textbox etc but these two functions are the core of the animated text effect:

cutString = function () {
	var letterCount = textString.length;
	this.onEnterFrame = function() {
		letterCount--;
		email.text = textString.substring(0, letterCount);
		if (!email.text.length) {
			// this.onEnterFrame = null;
		}
	};
};
restoreString = function () {
	var letterCount = 1;
	this.onEnterFrame = function() {
		letterCount++;
		email.text = textString.substring(0, letterCount);
		if (email.text == textString) {
			this.onEnterFrame = null;
		}
	};
};
textString = "enter your email address";
email.text = textString;
email.onSetFocus = function() {
	cutString();
};
email.onKillFocus = function() {
	restoreString();
};
// 
stop();

 

[wangbar]

Oops - better uncomment the seventh line down...

 

[Michels25]

Thank you for taking the time to help me with this issue, your actionscripting helped me so much. If anyone needs the code with some conditional statements, it is below. I also added an extra line to the cutString function at the end. Thanks a million wangbar, you're brilliant.

cutString = function () { var letterCount = textString.length;this.onEnterFrame = function() {letterCount--;email.text = textString.substring(0, letterCount);if (!email.text.length) {this.onEnterFrame = null;}};};
restoreString = function () { var letterCount = 1;this.onEnterFrame = function() {letterCount++;email.text = textString.substring(0, letterCount);if (email.text == textString) {this.onEnterFrame = null;}};};
textString = "enter your email address";
email.text = textString;
email.onSetFocus = function() {
if (email.text == "enter your email address&quot {
cutString();
}
};
email.onKillFocus = function() {
if (email.text == "&quot {
restoreString();
}
};

Sincerely,
Jamie Michels

http://www.thedarkcontent.com