Bildergalerie

[hany1]

Hallo Alle zusammen,

ich komme irgendwie nicht weiter und hoffe, jemand von euch könnte mir helfen.

Es geht hier um eine vertikale Bildergalerie. Bilder (ca. 10 Bilder) werden per XML in einen einzigen MC geladen und dann per Tween animiert. Das klappt sehr gut. Der Slider läuft automatisch durch, wenn alle Bilder geladen worden sind.

Dann gibt es zwei Events:
MouseEvent.MOUSE_OVER -> hier wird das Scrollen angehalten.
MouseEvent.MOUSE_OUT -> hier wird das Tween fortgesetzt.
Positioniert man die Maus auf ein Bild, wird die Animation angehalten.
Das klappt auch. Es gibt auch zwei Schaltflächen zum manuellen Scrollen nach links und nach rechts.

Hier taucht das Problem auf. Wenn ich eine der zwei (rechts oder links) Schaltflächen betätige und per MOUSE_OVER dann ein Bild anhalten möchte, klappt irgendwie nicht. Da wird das MouseEvent nicht ausgelöst und der Slider läuft weiter durch.



Hier ist der Code: Er sieht ein bißchen durcheinander aus, weil ich einiges probiert habe.

PHP-Code:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;


var myTween = new Tween(alles, "x",  None.easeIn, 100,-4530, 100, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

//////////////////////////////////////// MC alles ist der Container, in dem alle Bilder geladen werden.
alles.addEventListener(MouseEvent.MOUSE_OVER,rollout); 
alles.addEventListener(MouseEvent.MOUSE_OUT,weiter); 

///////// rechts und links -> Manuelles Scrollen nach rechts und nach links
rechts.addEventListener(MouseEvent.CLICK, forward);
links.addEventListener(MouseEvent.CLICK, back);

function forward(evt:MouseEvent) { 
 
alles.removeEventListener(MouseEvent.MOUSE_OVER,rollout); 
alles.removeEventListener(MouseEvent.MOUSE_OUT,weiter); 
var sekunden:Number = alles.x / 45;
sekunden = - sekunden

 var myTween = new Tween(alles, "x",  None.easeIn, alles.x,100, sekunden, true);

myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
//alles.addEventListener(MouseEvent.MOUSE_OVER,rollout); 
//alles.addEventListener(MouseEvent.MOUSE_OUT,weiter);

}
/////////////////////////////////////////////////////////



function back(evt:MouseEvent) { 
alles.removeEventListener(MouseEvent.MOUSE_OVER,rollout); 
alles.removeEventListener(MouseEvent.MOUSE_OUT,weiter);
var diff:Number = -4530 - alles.x;
trace (diff);
var sekunden:Number = diff / 45;
sekunden = - sekunden

 var myTween = new Tween(alles, "x",  None.easeIn, alles.x,-4530, sekunden, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);


}

/////////////////////////////////////////////////////////////////////////////



function onFinish(e:TweenEvent):void {
alles.removeEventListener(MouseEvent.MOUSE_OVER,rollout); 
alles.removeEventListener(MouseEvent.MOUSE_OUT,weiter);
myTween.start();

alles.addEventListener(MouseEvent.MOUSE_OVER,rollout); 
alles.addEventListener(MouseEvent.MOUSE_OUT,weiter);
}


function rollout(evt:MouseEvent) { 
 myTween.stop();

}

function weiter(evt:MouseEvent) { 
myTween.resume();

} 


Ich bin echt dankbar für jede Hilfe.

Vielen Dank im Voraus
Hany

[silverchecker]

ok, wie es aussieht, wird der "manuelle Tween" so gesetzt, dass er andauert, bis die Bildergalerie am Ende ist (gleich in welcher Richtung). Das onFinish wird also erst ganz zum Schluss aufgerufen.

Und da du erst im onFinish die MOUSE_OVER und MOUSE_OUT Listener wieder setzt, funktioniert bis dahin freilich das MOUSE_OVER und MOUSE_OUT nicht.
(wobei mir noch nicht ganz klar ist, warum du Listeners im onFinish nochmals entfernst bevor du sie gleich darauf wieder setzt)

Es gibt verschiedene Lösungen, die man durchspielen könnte. Am besten ist es glaub ich, denn globalen Tweener in Methoden forward und back einfach ganz abzubrechen und neu zu setzen und an den Listeners gar nix zu verändern.
Freilich würde ich empfehlen dafür auf die lokalen Tweener-Variablen zu verzichten und stattdessen überhaupt nur eine globale Tweener-Variable zu verwenden.
(Zumal mich das ohnehin irritiert. Es wird ein Heap-Objekt angelegt und die einzige Referenz darauf geht eine Zeile später out of scope. Normalerweise könnte da dann der böse Garbage Collector kommen und den Tween einfach löschen. Komischerweise sind aber genau solche Beispiele auch auf der Adobe-Seite. Muss ich mal recherchieren, was es damit auf sich hat)

Ich weiß allerdings nicht genau, ob das dann das Verhalten ist, das du möchtest.

Eine Sache irritiert mich: die manuellen Scrolls scheinen in die falsche Richtung zu gehen.

Und noch eine Frage. Sind die Magic Values für die Verständlichkeit des Beispiels oder original so drinnen?

[hany1]

Hallo silverchecker,

vielen Dank für deine Antwort!

Ich habe in die onFinish Function die removeEventListener und addEventListener eingefügt, weil diese MouseEvents nicht mehr ausgelöst worden sind, nachdem ich die Schaltflächen (links und rechts) betätigt habe.
Ursprünglich war es so:

function onFinish(e:TweenEvent):void {
myTween.start();
}

Aber wie gesagt, die MouseEvents waren ohne Wirkung, darum habe ich sie nachträglich in die onFinish-Function eingefügt.

Sonst läuft die Galerie so durch, wie ich es mir vorgestellt habe.

Beim Laden werden die Bilder von rechts nach links gescrollt und laufen in Schleife durch. Bewege ich die Maus darüber, bleibt die Animation bei dem jeweiligen Bild stehen. Bewege ich die Maus vom MovieClip weg, wird das Scrollen fortgesetzt.

Ab hier ist das Problem:
Sobald ich dann die Schaltflächen (links und rechts) betätige, werden die MouseEvent (rollout und weiter) nicht mehr ausgelöst. Vielleicht ist es irgendwelche Kleinigkeit, die ich übersehen habe...

"Eine Sache irritiert mich: die manuellen Scrolls scheinen in die falsche Richtung zu gehen."
Meinst du hier die forward und back function? Sie werden eingesetzt, um vor und zurück zu scrollen. Die Bezeichnungen sind irgendwie unglücklich.

Die Magic Values sind original drinnen. u.a. die Breite des MovieClips.

Vielen Dank noch noch mal silverchecker!

Viele Grüße
hany

[silverchecker]

Zitat von hany1

Vielleicht ist es irgendwelche Kleinigkeit, die ich übersehen habe...

Wo der Fehler liegt, hab ich bereits im vorigen Post geschrieben. Vielleicht hast du's ja überlesen: Hier nochmal:

...wird der "manuelle Tween" so gesetzt, dass er andauert, bis die Bildergalerie am Ende ist (gleich in welcher Richtung). Das onFinish wird also erst ganz zum Schluss aufgerufen.

der Ablauf ist also so:

Tweenen -> Klick auf einen Button -> "ent"-registrieren der Listeners -> Srcoll bis ganz zum Schluss -> onFinish (erst hier werden die Listeners wieder gesetzt, da ist aber der gesamte Scroll - bis zum absoluten Ende- schon vorbei).

Die Lösung hatte ich dir auch schon geschrieben:

Am besten ist es glaub ich, denn globalen Tweener in Methoden forward und back einfach ganz abzubrechen und neu zu setzen und an den Listeners gar nix zu verändern.

Ich schreibs dir mal um, und poste nochmal

[silverchecker]

.....

function forward(evt:MouseEvent)
{
var sekunden:Number = alles.x / 45;
sekunden = - sekunden

myTween.stop();
myTween = new Tween(alles, "x", None.easeIn, alles.x,100, sekunden, true);

}

function back(evt:MouseEvent)
{
var diff:Number = -4530 - alles.x;
var sekunden:Number = diff / 45;
sekunden = - sekunden

myTween.stop();
myTween = new Tween(alles, "x", None.easeIn, alles.x,-4530, sekunden, true);

}

//onFinish() benötigst du nicht mehr.

function rollout(evt:MouseEvent) {
myTween.stop();

}

function weiter(evt:MouseEvent) {
myTween.resume();

}


//Das ist jetzt aber so schnell hingehackt - bitte noch kontrollieren...

[hany1]

vielen Dank für den Code!

Es funktioniert auch sehr gut. Aber die Animation geht nicht weiter, wenn das Tween zu ende geht. Darum habe ich auch die onFinish function mit eingebaut.

Wenn die Animation (egal rechts oder links) endet, muss dann die Animation in Schleife durchlaufen.


Eventuell hilft hier eine Schleife oder If-Abfrage. mal schauen

[silverchecker]

ok - aber das Ursprungsproblem ist gelöst, oder? Ich komm jetzt im Moment nicht dazu, aber wenn ich die Zeit finde, suche ich noch eine Lösung, für das "im Kreis scrollen".

[hany1]

Hallo Silverchecker,

ich habe endlich die Lösung. Es funktioniert auch wunderbar, genau wie ich es haben wollte.

Da ich die onFinish Funktion doch benötige, Habe sie wieder auskommentiert. Ich habe auch neue Funktion erstellt und zwar die onManuelSrollFinish Funktion. Wenn das manuelle Scrollen per Schaltflächen (links und rechts) das Ende erreicht, wird dann diese Funktion aufgerufen. Da läuft ein neues Tween ab z.B. die Achse X 100 durch und danach wird die onFinish Funktion dann wieder aufgerufen, damit die Animation in Schleife durch läuft.

Es ist zwar nicht die eleganteste Art. Aber es funktioniert prima.

Vielen Dank für deine Hilfe

Hier ist der fertige Code:


import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;


var myTween = new Tween(alles, "x", None.easeIn, 100,-4130, 100, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

//////////////////////////////////////// MC alles ist der Container, in dem alle Bilder geladen werden.
alles.addEventListener(MouseEvent.MOUSE_OVER,rollo ut);
alles.addEventListener(MouseEvent.MOUSE_OUT,weiter );

///////// rechts und links -> Manuelles Scrollen nach rechts und nach links
rechts.addEventListener(MouseEvent.CLICK, forward);
links.addEventListener(MouseEvent.CLICK, back);

function forward(evt:MouseEvent)
{
var sekunden:Number = alles.x / 45;
sekunden = - sekunden

myTween.stop();
myTween = new Tween(alles, "x", None.easeIn, alles.x,100, sekunden, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onManuelSrollFinish);

}

function back(evt:MouseEvent)
{
var diff:Number = -4130 - alles.x;
var sekunden:Number = diff / 45;
sekunden = - sekunden

myTween.stop();
myTween = new Tween(alles, "x", None.easeIn, alles.x,-4130, sekunden, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onManuelSrollFinish);

}



function rollout(evt:MouseEvent) {
myTween.stop();

}

function weiter(evt:MouseEvent) {
myTween.resume();

}
function onFinish(e:TweenEvent):void {

myTween.start();

}
function onManuelSrollFinish(e:TweenEvent)
{
myTween.stop();
myTween = new Tween(alles, "x", None.easeIn, 100,-4130, 100, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

}