SWISHmax - Wir "basteln eine Uhr" (für Fortgeschrittene)

  • Seit gut einem Monat gibt es eine neue Version von Swish und zwar SWISH MAX. Den Link zur Trialversion finden Sie am Ende des Tutorials! Diese Version ist nach wie vor sehr Einsteiger-freundlich, ermöglicht aber schon echte "Kunstgriffe". Ich persönlich habe mich noch nicht wirklich mit Swish Max beschäftigen können, aber dank Flashbane von http://die-grafik-ecke.d-c-e.de/ - DER-GRAFIK-ECKE kann ich Ihnen schon einmal zeigen, was das Programm wirklich kann.Heute erstellen wir uns eine funktionierende Uhr.So sieht Sie aus (kann Sie aussehen). Die Farbe des Hintergrundes wurde hier im Quelltext als weiß (FFFFFF) angegeben. Sie können natürlich die Farbe an Ihren Homepage-Hintergrund anpassen. Fangen wir mit den Date Objekt an.Verfügbarkeit ab Flash Player 5.Verwendungnew Date()new Date(jahr,monat [,tag [,stunde[,minute [,sekunde[,millisekunde]]]]])Parameter >getFullYear< für die vollständige Jahreszahl (eine vierstellige Zahl, z. B. 2000) des angegebenen Date-Objekts gemäß Ortszeit zurück. Die Ortszeit wird durch das Betriebssystem bestimmt, unter dem der Flash Player ausgeführt wird. >getMonth< für Monat. Eine Ganzzahl von 0 (Januar) bis 11 (Dezember). >getDay< für Tag. Eine Ganzzahl von 1 bis 31. Dieser Parameter ist optional. >getHouers< für Stunde. Eine Ganzzahl von 0 (Mitternacht) bis 23 (23.00 Uhr). >getMinutes< für Minute. Eine Ganzzahl von 0 bis 59. Dieser Parameter ist optional. >getSeconds< für Sekunde. Eine Ganzzahl von 0 bis 59. Dieser Parameter ist optional. >getMillisconds< für Millisekunde. Eine Ganzzahl von 0 bis 999. Dieser Parameter ist optional. Rückgaben Eine Ganzzahl. Beschreibung >Objekt;< erstellt ein neues Date-Objekt, das den aktuellen Datums- und Uhrzeitwert bzw. das angegebene Datum aufnimmt.Machen wir ein Beispiel für eine Datumsanzeige.Als erstes brauchen wir ein neues Textfeld und zwar ein dynamisches als Ausgabeplatzhalter für unser Datum. Sie klicken in der Werkzeugleiste auf das Textsymbol und ziehen auf der Leinwand einen ausreichend großen Rahmen. In dem Textfeld selber geben Sie keinen Text ein. Im Eigenschaftsrahmen klicken Sie auf Text und geben dem Textfeld den Namen "datumstextfeld". Dies ist der Variablenname, in dem dann das Datum ausgegeben werden soll. Nun gehen Sie bitte zurück in Scene1, klicken auf das Scriptregister der Leinwand und schreiben folgendes Script hinein:<b>onFrame (1){meinDatum = new Date();datumstextfeld = ((meinDatum.getMonth() + 1) + "/" +meinDatum.getDate() + "/" +meinDatum.getFullYear());} Fertig ist die Datumsanzeige. Im Ausgabefenster steht jetzt z. B. 01/01/2003 als Datumsanzeige. Nun probieren Sie einfach mal, anstatt getMonth oder getDate die Parameter >getHouers, getMinutes< oder >getSecond< einzufügen, dann werden Sie sehen, dass die aktuelle Uhrzeit angezeigt wird.Natürlich können wir mit den Parametereigenschaften von new Date auch Objekte bewegen lassen. Dazu verwenden wir die MovieClip Eigenschaft _rotation:Verwendung >meinMovieclip._rotation< ( Unterteilt in 360 Grad )Wie Sie oben lesen konnten, geben die Parameter Zahlenwerte zurück. Die Sekunde z. B. zischen 0 und 59. Also wird jede Sekunde der Zahlenwert um 1 erhöht.Zeichnen wir also auf der Leinwand ein Objekt, z. B. einen Zeiger für die Sekundenanzeige. Markieren Sie den Zeiger und wählen Sie Transform im Eigenschaftsfeld. Setzen Sie den Mittelpunkt des Zeigers unter Anchor point auf Bottom Center. Wandeln Sie dann mit Modify/Convert den Zeiger in einen Sprite um und geben dem Sprite im Eigenschaftsfeld Sprite den Namen sekunde. Nun gehen wir wieder in die Scene_1, öffnen das Script Register und geben folgendes Script ein: onFrame (2) {zeit = new Date;sekunde._rotation = zeit.getSeconds()*6;} Das Script muss im 2. Frame ausgeführt werden, damit der Zeiger ständig aktualisiert wird.Unser Zeiger heißt Sekunde und bekommt eine Drehung _rotation, 1/360 je Rückgabewert. Weil der Zeiger sich in 60 Sekunden um 360 Grad drehen soll und wir in diesem Zeitraum von getSecond nur 60 Rückgabewerte bekommen, müssen wir die 360 Grad durch 60 teilen. Also 6 Grad pro Sekunde. So kommen wir auf das Script sekunde._rotation = Zeit.getSecond()*6; .Wenn Sie jetzt in das Ausgabefenster schauen, dreht sich der Sekundenzeiger, innerhalb einer Minute, einmal um die eigene Achse.Jetzt können Sie noch Minuten- und Stundenzeiger, wie vorher beschrieben einfügen. Diese bekommen lediglich andere Namen im Eigenschaftsfeld. Das Script muss nur noch so erweitert werden: >onFrame (2) {zeit = new Date;sekunde._rotation = zeit.getSeconds()*6;minute._rotation = zeit.getMinutes()*6;stunde._rotation = zeit.getHours()*30+zeit.getMinutes()/2;}< Eine Besonderheit ist bei dem Stundenzeiger noch hinzugefügt. Der Stundenzeiger soll sich innerhalb von 24 Stunden um die eigene Achse drehen. 360 Grad /24 = 30 Grad. Jetzt würde der Zeiger jede Stunde um 30 Grad vorrücken, wir wollen aber, dass er sich kontinuierlich vor bewegt. Deshalb lassen wir den Zeiger je Minute noch um einen halben Grad vorücken. getMinutes() gibt 60 Rückgabewerte pro Stunde, das sind 60 Grad in der Stunde, geteilt durch zwei macht 30 Grad pro Stunde. zeit.getHouers89*30+getMinutes()/2 . Jetzt rückt der Stundenzeiger pro Minute um einen halben Grad vor und steht zur vollen Stunde an seinem richtigen Platz.Für ganz eilige gäbe es noch den Parameter Milliscond, 1/1000 Sekunde. Sie können noch einen Zeiger mit einem neuen Namen , z. B. radar, machen. Das Script schaut dann so aus: >radar._rotation = zeit.getMilliseconds()*0.36;< .Sie können im Prinzip jede andere Grafik als Zeiger einsetzen und somit gute Effekte erzielen.Ich wünsche allen Swishern noch viel Spaß beim Uhrenbau. http://www.die-grafik-ecke.de - Download des Beispieles inkl . .swi File http://www.swishzone.com/ - Download der Trialversion von SWISH MAX