Simpler Picture Ticker [AS3]

[mohj]

Der Picture Ticker ist im Prinzip ein News Ticker (also ein ständig laufender Text), aber anstatt Text laufen Bilder über die Bühne.

Beispiel: http://deine-komplizen.de/daten/bill/bill.html
(Danke an truschi007)

Features:
- basiert auf Action Script 3
- simpel und einfache Handhabung
- Bilder werden aus einem externen Verzeichnis geladen
- Automatischer Start nachdem x-beliebig viele Bilder geladen wurden
- Nahtloser Übergang zum ersten Bild falls das letzte Bild erreicht ist
- Automatisches, pixelgenaues Anordnen der Bilder. Sie können an der Oberkannte, mittig oder an der Unterkante ausgerichtet werden
- Bilder können beschriftet werden
- Bilder können geklickt werden und einen benutzerdefinierten RollOver Effekt besitzen
- Reflektion, in der Intensität variabel
- Schatten, der jederzeit änderbar ist in der Farbe und Stärke
- Rahmen mit benutzerdefinierter Farbe und Grösse
- Frei definierbare Härte der Tickerkanten, wodurch ein Fade In/Out Effekt erzielt werden kann
- Abstand und Geschwindigkeit können jederzeit geändert werden
- Möglichkeit den Ticker beliebig zu stoppen und starten
- Benutzerdefinierte Events
- Fehlermanagement

Anwendung:
Benötigt wird lediglich ein PHP unterstützender Hoster und ein Verzeichnis mit Bildern. Diese Bilder können beliebige Namen und Bildformate haben. Die geladenen Bilder werden nach Dateinamen sortiert. Sollen die Bilder also eine bestimmte Reihenfolge haben, kann beim Bildnamen ein Prefix hinzugefügt werden (zB 01_, 02_ usw.), welcher bei der setText Methode wieder entfernbar ist, falls die Beschriftung gleich dem Dateinamen sein soll.
Danach muss der Picture Ticker nur instanziiert werden und schon werden die Bilder automatisch geladen und angezeigt. Dabei müssen folgende Parameter übergeben werden:

PHP-Code:

new PictureTicker(folder:String, width:uint, height:uint); 


folder: Verzeichnis der Bilder, zB "pictures", oder mit Pfadangabe "../../pictures" (Achtung: Übergeordnete Pfade mit zwei Punkten!)
width: Breite des Tickers in Pixel
height: Höhe des Tickers in Pixel

Optional:

PHP-Code:

new PictureTicker(folder:String, width:uint, height:uint, align:int, space:uint, speed:uint, fade:uint, start:uint); 


align: Ausrichtung. Grösse bestimmt den Abstand zur Kante. Eine positive Zahl richtet die Bilder an der Oberkannte, eine negative Zahl an der Unterkante aus. 0 zentriert die Bilder. Standartwert: 0 (mittig)
space: Abstand zwischen den Bildern in Pixel. Standartwert: 20px
speed: Geschwindigkeit, Zahl zwischen 1 und 50, je grösser, desto schneller. Standartwert: 25
fade: Fadeeffekt an der Tickerkanten. Je grösser, desto weicher die Kante. Standartwert: 0 (harte Kante)
start: Anzahl der Bilder, die geladen werden sollen bevor der Ticker startet. Standartwert: 3

Methoden:

start(): Startet den Ticker
stop(): Stoppt den Ticker
clear(): Entfernt alle Effekte

setButtons(mode:Boolean, MouseOverFilter:Array):
Erstellt klickbare Buttons.
Optional:
MouseOverFilter: Array, mit den gewünschten BitmapFilter für den RollOver Effekt. Standartwert: Kein Effekt

setText(text:Array, textFormat:TextFormat, align:int, cut:int, backgroundAlpha:Number, backgroundColor:uint):
Beschriftet die Bilder. Im text Array kann jeder Button einzeln beschriftet werden. Enthält das Array nur ein Wert, wird dieser genommen und automatisch eine hochzählende Zahl angehängt. Wird ein leeres Array übergeben, werden automatisch die Dateinamen verwendet (ohne Dateiendungen).
textFormat: TextFormat für die Beschriftung.
Optional:
align: Anordnung der Beschriftung, Grösse bestimmt den Abstand zum Bild. Eine negative Zahl positioniert die Beschriftung oberhalb des Bildes, eine positive unten. Zahl -2 platziert den Text genau oberhalb des Bildes, -1 innerhalb des Bildes ganz oben, 0 zentriert, 1 innerhalb des Bildes am unteren Bildrand und 2 genau unterhalb des Bildrandes. Standartwert: 1.
cut: Bestimmt die Anzahl der abzuschneidenden Ziffern bei der Beschreibung. Eine positive Zahl beginnt die Beschreibung von vorne zu schneiden, eine negative von hinten. Standartwert: 0 (kein Abschneiden)
backgroundAlpha: Wird bei align -1, 0 oder 1 verwendet, kann ein Hintergrund hinterlegt werden. backgroundAlpha bestimmt diese Transparenz. Wert zwischen 0 und 1. Standartwert: 0 (kein Hintergrund)
backgroundColor: Farbe des Hintergrundes. Standartwert: 0x000000 (Schwarz)

