| Steuerung eines Flash Movies mit JS |
|
|
Thema:
|
Steuerung eines Flash Movies mit JS
|
Description:
|
Wie man per JS ein Flashmovie in einem
anderen Frame steuert.
|
Keywords:
|
Flash, JavaScript, Shockwaveplayer
|
Author:
|
Markus
Gottscheber
|
Date:
|
07.02.2000
|
Doc-ID:
|
35-001
|
URL:
|
http://www.flashworker.de/tutorial/35/001.html
|
Version:
|
1.01
|
Änderungen:
|
Java Script, Ankündigung einer
Linkliste
|
Anforderungen:
|
Flash 4
|
Vorkenntnisse:
|
Grundkenntnisse in HTML, Flash und
JavaScript
|
Download:
|
kein Download,
JavaScript Demo auf der Flash4 CD,
"\Goodies\Macromedia\JavaScript Demo"
|
|
|
Wozu braucht man
diese Art von Steuerung?
Diese Art von Steuerung benötigt man sobald mehr wie ein Frame benutzt
wird. Es soll dabei durch eine Aktion im ersten Frame ein Flash Movie im zweiten
Frame gesteuert werden.
Um diese Problematik zu veranschaulichen folgendes kleines Beispiel:
Man hat eine HTML Seite bestehend aus zwei Frames. Im Frame "links"
ist eine einfache Menüsteuerung, im Frame "rechts" ein kleiner
Flash Film. So, nun steht man vor genau diesem Problem. Ich möchte durch
eine Aktion im linken Frame eine Aktion im rechten
Frame auslösen.
Worin liegen die
Probleme?
Es treten folgende zwei Probleme auf:
1. Man muss durch eine Aktion im linken Frame den Shockwaveplayer, der das Movie
im rechten Frame abspielt, das gewünschte Kommando mitteilen.
2. Das zweite Problem ist allerdings viel schwieriger zu bewältigen. Es
ist nähmlich das allsteits unbeliebte Problem der Browserinkompatibilität.
Wie bei vielen anderen Problemen auch, ist hieran nur der Umstand schuld dass
die Browser der verschiedenen Softwarehäuser nicht die gleiche Syntax benutzen
um die gleichen Aktionen auszuführen!
Syntax zur Steuerung des Shockwaveplayers
Mit Internet Explorer:
document.framename.flashfilename.action
Mit Netscape:
document.framename.document.embeds[0].action
Wichtig ist auch, dass folgende EMBED und OJECT Tags beim laden des Flash-Movies
angegeben sind:
<object id="flashfilename">
<embed name="flashfilename" swliveconnect=true> </embed>
Das Script
Dieses Script sollte im Head Bereich des Dokumentes stehen indem man die Steuerung
des Flash Movies vornimmt.
<SCRIPT LANGUAGE="JavaScript">
var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
function stuff(s)
{
document.msgForm.message.value = s;
}
</script>
Die HTML Steuerung
<a href='javascript:var m = InternetExplorer ? parent.framename.flashfilename : parent.framename.document.embeds[0]; m.action'>TEXT</a>
So, jetzt muss man nur noch die richtigen Parameter in diesen HTML-Code einsetzen.
Da wären:
framename: Der Name des Frames, indem der anzusprechende Flashfilm läuft
flashfilename: Der Name des anzusprechenden Flashfilms. Falls der anzusprechende
Film den Dateinamen intro.swf hat, flashfilename=intro
action: Die auszuführende Aktion. Eine Liste der verschiedenen Möglichkeiten
findest du etwas weiter unten.
TEXT: Das ist natürlich allseits bekannt, hier kommt die Linkbezeichnung
rein - standard HTML.
Ein kleines Beispiel gefällig?
<a href='javascript:var m = InternetExplorer ? parent.rechts.intro : parent.rechts.document.embeds[0]; m.GotoFrame(50)'>Gehe zu Frame 50</a>
In diesem Beispiel hat der Zielframe den Namen "rechts", das Flashmovie
heisst "intro" und die Aktion ist "GotoFrame(50)".
Die Flash Steuerung
Meistens wird es allerdings erforderlich sein das Menü auch in Flash zu gestalten
- Es muss ja nicht unbedingt ein richtiges Menü sein, es könnten ja
auch zwei interaktive Filme sein - Da ist ja soooooo viel möglich!
Im Prinzip ist auch nicht viel Unterschied zur HTML Variante vorhanden. Die JavaScript
Anweisung wird in eine Get URL Aktion verpackt - und das war es schon.
On (Release)
Get URL ("javascript:var m = InternetExplorer ? parent.framename.flashfilename : parent.framename.document.embeds[0]; m.action")
End On
On (Release)
Get URL ("javascript:var m = InternetExplorer ? parent.rechts.intro : parent.rechts.document.embeds[0]; m.GotoFrame(50)")
End On
Wichtig ist jedoch nicht zu vergessen, dass das Flashmovie welches die Steuerung
beinhaltet eine HTML Seite benötigt, indem das JavaScript im Head Bereich
eingebaut ist!
Auflistung einiger Steuerungsmöglichkeiten
Es gibt sehr viele verschiedene Möglichkeiten wie der Parameter "action"
aussehen kann. Man kann nicht nur das Hauptmovie steuern, sondern auch die in
diesem Movie eingebauten Ebenen und Instanzen.
Eine gute Möglichkeit den Einsatz dieser verschiedenen Steuermöglichkeiten
zu sehen, ist das von Macromedia mitgelieferte "JavaScript Demo" auszuprobieren.
Ihr findet es auf eurer "Flash4" CD im Verzeichnis "\Goodies\Macromedia\JavaScript
Demo".
Hier die JavaScript Anweisungen die dahinter stehen:
Zur Steuerung der Instranz "flying bird":
framename = fw_map
flashfilename = map
Instanzname = bird
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TStopPlay("_flash0/bird")'"Stop Bird</a"
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TPlay("_flash0/bird")'>Start Bird</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash0/bird", 1)'>Bird 1</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash0/bird", 3)'>Bird 3</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash0/bird", m.TCurrentFrame("_flash0/bird")+1)'>Forward one frame</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash0/bird", m.TCurrentFrame("_flash0/bird")-1)'>Backward one frame</a>
Das Ganze geht natürlich auch noch etwas komplexer. Man verwendet einfach
mehrere Labels und Instanzen:
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.LoadMovie(1, "loop.swf")'>Load Loop</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.LoadMovie(1, "")'>Clear Loop</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TPlay("_flash1")'>Start Loop</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TStopPlay("_flash1")'>Stop Loop</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoLabel("_flash1", "part 1")'>Part 1</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoLabel("_flash1", "part 2")'>Part 2</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoLabel("_flash1", "part 3")'>Part 3</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoLabel("_flash1", "part 4")'>Part 4</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash1", m.TCurrentFrame("_flash1")+1)'>Forward one frame</a>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; m.TGotoFrame("_flash1", m.TCurrentFrame("_flash1")-1)'>Backward one frame</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; stuff(m.TCurrentLabel("_flash1"))'>Display Current Label</a>
<br>
<a href='javascript:var m = InternetExplorer ? parent.fw_map.map : parent.fw_map.document.embeds[0]; stuff(m.TCurrentFrame("_flash1"))'>Display Current Frame</a>
Auflistung einiger Actions
Eine kurze Zusammenfassung der oben verwendeten Actions:
|
Syntax
|
Beispiel
|
Beschreibung |
|
LoadMovie(MovieNummer,"MovieName.swf")
|
LoadMovie(1,"loop.swf")
LoadMovie(1,"")
|
lädt movie "loop.swf"
auf Ebene 1 nach
löscht den movie auf Ebene 1 |
|
TGotoFrame("welchesMovie",Ziel)
|
TGotoFrame("_flash0",50)
TGotoFrame("_flash0/bird",2)
TGotoFrame("_flash1",100)
|
geht zu Frame 50, Ebene 0
geht zu Frame 2, Ebene 0, Instanzname "bird"
geht zu Frame 100, Ebene 1 |
|
TGotoLabel("welchesMovie","welcherLabel")
|
TGotoLabel("_flash1","part3")
|
geht zu Label "part3"
auf Ebene 1 |
|
TPlay("welchesMovie")
|
TPlay("_flash1")
TPlay("_flash0/bird")
|
spielt das movie auf Ebene
1 weiter ab
spielt das movie auf Ebene 0 und Instanzname "bird" weiter ab |
|
TStopPlay("welchesMovie")
|
TStopPlay("_flash1")
TStopPlay("_flash0/bird")
|
stoppt das Abspielen des
movies auf Ebene 1
stoppt das Abspielen des movies auf Ebene 0, Instanzname "bird" |
Anwendungen dieses Scripts
Ich bin in den letzten Tagen von einigen Tutorium Usern nach Links gefragt worden,
wo man dieses Script im Einsatz sieht. Darum habe ich mich entschlossen dieses
Tutorium um diesen Punkt zu erweitern.
Es soll hier eine kurze Linkliste entstehen in der man einige ausgesuchte Anwendungen
dieses Scripts findet.
Wenn ihr euer Meisterwerk hier präsentieren wollt, dann bitte ein mail
an Markus
Gottscheber.
Wozu
braucht man diese Art von Steuerung?