Kennen Sie das auch? Wenn man beispielsweise Screenshots einer Anwendung für einen Blogartikel erstellt, ist es oft schwierig das Anwendungsfenster so zu skalieren, dass der Screenshot dann später 1 zu 1 in das Layout des Blogs passt. Oder es handelt sich beim Screenshot um einen Dialog, dessen Größe in der Anwendung nicht verändert werden kann. Das führt dann dazu, dass die Bilder in der Regel nachträglich verkleinert werden müssen, mit allen dadurch entstehenden Nachteilen, wie unscharfe oder unleserliche Texte. Dies ist an diesem Bild zum Beispiel ganz gut zu erkennen.
In meinen ersten Beiträgen in diesem Blog hatte ich noch zwei Versionen der Bilder hochgeladen, einmal die verkleinerte Version, welche ich im Artikel verlinkt hatte und anschließend ein zweites in der Orginalgröße, welches über einen Klick auf das kleinere Bild per JavaScript angezeigt wurde. Das Einpflegen der entsprechenden Anweisungen zur Ausführung des Scripts wurde mir aber auf Dauer zu aufwendig, zumal auch meine Artikel in der Regel in drei Blogs erscheinen und diese jeweils unterschiedliche Blogsysteme nutzen.
So richtig zufrieden war bzw. bin ich mit der Lösung jedoch noch nicht. Auf einigen Webseiten habe ich des öfteren schon Bilderalben gesehen, wo innerhalb eines Fensters Einzelbilder angeschaut und auch gezoomt werden können. Für Browser stehen hierzu die Plugins von Adobe Flash und Microsoft Silverlight zur Verfügung. In diesem Artikel werde ich mich aber auf Silverlight konzentrieren, zumal auch für Silverlight „Deep Zoom“ zur Verfügung steht; eine Technologie eigens entwickelt um schnell und quasi in Echtzeit Bilder aus dem Internet zu zoomen.
Ich bin kein Experte für Microsoft Blend oder in der Erstellung und Programmierung von Silverlight Anwendungen. Auch möchte ich nicht für jeden Beitrag eine Anwendung erstellen oder „programmieren“, sondern möglichst einfach und automatisiert ein Album erstellen können. Ob das nachfolgende vorgestellte Verfahren sich später auch als praktikabel für meine Blogs erweist, kann ich noch nicht sagen, vielversprechend ist aber alle mal.
Bevor wir die erste Silverlight Anwendung mit Deep Zoom Technologie erstellen, brauchen wir ein passendes Werkzeug; hier sind wieder die Microsoft Live Labs hilfreich. Zunächst kann man auf der Website zum Seadragon Projekt eine Silverlight Anwendung in Aktion sehen und von dort aus auch die entsprechenden Tools herunterladen. Alle Links werden übrigens am Ende des Artikel nochmals aufgeführt. Als erstes habe ich den „Deep Zoom Composer“ heruntergeladen, der vorab schon verspricht, schnell und einfach Alben anlegen und verwalten zu können. Diesen habe ich dann installiert.
Ich habe hier alle Standardeinstellungen des Installationsprogramms beibehalten und war in wenigen Minuten mit der Installation fertig.
Das Programm wird übrigens im Startmenü unter „Programme – Microsoft Expression“ installiert. Ob nun Nebeneffekte auf meine bestehende Expression Studio 3 Installation entstehen, habe ich nicht geprüft. Zur Sicherheit kann man ja das Programm in einer virtuellen Maschine installieren. Ausserdem muss ich an dieser Stelle anmerken, dass die Software anscheinend ein paar kleinere Fehler hat. Sie stürzt zwar nicht ab, aber reagiert manchmal etwas träge bzw. enthält z.B. einige Punkte aus denen ich auch nach einer Recherche im Internet nicht schlau geworden bin bzw. deren Verwendung keinen Effekt zu haben scheint. Nach dem ersten Start präsentiert sich das Programm wie folgt:
Ok, die Software ist in Englisch. Eine deutsche Version scheint es noch nicht zu geben. Das Layout und Aussehen der Anwendung orientiert sich übrigens an den Produkten im Microsoft Expression Studio. Nun, legen wir zunächst ein Projekt an, indem wir auf „New Project“ klicken. Nach einer Abfrage zum Namen und Speicherort des Projektes wird dieses in Form eines Unterordners im zuvor ausgewählten Ordner angelegt. Anschließend müssen wir dem Projekt Bilder hinzufügen. Hierzu habe ich die Bilder aus meinem Artikel „Anleitung zur Installation von Office 2010 Plus Beta“ ausgewählt. Dieser enthält einige Bilder in unterschiedlichen Größen.
Nach der Auswahl aller Bilder und dem Klicken auf die Schaltfläche „Öffnen“, werden die Bilder in das Projekt importiert, wie hier zu sehen:
Die Bilder tauchen anschließend in einer Leiste am rechten Bildrand auf. Das Programm suggeriert mir nun im Anschluß vielleicht den Punkt „Compose“ anzuklicken, denn weitere Funktionen ausser dem Anklicken und Anschauen der importierten Bilder und Durchgehen des Hauptmenüs sind hier nicht vorhanden. Gesagt und getan, die Ansicht präsentiert sich nun wie folgt:
Die importierten Bilder befinden sich nun im unteren Bereich und können mir der Maus angeklickt und auf die Bühne gezogen werden. Ausserdem sind ein bißchen versteckt die Optionen „Slideshow“, „Menu“, „Internal Links“ und „External Links“ zu sehen, dazu später mehr.
Während des Ziehens und Positionnierens der Bilder, erscheinen an den passenden Stellen Hilfslinien, womit die Bilder dann sehr einfach ausgerichtet werden können. Da ich später die Bilder in der Reihenfolge sehen möchte, wie sie auch im Artikel vorkommen, habe ich nach einer Möglichkeit gesucht, die im unteren Bereich umzusortieren. Leider geht das wohl nicht. Zur Bühne hinzugefügte Bilder erscheinen rechts in der Liste und werden unten ausgegraut. Ich habe somit zunächst die Bilder in der richtigen Reihenfolge einzeln auf die Bühne gezogen und von links nach rechts und anschließend vertikal angeordnet. Falls z.B. die Ansicht nicht mehr genug Platz bietet, kann mit dem Scrollrad an der Maus die Bühne vergrößert und verkleinert werden. So sah dann bei mir die Anordnung aus.
Um die Bilder in einem Raster anzuordnen, gibt es die Möglichkeit zunächst alle Bilder zu markieren (z.B. über Strg+A) und über das Kontextmenü „Arrange – Arrange into Grid“ auszuwählen.
Nach der Auswahl passender Einstellungen,sind alle Bilder schön sauber angeordnet. Da die Bilder in den einzelnen Zeilen untereinander zentriert wurden, musste ich einige noch markieren und nach oben hin ausrichten. Wichtig ist hierbei die Klickreihenfolge, die Bilder werden an dem zuletzt angeklickten Bild ausgerichtet.
Es kam relativ häufig vor, dass die Bilder im rechten Bereich ständig durchlaufen wurden. Ob nun „Deep Zoom Composer“ in diesem Fall Berechnungen anstellt, kann ich nicht genau sagen, jedenfalls kann das schon ein bißchen dauern. Um die Bilder einer Slideshow hinzuzufügen, kann man auf den Punkt „Slideshow“ klicken, ein Fenster wird in diesem Fall eingeblendet und durch Ziehen und Ablegen können die Bilder der Slideshow hinzugefügt werden.
Was ich an dieser Stelle vermisse, ist eine Möglichkeit die Anzeigelänge pro Bild einstellen zu können. Denn in meinen Experimenten lief diese immer zu schnell ab. Die Zeiten können aber später in der passenden XML Datei zum Projekt manuell festgelegt werden. Ist zwar etwas umständlich, aber vielleicht liest jemand von Microsoft diesen Beitrag und gibt die Anregung weiter. Auf dieselbe Art wie Slideshows kann auch ein Menü hinzugefügt werden. Ausserdem ermöglicht die Software das Taggen der Bilder oder interne und externe Links anzulegen.
Nachdem alle Einstellungen soweit getroffen sind, kann man zum Punkt „Export“ wechseln und die Silverlight Anwendung generieren. Welche Funktionen diese Anwendung später enthält, bestimmt das Template. Das heißt, dass z.B. die Slideshow Funktion auch nur dann zur Verfügung steht, wenn diese im Template implementiert ist bzw. der Aufruf abgefangen wird.
Ausserdem sollte in diesem Fall „Export as a collection“ gewählt werden, schließlich handelt es sich hier um mehrere Bilder. Zudem habe ich mich für PNG als Ausgabeformat entschieden und die Breite auf 500 Pixel gesetzt, damit später die Anwendung von der Breite her in das Layout vom Blog passt. Die exportieren Daten sind später im Unterverzeichnis „Exported Data“ im Projektverzeichnis zu finden. Wenn nun auf „Export“ geklickt wird, blendet das Programm einen Hinweis ein, wie hier zu sehen:
Nach Abschluß des Vorgangs werden ein paar weitere Optionen angeboten, wie beispielsweise die Seite im Browser über „Preview in Browser“ anzuschauen.
Nachfolgend ein Screenshot, wie das Ergebnis sich im Browser präsentiert. Welche Menüs an welcher Stelle angezeigt werden, hängt, wie bereits erwähnt, vom Silverlight Template ab. Dies sind übrigens im Installationsverzeichnis von „Deep Zoom Composer“ zu finden und können auch mit Expression Blend bearbeitet werden. Auch eigene Templates sind denkbar, dafür braucht man einfach nur diese in das Verzeichnis zu kopieren und Deep Zoom Composer neu zu starten. Nebenbei bemerkt, bei mir startete bei der Vorschau der „Microsoft Expression Development Server“, ob dieser nun von „Deep Zoom Composer“ mit installiert wurde oder nicht, habe ich nicht getestet. Jedenfalls muss der Server natürlich auch Zugriff auf den Rechner haben, also entsprechend in der Firewall freigeschaltet sein. Zum Testen lässt sich aber auch die HTML Datei aufrufen, die im Exportverzeichnis zu finden ist.
Wie zuvor bereits erwähnt, ist die Anzeigedauer der Einzelbilder in der Slideshow nicht wirklich befriedigend. Diese lässt sich manuell verändern, indem die Datei „scene.xml“ im Verzeichnis „Exported Data\Projektname\GeneratedImages“ mit einem Texteditor geöffnet und der Abschnitt „Storyboard.Children“ gesucht wird. Dort kann man bei den Einzelbildern die Zeit eintragen, wobei bei 00:00:00 anzufangen ist und ein Intervall jeweils aufaddiert wird. Bei „Duration“ sollte nicht vergessen werden, die Gesamtzeit dort zu vermerken.
Für die Verwendung des Beispiels auf meinem Server habe ich mich in Anlehnung an die Website von Microsoft Live Labs für das Template „Blend 3 Behaviours + Source“ entschieden. Bleibt nun noch das Projekt in den Blogbeitrag einzubinden. Zunächst muss der für Silverlight zuständige JavaScript Code in die Website eingebunden werden. Dies kann, wenn man beispielsweise ein CMS oder WordPress verwendet auf globaler Ebene geschehen, so dass das Script immer verfügbar ist. Die Datei „Silverlight.js“ ist im Ausgabeverzeichnis zu finden. Um nun meine Anwendung in den Beitrag einzubetten, muss einerseits der Unterordner „GeneratedImages“ (zu finden im Exportverzeichnis bzw. in einem Unterordner) per FTP auf den Server hochgeladen werden und der HTML Code zum Einbinden der Silverlight Anwendung in den Blogbeitrag eingefügt werden. Der Code kann aus der von Deep Zoom Composer erstellten HTML Datei herauskopiert werden. Da ich in diesem Blog momentan Probleme mit dem FTP Zugang habe, muss ich auf den Artikel auf meine Hauptseite verweisen: www.software.maninweb.de
Ich find’s cool. Besonders der Vollbildmodus ermöglicht ein angenehmes Betrachten der Screenshots. Ich denke, wenn man das Ganze ein bißchen systematisiert bzw. sich ein paar Vorlagen mit Platzhaltern erstellt, wäre es relativ einfach, die Silverlight Anwendungen in Beiträge einzubetten. Und mit ein bißchen Zeit und Einarbeitung in Expression Blend wäre ein eigenes individuelles Template machbar. Einziger, meiner Meinung nach aber kleiner Nachteil ist, dass natürlich das Plugin auf dem Rechner des Anwenders vorhanden sein muss. Und ehrlich gesagt, weil’s so schön ist, habe ich direkt mal die Bilder aus diesem Beitrag eingebaut. Auch dies können Sie auf meiner Hauptseite anschauen.
Für den letzten Versuch habe ich insgesamt 15 Minuten gebraucht! Wobei ich jedoch anmerken muss, um den Beitrag hier zu schreiben, habe ich mich schon etwas intensiver mit dem Thema Silverlight, Deep Zoom und Deep Zoom Composer beschäftigen müssen. Und somit auch relativ viel nach Literatur gesucht. In Deutsch bin ich leider nicht wirklich fündig geworden, in Englisch gibt’s ein bißchen mehr Literatur dazu, viele davon behandeln jedoch programmiertechnische Aspekte. Empfehlenswert sind Links aber in jedem Fall.
- Microsoft Live Labs, Englisch
- Projekt Seadragon, Englisch
- Projekt Seadragon, Entwicklerinfos, Englisch
- Microsoft Expression, Deep Zoom Composer, Englisch
- Microsoft Expression Team Blog, Englisch
- Blog von Jaime Rodriguez mit einem Tutorial, Englisch
- Blog von Kirupa Chinnathambi mit Beispielen, Tipps und viel mehr, Englisch
- Jellyfish Deep Zoom is open source toolkit bei Codeplex, Englisch
Diesen Artikel habe ich ebenfalls auf folgenden Webseiten publiziert:
