Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to add script to draw fading lines on site

    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!

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You would need to use the setTimeout function and also the Tween 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.

  • #5
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok that makes sense... so what would the new code look like?

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    There are examples in the documentation I linked to. Try those first.

  • #7
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #10
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #11
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

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

  • #12
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

    Code:
    /* 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();
    };
    }
    }

  • #14
    New to the CF scene
    Join Date
    May 2008
    Location
    Miami, Florida
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •