Weihnachtskarten 2013
Alle Jahre wieder…
Meine elektronische Weihnachtskarte ist online.
Die Karte hat als Motiv das Bundeshaus in Bern - was mir nicht neutral genug erschien, um es als versendbare Karte zu gestalten.
Aber mit dem Weihnachtsgruss von 2012 ginge dies (s. Link unten “Der schnellste Weihnachtsmann der Welt”).
Weiterhin gibt es eine Weihnachtskarte rein in Papierform:
Weiterführende Links
- Weihnachtsgruss 2013 - Anm.: diese e-Card wurde vom Server gelöscht
- Weihnachtsgruss 2012 Der schnellste Weihnachtsmann der Welt
- Axels Blog Der schnellste Weihnachtsmann der Welt
Wie sowas entsteht?
Zum einen im Kopf. Wage Ideen werden zu Papier gebracht und ich schaue, mir an, was sich wie mit möglichst einfachen Mitteln in einer Webseite animieren liesse, um etwas Leben einzuhauchen.
Einige verwendete Elemente der Weihnachtskarte 2013 beschreibe ich nachfolgend mal genauer.
Hintergrundbild
Für dieses Jahr wurde ein winterliches Foto vom Bundeshaus in Bern(vom Februar 2013) als Hintergrund gewählt. Mit CSS wird es immer auf volle Bildschirmgrösse skaliert.
img.fullsizeimage {
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
position: fixed;
height: 100%;
opacity: 1;
}
“Über” dem Foto sind als Rand oben und unten Divs platziert, die für den weichen Farbverlauf ins Weiss sorgen. Das ist der CSS-Code für den oberen Farbverlauf:
#divtop{
position: absolute; top: 0; left: 0;
background: linear-gradient(#fff,rgba(255,255,255,0));
z-index: 80; height: 8em; width: 100%;
}
Figuren
Die Figuren wurden einfarbig mit einem Rollerpen auf Papier gezeichnet, dann gescant. Exemplarisch zeige ich es mit dem flötespielenden Engel.
Das ist die gescante Zeichnung:
Der Scan hat noch viel zu grosse Abmessungen. Im Rechner wurde es auf die gewünschte Grösse gebracht und Farben umgewandelt. Der Hintergrund ist nun hellblau, damit Ränder hin zum transparenten Bereich weniger Kontrast zum bläulichen Hintergrundmotiv bilden.
Es wurden weitere Layer zum Ausfüllen mit je einer Farbe hinzugefügt.
Für die E-Card wurde die Mehrlayer-Grafik in ein transparentes PNG umgewandelt.
Damit die Figuren halbtransparent auf dem Hintergrund sind, wird die CSS-Eigenschaft opacity verwendet:
#flute{left: 0em; top: 2em; position: absolute; opacity: 0.5;}
Musik
Das Musiktool meiner Wahl ist der Magix Musik Maker. Damit kann ich die Musik als MP3 exportieren.
Für die Wiedergabe als HTML-Audio browserübergreifend funktioniert, wird mit oggenc2 auch eine Ogg-Datei erstellt. Die Hintergrundmusik startet automatisch und loopt … bis in alle Ewigkeit :-)
<audio id="audioBgSound" preload="auto" loop="loop" autoplay="autoplay"> <source src="./music/christmas2013_2.0_.mp3" type="audio/mp3"/> <source src="./music/christmas2013_2.0_.ogg" type="audio/ogg"/> </audio>
Neben der Hintergrundmusik gibt es kurze Soundschnipsel pro Bild - für diese wurden kurze Sequenzen mit ausgewählten Spuren aus dem Song extrahiert und analog als MP3 und Ogg bereitgestellt.
Animation
Einleitend werden die Grundelemente eingeblendet: die Hintergrundgrafik erscheint langsam aus dem Weiss, Grusstexte erscheinen. Das erfolgt mit den jQuery Funktionen fadeIn und slideDown.
$('#bg1').hide().fadeIn(20000);
$('#options').fadeIn(5000);
window.setTimeout("$('#buttonsleft').slideDown(2000);", 20000);
Bei dieser Karte sind die weiteren Animationen auf die Soundwiedergabe ausgerichtet.
Bei Soundelementen werden zugehörige Grafiken eingeblendet, z.B. wenn eine Flöte spielt, soll die Grafik des Engels mit der Flöte angezeigt werden. Daher ist es wenig überraschend: es gibt ein Javascript-Objekt, dass die Start- und Endzeiten der Sichtbarkeit (in Sekunden) und die Objekt-Ids aufnimmt.
var aTimer1 = [
{start: 2, ende: 260, id: 'frohe'},
{start: 7, ende: 261, id: 'wn'},
{start: 12, ende: 256, id: 'from'},
{start: 16, ende: 47, id: 'flute'},
{start: 18, ende: 29, id: 'thanks'},
{start: 31, ende: 47, id: 'trompete'},
(...)
];
Dann braucht man nur die aktuelle Abspielposition aus dem Audioobjekt der Hintergrundmusik auslesen
iPos = oAudioBgsound.currentTime;
… und darauf reagieren.
Neben der reinen Sichtbarkeit … die Grafiken bewegen sich ja noch. Nach oben und unten, links und rechts und sie rotieren um ein paar Grad hin- und her. Angewendet wird eine simple Sinusfunktion
x = a * sin( b * t ) + c.
Die einzelnen Amplituden a für x- und y-Richtung und Rotation sowie die Faktoren für die Wellenlängen b des Sinus sind daher pro zu bewegendes Objekt hinterlegt:
var aObjData = {
'frohe': {'ampy': 5, 'wly': 4.9, 'ampx': 50, 'wlx': 17, 'ampd': 10, 'wld': 7},
'wn': {'ampy': 4, 'wly': 4.3, 'ampx': 40, 'wlx': 11, 'ampd': 10, 'wld': 13},
'from': {'ampy': 4, 'wly': 3.3, 'ampx': 10, 'wlx': 3},
'flute': {'ampy': 10, 'wly': 4, 'ampd': 5, 'wld': 9},
'trompete': {'ampy': 10, 'wly': 5, 'ampd': 5, 'wld': 7},
'dancer': {'ampx': 50, 'wlx': 8},
'bell': {'ampy': 10, 'wly': 0.8, 'ampd': 20, 'wld': 2},
'santa': {'ampy': 7, 'wly': 3, 'ampx': 20, 'wlx': 6, 'ampd': 5, 'wld': 1.7},
};
Das Argument t der Sinusfunktion ist ebenfalls die Abspielposition. Die Verschiebung in x- und y-Richtung erfolgt durch die CSS-Eigenschaft margin-left und margin-top; die Rotation mittels der Eigenschaft transform.
Der nachfolgende Codeschnipsel loopt über alle Elemente in aObjData und für den Fall, dass das Objekt sichtbar ist, werden 3 Sinuswerte berechnet. jQuery wendet die CSS-Eigenschaft dann an.
for (sId in aObjData) {
if (aVisible[sId]) {
if (aObjData[sId]['ampy']) {
ampy = aObjData[sId]['ampy'] * Math.sin(iPos / aObjData[sId]['wly'] * Math.PI * 2);
$('#' + sId).css('margin-top', ampy + 'px');
}
if (aObjData[sId]['ampx']) {
ampx = aObjData[sId]['ampx'] * Math.sin(iPos / aObjData[sId]['wlx'] * Math.PI * 2);
$('#' + sId).css('margin-left', ampx + 'px');
}
if (aObjData[sId]['ampd']) {
ampd = aObjData[sId]['ampd'] * Math.sin(iPos / aObjData[sId]['wld'] * Math.PI * 2);
$('#' + sId).css('transform', 'rotate(' + ampd + 'deg)');
}
}
}
Bis hierhin beschreibt es noch nicht die gesamte Funktionalität. Es gibt noch Interaktionen mit den Schaltern 1…6, die eine Grafik anzeigen und den zughörigen Soundschnipsel abspielen (während die Hintergrundmusik gedimmt wird). Und man kann den Hintergrundsound ganz ein- und auschalten.
http://www.axel-hahn.de/ecards/weihnachten/2013/ - Weihnachtskarte 2013 (Anm.: diese e-Card wurde vom Server gelöscht)