HTML5 Graph Canvas Experiment

Ein weiteres kleines HTML5 Experiment. Für die Darstellung und das Zeichnen der Linien des Graphen habe ich wieder die Canvas benutzt. Wie ich feststellen musste gibt es hier nach wie vor deutliche Unterschiede in der Performance zwischen den diversen Browsern. Deshalb empfehle ich zum Betrachten den Google Chrome in der neuesten Version. Das Experiment basiert auf einem Actionscript 1 Projekt aus dem Jahr 2004 und wurde ursprünglich von Brandom Williams programmiert. Ich habe den Code etwas optimiert, umgeschrieben, erweitert und in JavaScript übersetzt. Mit der Mausposition wird der Graph um die X und Y Achse gedreht. Zudem besteht die Möglichkeit die Anzahl der Punkte aus dem Grid zu erhöhen oder zu reduzieren. Läuft die Anwendung nicht rund, reduziert ihr am besten die Anzahl der Punkte soweit, bis euer Rechner/Browser damit klar kommt. Mit einem Klick in die Canvas wird eine Zufallsfarbe generiert deren Werte dann der Farbanimation zugrunde liegen.
Zum Starten einfach HIER klicken.

Animated GIF Makr

Ja, ich finde den Namen „Animated GIF Makr“ auch doof, aber mir ist kein besserer eingefallen. Verbesserungsvorschläge sind daher willkommen.

Aber worum geht es eigentlich? Und das ist das gute an dem unschönen Namen. Er verrät es im Prinzip schon fast. Es geht um animierte GIF (Graphics Interchange Format) Bilder. Genauer, es geht darum, aus einer SWF, welche eine Timeline Animation beinhaltet, mit nur wenigen Klicks ein animiertes GIF zu erstellen. Ziel ist es, den vielen Werbemittel und Banner Produzenten die Arbeit etwas zu erleichtern und Zeit zu sparen!

Ihr könnt mit dem „Animated GIF Makr“ bequem jedes SWF laden („LOAD FILE“). Egal ob AS1/AS2, oder AS3. Wichtig ist nur, die geladene Banner/Werbemittel SWF muss eine Animation enthalten, die mit Tweens auf klassischen Weg auf der Hauptzeitleiste erstellt worden ist. Ist die SWF geladen, zeigt der „Animated GIF Makr“ in einer Vorschau noch einmal die komplette Animation. Unterhalb der Animation einmal auf „CONTINUE“ klicken und schon geht’s los.

Wählt einfach die Frames aus dir ihr exportieren wollt. Entweder einzeln, indem ihr die Checkboxen anklickt, oder über den Button „SELECT ALL“, bzw. etwas weiter rechts eine Zahl eingebt und das Tool für euch jedes z.B. zehnte Frame auswählt. Habt ihr nun die von euch gewünschten Frames ausgewählt müsst ihr um Prinzip nur noch auf „EXPORT GIF“ klicken und ein bisschen warten. Bei den „EXPORT SETTINGS“ könnt ihr noch einstellen wie oft sich das GIF wiederholen soll. 0 bedeutet, dass es sich unendlich oft wiederholt und nie aufhört zu spielen. Mit dem delay könnt ihr bestimmen wie viel Zeit verstreichen soll, bis das nächste Frame der Animation abgespielt wird. Und dann könnt ihr noch die Qualität einstellen. 1 ist sehr gut und 256 sehr schlecht. Wenn ihr die Qualität anpasst, beachtet bitte, dass ein Wert unter 10 die Geschwindigkeit beim Export stark verringert. Generell würde ich wegen der meist vom Vermarkter vorgegebenen Dateigröße für Fallback Grafiken nur wenige Frames exportieren.
Euer GIF landet wenns fertig ist direkt neben der von euch ausgewählten SWF im selben Ordner. Auch der Dateiname ist der selbe wie bei der SWF, nur wurde hinten noch "_fallback" angehängt.

Das Ganze ist noch eine Beta, wenn ihr also Fehler entdeckt oder Dinge die euch nicht gefallen, würde ich mich über Feedback freuen. Im Moment gibt es den „Animated GIF Makr“ leider nur als EXE für Windows User. Da ich kein Mac Besitzer bin, muss ich mal schauen ob ich auch eine Mac Version exportiert kriege. Evtl. macht dieses Tool auch als Panel für den direkten Einsatz in der Flash IDE Sinn. Ihr merkt schon, das Ganze ist noch nicht wirklich zu Ende gedacht und entwickelt.

Mein Dank gilt Thibault Imbert, Keith Peters und Trevor McCauly. Weitere Infos im Tool unter dem Menüpunkt „CREDITS“.

Und HIER gibt’s die ZIP. (Dem Link folgen, links oben dann unter „AnimatedGifMakr.zip“ auf „Datei“ klicken und danach dann auf „Herunterladen“.)

UPDATE: Ich hab ein Update hinterher geschoben. In diesem Zuge konnte ich ein paar Bugs fixen und natürlich gibt’s ein paar neue Features.

Neu sind:

• Die Vorschau Funktion. Über den Button „SHOW PREVIEW“ könnt ihr direkt sehen, wie das zu exportierende GIF aussehen wird, ohne es erst exportieren zu müssen.
• Der Animated GIF Makr speichert jetzt die zuletzt geöffneten Dateien und deren Ordner. Ihr könnt jetzt bequem über den Button „LOAD RECENT“ die zuletzt geöffneten Dateien wieder öffnen. Ohne langes suchen.
• Die Anzeige unten rechts zeigt euch die Frames an, die ihr für den Export ausgewählt habt. Ihr könnt die dort angezeigten Frames auch direkt anklicken, das Programm springt dann direkt zu diesem Frame und zeigt es euch an.
• Oben links gibt’s jetzt ein Eingabefeld. Dort könnt ihr direkt den Namenszusatz bestimmen, den euer exportiertes GIF haben soll.

Und hier noch ein kleine Tutorial: