group94 textfield effect

[image]

Does anybody know's how to do that nice effect in the textfield at group94 website (www.group94.com)

Cheers :)

[pixelwit]

To me it looks like this:createTextField("my_tf", 10, 100, 100, 350, 200);
my_tf.wordWrap = true;
my_st = "Curie, Marie\r(1867-1934) b. Warsaw, Poland (née Maria Sklodowska)\r\rHumanity needs practical men, who get the most out of their work, and, without forgetting the general good, safeguard their own interests. But humanity also needs dreamers, for whom the disinterested development of an enterprise is so captivating that it becomes impossible for them to devote their care to their own material profit. \r\rWithout doubt, these dreamers do not deserve wealth, because they do not desire it. Even so, a well-organized society should assure to such workers the efficient means of accomplishing their task, in a life freed from material care and freely consecrated to research.";
step = 30;
onEnterFrame = function(){
var nowStep = Math.min(step, my_st.length)
var stringChunk = my_st.substr(-nowStep);
my_st = my_st.slice(0, -nowStep);
my_tf.text = stringChunk+my_tf.text;
if(my_st.length<1){
onEnterFrame = null;
}
}They might have thrown some easing into the "step" variable but I can't really tell.

-PiXELWiT
http://www.pixelwit.com

[jaredly]

Here is what I did. You can change the timeing to get the speed you want.

stop();

content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam aliquam erat volutpat. Ut wisi at vero eros et accumsan enim ad minim veniam, quis nostrud exerci. Augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.";

createTextField("display_tf", 1, 0, 0, 550, 400);
display_tf.wordWrap = true;

from = content.length;

setInterval(spill, 0001);

function spill() {
if (from>0) {
from -= 50;
to = content.length;
display_tf.text = content.substring(from, to);
trace(from);
trace(to);
}
}

Let me know what you think. :)

[stevenvanwel]

Has any body find out how to apply easing?!

[gabe89]

Is it possible to apply this effect to text I load in from a .txt file that used html? First I load the text file then I need to put it into 'my_st'? Any help would be much appreciated. Thanks


stop();

loadText = new loadVars();
loadText.load("testContent.txt");
loadText.onLoad = function(success) {
if (success) {
createTextField("newsBox", 1, 1, 1, 400, 400);
newsBox.html = true;
//newsBox.htmlText = this.myNews; THIS IS HOW IT WORKED BEFORE WITHOUT THE EFFECT
newsBox.wordWrap = true;
//my_st = this.myNews; THIS IS HOW I THOUGHT I COULD SET IT UP
}
};

//EXAMPLE TEXT
my_st = "Curie, Marier(1867-1934) b. Warsaw, Poland (née Maria Sklodowska)\r\rHumanity needs practical men, who get the most out of their work, and, without forgetting the general good, safeguard their own interests. But humanity also needs dreamers, for whom the disinterested development of an enterprise is so captivating that it becomes impossible for them to devote their care to their own material profit. \r\rWithout doubt, these dreamers do not deserve wealth, because they do not desire it. Even so, a well-organized society should assure to such workers the efficient means of accomplishing their task, in a life freed from material care and freely consecrated to research.";


step = 10;
onEnterFrame = function(){
var nowStep = Math.min(step, my_st.length)
var stringChunk = my_st.substr(-nowStep);
my_st = my_st.slice(0, -nowStep);
newsBox.text = stringChunk+newsBox.text;
if(my_st.length<1){
onEnterFrame = null;
}
}

[gabe89]

No one has any idea?

[Subwaydesigns]

Seems to work from here... I'm using it like this

Frame 1:

stop();
loadText = new loadVars();
loadText.load("text.txt");
loadText.onLoad = function(success) {
if (success) {
play();
my_st = this.mytext;
}
};


With loading text or movie or whatever

Frame 2:

step = 30;
onEnterFrame = function () { var nowStep = Math.min(step, my_st.length);var stringChunk = my_st.substr(-nowStep);my_st = my_st.slice(0, -nowStep);tf.text = stringChunk+tf.text;if (my_st.length<1) {onEnterFrame = null;}};
stop();


With the tf text field...

in action: http://www.subwaydesigns.net/Ploit/text.html


-s.

[gabe89]

That seems to work, but it will not accept html code in the .txt file. I'm using MX and trying to use a <font> tag in the .txt file.

So it does load the text, and the effect works, but then it displays the font tag instead of using it to format the text.

[Subwaydesigns]

ah I see... I misunderstood your post. Anyway getting the html tags to work is over my head... so can't help you with that, sorry =/

[gabe89]

that's ok, thank you for your feedback. maybe it's just not possible :)

[jsam]

That seems to work, but it will not accept html code in the .txt file. I'm using MX and trying to use a <font> tag in the .txt file.

So it does load the text, and the effect works, but then it displays the font tag instead of using it to format the text.

Hi,


try like this,
Inside the .txt file

myNews= This is <font size="19" face="verdana">simple sample for font tag </font>test.

Let me know , if it works..

Jsam...

[gabe89]

Yes Jsam, that is what I tried, the text loaded in fine, but the html code was visible in the text and therefore did not format the text at all. So in your example, this is what you would see when you ran the movie:

This is <font size="19" face="verdana">simple sample for font tag </font>test.

[Subwaydesigns]

ok - so I found a work around for the HTML

WARNING: it's ugly.

First off, take the html tags out of your original text file.
Just add an action at the end of the code:

function () {
var nowStep = Math.min(step, my_st.length);
var stringChunk = my_st.substr(-nowStep);
my_st = my_st.slice(0, -nowStep);
tf.text = stringChunk+tf.text;
if (my_st.length<1) {
onEnterFrame = null;
overalphamc._visible = true;
tf.text = "";}
}

And then create an mc (overalphamc) - put an onLoad{this._visible = false;} on it. Place it exactly on top of your textfield. Then use loadVars to load ANOTHER text file - this one with the html tags, without the effect - into this mc. Once the animation is done, it will make the text disappear and make the mc visible. Since the mc overlaps the textfield, you shouldn't see any difference.

Of course, this means having two files. I'm planning on getting a php CMS so the user can update the text without editing two files (using ereg_replace to get rid of the html tags). Unless there's a way to find and delete the html tags in a text file from inside flash that's not too cpu intensive.

Told you it was ugly :)

[smacklemore]

Hi all,

I've been digging on group94 for a while now. Did you guys notice that when you click on a new item the old text turns grey, is pushed to the bottom and gradually is deleted?

That's a whole other level of coolness that I would have never noticed if this thread hadn't been started. So thanks.

Of course I have no idea how they did it. Magic I guess.

[Dr Warm]

Magic I guess I like it!

[neo14]

hey there,

does anybody know how i can start the text with a button?
so i have 3 buttons and 3 different text (everyone in a seperate txt-fiel)

onLoad text_1 runs down.
if i press button_2, text_1 should be the "old text" and text_2 runs from the top.

clear?

[nessie74]

Seems to work from here... I'm using it like this

Frame 1:

stop();
loadText = new loadVars();
loadText.load("text.txt");
loadText.onLoad = function(success) {
if (success) {
play();
my_st = this.mytext;
}
};


With loading text or movie or whatever

Frame 2:

step = 30;
onEnterFrame = function () { var nowStep = Math.min(step, my_st.length);var stringChunk = my_st.substr(-nowStep);my_st = my_st.slice(0, -nowStep);tf.text = stringChunk+tf.text;if (my_st.length<1) {onEnterFrame = null;}};
stop();


With the tf text field...

in action: http://www.subwaydesigns.net/Ploit/text.html


-s.


I like what you done but i can get it to work i´m a newbee so i wonde if you could send me the .fla file ? - pleace ! :)

[Subwaydesigns]

I already sent the fla file in response to your email, but anyway I'm going to upload it since that doesn't seem to work.

www.subwaydesigns.net/Ploit/text.fla

[nessie74]

Thank you ;)

And i wonder if you know hov to make buttons to change text?
i made one but then the text loads one top of the firs text .And that is cool if you have news and you loade new news whith a next button. Can you make a next button? You understand when you see my .fla .If you have time i would be happy . An i figur out how you´r able to read the text in HTML so you can use links.


/M

[neo14]

hey,

how does it work with an external xml-file as content?

thanks.

[john_the_greek]

I modified the original code posted in this thread. This code adds some ad-hock easing (good enough for the purpose), and also kills the "setInteval" call.

I've tested it on larger amonts of text down to a few words, and the easing effect works and is noticable.

I'm sure this can be imporoved further.

Just giving something back to the community! Enjoy.
____________________________


contents = "any amount of text goes here"
to = contents.length;
from = to;

var intervalID;
intervalID = setInterval(spill, 40); //40 milliseconds works well for movies at 25 frames per second

function spill() {
if (from>1) {
from = Math.floor(from * .70); //Here is the easing-higher the factor, the slower it is
anyTextbox.text = contents.substring(from, to);
} else {
anyTextbox.text = contents;
trace("done")
clearInterval( intervalID ); //kill the routine
}
};

stop();

[sonic393]

it's actually a little different from what i saw here allready... the correct way to achieve the effect is as follows : (intermediate level)

1) you have to make a MC with at least 3 layers, 4 is better (for viewing)
2) the first layer will be only actionscript.The second is a label-layer (to "speak" to the MC from anywhere else in the movie)
3) th third layer contains an enmpty MC wich holds an "onClipEvent (load)" and a "onClipEvent (enterFrame)" event. The fourth layer contains the actual dynamic textfield.

I would include an image, but i don't see an image upload field...

The MC has 11 frames.

The actionscript for frame 1 :

function iNIT(tXT) {
if (tXT.length > 0) {
this.tXT = tXT;
fST = Math.round(tXT.length / 5);
gotoAndStop(3);
play();
}
vALUE = "";
}
stop();


The actionscript for frame 3 :


play();


The actionscript for frame 5 :


vALUE = ""; // vALUE is the Variable name of the txt field


The actionscript for frame 7 :


vALUE = "_";


The actionscript for frame 9 :


stop();


The actionscript for frame 10 :


play();


The actionscript for frame 11 :


if (tXT.length > vALUE.length) {
vALUE = tXT.substring(0, (vALUE.length + 2)) + " _";
prevFrame();
} else {
vALUE = tXT;
stop();
}



That's it for the actionscripting on the layer...

Now for point 3. The empty MC on the third layer.

On frame 9(only that one) you put an empty MC, with the following code on the MC itself(not the layer)


onClipEvent (load) {
cNT = 0;
}
onClipEvent (enterFrame) {
if (cNT < 4) {
cNT++;
_parent.vALUE = _parent.tXT.substr(0, cNT * _parent.fST) + " __";
} else {
_parent.nextFrame();
}
}


Thats it for the scripting part...

Greetz

PS : you "call" the effect by iNIT("your text here")

[jaredly]

Not to be rude but that looks more complicated than it has to be. Can you make it all happen on one frame like the examples above? I like to keep all of my actionscript in one place. Makes life easier :)

[Taff]

Sonic,
does that code overwrite the previous text in the same way as the example does?

I actually think the exact effect will be easy enough to acheive using your code Jared. Ill take 50 lines and an hour or so to play this evening please.

cheers,
Taff

[jrk_productions]

To make your text read html instead of displaying the <b></b> etc, have you tried using .htmlText instead of just .text? Either I am stupid because you have allready thought of that, or I am a genious!