letter effects

[joeri]

Hi out there!!

I've a question about the letter effect on the following site : http://www.kazsh.com/
How the f*ck did they do that?????
I think actionscript is the way to go but how?

Predefined words enter the screen, follow the path
your mouse followed and finally arive at the place to be with a blurring/transforming effect........

thanx, Joeri([email protected])

[wangbar]

Here's some code which is a quick and dirty approximation of the effect. I just did this and it could do with some optimisation but the principle is the same and it should give you some clues.

You'll need to create two clips on the stage - the first one is an empty dynamic textbox to contain a single letter of your text (give it the variable name "letter") and convert it to a movieclip with the instance name "emptyBox".

Then create another, dummy, clip so you can attach this code...

onClipEvent (load) {
// set up text string
text = " Whatever text you want to display on the screen, the more the better but it's boring to type...";
spacing = 6;
count = 1;
speed = 3;
// create a clip for each letter, fill it and set its eventual end point on the screen
for (i=1; i<text.length; i++) {
duplicateMovieClip (_root.emptyBox, "type"+i, i);
_root["type"+i].letter = text.charAt(i);
_root["type"+i].xTarget = spacing*i;
_root["type"+i].yTarget = 100;
_root["type"+i]._visible = false;
}
}
onClipEvent (mouseMove) {
// display the letters as the mouse is moved
if (count<text.length) {
_root["type"+count]._visible = true;
_root["type"+count]._x = _root._xmouse;
_root["type"+count]._y = _root._ymouse;
count++;
}
}
onClipEvent (enterFrame) {
// move each clip towards it's home position on the screen
for (i=1; i<=count; i++) {
xMove = (_root["type"+i].xTarget-_root["type"+i]._x)/speed;
yMove = (_root["type"+i].yTarget-_root["type"+i]._y)/speed;
_root["type"+i]._x += xMove;
_root["type"+i]._y += yMove;
}
}

Everytime you move the mouse, text from your string should appear and move across the screen to form a sentence. The code slows down a bit as more clips enter the screen so you'll have to play with it to make it slicker if you want to add the kind of extra movement on kazsh.com.

Set the movie framerate as high as you can to keep things as smooth as possible.

[Billy T]

nice effect

[wangbar]

This runs quicker and takes out some of the repetitive stuff in the last post:

onClipEvent (load) {
// set up text string and varibles
text = "Whatever text you want to display on the screen ... blah blah blah blah blah blah blah blah";
spacing = 5;
count = 1;
speed = 3;
screenPosition = 100;
static = 1;
}
onClipEvent (mouseMove) {
// display the letters as the mouse is moved
if (count<=text.length) {
duplicateMovieClip (_root.empty, "type"+count, count);
clip = _root["type"+count];
clip.letter = text.charAt(count-1);
clip.xTarget = spacing*count;
clip._x = _root._xmouse;
clip._y = _root._ymouse;
count++;
}
}
onClipEvent (enterFrame) {
// move each clip towards it's home position on the screen
for (i=static; i<=count; i++) {
clip = _root["type"+i];
// does clip have to be moved or is it in place?
if (clip._x == clip.xTarget && clip._y == screenPosition) {
// increment the loop start point to save processor time
static++;
} else {
xMove = (clip.xTarget-clip._x)/speed;
yMove = (screenPosition-clip._y)/speed;
clip._x += xMove;
clip._y += yMove;
}
}
}

[wangbar]

This runs quicker and takes out some of the repetitive stuff in the last post:

onClipEvent (load) {
// set up text string and varibles
text = "Whatever text you want to display on the screen ... blah blah blah blah blah blah blah blah";
spacing = 5;
count = 1;
speed = 3;
screenPosition = 100;
static = 1;
}
onClipEvent (mouseMove) {
// display the letters as the mouse is moved
if (count<=text.length) {
duplicateMovieClip (_root.empty, "type"+count, count);
clip = _root["type"+count];
clip.letter = text.charAt(count-1);
clip.xTarget = spacing*count;
clip._x = _root._xmouse;
clip._y = _root._ymouse;
count++;
}
}
onClipEvent (enterFrame) {
// move each clip towards it's home position on the screen
for (i=static; i<=count; i++) {
clip = _root["type"+i];
// does clip have to be moved or is it in place?
if (clip._x == clip.xTarget && clip._y == screenPosition) {
// increment the loop start point to save processor time
static++;
} else {
xMove = (clip.xTarget-clip._x)/speed;
yMove = (screenPosition-clip._y)/speed;
clip._x += xMove;
clip._y += yMove;
}
}
}

[Billy T]

that just made duplicates of the clip that I applied the code to...

[wangbar]

Yeah, I should have said that you need to have the same set-up as before with the textbox movieclip "empty" etc. Otherwise the control clip just duplicates itself because it's got nowhere else to go.

If you just replace the first script directly with the second one it should work fine - keep the frame rate up too for smoother execution.

[Billy T]

the movieclip was called "emptyBox" in the earlier one - thats why it didnt work.

thanks

[wangbar]

Aha, Just me being thick then. Really should read my own scripts from time to time

[JoElAtHaN]

That is a nice effect but the issue still remains with the speed in which the letters appear. I know that this uses multiple clips for motion blurr, but I cannot figure out the way it rolls in so smoothly. I have a p3 and a p166 and the text on kazsh rolls out in them both just as fast. I've bee searching high and low to figure out how this is done to no avail...

Its as if its an illuminati secret or something. Any ideas, opensource, tutorial would be much appreciated.