Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 17 Video
  Pfeil 17.1 Videos in Flash
  Pfeil 17.2 Videos mit ActionScript
  Pfeil 17.3 Video mit Sound
  Pfeil 17.4 FLVPlayback in Flash 8 Professional
  Pfeil 17.5 Videos dynamisch verändern


Rheinwerk Computing - Zum Seitenanfang

17.5 Videos dynamisch verändern  topZur vorigen Überschrift

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.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern