Screencasting Setup

Ich bekomme ziemlich viele Fragen dazu, wie ich die Screencasts aufnehme, deshalb dachte ich, ich schreibe einen Beitrag dazu, der sowohl jetzt interessant ist als auch auf den ich später verweisen kann.

Hardware

Mac

Ich habe einen 24″ iMac und einen zweiten 24″ Monitor auf der rechten Seite. Bildschirmfläche ist für mich als Designer/Coder/Medienkonsument/Telecommuter wertvoll. Jede dieser Rollen, die ich einnehme, erfordert eine Menge offener Fenster, und manchmal habe ich das Gefühl, immer noch nicht genug zu haben. Der zweite Monitor ist beim Screencasting sehr nützlich, wie wir später sehen werden.

Rode Podcaster

Der iMac hat ein eingebautes Mikrofon, das für schnelle Skype-Chats in Ordnung ist, aber für die Qualität eines Screencasts einfach nicht ausreicht. Offensichtlich sind meine Screencasts keine superprofessionellen, bearbeiteten Produktionen. Meine Version eines Intros ist ein spezieller Desktop-Hintergrund! Aber wenn man mir 20-60 Minuten zuhören soll, ist die Tonqualität wichtig.

Ich habe ein Rode Podcaster Mikrofon, das gute Arbeit leistet. Ich habe eine Spinne dafür, die an einem kleinen Mini-Galgenständer befestigt ist, den ich auf meinem Schreibtisch aufstelle. Das ermöglicht es mir, mein Mund ganz nah an das Mikrofon zu halten, ohne die Hände benutzen zu müssen.

So sieht das Setup aus

 

Software

iShowU

Zum Aufnehmen des Bildschirms und Tons verwende ich iShowU. Es ist extrem einfach. Alle Optionen, die man braucht, keine Verwirrung.

Stomp

ShinyWhiteBox, die Macher von iShowU, stellen ein Begleitprodukt zur Videokompression namens Stomp her. Ebenfalls sehr gut und extrem einfach zu bedienen. Ich glaube, sie haben Paketangebote, wenn man beide kauft.

Adobe Flash CS3 Video Encoder

Ich benutze diesen, um in das Flash-Videoformat (.flv) für die Anzeige im Web zu konvertieren.

 

Der Prozess

1. Bildschirmauflösung ändern

Als Erstes ändere ich die Auflösung meines Hauptmonitors auf 1024×768 und setze meinen benutzerdefinierten Hintergrund. Ich zeige gerne meinen gesamten Bildschirm an, mit Dock und Menüleiste. In gewisser Weise mag das ein wenig ablenkend sein, aber ich möchte, dass die Leute sehen, dass dies meine exakte, reale Arbeitsumgebung ist. Ich führe diese Dinge nicht in einer schönen, bereinigten Sandbox durch, das ist echtes Alltags-Coding.

2. Hardware einrichten

Wie Sie auf dem Bild oben sehen können, schiebe ich meinen zweiten Monitor etwas zur Seite und richte mein Mikrofon so ein, dass es bequem positioniert ist. Dann stecke ich es in einen USB-Anschluss am Computer selbst. Ich habe versucht, es die ganze Zeit an meinen USB-Hub angeschlossen zu lassen, aber dadurch bekomme ich WEITAUS geringere Lautstärke heraus. Dieses Mikrofon braucht Strom und einen direkten Anschluss, um ihn zu bekommen.

Die Umgebung um Sie herum ist auch eine Art "Hardware". Ich hole mir ein Glas Wasser, schließe die Tür zum Zimmer, stelle sicher, dass der Nachbar nicht den Rasen mäht, solche Dinge.

3. Software einrichten

Ich beende jede Software, die ich nicht im Screencast verwenden möchte, und lasse nur das Wichtige offen. Normalerweise Photoshop, Coda/Textmate und iShowU. Ich überprüfe alle Einstellungen in iShowU. Zu diesem Zeitpunkt ist der zweite Monitor bereits nützlich, da ich das Fenster dort offen halten kann, um meinen Hauptarbeitsbereich sauber zu halten.

