Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „AS Pop up Menü (glory of rome)“

tobimo

Aktives Mitglied

AW: AS Pop up Menü (glory of rome)

puuh... also ich bin anfänger und würde es like this machen:

erstmal den mittleren kreis erstellen, diesen dann bei mouseover per movieclip die kleineren kreise rausfahren lassen und feddisch.

also in dem movieclip der rausfährt sind die kleineren kreise erst rausfahren, und dann im movieclip noch die buttons am ende als schlussbild
 

h_seldon

Aktives Mitglied

AW: AS Pop up Menü (glory of rome)

Hallo,

hier eine unsaubere, optimierfähige Version eines solchen Menüs:

PHP:
// -------------------- vars -------------
// behälter für gesamtes menü
var mcBehM:MovieClip = this.createEmptyMovieClip("behaelterMenue", 1);
// behälter für zu ladende datei bei klick auf subsub
var mcBehD:MovieClip = this.createEmptyMovieClip("behaelterDatei", 2);
// hauptmenüpunkt (kreis in der mitte)
var mcMM:MovieClip;
// kreise (= subs) um hauptmenü
var mcSubs:MovieClip;
// unterpunkte (= subsubs) der kreise
var mcSubSub:MovieClip;
// anzahl subs
var nSubs:Number = 7;
// ihre winkeldifferenz
var nDist:Number = 360/nSubs;
// ihr radius, nachher errechnet aus breite des hauptmenüpunkts
var nRadius:Number;
// startwinkel
var nWinkel:Number = 0;
// tempo für ein- und ausfahren, größerer wert = schneller
var nTempo:Number = 0.2;
// abstand, bei dem bewegung gestoppt wird
var nStopDif:Number = 1;
// dynamisch zu berechnende breite für rollout hauptpunkt
var vBreite:Number = 0;
// dateiendung für zu ladende datei bei mausklick unterpunkte (= subsubs) der subs
var sDateiTyp:String = ".swf";
// enthält die Untermenüs, um sie bei bedarf löschen zu können
var aSubSub:Array = [];
// enthält die Aktionen für mausklick auf subsubs
// hier beispielhaft: laden von swf 
var aSubSubPress:Array = [["sub1", "sub2", "sub3", "sub4"], ["sub1", "sub2", "sub3"], ["sub1", "sub2", "sub3", "sub4", "sub5"], ["sub1", "sub2", "sub3", "sub4", "sub4"], ["sub1", "sub2", "sub3"], ["sub1", "sub2", "sub3", "sub4", "sub5", "sub6"], ["sub1", "sub2", "sub3", "sub4"]];
// -------------------- functions --------------
// setzt hauptmenüpunkt zzgl. rollover und rollout
function initMenue() {
	mcBehM._x = Stage.width/2;
	mcBehM._y = Stage.height/2;
	mcMM = mcBehM.attachMovie("mcMain", "main", 1000);
	nRadius = mcMM._width*1.5;
	// blendet subs kreisförmig ein
	for (var i = 0; i<nSubs; i++) {
		mcSubs = mcBehM.attachMovie("mcSub1", "sub"+i, i);
		mcSubs._x = mcMM._x;
		mcSubs._y = mcMM._y;
		mcSubs.nZielX = Math.cos(nWinkel*(Math.PI/180))*nRadius;
		mcSubs.nZielY = Math.sin(nWinkel*(Math.PI/180))*nRadius;
		nWinkel += nDist;
	}
	// rollover für hauptpunkt
	mcMM.onRollOver = function() {
		// fährt alle menüunterpunkte aus
		for (var i = 0; i<nSubs; i++) {
			mcSubs = this._parent["sub"+i];
			mcSubs.onEnterFrame = function() {
				bewegung(this, this.nZielX, this.nZielY);
			};
		}
	};
	// rollout für hauptpunkt
	mcMM.onRollOut = function() {
		// bei jeder mausbewegung muß abstand zu hauptpunkt berechnet werden
		// denn rollout muß berücksichtigen, ob bei subs subsubs eingeblendet wurden
		this.onMouseMove = function() {
			var nPythX:Number = this._xmouse-this._x;
			var nPythY:Number = this._ymouse-this._y;
			var nPyth:Number = Math.sqrt((nPythX*nPythX)+(nPythY*nPythY));
			// wenn abstand größer als radius zzgl. dynam wert
			// dann subs einfahren
			if (nPyth>this._parent._width/2+vBreite) {
				// löscht alle subsubs
				subsubDel();
				// fährt subs ein             
				for (var i = 0; i<nSubs; i++) {
					this._parent["sub"+i].onEnterFrame = function() {
						bewegung(this, mcMM._x, mcMM._y);
					};
				}
				// mousemove nicht mehr benötigt
				delete this.onMouseMove;
			}
		};
	};
	// ganzes menü verschiebbar
	mcMM.onPress = function() {
		this._parent.startDrag();
	};
	// verschieben stoppen
	mcMM.onRelease = mcMM.onReleaseOutside=function () {
		this._parent.stopDrag();
	};
}
// löscht subsubs
function subsubDel() {
	if (aSubSub.length>0) {
		for (var e in aSubSub) {
			aSubSub[e].removeMovieClip();
		}
		aSubSub = [];
	}
	// durch löschen subsubs reduziert sich breite menü           
	// und damit auch die breite des hotspots für den rollout
	vBreite = 0;
}
// sorgt für ein- und ausfahren subs
function bewegung(pWer, pWohinX, pWohinY) {
	// während der bewegung rollover subs inaktiv
	pWer.enabled = false;
	// berechnet entfernung zum ziel
	pWer.nPythX = pWohinX-pWer._x;
	pWer.nPythY = pWohinY-pWer._y;
	pWer.nPyth = Math.sqrt((pWer.nPythX*pWer.nPythX)+(pWer.nPythY*pWer.nPythY));
	// definiert bewegungstempo, je weiter weg, desto schneller
	pWer._x += pWer.nPythX*nTempo;
	pWer._y += pWer.nPythY*nTempo;
	// wenn entfernung unter grenzwert
	// dann auf ziel setzen
	if (Math.abs(pWer.nPyth)<nStopDif) {
		pWer._x = pWohinX;
		pWer._y = pWohinY;
		delete pWer.onEnterFrame;
		// bei rollover über subs sollen deren subsubs angezeigt werden
		// da nach einfahren pWer von hauptmenüpunkt verdeckt, wird dieses rollover
		// von demjenigen des hauptmenüpunktes überlagert
		// wäre das nicht der fall, würden bei jedem rollover subsubs eingeblendet
		pWer.enabled = true;
		// subsubs werden eingeblendet
		pWer.onRollOver = function() {
			// falls irgendwo vorher subsubs eingeblendet
			// diese löschen
			subsubDel();
			// die gesamtbreite vergrößert sich durch subsubs
			vBreite = Math.ceil(pWer._width);
			// ermittelt position in array für aktionen subsubs
			var nSubSubIndex:Number = Number((this._name).substr(3, 1));
			// berechnung winkel, entfernung etc. wie bei hauptmenüpunkt
			var nDistSub:Number = 360/aSubSubPress[nSubSubIndex].length;
			var nWinkelSub:Number = 0;
			var nRadiusSub:Number = Math.ceil(this._width);
			// setzt subsubs
			for (var j = 0; j<aSubSubPress[nSubSubIndex].length; j++) {
				mcSubSub = mcBehM.attachMovie("mcSub2", "subsub"+j, j+10);
				mcSubSub._x = Math.cos(nWinkelSub*(Math.PI/180))*nRadiusSub+this._x;
				mcSubSub._y = Math.sin(nWinkelSub*(Math.PI/180))*nRadiusSub+this._y;
				// speichert in objektvar bei klick zu ladende datei
				mcSubSub.sZiel = aSubSubPress[nSubSubIndex][j]+sDateiTyp;
				// fügt subsub in entsprechendes array ein
				aSubSub.push(mcSubSub);
				nWinkelSub += nDistSub;
				// weist subsub mausklick zu
				mcSubSub.onPress = function() {
					// fährt subs wieder ein
					for (var i = 0; i<nSubs; i++) {
						this._parent["sub"+i].onEnterFrame = function() {
							bewegung(this, mcMM._x, mcMM._y);
						};
					}
					// lädt zugehörige datei
					mcBehD.loadMovie(this.sZiel);
					// löscht alle subsubs
					subsubDel();
				};
			}
		};
	}
}
// -------------------- aufruf ------------------
initMenue();

