Ich habe ein einfaches Tutorial/Script für ein Coverflow-Menü gefunden.
Hier der Link zum Tutorial.
Leider arbeitet das Tutorial mit PaperVision3d Elementen, nämlich planes.
Ich habe aber keinen Weg gefunden einem plane einen Rahmen und eine Reflektion zu verpassen.
Deshalb habe ich das Script umgeschrieben, PaperVision3d raus gelassen und die Elemente als Sprites verarbeitet.
Leider stimmt bei der Ausgabe der rechten Seite die Reihenfolge auf der z-Achse nicht mehr.
Sprich, weiter rechts liegende Elemente überlagern die links liegenden.
Ich habe ein bisschen mit dem SimpleZSorter() gespielt. Leider ohne Erfolg.
Ich schaff es nicht, die Sprites vernünftig anzuordnen.
Im Original mit den planes ist das Problem nicht vorhanden, das irritiert mich. Liegt es also an den Sprites?
Könnte mir bitte jemand helfen?
Das Problem bezieht sich wohl auf die Funktion animate().
Weil ich mir aber nicht sicher bin ob das Problem seine Ursache nicht schon früher hat, poste ich mal die komplette Klasse.
- Code: Alles auswählen
package com {
import com.SimpleZSorter;
import com.greensock.TweenLite;
import com.greensock.easing.Quint;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Loader;
public class Carousel extends Sprite {
private var container:Sprite;
protected var sprites:Array = [];
private var loader:URLLoader;
protected var numItems:Number;
protected var currentItem:Number;
protected var angle:Number = 55;
private var scale:Number;
public function Carousel() {
init();
loadXML();
}
private function loadXML():void {
loader = new URLLoader(new URLRequest("xmllist/myxml.xml"));
loader.addEventListener(Event.COMPLETE, createCarousel);
}
private function createCarousel(e:Event):void {
var xml:XML = new XML(e.target.data);
var list:XMLList = xml.img;
numItems = list.length();
currentItem = Math.ceil(list.length()/2)-1;
createChildren(xml.img);
animate();
}
private function createChildren(itemList:XMLList):void {
for (var i:int = 0; i < numItems; i++){
var imc:imCon = new imCon(); // MovieClip in der Blibliothek der fla
imc.buttonMode = true;
var l:Loader = new Loader();
// Bild ausrichten
l.x = -250;
l.y = -187;
//
var r:URLRequest = new URLRequest(itemList[i].cover.@src);
l.load(r);
imc.addChild(l);
// Kontainer skalieren
scale = ((100 / imc.width) * 100);
imc.scaleX = imc.scaleY = scale/100;
//
sprites.push(imc);
imc.addEventListener(MouseEvent.CLICK, onPlaneClick);
imc.id = i;
//imc.z = 0; // wenn SimpleZSorter() verwendet wird, braucht z einen Wert
container.addChild(imc);
}
}
private function onPlaneClick(e:MouseEvent):void {
if (currentItem == e.currentTarget.id) {
trace("Hund"); // Platzhalter
}else{
currentItem = e.currentTarget.id;
animate();
}
}
private function init():void {
container = new Sprite();
container.x = 250;
container.y = 100;
container.z = 0;
addChild(container);
}
protected function animate():void {
for (var i:int = 0; i < sprites.length; i++) {
var item:Sprite = sprites[i];
var itemX:Number = 0;
var itemZ:Number = 0;
var itemRotationY:Number = 0;
//Place & Animate Center Item
if (i == currentItem) {
itemZ = -150;
TweenLite.to(item, 1, { rotationY:itemRotationY,x:itemX,z:itemZ, ease:Quint.easeInOut } );
}
//Place & Animate Right Items
if(i > currentItem) {
itemX = (i - currentItem + 1) * 35;
itemRotationY = angle + 0 * (i - currentItem);
TweenLite.to(item, 1, { rotationY:itemRotationY,x:itemX,z:itemZ, ease:Quint.easeInOut } );
}
//Place & Animate Left Items
if (i < currentItem) {
itemX = (currentItem - i + 1) * -35;
itemRotationY = -angle - 0 * (currentItem - i);
TweenLite.to(item, 1, { rotationY:itemRotationY,x:itemX,z:itemZ, ease:Quint.easeInOut } );
}
}
//SimpleZSorter.sortClips(container); // damir konnte ich das Problem nicht lösen
}
}
}
Die XML dazu sieht z.B. so aus, ist aber wahrscheinlich nicht für mein Problem verantwortlich
- Code: Alles auswählen
<?xml version="1.0" encoding="utf-8"?>
<imglist>
<!-- Copy&Paste für mehr Elemente -->
<img name="firstImage">
<cover src="covers\1.jpg" />
<artist></artist>
</img>
</imglist>
Ich komm einfach nicht weiter bei der Sortierung der Elemente. Wäre schön wenn jemand einen Tipp für mich hat.
Danke und Grüße!
