Keine Lust auf türkis?

Thomas Aull :: Design + Code

10

Größe eines Flash-HTML-Containers zur Laufzeit ändern

Artikel vom 8. April 2010, von Thomas Aull in der Kategorie Flash & Actionscript

Hier ein kurzer Tipp, der sehr nützlich sein kann wenn man eine HTML/CSS Website baut die auch ein paar Flash-Elemente beeinhalten soll. Manchmal kommt es nämlich vor, dass sich die Größe des Flash´s verändern soll und die ist leider durch die Größe des HTML-Containers in dem das Flash eingebunden ist begrenzt. Mit ein wenig Java- und ActionScript kann man das Problem aber ganz leicht beheben.

Dieser Code muss in das HTML oder in eine von extern eingebundene JavaScript Datei:

JavaScript
<script type="text/javascript">
	function containerAnpassen(id, width, height) {
	var container = document.getElementById(id);
		container.style.width = width+'px';
		container.style.height = height+'px';
	}
</script>

Diese 3 Zeilen JavaScript sorgen dafür, dass das HTML-Element mit der übergebenen ID die ebenfalls übergebene neuen Werte für Breite und Höhe bekommt. Bindet man sein SWF jetzt mit 100% Höhe und Breite ein (z.B. mit SWFObject 2.0) ist das Flash immer so groß wie der Container und wird somit mitskaliert

In Flash muss man dann diese JavaScript Funktion dann nur noch aufrufen, und das funktioniert folgendermaßen:

ActionScript 3
ExternalInterface.call("containerAnpassen", "container", 300, 200);

Mit der Funktion ExternalInterface.call werden zuerst der Funktionsname im Javascript und anschließend zu übergebende Parameter übergeben (in diesem Fall den Namen des Flashcontainers, sowie die neuen Angaben für Höhe und Breite).

Wer das ganze mal in Aktion sehen will: Demo
Und hier gibts ein Codebeispiel zum Download

10 Kommentare

Kommentar schreiben Kommentare als RSS-Feed

Andinger schreibt am 14. Juni 2010 um 10:08 Uhr:

Hmm

Wenn Du aber doch aus AS die Funktion containerAnpassen() aufrufst, dann musst Du die doch auch in JavaScript so definieren, oder?

Also wäre es dann in JavaScript nicht

function resizeFlashContainer(id, width, height)

sondern

function containerAnpassen(id, width, height) {

Gruß, GenauerMensch :)

#1

Thomas Aull schreibt am 15. Juni 2010 um 9:03 Uhr:

Du hast vollkommen recht :-)
Ich habs auch schon geändert, dankeschön!

#2

bycan schreibt am 8. Juli 2010 um 11:27 Uhr:

Dankeschön! ^^ Genau das habe ich gerade gebraucht und war am rumprobieren.

#3

Hansjörg schreibt am 9. September 2010 um 14:08 Uhr:

So eine Funktion könnte ich gut gebauchen. Leider ist mir nicht klar, wie ich das JS in HTML aufrufen kann.

Ein Hinweis dazu wäre toll.

Danke

#4

Thomas Aull schreibt am 9. September 2010 um 15:24 Uhr:

Lade dir doch mal das Codebeispiel runter und schau´s dir an. Da ist die Funktion funktionierend drin und du kannst nachschauen wie das ganze aufgebaut ist.

#5

Hansjörg schreibt am 10. September 2010 um 7:17 Uhr:

Hab ich versucht. Mangels Know-how steige ich da leider nicht durch.

Ich hab eine swf-Datei die über eine xml-Datei gesteuert wird (also die tags und das Format). Dazu noch eine AC_RunActiveContent.js, welche den Browser überprüft.

Mein Problem ist, wo binde ich den Funktionsaufruf ” ExternalInterface.call(“containerAnpassen”, “container”, 300, 200);” ein…

Für einen Hinweis wär ich echt dankbar

#6

Thomas Aull schreibt am 10. September 2010 um 10:03 Uhr:

Der Funktionsaufruf (ExternalInterface.call…) muss in die SWF am die Stelle an der die Größe des Flashs angepasst werden soll. Wenn du also nur eine .swf und nicht die dazugehörige .fla hast wird’s schon schwierig.

#7

Hansjörg schreibt am 10. September 2010 um 17:30 Uhr:

Das hab ich fast befürchtet. Aber ich hab nur die swf-Datei (ist aus einem Tagcloud-Generator)

Danke für die Info.

#8

Benedikt schreibt am 17. September 2010 um 17:10 Uhr:

Hallo,

ich denke mal sowas kommt auch zum Einsatz wenn sich die Flashwerbung auf einmal flächendecken ausbreitet, oder?
Bei Youtube gabs sowas ja öfters mal.. dass dann die Autos aus dem Video herausfahren oder sowas.

Gruß Beendikt

#9

Thomas Aull schreibt am 17. September 2010 um 18:40 Uhr:

Jupp, ich weiß zwar nicht genau ob die bei sowas exakt die gleiche Technik verwenden, aber es wird wohl definitiv auch mit Kommunikation zwischen Flash und JavaScript gelöst.

#10