Farbenspiel

Thema:
Farben mit Buttons ändern
Description:
Per Button kann man die einzelnen Primärfarben ändern und somit auch die Sekundär- und Tertiärfarben
Keywords:
Flash, setRGB, if, else, random, newColor, parseInt, Zufallsgenerator
Author:
Olaf Lücke
Date:
27.02.2002
Doc-ID:
73-001
URL:
http://www.flashworker.de/tutorial/73/001.html
Version:
1.0
Änderungen:
keine
Anforderungen:
Flash 5
Vorkenntnisse:
erweiterte Flashkenntnisse
Download:
PC: "spielfarbkreise.fla", 32kB
MAC: "spielfarbkreise.fla", 32 kB
Einleitung
  Was bringt dieses Tutorial?

Vorbereitungen I

Der Zufallsgenerator

Vorbereitungen II

Die Buttons
  Das Script
  Button rot oben
  Button grün unten




Was bringt dieses Tutorial?

Es soll zeigen, wie man per Mausklick die einzelnen Grundfarben in Flash mehrmals ändern kann und damit eine Mischung der drei Farben erhält. Diese gemischte Farbe wird dann mit einer vorher von einem Zufallsgenerator festgelegten Farbe verglichen und sollten die Farbwerte übereinstimmen, wird die nächste Szene angesprochen.

Wer nicht nur abschreiben möchte, sollte schon etwas mehr von Flash verstehen.




Vorbereitunge I

Für den Anfang brauchen wir fünf Ebenen:

1. Aktionen
2. Buttons
3. Farbkreise
4. Farbfläche
5. Hintergrund

Danach müssen sechs Buttons mit den allen Zuständen erstellt werden, die die Veränderung der drei Farben übernehmen, d.h. die Werte der Farben hochsetzen und runtersetzen. Als weiteres müssen für das Minimum und Maximum der Einstellung Buttonserstellt werden, die blind sind.

Die Farbkreise sollte man in einem Programm, wie FreeHand erstellen, denn dort kann man auch die Schnittmengen abtrennen. Die einzelnen Teile der Farbdarstellung müssen als Symbole in der Bibliothek abgelegt werden.

Der Hintergrund und die zu ändernde Farbfläche werden auch als Symbole angelegt. In das erste Bild werden Instanzen des Hintergrundes und der Farbflächer gelegt. Den Hintergrund habe ich "flaeche" genannt und die Farbfläche "farbfläche"

Für das erste Bild müssen noch vier dynamische Textfelder erstellt werden. Die die Bezeichnung "r", "g", "b" und "rgb" erhalten.



Der Zufallsgenerator

Ziel des Lernspieles ist es eine Farbfläche in der Farbe dem Hintergrund anzupassen. Dafür brauchen wir einen Zufallsgenerator, da wir ja keine Lust haben hunderte von Farbkombinationen einzugeben. In das erste Bild auf Aktionsebene hinterlegen wir folgendes Script:

fl = new Color(flaeche);               // Die Variable fl sorgt dafür, daß flaeche eine neue Farbe bekommen soll //
gruen = 45;                            // Die Variablen gruen,rot und blau legen die Ausgangswerte fest //
rot = 45;
blau = 45;
x = random(16);                        // Da wir drei Farbwerte verändern wollen brauchen wir auch drei Zufallsgeneratoren //
y = random(16);                        // Da es mir zu komplex erschien, Farben zu erkennen, die sich nur in Einerschritten
z = random(16);                           unterscheiden habe ich eine Mindest- und Maximalgröße gesetzt und den Rest  
if (Number(x) == 0) {                     in 15er Schritten unterteilt.
r = 30;
} else if (Number(x) == 1) {           // x=random(16) bedeutet, daß der Zufallsgenerator 16 Möglichkeiten hat 
r = 45;                                // wichtig ist, daß die erste Möglichkeit "0" ist und die letzte "15"
} else if (Number(x) == 2) {             
r = 60;
} else if (Number(x) == 3) {           // if(Number(x) ==0) wertet das Ergebnis aus und gibt im Textfeld "r" die Zahl 30
r = 75;                                   aus if(Number(x) ==1) gibt 45 aus , etc.
} else if (Number(x) == 4) {
r = 90;
} else if (Number(x) == 5) {
r = 105;
} else if (Number(x) == 6) {
r = 120;
} else if (Number(x) == 7) {
r = 135;
} else if (Number(x) == 8) {
r = 150;
} else if (Number(x) == 9) {
r = 165;
} else if (Number(x) == 10) {
r = 180;
} else if (Number(x) == 11) {
r = 195;
} else if (Number(x) == 12) {
r = 210;
} else if (Number(x) == 13) {
r = 225;
} else if (Number(x) == 14) {
r = 240;
} else if (Number(x) == 15) {
r = 255;
}
if (Number(x) == 0) {
g = 30;
} else if (Number(y) == 1) {
g = 45;
} else if (Number(y) == 2) {
g = 60;
} else if (Number(y) == 3) {
g = 75;
} else if (Number(y) == 4) {
g = 90;
} else if (Number(y) == 5) {
g = 105;
} else if (Number(y) == 6) {
g = 120;
} else if (Number(y) == 7) {
g = 135;
} else if (Number(y) == 8) {
g = 150;
} else if (Number(y) == 9) {
g = 165;
} else if (Number(y) == 10) {
g = 180;
} else if (Number(y) == 11) {
g = 195;
} else if (Number(y) == 12) {
g = 210;
} else if (Number(y) == 13) {
g = 225;
} else if (Number(y) == 14) {
g = 240;
} else if (Number(y) == 15) {
g = 255;
}
if (Number(x) == 0) {
b = 30;
} else if (Number(z) == 1) {
b = 45;
} else if (Number(z) == 2) {
b = 60;
} else if (Number(z) == 3) {
b = 75;
} else if (Number(z) == 4) {
b = 90;
} else if (Number(z) == 5) {
b = 105;
} else if (Number(z) == 6) {
b = 120;
} else if (Number(z) == 7) {
b = 135;
} else if (Number(z) == 8) {
b = 150;
} else if (Number(z) == 9) {
b = 165;
} else if (Number(z) == 10) {
b = 180;
} else if (Number(z) == 11) {
b = 195;
} else if (Number(z) == 12) {
b = 210;
} else if (Number(z) == 13) {
b = 225;
} else if (Number(z) == 14) {
b = 240;
} else if (Number(z) == 15) {
b = 255;
}
strr = r.toString(16);              //Die Variable "strr" soll für den RGB-Wert in einen String umgewandelt werden 
strg = g.toString(16);              // Der Wert "r.toString(16) wandelt "r" in einen Hex-Wert um (Farben)
strb = b.toString(16);
rgb = strr+strg+strb;               // Die Variable "rgb" setzt sich aus einem String zusammen
f = new Color(farbfläche);          // Die später zu ändernde Farbfläche wird auf einen Standardwert gesetzt
f.setRGB(0xe4e4e4);
fl.setRGB(parseInt(rgb, 16));       // Die Farbe des Hintergrundes mit der Variable "fl" wird geändert."(parseInt(rgb,16)"  
gotoAndStop (15);                      gibt eine Ganzzahl aus, die Ins Hex-System umgerechnet wird.

// gotoAndStop (15) bringt uns zu dem Bild, indem dann geändert werden kann



Vorbereitung II

Zum Überprüfen brauchen wir jetzt noch einige dynamischeTextfelder. Ich habe ihnen die Namen rot, gruen, blau, rotg,magentag, magentagb und gesamt gegeben.

Unter der Ebene Aktionen wird eine stop() -Script eingesetzt. In diesem Fall Bild 15

Jetzt geht es ans Grafische. Die Instanzen der Farbkreisflächen werden auf der Bühne platziert und benannt:

rk = roter Kreis
gk = grüner Kreis
bl = blauer Kreis
ma = magenta
gel = gelb
cy = cyan
farbfläche2 = Mischefarbe

Nun werden die Buttons auf der Bühne platziert. Vorteilhaft ist es runde Werte zu wählen, da wir später die genauen Angaben zur Platzierung der Blindbuttons benötigen. Die Instanzen der Blindbuttons werden außerhalb der Bühne platziert und benannt: Bsp.: "nf rot u"




Das Buttonscript

Jeder Button wird mit dem folgenden Script hinterlegt, allerdings gibt es bei jedem Button entsprechend der Sprache einige Änderungen, doch das Grundscript bleibt das Gleiche.


Button rot oben:

on (release) {
	f = new Color(farbfläche);            // "f" und "f2" sind für die Änderung der Farbflächen zuständig
	f2 = new Color(farbfläche2);
	fl = new Color(flaeche);              // "fl" brauchen wir zum Vergleichen der Farbwerte
	rot = Number(rot)+15;                 // setzt bei jedem Klick den Zahlenwert von "rot" um 15 höher
	rotkr = new Color(rk);                // sorgt dafür,daß die Farbe des roten Kreises angepaßt wird
	magenta = new Color(ma);              // sorgt dafür,daß die Farbe des Magentasegmentes angepaßt wird
	gelb = new Color(gel);
	str1 = rot.toString(16);              // Der Wert aus rot wird in Hex-Zahlen umgewandelt und für einen String bereitgestellt
	gesamt = str1+str2+str3;              // Dieser Wert wird aus den Variablen str1 -str3 ermittelt
	rotg = str1+"00"+"00";                // Sind allerdings str2 (gruen) und str3 (blau) noch nicht verändert, dann werden
	if (blau==45) {                          für diese beiden feste Werte "00" eingesetzt
		magentag  = str1+"00"+"00";
	} else {
		magentag = str1+"00"+str3;
	}
	if (gruen==45) {
		gelbg = str1+"00"+"00";
	} else {
		gelbg = str1+str2+"00";
	}
	if (rot>30) {                         // Wenn der Wert für rot größer als 30 ist, dann wird der Blindbutton wieder weg-
		tellTarget ("nf rot u") {               gelegt. tellTarget spricht diesen Blindbutton an
			_x = -36;                           // Die beiden Werte geben den Ort an, wohin die Buttons gelegt werden sollen
			_y = 180;
		}
	}
	if (rot<45) {                         // Sollte der Wert kleiner als 45 sein, dann wird der rote Blindbutton auf den normalen
		tellTarget ("nf rot u") {               Button gelegt und sperrt diesen.
			_x = 28;
			_y = 180;
		}
	}
	if (rot<255) {
		tellTarget ("nf rot") {
			_x = -36;
			_y = 137.9;
		}
	}
	if (rot>240) {
		tellTarget ("nf rot") {
			_x = 27.9;
			_y = 138;
		}
	}
	f.setRGB(parseInt(gesamt, 16));           // ändert die große Fläche (farbfläche)
	f2.setRGB(parseInt(gesamt, 16));          // ändert die Schnittmenge aller Kreise (farbfläche2)
	rotkr.setRGB(parseInt(rotg,16));
	magenta.setRGB(parseInt(magentag, 16));   // Cyan ist hier nicht dabei, da Rot für Cyan nicht relevant ist 
	gelb.setRGB(parseInt(gelbg, 16));
	if (gesamt == fl.getRGB().toString(16)) {  // Abgleichung des Hintergrundes (flaeche) mit der Farbfläche
		nextScene ();                                stimmen beide Werte überein, dann wird die nächste Szene aufgerufen
	}
}

Button grün unten:

on (release) {
	f = new Color(farbfläche);
	f2 = new Color(farbfläche2);
	fl = new Color(flaeche);
	gruen = Number(gruen)-15;           // im Gegensatz zu oben, wird der Wert hier um 15 verringert
	grkr = new Color(gk);
	gelb = new Color(gel);
	cyan = new Color(cy);
	str2 = gruen.toString(16);
	gesamt = str1+str2+str3;
	grueng = "00"+str2+"00";            // bitte beachten hier haben sich die Werte verändert; str2 = grün
	if (rot==45) {
		gelbg = "00"+str2+"00";
	} else {
		gelbg = str1+str2+"00";
	}
	if (blau==45) {
		cyang = "00"+str2+"00";
	} else {
		cyang = "00"+str2+str3;
	}
	if (gruen>30) {
		tellTarget ("nf grün u") {
			_x = -36;
			_y = 180;
		}
	}
	if (gruen<45) {
		tellTarget ("nf grün u") {
			_x = 79;
			_y = 180;
		}
	}
	if (gruen<255) {
		tellTarget ("nf grün") {
			_x = -36;
			_y = 138;
		}
	}
	if (gruen>240) {
		tellTarget ("nf grün") {
			_x = 79;
			_y = 138;
		}
	}
	f.setRGB(parseInt(gesamt, 16));
	f2.setRGB(parseInt(gesamt, 16));
	grkr.setRGB(parseInt(grueng,16));
	gelb.setRGB(parseInt(gelbg, 16));
	cyan.setRGB(parseInt(cyang, 16));
	if (gesamt == fl.getRGB().toString(16)) {
		nextScene ();
	}
}

Jetzt sind zwei Buttons beschrieben, die letzten 4 Buttons sollten sich daraus erschließen.

Vielleicht gibt es auch einfachere Methoden dieses Script zu programmieren, aber mir viel nichts besseres ein. (Mit der Kirche ums Kreuz ums Eck ....)