3D Problem

[Schwaermer]

Gelöst,Gelöst,Gelöst,Gelöst,Gelöst,Gelöst




Hi@all,

ich steige jetzt endlich auf AS3 um. Problem: Viele Funktionen müssen anders gelöst werden. Derzeit nage ich an folgendem Problem. Ich will ein 3D-Karussel für Bilder erstellen. Aber die dummen Kinder wollen nicht begreifen, dass sie weiter hinten auf der Z-Achse von den im Vordergrund spielenden Kindern verdeckt werden müssten. Wie löst man das?

Ich dachte an zwei Container (vorn und hinten), in die ich die Kleinen wechsele, sobald sie in den HG wechseln. Das funktionierte aber nicht. Hier mal der Code, den ich mit irgendwo besorgt habe und anpassen wollte. Ich habe letztendlich nur ein richtig geiles Beispiel für eine sphärische Bildergalerie gefunden (mit Code), wo das funktionierte. Da wird was mit einer 3D-Matrix gemacht. Das Ding scheint mir aber zu aufwendig für meine Zwecke. Vielleicht gibt es ja eine einfache Lösung.

Hier also mein Code:

var numOfObj:uint=10;
var radius:Point;
var center:Point;
var speed:Number=0.01;



var karusell:MovieClip = new MovieClip();
addChild(karusell);

function Carousel() {

	radius=new Point(300,60);
	center=new Point(stage.stageWidth/2,stage.stageHeight/2);
	for (var i:int=0; i<numOfObj; i++) {
		var t:buttonb=new buttonb();
		t.angle=(i*((Math.PI*2)/numOfObj));
		t.addEventListener(Event.ENTER_FRAME,onEnter);
		karusell.addChild(t);

	}
}

function onEnter(evt:Event):void {
	var obj:buttonb=buttonb(evt.currentTarget);
	obj.x=Math.cos(obj.angle)*radius.x+center.x;
	obj.y=Math.sin(obj.angle)*radius.y+center.y;
	var scale:Number=obj.y /(center.y+radius.y);
	obj.scaleX=obj.scaleY=scale;
	obj.angle=(obj.angle+speed);
	var depth:Number=karusell.getChildIndex(obj);

/*	
moveFront(obj);
moveBack(obj);
*/

}


Carousel();

thx

[nullidee]

gibts in AS3 swapDepths nicht mehr?

geh doch mal bei gotoandlearn.com gucken da gibts genügend carousels

[Schwaermer]

Nein, swapDepths gibs nicht mehr. Man kann zwar die Kinderchen im Index tauschen lassen. Das bringt aber bei einer Rotation nix. Da wird dann natürlich auch und eigentlich nur die Anzeigereihenfolge geändert.

siehe getChildIndex(obj)...

Die Seite gotoandlearn.com kenne ich natürlich. Da habe ich mich auch schon umgesehen - jedoch kein funktionierendes Beispiel gefunden.

[browerman]

Hi,
es gibt da ne schöne zSort Class, ich weiss leider nur grad nicht von wem die ist.

kannst aber auch ne einfache function nehmen
dann musste aber die buttonb vorher in ein array packen (hier allItems), das wird dann nach der skalierung sortiert.

So hatte ich das gemacht, gibt aber sich noch nen haufen anderer lösungen.

PHP-Code:

private function sortZ():void
{
    this.allItems.sortOn("scaleX", Array.DESCENDING | Array.NUMERIC);
            
   for(var i:uint = 0; i < karusell.numChildren; i++)
   {
    var item:buttonb = this.allItems[i];
    karusell.setChildIndex(item, this.karusell.numChildren-(i+1));
   }
} 


die rufst du dann einfach im enterFrame mit auf

[Plopsi]

Die zSorter-Klasse ist von theFlashBlog gibts hier: The Flash Blog Flash Player 10 Z-Sorting Class

Ich habe aber in dunkler erinnerung das die Klasse nach einem Update nicht mehr funktionierte weil irgendwas im player sang und klanglos weggefallen ist, aber das sollte nicht das Problem sein, ich hatte es selber mal in der Klasse geändert. Wenns probleme gibt meldeste dich einfach nochmal

[Schwaermer]

Also ertmal vielen Dank, dass ihr euch so hilfreich zeigt.

@browerman: Ich rufe das auf und bekomme Folgendes: TypeError: Error #1010: Ein Begriff ist nicht definiert und hat keine Eigenschaften.

@Plopsi: Das Beispiel ist genial. Allerdings fehlt mir dazu einfach die .fla

Ich habe mir die Klasse besorgt, aber beim Kompilieren meckert er nach der fehlenden übergeordneten Klasse, die ich nicht auch noch erst runterladen will.

@all:Gibt es denn nicht ein kostenloses Beispiel per .fla? Ich habe es jetzt mit Papervision versucht und ein Beispiel gefunden, das vielversprechend ist. Ich poste mal den Code.

var urlx:URLRequest=new URLRequest(wbilder);

var xmlloader:URLLoader = new URLLoader();
xmlloader.addEventListener(Event.COMPLETE, parseXML);
xmlloader.load(urlx);

