IFD 2008» Blog Archive » actionscript

actionscript

dies ist eine grundlegende einführung in flash und as3. das pdf zum tutorial könnt ihr
hier anschauen.

die übungen zur einführung folgen hier:

erte übung | goto frame

This movie requires Flash Player 9

stop();
 
go_btn.addEventListener(MouseEvent.CLICK,goTo);//bei klick auf go_btn soll funktion goTo ausgelöst werden
 
function goTo(ereignis:MouseEvent) {//die funktion goTo
	gotoAndStop(2)//gehe zu frame 2 und halte an
}

ein quadrat über die bühne laufen lassen

This movie requires Flash Player 9

stop();
 
var speed:Number = 25;// variable geschwindigkeit
quadrat_mc.addEventListener(MouseEvent.CLICK,eventList);//wenn aufs quadrat geklickt wird soll die onEnterFrame function aktiviert werden
 
function eventList(ereignis:MouseEvent){//die onENterFrame funktion
	quadrat_mc.addEventListener(Event.ENTER_FRAME, moveIt)// jeden frame soll die funcion moveIt aufgerufen werden
}
 
function moveIt(ereignis:Event) {
	if(quadrat_mc.x <= stage.stageWidth){//solange die xPos des Quadrates kleiner als die bühnenbreite ist
		quadrat_mc.x += speed;//wird die xPos um die variable speed erhöht
	}
	if(quadrat_mc.x >= stage.stageWidth){//ist die xPos größer als die bühnenbreite
		quadrat_mc.x = 0;//wird sie auf 0 gesetzt
	}
}

quadrate mittels einer for schleife duplizieren

This movie requires Flash Player 9

stop();
 
var container:Sprite = new Sprite();// container wird definiert
addChild(container);// und auf bühne gebracht
container.x = 0;
container.y = 0;
var square:Shape = new Shape();//das rechteck wird definiert
container.addChild(square);//und dem container hizugefügt
 
stage.addEventListener(MouseEvent.CLICK,eventList);//wenn auf die bühne geklickt wird soll die funktion eventList ablaufen
 
function eventList(ereignis:MouseEvent) {
	stage.addEventListener(Event.ENTER_FRAME, moveIt);//onEnterFrame soll die funktion moveIt abgerufen werden
}
 
function moveIt(ereignis:Event) {
	var anzahl;//var anzahl der quadrate
	anzahl = Number(inputTxt.text)//die variable soll sich den wert aus dem textfeld holen 
	removeSquares();//die vorher gezeichneten quadrate sollen gelöscht werden 
	for (var i=0; i<anzahl; i++) {//für var i ist gleich null; solange sie kleiner als die anzahl der quadrate ist; variable i raufzählen
		var xPos = stage.stage.stageWidth/anzahl*i+3;//die xpos der einzelnen quadrate bestimmen
		trace(xPos);//diese im trace fenster ausgeben
		var squareSize:uint = 50;//die quadrat größe
		square.graphics.beginFill(0xFF0066, 1);//farbe und alpha wert des quadrates
		square.graphics.drawRect(xPos, 175, squareSize, squareSize);//positionieren 
		square.graphics.endFill();// ende der farbfüllung
		stage.removeEventListener(Event.ENTER_FRAME, moveIt);//onEnterFrame löschen
		this.addChild(square);//quadrate auf die bühne bringen
	}
}
function removeSquares() {
	square.graphics.clear();//quadrate löschen
}

einen kreis auf die bühne bringen und kreisen lassen:

This movie requires Flash Player 9

var currentDegrees:Number = 0;//variable wo die animation anfangen soll
var radius:Number = 100;//variable für den radius der umlaufbahn
var satelliteRadius:Number = 5;// größe des kreises
 
var container:Sprite = new Sprite();// containter wird erstellt
container.x = stage.stageWidth / 2;// auf die mitte der bühne pos
container.y = stage.stageHeight / 2;//s.o.
addChild(container);// und auf die bühne gebracht
 
var satellite:Shape = new Shape();//shape wird erstellt
container.addChild(satellite);// und dem container hinzugefügt
 
addEventListener(Event.ENTER_FRAME, doEveryFrame);//eventlistener soll jeden frame die "doEveryFrame" function aufrufen
 
