mouse_painting effekt?

[the_black_hawk]

Hallo Leute,

heute habe ich auf der Website der Telekom einen sehr interessanten painting-effekt gesehen
Die swf datei hab ich im Anhang gepackt, dass ihr euch angucken könnt was ich meine.

Könnt ihr mir bei der Umsetzung eines solchen Effekts helfen?
(Ansatzweise hab ich mit Hilfe anderer Tutorials versucht etwas ähnliches hin zu bekommen, bin aber kläglich gescheitert)

Freue mich auf Antwort

 

[TeQs]

Setz dich mal hiermit auseinander:
http://www.flashhilfe.de/forum/tipps-tricks/zeichnen-mit-flash-mx-62412-62412.html

 

[the_black_hawk]

Hi,

grundsäzlich stellt das Zeichnen in Flash ja kein Problem da.

Problem ist nur,

1. die softe Bewegung hinzubekommen

2. das automatische wegfaden vom Ende

3. die Art des Brushs

hoffe ihr wisst was ich meine

 

[the_black_hawk]

hier mal nen Code von dem Paining was ich schon vorbereitet habe

isPainting = true;
painting = createEmptyMovieClip("painting", 1);
theBrush = new Object();
theBrush.onMouseMove = function ()
{
    if (isPainting)
    {
        painting.lineTo(_xmouse, _ymouse);
    } // end if
};
Mouse.addListener(theBrush);
painting.onEnterFrame = function ()
{
    ranWidth = Math.round(Math.random() * 10 + 1);
    painting.lineStyle(ranWidth, 0x991100, 100);
		
		painting._alpha -=9;
		if(painting._alpha < 1)
		{
			   painting.clear();
			   painting._alpha += 100;
		}
};

wie man sieht ist mein Vorhaben gescheitert

wie bekomm ich diese Spiraleneffekt hin?
wie schaff ich es, dass nur das Ende des Paintings verschwindet? (bei mir bleicht Anfang und Ende gleich aus)
wie schaff ich es, dass mein Painting eine unterschiedliche Dicke hat ?(halt genau so wie in dem Movie von der Telekom)
- die Telekom Flashdatei ist oben Angehängt

 

[Tobias Menzel]

Hi,

schau mal in den Anhang - das ist die beste Annährung, die ich auf die Schnelle geschafft habe.

Gruß
.

 

[the_black_hawk]

wow, danke dir
sieht echt schonmal ziemlich gut aus

nur jetz versteh ich den code nichtmehr und kann es nicht weiter ausbauen*gg

ne echt hammer geworden, jetz muss ich nurnoch irgendwie dafür sorgen, dass die bewegung etwas "runder" läuft

danke nochmal

 

[the_black_hawk]

ich hab hier mal nen Teilcode aus der Orginaldatei rausgefiltert

#initclip
class org.aecea.gfx.BezierRibbonMouseFollow extends MovieClip implements org.aecea.gfx.IBezierRibbonTarget
{
    var _ref;
    var _xmouse, _ymouse;
    function BezierRibbonMouseFollow()
    {
        super();
        if (!this._ref)
        {
            _ref = this;
        } // end if
    } // End of the function
    static function create(host, name, depth, referenceMC)
    {
        return(host.attachMovie("org.aecea.gfx.BezierRibbonMouseFollow", name || "_mouseFollow", depth || host.getNextHighestDepth(), {_ref: referenceMC}));
    } // End of the function
    function play()
    {
    } // End of the function
    function pause()
    {
    } // End of the function
    function addRibbonConfigured(ribbon)
    {
    } // End of the function
    function onRibbonUnload(ribbon)
    {
    } // End of the function
    function startX()
    {
        return(0);
    } // End of the function
    function startY()
    {
        return(Stage.height);
    } // End of the function
    function x()
    {
        return(_xmouse);
    } // End of the function
    function y()
    {
        return(_ymouse);
    } // End of the function
    function __get__referenceMC()
    {
        return(_ref);
    } // End of the function
    function __set__referenceMC(mc)
    {
        _ref = mc;
        return(this.__get__referenceMC());
        null;
    } // End of the function
} // End of Class
#endinitclip

weis jemand von euch was das fürn Sinn hat?

 

[Tobias Menzel]

Hi,

meinen Code kann ich Dir gerne kommentieren. Die "Smoothness" lässt sich ggf. durch die Änderung weniger Variablen anpassen.