function parseXML(evt:Event) {
	var xml:XML=XML(xmlloader.data);
	xml.ignoreWhite=true;

	for (var i:uint=1; i<=xml.pfad.length(); i++) {
		var bam:BitmapAssetMaterial=new BitmapAssetMaterial(????);
		bam.oneSide=false;
		bam.smooth=true;
		var p:Plane=new Plane(bam,162,230,2,2);
		p.x=Math.cos(i*anglePer)*radius;
		p.z=Math.sin(i*anglePer)*radius;
		p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
		scene.addChild(p);
		p.container.filters=[dsf];
	}

}

Hier ist das Problem, dass die Bilder in der Bibliothek waren und für AS exportiert sind. Ich will aber dynamisch laden.
In der Variable "xml.pfad[i]" befinden sich die jeweiligen Pfadangaben zu den Bildern. Wie bekomme ich die nun an die Stelle mit den Fragezeichen? Kann ich die Bilder in das Flash laden und dann zu "new BitmapAssetMaterial(????);" machen?

THX

[browerman]

zu meinem Bsp. von oben.

hast du dir ein array names "allItems" erstellt und die ganzen buttonb da reingepackt?
sonst kommt natürlich n fehler.

[Schwaermer]

@browerman: Nee, hatte ich nicht. Jetzt funktioniert es!



Hier der noch etwas ruppige Code für alle, die ein 3D Karussell in AS3 wollen. Allerdings ist das Ergebnis genauso mäßig, wie in AS2. Die Bilder werden nicht wie erhofft, glatter dargestellt. Aber immerhin kann ich jetzt das Projekt in AS3 fortführen. Also Danke liebe Community (esp. browerman) !


XML-File

<?xml version="1.0" encoding="UTF-8"?>
<main>
<pfad>bild1.png</pfad>
<pfad>bild2.png</pfad>
<pfad>bild3.png</pfad>
<pfad>bild4.png</pfad>
<pfad>bild5.png</pfad>
</main>

var wbilder:String="bilder.xml";

var radius:Point;
var center:Point;
var speed:Number=0.01;
var ausgleich:Number = 65;

var karusell:MovieClip = new MovieClip();
addChild(karusell);
var allItems:Array = new Array();
function Carousel() {

	radius=new Point(350,60);
	center=new Point(stage.stageWidth/2,stage.stageHeight/2);

	var urlx:URLRequest=new URLRequest(wbilder);

	var xmlloader:URLLoader = new URLLoader();
	xmlloader.addEventListener(Event.COMPLETE, parseXML);
	xmlloader.load(urlx);

	function parseXML(evt:Event) {
		var xml:XML=XML(xmlloader.data);
		xml.ignoreWhite=true;
		var itm:uint=xml.pfad.length();
		for (var i:int=0; i<=itm; i++) {
			
			var request:URLRequest=new URLRequest(xml.pfad[i]);
			var loader:Loader = new Loader();
			loader.load(request);
			var t:bildcontainer = new bildcontainer();
			t.addChild(loader);
			t.angle=(i*((Math.PI*2)/itm));
			t.addEventListener(Event.ENTER_FRAME,onEnter);
			karusell.addChild(t);
			allItems[i]=t;

		}
	}
}

function onEnter(evt:Event):void {
	var obj:bildcontainer=bildcontainer(evt.currentTarget);
	obj.x=Math.cos(obj.angle)*radius.x+center.x-ausgleich;
	obj.y=Math.sin(obj.angle)*radius.y+center.y-ausgleich;
	var scale:Number=obj.y /(center.y+radius.y-ausgleich);
	obj.scaleX=obj.scaleY=scale;
	obj.angle=(obj.angle+speed);
	var depth:Number=karusell.getChildIndex(obj);
	sortZ();
}

function sortZ():void {
	this.allItems.sortOn("scaleX", Array.DESCENDING | Array.NUMERIC);

	for (var i:uint = 0; i < karusell.numChildren; i++) {
		var item:bildcontainer=this.allItems[i];
		karusell.setChildIndex(item, this.karusell.numChildren-(i+1));
	}
}

Carousel();

[browerman]

bin ja schonmal froh, dass es funzt :-)

die reingeladenen bilder haben von hause aus keine kantenglättung.

das was du dir extern reinlädst, wird doch sicher ein Bitmap sein.
da musst du smoothing noch anstellen und schon sieht das alles etwas schicker aus

nur so als beispiel ;-)

PHP-Code:

private function imgLoaded(e:Event):void
{        
    var bmp:Bitmap;
    bmp = imgLdr.content as Bitmap
    bmp.smoothing = true;
} 


[nullidee]

Zitat von Schwaermer

Hier der noch etwas ruppige Code für alle, die ein 3D Karussell in AS3 wollen. Allerdings ist das Ergebnis genauso mäßig, wie in AS2. Die Bilder werden nicht wie erhofft, glatter dargestellt. Aber immerhin kann ich jetzt das Projekt in AS3 fortführen.

Ich habe keine Probleme das in AS2 smooth, nicht pixelig darzustellen

[Schwaermer]

