...

View Full Version : Need to add script to draw fading lines on site



DangeRuss
05-09-2008, 05:56 PM
Hello, I am pretty new to flash myself, I am Systems Engineer but I tinker with playing around in Flash and web design stuff... Basically I came upon a script that I think is great and what it does is allow a person to be able to draw lines on a website with the mouse by holding down the mouse right click button as if you were dragging something... Its a cool feature and it gets people to stick around your site longer... What I want to do is modify the script a little in order to make the line eventually fade away slowly... Ive seen this on other sites, I just don't remember where and I don't know how to do it!
You can see the script I'm talking about on a site I just threw up on one of my test domains on a flash template I modified... www.WeCanHackYou.com... Enter the site and you will then see that you can draw blue lines all over! Here is the script...

this.createEmptyMovieClip("drawing_mc",this.getNextHighestDepth());

this.onMouseDown = function() {
drawing_mc.lineStyle(5,0x00099);
drawing_mc.moveTo(_xmouse,_ymouse);
onMouseMove = function() {
drawing_mc.lineTo(_xmouse,_ymouse);
}
}

this.onMouseUp = function() {
onMouseMove = noLine;
}


Can anyone please tell me what I have to add or modify in order to make the lines slowly fade away?? Thanks! That would help a lot!

gnomeontherun
05-12-2008, 04:38 AM
You would need to make a timeout function that would reduce the visibility of the line until it was 0% visible (alpha property) and then remove it from the stage.

DangeRuss
05-12-2008, 08:00 AM
Yes I understand that much... However I dont know what code I would add to that to make it do that... Would you know what code Id have to write in that script to make it do that? As I said I am very new to Flash programming... I am only beginning. Thanks it would be greatly appreciated!
Russ

gnomeontherun
05-12-2008, 08:16 AM
You would need to use the setTimeout (http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001218.html)function and also the Tween (http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001502.html)class to make it fade out. The documentation for these are on different versions, but Flash 8 forgot to put the setTimeout function in the docs. Make sure to read the comments on the setTimeout.

DangeRuss
05-12-2008, 03:45 PM
Ok that makes sense... so what would the new code look like?

gnomeontherun
05-12-2008, 04:18 PM
There are examples in the documentation I linked to. Try those first.

DangeRuss
05-12-2008, 05:57 PM
Ok.. Sorry I didnt even notice those were links. I will check them out! I really appreciate your help. I am learning Flash and actionscript and I am really enjoying it! Thanks a lot!

gnomeontherun
05-12-2008, 07:03 PM
No problem, stop by anytime. You may have trouble getting them to work with your application, since I always find the documentation that Adobe provides to be...a bit sparse in clarity.

Also I recommend to anyone serious about learning AS and Flash to just get a book. Online tutorials and things are usually only helpful for basics or for specific tasks. A book will teach you everything from the ground up.

DangeRuss
05-12-2008, 07:04 PM
Ok, I checked it out and read on it, but I am still now sure how to write it... I dont know where to put it in the script wither...

DangeRuss
05-12-2008, 07:05 PM
yes I just got a book over the weekend and am reading it constantly. That site I showed you is my domain Ive just been messing with and testing out my knowledge. So far its really interesting stuff. My main field is System Engineering and Administration Security. So web stuff is pretty new to me!

gnomeontherun
05-12-2008, 07:07 PM
You would probably put it next to the code you posted above.

It would go something like this (in brief). DO NOT USE THIS CODE, just use the structure. You will put the setInterval command first, and then it will call a function that you write below it which has a Tween inside.


var interval setInterval(...);
intervalFunction() {
fadeout:Tween = new Tween(....);
}

DangeRuss
05-14-2008, 12:44 AM
I am still lost to be honest... I have no idea how to implement that code into my code to make it work... I have so much more to learn!

gnomeontherun
05-14-2008, 07:30 AM
Yes, its not just something that you can plug and play always. Did you write the code you posted in the first post? If not that would explain why this is confusing.

Ok here is the code explained as clearly as I can. This snippet of code will allow any flash player to add drawing lines to the movie, and they will fade out after a short period of time.

First two lines are about importing code libraries for Flash. Just need them at the top of the first frame's actionscript.

Then we use the same code until the onMouseUp. We add a setTimeout function which will leave the drawn line for 2000 milliseconds (2 seconds) and then call the removeLine function.

The removeLine function starts a fading Tween effect. I will explain the 7 things in the function quickly. It is applied to 'drawing_mc' with the property of '_alpha', it fades with the style of Strong.easeOut, it starts at 100 visibility and fades to 0, it does this in 1 second, and the true means we are using seconds instead of frames.

Then we set a listener, using onMotionFinished, which then deletes the line from the stage completely. Otherwise it is just fully invisible.

I tested the code with AS2.



/* These lines go at the first frame of the root timeline */
import mx.transitions.Tween;
import mx.transitions.easing.*;

this.createEmptyMovieClip("drawing_mc",this.getNextHighestDepth());

this.onMouseDown = function() {
drawing_mc.lineStyle(5,0x00099);
drawing_mc.moveTo(_xmouse,_ymouse);
onMouseMove = function() {
drawing_mc.lineTo(_xmouse,_ymouse);
}
}

this.onMouseUp = function() {
onMouseMove = noLine;

var timedProcess:Number = setTimeout(removeLine, 2000);

function removeLine () {
var tween_handler:Object = new Tween(drawing_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);
tween_handler.onMotionFinished = function() {
drawing_mc.clear();
};
}
}

DangeRuss
05-16-2008, 03:28 PM
WOW! It works pretty well! The only thing Im noticing is that for some reason, only the first line stays for a few seconds, every line after doesnt even show up, then after a second it finally does but it goes away very very quickly... I am uploading it to my site so you can see what I mean. www.WeCanHackYou.com. Thanks!
Russ

gnomeontherun
05-16-2008, 03:47 PM
Well this is because the script only handles one movieclip at a time. If you want each line to individually fade, you will have to restructure the code so that it makes a separate movieclip for each. Currently every line drawn is actually put into the same movieclip, and that is the problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum