Anzeige
Tutorialbeschreibung

Textscroller mit Actionscript

Textscroller mit Actionscript

In diesem kleinen Tutorial zeige ich euch, wie man mit etwas Actionscript einen kleinen Text-Scroller baut.
-Perfekt für Anfänger-


Schritt 1

Zuerst müssen wir ein Textfeld auf der Bühne erstellen. Dazu klicken wir das auf das große A in der Werkzeugpalette. Und wählen damit den Bereich für unseren Text aus.

Bilder

  

Schritt 2

Damit wir später das Textfeld mit unseren Befehlen ansprechen können müssen wir ihm einen Instanznamen verpassen. Dazu schreibt ihr in das linke umrandete Eingabenfeld der Eigenschaften-Palette textfeld dazu wählt ihr im Dropdownmenü darüber Dynamischer Text  und im mittleren Dropdownmenü Mehrzeilig aus.

Ebenso wichtig wie der Instanzname ist eine Variable anzugeben, die den Text des Textfeldes enthält. Dazu müssen wir in dem rechten rot umrandeten Textfeld textvar eingeben.

Bilder

 

Schritt 3

Zu einem Scroller gehören natürlich auch zwei Scrollbuttons, die wir nun erstellen müssen. Dazu nehmen wir das Rechteckwerkzeug und zeichnen zwei Vierecke wie um Bild.

Bilder


Bilder

Die wir dann, nachdem mir wieder das Auswahlwerkzeug angeklickt haben, die Ecken des oberen Vierecks greifen und zur Mitte ziehen.

Bilder


Bilder

So dass unser Pfeil nun so aussieht:

Bilder

 

Schritt 4

Damit wir aber zwei Pfeile haben müssen wir diesen auswählen und kopieren: STRG+C

Und wieder einfügen: STRG+V

Dann dreht ihr ihn indem ihr das "Frei transformieren" Tool nehmt.

Bilder

Und positioniert den Pfeil.

 

Schritt 5

Jetzt müsst ihr jeweils den Pfeil auswählen und ihn in eine Schaltfläche umwandeln indem ihr F8 drückt. Im erscheinenden Fenster müsst ihr "Schaltfläche" auswählen.

Bilder

Dann gebt ihr dem Hoch-Pfeil den Instanznamen up und dem Runter-Pfeil den Instanznamen down (siehe Schritt 2).

 

Schritt 6

Jetzt endlich werden wir an den Code gehen.
Dazu müsst ihr in eurer Zeitleiste auf euren ersten Frame klicken (im Bild unten schwarz) und dann das Aktionen-Fenster öffnen, in das ihr dann die nachfolgenden Codeausschnitte eingebt.

Bilder


Zu erst geben wir unserem Textfeld in halt. Dazu nehmen wir die zuvor definierte Variable textvar  und weißen dieser Text zu.

Code:

 var textvar = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus hendrerit magna tristique mauris. Donec quis ipsum gravida eros mattis lobortis. Nullam eget mi. Nulla nunc. Nam adipiscing commodo metus. Vivamus quis ante. Etiam feugiat tincidunt nisi. Maecenas cursus blandit eros. Curabitur erat. In placerat nulla a erat. Ut scelerisque ipsum sit amet erat. Phasellus viverra luctus enim. Donec tellus leo, faucibus ut, suscipit sed, interdum sed, odio. Vivamus nec sapien. Aliquam varius elit gravida tortor sollicitudin porttitor. Vestibulum dapibus aliquam nunc.Nullam risus. Duis faucibus faucibus urna. Suspendisse vel dolor. Phasellus eget nisi. Morbi dolor justo, placerat ut, scelerisque vitae, vestibulum in, risus. Suspendisse hendrerit turpis. Fusce lacinia. Suspendisse nibh turpis, pulvinar nec, vulputate mattis, elementum ac, velit. Aliquam erat volutpat. Nulla suscipit elit in magna. Suspendisse pellentesque.Sed laoreet nisi ornare diam.';

 

Schritt 7

Nun müssen wir den Up- und Down-Buttons eine onPress-Funktion zuweisen. Dazu schreiben wir folgenden Code:

 

Code:

 up.onPress = function() {
            up_var = true;
};
down.onPress = function() {
            down_var = true;
};

 

Hier wird zunächst eine Variable definiert, die uns später Auskunft über die Scrollrichtung geben wird.

 

Schritt 8

Natürlich müssen wir den Scrollvorgang beim Verlassen der Buttons wieder aufheben.

Dazu definieren wir jeweils eine onRelease- und OnReleaseOutside-Funktion, die die Variablen zur Statusabfrage wieder auf false setzen

 

Code:

 up.onRelease = up.onReleaseOutside=function () {
            up_var = false;
};
down.onRelease = down.onReleaseOutside=function () {
            down_var = false;
};

 

Schritt 9

Damit unser Text auch wirklich gescrollt wird dient uns eine onEnterFrame-Function die Ständig unsere up_var- und down_var-Werte in eine if-else if-Schleife abfragt und bei dem Wert true anfängt zu scrollen und natürlich beim Verlassen des Buttons wieder stoppt.

Code:

 onEnterFrame = function () {

     if (up_var == true) {

         textfeld.scroll -= 1;

    } else if (down_var == true) {
         textfeld.scroll += 1;
    }
};

Schon ist euer Textscroller fertig. Euer gesamter Code sollte nun so aussehen: 

Code:

 var textvar = "Lorem ipsum dolor…";
up.onPress = function() {
            up_var = true;
};
down.onPress = function() {
            down_var = true;
};
up.onRelease = up.onReleaseOutside=function () {
            up_var = false;
};
down.onRelease = down.onReleaseOutside=function () {
            down_var = false;
};
onEnterFrame = function () {
            if (up_var == true) {
               textfeld.scroll -= 1;
            } else if (down_var == true) {
               textfeld.scroll += 1;
            }
};

 
und das ist das Ergebnis eurer harten Arbeit:


 

Was will man mehr?!


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 17.10.2012 - 14:02

Klasse Anleitung, schnell nachvollziehbar. Was will man mehr :-)
Vielen Dank.
LG Susan

Portrait von ghassan
  • 31.07.2011 - 13:16

Ich finde es gut und verständlich. Nur wie kann ich damit lange Texte und Textumbrüche umsätzen?
Ich möchte auf einer Homepage die AGB als Scrolltext mit down- und up-Pfeilen (kein Scrollbalken) darstellen. Sobald ich einen Textumbruch bewirke, bekomme aber eine Fehlermeldung.
Vielen Dank vorab!

Portrait von Zoidbert
  • 12.02.2011 - 16:38

sehr gut verstänglich... gleichmal nachgebaut... thx

Portrait von wkoac
  • 03.08.2010 - 12:11

Sehr schön ausführlich erklärt... da kann ich eigentlich gar nichts falsch machen ;-) Danke

Portrait von Chaya93
  • 18.07.2010 - 15:00

hi!

sehr schönes tutorial, das für mich als absoluten flash-neuling sehr gut verständlich war.
danke dafür :)

Portrait von DraQ
  • 08.07.2010 - 11:21

cool.....danke dafür

Portrait von Scylares
  • 09.02.2010 - 11:50

Top! Genau was ich (schon viel zu lange) gesucht habe.

Portrait von d3221
  • 30.01.2010 - 01:22

NICE - Genau was ich gesucht hab :) Danke :]

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.11.2009 - 19:10

geniales tutorial. alles verstanden. hab aber nur eine frage und zwar ob und wenn ja wie man da bilder in dieses textfeld einbinden kann

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.11.2009 - 19:27

Eigentlich eine gute Idee, aber ein Scrollbalken wäre etwas komfortabler.

Portrait von kleeaar
  • 04.11.2009 - 11:30

Hi... Ich habe auch auf meiner Seite ein Tutorial zu einem Scrollbalken... http://www.jules-london.com/index.php?tutorial=9&title=Scrollbalken%20mit%20AS2.0

Portrait von schnellse
  • 02.11.2009 - 15:15

danke! schön erklärtes, funktionierendes tut!

:)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.09.2009 - 04:02

Gut verständlich und funktioniert bestens :)

Portrait von hottest
  • 31.07.2009 - 16:08

Schöne kurze Anleitung, kann ich gut gebrauchen und vielleicht noch etwas ausbauen.

Portrait von hottest
  • 31.07.2009 - 16:01

Verdammt gutes Tutorial, finde ich super!! Thx!

Portrait von TiniA
  • 23.06.2009 - 15:08

Super erklärt und es funktioniert sofort. Danke dir.

Portrait von suslik87
  • 20.06.2009 - 14:15

Super Sache, danke! Gerne mehr von solchen Tutorials!

Portrait von black-hat
  • 08.06.2009 - 10:21

"Was will man mehr?!"

Neue Tuturials von dir! - ^^ richtig gut gestaltet, danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.05.2009 - 14:25

Sehr informativ!!! Richtig klasse...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.04.2009 - 00:11

Verdammt gutes Tutorial, finde ich super!! Thx!

x
×
×