function doEveryFrame(event:Event):void {//function wird definiert
	currentDegrees += 4;// der aktuelle radius wird um 4 raufgezählt
	var radians:Number = getRadians(currentDegrees);//die dreiecksvariable die den aktuellen gradwert in radian umwandelt(mit hilfe der rechenfunktion getRadians
	var posX:Number = Math.sin(radians) * radius;// pos x wird bestimmt
	var posY:Number = Math.cos(radians) * radius;// pos y wird bestimmt (erklärung dazu im tutorial von markus)
	satellite.graphics.clear();//die shape wird erst entfernt
	satellite.graphics.beginFill(0xFF0066, 1);// um sie dann neu zu zeichnen
	satellite.graphics.drawCircle(posX, posY, satelliteRadius);//und zwar auf den gerade ausgerechneten positionen
}
function getRadians(degrees:Number):Number {//funktion zum rechnen des radians, rübgabewert soll Number sein
	return degrees * Math.PI / 180;//der wert der zurückgegeben werden soll
}

eine erste rechenoperation in einem dynamischen textfeld ausgeben

This movie requires Flash Player 9

// auf der bühne muss ein dynamisches textfeld mit dem namen "ergebnisTxt" liegen
var a, b, ergebnis:Number;// die 3 variablen werden definiert
function addiere (x:Number, y:Number):Number{//die funktion addieren wird erstellt (mit typ Number als rückgabewert
	var hilfe:Number;// hilfsvariable zum rechnen wird erstellt
	hilfe = x+y; //die rechenoperation wird ausgeführt 
	return hilfe;//der wert wird zurückgegeben
}
a = 20;//wert a bestimmen
b = 20;// wert b bestimmen
ergebnis = addiere(a,b)// die variable ergebnis soll den return wert nach der rechenoperation "addiere" von den summanden a und b von erhalten 
ergebnisTxt.text = String(ergebnis);// im dynamischen textfeld soll die variable ergebnis ausgegeben werden
trace(ergebnis)//im ausgabefenster ebenfalls

einen taschenrechner erstellen

This movie requires Flash Player 9

stop();
 
/* Im folgenden werden die Events für die 4 Button definiert.
   Dabei wird jeweils ein Funktion aufgerugen */
 
clear_btn.addEventListener(MouseEvent.CLICK,loeschen);
plus_btn.addEventListener(MouseEvent.CLICK,addiere);
minus_btn.addEventListener(MouseEvent.CLICK,subtrahiere);
hoch_btn.addEventListener(MouseEvent.CLICK,hoch);
zahl1_txt.addEventListener(MouseEvent.CLICK,del1);
 
 
// function um zahl zu löschen
function del1(ereignis:MouseEvent):void {
	trace(this)
	this.text = "";
}
// diese funktion ruft die funktion 
function loeschen(ereignis:MouseEvent):void {
	ce();
}
 
// function zum löschen der felder
 
function ce():void {
	zahl1_txt.text="";
	zahl2_txt.text="";
	ergebnis_txt.text="";
}
 
function addiere(ereignis:MouseEvent):void {
	var a:Number;
	var b:Number;
 
	a=Number(zahl1_txt.text);
	b=Number(zahl2_txt.text);
 
	if (isNaN(a) || isNaN(b)) {
		ce();
	} else {
		ergebnis_txt.text=String(a+b);
	}
}
function subtrahiere(ereignis:MouseEvent):void {
	var a:Number;
	var b:Number;
 
	a=Number(zahl1_txt.text);
	b=Number(zahl2_txt.text);
 
	if (isNaN(a) || isNaN(b)) {
		ce();
	} else {
		ergebnis_txt.text=String(a-b);
	}
}
 
function hoch(ereignis:MouseEvent):void {
	var a:Number;
	var b:Number;
	var i:Number;
	var erg:Number;
 
	a=Number(zahl1_txt.text);
	b=Number(zahl2_txt.text);
	trace(b);
 
	if (isNaN(a)|| isNaN(b)) {
		ce();
	} else {
		erg=1;
		for (i=1; i<=b; i++) {
			erg=erg*a;
		}
		ergebnis_txt.text=String(erg);
 
	}
}

Der PatternGenerator ist ein Tool mit dem man in jeder beliebiegen Datei seinen Hintergrund individuell
erstellen kann.

This movie requires Flash Player 9

script:
zu beachten: mc “patternGenerator”, “line” und “bg” auf die Bühne, im mc “patternGenerator” folgendes Script:

stop();
 
// pos of the variable background color mc (bigger than stage, if the user rezises the window
_root.bg._width = 10*Stage.width;
_root.bg._height = 10*Stage.height;
_root.bg._x = Stage.width/2;
_root.bg._y = Stage.height/2;
 
