A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Paint Splatter Writing

  1. #1
    Registered User
    Join Date
    Jan 2015
    Posts
    1

    Question Paint Splatter Writing

    I am hoping that a more experienced flash developer can help with a mouse/cursor affect in flash. The affect can be checked out here: http://www.motocms.com/flash-templat...preview/28980/

    The one thing I'd like to know how to do/replicate is the paint splatter writing affect when you mouse over the swf. The reversed code is difficult to follow so was hoping for a little guidance/advice or even a stand alone solution.

    I appreciate your answer in advance!

  2. #2
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Hi,

    I made my own version, albeit not being as refined and good as the original one, but it works.

    DOWNLOAD IT HERE

    If we look past all the unnecessary extra stuff, in its simplest form, to achieve the paint splatter-like cursor trail, you can look at this code:

    PHP Code:
    var mc:MovieClip createEmptyMovieClip("mc"0);
    X1 _xmouse;
    Y1 _ymouse;

    onMouseMove = function(){
        
    X2 _xmouse;
        
    Y2 _ymouse;
        
        
    diffX X2 X1;
        
    diffY Y2 Y1;
        
        
    diff Math.sqrt((diffX*diffX)+(diffY*diffY));
        
        
    mc.lineStyle(100/diff0xFFFFFF50);
        
    mc.moveTo(X1Y1);
        
    mc.lineTo(X1+diffXY1+diffYX2Y2);
        
        
    X1 X2;
        
    Y1 Y2;
        
        
    updateAfterEvent();

    Let's break this code apart and look at this step by step:

    Code:
    var mc:MovieClip = createEmptyMovieClip("mc", 0);
    We dynamically create a new Empty MovieClip with the instance name mc. This movieclip will contain the actual splatter effect.

    Code:
    X1 = _xmouse;
    Y1 = _ymouse;
    We store the initial X and Y mouse coordinates of our cursor.

    Code:
    onMouseMove = function(){
    This function is executed whenever we move our cursor/move -- alternatively, you could use the onEnterFrame function.

    Code:
    	X2 = _xmouse;
    	Y2 = _ymouse;
    What this does is that it stores the X and Y coordinates of your cursor again AFTER the cursor/mouse has moved again. The variables X1 and Y1 we made earlier are used to store our initial mouse coordinates. X2 and Y2 are used to store the next mouse coordinates AFTER our cursor has moved from its initial spot. We will then utilize the difference between these two coordinates, and draw a straight line between them. The greater the difference between the coordinates, the longer the line. If the difference is minimal, the line will be so small that it will appear as a circle.

    Code:
    	diffX = X2 - X1;
    	diffY = Y2 - Y1;
    	
    	diff = Math.sqrt((diffX*diffX)+(diffY*diffY));
    This is how we calculate the difference. We first calculate the difference between the X coordinates and then the Y coordinates, and then use Pythagoras' theorem to calculate the actual difference between the before and after X and Y coordinates of our mouse/cursor.

    Code:
    	mc.lineStyle(100/diff, 0xFFFFFF, 50);
    	mc.moveTo(X1, Y1);
    	mc.lineTo(X2, Y2);
    The first line here only defines the actual style of the line, that its color should be white (0xFFFFFF), which means you'll need a dark background to see the effect. 50 defines the opacity/alpha of our line, which I've set to half of the full (100). However, the most interesting part here is the first parameter, which defines the thickness of your line, and I've defined it as 100/diff. What this does, is that when the difference between the coordinates is small, the line will be THICK, but when the distance is great, the line will be SMALL. In other words, it's the opposite -- BIG distance gives SMALL line, SMALL distance gives BIG line. To achieve this, we use the mathematic function 1/x, which gives us exactly what we want -- however, we multiply it by 100. You can change the number 100 to whatever you want to, just experiment with it

    The second line set the starting point for the line to be drawn, which is at our initial X and Y mouse coordinates (X1 and Y1), and then in the last line, it draws the line to our current X and Y mouse coordinates (X2 and Y2).

    Code:
    	X1 = X2;
    	Y1 = Y2;
    We then set the old X and Y coordinates (X1 and Y1) to that of our current X and Y coordinates (X2 and Y2). This is to refresh the coordinates repeatedly.

    Code:
    	updateAfterEvent();
    Finally, this forces the function to operate at the framerate of your mouse/cursor instead of being limited to your custom-set framerate, which might otherwise be slow.

    I tried improving the effect to be more like the original one, but I kinda put it on hold, and never got any further with it, so I thought I should post what I got here instead of not posting anything at all -- so I hope this helps
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  3. #3
    Senior Member realMakc's Avatar
    Join Date
    Oct 2002
    Posts
    927
    unfortuately last flash no longer compiles as2
    who is this? a word of friendly advice: FFS stop using AS2

  4. #4
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Quote Originally Posted by realMakc View Post
    unfortuately last flash no longer compiles as2
    Are you kidding me? That saddens me Oh well, I'll just hope OP has Flash CS6 or lower then.
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  5. #5
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Actually, I took the liberty of rewriting the script into AS3, so here ya go if it helps, lol

    - AS3 -

    PHP Code:
    import flash.display.Shape;
    import flash.events.MouseEvent;

    var 
    mc:Shape = new Shape();
    addChild(mc);

    var 
    X1:Number mouseX;
    var 
    Y1:Number mouseY;

    stage.addEventListener(MouseEvent.MOUSE_MOVEdrawTrail);

    function 
    drawTrail(e:MouseEvent):void {
        
        var 
    X2:Number mouseX;
        var 
    Y2:Number mouseY;
        
        var 
    diffX:Number X2 X1;
        var 
    diffY:Number Y2 Y1;
        
        var 
    diff:Number Math.sqrt((diffX*diffX)+(diffY*diffY));
        
        
    mc.graphics.lineStyle(100/diff0xFFFFFF.5);
        
    mc.graphics.moveTo(X1Y1);
        
    mc.graphics.lineTo(X2Y2);
        
        
    X1 X2;
        
    Y1 Y2;
        

    Remember to change the background color to something dark!
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  6. #6
    Senior Member realMakc's Avatar
    Join Date
    Oct 2002
    Posts
    927
    Quote Originally Posted by Nig 13 View Post
    Are you kidding me?
    Not at all, AS2 was dropped since 2012 (gotta love the title).
    who is this? a word of friendly advice: FFS stop using AS2

  7. #7
    Senior Member realMakc's Avatar
    Join Date
    Oct 2002
    Posts
    927
    Quote Originally Posted by Nig 13 View Post
    Actually, I took the liberty of rewriting the script into AS3...
    ...and I took the liberty of posting it online where you could easily modify it and experiment furhter: http://wonderfl.net/c/eCqU/ (aka jsfiddle for flash :~)
    who is this? a word of friendly advice: FFS stop using AS2

  8. #8
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Ugh, unbelievable -- at least AS2 is still supported in Flash Player! Also, that is one cool online website -- didn't know the Flash equivalent of JSFiddle existed, but thanks
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center