wie vertical png filmstrip für html5 erstellen?

Anfänger

Freitag, 1. Juni 2012, 14:54

wie vertical png filmstrip für html5 erstellen?

hallo,

habe gestern das iphone-plugin erworben und gleich damit (inkl. gyro) rumgespielt.

bei folgender tour ist (in der bisherigen flash-version) im wald ein bär hinter dem baum, der alle 10 sekunden hervorschaut (flv mit alpha per videoplayer.swf geladen).
wer es nicht gleich findet: auf hotspot "vellmar wald" und dann 5 bäume rechts neben dem eintrittspunkt schauen..

jetzt würd ich gerne eine ähnliche funktionalität für html5 haben und hatte zunächst ein animated gif probiert, dann aber gelesen, dass png - mit crop animiert - performanter sei.

meine fragen:

- was benutzt ihr, um vertikale png-filmstrips für spätere crop-animation zu erzeugen? (ich hab hier mehr als 50 einzelbilder und will die nicht alle manuell untereinander anordnen)
- wo finde ich eine gute dokumentation über diverse einstellungen für das animieren eines hotspots per crop aus einem vertikalen filmstrip heraus?
- in den html5-tests mit dem animated gif loopt es im safari (pc) korrekt. beim iphone bleibt es stehen... aber vielleicht verwerfe ich ja die gif-methode, wenn mir jemand das mit dem png-filmstrip näher erklären kann..

hier das beispiel:Wald Tour

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Dienstag, 5. Juni 2012, 11:16

Hi,

Zitat von »postproduct«

- was benutzt ihr, um vertikale png-filmstrips für spätere crop-animation zu erzeugen? (ich hab hier mehr als 50 einzelbilder und will die nicht alle manuell untereinander anordnen)

ich kann jetzt nur für mich reden, aber ich benutze meist das kmaketiles Tool zum Zusammensetzen solcher Bilder, wobei es sicher auch einfachere Tools dazu gibt...

dazu müssen alle Bilder mit einer laufenden Nummer im Dateinamen und die TIFF Format vorliegen, um diese dann z.B. per 'kmaketiles bilder_%v.tif bilder_strip.tif 0 -intilesize=64x64 -insize=64x640' zusammen zu setzten - %v ist der Platzhalter für die Nummer, die Größe der Einzelbilder wird mit '-intilesize=' festgelegt und mit '-insize=' die Gesamtgröße (wodurch sich auch die Anzahl ergibt),

Zitat von »postproduct«

- wo finde ich eine gute dokumentation über diverse einstellungen für das animieren eines hotspots per crop aus einem vertikalen filmstrip heraus?

einen Dokumentation direkt nicht, aber Beispiel dazu sind inkludiert,
z.B. hier ein Beispiel Code:

Quellcode

<style name="hotspot_ani_white"
	   	url="hotspot_ani_white_64x64x20.png"
	   	crop="0|0|64|64"
	   	framewidth="64" frameheight="64" frame="0" lastframe="19"
	   	onloaded="hotspot_animate();"
	   	altonloaded="if(isphone, mul(scale,2)); onloaded();"
	   	/>

	<action name="hotspot_animate">
		inc(frame,1,get(lastframe),0);
		mul(ypos,frame,frameheight);
		txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
		delayedcall(0.03, if(loaded, hotspot_animate() ) );
	</action>

im 'onloaded' Event wird dabei die 'hotspot_animate' Action aufgerufen, welche eine 'frame' Variable hochzählt und damit den neuen 'Crop' Ausschnitt berechnet und setzt, und diese Action wird wiederholt per delayedcall() immer wieder und wieder aufgerufen.

Zitat von »postproduct«

- in den html5-tests mit dem animated gif loopt es im safari (pc) korrekt. beim iphone bleibt es stehen... aber vielleicht verwerfe ich ja die gif-methode, wenn mir jemand das mit dem png-filmstrip näher erklären kann..

Wenn sie am iPhone stehen bleibt, dann dürfte irgendwo im XML Code noch ein Fehler sein, grundsätzliche sollte es aber keine Problem geben.

Schöne Grüße,
Klaus

Zum Seitenanfang

postproduct

Anfänger

Beiträge: 8

Dienstag, 19. Juni 2012, 15:11

vielen dank! es klappt! die kmaketiles-methode schien zunächst etwas gewöhnungsbedürftig, aber funktionierte dann doch sehr gut.
in der html5-variante ist jetzt statt eines animatedGif das animierte png-strip in verwendung.

Zum Seitenanfang

svb

Schüler

Beiträge: 76

Montag, 14. Januar 2013, 21:35

bekomme das so mit kmaketiles nicht hin....

Hi,

versuche auch gerade einen Filmstripe zu erstellen, genau so wie beschrieben:

Zitat von »klaus.krpano«

dazu müssen alle Bilder mit einer laufenden Nummer im Dateinamen und die TIFF Format vorliegen, um diese dann z.B. per 'kmaketiles bilder_%v.tif bilder_strip.tif 0 -intilesize=64x64 -insize=64x640' zusammen zu setzten - %v ist der Platzhalter für die Nummer, die Größe der Einzelbilder wird mit '-intilesize=' festgelegt und mit '-insize=' die Gesamtgröße (wodurch sich auch die Anzahl ergibt),

Mein Befehl:
kmaketiles bild_%v.tif bild_strip.jpg 0 -intilesize=418x340 -insize=418x3400 -jpegquality=10
Im Verzeichnis von kmaketiles sind alle Bilder:
bild_1.tif, bild_2.tif, bild_3.tif etc. bis zu bild_10.tif

Wenn ich jetzt die bat laufen lasse, bekomme ich den Hinweis:
ERROR: unable to open inputimage bild_v.tif

Was mach ich falsch? *confused*

Wenn ich:
kmaketiles bild_%1.tif bild_strip.jpg 0 -intilesize=418x340 -insize=418x3400 -jpegquality=10
bekomm ich zwar meinen stripe, aber 10 mal das gleiche Bild...

Danke für Hilfe
Stephan

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Donnerstag, 17. Januar 2013, 10:41

Hi,

Zitat von »svb«

Mein Befehl:
kmaketiles bild_%v.tif bild_strip.jpg 0 -intilesize=418x340 -insize=418x3400 -jpegquality=10
Im Verzeichnis von kmaketiles sind alle Bilder:
bild_1.tif, bild_2.tif, bild_3.tif etc. bis zu bild_10.tif

Wenn ich jetzt die bat laufen lasse, bekomme ich den Hinweis:
ERROR: unable to open inputimage bild_v.tif

Was mach ich falsch?