Meine Einstellungen für iShowU

• Mikrofon-Audio aufnehmen (volle Lautstärke)
• Hohe Audioqualität
• Mikrofoneingang: Rode Podcaster (und überprüfen und sicherstellen, dass die Pegel schön hoch sind, manchmal muss man zu Systemeinstellungen wechseln und sicherstellen, dass die Eingangsleistungsregelung gut ist)
• Langsame Bildrate: 6
• Normale Bildrate: 6
• Qualität: 4. Häkchen, tendenziell Richtung Hoch
• Kompression: Apple Animation
• Aufnahmebereich auf den gesamten Hauptbildschirm einstellen (1024×768)

Aufnahme

Hoffentlich habe ich bis dahin mehrmals im Kopf durchgespielt, wie ich mir das Ganze vorstelle. Hauptpunkte, die ich machen möchte, was das Endergebnis sein wird, kleine Details, wo die Werbesegmente platziert werden, falls es welche gibt, usw. Wenn ich alles bereit habe, drücke ich auf Aufnahme und lege einfach los. Oft schaffe ich es in einer Aufnahme, aber wenn ich eine Pause brauche, gehe ich einfach rüber und drücke "Beenden" bei iShowU und starte wieder, wenn ich bereit bin. Wenn mir ein grober Schnitzer passiert (kleine Schnitzer lasse ich drin, da ich denke, das fügt ein weiteres Element der Realität hinzu), drücke ich einfach auf "Abbrechen" und mache dieses Segment erneut.

Nachbearbeitung

Das Erste, was ich mache, wenn ich fertig bin, ist, einen Ordner namens "RAW" zu erstellen, alle Videodateien hineinzulegen und eine Kopie davon zu machen. So habe ich, egal was ich mit der zweiten Kopie der Dateien mache, immer die Originalaufnahmen, zu denen ich zurückkehren kann.

Wenn es mehrere Segmente gibt, füge ich sie in Quicktime Pro zusammen. Alles, was ich tue, ist, die erste zu öffnen und den Schieberegler an das Ende des Videos zu bewegen. Dann öffne ich die zweite, wähle alles aus, schneide und füge es in das erste Video ein. Wiederholen Sie dies für alle weiteren Segmente. Das ist eine seltsame Sache in Quicktime Pro... Nach dem Einfügen ändert sich die Dateigröße des #1 Videos, in das Sie einfügen, nicht (wie man denken würde). Ich bin mir ziemlich sicher, dass es diese Dateien nur "virtuell" zusammenfügt, also löschen Sie diese anderen NICHT.

In meinem spezifischen Prozess ist mein nächster Schritt, Stomp zu verwenden, um zwei verschiedene Versionen zu erstellen. Erstens verwende ich die integrierte Einstellung, um die .M4V-Datei für die Abonnenten zu erstellen. Dies ist eine sehr hochwertige Version, funktioniert hervorragend auf AppleTV und in iTunes. Das .M4V hat am Ende eine Größe von 960 x 760px. Ich würde einfach in dieser Größe aufnehmen, aber ich mag den kleinen zusätzlichen Platz auf dem Bildschirm, und das Herunterskalieren scheint die Qualität nicht stark zu beeinträchtigen. Zweitens erstelle ich eine .MOV-Datei, die ich auf 800 x 600px skaliere. Dies ist das, was ich DANN in eine Flash-Datei (.FLV) für das Web konvertiere. Ich stelle fest, dass ich, wenn ich die Skalierung in Stomp vornehme und dann in Flash konvertiere, eine VIEL höhere Qualität erhalte, als wenn der Flash Video Converter die Skalierung vornimmt. Das Flash-Video hat immer noch eine schlechtere Qualität und eine höhere Dateigröße, aber es ist nicht allzu schlecht und ist für Leute im Web weitaus kompatibler als Quicktime-Embeds.

Hochladen und Einbetten