Aufbau:
- MovieClip "mcMain", 80 x 80, Registrierungspunkt mittig, Hauptbutton
- MovieClip "mcSub1", 50 x 50, Registrierungspunkt mittig, Buttons um Hauptbutton herum
- MovieClip "mcSub2", 40 x 40, Registrierungspunkt mittig, Untermenü von mcSub1

Die MovieClips liegen jeweils in der Bibliothek und werden per attachMovie eingefügt.

Es wird ein leerer Behälter zur Aufnahme des gesamten Menüs erstellt. Er wird mittig positioniert und nimmt sowohl den Hauptbutton wie auch die um ihn herum kreisförmig angeordneten Unterbuttons (nachfolgend: subs) auf. Die subs liegen anfangs unter dem Hauptbutton, sind also nicht sichtbar.
Bei Rollover fahren die subs aus (die korrekte Position auf einer gedachten Kreisbahn wurde bereits beim erstmaligen Einfügen berechnet und in einer Var gespeichert).
Sobald die subs ihre Position erreicht haben, kann man per Rollover auf deren Unterbuttons (nachfolgend: subsubs) zugreifen; sie werden direkt eingeblendet und ebenfalls kreisförmig angeordnet. Die benötigte Anzahl der subsubs sowie die auszuführende Aktion (hier beispielhaft: loadMovie einer swf) wird über ein Array definiert. Bei Mausklick auf einen der subsubs erscheint ein subsubsub, ach, nein, doch nicht, sondern es wird, wie erwähnt, eine swf geladen. Gleichzeitig blenden alle subsubs aus und die subs fahren zurück in ihre Ausgangsposition (d.h., sie werden vom Hauptbutton wieder verdeckt).
Erfolgt kein Mausklick, bleiben die subsubs solange eingeblendet, bis ein rollover über einen anderen sub erfolgt oder bis der Anwender die Maus aus dem Menü herauszieht, wodurch, als hätte man es geahnt, ein rollout-Ereignis ausgelöst wird. Daraufhin löschen sich die beleidigten subsubs selbst und die subs fahren wieder zurück in die Ausgangsposition (wie beim Mausklick, s.o.).
Bei Mausklick auf den Hauptbutton läßt sich as Menü verschieben.

Wer die Erläuterung verstanden hat, ist so gut, daß er eine Lösung auch ohne dieses Beispiel findet und sich das Lesen also hätte sparen können ...

Sorry für diesen Bandwurm, der, sauber geschrieben, sicher um einges kürzer wird. Aber ich hoffe, es wird damit ein Lösungsweg deutlich.

Viel subsub, äh, nein, sondern Spaß
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben