Mehrere geschichtete Container scrollen

Von Zugfahrten kennt man, dass Objekte im Vordergrund schneller am Fenster vorbeiziehen als Objekte, die weiter hinten liegen. Diesen Tiefeneffekt kann man nutzen und mehrere Container überlagern. Z.B. je einen Container für den Vorder-, Mittel- und Hintergrund.
Siehe z.B. http://www.stylewars.com/index2.html

Diese Container  müssen beim Scrollen unterschiedlich schnell bewegt werden damit der Effekt wirksam wird.
In der nachfolgenden swf-Dateilassen sich drei Container über die Dreieckbuttons am linken und rechten Bühnenrand scrollen.

 

 

Das Grundprinzip des Scrollen von Containern aus Kaptiel 2 bleibt gleich. Es muss aber gleichzeitig auf mehrere Container angewandt werden.

Man muss nur überlegen, in welcher Geschwindiglkeit die drei Container bewegt werden müssen.
 

Berechnung der Scrollgeschwindigkeit

Der Container im Vordergrund ist der längste, da er sich am schnellsten bewegen muss. Die maximale Scrolldistanz ist a. Nach hinten hin werden die Container immer kürzer und somit auch die maximalen Scrolldistanzen b und c.

Wenn man nun eine Schrittweite vorgibt, muss für jeden Container ein Faktor errechnet werden, mit dem die Schrittweite multipliziert wird. Der Bezugscontainer ist der vorderste mit dem Faktor 1.

Die Faktoren b/a bzw. c/a reduzieren für den Mittel- bzw. Hintergrund die Schrittweite, sodass die drei Container immer synchron laufen und gleichzeitig am linken und rechten Bühnenrand anstehen.

Skript (scroll_schichten.fla):

Das Skript wird wieder im ersten Frame des Mainmovies platziert.

Es gibt 3 Instanzen von Movieclipcontainern:
Vordergrund ... container1_mc,
Mittelgrund ... container1_mc,
Hintergrund ... container1_mc.

In den Variablen speedFactor1 und speedFactor2 werden die Faktoren zur Schrittweitenreduzierung für die Container container2_mc und container3_mc gespeichert.

Da zu Beginn die drei Container auf die linke Bühnenkante ausgerichtet sind, wird der linke Scrollbutton zuerst ausgeblendet.

In den Funktionen startScrollen und stopScrollen werden die Eventhandler nachLinks und nachRechts für alle drei Container aktiviert bzw. deaktiviert.

In den Funktionen nachLinks und nachRechts wird je nachdem für welchen Container die Funktionen aufgerufen wurden, die Schrittweite mit dem entsprechenden Reduzierungsfaktor multipliziert.

var schrittweite:int=10;
var speedFactor1:Number=(container2_mc.width-stage.stageWidth)/(container1_mc.width-stage.stageWidth);
var speedFactor2:Number=(container3_mc.width-stage.stageWidth)/(container1_mc.width-stage.stageWidth);

 
links_btn.visible=false;

links_btn.addEventListener(MouseEvent.ROLL_OVER, startScrollen);
rechts_btn.addEventListener(MouseEvent.ROLL_OVER, startScrollen);
function startScrollen(e:MouseEvent):void {
switch (e.target) {
case links_btn :
rechts_btn.visible=true;
container1_mc.addEventListener(Event.ENTER_FRAME, nachRechts);
container2_mc.addEventListener(Event.ENTER_FRAME, nachRechts);
container3_mc.addEventListener(Event.ENTER_FRAME, nachRechts);
break;
case rechts_btn :
links_btn.visible=true;
container1_mc.addEventListener(Event.ENTER_FRAME, nachLinks);
container2_mc.addEventListener(Event.ENTER_FRAME, nachLinks);
container3_mc.addEventListener(Event.ENTER_FRAME, nachLinks);
break;
}
}
links_btn.addEventListener(MouseEvent.ROLL_OUT, stopScrollen);
rechts_btn.addEventListener(MouseEvent.ROLL_OUT, stopScrollen);
function stopScrollen(e:MouseEvent):void {
switch (e.target) {
case links_btn :
container1_mc.removeEventListener(Event.ENTER_FRAME, nachRechts);
container2_mc.removeEventListener(Event.ENTER_FRAME, nachRechts);
container3_mc.removeEventListener(Event.ENTER_FRAME, nachRechts);
break;
case rechts_btn :
container1_mc.removeEventListener(Event.ENTER_FRAME, nachLinks);
container2_mc.removeEventListener(Event.ENTER_FRAME, nachLinks);
container3_mc.removeEventListener(Event.ENTER_FRAME, nachLinks);
break;
}
}
function nachLinks(e:Event) {
switch (e.target) {
case container3_mc :
e.target.x -= schrittweite * speedFactor2;
break;
case container2_mc :
e.target.x -= schrittweite * speedFactor1;
break;
case container1_mc :
e.target.x -= schrittweite;
break;
}
if (e.target.x < stage.stageWidth-e.target.width) {
// alle Container werden wieder exakt auf den rechten Rand ausgerichtet
container1_mc.x=stage.stageWidth-container1_mc.width;
container2_mc.x=stage.stageWidth-container2_mc.width;
container3_mc.x=stage.stageWidth-container3_mc.width;
rechts_btn.visible=false;
e.target.removeEventListener(Event.ENTER_FRAME, nachLinks);
}
}
function nachRechts(e:Event) {
switch (e.target) {
case container3_mc :
e.target.x += schrittweite * speedFactor2;
break;
case container2_mc :
e.target.x += schrittweite * speedFactor1;
break;
case container1_mc :
e.target.x += schrittweite;
break;
}
if (e.target.x > 0) {
// alle Container werden wieder exakt auf den linken Rand ausgerichtet
container1_mc.x=0;
container2_mc.x=0;
container3_mc.x=0;
links_btn.visible=false;
e.target.removeEventListener(Event.ENTER_FRAME, nachRechts);
}
}