Nun habe ich meine beiden Versionen, die ich anbiete, das .M4V und das .FLV. Die freundlichen Leute von IGN hosten meine Videos für mich, also lade ich sie dort hoch. Video ist ziemlich bandbreitenintensiv, also wollte ich es nicht auf meinem Hauptserver haben. Wenn Sie denken, dass Ihr Server damit umgehen kann, können Sie das tun. Ansonsten bietet Amazon S3 sehr günstige Hosting-Optionen. Ich habe ein Tutorial zum Einrichten und Hosten einer öffentlich zugänglichen Datei auf Amazon S3 Simple Storage Service.

Jetzt erstelle ich die Webseite, die die permanente Heimat für den Screencast sein wird und den Flash Video anzeigen wird. Ich benutze den JW FLV Player, der meiner Meinung nach ein guter Player ist. Ich benutze SWFObject, um den Player auf der Seite einzubetten. Das hält Ihren Code standardkonform und bietet eine TONNE anderer Vorteile, die ich hier im Detail bespreche. Diese Seite zeigt nicht nur das Video selbst, sondern auch den Titel des Videos, eine kurze Beschreibung, Links vom Video selbst und einen Link zum kostenlosen Download der hochwertigeren Version!

Erstellen des RSS-Feed-Eintrags

Ich biete einen RSS-Feed für die Videos an, wofür die .M4V-Datei gedacht ist. Dieser Feed muss doppelt genutzt werden. Erstens, um ein gültiger RSS-Feed für Leute zu sein, die ihn in ihrem Feedreader abonnieren möchten. Im Moment enthält dieser Feed nur einen Titel und einen Link zum Herunterladen des Videos, nichts Besonderes. Zweitens muss der Feed iTunes-konform sein, da der Screencast auch im Podcast-Bereich des iTunes Store erscheint. Das bedeutet, dass eine Menge zusätzlicher Tags in der XML nur dafür hinzugefügt werden müssen. So sieht ein XML-Eintrag für einen Screencast aus.

<item>
	<title>#35: Intro to jQuery 2</title>
	
	<link>https://css-tricks.de/videos/css-tricks-video-35.php</link>
	
	<itunes:author>CSS-Tricks</itunes:author>

	<itunes:subtitle>Intro to jQuery 2</itunes:subtitle>

	<itunes:summary>Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!</itunes:summary>

	<enclosure url="http://vnfiles.ign.com/ects/css-tricks/VideoCast-35.m4v" length="69494950" type="video/mpeg"/>
	
	<pubDate>Thur, Sep 11 2008 12:00:00 GMT</pubDate>
	
	<itunes:duration>24:55</itunes:duration>

	<itunes:keywords>css, web design, html, tutorial</itunes:keywords>		
</item>

Ich muss das alles von Hand schreiben, da ich nie ein gutes Werkzeug gefunden habe, das mir das in genau diesem perfekten Format erledigen kann. Vielleicht mache ich irgendwann einen Screencast über das manuelle Schreiben von RSS-XML-Dateien...

Das war's also weitgehend! Das ist es, was ich jede Woche tue, um diese Screencasts aufzunehmen. Es ist viel Arbeit, aber es geht ziemlich schnell, jetzt wo ich meinen Workflow komplett im Griff habe. Sie sind keineswegs Meisterwerke, aber sie scheinen einigen Leuten wirklich zu helfen, und es macht mir Spaß, daher plane ich definitiv, sie weiterhin zu machen.

 

Ehrenwerte Erwähnungen

Entschuldigung, ich kann bei PC-Vorschlägen nicht helfen, da ich keine Erfahrung damit habe. Ich habe gehört, dass Camtasia Studio gut sein soll.

Obwohl es nicht Teil meines aktuellen Screencast-Workflows ist, ist VisualHub ein geniales Videokonvertierungstool, das ich oft für andere videobezogene Projekte verwende.

Wenn Sie Maus-Highlighting, Klick-Highlighting und eine Tastatur-Show benötigen, ist Mousepose ausgezeichnet.

In vielen meiner Screencasts verwende ich Coda. Coda ist erstaunlich für die Entwicklung und funktioniert gut für den Screencast, da es die Dateistruktur des Projekts sowie den Texteditor anzeigt.