function generate() {
	//defining vars
	var size = Number(size_txt.text);
	var distance = Number(distance_txt.text);
	var alph = Number(alpha_txt.text);
	var angle = Math.floor(angle_txt.text);
	var startcolor = "0x333333";
 
	// clear lines
	_root.line.clear();
	//define lines
	_root.line._x = 0;
	_root.line._y = 0;
	_root.line.lineStyle(size,startcolor,alph,true,"none","round","miter");
	_root.line._rotation = angle;
	//for loop to generate lines
	for (i=0; i&lt;3*Stage.width; i += distance) {
		var xstart = 3*Stage.width-i;
		var ystart = Stage.width-3*Stage.width;
		var xziel = 3*Stage.width-i;
		var yziel = 2*Stage.width;
		_root.line.moveTo(xstart,ystart);
		_root.line.lineTo(xziel,yziel);
	}
}
 
//first run, damit die linen auch ohne on enter frame und draggen erstellt werden
 
// function stopping drag | necessary for deleting onEnterFrame function |
function stoppingDrag() {
	this.stopDrag();
	delete onEnterFrame;
}
 
//slider 4 slider for size, distance, angle &amp; alpha
var sizeLine = this.createEmptyMovieClip("sizeLine", this.getNextHighestDepth());
var distanceLine = this.createEmptyMovieClip("distanceLine", this.getNextHighestDepth());
var angleLine = this.createEmptyMovieClip("angleLine", this.getNextHighestDepth());
var alphaLine = this.createEmptyMovieClip("alphaLine", this.getNextHighestDepth());
var handlePos;
//draw lines per action script || line size
sizeLine.lineStyle(0,0xCCFF00,100);
sizeLine.moveTo(0,200);
sizeLine.lineTo(200,200);
//draw lines per action script || line distance
distanceLine.lineStyle(0,0xCCFF00,100);
distanceLine.moveTo(0,250);
distanceLine.lineTo(200,250);
//draw lines per action script || line alpha
alphaLine.lineStyle(0,0xCCFF00,100);
alphaLine.moveTo(0,300);
alphaLine.lineTo(200,300);
//draw lines per action script || line angle
angleLine.lineStyle(0,0xCCFF00,100);
angleLine.moveTo(0,350);
angleLine.lineTo(180,350);
 
// the sliderHandle from the libary (name: slider) | slider size
// get slider on stage
var sizeSlider = sizeLine.attachMovie("slider", "sizeSlider", this.getNextHighestDepth());
sizeSlider._x = 0;
sizeSlider._y = 200;
sizeSlider.onPress = function() {
	this.startDrag(0,0,this._y,200,this._y);
	onEnterFrame = function () {
		size_txt.text = Math.floor(sizeSlider._x/2);
		generate();
	};
};
sizeSlider.onRelease = function() {
	stoppingDrag();
};
 
sizeSlider.onReleaseOutside = function() {
	stoppingDrag();
};
 
// slider distance
var distanceSlider = distanceLine.attachMovie("slider", "distanceSlider", this.getNextHighestDepth());
distanceSlider._x = 100;
distanceSlider._y = 250;
distanceSlider.onPress = function() {
	//aus performancegründen distance nicht kleiner als 10 werden lassen
	this.startDrag(0,20,this._y,200,this._y);
	onEnterFrame = function () {
		distance_txt.text = Math.floor(distanceSlider._x/2);
		generate();
	};
};
distanceSlider.onRelease = function() {
	stoppingDrag();
};
distanceSlider.onReleaseOutside = function() {
	stoppingDrag();
};
 
// slider alpha
var alphaSlider = alphaLine.attachMovie("slider", "alphaSlider", getNextHighestDepth());
alphaSlider._x = 200;
alphaSlider._y = 300;
alphaSlider.onPress = function() {
	this.startDrag(0,0,this._y,200,this._y);
	onEnterFrame = function () {
		alpha_txt.text = Math.floor(alphaSlider._x/2);
		generate();
	};
};
alphaSlider.onRelease = function() {
	stoppingDrag();
};
alphaSlider.onReleaseOutside = function() {
	stoppingDrag();
};
// slider angle
var angleSlider = angleLine.attachMovie("slider", "angleSlider", this.getNextHighestDepth());
angleSlider._x = 45;
angleSlider._y = 350;
angleSlider.onPress = function() {
	this.startDrag(0,0,this._y,180,this._y);
	onEnterFrame = function () {
		angle_txt.text = Math.floor(angleSlider._x);
		generate();
	};
};
angleSlider.onRelease = function() {
	stoppingDrag();
};
angleSlider.onReleaseOutside = function() {
	stoppingDrag();
};
size_txt.text = Math.floor(sizeSlider._x/2);
distance_txt.text = Math.floor(distanceSlider._x/2);
alpha_txt.text = Math.floor(alphaSlider._x/2);
angle_txt.text = Math.floor(angleSlider._x);
generate();

actionscript

Teilnehmer