FLV | Flash Video

Flash-Video erstellen

  1. Ordner mit Quelldateien öffnen, diese sinnvoll benennen.
  2. Adobe Media Encoder starten.
  3. Dateien aus dem Ordner in den Encoder ziehen.
  4. Format: FLV/F4V
  5. Vorgabe
    • In und Out festlegen
    • Zuschneiden (Underlay) entfernen
    • Ausgabe: Ausgabegröße ändern, oder Größe durch Skalierung anpassen
    • Filter: Rauschen erhöht die Datenrate, Weichzeichner kann entgegen wirken.
    • Multiplexer: FLV/F4V, abhängig vom Player
    • Video: Breite und Höhe (an Ausgabe gekoppelt)
      Halbbilder, Halbreihenfolge
      Bildwiederholfrequenz: wie Original
      Zieldatenrate und Maximale Datenrate festlegen
    • Audio: mono/stereo, Samplerate, Datenrate
  6. Warteschlange starten
  7. Das Flash-Video kann nur mit speziellem Player oder über eine swf-Datei wiedergegeben werden.

Testreihe

Wie klein kann die Datenrate werden, so dass ich trotzdem eine ausreichende Qualität erziele?

Grundeinstellungen im Encoder

Sinnvolle Dateinamen

Externes Video in Flash einbinden

HTML-Seite mit swf-Datei, die Flash-Video wiedergibt.

Die Verknüpfung wird über relative Pfade erfolgen.
Deshalb ist es praktisch, wenn zunächst alles in einem Ordner passiert.

  1. Ordner anlegen, dort hinein das Flash-Video, Ordner merken!
  2. Datei-Menü | Neu … Flash-Datei (ActionScript 3.0)
    ActionScript 2 unterstützt nicht den Vollbild-Modus
  3. Datei im oben gemerkten Ordner speichern.
    Dabei einen sinnvollen Namen wählen, denn dieser wird standardmäßig auf die swf-Datei übertragen und im Tag der HTML-Seite mehrfach verwendet.
  4. Fenster-Menü | Eigenschaften: Bühnengröße und Hintergrundfarbe
    Die Hintergrundfarbe kann aber auch später über HTML/CSS auf transparent gestellt werden.
  5. Fenster-Menü | Komponenten … Video [+]
    FLV-Playback auf die Bühne ziehen
  6. Fenster-Menü | Komponenten-Inspektor
    • source … Lupe … Datei auswählen: ACHTUNG, relativen Pfad verwenden.
      Wenn die fla-Datei noch nicht gespeichert wurde, entsteht automatisch ein absoluter Pfad.
    • scaleMode: maintain AspectRatio
    • skin … auswählen
  7. Datei speichern.
  8. Datei-Menü | Einstellungen für die Veröffentlichung
    • Formate: Flash + HTML
    • Flash: ActionScript 3.0
    • HTML, Vorlage: Nur Flash – Vollbild zulassen
    • Veröffentlichen (Schalter)
  9. Im oben gemerkten Ordner nachschauen. Sie finden dort:
    die swf-Datei, eine html-Datei und hoffentlich immer noch das Video.
  10. Wenn Sie die Flash-Datei verändern (z.B. ein anderes Skin wählen):
    Es reicht jetzt aus, wenn Sie die swf-Datei über STRG + RETURN (= Vorschau erstellen) aktualisieren.
    Der Vollbildschalter funktioniert aber nicht in dieser Vorschau, sondern nur im Browser mit Hilfe der HTML-Seite.

HTML-Seite für die swf-Datei analysieren

<body bgcolor="..."> Veraltet, bitte CSS verwenden.
<script> JavaScript
<noscript> für Browser mit ausgeschaltetem JavaScript
<object> für Internetexplorer
<embed> für FireFox

swf-Einbindung mit Dreamweaver

  1. Unterordner „video“ erstellen
    • dort hinein das Video und die swf-Datei.
    • das Skinn bleibt dort, wo die HTML-Datei entstehen wird.
  2. Die swf-Datei kann jetzt noch umbenannt werden.
    Das Skin und das Video müssen ihre Namen behalten.
  3. Die von Flash generierte HTML-Seite wird nicht mehr benötigt.
  4. Die fla-Datei kommt nicht mit auf den Webserver, sollte aber für Wartungsarbeiten an einem sicheren Ort aufgehoben werden.
  5. Neue HTML-Seite erstellen (z.B. HTML 4.01 Trasitional) und einen Ordner oberhalb des „video“-Ordners speichern. Der Name ist egal.
  6. swf-Datei aus dem Explorer in den Vorschaubereich des Dreamwaver ziehen … Titel angeben … OK
  7. Quelltext anschauen und staunen.
  8. Datei speichern …
    Nachricht lesen … neue Skripte im Ordner anschauen, auch der Quelltext wurde verändert.
  9. Im Head, also zwischen <head> und </head> das folgende StyleSheet einfügen
    <style type="text/css">
    <!--
    body {     background-color:#9999FF;}
    -->
    </style>
  10. testen
  11. StyleSheet ergänzen: Klasse anlegen z.B. .meinVideo { border:5px solid red;}
  12. Klasse über die Eigenschaften des Dreamweavers zuweisen.
    Wo taucht diese Klasse im Quelltext auf?
  13. testen
  14. wenn es funktioniert:
    • width … height … position:absolute … Überschrift Text
    • Einbindung in ein vorhandenes Projekt

Eigene Skins

Der Komponenten-Inspektor zeigt diese Skins:
C:\Programme\Adobe\Adobe Flash CS4\Common\Configuration\FLVPlayback Skins\ActionScript 3.0

Die zu Grunde liegenden Flash-Dateien finden Sie hier
C:\Programme\Adobe\Adobe Flash CS4\Common\Configuration\FLVPlayback Skins\FLA\ActionScript 3.0

Eigener Player

Ein eigener Player kann über die Komponenten zusammengestellt werden.

Untertitel

Gesetzliche Rahmenbedingungen: Barrierefreiheit

de.wikipedia.org
Barrierefreies Internet
BITV
  1. Externes Video in Flash einbinden (siehe oben), dann
  2. Fenster-Menü | Komponenten
    FLVPlaybackCaptioning (bläuliches Symbol) auf die Videokomponente auf der Bühne ziehen
  3. Fenster-Menü | Komponenten-Inspektor
    source: hier den Dateinamen (und Pfad) der XML-Datei mit den Untertiteln eintragen.
  4. FLV-Skinn mit Caption-Schalter verwenden.

Vergleich HTML-XML

  HTML XML
Tags vorgegeben frei wählbar
Fehler werden nach Möglichkeit ignoriert
Seite eventuell aber geschreddert		 Abbruch, keine Ausgabe
Dokumente müssen „wohlgeformt“ sein
Gestaltung CSS
HTML (veraltet)		 CSS
XSL/XSLT

Die Formatierung erfolgt hier über interne <style>-Angaben.
Eventuell sind auch externe Stylesheets möglich.

Linklisten, Playersteuerung, HTML-Generator

www.video-flash.de/flv-flash-fullscreen-video-player

Video-Galerie mit XML-Playlist

www.adobe.com/devnet/flash/articles/video_gallery.html

Anmeldung Haben Sie Ihre persönlichen Daten vergessen?