removeText(): Entfernt allen Text.

setBorder(thickness:uint, color:uint):
Erstellt einen Rahmen. Dicke zwischen 0 (kein Rahmen) und 5.
Optional:
color: Farbe in hexadezimaler Form. Standartwert: 0x000000 (Schwarz)

setShadow(strength:uint, color:uint, blur:uint, angle:uint):
Erstellt einen Schatten. Stärke zwischen 0 (kein Schatten) und 5.
Optional:
color: Farbe in hexadezimaler Form. Standartwert: 0x000000 (Schwarz).
blur: Stärke des Weichzeichners. Standartwert: 10
angle: Richtung des Schattens. Standartwert: 45

setReflection(intensity:uint, blur:uint, distance:uint):
Erstellt eine Reflektion. Intensität zwischen 0 (keine Reflektion) und 5.
Optional:
blur: Stärke des Weichzeichnens. Standartwert: 5
distance: Abstand der Reflektion. Standartwert: 0

Eigenschaften:

space: Abstand zwischen den Bildern
speed: Geschwindigkeit des Tickers
running: Boolschen Wert, ob der Ticker läuft. Nur auslesbar.
buttons: Boolschen Wert, ob die Bilder klickbar sind. Nur auslesbar.

Events:

PICTURE_LOADED: Ein neues Bild wurde geladen
LOAD_COMPLETED: Alle Bilder wurden geladen
LOAD_ERROR: Kein Bild konnte geladen werden
TICKER_STARTED: Ticker wurde gestartet
TICKER_STOPPED: Ticker wurde gestoppt
PICTURE_CLICKED: Ein Bild wurde geklickt

Event-Eigenschaften:
picturesLoaded:uint: Anzahl der geladenen Bilder
pictureClicked:uint: Nummer des geklickten Bildes
pictureName:String: Name des Bildes

Meinungen oder Vorschläge sind gerne willkommen

Aktuelle Version (v5)

[gaspode]

Nett.

Sehe ich das richtig, dass die Anzahl der Bilder darüber
gesteuert wird, ob ein Error ausgegeben wird oder nicht?
Ist das nicht etwas unsicher und könnte man die Anzahl
der Bilder nicht einfach als Parameter übergeben?

EDIT:

speed: Geschwindigkeit, je kleiner desto schneller

Das erscheint mir unlogisch. Würde man es nicht genau
andersrum erwarten?

gruß, gaspode

[mohj]

Ja, es wird auf ein IOErrorEvent gewartet. Mein Ziel war es, es für den User so einfach und flexibel wie möglich zu machen. Zuerst dachte ich an eine XML Datei mit den Pfadangaben, jedoch scheint es so, dass viele die XML Struktur nicht oder falsch verstehen. Danach dachte ich an eine Textdatei o.ä., aber nur um die Anzahl der Bilder zu kennen fand ich das doch ein wenig übertrieben.

Und so hab ich dann diesen etwas grauen Weg gewählt. Vielleicht fällt ja mir oder jemand anderes noch eine intelligente Variante ein

Stimmt, der Speed ist andersrum intuitiver. Werd ich ändern, danke.

[truschi007]

Also ich finde es SUPER!

Hat mir genau bei meinem Problem der endlos Schleife geholt.
JUHU!

[gaspode]

Zitat von mohj

Danach dachte ich an eine Textdatei o.ä., aber nur um
die Anzahl der Bilder zu kennen fand ich das doch ein
wenig übertrieben.

Deswegen ja als Parameter bei der Initialisierung.
Mir erscheint es eben ein wenig unsicher, das Ende
von einem Error abhängig zu machen. Aber okay,
ist auch ein möglicher Weg.

gruß, gaspode

[marc]

Super. Danke dafür, dass du das mit den Leuten hier teilst!

[mohj]

Danke. Ich hoffe, es kann jemand brauchen

Version 2 ist nun erhältlich. Changelog:

Neues:
- Möglichkeit, die Bilder oben, mittig und unten anzuordnen
- Möglichkeit einen Schatten zu erstellen
- Möglichkeit einen Rahmen zu erstellen
- Möglichkeit, die Anzahl geladener Bilder einzustellen, bevor der Ticker startet

Änderungen:
- Geschwindigkeit neu von 1-50, wobei 50 der schnellste Wert darstellt
- Das Angeben der Farbe für den Rahmen und den Schatten ist optional, so kann zB der Rahmen leichter entfernt werden mit setBorder(0);
- Es wird kein Error mehr ausgegeben wenn der bereits gestoppte/gestartete Ticker nochmals gestoppt/gestartet werden soll
- Bei der nachträglichen Änderung der Geschwindigkeit gibt es neu auch eine Überprüfung auf Richtigkeit
- Kleinere Optimierungen

[mohj]

Und Version 3 ist da. Beinhaltet vor allem grafische Updates. Viel Spass

Neues:

- Reflektionen können erstellt werden
- Transparente Maske, dadurch können an den Enden des Tickers die Bilder ein-/ausgefaded werden
- clear Funktion, welche alle Effekte löscht
- Pixelgenaue Ausrichtung

Änderungen:

- Die Richtung des Schattens kann neu angegeben werden
- Ausrichtung wird neu in absoluten Zahlen bestimmt
- Einzelne Bilder werden neu in ein Sprite gelegt
- Ticker wird neu unabhängig der Framerate neu gezeichnet
- Fehlertext bei nicht gefundenen Bildern erscheint neu in der Mitte

[mohj]

Version 4 ist nun erhältlich. Dies wird wahrscheinlich die letzte Version sein. Viel Spass

Changelog:

Neues:

- Bilder können beschriftet werden
- Diverse Events hinzugefügt
- Einzelne Bilder können nun wahlweise geklickt und mittels EventListener abgefangen werden
- Rollover Effekt
- Stärke des Reflektions-Weichzeichners kann neu angegeben werden
- Distanz der Reflektion kann neu angegeben werden
- Neue Eigenschaft running, die angibt, ob der Ticker läuft oder nicht


Änderungen:

- Bilder werden nun erst nachdem der Ticker auf die Display List gesetzt wurde geladen
- Bilder ausserhalb des Tickers werden von der Display List entfernt
- Die Geschwindigkeit und den Abstand der Bilder können nun auch von aussen ausgelesen werden
- Kleinere Optimierungen

[mohj]

Doch noch ein Update. Die Bilder werden neu mittels PHP aus dem Verzeichnis gelesen und können somit einen beliebigen Namen und Format haben. Auch die Beschreibung kann nun wahlweise automatisch den Dateinamen übernehmen.

Neues:

- Bilder werden neu nicht mehr als eine Serie geladen, sondern es wird ein Verzeichnis als Grundlage genommen
- Beschreibung kann neu auch der Dateiname sein
- Beschreibung kann neu abgeschnitten werden
- Effekte können nun erst hinzugefügt werden, nachdem der Ticker initialisiert wurde

Änderungen:

- Bilder werden neu richtig ausgerichtet wenn bei align eine negative Zahl angegeben wird
- Fehlertext wird nun richtig zentriert

Die .fla ist übrigens die einzige Datei, die editiert werden muss.

[truschi007]

hhehee... da kommt man ja kaum mit dem downloaden hinterher! ;-)
ich fand v1 schon toll!

[flashbie]

ÖÖhhm,

kanns sein, dass der Anhang bei version 4 und 5 kaputt ist? Ich seh nur Müll. Beispiel-swf funzt nicht. Version 3 geht noch...

edit:
Hüstel...... hab grade gesehen, dass das php benötigt. Alles klar. Hab ja gar nichts gesagt...

[Thomas Greinke]

Hallo mohj,

vielen Dank für deinen Ticker. Absolut spitze!
Eine kleine Frage: Wie generiere ich einen Button, der die Richtung ändert?

Gruß,
Thomas

[mohj]

Hallo Thomas

Tut mir leid, aber dieses Feature ist im Moment nicht implementiert.

[Thomas Greinke]

Hallo mohj,

hast du einen Tipp für mich, wo ich ansetzen sollte? Da das Ganze in AS3 geschrieben ist, ist so vieles für mich "???", da sich mein Background auf simples AS1 stützt.

Gruß,
Thomas