Anzeige
Tutorialbeschreibung

Schreibmaschineneffekt mit Flash ( kurz Typewriter )

Schreibmaschineneffekt mit Flash ( kurz Typewriter )

Schreibmaschineneffekt mit Flash ( kurz Typewriter )
Mit diesem Tutorial möchte ich euch zeigen wie man Textinhalte, mit onEnterFrame oder setInterval, Buchstabe für Buchstabe erscheinen lassen kann.


Schreibmaschineneffekt mit Flash ( kurz Typewriter )

Mit diesem Tutorial möchte ich euch zeigen wie man Textinhalte, Buchstabe für Buchstabe, erscheinen lassen kann.
Ich bin bekannt dafür das ich Sachen gerne ausführlich erkläre.
Wer also denkt ich mach es so kurz wie möglich der täuscht sich.
Ich mache es so verständlich wie möglich.

Ich biete für unseren Typewriter zwei Lösungswege oder besser gesagt zwei Möglichkeiten an.
Eine onEnterFrame Funktion und als zweites eine setInterval Funktion.


Zunächst das ganze als Vorschau, wie es denn zum Schluss funktionieren sollte.
Text eingeben und einfach einen Button wählen. Los gehts!



Fangen wir auch gleich mal an!

Als erstes erstellen wir eine neue Bühne.
Die Größe spielt hierbei keine Rolle. So das Ihr am besten damit klar kommt.
Ich habe hier in meinem Beispiel 300 x 200 Pixel gewählt und verwende eine Framerate von 40 Bilder pro Sekunde.

Als nächstes benötigen wir ein Textfeld.
Das Textfeld muss auf "dynamischer Text" gestellt werden.
Als Instancenamen vergeben wir hier "
ausgabe".

Bilder


Jetzt widmen wir uns dem eigentlichen Script.
Diesen legen wir einfach in unserem ersten Frame ab.


Bilder

Teil 1 - onEnterFrame

Zuerst der fertige Code.
Wenn das Textfeld erstellt und der Code im ersten Frame liegt dann müsst ihr nur noch veröffentlichen.
Ich werde ihn danach Zeile für Zeile sehr ausführlich erklären.
Wenn Ihr euch alles durchlest dann versteht Ihr es auch. Selbst die, die kaum ActionScript können.
Denn einfach nur rauskopieren kann jeder.

Z. Nr.

Action Script

1
2
3
4
5
6
7
8
9

var inhalt:String = "PSD-Tutorials.de! Was sonst?";
var i:Number = 0;
onEnterFrame =
function () {
 
i++;
 
ausgabe.text = inhalt.substr(0, i);
 
if (inhalt.substr(0, i) == inhalt) {
   
delete this.onEnterFrame;
  }
}

1. Zeile:






var inhalt:String beinhaltet unseren Text, welcher später ja angezeigt werden soll.
Bei
inhalt:String handelt es sich um eine Variable die nur Strings verarbeitet und ausgibt.
Darum könnte man mit
inhalt:String nicht rechnen.
Der Wert würde nicht hinzu gerechnet sonder einfach an die Variable angefügt.
Zum Rechnen müsste man
inhalt:Number schreiben.
Um ein späteres Fehlverhalten im Script auszuschließen, typisiert man eine Variable im Vorfeld.
In diesem Fall ist unsere Variable vom Typ
:String, da sie nur Text speichern und ausgeben soll.
2. Zeile:



i ist unsere Variable die wir später zum Hochzählen benötigen.
Der Buchstabe ist beliebig gewählt. Man könnte auch counter schreiben.
Ich habe i als :Number definiert da wir mit i nun rechnen wollen.
Ich habe i einen Anfangswert von Null gegeben.
3. Zeile:


Hier beginnen wir nun mit der onEnterFrame Funktion. onEnterFrame sagt nichts anderes aus wie:
"Beim Entern des Bildes". Unser Script, innerhalb dieser
onEnterFrame Funktion, wird also ständig, von oben nach unten, aufgerufen.
4. Zeile:



i++; bedeutet eigentlich das i um 1 erhöht wird.
Man könnte aber auch i = i + 1; schreiben. Das wäre das gleiche.
In der 2. Zeile sagten wir ja i = 0. Nun zählen wir i einfach um eins hoch. Somit erhält i, im ersten Durchgang der
onEnterFrame Funktion, einen Wert von 1.
5. Zeile:








Hier sagen wir nun was eigentlich passieren soll. Mit ausgabe.text sprechen wir unser Textfeld an.
Dieses soll ja anzeigen was in dieser Funktion geschieht. Darum ausgabe
.text =
Mit .substr(0, i); können wir unseren String ab einer bestimmten stelle und eine bestimmte Anzahl von Zeichen anzeigen lassen.
Der erste Wert, in der Klammer, steht für die Stelle ab wo unserer String angezeigt werden soll.
In unserem Fall die Null. Denn unser String soll ja von Anfang an gezeigt werden.
An zweiter stelle fügen wir nun die Variable i ein. i ist in diesem Fall gleich 1.
Es wird also der erste Buchstabe in unserem String angezeigt.
Na...merkt ihr schon worauf das hinaus läuft?
6. Zeile:







Mit dieser if-Anweisung prüfen wir ob .substr(0, i); schon die gleiche Anzahl an Zeichen enthält wie unser eigentlicher Text auch besitzt.
Da wir uns aber gerade im ersten Durchlauf befinden kann das also noch nicht der Fall sein und die Anweisung gibt ein
false zurück.
Dadurch wird die 7. Zeile nicht ausgeführt und die
onEnterFrame Funktion wird erneut aufgerufen.
Das spiel beginnt somit von vorne, i wird wieder um eins addiert und hat somit den Wert 2.
Es wird also bei diesem Durchlauf der zweite Buchstabe in unserem Textfeld angezeigt.
Jetzt müsset es bei euch klick gemacht haben!
7. Zeile:

Sollte die if-Anweisung true als Wert zurückgeben, sprich unser Text wird vollständig angezeigt,
dann wird hier die
onEnterFrame Funktion mit delete beendet. this bedeutet "diese"...klar!
8. Zeile:
Mit dieser geschweiften Klammer schliessen wir unsere if-Anweisung.
9. Zeile:


Mit dieser geschweiften Klammer schliessen wir unsere onEnterFrame Funktion.
Merke:
Wird eine geschweifte Klammer geöffnet,
muss sie auch wieder geschlossen werden.


Teil 2 - setInterval


Die eigentliche Arbeitsweise unterscheidet sich nicht von der onEnterFrame Funktion.
Lediglich das Ausführen unserer Funktion geschieht anders.
Zuerst der fertige Code.
Ich werde ihn danach wieder Zeile für Zeile ausführlich erklären.

Z. Nr.

Action Script

1
2
3
4
5
6
7
8
9
10
11

var inhalt:String = "PSD-Tutorials.de! Was sonst?";
var time:Number = 1000;
var i:Number = 0;
var mein_interval = setInterval(this, "interval", time);
function interval() {
  i++;
  ausgabe.text = inhalt.substr(0, i);
  if (inhalt.substr(0, i) == inhalt) {
    clearInterval(mein_interval);
  }
}

1. Zeile:
var inhalt:String beinhaltet wieder unseren Text, welcher später angezeigt werden soll.
2. Zeile:





Mit der Variable Time können wir später die Zeit bestimmen welche vergehen soll bis ein Zeichen angezeigt werden soll.
time ist vom Typ :Number. Muss nicht da wir eigentlich nicht rechnen. Aber man könnte. :-)
1000 steht für Millisekunden. 1000 bedeutet also 1 Sekunde.
Stellt man den Wert nun beispielsweise auf 1, so wäre diese Version schneller als die onEnterFrame Funktion.
3. Zeile:
i wird in diesem Fall wieder als counter benutzt.
4. Zeile:





Die Variable mein_interval startet unsere Interval-Funktion.
Man müsste dazu keine Variable verwenden. In unserem Fall aber schon. Später mehr....
Der erste Wert in der Klammer sagt
this aus. this sagt wiedermal zu Deutsch "diese" aus.
Der zweite Wert wird mit dem Namen unserer Funktion benannt, welche ja gestartet werden soll.
Der dritte wert steht für die Zeit, die verstreichen soll bis die Funktion erneut aufgerufen wird.
Hier haben wir die Variable time verewigt. Dieser gaben wir oben schon den Wert von 1000.
5. Zeile:
Hier beginnt unsere Funktion.
6. Zeile:
i wird wieder um eins addiert.
7. Zeile:
Hier geschieht wieder das gleiche wie im oberen Script.
8. Zeile:
In dieser Zeile überprüfen wir wieder ob alles angezeigt wird. Ebenfalls das gleiche wie oben.
9. Zeile:


Sollte alles angezeigt werden so beenden wir mit clearInterval unsere Funktion interval();
Dazu brauchen wir die Variable mein_interval. Denn mit dieser haben wir die Interval Funktion gestartet.
Und nur mit dieser können wir diese auch wieder beenden.
10. Zeile: Mit dieser geschweiften Klammer schliessen wir unsere if-Anweisung.
11. Zeile: Mit dieser geschweiften Klammer schliessen wir unsere Funktion.
Denke ans Merke!


Ich hoffe Ihr habt dieses Tutorial verstanden.
Ich wünsche nun viel Spaß damit.


Euer Schinki


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von adobeuser01
  • 25.09.2016 - 22:20

Vielen Dank für das tolle Tutorial !

Portrait von putzili2609
  • 24.08.2012 - 15:00

Vielen Dank für das Tutorial, werde ich bestimmt mal brauchen können :)

Portrait von DessIntress
  • 16.12.2010 - 00:04

klasse, dank dir ;) werd ich morgen oder später noch testen

Portrait von Katja1008
  • 13.01.2010 - 12:02

Super Tutorial und gut zu gebrauchen. Selten ein Tutorial gesehen, welches so gut im Detail erklärt ist..

Portrait von tequi
  • 29.09.2009 - 13:55

toll erklärtes tutorial

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.09.2009 - 10:42

ok, aber brauche ein script für ganz vciel text, wie soll das gehen?

Portrait von TiniA
  • 14.06.2009 - 18:37

Sehr gut erklärt und vor allem ausführlich.

Portrait von Noog
  • 03.06.2009 - 20:38

Top!

Super erklärt, und auch verständlich vorallem mit den Zeilen.
Einen tut von dir, immer wieder gerne!

Noog

Portrait von sarah20
  • 28.05.2009 - 08:48

Super erklärt :) Danke

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 06.05.2009 - 11:58

für anfänger gut erklärt

Portrait von as140
  • 04.03.2009 - 10:14

Bin wirklich blutiger Anfänger, für mich ist es leider nicht so klar und bekomme es leider auch nicht ans Laufen -werd mich mal auf Ursachenforschung begeben, (falsche AS-Version, oder liegt es and der Flash-Version?)
Schade,der Code ist super gut erklärt!

Portrait von kaltestantchen
  • 06.02.2009 - 15:37

super mal mit schrift. ich mach alles über die Bilder. Vielleicht versteh ich ja dann alles besser.

Portrait von kighta
  • 18.07.2008 - 10:50

Wirklich hilfreich für den Einstieg - super für blutige Anfänger erklärt! Danke fürs Erstellen :)

Portrait von jannik
  • 13.06.2008 - 10:19

Super Teil.... hab ich als Anfänger sofort verstanden ;-)
Ich finde Deine genauigkeit für Anfänger gerade richtig, sollten alle so machen.
Mfg

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.12.2007 - 19:54

Hi schön erklärt selbst ich hab es gleich verstanden. Mal eine andere frage wie bekomme ich das Eingabefeld transparent oder geht das gar nicht?

MfG

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.12.2007 - 20:08

PS Habe es selbst rausgefunden.

Portrait von okiwan
  • 18.10.2007 - 01:43

Super Tutorial
Alles sehr versändlich (sogar für mich :D )
Vielen Dank dafür

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.02.2007 - 19:13

Toll, kann man gut gebrauchen....

Grüßle
EASY

Portrait von poisoned
  • 27.10.2006 - 05:58

hi, find ich super was du machst!
Bist ja direkt deine ganz eigene Flash Fabrik...*gg*
Hab so einiges von dir auf psd-tutors gefunden!

Greez, pois

Portrait von schinki
  • 14.09.2006 - 19:28

Ich habe die .fla zu den Downloads gepackt. Einfach mal schauen... Lg Schinki

x
×
×