Anzeige
Tutorialbeschreibung

Deep Linking mit SWFAddress

Deep Linking mit SWFAddress

Ein Problem, mit dem Flash und andere ähnliche Technologien zu kämpfen haben, ist, dass diese keine History-Einträge machen. Somit ist es nicht möglich, direkt auf einen bestimmten Teil der Website zu navigieren. Doch es gibt eine Möglichkeit, wie das machbar ist, und diese werde ich euch in diesem Tutorial vorstellen.


Demo

Das Zauberwort ist SWFAddress. Diese kleine Library erlaubt ein Deep Linking, also ein Verlinken auf bestimmte Teile der Flash-Website. Neben dem Ändern der URL  wird auch der Titel der Website geändert und History-Einträge erzeugt.
In diesem Beispiel werden wir je nachdem, welcher Button geklickt wurde, den Haupttext ändern.

Los geht's.

Als Ausgangslage haben wir vier Buttons mit Instanznamen "eins_btn" ,"zwei_btn","drei_btn" "vier_ btn". Diese befinden sich in einem MovieClip namens "buttons_mc".
Oberhalb der Schaltflächen haben wir noch ein MovieClip ("con_mc"), der einen Vector-Hintergrund sowie ein TextField namens "con_txt" enthält. Vielleicht ist euch schon aufgefallen, dass ich am Ende jedes Instanznamens ein "_mc", "_btn" oder" _txt"  anhänge. Mit Hilfe dieser Anhänge können wir zum einen schnell identifizieren, um was für ein Objekt das es sich handelt, und zum anderen bekommen wir so die Codehilfen von Flash.

Bilder

Hier werden die verfügbaren Methoden eines MovieClips angezeigt.

1. Funktion für die Buttons

Als Erstes werden wir eine Funktion schreiben, die das TextField im "con_mc" mit entsprechendem Text füllt.
Zuerst brauchen wir einen EventListener, der auf einen Klick reagiert.

buttons_mc.addEventListener(MouseEvent.CLICK, onClick);
buttons_mc.buttonMode = true;// Damit aktivieren wir den HandCursor, wenn wir über den Buttons sind.


Damit wir nur ein EventListener brauchen, habe ich alle Buttons in einen leeren MovieClip gepackt. Welcher Button geklickt wurde, werden wir in der funktion "onClick" herausfinden.
Mit einer "switch"-Fallentscheidung können wir je nach angeklicktem Button eine Anweisung ausführen.

Dies sieht wie folgt aus:

switch (e.target.name)
        {
            case "eins_btn": 
            	con_mc.con_txt.text= "Page01" 
            break;
            case "zwei_btn":
              con_mc.con_txt.text= "Page02"
            break;
            case "drei_btn":
              con_mc.con_txt.text= "Page03"
            break;
            case "vier_btn":
              con_mc.con_txt.text= "Page04"
            break;
        }

Und so funktioniert's:
switch (e.target.name) prüft, auf welchen Button geklickt wurde, und stellt seinen Namen fest.
Der Name des Buttons steht nach "case", und alles, was sich nun zwischen ":" und break; befindet, wird  ausgeführt. In unserem Fall ändert sich der Text im TextField .

Bevor wir nun die nötigen Änderungen machen, um SWFaddress zum Laufen zu bringen, müssen wir erst die HTML erstellen/ändern.

Source-Code bis jetzt:

buttons_mc.addEventListener(MouseEvent.CLICK, onClick)
function onClick (e:MouseEvent):void
{
	switch (e.target.name)
        {
            case "eins_btn": 
            	con_mc.con_txt.text= "Page01" 
            break;
            case "zwei_btn":
              con_mc.con_txt.text= "Page02"
            break;
            case "drei_btn":
              con_mc.con_txt.text= "Page03"
            break;
            case "vier_btn":
              con_mc.con_txt.text= "Page04"
            break;
        }
}

2. HTML ändern

Damit SWFAddress überhaupt funktionieren kann, müssen wir die HTML etwas modifizieren und zwei JavaScript Dateien importieren.
Drückt F12 in Flash, dadurch wird eine HTML-Datei im selben Verzeichnis wie die SWF erstellt.
Als Nächstes brauchen wir die JavaScript-Dateien sowie die AS-Klasse. Diese können unter http://www.asual.com/swfaddress/ bezogen werden.
Ich arbeite mit der derzeit aktuellen Version 2.4.

Nach dem Download des Paketes kopieren wir folgende Dateien:

swfaddress - > swfaddress-2.4.zipswfaddress-2.4distjs
swfobject und expressinstall.swf -> swfaddress-2.4.zipswfaddress-2.4samplesflashswfobject
SWFAddress.as und SWFAddressEvent.as ->swfaddress-2.4.zipswfaddress-2.4distas3 (kompletter Ordner "com").

Das kommt nun alles in euer Projekt-Verzeichnis.


Bilder

Ändert auch den Namen der HTML-Datei, damit sie nicht versehentlich durch "Veröffentlichen" in Flash überschrieben wird.
Jetzt, da wir alle benötigten Dateien haben, öffnen wir die HTML-Datei.
Fügt nun folgende 2 Zeilen direkt unter dem Title <Tag> ein.
 

<title>SWFAddress_demo</title>
        <script type="text/javascript" src="swfobject/swfobject.js"></script>
        <script type="text/javascript" src="swfaddress/swfaddress.js"></script>
    
	



Prüft, ob der Pfad zu den Scripts stimmt:

src="swfaddress/swfaddress.js" = die .js Datei befindet sich im Ordner swfaddress.

Damit wären die nötigen Anpassungen in der HTML-Datei erledigt.

 

3. ActionScript anpassen

Als Erstes müssen wir die swfadress-Klasse importieren.
import com.asual.swfaddress.*;
Dies importiert alle .as Dateien, die sich im Ordner swfaddress befinden.

Danach brauchen wir eine Funktion, die den Titel ändert.
Erst brauchen wir den EventListener, der jedes Mal, wenn sich der Wert von SWFAddress ändert (CHANGE), die funktion "onChange" auslöst.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange);
function onChange (e:SWFAddressEvent):void
	{

	}

Die Funktion füllen wir mit folgendem Inhalt:
 

 if(e.value != "/")//wenn der Wert von SWFAddress nicht = "/" ist...(dies ist immer der Fall, sobald ein Button gedückt wurde).
            SWFAddress.setTitle("SWFAddress - Demo - " + e.value.substring(1));// zieht dem Wert von SWFAddress das erste Zeichen ab ("/")und ändert den Website-Titel.
 else{//zu Beginn ist der Wert von SWFAddress = null, dies wird nur ausgeführt, solange der Wert von SWFAddress nicht geändert wurde.
            SWFAddress.setTitle("SWFAddress - Demo - Start");//ändert den Website-Titel.
			}


In die onClick Funktion schreiben wir nun noch SWFAddress.setValue("/"+con_mc.con_txt.text).
Diese Zeile ändert den Wert (setValue) von SWFAddress und löst somit die Funktion "onChange" aus.

So sieht dann der Code soweit aus:
 

import com.asual.swfaddress.*; //importiert die SWFAddress-Klasse.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange); //ein eventListener, der auf eine Veränderung von SWFAddress reagiert.
function onChange(e:SWFAddressEvent):void//wird immer dann ausgeführt, wenn sich etwas ändert (Eingabe einer URL, Browser Reload, Browser vorwärts, Browser zurück, oder durch Setzen eines neuen Wertes (SWFAddress).
    {  
	   if(e.value != "/")//wenn der Wert von SWFAddress nicht = "/" ist...(dies ist immer der Fall, wenn ein Button gedrückt wurde.)
            SWFAddress.setTitle("SWFAddress - Demo - " + e.value.substring(1));// zieht dem Wert von SWFAddress das erste Zeichen ab ("/")und ändert den Website-Titel.
       else{//zu Beginn ist der Wert von SWFAddress = null, dies wird nur ausgeführt, solange der Wert von SWFAddress nicht geändert wurde.
            SWFAddress.setTitle("SWFAddress - Demo - Start");//ändert den Website-Titel.
			}
	}
	
buttons_mc.addEventListener(MouseEvent.CLICK, onClick)
function onClick (e:MouseEvent):void
{
	switch (e.target.name)
        {
            case "eins_btn": 
            	con_mc.con_txt.text= "Page01" 
            break;
            case "zwei_btn":
              con_mc.con_txt.text= "Page02"
            break;
            case "drei_btn":
              con_mc.con_txt.text= "Page03"
            break;
            case "vier_btn":
              con_mc.con_txt.text= "Page04"
            break;
        }
	SWFAddress.setValue("/"+con_mc.con_txt.text);//ändert den Wert von SWFAddress
}

Wenn wir das nun testen, wird der Titel bei jedem Klick auf die Buttons geändert und der Titel entspricht dann dem con_txt Text.
Drücken wir nun den " Zurück"-Button des Browsers, ändert sich zwar der Titel, aber der Inhalt der SWF bleibt gleich.

Um das zu lösen, müssen wir zuerst eine neue Variable namens"currentNavi" erstellen.

var currentNavi:String;

Dies enthält den Text für das TextField (con_txt) und den Wert von SWFAddress.
Außerdem benötigen wir eine neue Funktion:

function navigate()
    {	
       con_mc.con_txt.text = currentNavi   //ändert den Text im container.
    } 

Auch die Funktion "onClick" benötigt einige Änderungen:

function onClick(e:MouseEvent):void//wird ausgeführt, wenn auf einen Button geklickt wird.
    {
		switch (e.target.name)//führt die Anweisung aus, welche dem e.target.name (Buttons)entspricht.
        {
            case "eins_btn": //wenn der Wert des angeklickten Buttons "eins_btn" entspricht,
            	currentNavi = "Page01" //ändert den Wert der Variable currentNavi zu "Page01"
            break;//beendet die Anweisung.
            case "zwei_btn":
              currentNavi = "Page02"
            break;
            case "drei_btn":
              currentNavi = "Page03"
            break;
            case "vier_btn":
              currentNavi = "Page04"
            break;
        }
		SWFAddress.setValue("/"+currentNavi);//ändert den Wert von SWFAddress
    }


Zu guter Letzt fügen wir noch Folgendes an die "onChange" Funktion an:

 

		switch(e.value)
            {
                case "/Page01":
                currentNavi = "Seite 01"//ändert die Variable currentNavi zu "Seite 01". 
                break;
                case "/Page02":
                currentNavi = "Seite 02"
                break;
                case "/Page03":
                currentNavi = "Seite 03"
                break;
                case "/Page04":
                currentNavi = "Seite 04"
                break;
                case "/": //Wird ausgeführt, solange SWFAddress den Standardwert besitzt.
                currentNavi = "Start"
                break;
            }
        navigate();//führt die Funktion "navigate" aus, welche den Wert vom currentNavi an das TextField weitergibt.

Funktionsweise:

Beim Start wird bereits das erste Mal die "onChange" Funktion ausgeführt.
Da der Wert von SWFAddress = "/" ist, wird das "else" ausgeführt, und  bei "switch" wird dem "currentNavi" dern Wert "Start" übergeben.
Danach wird die Funktion navigate() ausgeführt, die den Text von "con_txt" ändert.

Beim Klick auf einen der Buttons wird zuerst der Wert vom "currentNavi", je nach Button, geändert, und an SWFAddress übergeben.
Dies löst wieder die Funktion "onChange" aus, ändert den Titel entsprechend (SWFAddress.setTitle("SWFAddress - Demo - " + e.value.substring(1));) und führt wieder die "navigate"-Funktion aus.


Zum Schluss noch der komplette Action Script Code:

import com.asual.swfaddress.*; //importiert die SWFAddress Klasse.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange); //ein eventListener, der auf eine Veränderung von SWFAddress reagiert.

var currentNavi:String;//Erstellt eine Variable vom typ String.

function onChange(e:SWFAddressEvent):void//wird immer dann ausgeführt, wenn sich etwas ändert (Eingabe einer URL, Browser Reload, Browser vorwärts, Browser zurück, oder durch Setzen eines neuen Wertes(SWFAddress).
    {  
	   if(e.value != "/")//wenn der Wert von SWFAddress nicht = "/" ist...(dies ist immer der Fall, wenn ein Button gedückt wurde).
            SWFAddress.setTitle("SWFAddress - Demo - " + e.value.substring(1));// zieht dem Wert von SWFAddress das erste Zeichen ab ("/")und ändert den Website-Titel.
        else{//zu beginn ist der Wert von SWFAddress = null, dies wird nur ausgeführt, solange der Wert von SWFAddress nicht geändert wurde.
            SWFAddress.setTitle("SWFAddress - Demo - Start");//ändert den Website-Titel.
			}
		switch(e.value)
            {
                case "/Page01":
                currentNavi = "Seite 01"//ändert die Variable currentNavi zu "Seite 01". 
                break;
                case "/Page02":
                currentNavi = "Seite 02"
                break;
                case "/Page03":
                currentNavi = "Seite 03"
                break;
                case "/Page04":
                currentNavi = "Seite 04"
                break;
                case "/": //Wird ausgeführt, solange SWFAddress den Standartwert besitzt.
                currentNavi = "Start"
                break;
            }
        navigate();//führt die Funktion "navigate" aus, welche den Wert vom currentNavi an das TextField weitergibt.
    }
buttons_mc.addEventListener(MouseEvent.CLICK, onClick); //Hört auf das Anklicken des buttons_mc und dessen Inhalt(z.b. eins_btn).
buttons_mc.buttonMode = true; //Anzeige des Handcursors

function onClick(e:MouseEvent):void//wird ausgeführt, wenn auf einen Button geklickt wird.
    {
		switch (e.target.name)//führt die Anweisung aus, welche dem e.target.name (buttons)entspricht.
        {
            case "eins_btn": //wenn der Wert des angeklickten Buttons "eins_btn" entspricht,
            	currentNavi = "Page01" //ändert  den Wert der Variable currentNavi zu "Page01"
            break;//beendet die Anweisung.
            case "zwei_btn":
              currentNavi = "Page02"
            break;
            case "drei_btn":
              currentNavi = "Page03"
            break;
            case "vier_btn":
              currentNavi = "Page04"
            break;
        }
		SWFAddress.setValue("/"+currentNavi);//ändert den Wert von SWFAddress
    }
function navigate()
    {
		
       con_mc.con_txt.text = currentNavi   //ändert den Text im Container.
    } 

Das war es schon.
Ich wünsche viel Spaß beim Nachbauen bez. Einbauen in eure Website.

Wichtig:
Damit das ganze lokal funktioniert, müsst ihr bei den Flash-Sicherheits-Einstellungen den Pfad zum Projekt-Ordner zu den vertrauenswürdigen Orten hinzufügen:

Flashplayer Settings

DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von kogge22
  • 17.02.2011- 09:26

na mal sehen ob mich dieses tutorial weiter bringt. suche ja schon eine ganze zeit nach einem passenden für mich.

Portrait von HeiKu
  • 02.04.2010- 01:50

Endlich eine detaillierte Erklärung. Ich wünschte, ich hätte das Tutorial früher entdeckt. Hab ewig rumprobieren müssen, bis es mit dem deep linking bei mir geklappt hat.
Vielen Dank.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.03.2010- 18:30

super erklärt auf gut für anfänger

Portrait von gotzkowsky
  • 29.03.2010- 15:41

verständliche erklärung, vielen Dank

Portrait von johanna52
  • 29.03.2010- 10:45

interessant, mal sehn, wo ich das nun einsetzten könnte


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×