Hi escardo!
Dein Plan an sich geht schon in die richtige Richtung...
Hier ein kleines Tutorial, welches die wesentlichen Grundlagen Deines Vorhabens abdecken sollte...
I. Grundlegende Überlegungen
Zunächst sollte folgende Frage geklärt werden: Du sprichst von "Videos", welche bei Mauskontakt abgespielt werden sollen. Handelt es sich bei diesen "Videos" um echte Videos im Sinne von Filmsequenzen, oder meinst Du damit separate Flash-Filme?
Diese Überlegung ist aus folgendem Grund von Bedeutung: In jedem Fall solltest Du Deiner Animation einen Preloader spendieren, damit der Ladevorgang für all diejenigen deutlich wird, welche eine langsame Verbindung zum Internet haben.
Ist die Datenmenge der einzelnen Filme groß, würde es sich anbieten, sie nicht direkt in Deine Animation einzubinden. Stattdessen wäre es sinnvoller, jedes einzelne Video in eine eigene Flash-Datei zu packen und mit einem eigenen Preloader zu versehen.
Anschließend würdest Du dann die einzelnen Filme per
loadMovie("Dateiname.swf". Ziel); einbinden. Das hätte zur Folge, dass nicht die ganzen Daten auf einmal geladen werden müssen, sondern immer nur dann, wenn sie wirklich gebraucht werden...
In diesem Tutorial werde ich zunächst auf den Fall eingehen, dass alles in einem preloadet wird. Sollte Klärungsbedarf für die zweite Variante (Daten dynamisch laden) bestehen, gehe ich darauf separat ein.
II. Vorbereitung der Datei
Die Überlegung, für jeden Button eine eigene Ebene anzulegen ist im Prinzip nicht verkehrt. Zwar kannst Du alle Schaltflächen und alle Videos auch in eine einzige Ebene packen (sofern Du diese nicht separat Tweenen (Bewegunsanimation oder Formanimation) willst, aber dabei geht die Übersicht schnell verloren.
Wenn Du andererseits für jeden Button und für jedes Video eine eigene Ebene erstellst, kannst Du zwar die einzelnen Elemente gezielter ansprechen, verlierst aber auch schnell den Überblick, da die Zeitleiste sehr hoch wird. Wenn Du nicht gerade (wie ich... *protz*) in den Genuß kommst, zwei oder mehr Monitore nutzen zu können, bist Du bald nur noch am Scrollen...
Daher empfehle ich Dir folgenden Kompromiß: Ebenenordner! Sammele alle Elemente in entsprechenden Ordnern. D.h. einen Ordner für alle Buttons, einen für alle Videos usw. und je eine Ebene für Scriptanweisungen und eine für das Hintergrundbild.
Das ganze könnte dann so aussehen:
Jetzt musst Du nur noch in der untersten Ebene "Bild" das Hintergrundbild plazieren, und weiter geht's...
III. Die Buttons
Die Schaltflächen sollen, wenn ich Dich richtig verstanden habe, nicht zu sehen sein. Es soll ja so aussehen, als reagierten bestimmte Teile des Bildes, richtig?
Dies erreichst Du folgendermaßen:
III.1 Schaltfläche erstellen
Zunächst zeichnest Du ein Rechteck ohne Rahmen. Die Farbe ist beliebig:
III.2 MovieClip erstellen
Anschließend markierst Du das Rechteck und drückst
F8. Dadurch kannst Du das Rechteck von einer Grafik in ein Symbol konvertieren.
Im erscheinenden Dialogfenster wählst Du "Movieclip" aus und achtest darauf, dass der mittlere Registrierungspunkt ausgewählt ist:
III..3 Schaltfläche unsichtbar machen
Du plazierst den Button nun an der Stelle, an der das Bild "reagieren" soll. Dort angekommen stellst Du sicher, dass die Schaltfläche ausgewählt ist, und wirfst einen Blick auf das Kontrollfeld "Eigenschaften". Sollte dies noch nicht offen sein, einfach
STRG + F3 drücken.
In der Mitte der Eigenschaftsleiste siehst Du den Punkt "Farbe". Dort wählst Du "Alpha" aus und als Wert 0%. Damit wird der Button unsichtbar:
Auf diese Weise erstellst Du so viele Reaktionsflächen, wie benötigt.
IV. Video-Clips erstellen / einbinden
IV.1 MC für Video erstellen
Ähnlich wie bei den Schaltflächen erstellen wir nun die Flächen für die Animation.
Durch das Drücken von
STRG + F8 öffnet sich das gleiche Dialogmenü wie beim Konvertieren der Grafik, nur mit dem Unterschied, dass Du nun einen leeren Clip erstellst.
Als Namen verwendest etwas aussagekräftiges, z.B. "Video 1".
Nach einem Klick auf "OK" befindest Du Dich in diesem MC. Hier machen wir jedoch noch nichts, sondern verlassen den MC durch einen Klick auf "Szene 1" in der Kopfzeile des Bühnenfensters.
IV.2 MC auf Bühne plazieren
Um den ersten Clip auf der Bühne zu plazieren, wählst Du zunächst in der Zeitleiste die richtige Ebene aus. Anschließend öffnest Du durch
STRG + L die Bibliothek.
Dort siehst Du den Namen des neuen Clips, und kannst diesen einfach auf die Bühne ziehen:
IV.3 Instanznamen vergeben
Damit das Ganze später funktionieren kann, ist es enorm wichtig, diesem Clip einen Instanznamen zu geben, damit er gezielt angesprochen und gesteuert werden kann.
Hierzu markierst Du den Clip und wirfst erneut einen Blick auf das Eigenschafts-Fenster. Direkt am Anfang findest Du das Feld "Instanzname". Dort trägst Du einen Instanznamen ein, der sich
nicht wiederholen darf!
IV.4 Clip mit Inhalt füllen
Nun kannst Du auf den Clip an der richtigen Stelle plazieren und anschließend doppelklicken. Dadurch wird dieser geöffnet.
Jetzt kannst Du den Clip mit Inhalt füllen. Wichtig dabei ist jedoch, dass der erste Frame keinen sichtbaren Inhalt hat, sondern nur einen einzigen Frame mit der Scriptanweisung
stop();:
Dies verhindert, dass die einzelnen Videos direkt von Anfang an abgespielt werden.
V. Die Scriptanweisungen
Nun kommen wir zu den Scriptanweisungen, welche das Ganze erst zum Laufen bringen...
Hier beschreibe ich zwei verschiedene Varianten:
Variante 1: Filme werden bei Mauskontakt abgespielt und sofort beendet, wenn die Maus die aktive Fläche wieder verlässt...
Variante 2: Filme werden nach Mauskontakt einmalig komplett abgespielt, und gehen danach wieder in den "Ruhezustand".
Durch
F9 öffnest Du das Fenster "Aktionen". Hier klickst Du auf das Icon "Ansichtsoptionen", um in den Expertenmodus zu wechseln. Auf diese Weise kannst Du die folgenden Scriptanweisungen direkt dorthin kopieren:
V.1 Variante 1
ActionScript für die Buttons:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
|
on(rollOver)
{
_root.INSTANZNAME.gotoAndPlay(2);
}
on(rollOut)
{
_root.INSTANZNAME.gotoAndStop(1);
}
|
ActionScript für die Clips:
Im letzten Frame der Animation erstellst Du ein Schlüsselbild in der Script-Ebene mit folgender Anweisung:
|
|
Quellcode
|
1
|
_root.INSTANZNAME.gotoAndPlay(2);
|
In allen obigen Fällen musst Du "INSTANZNAME" durch den Namen des jeweiligen Videos ersetzen.
Und dies bewirkt der Code:
Die ersten Zeilen (rollOver) veranlassen den Video-Clip dazu, ab Bild 2 abgespielt zu werden.
Die nächste Anweisung sorgt dafür, dass der Film wieder in seine Ausgangslage zurückspringt, wenn die Kontaktfläche verlassen wird.
Durch die kleine Zeile ActionScript am Ende des Clips wird bewirkt, dass dieser wieder an den Anfang springt und weiter abgespielt wird, bis die Kontaktfläche verlassen wird.
V.2 Variante 2
ActionScript für die Buttons:
|
|
Quellcode
|
1
2
3
4
|
on(rollOver)
{
_root.INSTANZNAME.gotoAndPlay(2);
}
|
ActionScript für die Clips:
Im letzten Frame der Animation erstellst Du ein Schlüsselbild in der Script-Ebene mit folgender Anweisung:
|
|
Quellcode
|
1
|
_root.INSTANZNAME.gotoAndStop(1);
|
In allen obigen Fällen musst Du "INSTANZNAME" durch den Namen des jeweiligen Videos ersetzen.
Und dies bewirkt der Code:
Wie Du siehst, ist der Code der Version 1 sehr ähnlich. Nur mit dem Unterschied, dass ein Verlassen der Kontaktfläche das Video nicht beendet, und das Video nur einmal durchlaufen wird, und sich dann wieder selbst beendet.
Ich hoffe, Dir die komplexen Zusammenhänge etwas näher gebracht zu haben... Bei Fragen weißt Du ja, wohin damit...
LapisInfernalis
Samstag, 26. Mai 2012, 04:57
Zum Seitenanfang
