Tutorialbeschreibung

Passwortabfrage mit Flash per Actionscript 2

Passwortabfrage mit Flash per Actionscript 2

Flash gibt uns die Möglichkeit, mit einfachen Mitteln etwas mit einem Passwort zu schützen. Darüber hinaus lernt ihr in diesem Tutorial, wie man ein Anmeldeformular erstellt und sich später mit den eingegebenen Information zu einer Seite Zutritt verschafft. Das Tutorial richtet sich an Anfänger, die mit der Arbeitsumgebung und der Programmiersprache (AS2.0) von Flash etwas vertraut sind. Ich habe versucht, das Tutorial so einfach und nachvollziehbar wie möglich zu gestalten.


Hallo und herzlich willkommen zu meinem Tutorial auf PSD-Tutorials.de!

In diesem Tutorial besprechen wir folgende Dinge:
  1. Speichern von Eingabefeldern in Variablen
  2. Dynamisches Einlesen von Variablen in Arrays
  3. Vergleich zwischen Variablen und Werten aus Arrays
  4. for-Schleifen
  5. if-Anweisungen

Lasst uns am besten sofort mit dem Projekt beginnen.

Schritt 1.)

Wir öffnen ein neues Projekt (Actionscript 2) und ändern die Bühnengröße auf 400x200px.
Danach erstellen wir in der Hauptzeitleiste eine neue Ebene mit dem Namen "Aktionen". Die alte Ebene benennen wir um in "Content".

Folgendes ist nun zu erledigen:

In die Ebene Content setzen wir einen neuen MovieClip mit dem Instanznamen "content_mc".
In die Aktions-Ebene setzen wir folgendes Script:
var NameArray:Array = new Array();
var PassArray:Array = new Array();
Wir erstellen also 2 leere Arrays mit den Namen "NameArray" und "PassArray". In diese Arrays sollen später unsere Namen sowie Passwörter gespeichert werden.

Schritt 2.)

Jetzt wechseln wir in unseren Content MovieClip. Wir erhalten eine neue Zeitleiste und eine neue Arbeitsfläche.

Im content_mc brauchen wir wieder 2 Ebenen "Content" und "Aktionen" sowie insgesamt 4 Keyframes auf beiden Ebenen.

Zeitleiste von content_mcBilder


Wir wechseln nun ins erste Keyframe der Content-Ebene und erstellen uns ein "kleines Menü".

Dazu brauchen wir 2 Buttons. Einen "Registrieren"-Button und einen "Login"-Button.
Der "Registrieren"-Button bekommt den Instanznamen reg_btn .
Der "Login"-Button bekommt den Instanznamen log_btn .

In das erste Frame der Aktionsebene schreiben wir folgenden Code:
stop();

reg_btn.onRelease = function(){
    gotoAndStop(2);
}

log_btn.onRelease = function(){
    gotoAndStop(3);
}
Der Code macht nichts anderes als in das entsprechende Keyframe (2 oder 3) zu wechseln, wenn der jeweilige Button losgelassen wird (onRelease).

Bilder


Schritt 3.)

Wir wechseln ins 2. Keyframe der Content-Ebene und erstellen jetzt unser Registrierungsformular.

Dazu brauchen wir 2 Textfelder, 2 Eingabefelder und einen Button.
Die Textfelder dienen einfach der Beschriftung der Eingabefelder. D.h., wir nennen sie einmal "Name" und einmal "Passwort".
Die Eingabefelder bekommen den Instanznamen "name_txt" und "pass_txt".
Der Button bekommt den Instanznamen "save_btn".

Zusätzlich ändern wir das Verhalten von pass_txt in Passwort. Das sorgt dafür, dass die Buchstaben ausgeblendet werden.

In das 2. Frame der Aktionsebene kommt nun dieser Code:
stop();

save_btn.onRelease = function(){

    var Name:String = name_txt.text;
    var Pass:String = pass_txt.text;

    _root.NameArray.push(Name);
    _root.PassArray.push(Pass);

    gotoAndStop(1);


};
Dieser Code macht Folgendes:
Beim Loslassen von save_btn werden die beiden Eingabefelder in die Variable "Name" und "Pass" gespeichert.
Danach werden die Variablen an die zugehörigen Arrays übergeben. Das geschieht mit der push-Funktion.
Wenn alles fertig ist, wird wieder ins erste Keyframe gewechselt.

