✔ Farbe aus Bild für Hintergrund per AS auslesen

[mariomartic]

Hallo Leute

Ich plane eine neue Webseite und hatte eine Idee...und zwar wollte ich dass sich die Hintergrundfarbe an die Stimmung des Bildes anpasst (also je nachdem was der grösste Farbanteil eines Bildes ist, z.B. ein bläuliches Bild) soll ein durchschnittswert ermittelt werden und der Hintergrund soll sich dementsprechend einfärben...ich möchte aber dass sich auch das logo, das Menü..einfach alles einfärbt...

Gibt es überhaupt eine Möglichkeit, aus einem Bild solch einen druchschnittswert zu ermitteln und zu übergeben?

Bei einer Seite der Group94 kommt glaub ich sowas zum Zug...

http://www.rembo.be/

Vielen Dank für eure Hilfe

Grüsse
Mario - SEVEN

 

[Tobias Menzel]

Hi,

in Flash 8 könntest Du aus der Grafik ein BitmapData-Objekt erstellen und mit den Methoden "getPixel" oder auch "getColorBoundsRect" bzw. "threshold" herumspielen. Ich wage aber die Prophezeiung, dass derartige Berechnungen relativ langsam ablaufen werden. Vielleicht ist es komfortabler, das Bild serverseitig mit PHP zu analysieren und das Ergebnis an Flash zu übergeben.

Gruß

P.S.: Ich bezweifle, dass auf der von Dir verlinkten Seite eine ähnliche Automation am Werk ist. Vermutlich wurde für jedes Bild "von Hand" ein Farbwert in eine Datenbank eingetragen.
.

 

[mariomartic]

Leider sagen mir schon die Begriffe gar nichts...na dann wird wohl nichts au dem Wunsch ;OD...denn ich bin leider nicht gerade profi was AS angeht.

Trotzdem vielen Dank für deinen Denkanstoss...

Und nochmals danke für deine letzte Hilfe Tobias (Objektspiegelung)...und noch andere

grüsse

SEVEN

 

[Tobias Menzel]

Mich hat das Thema interessiert, und so habe ich mal eben ein kleines Script zusammengestümpert, das Dir vielleicht weiterhelfen kann:

import flash.display.BitmapData;
import flash.geom.*;

var ct = this.createEmptyMovieClip("ct", 2);
var bg = this.createEmptyMovieClip("bg", 1);

function loadImg(p) {
	ct = this.createEmptyMovieClip("ct", 2);
	bg = this.createEmptyMovieClip("bg", 1);
	ct.loadMovie(p);
	this.onEnterFrame = function() {
		if (ct._width > 0 && ct._height > 0) {
			reScale();
		}
	}
}

function reScale() {
	delete this.onEnterFrame;
	var r = ct._width / ct._height;
	var o = ct._width;
	ct._width = 20;
	ct._height = ct._width / r;
	var b = new BitmapData(ct._width, ct._height);
	b.draw(ct);
	var amt = ct._width * ct._height;
	var sumr = 0;
	var sumg = 0;
	var sumb = 0;
	var x = 0;
	var y = 0;
	for (var i=0; i<amt; i++) {
		var p = b.getPixel(x, y).toString(16);
		while(p.length < 6) {
			p = "0" + p;
		}
		sumr += parseInt(p.substr(0, 2), 16);
		sumg += parseInt(p.substr(2, 2), 16);
		sumb += parseInt(p.substr(4, 2), 16);
		x ++;
		if (x >= ct._width) {
			x = 0;
			y ++;
		}
	}
	sumr = int(sumr / amt);
	sumg = int(sumg / amt);
	sumb = int(sumb / amt);
	sumr = sumr.toString(16);
	sumg = sumg.toString(16);
	sumb = sumb.toString(16);
	if (sumr.length < 2) sumr = "0" + sumr;
	if (sumg.length < 2) sumg = "0" + sumg;
	if (sumb.length < 2) sumb = "0" + sumb;
	trace("FIN: " + sumr + ":" + sumg + ":" + sumb);
	var col = parseInt(sumr + "" +  sumg + "" + sumb, 16);
	bg.beginFill(col, 100);
	bg.moveTo(0, 0);
	bg.lineTo(Stage.width, 0);
	bg.lineTo(Stage.width, Stage.height);
	bg.lineTo(0, Stage.height);
	bg.lineTo(0, 0);
	ct._xscale = ct._yscale = 50;
	ct._x = Stage.width / 2 - ct._width / 2;
	ct._y = Stage.height / 2 - ct._height / 2;
}

