Golb Slexa ::

weiterführende Links:

1. das Hintergrund Bild stammt von Unsplash.com: Annie Spratt - Light festive Christmas foliage flatlay with room for text (Free to use under the Unsplash License)

Im Oktober 2017 waren wir 1 Woche in den Ferien in Alfamar … einmal das Bild anklicken, um die Diashow zu starten:

Die dortige Hintergrund-Musik ist etwas mit Samples zusammengeklicktes. Weil es schnell gehen musste :-)
Download: mp3 (Axel Hahn; Lizenz: cc 3.0 by-nc-sa)

> Diashow starten (für Smartphone-User: Vorsicht Datenmenge!)

Ich habe nach einer Diashow gesucht, um mehr meiner Fotos ins Netz zu stellen.

Eine der Möglichkeiten: Fotos im Vollbild.
Die Überblendung rein mit CSS Mitteln fand ich auf tympanus.net. Auf Basis dessen entstand ein erster Prototyp mit Bildern dieses Hersbstes.
Eine PHP-Klasse liest Verzeichnisse, Dateien und Metadaten. Enstpr. Anzahl der Bilder werden HTML-Code und CSS erzeugt. Die Bildreihenfolge ist zufällig und bei jedem Neuladen anders.

Nachteil der Vollbild-Methode:
Meine Bilder sind im Verhälnis 4:3. Je nach Grösse des Browsers, werden Bereiche links+rechts bzw. oben+unten abgeschnitten. Nicht alle Fotos eignen sich dafür.
Ich brauche noch andere Skins, um andere Darstellungen zu ermöglichen, wo man stets das gesamte Foto sieht.

Und noch fehlen mir ein paar Funktionen, die ich noch nachrüsten möchte…

Weiterführende Links:

• Axels Webseite: Diashow starten
• tympanus.net: CSS3 Fullscreen Slideshow Blog-Eintrag (en)
• tympanus.net: CSS3 Fullscreen Slideshow Demo
• Jamendo: EXIT project - And the Dream Fades (2013) die Hintergrundmusik dieser Diashow

Wieder einmal rechtzeitig: Meine animierte Osterkarte mit Sound ist am Wochenende fertig geworden.

Osterkarte anzeigen

Alle Jahre wieder … male ich zu div. Anlässen meine Karten. Und erstelle elektronische, animierte Varianten mit HTML.

In diesem Jahr entstand die nachfolgende Weihnachtskarte:

Zunächst aber entstand die animierte Version. Brainstorming zur Animation und eine erste Skizze auf Papier erfolgte im Zug nach München sitzend.

Einzelgrafiken sind von Hand gezeichnet, dann gescant und in der Bildbearbeitung zugeschnitten und - ganz wichtig - mit Transparenzen versehen.
Die Animation erfolgte per Javascript - es wäre vielleicht auch mit CSS3 gegangen, aber ich war mit jQuery schneller am Ziel.

Ach, ich mache später mal ein ausführlicheres “Making of” und beleuchte dann das Technische genauer.

Schaut es euch an:

Link: Der schnellste Weihnachtsmann der Welt

Wer mag, kann diese Karte mit einer eigenen Grussbotschaft versehen an Freunde weitersenden.

Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.

Demo-Seite: https://www.axel-hah … -ei-und-html5-audio/

[Weiterlesen…]

Mein Video Spaceflight ist komplett von A-Z selbstgestrickt: Musik erzeugen, Grafiken erstellen, Grafiken und Musik zeitlich abstimmen und ein Video daraus machen. Das klingt auf den ersten Blick einfacher als es ist, zumal es diverse Audio- und Videofromate gibt und selbige mehr oder weniger von Browsern zum Genuss des Betrachters verarbeitet werden können.

Ich gehe mal noch einen Schritt zurück: Ziel war, ein (halbwegs) hochaufösendes Video mit 5.1 Surround zu erzeugen. Und dann soll das Ganze im Internet landen.

Dieses Ziel umzusetzen, scheitert bereits an den Internet-Zugriffsprogrammen - äh: Browsern. Seit mehr als 5 Jahren hat jeder Billig-PC eine 5.1 Soundkarte an Bord, und im noch nicht verabschiedeten Internet-Standard HTML5 geht es in Sachen Audio um MP3 oder OGG (beides stereo) und bei den Videoformaten streiten sich Browserhersteller um Implementierung von WebM oder aber H.264.

Daher ist mein Kompromiss folgender:
Ich erzeuge mein Endresultat und stelle es als Download bereit. Ein Preview einer qualitätsgeminderten webtauglichen Version gibt es als Youtube-Video. Zudem sind die Audios als 5.1 (AC3) und stereo-Version (Mp3) verfügbar. Die MP3 Datei kann man mit einem Flashplayer anhören. Für die AC3-Datei bestünde eine Wiedergabemöglichkeit mit dem VLC Plugin - mal sehen, ob ich einen Player schreibe…

Der Entstehungsprozess sieht etwa so aus:

Mit gelbem Stern sind die zum Download verfügbaren Dateien gekennzeichnet.

[Weiterlesen…]