Bilder



Schritt 4.)

Jetzt wird's interessant: Wir kommen zum Login-Formular. Was wir dazu brauchen?
2 Textfelder ("Name" und "Passwort"), 2 Eingabefelder , ein dynamisches Textfeld und einen Senden-Button.
Die Eingabefelder erhalten die Instanznamen "nameInput_txt" und "passInput_txt". passInput_txt verhält sich wieder wie ein Passwortfeld.
Das dynamische Textfeld erhält den Instanznamen "error_txt".
Der Button bekommt den Instanznamen "login_btn".

Bilder


In das 3. Frame der Aktionsebene schreiben wir nun folgenden Code:

name_input.text = "";
pass_input.text = "";
login_btn.onRelease = function() {

	var i = 0;
	var laenge = _root.NameArray.length-1;

	for (i; i<=laenge; i++) {
		if (name_input.text == _root.NameArray[i] && pass_input.text == _root.PassArray[i]) {
			gotoAndStop(4);
		} else {
			error_txt.text = "Flascher Benutzername und/oder Passwort";
		}
	}
};
Was machen wir mit diesem Code??
name_input.text = "";
pass_input.text = "";

Zunächst werden die beiden Eingabefelder komplett gelöscht. Manchmal schleicht sich da nämlich ein kleines Leerzeichen ein, und das ist dann der Grund dafür, dass am Ende nichts mehr funktioniert.
Jetzt wird der Button angesprochen. Hier deklarieren wir zuerst die Variable [i] (Wird für die Schleife benötigt) und die Länge des Arrays.
Warum nehmen wir nur NameArray, um die Länge festzulegen? Ganz einfach: Es muss genauso viele Passwörter geben, wie es Namen gibt.

Jetzt geht es mit der Schleife los:
for (i; i<=laenge; i++) {
Wenn [i] kleiner als die Länge unseres Arrays ist, wird [i] immer um eins erhöht. ( i++ ).

if (name_input.text == _root.NameArray[i] && pass_input.text == _root.PassArray[i]) {
	gotoAndStop(4);
} else {
	error_txt.text = "Falscher Benutzername und/oder Passwort";
}
Wenn der Text in unserem Eingabefeld name_input einem Wert in unserem Array NameArray entspricht UND (&&) der Text aus unserem Eingabefeld pass_input einem Wert aus unserem Array PassArray entspricht, soll ins 4. Frame gewechselt und dort angehalten werden.
Falls eine dieser Bedingungen oder sogar beide NICHT zutreffen sollten, wird in unserem dynamischen Textfeld eine Meldung angezeigt. (Hier: "Falscher Benutzername und/oder Passwort")


Schritt 5.)

Geht ins letzte Schlüsselbild auf der Aktionsebene und setzt dort wieder ein stop(); .
Den Inhalt dieses 4. Frames auf der Content-Ebene können jetzt nur noch Personen sehen, die sich mit eurem Formular registriert und eingeloggt haben.



Hoffentlich hat euch mein Tutorial gefallen. Die Arbeitsdatei findet ihr im Anhang.

Liebe Grüße, Reb00t

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von NexMen
  • 28.04.2010 - 09:34

Was es heutzutage alles gibt? Wollte schon immer mal einen Passwortschutz zumindestens mal ausprobieren... Und dann noch so nachvollziehbar erklärt...
Danke! ^^

Portrait von lithobear
  • 28.04.2010 - 09:04

Danke für die Erstellung des Tutorials ich werde es ausprobieren

Portrait von williamo
  • 28.04.2010 - 04:23

da ich kein AS kann, gut nachvollziehbar Thx

Portrait von breakdown
  • 28.04.2010 - 03:13

danke fuer das schoene tutorial

Portrait von JuMee
  • 27.04.2010 - 21:08

danke für das tutorial..werds dann mal ausprobieren :)

Portrait von dma666
  • 27.04.2010 - 08:10

Vielen Dank auch, habe lange nach soetwas gesucht!

x
×
×