Actionscript Kleine Programme Fragen & Aufgaben

Transkript

1 Verständnisfragen 1. Eine Variable des Typs Number mit Namen superzahl soll deklariert werden und den Wert 77 zugewiesen bekommen. Wie sieht der Code aus? var superzahl:number = 77; 2. Wann braucht es ein einzelnes Gleichheitszeichen, und wann das doppelte? Ein einzelnes Gleich ist eine Zuweisung, was rechts steht wird ausgerechnet und der sich ergebene Wert wird in der links stehenden Variable gespeichert Ein doppeltes Gleich ist ein Vergleich, also die Frage ob rechts und links davon derselbe Wert steht je nachdem ergibt das dann true oder false 3. Wofür ist meinezahl++ die Kurzform? meinezahl = meinezahl + 1; 4. Wofür steht der Operator &&, und wie genau benutzt man ihn? && steht für UND, dieser Operator kann nur zwischen zwei Wahrheitswerten stehen (die ggf. zuerst ausgerechnet werden). && ergibt true, wenn auf beiden Seiten true steht, andernfalls ergibt sich false 5. Welche drei Informationen müssen in der Klammer nach dem Schlüsselwort for angegeben werden? (Beispiel angeben) for (var i:number = 1; i <= 10; i++){... An erster Stelle wird die Zählvariable deklariert und auf ihren Anfangswert gesetzt an zweiter Stelle steht das Abbruchkriterium (wenn es false ergibt ist die Schleife zu Ende) an dritter Stelle steht, was nach jedem Durchgang passiert Das obige Beispiel fängt also bei 1 an zu zählen und erhöht i dann nach jedem Durchgang um 1, so lange bis 10 erreicht ist. Der Code- block in den geschweiften Klammern wird also zehnmal ausgeführt, die Zählvariable i entspricht immer dem momentanen Durchgang. 6. Welche Aufgabe haben geschweifte Klammern in AS- Code? Geschweifte Klammern fassen den zwischen ihnen stehenden Code zu einem Code- Block zusammen. Code innerhalb eines solchen Blocks wird von oben nach unten abgearbeitet esseidenn es sind weitere Blöcke eingeschlossen. Blöcke sind die wichtigste Organisationseinheit von Code, sie werden durch Einrückung verdeutlicht. Geschweifte Klammern gehören immer zu einer Verzweigung, Schleife oder Funktion. 7. Wieso sind sprechende Variablen- und Funktionsnamen wichtig? Damit man Code einfacher versteht sollte man Namen so wählen, dass der Variablenname schon ausdrückt, wofür der Wert steht, der Funktionsname schon klar macht, was diese Funktion tut. Gut geschriebenen Code kann man fast lesen wie normalen (englischen) Text, so behält man den Überblick und vermeidet Fehler. 8. Welche Konventionen gelten für Variablennamen? (mind. 3) camelcase (erstes Wort klein geschrieben, folgende Worte gross, keine Trennzeichen) Sonderzeichen vermeiden, auch Umlaute Abkürzungen vermeiden, esseidenn sie sind unmissverständlich lieber lange, verständliche Name als kurze, kryptische Namen sollten klarmachen, wofür diese Variable steht (also sprechend sein)

2 Textausgaben In diesen Aufgabenstellungen geht es meist darum, mit einem Programm bestimmte Ausgaben zu erzeugen die dann entweder in das Anzeigefenster trace( Hallo ) - oder in ein dynamisches Textfeld textfeldname.text = Hallo - geschrieben werden. Oft soll die Ausgabe in Abhängigkeit von Werten in Eingabetextfeldern oder Klicks auf eine Schaltfläche erfolgen sorge also jeweils dafür, dass entsprechende Instanzen existieren, z.b.: Aufgabe 1 Erstelle eine Flash- Datei mit den oben gezeigten Elementen (zwei Eingabetextfelder, ein dynamisches Textfeld und ein MovieClip) und Instanznamen. Beim Klicken auf den MovieClip (click_btn) wird die Eingabe a) aus eingabe1_txt in der Konsole (mit trace) ausgegeben b) aus eingabe1_txt in ausgabe_txt ausgegeben c) aus beiden Eingabefeldern in ausgabe_txt ausgegeben, mit Komma dazwischen d) aus eingabe1_txt so oft in der Konsole (mit trace) ausgegeben, wie die Zahl in eingabe2_txt (muss in Number umgewandelt werden) angibt. click_btn.addeventlistener(mouseevent.click, aufgabe1a); function aufgabe1a(e:mouseevent){ trace(eingabe1_txt.text); click_btn.addeventlistener(mouseevent.click, aufgabe1b); function aufgabe1b(e:mouseevent){ ausgabe_txt.text = eingabe1_txt.text; click_btn.addeventlistener(mouseevent.click, aufgabe1c); function aufgabe1c(e:mouseevent){ ausgabe_txt.text = eingabe1_txt.text +, + eingabe2_txt.text; click_btn.addeventlistener(mouseevent.click, aufgabe1d); function aufgabe1d(e:mouseevent){ var eingabe1:string = eingabe1_txt.text; var eingabe2:number = Number(eingabe2_txt.text); for(var i:number = 0; i < eingabe2; i++){ trace(eingabe1);

3 Aufgabe 2 Schreibe ein Programm, welches alle durch 3 teilbaren Zahlen zwischen zwei in Textfelder eingegebene Zahlen ausgibt, wenn man auf eine Schaltfläche klickt. Hinweis (Erweiterung): Vielleicht weiss man nicht, welche der beiden eingegebenen Zahlen die kleinere ist das Programm soll aber in beiden möglichen Fällen funktionieren. click_btn.addeventlistener(mouseevent.click, aufgabe2); function aufgabe2(e:mouseevent){ var eingabe1:number = Number(eingabe1_txt.text); var eingabe2:number = Number(eingabe2_txt.text); var zahlklein:number = eingabe1; var zahlgross:number = eingabe2; if(eingabe1 > eingabe2){ { zahlklein = eingabe2; zahlgross = eingabe1; for(var i:number = zahlklein; i <= zahlgross; i++){ if (i%3 == 0){ //Alternative: i=i+3 in der Schleife trace(i); Aufgabe 3 Programmiere eine Flashanimation, welche beim Drücken einer Schaltfläche (am besten ein MovieClip) zwei Zufallszahlen (zwischen 0 und 1) erzeugt und dann die erzeugten Zahlen, sowie deren Mittelwert in einem dynamischen Textfeld ausgibt, am besten je in einer Zeile Hinweis: \n in einem String bewirkt einen Zeilensprung var zahl1:number = Math.random(); var zahl2:number = Math.random(); ausgabe_txt.text = ("zahl1 = " + zahl1 + "\nzahl2 = " + zahl2 + "\nmittelwert = " + (zahl1 + zahl2)/2); Aufgabe 4 Eine Flashanimation mit zwei Eingabetextfeldern soll beim Klicken auf eine Schaltfläche in einem dynamischen Textfeld folgende Ausgabe erzeugen: so oft wie im ersten Textfeld steht, soll die Eingabe im zweiten Textfeld gefolgt von einem Punkt ausgegeben werden Beispiel: Bei Eingabe von 5 und * wird folgende Ausgabe erzeugt *.*.*.*.*. click_btn.addeventlistener(mouseevent.click, aufgabe4); function aufgabe4(e:mouseevent) { var eingabe1:number = Number(eingabe1_txt.text);

4 var eingabe2:string = eingabe2_txt.text; var ausgabe:string = ""; for (var i:number = 1; i <= eingabe1; i++) { ausgabe = ausgabe + eingabe2 + "."; ausgabe_txt.text = ausgabe; Aufgabe 5 * (Sternchen bedeutet optional) Schreibe ein Programm, das folgende Ausgabe erzeugt: 1* 2*2* 3*3*3* 4*4*4*4* 5*5*5*5*5* 6*6*6*6*6*6* 7*7*7*7*7*7*7* 8*8*8*8*8*8*8*8* 9*9*9*9*9*9*9*9*9* Diese Ausgabe soll im Ausgabefenster erscheinen, und zwar (a) gleich beim Starten des Programms und (b) nochmal, wenn auf eine Schaltfläche geklickt wird. Beachte: Bei 0 wird kein Stern (*) sondern ein Minuszeichen (- ) ausgegeben. //Aufruf ohne Ereignis, also ganz zu Beginn (a) aufgabe5(null); //Aufruf, gekoppelt an Klick-Ereignis (b) click_btn.addeventlistener(mouseevent.click, aufgabe5); function aufgabe5(e:mouseevent){ for(var k:number = 1; k < 10; k++){ var ausgabe:string = ""; for (var i:number = 1; i <= k; i++) { ausgabe = ausgabe + k + "*"; trace(ausgabe); ausgabe = ""; for(var k:number = 1; k<= 10; k++){ ausgabe = ausgabe + "0-"; trace(ausgabe);

5 Aufgabe 6 * (Sternchen bedeutet optional) Erstelle ein Programm, das die Anzahl von Sekunden (können per Textfeld eingegeben werden) in Stunden, Minuten und Sekunden umwandelt. Das Ergebnis soll in einem Textfeld ausgegeben werden, mit Doppelpunkten zwischen den Zeitangaben Beispiel: Eingabe 111 à Ausgabe 0 : 1 : 51 (st : min : sek) Bemerkung: Mit a%b wird der ganzzahlige Rest bei der Division von a durch b berechnet, so ist beispielsweise 73%60 = 13. click_btn.addeventlistener(mouseevent.click, aufgabe6); function aufgabe6(e:mouseevent){ var gesamtesekunden:number = Number(eingabe1_txt.text); var ganzestunden:number = Math.floor(gesamteSekunden/(60*60)); var uebrigeminuten:number = gesamtesekunden%(60*60); var ganzeminuten:number = Math.floor(uebrigeMinuten/60); var uebrigesekunden:number = uebrigeminuten%60; ausgabe_txt.text = "h : m : s = " + ganzestunden + " : " + ganzeminuten + " : " + uebrigesekunden; Aufgabe 7 * Programmiere eine Flashanimation, welche in einem Textfeld (kein Rahmen, keine Hintergrundfarbe, kleine Schrift) die x- und y- Koordinate des Mauszeigers angibt. Sorge dann dafür, dass das Textfeld immer an diese Koordinaten geschoben wird, so dass die Koordinaten immer direkt neben der Maus angezeigt werden. Hinweis AS2: benutze das Ereignis onmousemove und die Eigenschaften _root._xmouse, bzw. _root._ymouse Hinweis AS3: benutze MouseEvent.MOUSE_MOVE und die Eigenschaften stage.mousex, bzw. stage.mousey stage.addeventlistener(mouseevent.mouse_move, displaymousepos); function displaymousepos(e:mouseevent){ ausgabe_txt.text = "x: " + stage.mousex + "\ny: " + stage.mousey; ausgabe_txt.x = stage.mousex; ausgabe_txt.y = stage.mousey;

6 MovieClips Bei diesen Aufgaben geht es hauptsächlich darum, mit AS- Code die Eigenschaften von MovieClips zu manipulieren wie ja bereits aus der Punkt- Aufgabe und der Interaktiven Umgebung bekannt. Auch für jedwedes Spiel ist dies eine der wichtigsten Anwendungen von AS- Code. Natürlich muss man wieder dafür sorgen, dass entsprechende Instanzen zur Verfügung stehen. Aufgabe 8 (Stufe 1) Programmiere eine Flashanimation, welche beim Drücken einer Schaltfläche in einem Textfeld ausgibt, wie oft schon auf den MovieClip gedrückt wurde. var clickcount:number = 0; ausgabe_txt.text = "bisher wurde " + clickcount + " Mal geklickt"; click_btn.addeventlistener(mouseevent.click, countpress); function countpress(e:mouseevent){ clickcount++; ausgabe_txt.text = "bisher wurde " + clickcount + " Mal geklickt"; Aufgabe 8 (Stufe 2) Sorge dafür, dass sich der MovieClip aus der vorigen Aufgabe automatisch von links nach rechts über die Bühne bewegt (d.h. bei jedem Enter_Frame wird die x- Koordinate erhöht). Verhindere ausserdem, dass der Clip nach rechts aus dem Bild verschwindet, z.b. könnte er ganz nach links gesetzt werden (oder sich jetzt nach links bewegen), wenn er am rechten Rand angekommen ist. Das Textfeld aus der vorherigen Aufgabe soll weiterhin angeben, wie oft man auf den Clip geklickt hat. var clickcount:number = 0; ausgabe_txt.text = "bisher wurde " + clickcount + " Mal geklickt"; click_btn.addeventlistener(mouseevent.click, countpress); function countpress(e:mouseevent){ clickcount++; ausgabe_txt.text = "bisher wurde " + clickcount + " Mal geklickt"; click_btn.addeventlistener(event.enter_frame, moveme); function moveme(e:event){ if (click_btn.x + 10 > (stage.width - click_btn.width)){ else { click_btn.x = 0; click_btn.x = click_btn.x + 10;

7 Aufgabe 8 (Stufe 3) * Damit es noch ein wenig schwieriger wird, soll sich der Clip aus der vorherigen Aufgabe jetzt auch nach oben und unten bewegen. Am besten wäre es, wenn er auch innerhalb der Bühne manchmal (zufällig) Richtung und/oder Geschwindigkeit ändert. Voila, schon haben wir ein kleines Spiel, ein bisschen wie Moorhuhn im Textfeld könnte der aktuelle Score angegeben werden. Jetzt gäbe es noch viele Möglichkeiten zur Erweiterung, z.b. mehrere Clips, die man treffen (klicken) muss, grosse und kleine, schnelle und langsame, welche die Minuspunkte geben... Man könnte diese zusätzlichen Schwierigkeiten auch auf mehrere Level verteilen, so dass es immer ein wenig schwieriger wird, sobald man 10 Punkte gesammelt hat. Selbst ausprobieren, das Prinzip bleibt dasselbe. Aufgabe 9 Eine Schaltfläche soll um einen zufällig gewählten Wert (+/- 30 Pixel, horizontal und vertikal) verschoben werden, sobald man mit der Maus auf sie zeigt. Erweiterung *: nach jedem Sprung wird die mögliche Verschiebung um 10 Pixel grösser click_btn.addeventlistener(mouseevent.mouse_over, aufgabe9); var jumpsize:number = 30; function aufgabe9(e:mouseevent){ click_btn.x = click_btn.x + (Math.random()*jumpSize*2)- jumpsize; click_btn.y = click_btn.y + (Math.random()*jumpSize*2)- jumpsize; jumpsize = jumpsize + 10;

8 Zeichnen Bei diesen Aufgaben wird mit AS- Befehlen gezeichnet, wobei die benutzten Koordinaten, Farben, und sonstige Werte oft erst ausgerechnet werden. Aufgabe 10 (Stufe 1) Schreibe ein Programm, das die folgende Figur zeichnet (11 Dreiecke in einer Reihe, je 50 Pixel hoch & breit) var figure:movieclip = new MovieClip(); //oder Sprite addchild(figur); figur.graphics.linestyle(0,0xffffff,1); for (var k:number = 0; k < 11; k++) { figur.graphics.beginfill(0x000000,1); figur.graphics.moveto(0 + k * 50, 0); figur.graphics.lineto(50 + k * 50, 50); figur.graphics.lineto(0 + k * 50,50); figur.graphics.lineto(0 + k * 50, 0); figur.graphics.endfill(); Aufgabe 10 (Stufe 2) Erweitere das Programm (es braucht eine weitere Schleife), so dass diese Figur gezeichnet wird (es sind 8 Reihen a 11 Dreiecke): var figur:movieclip = new MovieClip(); //oder Sprite addchild(figur); figur.graphics.linestyle(0,0xffffff,1); for (var j:number = 0; j < 8; j++) {

9 for (var k:number = 0; k < 11; k++) { 0xffffff,1); if (j % 2 == 0) { else { figur.graphics.beginfill(0x000000,1); figur.graphics.beginfill(math.random() * figur.graphics.moveto(0 + k * 50,0 + j * 50); figur.graphics.lineto(50 + k * 50,50 + j * 50); figur.graphics.lineto(0 + k * 50,50 + j * 50); figur.graphics.lineto(0 + k * 50,0 + j * 50); figur.graphics.endfill(); Aufgabe 10 (Stufe 3) * Noch schöner wäre es, wenn das Programm so funktionieren würde, dass der vorhandene Platz (Höhe und Breite der Bühne) immer komplett mit dem Dreiecksmuster ausgefüllt werden würde, wobei man zu Beginn in zwei Variablen festlegt, wie viele Zeilen und Spalten das Muster haben soll (hier 30 x 30). var figur:movieclip = new MovieClip(); //oder Sprite addchild(figur); var ncols:number = 30; var trianglewidth:number = Stage.stageWidth / ncols; var nrows:number = 30; var triangleheight:number = Stage.stageHeight / nrows; figur.linestyle(0,0xffffff,1); for (var row:number = 0; row < nrows; row++) { for (var col:number = 0; col < ncols; col++) { if (row % 2 == 0) { figur.graphics.beginfill(0x000000, 1);

10 1); else { figur.graphics.beginfill(math.random() * 0xffffff, figur.graphics.moveto(0 + col * trianglewidth, 0 + row * triangleheight); figur.graphics.lineto(trianglewidth + col * trianglewidth, triangleheight + row * triangleheight); figur.graphics.lineto(0 + col * trianglewidth, triangleheight + row * triangleheight); figur.graphics.lineto(0 + col * trianglewidth, 0 + row * triangleheight); figur.graphics.endfill(); Aufgabe 11 Was für eine Form wird mit diesem Code gezeichnet? for (var i:number = stage.stagewidth/2; i > 0; i=i-10) { var figur:movieclip = new MovieClip(); //oder Sprite addchild(figur); figur.graphics.linestyle(3,0x000000,1); figur.graphics.beginfill(math.random()*0xffffff, 0.3); figur.graphics.drawrect(-i,-i,2*i, 2*i); figur.graphics.endfill(); figur.x = stage.stagewidth/2; figur.y = stage.stageheight/2; Einfach in Flash ausprobieren Aufgabe 12 * Was für eine Form wird mit diesem Code gezeichnet? var figur:movieclip = new MovieClip(); //oder Sprite addchild(figur); figur.graphics.linestyle(5, 0x0000ff, 1); var xpos:number = 0; var ypos:number = 200; var ychange:number = 0; figur.graphics.moveto(xpos, ypos); while (xpos < Stage.stageWidth) { ychange = ychange*0.5 + (Math.random()-0.5)*10; ypos = ypos + ychange; xpos = xpos + 5; figur.graphics.lineto(xpos, ypos);

11 Einfach in Flash ausprobieren. Mit ähnlichem Code wie für die yposition könnte man auch z.b. die Farbe oder die Breite des Strichs zufällig verändern, dann bekäme man eine noch interessanter aussehende Linie. Wichtig dabei ist, dass man einen Teil der vorhergehenden Änderung in die nächste Änderung mit einbezieht (change = change*0.5 + Zufallskomponente), da komplett zufällige Änderungen zu abrupt sind und meist nicht gut aussehen.