Flash-Animation

[keeka]

Hallo!
Ich bin neu hier und finde nicht wirklich das Passende für mich..
Ich suche die AS's und den grundsätzlichen Aufbau einer Animation die wie folgt aussehen soll:

Mehrere Bilder sollen auf der horizontalen Linie kreisförmig um ein weiteres Bild herumfliegen..
Die Bilder, die fliegen, sollen im Hintergrund dann mit dem Alpha runtergehen, also transparent werden. Beim Mausover soll die Rotation langsamer oder schneller werden.

Hatte bereits ein paar Eindrücke gewonnen, jedoch finde ich nichts, was das Thema von Grund auf aufbaut. Weiß jemand, wie das geht, oder wo ich das finde...?

Danke für eure Hilfe!

Eure ratlose keeka

 

[Basileus]

Bau schon mal was, soweitz du kommst, undposte die Datei...

 

[Tobias Menzel]

Schau mal hier: http://www.tutorials.de/tutorials218786.html&highlight=rotation (Posting #8) - suchst Du vielleicht etwas in der Art?

Gruß
.

 

[keeka]

Hallo, ja genau so was suche ich... Nur fehlt mir einfach der Ansatz dazu..

Muss ich erst mal ein MC anlegen, in dem die Dinger rumfliegen, oder wie genau ist der erste Schritt? Ich steige durch die fla's nicht so ganz durch..bin noch Anfänger auf dem Gebiet..

Danke für die Antworten..

keeka.

 

[Tobias Menzel]

HI,

ich hab Dir nochmal ein "nacktes" Beispiel fertig gemacht. Viel einfacher bekomm ichs auch nicht hin, aber ich habe versucht, den Code etwas zu kommentieren.

Prinzipiell hast Du einen leeren MovieClip ("rotator"), in dem alle anderen Objekte abgelegt werden. Das geschieht mit "attachMovie": Zuerst wird eine Anzahl rotierender Objekte instanziert, dann das Objekt, das sich in der Mitte befinden soll. Die rotierenden Objekte werden in ein Array geschrieben, damit Du sie in einer onEnterFrame-Methode einfach ansprechen kannst.
Nun hast Du einen Hauptwinkel, der langsam verändert wird. Jedes Objekt verfügt über einen "Offset" (Versatzwinkel), der sich aus der Anzahl der Objekte errechnet, damit sie sich gleichmäßig über einen vollen Kreis verteilen.

Mit der Tiefenebene muss man ggf. etwas tricksen - prinzipiell bekommt man aber aus den jeweiligen Winkeln problemlos eine fehlerfreite Objektstapelung zusammen.

Gruß
.

 

[keeka]

Oh DANKE

Ich werde mich direkt mal daransetzen und mich da rein arbeiten!

Fühl mich hier echt gut aufgehoben. Danke.

keeka

 

[c2na]

Hallo,