@browerman: Wie baue ich die Funktion in mein Script ein? Kannst du es umschreiben, wie die da eingebaut wird? Wie übergebe ich "imgLdr" an die Funktion? Es sind Bilder, ja...


Ich habe das jetzt folgendermaßen eingebaut:

for (var i:int=0; i<=itm; i++) {

			var request:URLRequest=new URLRequest(xml.pfad[i]);
			var loader:Loader = new Loader();
			loader.load(request);
			loader.addEventListener(Event.COMPLETE, onLoaded);
			var t:bildcontainer = new bildcontainer();
			t.addChild(loader);
			t.angle=(i*((Math.PI*2)/itm));
			t.addEventListener(Event.ENTER_FRAME,onEnter);
			karusell.addChild(t);
			allItems[i]=t;

		}

function onLoaded(e:Event):void {
var bmp:Bitmap;
bmp=e.currentTarget.content as Bitmap;
bmp.smoothing=true;
}

...habe aber immernoch den Eindruck, als ob das nichts gebracht hat.

[browerman]

du addest ja in der schleife schon das geladene bild.
und nach dem complete event erstellst du ein bitmap, welches aber nirgends geadded wird, also einfach nur so rumliegt ;-)

ungetestet würd ich jetzt sagen:

for (var i:int=0; i<=itm; i++) {

			var request:URLRequest=new URLRequest(xml.pfad[i]);
			var loader:Loader = new Loader();
			loader.load(request);
			loader.addEventListener(Event.COMPLETE, onLoaded);

		}

function onLoaded(e:Event):void {
var bmp:Bitmap;
bmp=e.currentTarget.content as Bitmap;
bmp.smoothing=true;

var t:bildcontainer = new bildcontainer();
t.addChild(bmp);
t.angle=(i*((Math.PI*2)/itm));
t.addEventListener(Event.ENTER_FRAME,onEnter);
karusell.addChild(t);
allItems.push(t);
}

ich hoffe ich irr mich da jetzt nicht ;-)

ich hab mir halt ne imageloader class geschrieben, und da greif ich dann immer das geladenen bitmap ab. müsste aber eigentlich das gleiche bei rauskommen.

[Schwaermer]

Zitat von browerman

du addest ja in der schleife schon das geladene bild.
und nach dem complete event erstellst du ein bitmap, welches aber nirgends geadded wird, also einfach nur so rumliegt ;-)

ungetestet würd ich jetzt sagen:

for (var i:int=0; i<=itm; i++) {

			var request:URLRequest=new URLRequest(xml.pfad[i]);
			var loader:Loader = new Loader();
			loader.load(request);
			loader.addEventListener(Event.COMPLETE, onLoaded);

		}

function onLoaded(e:Event):void {
var bmp:Bitmap;
bmp=e.currentTarget.content as Bitmap;
bmp.smoothing=true;

var t:bildcontainer = new bildcontainer();
t.addChild(bmp);
t.angle=(i*((Math.PI*2)/itm));
t.addEventListener(Event.ENTER_FRAME,onEnter);
karusell.addChild(t);
allItems.push(t);
}

ich hoffe ich irr mich da jetzt nicht ;-)

ich hab mir halt ne imageloader class geschrieben, und da greif ich dann immer das geladenen bitmap ab. müsste aber eigentlich das gleiche bei rauskommen.

Nee, das hatte ich schon probiert. Da fehlt ja auch die Var itm und i, die nicht mit in die Funktion übertragen werden. Es scheint ja zu funktionieren. Ich bin mit dem Ergebnis aber nicht sehr zufrieden, weil die Ränder meiner PNGs mit Transparentem Hintergrund ziemlich wackeln. Das ist aber wohl nicht zu lösen. Ich lasse es erstmal so. Damit, dass ich nun ein funktionierendes Karussell habe in AS3, bin ich zufrieden.

Schön wäre jetzt noch eine Reflektion der Bilder auf dem untergrund, so wie in anderen Beispielen oder meinem alten AS2 Karussel.

Danke dir für die Hilfe. Falls du mal Probs mit PHP hast, da bin ich firm!

[browerman]

oops, das i hatte ich übersehen.
dann nimm doch einfach noch ne counter variable dazu, die du jedesmal in der onLoaded hochzählst.

und itm ist doch nur die gesamtanzahl der items im karussel, die kannst du doch bequem am anfang deklarieren.

was die spiegelung angeht.
in der onLoaded hast du doch das bmp geladen. kopier das einfach in ein anderes bitmap, spiegel das ganze, packs unter die andere und hau dann noch nen gradient, z.b von transparent bis weiss drauf.

[Schwaermer]

@browerman: Klappt alles nicht. Selbst, wenn ich die Funktion mit in die Schleife nehme nicht. Es werden wohl aus den geladenen Bildern keine Bitmaps gemacht. Oder man kann die nicht einfach so an t hängen.
K.A. warum - es geht nicht.

Was noch zu verbessern wäre ist, dass die Bilder hinten weiter auseinander stehen, als die vorderen. Dafür müsste obj.angle entsprechend modifizieren. Aber höhere Mathematik ist nicht so mein Ding. Vielleicht hat jemand da eine simple Lösung, wie man das ausgleichen kann?