Anzeige
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

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von SSmaster123
  • 05.06.2012 - 14:42

Das Formular funktioniert nicht ganz so recht bei mir :/
Ich habe zwei Buttons (Login) & (Register) nachdem ich meine Daten unter Register vermerkt habe springt es automatisch zurück zur Startpage dort klicke ich dann Login.

Sobald ich die Daten eingebe steht da ''Flascher Benutzername und/oder Passwort'.

Könnte mir jemand vielleicht erklären was ich falsch mache ?

Portrait von ibanez87
  • 04.03.2012 - 20:44

naja bei mir funktioniert es nicht hab es jetzt 20x probiert schade :(

Portrait von simonej
  • 11.01.2012 - 09:53

Hallo
gutes tut um verschachtelungen zu verinnerlichen und das arbeiten mit Instanzen
aber achtung:

- beim abschnitt
„Die Eingabefelder erhalten die Instanznamen "nameInput_txt" und
"passInput_txt". passInput_txt verhält sich wieder wie ein Passwortfeld.“

muss man aufpassen dass man die namen dann auch richtig im AS zuweist!!!:

nameInput_txt.text = "";
passInput_txt.text = "";

login_btn.onRelease = function() {
var i = 0;
var laenge = _root.NameArray.length-1;
for (i; i

Portrait von naddo
  • 07.11.2011 - 16:10

danke für das tutorial, sehr gut nachvollziehbar für mich als blutigen anfänger ;)

Portrait von dastan
  • 26.04.2011 - 13:42

Danke euch genau sowas habe ich gebraucht!

Portrait von dastan
  • 26.04.2011 - 14:05

gibt es auch ein tut. mit anmeldungsformular?

Portrait von Reb00t
  • 26.04.2011 - 20:48

Das Anmeldeformular ist doch enthalten?
Oder was meinst du?

Portrait von pxc007
  • 01.11.2010 - 08:26

Nette Idee, schön geschrieben aber wirklich nicht sher nützlich. ;)

Portrait von admblacky
  • 16.05.2010 - 20:03

bekomme bei der PSD-Login.fla immer nur die Meldung
Unerwartetes Daeiformat
wo ran kann das liegen ??????
Nutz Flash CS 3

Portrait von Reb00t
  • 27.05.2010 - 13:05

Sorry, dass die Antwort erst so spät kommt.
Schick mir mal per PN deine Mail Adresse dann schicke ich dir die Datei nochmal!

lg, Reb00t

Portrait von medienbox
  • 08.05.2010 - 06:44

Gute Idee, aber eigentlich nutzlos. Obwohl anders angekündigt, ist dieses TUT für Anfänger wenig geeignet.

Portrait von Fralle
  • 11.05.2010 - 18:30

naja, sicher findet man bei Google vieles dazu, aber gerade das wäre der interessante Teil. Ich finde das solltest Du auf jeden Fall noch reinbringen (zum. eine Möglichkeit der externen Speicherung).<br>
<br>
Weil, wie gesagt, in der jetzigen Form ist es zwar ein Anfang, aber immer noch ziemlich nutzlos...

Portrait von Fralle
  • 04.05.2010 - 18:44

Sorry, aber ohne Benutzername und PW irgendwo in einer DB auf einem Server zu speichern ist das ganze doch total nutzlos...

Wofür kann ich das Script benutzen, wenn eine Registrierung nur solange gültig ist, wie auch die SWF im Browser geladen ist, sprich: die Internetseite geöffnet ist?

Klärt mich auf.

Portrait von Reb00t
  • 04.05.2010 - 19:04

Das Tutorial soll auch nur zeigen was möglich ist. Natürlich kann man das ganze noch mit ner php etc. aufpeppen! Dieses Tutorial soll ja ein Einstieg sein. Was man daraus macht ist jedem selbst überlassen. Es ist ein ANFÄNGERTUTORIAL! Und es soll ANFÄNGERN ermöglichen einen Überblick zu erhalten wie man so etwas angeht. Mit 10 Sekunden Google + Grips kann man das Script so umbauen, dass die Passwörter in ne externe Datei gespeichert werden. MfG, Reb00t

Portrait von Reb00t
  • 02.05.2010 - 13:58

Was du natürlich machen kannst:

Das Passwortarray in ne txt speichern und die txt zusätzlich nochmal mit htaccess sichern!

Habe mich sehr lange mit Hacken etc. beschäftigt und ein gutes htaccess ist nicht zu knacken!

Die einzige Methode wäre ne Bruteforce Attacke und mit nem herkömmlichen Rechner dauert so ne Bruteforce Monate, wenn nicht sogar Jahre!

lg, Reb00t

Portrait von Ploedman
  • 01.05.2010 - 16:27

hast recht, hab ich total vergessen das man leicht an die swf Dateien usw. ran kommt. Wenn ich mir die addons fürs FireFox anschaue...

Portrait von Ploedman
  • 30.04.2010 - 09:53

Danke dir, endlich weg von .htaccess da krieg ich immer ein mulmiges gefühl.

Portrait von Reb00t
  • 30.04.2010 - 12:40

ACHTUNG!

Ich würde das trotzdem noch mit HtAccess schützen, da man sich die SWF saugen kann und mit nem Decompiler an den Code kann!

lg, Reb00t

Portrait von miamigo
  • 30.04.2010 - 06:48

Absolut gut beschrieben. Genau das habe ich gesucht :)

Portrait von bernardp
  • 29.04.2010 - 17:28

Danke für das Tut. Gut nachvollziehbar, kann man gut gebrauchen.

x
×
×