panorama image slider

[echo5-7]

hi,
ich hab ein script für einen panorama image slider erstellt.
da ich hier im forum aber noch keinen thread gefunden hab, der das ausführlich behandelt,
und ich hab tatsächlich die suche benutzt, will ich mal versuchen meinen hier zu erläutern,
so das es auch anfänger im AS verstehen (also deppen wie ich).

vorher aber noch ein paar dinge:
1. der code stammt tatsächlich von mir, und ist ohne tut hilfe entstanden, was man ihm wohl ansieht (trotzdem stolz bin)
2. das ding ist zu 60/40 überlegung/try-and-error entstanden
3. ich hab nicht wirklich 100% ne ahnung wie er funktioniert,
weshalb ich auch keine garantie auf vollständigkeit/korrektheit der erklärung übernehme
4. wenn mir jemand genau erklären kann wie das ding funktioniert, bitte ich darum. mich interessierts selber.

also los.

hier könnt ihr schauen.


primär braucht man dafür:

eine neue .fla und ein bild das die höhe der .fla, aber nicht ihre breite hat. ist das bild höher, wird es bei mir nicht angezeigt.
bei jpegs solltet ihr darauf achten, das sie nicht mit mehreren durchgängen gespeichert wurden, sonst zeigt mx sie euch nicht an.

auf der bühne erstellt ihr ein neues mc, packt das bild darein, positioniert das bild im mc mittig, und dann das mc ebenso auf der bühne.
der y wert auf der bühne ist null.

dann nehmt ihr den code hier, und klickt das mc an, und fügt ihn im actionen fenster ein.


der code dazu:

onClipEvent(enterFrame){
breitebuehne = stage.width;
xmouse = _root._xmouse;
mcbreite = this._width;
speedfactor = 10;
relation = mcbreite / breitebuehne;
aalt = getProperty(this.mc,_x);
 
if(xmouse < breitebuehne && xmouse > 0)
{
//des pudels kern
aneu = ((((xmouse*relation)-(mcbreite/2))/(mcbreite/(mcbreite-breitebuehne)))+(breitebuehne/2));
 
if(xmouse > breitebuehne/2){
if(aalt < aneu){
this._x =  this._x + Math.abs((aneu -aalt)/100)*speedfactor;
}
if(aalt> aneu){
this._x =  this._x - Math.abs((aneu - aalt)/100)*speedfactor;   
}
 
}
}
 
if(xmouse < breitebuehne/2){
if(aalt > aneu){
this._x =  this._x - Math.abs((aneu - aalt)/100)*speedfactor;
}
if(aalt < aneu){
this._x =  this._x + Math.abs((aneu - aalt)/100)*speedfactor;
}
}
 
} 

ich werde jetzt den code zeile für zeile durchgehen.

onClipEvent(enterFrame){
 
breitebuehne = stage.width;
xmouse = _root._xmouse;
mcbreite = this._width;
speedfactor = 10;
relation = mcbreite / breitebuehne;
aalt = getProperty(this.mc,_x); 

onClipEvent(enterFrame) dürfte jedem klar sein, wenn das MC auf der Bühne ist, und der Zeiger auf dem Frame, dann mache dies und das.
der rest sind variablen.
breitebuehne ist selbsterklärend,
xmouse ist die x position der maus,
mcbreite ist die breite des movieclips in der die bilddatei liegt,
der speedfactor bestimmt wie schnell sich nachher das bild bewegt,
relation ist das längenverhältnis von mc zu bühne,
und aalt ist die position des mc's auf der bühne.
aalt, weil ich den punkt a benannt habe, und alt erklärt sich später.

if(xmouse < breitebuehne && xmouse > 0) 

wenn die x position der maus größer als null ist, heißt nicht über den linken rand hinaus geht, und die x mausposition aber noch auf der buehne
und nicht über den rechten rand hinaus ist, dann mache....

aneu = ((((xmouse*relation)-(mcbreite/2))/(mcbreite/(mcbreite-breitebuehne)))+(breitebuehne/2)); 

augen auf und aufgepasst. das hier ist der kerncode der die verschiebung berechnet.
leider weiß ich nicht genau wie er funktioniert, try-and-error eben, aber ich werde versuchen mein grundkonzept zu erläutern.

also:
xmouse * relation legt einen punkt auf dem mc fest, der relativ zu der x position der maus steht. das ist wichtig,
weil dieser punkt, der auf dem mc ist, der an die x position der maus bewegt werden soll.

-mcbreite/2 setzt diesen punkt um genau die hälfte der breite des mc's zurück. heist, der x wert dieses punktes im mc,
wird niemals größer als die hälfte der breite des mc's werden, und niemals kleiner als die negative hälfte des mc's.

(mcbreite/(mcbreite-breitebuehne)) gibt das längenverhältnis der über die bühne hinausragenden stücke des mc's zur gesammtlänge des mc's an.
stimmt dieses verhältnis nicht, wird euch der slider das bild entwerder zu weit nach links und rechts schieben, so das die bühne sichtbar wird,
oder das bild zu knapp bewegen, so dass es nicht komplett sichbar ist.

+(breitebuehne/2) setzt den mc in die mitte der bühne, sonst würde er komisch an anderer position rumfahren.

vollkommen ausgerechnet, ergibt sich daraus die neue x position des mc's.

if(xmouse > breitebuehne/2){
if(aalt < aneu){
this._x =  this._x + Math.abs((aneu -aalt)/100)*speedfactor;
}
if(aalt> aneu){
this._x =  this._x - Math.abs((aneu - aalt)/100)*speedfactor;   
}
 
}
} 

wenn die maus sich in der linken hälfte der bühne aufhält, dann prüfe, ob sie sich in linke oder rechte richtung bewegt.
das sind die aalt > aneu oder aalt< aneu abfragen.
und wenn das festgestellt wurde, ziehe pro zyklus den entstandenen wert ab.
genau das gleiche, nur umgekehrt passiert in der rechten bühnenhälfte.

der wert errechnet sich aus dem abstand der durch die maus festgelegten,
gewünschten neuen position, der alten position, beides durch 100, was den wert sehr klein macht, und dann mal dem speedfactor.
lasst ihr den speedfactor weg, bewegt sich euer bild nur seeeeehr langsam.
macht ihr in dagegen riesen groß, habt ihr den effekt, den ihr ohne diese verzögerung hättet.

der code für aneu errechnet ja die gewünschte position, die der mc haben soll.
anstelle aneu könntet ihr aber auch gleich this._x = ... schreiben, und dieses verzögerungsscript weglassen.
dann hättet ihr gewissemaßen das fundament für einen textscroller.

anstelle this._x = this._x + / - kann man auch this._x += oder
this._x -= schreiben. der effekt ist der gleiche.




jetzt noch etwas:
solltet ihr die bilder dynamisch nachladen wollen, und das mc auf 0/0 setzen, ergibt sich für aneu ein anderer code:

aneu = ((((xmouse*(mcbreite / breitebuehne))
-(mcbreite/2))/(mcbreite/(mcbreite-breitebuehne)))-(Math.abs(mcbreite- breitebuehne)/2)); 

der rest bleibt wie gehabt.



so, hoffe ich konnte denjenigen helfen, die nach so einem effekt suchen. hat mich mathedeppen ne woche gekostet,
diesen kruscht auszutüfteln. dafür ist er aber 100% echo5-7

ps: wer rechtschreibfehler findet, darf sie behalten

[r0b]

Sau-bär!

Schönes Teil.
Zu 3. und 4. *g*
Ich denke du solltest öfter mal ein Tutorial schreiben. Hat wirklich Spass gemacht dieses hier zu lesen. Ein 100% Echo5-7.

mfg

Robert

[echo5-7]

danke

[Arne_Schmidt]

Das glaub mir jetzt zwar keiner, aber gerade wollte ich einen "Wie mach ich denn nen richtig guten Imageslider"-Thread aufmachen, da find ich das hier...

Sehr schön!

Ich hoffe es ist gestattet sich von deinem code ähem...äh... inspirieren zu lassen für die eigene website.

as

[echo5-7]

klar, dafür hab ich's ja gepostet

[echo5-7]

noch eine anmerkung:

in der flashinternen vorschau funktioniert das ding nicht, weiß der geier warum!