erstellen einer analogen uhr mit flash in 13 schritten
01. erstelle einen kreis und konvertier ihn in ein movieclip symbol.
02. gehe in die instanz der uhr und erstelle 8 neue ebenen für:
actionscript
sekunden
minuten
stunden
wochentag
datum
monat
ziffern
03. erstelle nun einen zeiger, gehe auf die sekundenebene und zeichene eine linie senkrecht
die annährend so groß wie die uhr selber ist und positionier sie mittig.
(noch nicht direkt den zeiger erstellen bzw halbieren, benutze für die grüße und zum positionieren das die eingabemöglichkeit
im info-fenster, drücke Strg+I)
04. konvertier den zeiger in ein symbol und gib ihn den instanznahemn "sek".
05. gehe in diese instanz und lösche ein tick mehr als die hälfte des zeigers.
die mitte des movieclips ist jetzt immernoch dort als würde die linie über die ganze uhr gehen,
somit haben wir immernoch den richtigen drehpunkt welches den zeiger korekt um den mittelpunkt der uhr bewegt.
06. so machst du das jetzt auch bei den minuten und stundenzeiger in den entspr. ebenen.
instanzname des minutenzeigers: "min"
instanzname des stundenzeigers: "std"
07. erstelle nun ein textfeld in der wochentag ebene,
gib zwei buchstaben ein(für eine bessere ansicht zum bearbeiten), bestimme die farbe, die größe etc und gib ihr den variablennamen "wt".
der textverlauf sollte mittig sein.
in diesen textfeld wird dann über das actionscript entsprechend dem datum der inhalt eingefügt.
08. mach das gleiche in den ebenen chr datum und chr monat.
variablenname chr datum: "dat"
variablenname chr monat: "mon"
09. mach alle ebenen auf die länge von zwei frames(ersten frame einer ebene anklicken und F5 drücken),
rechtsklick auf die actionscript ebene und "aktionen" wählen.
der as-editor wird geöffnet und dort trägst du dieses script ein:
var tDate = new Date();
sek._rotation = tDate.getSeconds()*6;
min._rotation = tDate.getMinutes()*6;
std._rotation = tDate.getHours()*30+(tDate.getMinutes()/2);
// Datum
if (tDate.getDate()<=9) {
this.dat = "0"+tDate.getDate();
} else {
this.dat = tDate.getDate();
}
// monat
var monarr = new Array("JAN", "FEB", "MÄR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OKT", "NOV", "DEZ");
this.mon = monarr[tDate.getMonth()];
// tag der woche
var wtarr = new Array("SO", "MO", "DI", "MI", "DO", "FR", "SA");
this.wt = wtarr[tDate.getDay()];
das script ist so simpel, das brauch ich sicherlich nicht zu erklären.
(bzw. nutz das actionscript lexikon unter hilfe)
10. erstellen eines ziffernblattes: geh in die ziffernebene, erstelle dort ein text mit den zahlen 1-12 (mit leerzeichen zwischen den zahlen)
und positionier den in der mitte.
11. konvertier es in ein symbol, geh in die instanzt und teil den text (Strg+B)
die zahlen "10", "11", "12" mußt du jeweils wieder gruppieren bzw eine nummer wieder anhängen und den überschuß löschen.
12. benutze nun die liniale und das raster (unter ansicht einzustellen) um die zahlen zu positionieren.
richte dich dabei auch an den sekundenzeiger bei der vorschau (Strg+Enter)
13. noch etwas gestalten und die uhr ist fertig.
mfg Prinz
analoge_uhr.fla
02. gehe in die instanz der uhr und erstelle 8 neue ebenen für:
actionscript
sekunden
minuten
stunden
wochentag
datum
monat
ziffern
03. erstelle nun einen zeiger, gehe auf die sekundenebene und zeichene eine linie senkrecht
die annährend so groß wie die uhr selber ist und positionier sie mittig.
(noch nicht direkt den zeiger erstellen bzw halbieren, benutze für die grüße und zum positionieren das die eingabemöglichkeit
im info-fenster, drücke Strg+I)
04. konvertier den zeiger in ein symbol und gib ihn den instanznahemn "sek".
05. gehe in diese instanz und lösche ein tick mehr als die hälfte des zeigers.
die mitte des movieclips ist jetzt immernoch dort als würde die linie über die ganze uhr gehen,
somit haben wir immernoch den richtigen drehpunkt welches den zeiger korekt um den mittelpunkt der uhr bewegt.
06. so machst du das jetzt auch bei den minuten und stundenzeiger in den entspr. ebenen.
instanzname des minutenzeigers: "min"
instanzname des stundenzeigers: "std"
07. erstelle nun ein textfeld in der wochentag ebene,
gib zwei buchstaben ein(für eine bessere ansicht zum bearbeiten), bestimme die farbe, die größe etc und gib ihr den variablennamen "wt".
der textverlauf sollte mittig sein.
in diesen textfeld wird dann über das actionscript entsprechend dem datum der inhalt eingefügt.
08. mach das gleiche in den ebenen chr datum und chr monat.
variablenname chr datum: "dat"
variablenname chr monat: "mon"
09. mach alle ebenen auf die länge von zwei frames(ersten frame einer ebene anklicken und F5 drücken),
rechtsklick auf die actionscript ebene und "aktionen" wählen.
der as-editor wird geöffnet und dort trägst du dieses script ein:
var tDate = new Date();
sek._rotation = tDate.getSeconds()*6;
min._rotation = tDate.getMinutes()*6;
std._rotation = tDate.getHours()*30+(tDate.getMinutes()/2);
// Datum
if (tDate.getDate()<=9) {
this.dat = "0"+tDate.getDate();
} else {
this.dat = tDate.getDate();
}
// monat
var monarr = new Array("JAN", "FEB", "MÄR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OKT", "NOV", "DEZ");
this.mon = monarr[tDate.getMonth()];
// tag der woche
var wtarr = new Array("SO", "MO", "DI", "MI", "DO", "FR", "SA");
this.wt = wtarr[tDate.getDay()];
das script ist so simpel, das brauch ich sicherlich nicht zu erklären.
(bzw. nutz das actionscript lexikon unter hilfe)
10. erstellen eines ziffernblattes: geh in die ziffernebene, erstelle dort ein text mit den zahlen 1-12 (mit leerzeichen zwischen den zahlen)
und positionier den in der mitte.
11. konvertier es in ein symbol, geh in die instanzt und teil den text (Strg+B)
die zahlen "10", "11", "12" mußt du jeweils wieder gruppieren bzw eine nummer wieder anhängen und den überschuß löschen.
12. benutze nun die liniale und das raster (unter ansicht einzustellen) um die zahlen zu positionieren.
richte dich dabei auch an den sekundenzeiger bei der vorschau (Strg+Enter)
13. noch etwas gestalten und die uhr ist fertig.
mfg Prinz
analoge_uhr.fla