Flashmenü integrieren - So wird das TYPO3 Flash Menü eingebaut

Schön sind sie ja – die Flashmenüs. Nur was nützt einem die ganze Schönheit, wenn man als Besucher der Homepage kein Flashplugin installiert hat oder, aus welchem Grund auch immer, dazu gezwungen ist das Plugin zu deaktivieren? Aus meiner Seitenauswertung geht hervor, dass sich der Prozentsatz derer die kein Flash aktiviert haben bei ca. 2-3% befindet.

Wer jetzt denkt für diese Minderheit bräuchte es keine Extrabehandlung, der irrt sich. Es ist nämlich nicht nur für diese Art von Besuchern wichtig ein alternatives Menü bereit zu stellen sondern vor allem für jede Art von Suchmaschine - bisher gibt es meines Wissens noch keinen großen Suchdienst, der Links aus Flashdateien aufrufen kann.

Für die Popularität der eigenen Homepage ist ein alternatives Menü daher eine unverzichtbare Maßnahme die gemacht werden muss – ansonsten garantiere ich euch, dass es mit dem Google-Ranking sehr "mau" aussehen wird. Wir brauchen also einen Mechanismus, der erkennt ob der Besucher Flash aktiviert hat oder nicht. Je nach dem Stand der Dinge wird dann das Flashmenü bzw. die alternative Navi eingeblendet. Aber keine Sorge, zum Glück gibt es schon ein fertiges Script, dass uns diese Arbeit abnimmt.

SWFObject ist eine kostenlose Flashdetection von Geoff Stearns die man sich unter http://blog.deconcept.com/swfobject/ frei herunterladen kann.

Die wichtigste Datei aus dem ZIP-Paket ist die swfobject.js. Diese muss in den Header euerer Seite eingebunden werden:

HTML:

<script type="text/javascript" src="fileadmin/templates/swfobject.js"></script>

Wie ihr das Script schließlich einbindet ist euch überlassen - entweder über page.headerData oder direkt über euer Template.

Ist das Script eingebunden, stehen einem eine Reihe von Funktionen zur Verfügung die auf der SWFObject Homepage sehr gut erklärt werden. Das Prinzip ist einfach: Es gibt einen div-Container mit einer eindeutigen ID in dem sich euer alternatives Menü befindet. Anschließend wird ein SWFObject erzeugt. Falls nun Flash aktiv oder installiert ist wird dieser div-Container vom SWFObject durch das Flashmenü ersetzt. Da dies aber erst beim Aufrufen der Seite stattfindet, beinhaltet der Quelltext immernoch das alternative Menü - also aller erste Sahne für Suchmaschinen.

Ein Beispiel wie es aussehen könnte sieht so aus:

HTML:

<div id="flashnavi">

        <ul class="menu">

             <li>Menüpunk1</li>

             <li>Menüpunk2</li>

             <li>Menüpunk3</li>

             <li>Menüpunk4</li>

             <li>...</li>

        </ul>

</div>

<script type="text/javascript">

   // <![CDATA[

                   

  var so = new SWFObject("fileadmin/templates/menu.swf", "menu", "890", "188", "8", "#ffffff");

 so.write("flashnavi");

          

  // ]]>

</script>

Es wird also ein Objekt names so erzeugt und gleichzeitig einige Parameter mitgegeben. Die Komplette Liste der Konstruktorparameter gibt es hier.

Schön schön, wir sind nun fast fertig. Therothisch müsste euer Menü schon gehen. Das einzige was jetzt noch fehlt, ist die Übergabe der aktuellen Seiten-ID von TYPO3. Wer mein Tutorial gemacht hat weiß vielleicht noch, dass ich dort eine init()-Methode verwendete, um den Menüpunkt mit einer bestimmten Seiten-ID (in TYPO3 UID) auf aktiv zu setzen.

SWFObject hat auch hierfür eine Methode parat:

JavaScript:

var so = new SWFObject("fileadmin/templates/menu.swf", "menu", "890", "188", "8", "#ffffff");

so.addVariable("selectedUid", "11"); // Ausgewählter Menüpunkt

so.write("flashnavi");

Mit addVariable wird der Flashdatei zur Laufzeit eine Variable namens selectedUid mitgegeben die in Flash selbst mit _root.selectedUid abgerufen werden kann. Die Datei xml_laden.fla aus dem Teil 5 des Tutorials hätte dann statt rootMenü.init(11) folgenden Syntax: rootMenu.init(_root.selectedUid).

Da die Uid auf jeder Seite logischerweise anders ist können wir der selectedUid nicht einfach den Wert 11 zuweisen sondern müssen diesen per TypoScript steuern. Hierzu legt man sich einen Marker im Template an und übergibt den Marker die PageId. Ich habe bei meinem Menü den kompletten JavaScript Code ersetzt:

TypoScript:

lib.swfobject = TEXT

lib.swfobject.value (

      <!--swfobject einbinden -->

 <script type="text/javascript">

   // <![CDATA[

                           

          var so = new SWFObject("fileadmin/templates/menu.swf", "menu", "890", "188", "8", "#ffffff");

         so.addVariable("selectedItem", "{page:uid}"); // Ausgewählter Menüpunkt

               so.write("flashnavi");

                          

  // ]]>

        </script>

)

lib.swfobject.insertData = 1

Der HTML-Output dürfte der selbe wie im obigen Beispiel sein, nur dass die feste Id 11 nun durch die tatsächliche UID der Seite ersetzt wird. lib.swfobject ist natürlich nur mein Marker - in euerem Fall kann dieser anders heißen.

Nun, das ist jetzt erst einmal alles was mir für das Tutorial einfallen ist. Ich hoffe ich habe mich halbwegs verständlich ausgedrückt und konnte dem ein oder anderen Besucher dieser Seite etwas beibringen :)

Ich würde mich über ein Feedback des Tutorials sehr freuen. Schreibt mir einfach ´ne kurze mail. Falls ihr selbst ein TYPO3 Flashmenü nach diesem Tutorial gebaut habt und auf euerer Seite verwendet wäre es sehr nett mir den link zur Seite zu schicken. Ich plane nämlich eine Art Galerie mit TYPO3 Flashmenüs.

Vielen Dank
der Tom