loadImg("einbild.jpg");

Das geladene Bild wird zuerst auf 20 Pixel Breite verkleinert . So muss nur eine kleine Anzahl Pixel abgefragt werden, aus denen ein Durchschnittswert berechnet werden kann.

Gruß
.

 

[mariomartic]

Lieber Tobias

Könntest du dies eventuell in einem anschaulichen Beispiel reinstellen? Ich habe echt keine Ahnung wohin mit dem Script? Tut mir leid, ich hoffe ich verlange da nicht zuviel von dir...

Gruss

Mario

 

[Tobias Menzel]

Das Script kannst Du so wie es ist, in den ersten Frame einer neuen Flashdatei pasten. Mit dem Aufruf:

loadImg("einbild.jpg");

wird dann das Bild mit dem angegebenen Dateinamen geladen und angezeigt.

Gruß
.

 

[mariomartic]

Ich verstehe wohl nicht ganz was du meinscht mit dem loadImg?

Wohin damit? auch in den ersten Frame?

Wie kann ich z.B. die ermittelte Farbe dann an einen Movieclip übergeben? Ich möchte z.B. ein Logo importieren aus Illustrator und auch ein paar Boxen als Hintergrund, welche dann die ermittelte Farbe erhalten. Dazu würde ich von jedem Objekt ein Movieclip machen mit einem Instanznamen...wie kann ich das im Script einbinden, dass die Farbe dann jeweils übergeben wird?

Danke für deine Mühe und die Zeit

Gruss

Mario

 

[Tobias Menzel]

Mein Beispiel zeichnet hinter dem geladenen Bild eine Box in der ermittelten Farbe. Wo liegen genau Deine Probleme, das Script zu verstehen? - ich will Dir ja nichts komplett fertiges vorsetzen, sondern bestenfalls einen Ansatz vermitteln.

Wohin damit? auch in den ersten Frame?

Wenn ich sage: "alles in den ersten Frame", dann wird das schon so sein. Der Funktionsaufruf steht ja in der letzten Zeile des Scriptes. ... ich nehme an, Du weißt, was eine Funktion ist, und wie man sie aufruft? :suspekt:
.

 

[mariomartic]

Hallo Tobias

Habs mal versucht, hat aber leider nicht geklappt..es scheint, dass er den Wert richtig herausliest (FIN)...doch leider ist der Hintergrund immer nur grün (Das Bild besteht aus einem blauen Farbverlauf).

Des weiteren weiss ich immernoch nicht, wie ich verschiedenen Movieobjekten diesen Farbwert übergeben könnte?

Danke für deine Hilfe

 

[Tobias Menzel]

Hi,

sorry, mein Fehler.

Du musst die drei Farbwerte noch einmal in Hexadezimale Codes umwandelt, bevor Du sie zusammensetzt:

	sumr = sumr.toString(16);
	sumg = sumg.toString(16);
	sumb = sumb.toString(16);
	if (sumr.length < 2) sumr = "0" + sumr;
	if (sumg.length < 2) sumg = "0" + sumg;
	if (sumb.length < 2) sumb = "0" + sumb;

Ich habe mein Codebeispiel oben aktualisiert, so dass Du siehst, wo diese Zeilen hinkommen (nach der Division, direkt vor der trace-Aktion).

Gruß

P.S.: Im Anhang findest Du eine Beispieldatei, die auch diverse MovieClips transformiert.
.