(Positionierung einer Filmsequenz per JS)

Einleitung
  Was bringt dieses Tutorial?

Tutorial
Problembeschreibung

JavaScript-Teil

Flash-Teil

Was bringt dieses Tutorial?

Anhand dieses Tutorials soll erklärt werden, wie man (auch ohne FScommand oder CGI) Variablen an Flash übergeben kann.

Vorausgesetzt werden Kentnisse in Flash und in JavaScript.



Tutorial

Ich bin mir nicht sicher, ob jemand schon mal dasselbe Problem gehabt hat, aber schaden kann das eh nicht. Mein Problem war:

Mit Dreamweaver 3 habe ich eine Seite erstellt, die aus drei Frames bestand (oben, mitte, unten). Im mittleren Frame sollte der Flashfilm zu sehen sein. Nachdem ich mir die Lektion "Randlos glücklich" von www.flashworker.de reingezogen und dann auch auf meine Seite angewendet habe, stellte ich fest, daß mein Film auf eine komische Art skaliert wurde. Obwohl die Einstellungen auf 100% in beide Richtungen stand, wurden die Grafiken nicht wie üblich verzerrt. Vielmehr wurde nur der Hintergrund des Films auf 100% der Framegröße skaliert. Das ganze sah natürlich nicht mehr so aus, wie ich es mir wünschte. Deswegen, wollte ich versuchen:

1. Die sichtbare Größe des Browserfensters zu ermitteln

2. Die ermittelten Werte an Flash zu übergeben

3. Anhand dieser Werte die "Bauteile" des Films zu positionieren

Obwohl NetscapeNavigator (NN) meiner Meinung nach bessere Möglichkeiten bieten, die Client-seitige Konfiguration des Browsers zu ermitteln, klappt die Positionierungssache nicht so doll, wie im InternetExplorer (IE). Ich konnte zwar die Variablen an Flash übergeben, aber derselbe Rechenweg ergab im NN völlig komische Ergebnisse. Zu Testzwecken, habe ich den NN-Teil des JS im HTML-Code der Seite gelassen (ist nicht aktiviert). Den JavaScript will ich nicht erklären, weil ich eigentlich selbst keine Ahnung davon habe. Den habe ich durch reines Ausprobieren aus mehreren anderen zusammengebastelt :) (Ich dachte, ich dreh' durch) Was ich auf meinem System aber feststellen konnte:

1. Übergabe der Variablen in NN klappte nur mittels eines FScommand

2. onResize hat im NN überhaut nicht funktioniert :( (deswegen FScommand)

Der HTML-Code der Seite, die man zu diesem Tutorial downloaden kann, enspricht den Standardeinstellungen bei der Veröffentlichung aus dem Flash ("Flash only") Auszug aus dem JS speziell für IE:

function IEsize()

{

var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;

var path = InternetExplorer ? movieIE : document.embeds[0];

if(navigator.appName == "Microsoft Internet Explorer")

{

path.SetVariable('Xsize', document.body.clientWidth);

}

}

Die Variable wird mit "path.SetVariable('Xsize', document.body.clientWidth);" an Flash übergeben und, wenn diese im Film noch nicht vorhanden ist, erzeugt. Der Befehl setzt sich zusammen aus:

path = Name des Films (Kann man auch durch den ID-Wert aus dem OBJECT ersetzen)

SetVariable = Die Anweisung an Flash

'Xsize' = Name der Variablen (in einfachen Anführungszeichen!)

document.body.clientWidth = Wert der Variablen

Aktiviert wird das ganze durch die Anweisungen im BODY onLoad="IESize()" und onResize="IEsize()".

"movieIE" enspricht dem ID-Wert im OBJECT-Teil des Seiten-Codes.

Ok, nun zum Flash :) Wie man es sehen kann [wie? Du hast das Ding noch nicht gesaugt? Na dann wird's aber Zeit :) ], steht der Filmaufbau in der Mitte des Frames. Wenn man aber "außerhalb" des Films die rechte Maustaste anklickt kommt das Flash-Kontextmenü. Daraus folg - nur der Hintergrund des Films wurde skaliert. Zu beachten ist aber auch, daß die Koordinaten dieselben geblieben sind. D.h. daß X=0 NICHT am linken Rand des Browserfensters liegt! Das ist wichtig, um die Position richtig bestimmen zu können. Was wir haben ist: Flashfilm (Breite=x) liegt genau in der Mitte des Frames. "Xsize" sei die sichtbare Fenstergröße. Daraus folgt:

x(Rechter Rand) = x + (Xsize - x)/2

x(Linker Rand) = 0 - (Xsize - x)/2

Alles klar? Wenn nicht, dann "Skizze des mittleren Frames" nachgucken :) Um die Breite des Films zu ermitteln setzen wir ein MC genau in die Mitte des Films ( Strg+K => An Seite ausrichten). Dem MC geben wir den Instanznamen "x".

ActionScript-Beispiel: Positionierung eines MC's (MovieClip=Filmsequenz) am rechten Rand des Fensters:

Erläuterungen zu den einzelnen Codezeilen (Korrekturen sind herzlich willkommen)

1. Es wird eine neue Variable "x" deklariert, die den Wert "2*GetProperty("/x",_x)" hat. Speziell in unserem Fall bedeutet das folgendes: Es wird die Position (x-Wert) der Instanz "x" ermittelt ("x" war doch der MC, den wir in der Mitte des Films positioniert haben). Um Die Breite des Films zu errechnen, verdoppeln wir den ermittelten x-Wert.

2. Eine "If"-Anweisung wird eingeleitet. Diese Anweisung wird in diesem Fall nur dann ausgeführt, wenn die Variable "x" den Wert kleiner als Xsize (die Fensterbreite) hat.

3. Hier wird die neue Position der Instanz "/bild" bestimmt. Wir ermitteln dazu die Breite der zu positionierenden Instanz "/bild" und halbieren diesen, um die Mitte zu finden. Die Mitte entspricht der x-Position der Instanz. Um "/bild" genau am Rand des Fensters zu plazieren, errechnen wir die Strecke von x=0 bis zum Rand (x+ (Xsize - x) / 2) und ziehen die Hälfte der Breite der Instanz ab.

4. Wenn das Fenster aber "kleiner" als der Film ist?

5. Die Position von "/bild" wird durch das Abziehen der halbierten Breite von der Fenstergröße ermittelt. Warum? Na weil Flash die Größe des Films beim Verkleinern nicht ändert! Wenn der Film also 600px breit war, dann bleibt für Flash das Ding immer 600 px breit. Auch, wenn es anders aussieht :)

Was noch fehlt, ist eine Schleife, bei der unser AS immerwieder durchlaufen wird. Dies kann man z.B durch einen GoTo-Befehl erreichen.

So, das war's dann wohl :) Oder funzt das etwa nicht?