3 Replies Latest reply on Jul 19, 2007 10:27 PM by Newsgroup_User

    paint effect

    skywalker27
      Can someone give me any insight into a way to create an effect similar to the one on http://eu.wrangler.com/ I want the users mouse to have a painting effect on the picture as they mouse over.
        • 1. Re: paint effect
          Level 7
          This is actually fairly simple. Not sure what exactly you want but this
          should be a good start:

          var
          drawClip=_root.createEmptyMovieClip('_drawing',_root.getNextHighestDepth());
          drawClip.lineStyle(1,0xFFFF00,100);
          drawClip.moveTo(_xmouse,_ymouse);
          Mouse.addListener(this);
          function onMouseMove() {
          _root._drawing.lineTo(_xmouse,_ymouse);
          }

          The line is yellow so you may want to use a dark background colour. If
          you like this, drop by my site and get involved in my forums (link
          below). Lots more good stuff to come there ;)

          Regards,
          Patrick

          --
          http://www.baynewmedia.com
          Faster, easier, better...ActionScript development taken to new heights.
          Download the BNMAPI today. You'll wonder how you ever did without it!
          Available for ActionScript 2.0/3.0.


          skywalker27 wrote:
          > Can someone give me any insight into a way to create an effect similar to the one on http://eu.wrangler.com/ I want the users mouse to have a painting effect on the picture as they mouse over.


          • 2. Re: paint effect
            skywalker27 Level 1
            Thanks, this is great. You would not happen to know how to make the linestyle change so it looks blurry or is dotted similar to how they have? do you?
            • 3. Re: paint effect
              Level 7
              Hi again,

              You'll probably need to tweak this a bit but it should be close to what
              you need without much overhead:

              var
              drawClip=_root.createEmptyMovieClip('_drawing',_root.getNextHighestDepth());
              var colours = [0x000000, 0xFFFFFF];
              var alphas = [100,0];
              var ratios = [0,255];
              var matrix = {a:5, b:0, c:1, d:0, e:10, f:1, g:1, h:1, i:1};
              var spreadMethod = "reflect";
              var interpolationMethod = "rgb";
              var focalPointRatio =0;
              drawClip.lineStyle(2,0x0000FF,100);
              drawClip.lineGradientStyle("linear", colours , alphas, ratios, matrix,
              spreadMethod, interpolationMethod, focalPointRatio);
              drawClip.moveTo(_xmouse,_ymouse);
              Mouse.addListener(this);
              function onMouseMove() {
              _root._drawing.lineTo(_xmouse,_ymouse);
              }

              Fiddle with the matrix and focalPointRatio values to begin with. To use
              different colours, you need to change the colours array. The first valus
              is the actual dash, the second item is what it fades to. If you change
              the alphas, you can create a dash that fades between two colours. You
              can get fancier by adding more values too :)

              Good luck,
              Patrick

              --
              http://www.baynewmedia.com
              Faster, easier, better...ActionScript development taken to new heights.
              Download the BNMAPI today. You'll wonder how you ever did without it!
              Available for ActionScript 2.0/3.0.

              skywalker27 wrote:
              > Thanks, this is great. You would not happen to know how to make the linestyle change so it looks blurry or is dotted similar to how they have? do you?