17.5 Videos dynamisch verändern 

Da ein Video in einem MovieClip liegt, lassen sich folglich die Eigenschaften und Methoden für MovieClips darauf anwenden: Größe, Farbe und Position des MovieClips bestimmen die entsprechenden Werte des Videos.

Das folgende Beispiel zeigt Ihnen, wie Sie diesen Fakt praktisch nutzen. Ausgangspunkt ist die Datei videobearbeitung_fla auf der CD-ROM.

In dieser Datei finden Sie auf der rechten Seite drei Video-Miniaturen als MovieClips. In der Mitte ist eine große schwarze Fläche zu sehen.

Die Videos sind in der Version für Flash 8 und Flash MX 2004 als FLV-Dateien importiert. Die Flash MX-Variante könnte interessanterweise ebenfalls mit FLV-Dateien zusammenarbeiten, allerdings nur wenn ein Flash-Player 7 installiert ist. Deswegen haben wir für andere Ausstattungen eine Version mit MOV-Dateien angefügt.

Abbildung 17.13 Das Bearbeitungswerkzeug für Videos in der Rohform

Ein Klick auf eines der drei Videos soll es in der schwarzen Fläche in Großformat zeigen. Die drei Schaltflächen bei Farbe variieren die Grundfarbe des Videos, die Schaltfläche Format ändert das Größenformat und der Schieberegler Alpha bestimmt die Transparenz. Soviel zur Theorie; wie Sie das Beispiel in der Praxis realisieren, zeigen die nächsten Schritte.

Schritt für Schritt: Videobearbeitung per ActionScript

Der Code für die Schaltflächen und die Filmauswahl landen dank Ereignisprozeduren im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript. Der Code für den Schieberegler findet seinen Platz direkt in der Aktion des Schiebereglers.

Zuerst erstellen Sie einen leeren MovieClip, der das großformatige Video aufnehmen soll:

this.createEmptyMovieClip("video_mc", 1);

Dieser MovieClip dient als Container für das Video. Platzieren Sie ihn an der richtigen Stelle:

video_mc._x = 30;
video_mc._y = 35;

Für die Videoauswahl versehen Sie die drei MovieClips, die kurze Vorschauvideos beinhalten, mit einem Schaltflächen-Ereignis:

videoauswahl1_mc.onRelease = function() {

Das Video wird mit attachMovie() an den vorher erstellten Videocontainer angehängt:

   video_mc.attachMovie("videoberge1_mc", "videoberge1_mc", 1);
};

Nach demselben Verfahren entstehen die zwei anderen Video-Schaltflächen:

videoauswahl2_mc.onRelease = function() {
   video_mc.attachMovie("videoberge2_mc", "videoberge2_mc", 1);
};
videoauswahl3_mc.onRelease = function() {
   video_mc.attachMovie("videodohlen3_mc", "videodohlen3_mc", 1);
};

An diesem Beispiel sehen Sie wie praktisch es ist, Schaltflächen-Ereignisse auch für MovieClips zur Verfügung zu haben. So wird sogar ein MovieClip mit Video zur vielseitig einsetzbaren Schaltfläche.

Abbildung 17.14 Auf Knopfdruck erscheint das Vorschauvideo als Hauptfilm auf der linken Seite.

var breitbild:Boolean = false;

Bei Klick auf die Schaltfläche überprüfen Sie den Zustand, dann skalieren und positionieren Sie das Bild entsprechend:

formatwahl_btn.onRelease = function() {
   if (!breitbild) {
      video_mc._yscale = 60;
      video_mc._y += 48;
      breitbild = true;
   } else {
      video_mc._yscale = 100;
      video_mc._y -= 48;
      breitbild = false;
   }
};

Vergessen Sie nicht, den in der Variablen breitbild gespeicherten Zustand nach den Anweisungen zu ändern.

Um das Video einzufärben, bereiten Sie ein Color-Objekt und drei zugehörige Farbtransformationen vor:

var videofarbe_color:Color = new Color(video_mc);
var farbtransformation = {ra:'100', rb:'0', ga:'100', gb:'0', 
ba:'100', bb:'0'};
var farbtransformation1 = {ra:'100', rb:'150', ga:'100', gb:'60', 
ba:'100', bb:'0'};
var farbtransformation2 = {ra:'100', rb:'-45', ga:'100', gb:'0', 
ba:'100', bb:'100'};

In Farbtransformationen können Sie nicht nur den hexadezimalen Farbwert ändern wie bei setRGB(Farbwert), sondern alle einzelnen Farbwerte beeinflussen (r, g, b). Der zweite Buchstabe bei den Werten steht für den Farbanteil in Prozent von –100 bis +100  % (a) und für den Offset (b), also die Veränderung des Wertes in absoluten Werten.

In Ereignisprozeduren für die drei Farb-Schaltflächen weisen Sie die jeweilige Farbtransformation zu:

farbeloeschen_btn.onRelease = function() {
   videofarbe_color.setTransform(farbtransformation);
};
farbe1_btn.onRelease = function() {
   videofarbe_color.setTransform(farbtransformation1);
};
farbe2_btn.onRelease = function() {
   videofarbe_color.setTransform(farbtransformation2);
};

Den Schieberegler für die Transparenz erstellen Sie wie gewohnt. Zuerst legen Sie die Koordinaten fest:

onClipEvent (load) {
   regoben = _y;
   regunten = _y;
   reglinks = _x;
   regrechts = _x+100;
   _x -= 0;
}

Dann starten und beenden Sie Drag & Drop:

on (press) {
   startDrag(this, false, reglinks, regoben, regrechts, regunten);
}
on (release, releaseOutside) {
   stopDrag();
}

Schließlich ändern Sie beim regelmäßig auftretenden Ereignis enterFrame die Transparenz mit der Position des Schiebereglers:

onClipEvent (enterFrame) {
   _root.video_mc._alpha = (regrechts-_x);
}

Abbildung 17.15 Der Film zur Videobearbeitung zeichnet sich durch vielfältige Änderungsmöglichkeiten aus.

Die fertige Datei finden Sie auf der CD-ROM unter dem Namen videobearbeitung_AS2.fla bzw. unter videobearbeitung_AS1.fla.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.