Forum Update und Live Mitteilungen

Antworten
Benutzeravatar
Averlion
Administrator
Beiträge: 526
Registriert: 07.01.10, 22:40
Kontaktdaten:

Forum Update und Live Mitteilungen

Beitrag von Averlion »

Ich habe vor kurzen ein Update eingespielt und damit ziemlich das Forum zerhauen. Wird mir erst jetzt gerade bewusst was alles wieder zurück gesetzt wurde. Naja da werde ich wohl nochmal dran müssen.

In den letzten Tagen habe ich an einem System gearbeitet welches live abfragt ob eine neue Mitteilung eingegangen ist. Dazu gehört eine Box mit der Mitteilung und einem Grafischen Counter in form eines Ringes der, wenn man das so sagen kann, abläuft. Nach Ablauf verschwindet die Meldung über eine neue Mitteilung wieder. Ich bin bestrebt etwas mehr Live Aktionen einzubinden. Nicht nur mit solchen Meldungen. Denkbar wäre auch das man angezeigt bekommt wenn einer seiner Freunde online kommt. Das Gerüst steht dafür zu mindestens schon.

Die Animation des Ringes war nicht gerade einfach. Erstmal ist eine Bild für Bild Animation mit Photoshop etwas umständlich und zweitens ist musste es ein PNG sein und kein GIF. Dürfte vielen nichts sagen was da der große unterschied ist. Also GIF Bilder können Transparent sein. Teile davon können das. Das heißt das an stellen in dem eigentlichen Bild keine Pixel sind sondern eben durchsichtig. Zusätzlich kann man GIF auch animieren. Gutes Beispiel dafür sind die Smileys hier im Forum. Das sind Animierte GIFs mit transparent Hintergrund. Sowas wollte ich im endeffekt auch dafür benutzen jedoch ist bei dem Ring ein Alpha Wert. Das bedeutet das am rand ein Schatten ist mit verlauf. Der Schatten läuft langsam von nicht durchsichtig nach durchsichtig. Das kann GIF nicht. Dafür muss man PNG 24 benutzen. So jetzt kann PNG 24 aber keine Animation beinhalten. Da war dann die Frage was man da macht um das irgendwie zu umgehen.
Ich habe ein Bild erstellt das aus den 28 einzel Bildern meines Ringes besteht. Diese liegen in dem Bild alle in gleichem Abstand nebeneinander. Jetzt hatte ich ein Bild das ca. 70 Pixel hoch und 1000 Pixel breit ist. Man kann jedoch wenn man ein Bild als Hintergrund einstellt nur einen Teilausschnitt davon zeigen. Das habe ich getan und nur 70 x 70 von dem 70 x 1000 Bild angezeigt und dann mit Javascript die anzeige Position immer weiter um 70 Pixel versetzt so das, wie in einem Daumenkino, der Ring animiert auftaucht.

Wenn man einmal weiß wie das geht ist es eigentlich ziemlich einfach. Mit dieser Technik könnte man auch die Schiffe animieren. Vielleicht sogar die zerstörten das man sieht wie sieh brennen. Das wäre schon ziemlich cool beinhaltet aber auch wiederum das man sicherstellt das man es ausschalten kann da es schon etwas Rechner Leistung in Anspruch nimmt.

So nun noch zu der Abfrage. Ich bin letztens erst auf JQuery gestoßen. Das ist ein ziemlich geniales Javascript Framework. Beinhaltet ziemlich alles was man braucht. Auch gute Ajax Abfragen. Das was noch nicht drin ist kann man als Plugin bekommen. So habe ich einen PeriodicalUpdater eingebunden der im Hintergrund nach neuen Mitteilungen sucht. Wenn er eine findet startet er die Einblendung der Meldung und das der Counter läuft. Das ist es eigentlich schon gewesen. Ich möchte das, bevor ich das hochlade, noch damit verknüpfen das der Menüpunkt auf rot gesetzt wird. Bisher musste das Fenster geschlossen und neu geöffnet werden damit man es sieht.

Das war es wieder von mir. Ich denke ich binde es heute Abend ein um mal zu sehen wie die Reaktionen darauf sind.

Gruß,
Averlion
FOLLOW US ON
BildBild
Antworten