Picture scrollingbar

OK, war ne dumme Frage. Ist ja die einzige Scrolleiste. :)

Also ich würde es so machen:

1. Erstelle eine neue Ebene und zeichne an den Positionen, wo später die Enden der Scrollbar sein sollen, jeweils einen Kasten in der Hintergrundfarbe(ich nehme hier einfach mal schwarz). Ggf. kannst du die beiden noch in Movieclips konvertieren und ihnen einen Alpha-Wert zuweisen, dann aber bitte daran denken, auch untransparente dahinterzusetzen. Füge auf diese Kästen das Bild des Pfeils ein (kannst auch einen erstellen) und konvertiere auch sie in Mvieclips mit den Namen "Pfeil_links" und "Pfeil_rechts":

1.JPG


2. Jetzt fügst du die vielen Bilder in eine neue, der anderen Untergeordneten Ebene ein. Alle nebeneinander so, wie sie später gescrollt werden sollen (mir als WC3-Fan sei es verziehen, dass ich nur Helden aus eben diesem Spiel ausgewählt habe. Darunter auch mein Lieblingshero, die Warden. Aber ich schweife ab .... :) )

2.JPG


3. Diese Bilder Konvertierst du alle zusammen in einen Movieclip. Diesen nennst du "content", also Englisch für Inhalt. Kannst ihn natürlich im Endeffekt nennen wie du willst. Jetzt ist auch schon alles fertig für den AS.

Hier der AS für den rechten Button:
PHP:
on(rollOver) {
	this.onEnterFrame=function() {
		_root.content._x+=5;
	}
}
on(rollOut) {
	delete this.onEnterFrame;
}

Unter hier der für den linken:
PHP:
on(rollOver) {
	this.onEnterFrame=function() {
		_root.content._x-=5;
	}
}
on(rollOut) {
	delete this.onEnterFrame;
}

Das ganze ist noch erweiterbar z.B. durch eine Begrenzung des Scrollbereichs durch eine if-Abfrage und natürlich durch die Funktionalität der Buttons. Die folgt entweder Morgen oder (wenn mir jemand zuvor kommt) von jemand anderem, denn dazu habe ich keine Zeit mehr, weil es bereits 2:05 Uhr ist und ich ins Bett muss.
:)

Anbei die bisherige fla. Uff... ist ja ein ganzer Tutorial geworden :p
Mfg
loeff
 
Danke für das sehr aufschlussreiche Tutorial.
Jedoch stellt sich bei mir die Frage wie es im Script geschrieben werden muss, wenn die Scrollbar nicht von links nach rechts verläuft sondern von oben nach unten.
Außerdem wäre es gut, wenn sie beim letzten Bild anhalten würde.
Da ich mit den Scrollbars noch nicht so vertraut bin, hoffe ich, dass ihr mir hier weiterhelfen könnt.

Thanks
 
OK. Damit du auch verstehst was ich hier erzählt zunächst ein Bild:

achsen.png


Du siehst die 3 Koordinatenachsen X,Y und Z. Die Achse für Z ignorieren wir hier einmal ,denn wir wollen ja nichts in 3D machen. Die X-Achse zeigt zur Seite (nach rechts) und die Y-Achse nach Oben. Wir haben ja heute Nacht :) die X-Koordinate verändert. Dabei gilt die Regel: zu X addieren geht nach rechts und von X abziehen nach Links. Wenn wir also nach oben Scrollen wollen, müssen wir nur die jeweiligen Angaben von "x" durch "y" ersetzen:

PHP:
// AS des nach OBEN - Buttons
on(rollOver) { 
    this.onEnterFrame=function() { 
        _root.content._y+=5; // y+5 = 5Pixel nach oben
    } 
} 
on(rollOut) { 
    delete this.onEnterFrame; 
}

// AS des nach UNTEN - Buttons
on(rollOver) { 
    this.onEnterFrame=function() { 
        _root.content._y-=5; // y-5 = 5Pixel nach unten
    } 
} 
on(rollOut) { 
    delete this.onEnterFrame; 
}

Kommen wir zu deinem nächsten Problem. Die Bilder sollen am Ende aufhören zu scrollen. Ich persönlich verwende dazu immer den folgenden Trick, er ist zwar höchst wahrscheinlich nicht DER Weg, aber eben der, den ich immer wähle.

Zu anfang des Filmes speichern wir den Ausgangs-x-Wert von "content" in eine Variable und blockieren dann durch eine If-Abfrage das scrollen nach rechts, wenn der aktuelle Wert kleiner oder gleich dem Anfangswert ist. Also so:
PHP:
//AS des ersten Schlüsselbildes in der Ebene "Bilder":
anfang = _root.content._x; // ggf. y

// As des nach-rechts-Buttons
on(rollOver) {
	this.onEnterFrame=function() {
		if(_root.content._x <= _root.anfang) _root.content._x+=5; // ggf. y
	}
}
on(rollOut) {
	delete this.onEnterFrame;
}

/Edit 13. November 2007
Der rechte Rand ist this._x + this._width. Ignoriert den folgenden Absatz und fügt diesen Term in den nächsten Codsblock statt der 125 ein. Gruß.


Jetzt haben wir ein Problem, denn den rechten Rand können wir nicht so einfach bestimmen. Ich persönlich mache es so: ich erstelle ein dynamisches Textfeld und gebe ihm die Variable "test". Jetzt bekommt der "content"-Movieclip diesen AS:

PHP:
onClipEvent(enterFrame) {
	_root.zahl = this._x;
}

Jetzt führt du das ganze aus und scrollst soweit´, bis das ganze irgendwann aus den fugen gerät, also das letzte Bild genau da ist, wo es aufhören soll, zu scrollen. Diesen nun angezeigten Wert notierst du dir.

3.JPG


Bei mir ist es 131.65! Da wir ja immer um 5 Einheiten scrollen, bauen wir noch eine kleine Differenz ein und verwenden den Wert 125. Hier ist der fertige As des nach-links-Buttons:

PHP:
on(rollOver) {
	this.onEnterFrame=function() {
		if(_root.content._x > 125) _root.content._x-=5; 
	}
}
on(rollOut) {
	delete this.onEnterFrame;
}

Ich bin mir sicher, dass es auch eleganter oder einfacher geht. Dies Basiert auf meinem Wissensstand und auf meinen Methoden. Sollte jemand eine bessere Methode kennen, so bitte ich ihn, sie hier zu Posten. Ich dachte da evtl. an ein einbeziehen des xscale-Wertes anstatt des Umweges über das Textfeld, doch es funktionierte bei mir nicht. Alle Angaben ohne Gewähr :rolleyes: :eek: :)

Ich hoffe ich konnte dir helfen, hier nocheinmal die fla angehängt. Uff... mein Tutorial beginnt, gestalt anzunehmen :)

Mfg
loeff
 

Anhänge

  • scrolling.zip
    40,5 KB · Aufrufe: 202
Zuletzt bearbeitet:
Das Tutorial ist wirklich sehr gut gelungen, jedoch hab ich noch mal eine Frage und zwar wie muss ich das Script der Pfeile schreiben, wenn diese noch eine kleine animation bekommen (in einen neuen mc hinterlegen werden).
Muss man das dann mit _root schreiben, wenn ja kann mir jemand weiterhelfen.
 
Dieses Thread is zwar schon länger her, ich hoffe aber das mir jemand helfen kann. Hier ist meien Frage : Wie kann ich es machen das es so zusagen eine Endlosschleife herscht.

Ich hoffe jemand kann mir helfen !

mfG bloblu
 
Hallo.

Also. Soweit ich dich jetzt verstanden habe möchtest du, dass man unendlich weit nach rechts bzw. links scrollen kann, die Bilder sich also immer wieder wiederholen.

Genau dieses Thema habe ich in meinem Tutorial über Spieleprogrammierung bereits einmal angesprochen bzw. behandelt und ich erlaube mir einfach mal, dich auf den zu verweisen. Ich hoffe, die Admins hier haben den blad mal fertig "eingetutorialt.de" :p

Also bis denne
loeff
 
Zuletzt bearbeitet:
Der Verweis wurde gelöscht .
Das mit dem eingetutorialt werden kann sich eigentlich nur noch um Stunden handeln, wieviele weiss ich aber auch nicht.

VIelleicht suchst du mal unter dem Begriff Panorama, viellciht hilft dir das weiter...


Grüsse
B
 
Zurück