dynamischer Bilderimport mit Scrollbalken

[apekopp]

Hallo, ich versuche mein Problem so kurz wie möglich zu erleutern

Ziel:
1.dynamischer Bilderimport
2. vertikaler Scrollbalken

Durchführung:
- die Bilder werden mittels XML Ausgelesen und in einen MovieClip importiert
- eine Maske überhalb des Movieclips läßt nur einen Teil der Bilder sichtbar
werden
- ein Scrollbalken neben dem MovieClip läßt die Bilder in vertikaler Richtung (y-Achse) Scrollen

Problem:

die Bilder lassen sich zwar nach unten hin scrollen, aber der Scroller rastet immer wieder an seiner Ausgangsposition ein; befinden sich die Bilder auf der Bühne funktioniert alles wunderbar...es muß also an dem Importieren der Bilder liegen

ich hoffe ihr könnt mir mit meinem Problem weiterhelfen

//++++++++++++++XMLLOADER++++++++++++++++++//
var xmlLoader: URLLoader = new URLLoader();

xmlLoader.load(new URLRequest("loader.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlAusgabe);

function xmlAusgabe(evt:Event):void
{ 
	var xmlData:XML = new XML(evt.target.data);
 
		for(var i:int = 0; i < xmlData.bild.length(); i++)
		{
 			var imageLoader:Loader = new Loader();
 			var imageURL:URLRequest = new URLRequest(xmlData.bild.text()[i]);
 			imageLoader.load(imageURL);
 			imageLoader.y = i * 100;
			content_start.addChild(imageLoader);
 		}
}

//++++++++++++++BILDSCROLLER++++++++++++++++++//
var scrollH:Number = scrollTrk.height;
var contentH:Number = content_start.height;
var scrollFaceH:Number = scrollFace.height;
var maskH:Number = maskedView.height;

var initP:Number = scrollFace.y=scrollTrk.y;
var initContentP:Number = content_start.y;
var finalContentP:Number = maskH-contentH+initContentP;

var Left:Number = scrollTrk.x;
var Top:Number = scrollTrk.y;
var Right:Number = 0;

var Bottom:Number = scrollTrk.height-scrollFaceH;
var Bottom2:Number = scrollTrk.height-scrollFaceH+scrollTrk.y;

var dy:Number = 0;
var Dy:Number = 0;
var Speed:Number = 10;
var MoveVal:Number = (contentH-maskH)/(scrollH-scrollFaceH);
var CurrPos:Number
var Rect1:Rectangle = new Rectangle(Left,Top,Right,Bottom)

scrollFace.addEventListener(MouseEvent.MOUSE_DOWN, ScrollMouseDown)
scrollFace.addEventListener(MouseEvent.MOUSE_UP, ScrollMouseUp)
btnUp.addEventListener(MouseEvent.MOUSE_DOWN, BtnUpPress)
btnUp.addEventListener(MouseEvent.MOUSE_UP, BtnUpRelease)
btnUp.addEventListener(MouseEvent.MOUSE_OUT, BtnUpOut)
btnDown.addEventListener(MouseEvent.MOUSE_DOWN, BtnDownPress)
btnDown.addEventListener(MouseEvent.MOUSE_UP, BtnDownRelease)
btnDown.addEventListener(MouseEvent.MOUSE_OUT, BtnDownOut)

function ScrollMouseDown(event:MouseEvent) {
	
	CurrPos = this.scrollFace.y;
	scrollFace.startDrag(false, Rect1)
	scrollFace.addEventListener(Event.ENTER_FRAME, ScrollMove)
	stage.addEventListener(MouseEvent.MOUSE_UP, ReleaseOut)
};


function ScrollMove(event:Event) {
	Dy = Math.abs(initP-scrollFace.y);
	content_start.y = Math.round(Dy*-1*MoveVal+initContentP);
};

function ScrollMouseUp(event:MouseEvent) {
	scrollFace.stopDrag();
	scrollFace.removeEventListener(Event.ENTER_FRAME, ScrollMove)
};

function ReleaseOut(event:MouseEvent) {
	if (event.target == scrollFace){
    }else{
		scrollFace.stopDrag();
		scrollFace.removeEventListener(Event.ENTER_FRAME, ScrollMove)
    }
    stage.removeEventListener(MouseEvent.MOUSE_UP, ReleaseOut);
};


function BtnUpPress(event:MouseEvent) {
	btnUp.addEventListener(Event.ENTER_FRAME, BtnUpEnterFrame)
};


function BtnUpEnterFrame(event:Event) {
	if (content_start.y>=initContentP ||scrollFace.y<=Top){
		scrollFace.y = Top;
	}else{
		scrollFace.y -= Speed/MoveVal;
		content_start.y += Speed;
	}
};

function BtnUpRelease(event:MouseEvent) {
	btnUp.removeEventListener(Event.ENTER_FRAME, BtnUpEnterFrame)
};
function BtnUpOut(event:MouseEvent) {
	btnUp.removeEventListener(Event.ENTER_FRAME, BtnUpEnterFrame)
};


function BtnDownPress(event:MouseEvent) {
	btnDown.addEventListener(Event.ENTER_FRAME, BtnDownEnterFrame)
}
function BtnDownEnterFrame(event:Event) {
	if (content_start.y<=finalContentP ||scrollFace.y>=Bottom){
		scrollFace.y = Bottom2;
	}else{
		scrollFace.y += Speed/MoveVal;
		content_start.y -= Speed;
	}
};

function BtnDownRelease(event:MouseEvent) {
	btnDown.removeEventListener(Event.ENTER_FRAME, BtnDownEnterFrame)
};

function BtnDownOut(event:MouseEvent) {
	btnDown.removeEventListener(Event.ENTER_FRAME, BtnDownEnterFrame)
};


if (contentH<maskH) {
	scrollFace.visible = false;
	btnUp.enabled = false;
	btnDown.enabled = false;
} else {
	scrollFace.visible = true;
	btnUp.enabled = true;
	btnDown.enabled = true;
}

[stiffmeister]

gotoAndLearn() - Free video tutorials from Lee Brimelow on Adobe Flash
gotoAndLearn() - Free video tutorials from Lee Brimelow on Adobe Flash

[apekopp]

Danke...das tutorial kenne ich...hilft mir bei meinem problem leider nicht viel weiter...meine bilder befinden sich weder in der bibliothek noch auf der bühne sie werden via xml ausgelesen...und genau da liegt der fehler...ich komme nur einfach nicht darauf

[stiffmeister]

nja, ich möchte hier nicht zickig oder doof erscheinen aber ich an deiner stelle würde mir das tutorial noch paar mal reinziehen.

ausserdem startDrag() stopDrag() dingens würde ich in flash komplett weglassen, diese dinge verursachen meines erachtens nur probleme (weswegen ich die auch tunlichst vermeide).

anbei meine klasse:

PHP-Code:

/*
    // Scrollbar is the instance name of the scrollbar movieclip in the library
    var sb:Scrollbar = new Scrollbar;
    this.addChild(sb);
    sb.Init(targetContainer, masker, speed);
*/


package
{
    import flash.display.*;
    import flash.events.*;
    
    import com.pixelbreaker.ui.osx.MacMouseWheel;
    
    import com.greensock.*;
    
    
    
    public class Scrollbar extends MovieClip
    {
        private var con:*;                    // target container
        private var masker:*;                // masker
        private var speed:Number;            // scroll speed
        
        private var navSpeed:Number;        // 
        private var navColor:uint;            // 
        
        private var offset:Number;
        private var yMin:Number;
        private var yMax:Number;
        
        
        
        public function Scrollbar()
        {
            trace(this, "> start");
        }
        
        
        public function Init(con:*, masker:*, speed:Number):void
        {
            this.con = con;
            this.masker = masker;
            this.speed = speed;
            
            this.navSpeed = 0.5;
            this.navColor = 0xFF0000;
            
            sbSetup();
        }
        
        
        private function sbSetup():void
        {
            // activate mac mouse wheel
            MacMouseWheel.setup(this.stage);
            
            yMin = 0;
            yMax = sbTrack.height - sbDragger.height;
            
            sbDragger.buttonMode = true;
            sbDragger.addEventListener(MouseEvent.MOUSE_OVER, draggerOver);
            sbDragger.addEventListener(MouseEvent.MOUSE_OUT, draggerOut);
            sbDragger.addEventListener(MouseEvent.MOUSE_DOWN, draggerDown);
            con.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);
        }
        
        
        private function draggerOver(e:MouseEvent):void
        {
            TweenMax.to(e.currentTarget, navSpeed, { tint: navColor });
        }
        
        
        private function draggerOut(e:MouseEvent):void
        {
            TweenMax.to(e.currentTarget, navSpeed, { tint: null });
        }
        
        
        private function draggerDown(e:MouseEvent):void
        {
            sbDragger.removeEventListener(MouseEvent.MOUSE_OUT, draggerOut);
            
            sbDragger.addEventListener(MouseEvent.MOUSE_UP, draggerUp);
            stage.addEventListener(MouseEvent.MOUSE_UP, stageUp);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, draggerMoveY);
            
            offset = mouseY - sbDragger.y;
        }
        
        
        private function draggerUp(e:MouseEvent):void
        {
            sbDragger.addEventListener(MouseEvent.MOUSE_OUT, draggerOut);
            
            sbDragger.removeEventListener(MouseEvent.MOUSE_UP, draggerUp);
            stage.removeEventListener(MouseEvent.MOUSE_UP, stageUp);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, draggerMoveY);
        }
        
        
        private function stageUp(e:MouseEvent):void
        {
            TweenMax.to(sbDragger, navSpeed, { tint: null });
            sbDragger.addEventListener(MouseEvent.MOUSE_OUT, draggerOut);
            
            sbDragger.removeEventListener(MouseEvent.MOUSE_UP, draggerUp);
            stage.removeEventListener(MouseEvent.MOUSE_UP, stageUp);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, draggerMoveY);
        }
        
        
        private function mouseWheel(e:MouseEvent):void
        {
            sbDragger.y += (e.delta * 3) * - 1;
            
            moveY();
        }
        
        
        private function draggerMoveY(e:MouseEvent):void
        {
            sbDragger.y = mouseY - offset;
            
            moveY();
        }
        
        
        private function moveY():void
        {
            if (sbDragger.y <= yMin)
            {
                sbDragger.y = yMin;
            }
            
            if (sbDragger.y >= yMax)
            {
                sbDragger.y = yMax;
            }
            
            var nr:Number = sbDragger.y / yMax;
            TweenMax.to(con, speed, { y: ((-nr * (con.height - masker.height)) + this.y) });
        }
        
        
        public function KILL():void
        {
            trace(this, "--- KILL ALL ELEMENTS ---");
            
            sbDragger.removeEventListener(MouseEvent.MOUSE_OVER, draggerOver);
            sbDragger.removeEventListener(MouseEvent.MOUSE_OUT, draggerOut);
            sbDragger.removeEventListener(MouseEvent.MOUSE_DOWN, draggerDown);
            con.removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);
        }
    }
} 


con = container wo alle deine bilder lagern
sbDragger = der dragger ansich, darunter liegt der "sbTrack"
mask = die maske welche den "con" ausmaskiert um eben nur ein bild zb. sichtbar zu machen
speed = selbsterklärend

rumprobieren und fertig.