Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

Kommentare

  • Alternative Portrait von kogge22

    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.

  • Alternative Portrait von HeiKu

    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

    User hat PSD-Tutorials.de verlassen

    29.03.2010 - 18:30

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

  • Alternative Portrait von gotzkowsky

    gotzkowsky

    29.03.2010 - 15:41

    verständliche erklärung, vielen Dank

  • Portrait von johanna52

    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.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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
vBulletin 0.036 • ZF-App 0.479 • Total 0.515