In der von Dir geposteten Klasse wird die Bewegung nicht implementiert - ich möchte Dich zudem darauf aufmerksam machen, dass das Dekompilieren und Öffentlichmachen fremder Ressourcen nicht erlaubt ist.

Gruß
.

 

[the_black_hawk]

sorry wusst ich nich,

wär schön wenn du den Code ´kommentieren kannst, dann seh ich da auch besser durch*gg

danke nochmal

 

[Tobias Menzel]

Hi,

ich probiers mal:

var ml = new Object(); // Maus-Listener für die Bewegung des Mauszeigers

ml.onMouseMove = function() { // Beim Bewegen der Maus
	if (_down) { // wenn die linke Taste gedrückt ist ...
		var px = _xmouse; // .. merke ich mir zunächst die aktuelle Position
		var py = _ymouse;
		var dx = _lx; // ... und auch die letzte Position wird gespeichert
		var dy = _ly;
		_root.onEnterFrame = function() { // wir starten eine onEnterFrame-Methode
			// Nun nähere ich die letzte bekannte Positon (dx und dy) schrittweise
			// an die aktuelle Position (px und py) an:
			dx += (px - dx) / delay;
			if (Math.abs(px - dx) < 1) dx = px;
			dy += (py - dy) / delay;
			if (Math.abs(py - dy) < 1) dy = py;
			// delta_x und delta_y sind nun der Abstand zwischen der angenährten
			// Position (s.o.) und der letzten gezeichneten Mausposition (_lx und _ly)
			// von dx, dy muss ich nun eine durchgehende Linie zu _lx, _ly zeichnen.
			var delta_x = dx - _lx;
			var delta_y = dy - _ly;
			var xd = (delta_x >= 0)? 1 : -1;
			var yd = (delta_y >= 0)? 1 : -1;
			// ist der horizontale Abstand größer als der vertikale ...
			if (Math.abs(delta_x) > Math.abs(delta_y)) {
				// .. gehe ich jeden Schritt 1 Pixel zur Seite ...
				var step_x = 1 * xd;
				// .. und mehrere Pixel nach unten bzw. oben:
				var step_y = Math.abs(delta_y / delta_x) * yd;
			} else { // ansonsten ...
				// gehe ich jeden Schritt einen Pixel nach unten oder oben ...
				var step_y = 1 * yd;
				// .. und mehrere Pixel zur Seite
				var step_x  = Math.abs(delta_x / delta_y) * xd;
			}
			var done = false;
			// Solange die Linie nicht fertig gezeichnet ist ...
			while (!done) {
				_lx += step_x; // .. bewegen wir und von _lx schrittweise
				// in Richtung dx ...
				if (step_x >= 0 && _lx >= dx) _lx = dx;
				if (step_x < 0 && _lx <= dx) _lx = dx;
				// .. und von _ly schrittweise in Richtung dy
				_ly += step_y;
				if (step_y >= 0 && _ly >= dy) _ly = dy;
				if (step_y < 0 && _ly <= dy) _ly = dy;
				// Dazu instanzieren wir bei jedem Schritt eine
				// Instanz von "brush" ...
				var d = _root.getNextHighestDepth();
				var c = _root.attachMovie("brush", "_br_" + d, d);
				c._x = _lx;
				c._y = _ly;
				// .. und setzen diese an der aktuellen Position ab.
				if (_lx == dx && _ly == dy) done = true; // wenn ich die Endposition erreicht habe,
				// setze ich "done" auf true, damit die Bewegung endet.
			}
			// Ist die Endposition komplett erreichen, lösche ich die onEnterFrame-Methode
			if (px == dx && py == dy) delete _root.onEnterFrame;
		}
	}
}

ml.onMouseDown = function() { // Beim Drücken der Maustaste ...
	_down = true; // .. setze ich _down auf true und ...
	_lx = _xmouse; // .. merke mir die Mausposition in _lx und _ly
	_ly = _ymouse;
}

ml.onMouseUp = function() { // beim Loslassen ...
	_down = false; // .. setze ich _down auf false
}

var _down = false;

var _lx = _xmouse;
var _ly = _ymouse;

var delay = 6; // Dies ist die Verzögerung bei der Annährung.
// Höhere Werte machen die Bewegung weicher.

Mouse.addListener(ml);

Gruß
.