ist zwar schon einige Zeit her als hier in diesem Thread zuletzt was gepostet wurde, habe aber genau das gefunden was ich suchte. Vielen Dank erstmal für das tolle Tutorial ... habe jedoch leider noch ein kleines Problem (bin totaler Flash-Anfänger

Ich hoffe irgndwer von euch könnte mir hier weiterhelfen.

Hier hie fla-datei: dellmax.fla

- Ist es irgndwie möglich das Karusell über eine Schaltfläche anzuhalten?
- und ist es möglich das sich das Karusell nur in eine Richtung bewegt?

wäre euch sehr, sehr dankbar wenn ihr mir helfen könntet!!

beste grüße aus österreich

 

[luke_the_duke]

Hallo und willkommen,

für die Rotationsrichtung ist diese Funktion hier verantwortlich:

function getSpeed() { // Rotationsgeschwindigkeit anhand Mausposition
	return -(_xmouse - rotator._x) / 10000;
}

Am besten spielst du damit einfach ein wenig rum.

Um das Karussell anzuhalten packst du die onEnterFrame-Anweisungen in eine eigene Funktion und lässt die dann onEnterFrame ausführen. Wenn du nun im element-MovieClip per onRollOver die onEnterFrame-Schlaufe auf der Hauptzeitleiste (_root) killst, hält das Karusell an. Nun musst du die Schlaufe bloss onRollOut wieder starten.
Eine andere Möglichkeit wäre, dass du per onRollOver bzw. onRollOut auf der Hauptzeitleiste einen Boolschen Wert steuerst (true, false) und danach in der getSpeed-Funktion entsprechende Zahlen zurückgibst. Würde wohl auch flüssiger aussehen dann.

Gruss

 

[c2na]

hallo,

vielen dank für die schnelle antwort. bin sehr beeindruckt von diesem forum und den usern.

luke das mit der richtung klappt perfekt aber für den button bin ich wohl einfach zu blöd. ich habs jetzt mit on press versucht und 2 movieclips für die buttons erstellt. jedoch bleibt das ganze zu beginn schon stecken und die buttons funktionieren auch nicht. (sorry aber ich mache wirklich erst meine ersten schritte mit action script).

hab das on press bei den clips jetzt nochmals weggelöscht. vielleicht könnt ihr mir ja nochmals helfen.

hier die fla: dellmax2.fla

DANKE!

 

[luke_the_duke]

Hallo,

bitte achte auf Gross-/Kleinschreibung in deinen Beiträgen.

Hab das mal umgesetzt.
Code auf Hauptzeitleiste:

var anzahl = 8; // NICHT VERGESSEN: Die Anzahl der Bilder

var radius_x = 300;
var radius_y = 30;

var speed = 0.04;
var winkel = 0;

var element = new Array(anzahl);

var isRotating: Boolean= true;

for (var i=0; i<element.length; i++) {
	element[i] = rotator.attachMovie("element", "e" + i, i + 10);
	element[i].idx = (i + 1);
	element[i].offset = (Math.PI * 2) / anzahl * i;
}

rotator.attachMovie("mitte", "mitte" , 8);

this.onEnterFrame = function() {
	for (var i=0; i<element.length; i++) {
		var obj = element[i]; // Aktuelles Element
		var w = obj.offset + winkel; // Winkel des Elementes
		if (w >= Math.PI * 2) w -= Math.PI * 2; // Winkel beschneiden
		var d = Math.abs(w - Math.PI); // Kreisabschnitt des Objektes
		var sw = Math.sin(w + Math.PI / 2); // x-Skalierung berechnen
		obj._yscale = 75 + d * 15; // Skalierung anhand des Abschnittes
		obj._xscale = (sw * 100) * (obj._yscale / 100);
		obj._alpha = 40 + d * 20; // Transparenz
		// In "depth" wird die Zieltiefe des Objektes abgelegt. Befindet es sich
		// im vorderen Kreisabschnitt (d größer als PI/2), so wird eine positive
		// Tiefenebene gewählt, andernfalls eine negative:
		var depth = (d > Math.PI / 2)? int(d * anzahl * 2) : -500 + int(d * anzahl * 2);
		depth += (i % 2 == 0)? 1 : 0;
		obj.swapDepths(depth);
		obj.tf.text = depth; // Anzeige der Tiefe (nur zur Info)
		obj._x = Math.sin(w) * radius_x; // Positionierung des Objektes
		//obj._y = Math.cos(w) * radius_y;
	}
	winkel += speed; // Winkel erhöhen
	if (winkel >= Math.PI * 2) winkel -= Math.PI * 2; // Winkel nullen
	if (winkel < 0) winkel += Math.PI * 2;
	speed = getSpeed();
}

function getSpeed() { // Rotationsgeschwindigkeit anhand Mausposition
	return (isRotating) ? -.02: 0;
}

Code im MovieClip element:

this.onEnterFrame = function() {
	if (idx != undefined) {
		var img = ct.attachMovie("image" + idx, "img", 1);
		img._x = -img._width / 2;
		img._y = -img._height / 2;
		delete this.onEnterFrame;
	}
}

var zoom = false;

this.onRollOver = function() {
	if (!zoom) scale(120);
}

this.onRollOut = this.onDragOut = function() {
	if (!zoom) scale(100);
	_root.isRotating = true;
}

this.onPress = function() {
	scale((zoom)? 100 : 150);
	zoom = !zoom;
	_root.isRotating = false;
}

function scale(ds) {
	this.onEnterFrame = function() {
		ct._xscale += (ds - ct._xscale) / 4;
		ct._yscale = ct._xscale;
		if (Math.abs(ds - ct._xscale) < 1) {
			ct._xscale = ct._yscale = ds;
			delete this.onEnterFrame;
		}
	}
}

Gruss