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

  • Hi,

    - 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),


    - 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:

    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.

    - 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

  • 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.

  • Hi,

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

    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

  • Hi,

    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*

    In .bat Dateien muss das % Zeichen durch %% ersetzt werden, um letztendlich ein einfaches % im echten Aufruf zu bekommen.

    Schöne Grüße,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!