Anzeige
Tutorialbeschreibung

Preloader und Video mit Steuerelementen

Preloader und Video mit Steuerelementen

Hallo!

Dieses Tutorial besteht aus 2 Teilen. Im ersten Teil erkläre ich, wie man einen Preloader erstellt.
Im 2. Teil ein praktisches Anwendungsbeispiel, bei dem ich zeige, wie man ein Video einfügen kann, so dass sich das wie ein Video steuern lassen kann.

So wird´s am Ende aussehen:


Wir beginnen mit einem leeren Flash Dokument.

Für den ersten Teil könnt ihr die Grundeinstellungen nehmen, die ihr wollt.

Grundsätzlich

So funktioniert der Preloader:

Frame 1 + 2 sind für den Preloader vorgesehen. Frame 2 enthält die Anweisung, zurück zu Frame 1 zu springen und weiter abzuspielen.

Bilder


Frame 1 enthält den eigentlichen Preloader. Dort enthalten sind zum einen die Abfragen, die im dynamischen Text ausgegeben werden. (Gesammtgröße, Größe geladen und Prozent geladen)

_root.getBytesTotal() Ermittelt die Größe der Flashdatei
_root.getBytesLoaded() Ermittelt die Bytes die bereits geladen sind
Die Prozentzahl errechnet sich nun aus einer simplen Rechnung aus der Gesamtgröße und der geladenen Größe. (Geladen * 100 / Gesamtgröße) Da die Prozentzahl auch einzige konstante Größe ist, bei der immer bei 100% das ganze Video geladen ist verwenden wir die Variable Prozent für eine if Funktion, die wenn Prozent 100 erreicht das Video startet.
if Prozent = 100 Gehe zu Frame 3 und spiel.
Alternativ kann man dort auch "Stop" setzen, aber dazu später.

Daraus ergibt sich für Frame 1 folgender Quelltext:

bytes_gesamt = _root.getBytesTotal() add " Bytes gesamt";
bytes_geladen = _root.getBytesLoaded() add " Bytes geladen";
prozent = int(_root.getBytesLoaded()*100/_root.getBytesTotal()) add " Prozent";
if (prozent == "100 Prozent") {
gotoAndPlay (3);
}

Bevor wir aber die Übersicht verlieren, benennen wir die Ebene 1 Action+Text.

Immer noch in der gleichen Ebene + Frame ziehen wir nun 3 Textfelder auf. Macht sie nicht zu klein, damit der dynamisch generierte Text auch noch reinpasst.

Die Einstellungen für die Textfelder könnt ihr aus dem Bild entnehmen:

Bilder

Das Einzige, das in jedem Textfeld anders ist, ist die Variable.

Dafür tragen wir im obersten Feld ein: bytes_gesamt
im Mittleren: bytes_geladen
und im Unteren: prozent

Damit rufen wir die Variablen aus dem Action script im ersten Bild auf.

Die Schriftart und Größe könnt ihr natürlich ändern wie ihr wollt.

Weiter geht es in der gleichen Ebene.

Wir erstellen im 2. Frame ein weiteres Schlüsselbild (kein leeres). In diesem Bild gehen wir in die Aktionen und tragen dort ein: gotoAndPlay (1);

Das war es jetzt eigentlich schon mit dem Preloader. Ab hier könnt ihr ab dem 3. Frame mit eurem Video beginnen. Natürlich könnt ihr auch den Preloader noch etwas umgestalten, dies aber in weiteren Ebenen.
Ein Hinweis: Wenn ihr den Film von der Platte aus startet, könnt ihr den Preloader selbstverständlich nicht sehen, der der Film ja schon geladen ist.

Das war´s mit Teil 1. Jetzt Teil 2 mit einem Beispiel, was man damit noch machen kann.

 

Teil 2

In Teil 2 werden wir ein Video hinter dem Preloader einfügen. Das Video kann man am Ende über Buttons wie ein Video steuern.

Als Erstes benötigen wir dafür die Buttons. Verwenden tun wir Play, Zurück, Pause und Stop. In den ersten beiden Frames, also beim Preloader, werden diese Buttons schon sichtbar sein, allerdings sollen sie als inaktiv gekennzeichnet sein. Dazu verwende ich die altbewerten TV Lines, die ich in einer separaten gif Datei gespeichert habe.

Bilder
Bilder
Bilder
Bilder


Diese Buttons dürft ihr frei verwenden, nur nicht als euer Ergebins ausgeben. (rechte Maustaste --> Speichern unter)

Die TV lines bestehen aus einer schwarzen und aus einer tranzparenten Zeile, so dass die Buttons noch zu erkennen sind.

Bilder

Das Video importieren wir aus einer bestehenden Image sequence. Tipp: Mit Quick Time kann man Videos als Image Sequenz exportieren. Dazu wählen wir das Format png und 24 Bilder pro Sekunde, hier Blau hinterlegt:

 

Bilder

Nun haben wir alles was wir brauchen: Ein Video zum Importieren und Buttons zum Steuern.

Da wir beim Export eine Bildfrequenz von 24 eingestellt haben, müssen wir unserem Video ebenfalls eine Bilderzahl von 24/Sekunde geben. (In den Eigenschaften der Flash Datei einstellen.) Außerdem sind die Bilder der Imagesequenz 320*240 Pixel groß. Ich verwende für das Flashdokument eine Größe von 320*280 Pixel. Also Videogröße + 40 Pixel für die Buttons. (Eure Bilder können anders sein und dementsprechend anders müssen dann auch eure Einstellungen sein.)

Wir gehen jetzt zurück in unser Flashdokument und erstellen eine neue Ebene und nennen sie HG Text und ziehen sie unter die Ebene Action+Text. In dieser Ebene ziehen wir mit dem Rechteckwerkzeug ein Rechteck auf, das exakt so groß ist wie die 3 Textfelder. Als Füllfarbe nehmen wir Schwarz, Rand lassen wir weg.

In dieser Ebene ziehen wir nun mit dem Rechteckwerkzeug ein Rechteck auf, das exakt so groß ist wie die 3 Textfelder. Füllfarbe Schwarz, Rand lassen wir weg. Wir wählen das Feld aus, drücken F8 und konvertieren das Rechteck in eine Grafik. Anschließend stellen wir bei Farbe auf Alpha um und stellen einen Wert von 60% ein.

 

Bilder

Jetzt kommen wir zu den Schaltflächen. Dazu erstellen wir eine neue Ebene und nennen diese Schaltflächen. In diese Ebene fügen wir nun unsere 4 Schaltflächen ein. (Datei -> importieren -> in Bühne importieren.) Anschließend richten wir die Schaltflächen zueinander aus. Mit dem Auswahlwerkzeug ziehen wir ein Rechteck über alle Schaltflächen und im Feld Info können wir nun die exakte Position eingeben (X=80, Y=240). Sind die Schaltflächen mittig registriert (X=160, Y=260).

Bilder

Jetzt kommen wir zu den TV-Linien, die ja kennzeichnen sollen, dass während des Preloadvorgangs die Schaltflächen inaktiv sind.

Dazu erstellen wir eine neue Ebene, ziehen sie direkt über die Ebene Schaltflächen und nennen diese TV-Lines. Jetzt importieren wir in den ersten Frame dieser Ebene die Grafik TV-Lines und richten sie exakt über den Schaltflächen aus.

Bilder

Der Preloader ist nun so gut wie fertig. Wir müssen nun nur noch entscheiden, ob das Video nach dem Laden eigenständig starten soll, oder ob dies erst durch einen Klick auf Play geschehen soll.

Wir wechseln dazu in die Ebene Action+Text und wählen den ersten Frame aus. Dort gehen wir in die Aktionen - Bild. Der Action Text, den wir zu Beginn eingegeben haben, weist das Video an, wenn es fertig geladen ist, direkt mit dem Abspielen zu beginnen. Soll das aber erst durch den Klick auf Play geschehen, ändern wir die vorletzte Zeile in gotoAndStop (3); (im Pic gelb unterlegt).
Ich verwende den Stop.

 

Bilder

Das waren die nötigen Einstellungen im Preloader. Jetzt zum Video. In der Ebene Schaltflächen erstellen wir nun bei Frame 3 ein Schlüsselbild. In diesem Frame konvertieren wir nun alle 4 Schalter in Buttons. (F8 -> Schaltfläche wählen -> OK) Diese Aktion für alle Schaltflächen extra ausführen.
Die Aktionen für die 4 Schaltflächen.

Die Erste ist für´s Zurückspringen zuständig. Im Aktion Text für diese Schaltfläche fügen wir deshalb ein:
on(release) {
     gotoandplay (3);
}

Beim Loslassen der Maus soll er zurück zum Anfang des Filmes springen und dort weiter abspielen.

Für die 2. (Stop)
on(release) {
     gotoandstop(3);
}

Zum Anfang des Films springen und stoppen

Für Play:
on(release) {
     play();
}

Abspielen


und für die Letzte Pause:
on(release) {
     stop();
}

Damit stopt er, bleibt aber an der Position stehen. Dadurch wird ein Pauseeffekt erzielt, obwohl der Film eigentlich stopt.

Jetzt fehlt nur noch das Video. Wir erstellen eine Ebene, nennen diese Video und ziehen sie nach ganz unten. Jetzt nur noch in Frame 3 dieser Ebene ein leeres Schlüsselbild einfügen. Nun verwenden wir die Image Sequence. Wir wählen wieder im Menü Datei->Importieren->in Bühne importieren und wählen das erste Bild zum Importieren. Da die Bilder alle fortlaufend gekennzeichnet sind, wird nun gefragt ob alle Bilder importiert werden sollen. Diese Frage bestätigen wir mit "Ja".

Bilder


Jetzt haben wir auch schon das Video. Als Vorschau auf das Video im Preloader suchen wir uns ein Passendes im Video aus. Wir klicken den Frame an und klicken dann mit der rechten Maustaste auf das Bild und wählen kopieren.
Wir gehen in der Ebene Video zurück zum 1. Frame und klicken mit der rechten Maustaste in eine freie Fläche und wählen einfügen. Jetzt nur noch das Bild an die richtige Stelle verschieben.

Bilder

Das war es jetzt fast. Wir gehen in der Ebene Video zum letzten Frame und tragen dort im Aktion Script ein:

gotoAndStop (3);

Bei der Ebene Schaltfläche fügen wir noch in Höhe des letzten Frames ein Bild ein.

Das war´s. Das Video kann man nun über die Buttons steuern. Hier könnt ihr euch das Endergebniss ansehen:

Ich hoffe, dass es verständlich erklärt ist und ihr damit klar kommt. Natürlich könnt ihr noch weitere Elemente einbauen.

Hier noch die fla vom Tut (Allerdings ohne Video, das wäre ein bisschen groß): tut.fla


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von womanisery
  • 27.04.2010 - 22:37

bin auch leider Anfänger und verstehe kaum von dem was beschrieben wird ;( sehe, das viel Arbeit auf mich zukommt

Portrait von pixelschieberin
  • 09.03.2010 - 16:35

Danke für die Mühe dieses Tutorial zu ertellen.
Ich hätte es allerdings als sehr hilfreich empfunden, wenn bereits in der Kurzbeschreibng stünde um welche Flashversion und besonders um welche ActionScript Version es sich handelt, da man in der Übersicht leider keine Hinweise dazu oder zum Einstellungsdatum erhält.

So öffnet man ein Tutorial und bekommt Punkte abgezogen und es ist doch nicht das, was man sucht. :(

Portrait von ScorpX
  • 19.02.2010 - 20:06

Cooles Einfaches tutorial Danke :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.08.2009 - 09:27

nice , danke super tut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.07.2009 - 02:59

sehr gut danke danke

Portrait von JBKING
  • 14.07.2009 - 15:06

Leider funktioniert bei mir der Preloader nicht. Bin aber Anfänger!
Auch kann ich die Beispieldatei nicht debuggen....
Da kommt immer die Fehlermeldung, das die Datei "locked" ist.

Portrait von 89erMilo
  • 01.03.2008 - 10:59

bei mir zeigt der immer 3 Syntax Fehler an :(
Helft mir bitte!!!
Ich wollt ein Intro für meinen Clan machen, aber hab net viel Ahnung von Flash
Hab alles so gemacht, wie er geschrieben hat ...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.02.2008 - 22:14

dwegen cs3 dann doch ein wenig veraltet da helfen die adobe docs doch besser dennoch der mühe halber.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.06.2007 - 10:43

Nicht schlecht, aber für Einsteiger etwas schwierig.

Portrait von Liebling373
  • 13.06.2007 - 12:50

für einen anfänger sehr kompliziert, gemacht aber für die große mühe gibt es auf jeden fall 2 punkte!, Vielleicht das ganze mal mit jemandem bereden der null ahnung hat und dann umarbeiten so das es auch in der letzten reihe verstanden wird!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.06.2007 - 12:20

sehr schön erklärt danke

Portrait von johnsommer
  • 25.01.2007 - 09:27

und was ist wenn man kein quick time hat weil das pro zu teuer ist und apple kake ist

Portrait von johnsommer
  • 24.01.2007 - 16:08

ich verstehe kein einziges wort als flash noob die textfelder verschwinden doch gleich wieder und es ist derbe doof erklärt!! ):

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.01.2007 - 18:45

Sehr gut geschrieben und leicht verständlich! Daumen Hoch, gute Arbeit.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 31.12.2005 - 23:15

Etwas schwierig für einen Neuflasher, aber sehr interessant.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.09.2005 - 22:07

Gut das Teil, wirklich gut! Zwar etwas häßlich aber das lässt sich ja anpassen. Danke für das Tutorial.

Portrait von Downey
  • 04.09.2005 - 10:51

Danke!<br>
<br>
Zugegebenerweise kann ich andere GFX recht gut beurteilen, es aber selber so hinbekommen wie ich es möchte... NEIN Aber stimmt, die Buttons kann man ja ohne Probleme austauschen, hab sie ja auch nur mit beigesetzt, damit man jetzt nicht noch auch noch Buttons Basteln muß ;)

Portrait von Valten
  • 11.04.2005 - 13:40

hab schon extrem viele Preloader Tuts gesehen, aber das ist das erste, das auch ich verstehe ;).<br>
Große Klasse!!<br>
<br>
mfg<br>
Valten

Portrait von Stefan
  • 07.04.2005 - 18:56

Echt genial geschrieben und super ausführlich! Besesr gehts nicht!

x
×
×