Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 10 Datum und Zeit
  Pfeil 10.1 Gegenwart, Vergangenheit und Zukunft
  Pfeil 10.2 Zeit und Uhr
  Pfeil 10.3 Countdown


Rheinwerk Computing - Zum Seitenanfang

10.3 Countdown  topZur vorigen Überschrift

Bis jetzt hatten Sie nur mit einem Datum zu tun. Dies reicht dann nicht mehr aus, wenn Sie einen Countdown realisieren möchten. Ein Countdown zählt immer den Zeitunterschied zwischen zwei Daten. Das heißt, Sie müssen das eine vom anderen Datum abziehen.

Das klingt zwar recht einfach, doch bald werden Sie auf einige Schwierigkeiten wie Schaltjahre und Sommerzeit stoßen.

ActionScript erleichtert Ihnen aber die Arbeit, da alle Daten den gleichen Bezugspunkt haben: den 1.1.1970 (der so genannte Unix-Zeitstempel). Ein Datum kann als Zeitetappe in Millisekunden, gerechnet von diesem Zeitpunkt, ausgedrückt werden. Wenn Sie zwei Daten voneinander abziehen, ist das Ergebnis also ein Wert in Millisekunden.

Diese Vorgehensweise setzt das nächste Beispiel in die Tat um. Ausgangspunkt ist die Datei countdown.fla mit einigen Textfeldern, die Sie auf der CD-ROM finden. Die Textfelder verwenden aus optischen Gründen eine etwas ungewöhnliche Schriftart namens Liquid Kidz. Sie finden Sie zum Download unter http://www.fontalicious.com/. Fünf dynamische Textfelder sollen die Differenz zwischen dem aktuellen Datum und dem vom Nutzer in das Eingabetextfeld eingetippte Datum ausgeben. Wann geschieht dies? Immer wenn der Nutzer auf die Schaltfläche Start drückt.

Schritt für Schritt: Flexibler Countdown

Wie aus einigen Beispielen bereits gewohnt, arbeiten wir hier mit Ereignisprozeduren. Deswegen landet der komplette Code im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript.

Am Anfang steht die Ereignisprozedur für die Start-Schaltfläche:

_root.start_btn.onRelease = function() {

Definieren Sie jetzt Variablen für die Differenz zwischen den Daten und instanziieren Sie das aktuelle Datum als Date-Objekt:

var differenz_num:Number = 0;
var aktuell_date:Date = new Date();

Die Differenz (differenz_num) erhält anfangs den Wert 0. Dieser Wert kommt zum Einsatz, wenn der Nutzer ein Datum angibt, das in der Vergangenheit liegt.

Das Countdown-Datum lesen Sie aus dem Eingabetextfeld ein und wandeln es mit der Methode split(Trennzeichen) in einen Array um:

var datum_array:Array = datum_str.split(".");

Dieser Schritt bedarf der Erklärung: Die Eingabe des Nutzers im Eingabetextfeld ist per se ein zusammenhängender String. Wie machen Sie nun daraus einen Datumswert?

Zuerst benötigen Sie die einzelnen Bestandteile des Datums. Mit split(Trennzeichen) können Sie dann ein Trennzeichen angeben. Dieses Trennzeichen kann allerdings auch aus mehreren Zeichen bestehen.

ActionScript teilt den String an den Stellen des Trennzeichens und macht aus den daraus resultierenden Teilstrings ein Array.

Im nächsten Schritt erstellen Sie ein neues Date-Objekt und füllen es mit den Werten des Arrays als Parameter:

var enddatum_date:Date = new Date(Number(datum_array[2]), 
Number(datum_array[1]) – 1, Number(datum_array[0]));

Achten Sie vor allem auf die Reihenfolge: Der Nutzer gibt sein Datum in der deutschen Reihenfolge Tag, Monat und Jahr an.

Sie müssen also das letzte Element des Arrays als ersten Parameter angeben, dann das mittlere für den zweiten Parameter und zum Schluss den Tag als dritten Parameter. Der Monat ist für das Date-Objekt wie gewohnt um 1 kleiner als der reale Monat.

Die Funktion Number() wandelt die Strings im Array in Zahlen um. Diese Umwandlung übernimmt ActionScript automatisch, wenn Sie Number() weglassen.

Allerdings ist diese Vorgehensweise etwas unsauber und unter Umständen in späteren ActionScript-Versionen untersagt.

Fügen Sie eine if-Abfrage ein, die den Countdown nur berechnet, wenn das Countdown-Datum größer als das aktuelle Datum ist, wenn es also in der Zukunft liegt:

if (enddatum_date > aktuell_date) {

Als Nächstes ziehen Sie die zwei Daten voneinander ab und beenden die if-Abfrage:

differenz_num = enddatum_date – aktuell_date;
   }

Nun müssen Sie aus der Differenz, die Sie in Millisekunden erhalten, vernünftige Zeiteinheiten machen:

var jahre_num:Number = Math.floor(differenz_num / 
31536000000);
var tage_num:Number = Math.floor(differenz_num / 
86400000) – jahre_num * 365;
var stunden_num:Number = Math.floor(differenz_num / 
3600000) – jahre_num * 8760 – tage_num * 24;
var minuten_num:Number = Math.floor(differenz_num / 
60000) – jahre_num * 525600 – tage_num * 1440 – stunden_num * 60;
var sekunden_num:Number = Math.floor(differenz_num / 
1000) – jahre_num * 31536000 – tage_num * 86400 – 
stunden_num * 3600 – minuten_num * 60;

Das Prinzip ist dabei immer gleich: Sie rechnen die Millisekunden in die Zeiteinheit um (z.  B. differenz_num / 8640000) und runden das Ergebnis ab (Math.floor()). Ziehen Sie dann die für übergeordnete Zeiteinheiten schon verwendeten Zeitwerte ab, und zwar in der aktuellen Zeiteinheit (jahre_num * 365, Jahre werden also in Tagen ausgedrückt).

Zum Schluss schreiben Sie die Werte in die dafür vorgesehenen Textfelder:

jahre_inhalt_str = jahre_num.toString();
tage_inhalt_str = tage_num.toString();
stunden_inhalt_str = stunden_num.toString();
minuten_inhalt_str = minuten_num.toString();
sekunden_inhalt_str = sekunden_num.toString();
};

Die Methode toString() wandelt die numerischen Werte in Strings um. Diese Angabe ist zwar nicht notwendig, aber etwas ordentlicher.

Abbildung 10.7 Ein Knopfdruck zeigt, wie lange es noch dauert bis zum 1.1.2010.

Die Datei mit dem fertigen Beispiel trägt den Namen countdown_AS2.fla. Wir haben noch einige Varianten angefügt wie beispielsweise countdown_zweistellig_AS2.fla (gibt per Hilfsfunktion auch einstellige Werte als zweistellige aus). Von beiden finden Sie jeweils auch Varianten für ActionScript 1 im Ordnern FlashMX. Zu guter Letzt zeigt countdown_ticken_AS2.fla bzw. countdown_ticken_AS1.fla, wie ein Countdown immer weiter tickt. Dafür sorgt die Funktion setInterval() mit einem Aufruf, den Sie bereits vom Uhren-Beispiel aus diesem Kapitel kennen:

_root.start_btn.onRelease = function() {
   aktualisieren();
   setInterval(aktualisieren, 200);
};

Die eigentliche Countdownfunktionalität ist unverändert, nur steckt sie in diesem Beispiel in der Funktion aktualisieren().

Abbildung 10.8 Der Countdown läuft von selbst.

 



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern