Bewegende Bilder

Teil 3: Video-Tricks mit Flash

Erzeugen Sie also einen neuen Movieclip (Einfügen/Neues Symbol), fügen Sie in Frame 2 ein einfaches Bild ein (F5) und schreiben Sie folgende Programmierung in den ersten Frame:

_root.cursor._x=_root.
_xmouse;
_root.cursor._y=_root.
_ymouse;

So wird der Cursor an den Koordinaten der Maus ausgerichtet

if ((_root._xmouse>0)and(
_root._xmouse<130)){ _root.cursor._rotation=180;
vario=Math.round((144-_root.
_xmouse)/10);
}else if ((_root._xmouse>160)and
(_root._xmouse<290)){
_root.cursor._rotation=0;
vario=Math.round((144-_root.
_xmouse)/10);
} else{
_root.cursor._rotation=90;
if (vario<0){
vario=vario+1;
}else if (vario>0){
vario=vario-1; }
}

Die Bühne wird in drei Segmente auf der X-Achse unterteilt, 0 -130, 160-290 und der Rest, also die Mitte und der Bereich außerhalb des Films (Filmbreite 288 Pixel). In jedem Segment wird der Cursor gedreht und eine Variable namens vario geschrieben, die durch die X-Koordinate der Maus gemessen an der Filmmitte (144) berechnet wird und entweder einen negativen oder positiven Wert annimmt.

Die Rundung macht eine Ganzzahl daraus, der Divisor 10 verringert letztlich die Geschwindigkeit der Drehung. Ist der Cursor im neutralen Bereich zählt vario runter in Richtung 0. Das erzeugt ein sanftes Abbremsen.

_root.video.gotoAndStop(_root.
video._currentframe+vario);

Das ist die eigentliche Steuerung. Der Film wird um den Betrag der Ganzzahl verschoben, immer ausgehend vom aktuellen Frame. Es darf also gar nicht von selbst ablaufen, wie sonst beim Video üblich, sondern reagiert vollständig auf die Aktion des Nutzers.

if(vario>0){
if(_root. video._currentframe>
(_root. video._totalframes-vario)){
_root. video.gotoAndStop(1); }
}else {
if(_root. video._currentframe<=(vario*-1)){
_root. video.gotoAndStop
(_root. video._totalframes); }}

Diese Fallunterscheidung schafft die Verbindung zwischen Anfang und Ende des Videos. Es ist wichtig, die Schrittgröße vario zur Berechnung heranzuziehen, damit kein ungültiger Framewert wie zum Beispiel 0 getroffen werden darf.

Kehren Sie nun zurück zu Szene 1. Ziehen Sie den neuen Steuerungsclip auf die Bühne und erhöhen Sie die Filmgeschwindigkeit auf 25 Frames pro Sekunde. Fertig ist das erste Panorama.

Motivwechsel

Die Einbettung des Videos in diesen Steuerungsfilm macht diesen eventuell sehr groß. Insofern wäre vermutlich eine Überbrückung der Ladezeiten mit einer Preloader-Routine sinnvoll. Das Schöne am gewählten Ansatz ist, dass wir einfach nur prüfen müssen, wann der Container-Clip namens video vollständig geladen wurde.

Flash-Video-Tricks

© Archiv

Die Hyperlinks starten eine Schwarzblende und wenn der Bildschirm dunkel ist, lädt die Bildprogrammierung den neuen Film.

Diese Technik verhilft uns auch dazu, das Video auf sehr einfache Art austauschen zu können. Das gelingt entweder durch eine Steuerungsleiste mit sichtbaren Hyperlinks, wie man sie verwenden würde, wenn man zum Beispiel von einem Produkt unterschiedliche Farbvarianten zeigt.

Oder man erzeugt Hotspots innerhalb der Video-Movieclips. Das sind unsichtbare Buttons, die auf einer eigenen Ebene über dem Video liegen und sich an die Umrisse einer Tür oder eines Fensters anpassen.

Freilich sollten Sie dem Nutzer signalisieren, dass diese Option zum Raumwechsel besteht, vielleicht mit einem roten, glühenden Rand um die entsprechende Tür.

Das impliziert also, dass Sie weitere Videos, die Sie erzeugen, nicht als FLV-Dateien umsetzen, sondern ebenfalls als SWF-Files. Importieren Sie dazu das jeweilige Video in einen neuen Film, wählen Sie eingebettetes Video und verzichten Sie auf eine Steuerkonsole, ein Player Skin.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…