PDA

View Full Version : letter effects


joeri
11-19-2001, 01:21 PM
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
11-19-2001, 03:48 PM
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
11-20-2001, 04:35 AM
nice effect:D

wangbar
11-20-2001, 12:14 PM
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
11-20-2001, 01:02 PM
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
11-20-2001, 11:46 PM
that just made duplicates of the clip that I applied the code to...

wangbar
11-21-2001, 07:42 AM
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
11-21-2001, 09:13 AM
the movieclip was called "emptyBox" in the earlier one - thats why it didnt work.

thanks

wangbar
11-21-2001, 09:24 AM
Aha, Just me being thick then. Really should read my own scripts from time to time :D

JoElAtHaN
11-22-2001, 02:02 PM
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.

JoElAtHaN
11-22-2001, 02:10 PM
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.

JoElAtHaN
11-24-2001, 04:05 AM
Nevermind, figured it out I think...

it sure took a while tho (http://www.joelathan.com/motion.swf)

Does this look right to y'all?

Billy T
12-02-2001, 10:51 PM
is the text blurred at all as it comes in?

JoElAtHaN
12-06-2001, 01:35 AM
No... I would like it to though.

I was trying this a different way as well, this code was applied to mc instance:

onClipEvent (load) {
objSpeed = 3;
initObjSpeed = objSpeed;
}

onClipEvent (enterFrame) {
// test of movement code
objMove = objSpeed*(_xscale/100);
//not sure what this line does
_x += Math.cos(Math.PI/180)*objMove;

// boundary check
if (_x >= 450) {
_x = -50;
}
updateAfterEvent();

I was also wondering how I would make a while loop within this code in the boundary check (a la i++) so taht it runs through the loop say.. 5 times and then stops at _x = 225. Any ideas?

Any help would be appreciated...

ACtionsplash
12-09-2001, 10:50 AM
:)

JoElAtHaN
12-10-2001, 03:12 PM
I dont know if your laughing at me or what, but I'm the newest of the newbies when it comes to actionscript. I'm trying to figure this on my own without any kind programming background so keep your mouse of the smilies legend.

If your not laughing... well then... have a nice day...

ijsman
12-11-2001, 08:03 AM
Couldn't it be feasible that they are not using text variables but just graphic symbols? that would be real easy to blut and since they're so small they don't take up much space. just a thought

JoElAtHaN
12-11-2001, 08:37 PM
Originally posted by ijsman
Couldn't it be feasible that they are not using text variables but just graphic symbols? that would be real easy to blut and since they're so small they don't take up much space. just a thought

They definately are, the blur is done in Photoshop.