Veröffentlichen als Flash und HTML5 Alternative

Auf dieser Seite habe ich eine SWF-Flashdatei eingebunden und als Alternative eine Animation mit dem HTML5 canvas Element erstellt, als weitere Alternative habe ich noch aus Flash heraus ein Standbild der Animation exportiert.

Alle 3 Versionen kann man mittels Flash CS6 erzeugen, SWF, HTML5, BILD

Das Einbinden des SWF Datei in den die HTML Seite habe ich mittels "Veröffentlichen" in Flash gemacht. Siehe dazu meinen Tipp.

Dadurch ensteht ein Bereich im Quelltext, wo eine Umleitung zum Download des Flashplayers bei Adobe eingefügt ist. Dort kann man stattdessen eine Alternative zu Flash einbinden.

Hier habe ich ein Javascript eingefügt. Dort wird abgefragt, ob das Html5 canvas Element unterstützt wird. Dazu habe ich das Modernizr Javascript benutzt. Ein Verweis auf die Datei wird im Head eingebunden. Siehe dazu meinen Tipp.

In der if else Struktur wird das canvas Element eingebunden oder das alternative png Bild.

Wenn man mittels CreateJS die HTML5 Alternative in Flash CS6 erzeugt entsteht eine html Datei und eine dazugehörige Javascript Datei. Den dort enstandenen Code, habe ich in diese Seite eingefügt.

Download des Beispiels hier.