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!

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/diff, 0xFFFFFF, 50);
    mc.moveTo(X1, Y1);
    mc.lineTo(X1+diffX, Y1+diffY, X2, Y2);
    
    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 :)

unfortuately last flash no longer compiles as2

Quote:

---

Originally Posted by realMakc

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.

Actually, I took the liberty of rewriting the script into AS3, so here ya go if it helps, lol :p

- 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_MOVE, drawTrail);

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/diff, 0xFFFFFF, .5);
    mc.graphics.moveTo(X1, Y1);
    mc.graphics.lineTo(X2, Y2);
    
    X1 = X2;
    Y1 = Y2;
    
} 


---

Remember to change the background color to something dark!

Quote:

---

Originally Posted by Nig 13

Are you kidding me?

---

Not at all, AS2 was dropped since 2012 (gotta love the title).

Quote:

---

Originally Posted by Nig 13

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 :~)

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 :D